Active Staking 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
+  padding: $space_large $space_big
+  gap: $space_big
+  color: white
+  position: relative
+
+  &.Full
+    background: linear-gradient(180deg, #9340E6 0%, #7534A9 100%)
+
+  &.Halfway
+    background: linear-gradient(180deg, #F77400 0%, #F57F00 100%)
+
+  .DiamondIcon
+    font-size: 130px
+    position: absolute
+    top: -$space_normal
+    right: -$space_normal
+
+  .RewardCard
+    display: flex
+    flex-direction: column
+    align-items: center
+    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,226 @@
+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 { useFetchUserPrevReward } from 'src/rtk/features/activeStaking/hooks'
+import { PrevRewardStatus } from 'src/rtk/features/activeStaking/prevRewardSlice'
+import { useMyAddress } from '../auth/MyAccountsContext'
+import { FormatBalance } from '../common/balances'
+import Avatar from '../profiles/address-views/Avatar'
+import { twitterShareUrl } from '../urls'
+import { openNewWindow } from '../urls/helpers'
+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')
+    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)
+  }, [myAddress])
+
+  if (!shouldShowModal) return null
+
+  return <InnerProgressModal />
+}
+
+type DisplayedStatus = Exclude<PrevRewardStatus, 'none'>
+const statusClassName: Record<DisplayedStatus, string> = {
+  full: styles.Full,
+  half: styles.Halfway,
+}
+
+const contentMap: Record<
+  'lastWeek' | 'yesterday',
+  Record<DisplayedStatus, { 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!",
+    },
+  },
+  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!',
+    },
+  },
+}
+
+function InnerProgressModal() {
+  const myAddress = useMyAddress() ?? ''
+  const [visible, setVisible] = useState(false)
+  const profile = useSelectProfile(myAddress)
+  const { data } = useFetchUserPrevReward(myAddress)
+
+  useEffect(() => {
+    if (!data) return
+    if (data.rewardStatus === 'none') return
+
+    setVisible(true)
+  }, [data])
+
+  const isUsingLastWeekData = data?.period === 'WEEK'
+  const status = data?.rewardStatus ?? 'half'
+
+  if (status === 'none') {
+    return null
+  }
+
+  const usedContent = contentMap[isUsingLastWeekData ? 'lastWeek' : 'yesterday'][status]
+
+  let hasMissedReward = false
+  try {
+    hasMissedReward = BigInt(data?.missedReward || '0') > 0
+  } catch {}
+
+  const spaceHandleOrId = profile?.struct.handle || profile?.id
+
+  return (
+    <CustomModal
+      visible={visible}
+      onCancel={() => {
+        setVisible(false)
+        progressModalStorage.close()
+      }}
+      title={`Your progress ${isUsingLastWeekData ? 'last week' : 'yesterday'}`}
+      closable
+    >
+      <div
+        className={clsx(styles.ProgressModal, statusClassName[status], 'mt-2')}
+        style={{ overflowX: 'clip' }}
+      >
+        <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 mb-2'>{usedContent.title}</span>
+          <p className='text-center ColorSlate mb-0'>{usedContent.subtitle}</p>
+        </div>
+        <div className='d-flex w-100 GapSmall'>
+          <RewardCard
+            aligment={hasMissedReward ? 'left' : 'center'}
+            title={`${isUsingLastWeekData ? 'Last week' : 'Yesterday'}'s reward`}
+            content={
+              <FormatBalance
+                withMutedDecimals={false}
+                value={data?.earned}
+                precision={2}
+                currency='SUB'
+                decimals={10}
+              />
+            }
+            withDiamond
+          />
+          {hasMissedReward && (
+            <RewardCard
+              aligment='left'
+              title='Missed rewards'
+              tooltip='How many SUB you could have received by liking at least 10 posts yesterday'
+              content={
+                <FormatBalance
+                  withMutedDecimals={false}
+                  value={data?.missedReward}
+                  precision={2}
+                  currency='SUB'
+                  decimals={10}
+                />
+              }
+            />
+          )}
+        </div>
+      </div>
+      <Button
+        type='primary'
+        size='large'
+        className='mt-4'
+        onClick={() =>
+          openNewWindow(
+            twitterShareUrl(
+              spaceHandleOrId ? `/${spaceHandleOrId}` : `/accounts/${myAddress}`,
+              `I earned #SUB ${
+                isUsingLastWeekData ? 'last week for my activity' : 'yesterday'
+              } on @SubsocialChain! 🥳\n\nFollow me here and join The Creator Economy!`,
+            ),
+          )
+        }
+      >
+        Share on X!
+      </Button>
+    </CustomModal>
+  )
+}
+
+function RewardCard({
+  content,
+  title,
+  tooltip,
+  withDiamond,
+  aligment,
+}: {
+  aligment: 'center' | 'left'
+  withDiamond?: boolean
+  title: string
+  tooltip?: string
+  content: ReactNode
+}) {
+  return (
+    <div
+      className={clsx(
+        styles.RewardCard,
+        aligment === 'center' ? 'align-items-center' : 'align-items-start',
+      )}
+    >
+      {withDiamond && (
+        <DfImage preview={false} src='/images/diamond.png' className={styles.Diamond} />
+      )}
+      <div className={clsx('d-flex GapTiny ColorSlate align-items-center')}>
+        <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/urls/social-share.ts

@@ -15,15 +15,12 @@ type OptionsType = {
 
 export const twitterShareUrl = (url: string, text?: string, options?: OptionsType) => {
   const tags = options?.tags
-  const textVal = text ? `text=${text}` : ''
+  const textVal = text ? `text=${encodeURIComponent(text)}` : ''
   const resolvedUrl = fullUrl(url, options?.externalBaseUrl)
 
-  return encodeURI(
-    `https://twitter.com/intent/tweet?${textVal}&url=${resolvedUrl + '\n\n'}&hashtags=${[
-      SUBSOCIAL_TAGS,
-      ...(tags || []),
-    ]}&original_referer=${url}`,
-  )
+  return `https://twitter.com/intent/tweet?${textVal}&url=${encodeURIComponent(
+    resolvedUrl + '\n\n',
+  )}&hashtags=${[...SUBSOCIAL_TAGS, ...(tags || [])].filter(Boolean)}&original_referer=${url}`
 }
 
 export const linkedInShareUrl = (url: string, title?: string, summary?: string) => {