feat: finish UI for progress modal

src/components/leaderboard/ProgressModal.module.sass

@@ -0,0 +1,43 @@
+@import 'src/styles/subsocial-vars.scss'
+
+.ProgressModal
+  border-radius: $border_radius_huge
+  display: flex
+  flex-direction: column
+  align-items: center
+  background: linear-gradient(180deg, #9340E6 0%, #7534A9 100%)
+  padding: $space_large $space_big
+  gap: $space_huge
+  color: white
+  position: relative
+
+  &.Halfway
+    background: linear-gradient(180deg, #F77400 0%, #F57F00 100%)
+
+  &.NoProgress
+    background: linear-gradient(180deg, #1EC6FB 0%, #0E96F8 100%)
+
+  .DiamondIcon
+    font-size: 130px
+    position: absolute
+    top: -$space_normal
+    right: -$space_normal
+
+  .RewardCard
+    display: flex
+    flex-direction: column
+    border-radius: $border_radius_large
+    background: rgba(248, 250, 252, 0.10)
+    backdrop-filter: blur(24.5px)
+    flex: 1
+    padding: $space_normal
+    position: relative
+
+    .Diamond
+      width: 44px
+      height: 44px
+      position: absolute
+      top: 0
+      right: 0
+      transform: translate(35%, -50%) rotate(-30deg)
+      transform-origin: center

src/components/leaderboard/ProgressModal.tsx

@@ -0,0 +1,170 @@
+import { Button, Tooltip } from 'antd'
+import clsx from 'clsx'
+import dayjs from 'dayjs'
+import { useEffect, useState } from 'react'
+import { SlQuestion } from 'react-icons/sl'
+import { ReactNode } from 'react-markdown'
+import CustomModal from 'src/components/utils/CustomModal'
+import { useSelectProfile } from 'src/rtk/app/hooks'
+import { useMyAddress } from '../auth/MyAccountsContext'
+import { FormatBalance } from '../common/balances'
+import Avatar from '../profiles/address-views/Avatar'
+import { DfImage } from '../utils/DfImage'
+import DiamondIcon from '../utils/icons/Diamond'
+import styles from './ProgressModal.module.sass'
+
+const progressModalStorage = {
+  getIsClosed: () => {
+    const today = dayjs.utc().startOf('day').unix()
+    const closedTimestamp = localStorage.getItem('progress-modal-closed')
+    console.log(closedTimestamp)
+    if (!closedTimestamp) return false
+    return today === Number(closedTimestamp)
+  },
+  close: () => {
+    const today = dayjs.utc().startOf('day').unix()
+    localStorage.setItem('progress-modal-closed', String(today))
+  },
+}
+
+export default function ProgressModal() {
+  const [shouldShowModal, setShouldShowModal] = useState(false)
+  const myAddress = useMyAddress()
+
+  useEffect(() => {
+    setShouldShowModal(!progressModalStorage.getIsClosed() && !!myAddress)
+  }, [])
+  if (!shouldShowModal) return null
+
+  return <InnerProgressModal />
+}
+
+type Status = 'full' | 'half' | 'none'
+const statusClassName: Record<Status, string> = {
+  full: '',
+  half: styles.Halfway,
+  none: styles.NoProgress,
+}
+
+const contentMap: Record<
+  'lastWeek' | 'yesterday',
+  Record<Status, { title: string; subtitle: string }>
+> = {
+  lastWeek: {
+    full: {
+      title: 'Week Striker',
+      subtitle: 'You dominated last week, and maximized your rewards every day! Impressive!',
+    },
+    half: {
+      title: 'Halfway Hero',
+      subtitle:
+        "You had some good activity last week, but you still gave up some rewards. Let's see just a little more this week!",
+    },
+    none: { title: '', subtitle: '' },
+  },
+  yesterday: {
+    full: {
+      title: 'Hustler',
+      subtitle:
+        'Incredible work yesterday! You completed every task and went above and beyond. Your energy is unmatched!',
+    },
+    half: {
+      title: 'Cherry Picker',
+      subtitle:
+        'Good effort yesterday, but you missed out on maximum rewards. Make sure to like at least 10 posts today!',
+    },
+    none: {
+      title: 'Lurker',
+      subtitle:
+        "It looks like you had a quiet day yesterday. We miss you, and hope you'll start being more active!",
+    },
+  },
+}
+
+function InnerProgressModal() {
+  const myAddress = useMyAddress() ?? ''
+  const [visible, setVisible] = useState(true)
+  const profile = useSelectProfile(myAddress)
+
+  const status: Status = 'half'
+  const isBeginningOfWeek = dayjs.utc().day() === 1 // monday
+
+  const usedContent = contentMap[isBeginningOfWeek ? 'lastWeek' : 'yesterday'][status]
+
+  return (
+    <CustomModal
+      visible={visible}
+      onCancel={() => {
+        setVisible(false)
+        progressModalStorage.close()
+      }}
+      title='Your progress last week'
+      closable
+    >
+      <div className={clsx(styles.ProgressModal, statusClassName[status], 'mt-2')}>
+        <DiamondIcon className={styles.DiamondIcon} />
+        <div className='d-flex flex-column align-items-center'>
+          <div className='mb-2'>
+            <Avatar
+              noMargin
+              size={50}
+              asLink={false}
+              address={myAddress}
+              avatar={profile?.content?.image}
+            />
+          </div>
+          <span className='text-center FontLarge FontWeightBold'>{usedContent.title}</span>
+          <p className='text-center ColorSlate mb-0'>{usedContent.subtitle}</p>
+        </div>
+        <div className='d-flex w-100 GapSmall'>
+          <RewardCard
+            title="Last week's reward"
+            content={
+              <FormatBalance
+                withMutedDecimals={false}
+                value='134340000000'
+                precision={2}
+                currency='SUB'
+                decimals={10}
+              />
+            }
+            withDiamond
+          />
+          <RewardCard title='Bonus to Lazy Staking' content={<span>+134%</span>} tooltip='dummy' />
+        </div>
+      </div>
+      <Button type='primary' size='large' className='mt-4'>
+        Post on X!
+      </Button>
+    </CustomModal>
+  )
+}
+
+function RewardCard({
+  content,
+  title,
+  tooltip,
+  withDiamond,
+}: {
+  withDiamond?: boolean
+  title: string
+  tooltip?: string
+  content: ReactNode
+}) {
+  return (
+    <div className={styles.RewardCard}>
+      {withDiamond && (
+        <DfImage preview={false} src='/images/diamond.png' className={styles.Diamond} />
+      )}
+      <div className='d-flex align-items-center GapTiny ColorSlate'>
+        <span className='FontSmall'>{title}</span>
+        {tooltip && (
+          <Tooltip title={tooltip}>
+            <SlQuestion className='FontTiny' />
+          </Tooltip>
+        )}
+      </div>
+      <span className='FontWeightSemibold FontLarge'>{content}</span>
+    </div>
+  )
+}

src/components/main/PageWrapper.tsx

@@ -10,6 +10,7 @@ import CreatorDashboardSidebar, {
   CreatorDashboardSidebarType,
 } from '../creators/CreatorDashboardSidebar'
 import TopUsersCard from '../creators/TopUsersCard'
+import ProgressModal from '../leaderboard/ProgressModal'
 import { useIsMobileWidthOrDevice, useResponsiveSize } from '../responsive'
 import { fullUrl } from '../urls/helpers'
 import Section from '../utils/Section'
@@ -146,6 +147,7 @@ export const PageContent: FC<Props> = ({
     <>
       <HeadMeta {...meta} />
 
+      <ProgressModal />
       {isMobile ? (
         <section className={className}>
           {children}

src/components/utils/icons/Diamond.tsx

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react'
+
+export default function DiamondIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      {...props}
+      width='1em'
+      height='1em'
+      viewBox='0 0 127 126'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        opacity='0.1'
+        d='M18.9182 30.2914L17.4721 31.4856L19.2695 32.0208L33.8044 36.3492L34.3155 36.5014L34.7266 36.1619L56.2801 18.3616L57.7262 17.1674L55.9288 16.6322L41.3939 12.3038L40.8828 12.1516L40.4717 12.4911L18.9182 30.2914ZM46.9097 38.6271L45.4637 39.8213L47.2611 40.3566L82.3231 50.7978L84.1205 51.3331L83.5634 49.5424L75.2593 22.8507L75.1009 22.3415L74.5898 22.1893L69.3854 20.6395L68.8744 20.4873L68.4633 20.8269L46.9097 38.6271ZM95.1103 54.1438L95.2687 54.653L95.7798 54.8052L110.315 59.1336L112.112 59.6688L111.555 57.8781L103.251 31.1864L103.092 30.6772L102.581 30.5251L88.0465 26.1966L86.2491 25.6614L86.8062 27.4521L95.1103 54.1438ZM93.6469 64.1926L93.0315 64.0093L92.6087 64.4927L67.9767 92.6595L69.2803 94.1524L106.346 69.6884L108.136 68.5073L106.081 67.8954L93.6469 64.1926ZM81.8152 62.1467L82.8404 60.9745L81.3479 60.53L42.7532 49.0367L41.2607 48.5923L41.4775 50.1344L48.2154 98.056L48.5197 100.22L49.9584 98.5751L81.8152 62.1467ZM31.159 46.1933L31.0696 45.5574L30.4542 45.3742L18.0201 41.6714L15.9651 41.0594L16.817 43.027L34.4609 83.7834L36.3688 83.2468L31.159 46.1933ZM38.6542 1.46532L110.804 22.9511L125.093 68.879L41.4042 124.114L1.56745 32.0939L38.6542 1.46532Z'
+        fill='white'
+        stroke='white'
+        strokeWidth='2'
+      />
+    </svg>
+  )
+}

src/styles/subsocial.scss

@@ -188,6 +188,9 @@ a {
 .ColorMuted {
   color: $color_muted;
 }
+.ColorSlate {
+  color: $color_shadow_accent;
+}
 .ColorWhite {
   color: white;
 }