Change active & lazy staking to content staking

src/components/creators/CreatorDashboardSidebar.tsx

@@ -1,21 +1,17 @@
 import { SpaceData } from '@subsocial/api/types'
 import clsx from 'clsx'
 import { ComponentProps } from 'react'
-import { useIsCreatorSpace } from 'src/rtk/features/creators/creatorsListHooks'
-import { useFetchStakeData } from 'src/rtk/features/creators/stakesHooks'
 import { useFetchTotalStake } from 'src/rtk/features/creators/totalStakeHooks'
 import { useMyAddress } from '../auth/MyAccountsContext'
 import CreatePostCard from './cards/CreatePostCard'
 import CreatorInfoCard from './cards/CreatorInfoCard'
-import MyStakeCard from './cards/MyStakeCard'
-import StakeSubCard from './cards/StakeSubCard'
 import SupportCreatorsCard from './cards/SupportCreatorsCard'
 import RewardInfoCard from './rewards/RewardInfoCard'
 
 export type CreatorDashboardHomeVariant = 'posts' | 'spaces'
 export type CreatorDashboardSidebarType =
   | { name: 'home-page'; variant: CreatorDashboardHomeVariant }
-  | { name: 'space-page'; space: SpaceData }
+  | { name: 'space-page' }
   | { name: 'post-page'; space: SpaceData }
 
 export type CreatorDashboardSidebarProps = ComponentProps<'div'> & {
@@ -64,48 +60,33 @@ function HomePageSidebar({ variant }: Extract<CreatorDashboardSidebarType, { nam
   )
 }
 
-function SpacePageSidebar({ space }: Extract<CreatorDashboardSidebarType, { name: 'space-page' }>) {
+function SpacePageSidebar({}: Extract<CreatorDashboardSidebarType, { name: 'space-page' }>) {
   const myAddress = useMyAddress() ?? ''
-  const { data: stakeData, loading: loadingStakeData } = useFetchStakeData(myAddress, space.id)
-  const { isCreatorSpace, loading: loadingIsCreator } = useIsCreatorSpace(space.id)
   const { data: totalStake, loading: loadingTotalStake } = useFetchTotalStake(myAddress)
 
-  if (loadingIsCreator || loadingStakeData) {
-    return null
-  }
+  if (loadingTotalStake) return null
 
   const renderTopCard = () => {
-    if (!isCreatorSpace) {
-      if (!totalStake?.hasStaked) return <SupportCreatorsCard />
-      return null
-    }
-
-    if (stakeData?.hasStaked) return <MyStakeCard space={space} />
-    else return <StakeSubCard space={space} />
+    if (!totalStake?.hasStaked) return <SupportCreatorsCard />
+    return null
   }
 
   return (
     <>
       {renderTopCard()}
-      {!loadingTotalStake && totalStake?.hasStaked && <RewardInfoCard />}
+      {totalStake?.hasStaked && <RewardInfoCard />}
     </>
   )
 }
 
 function PostPageSidebar({ space }: Extract<CreatorDashboardSidebarType, { name: 'post-page' }>) {
   const myAddress = useMyAddress() ?? ''
   const { data, loading: loadingTotalStake } = useFetchTotalStake(myAddress)
-  const { loading: loadingCreator } = useIsCreatorSpace(space.id)
-
-  if (loadingCreator) {
-    return null
-  }
 
   return (
     <>
-      <CreatorInfoCard showStakeButton={data?.hasStaked} space={space} />
-      {!loadingTotalStake &&
-        (data?.hasStaked ? <RewardInfoCard /> : <StakeSubCard space={space} />)}
+      <CreatorInfoCard space={space} />
+      {!loadingTotalStake && (data?.hasStaked ? <RewardInfoCard /> : <SupportCreatorsCard />)}
     </>
   )
 }

src/components/creators/MobileRewardDashboard.tsx

@@ -39,7 +39,7 @@ function StakeSubBanner(props: MobileRewardDashboardProps) {
       <div className={clsx(styles.Summary, 'py-2')}>
         <div className={styles.Content}>
           <span className={clsx('d-flex GapTiny align-items-center')}>
-            <span className='FontWeightSemibold'>Stake SUB and earn more</span>
+            <span className='FontWeightSemibold'>Lock SUB and earn more</span>
           </span>
           <div className={clsx('d-flex align-items-center GapTiny')}>
             <Link passHref href={getSubIdCreatorsLink()}>
@@ -51,7 +51,7 @@ function StakeSubBanner(props: MobileRewardDashboardProps) {
                   sendEvent('astake_banner_add_stake', { eventSource: 'mobile-staker-banner' })
                 }
               >
-                Stake SUB
+                Lock SUB
               </Button>
             </Link>
           </div>

src/components/creators/cards/CreatePostCard.tsx

@@ -40,8 +40,7 @@ export default function CreatePostCard({ variant }: CreatePostCardProps) {
         </span>
       </div>
       <span className='FontSmall'>
-        By creating new posts and liking new content of others, stakers of SUB can increase their
-        staking rewards by 50% to 200%.{' '}
+        When users with locked SUB like your posts, you will receive SUB as a reward.{' '}
         <Link href={activeStakingLinks.learnMore}>
           <a
             target='_blank'

src/components/creators/cards/CreatorInfoCard.tsx

@@ -1,9 +1,6 @@
 import { SpaceData } from '@subsocial/api/types'
-import { Button } from 'antd'
 import clsx from 'clsx'
-import { BsBoxArrowUpRight } from 'react-icons/bs'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
-import { FormatBalance } from 'src/components/common/balances'
 import { SpaceFollowersModal } from 'src/components/profiles/AccountsListModal'
 import { OfficialSpaceStatus, SpaceAvatar, useIsMySpace } from 'src/components/spaces/helpers'
 import ViewSpaceLink from 'src/components/spaces/ViewSpaceLink'
@@ -12,29 +9,20 @@ import FollowSpaceButton from 'src/components/utils/FollowSpaceButton'
 import { Pluralize } from 'src/components/utils/Plularize'
 import Segment from 'src/components/utils/Segment'
 import { useSendEvent } from 'src/providers/AnalyticContext'
-import { useIsCreatorSpace } from 'src/rtk/features/creators/creatorsListHooks'
-import { useFetchStakeData } from 'src/rtk/features/creators/stakesHooks'
 import { useFetchTotalStake } from 'src/rtk/features/creators/totalStakeHooks'
 import { getAmountRange } from 'src/utils/analytics'
-import { getSubIdCreatorsLink } from 'src/utils/links'
 import styles from './CreatorInfoCard.module.sass'
 
 export type CreatorInfoCardProps = {
   space: SpaceData
-  showStakeButton?: boolean
 }
 
-export default function CreatorInfoCard({ space, showStakeButton = true }: CreatorInfoCardProps) {
+export default function CreatorInfoCard({ space }: CreatorInfoCardProps) {
   const myAddress = useMyAddress() ?? ''
-  const { isCreatorSpace } = useIsCreatorSpace(space.id)
-  const { data: stakeData } = useFetchStakeData(myAddress, space.id)
   const { data: totalStake } = useFetchTotalStake(myAddress)
   const sendEvent = useSendEvent()
   const isMySpace = useIsMySpace(space.struct)
 
-  const shouldShowStakeButton = isCreatorSpace && showStakeButton
-  const shouldShowFollowButton = !isMySpace
-
   return (
     <Segment className={clsx(styles.CreatorInfoCard)}>
       <div className={styles.TitleContainer}>
@@ -67,71 +55,20 @@ export default function CreatorInfoCard({ space, showStakeButton = true }: Creat
         text={space.content?.about ?? ''}
         limit={120}
       />
-      {!stakeData?.hasStaked ? (
-        (shouldShowFollowButton || shouldShowStakeButton) && (
-          <div className={clsx('GapSmall d-flex flex-column mt-2')}>
-            {shouldShowStakeButton && (
-              <Button
-                target='_blank'
-                type='primary'
-                href={getSubIdCreatorsLink(space)}
-                onClick={() =>
-                  sendEvent('astake_banner_add_stake', {
-                    eventSource: 'creator-info-banner',
-                    spaceId: space.id,
-                  })
-                }
-              >
-                Stake
-              </Button>
-            )}
-            {shouldShowFollowButton && (
-              <div
-                className='w-100'
-                onClick={() =>
-                  sendEvent('follow', {
-                    spaceId: space.id,
-                    eventSource: 'post',
-                    amountRange: getAmountRange(totalStake?.amount),
-                  })
-                }
-              >
-                <FollowSpaceButton className='w-100' space={space.struct} />
-              </div>
-            )}
-          </div>
-        )
-      ) : (
-        <div className={clsx('d-flex flex-column GapNormal', styles.MyStake)}>
-          <div className='GapSmall d-flex align-items-center justify-content-between FontSmall'>
-            <span className='ColorMuted'>My Stake</span>
-            <span className='FontWeightMedium'>
-              <FormatBalance
-                value={stakeData?.stakeAmount}
-                decimals={10}
-                currency='SUB'
-                precision={2}
-              />
-            </span>
-          </div>
-          <Button
-            className={clsx('d-flex align-items-center GapTiny justify-content-center pt-1')}
-            type='primary'
-            ghost
-            href={getSubIdCreatorsLink(space)}
-            target='_blank'
+      {!isMySpace && (
+        <div className={clsx('GapSmall d-flex flex-column mt-2')}>
+          <div
+            className='w-100'
             onClick={() =>
-              sendEvent('astake_dashboard_manage_stake', {
-                eventSource: 'creator-info-banner',
+              sendEvent('follow', {
                 spaceId: space.id,
+                eventSource: 'post',
                 amountRange: getAmountRange(totalStake?.amount),
-                spaceStakeAmountRange: getAmountRange(stakeData?.stakeAmount),
               })
             }
           >
-            Manage my stake
-            <BsBoxArrowUpRight />
-          </Button>
+            <FollowSpaceButton className='w-100' space={space.struct} />
+          </div>
         </div>
       )}
     </Segment>

src/components/creators/cards/MyStakeCard.tsx

@@ -73,7 +73,7 @@ export default function MyStakeCard({ space }: MyStakeCardProps) {
           type='primary'
           ghost
           block={!isMobile}
-          href={getSubIdCreatorsLink(space)}
+          href={getSubIdCreatorsLink()}
           onClick={() =>
             sendEvent('astake_dashboard_manage_stake', {
               spaceId: space.id,

src/components/creators/cards/StakeSubCard.tsx

@@ -28,7 +28,7 @@ export default function StakeSubCard({ space }: StakeSubCardProps) {
           Generate rewards for both you and this creator by staking towards them
         </p>
         <Button
-          href={getSubIdCreatorsLink(space)}
+          href={getSubIdCreatorsLink()}
           target='_blank'
           type='primary'
           block={isSmallMobile || isNotMobile}

src/components/creators/cards/SupportCreatorsCard.tsx

@@ -21,7 +21,7 @@ export default function SupportCreatorsCard() {
           and earn SUB
         </p>
         <p className={clsx(styles.Subtitle, 'mb-3')}>
-          Generate rewards for both you and creators by staking towards them
+          Lock tokens and like posts to generate rewards for you and creators
         </p>
         <Button
           href={getSubIdCreatorsLink()}
@@ -31,7 +31,7 @@ export default function SupportCreatorsCard() {
             sendEvent('astake_banner_add_stake', { eventSource: 'support-creators-banner' })
           }
         >
-          Stake SUB
+          Lock SUB
         </Button>
       </div>
 

src/components/main/HomePage.tsx

@@ -17,6 +17,7 @@ import { getAmountRange } from 'src/utils/analytics'
 import { useIsSignedIn, useMyAddress } from '../auth/MyAccountsContext'
 import { CreatorDashboardHomeVariant } from '../creators/CreatorDashboardSidebar'
 import MobileActiveStakingSection from '../creators/MobileActiveStakingSection'
+import { ShowLikeablePostsProvider } from '../posts/ShowLikeablePostsContext'
 import WriteSomething from '../posts/WriteSomething'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import { CreatorsSpaces } from '../spaces/LatestSpacesPage'
@@ -200,18 +201,21 @@ const TabsHomePage = ({
       {/* <div className={clsx(isMobile ? 'mt-3' : '')}>
         <CommentBanner />
       </div> */}
-      <span>
-        {!isMobile && <AffixTabs tabKey={tab} setKey={onChangeKey} visible={hidden} {...props} />}
-      </span>
-      <Section className='m-0'>
-        <HomeTabs tabKey={tab} className='DfHomeTab' setKey={onChangeKey} {...props} />
-        <TabsContent />
-        <Tooltip title={'Back to top'} placement={'right'}>
-          <BackTop className={style.DfBackToTop}>
-            <Button size={'large'} icon={ToTopIcon} />
-          </BackTop>
-        </Tooltip>
-      </Section>
+      <ShowLikeablePostsProvider tab={tab} filter={type}>
+        <span>
+          {!isMobile && <AffixTabs tabKey={tab} setKey={onChangeKey} visible={hidden} {...props} />}
+        </span>
+
+        <Section className='m-0'>
+          <HomeTabs tabKey={tab} className='DfHomeTab' setKey={onChangeKey} {...props} />
+          <TabsContent />
+          <Tooltip title={'Back to top'} placement={'right'}>
+            <BackTop className={style.DfBackToTop}>
+              <Button size={'large'} icon={ToTopIcon} />
+            </BackTop>
+          </Tooltip>
+        </Section>
+      </ShowLikeablePostsProvider>
     </>
   )
 }

src/components/main/HomePageFilters.tsx

@@ -1,11 +1,12 @@
-import { Col, Radio, RadioChangeEvent, Row, Select } from 'antd'
+import { Checkbox, Col, Radio, RadioChangeEvent, Row, Select } from 'antd'
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { MdVerified } from 'react-icons/md'
 import { ReactNode } from 'react-markdown'
 import config from 'src/config'
 import { useIsMyAddressWhitelisted } from 'src/config/constants'
 import LatestPostsPage from '../posts/LatestPostsPage'
+import { useShowLikeablePostsContext } from '../posts/ShowLikeablePostsContext'
 import { useResponsiveSize } from '../responsive/ResponsiveContext'
 import LatestSpacesPage, { CreatorsSpaces } from '../spaces/LatestSpacesPage'
 import style from './HomePage.module.sass'
@@ -112,6 +113,8 @@ export const Filters = (props: Props) => {
   const { isMobile } = useResponsiveSize()
   const isWhitelisted = useIsMyAddressWhitelisted()
 
+  const { setValue, value } = useShowLikeablePostsContext()
+
   const router = useRouter()
 
   const { type, date } = router.query
@@ -127,18 +130,33 @@ export const Filters = (props: Props) => {
   const needDateFilter =
     !!type && type !== 'latest' && type !== 'suggested' && type !== 'creators' && type !== 'hot'
 
+  const showLikablePostsCheckbox = type === 'latest' && tabKey === 'posts'
+  const hasRightElement = needDateFilter || showLikablePostsCheckbox
+
   if (!needDateFilter && !filterByKey[tabKey]?.length) return null
 
   let filters = filterByKey[tabKey]
   if (!isWhitelisted && tabKey === 'posts') {
     filters = filters.filter(({ value }) => value !== 'hot')
   }
 
+  if (isAffix && showLikablePostsCheckbox) {
+    return (
+      <div className={clsx('AffixCheckbox')}>
+        <Checkbox checked={value} onChange={e => setValue(e.target.checked)}>
+          <span className='ColorMuted' style={{ userSelect: 'none' }}>
+            Show likeable posts only
+          </span>
+        </Checkbox>
+      </div>
+    )
+  }
+
   return (
     <div className={`DfFilters ${!isAffix ? 'mt-3' : ''}`}>
       <Row className={style.DfGridParams}>
         {!isMobile ? (
-          <Col className={needDateFilter ? style.DfCol : 'ant-col-24'}>
+          <Col className={hasRightElement ? style.DfCol : 'ant-col-24'}>
             <Radio.Group
               options={filters.map(({ label, value, icon }) => ({
                 label: (
@@ -155,7 +173,7 @@ export const Filters = (props: Props) => {
             />
           </Col>
         ) : (
-          <Col className={needDateFilter ? style.DfCol : 'ant-col-24'}>
+          <Col className={clsx(needDateFilter ? style.DfCol : 'ant-col-24')}>
             <Select
               value={type}
               onChange={onFilterChange}
@@ -170,6 +188,15 @@ export const Filters = (props: Props) => {
             </Select>
           </Col>
         )}
+        {showLikablePostsCheckbox && (
+          <Col className={clsx(isMobile && 'mt-2')}>
+            <Checkbox checked={value} onChange={e => setValue(e.target.checked)}>
+              <span className='ColorMuted' style={{ userSelect: 'none' }}>
+                Show likeable posts only
+              </span>
+            </Checkbox>
+          </Col>
+        )}
         {needDateFilter && (
           <Col className={style.DfDateCol}>
             <Select