Add fixes after testing

public/tailwind.css

@@ -896,6 +896,10 @@ video {
   width: 100vw;
 }
 
+.w-\[20px\] {
+  width: 20px;
+}
+
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
@@ -1097,6 +1101,10 @@ video {
   gap: 0.75rem;
 }
 
+.gap-\[10px\] {
+  gap: 10px;
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1416,6 +1424,10 @@ video {
   padding: 4px;
 }
 
+.\!p-2 {
+  padding: 0.5rem !important;
+}
+
 .\!py-4 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
@@ -1671,6 +1683,14 @@ video {
   line-height: 1.5;
 }
 
+.leading-\[\] {
+  line-height: ;
+}
+
+.leading-\[20px\] {
+  line-height: 20px;
+}
+
 .\!text-red-500 {
   --tw-text-opacity: 1 !important;
   color: rgb(239 68 68 / var(--tw-text-opacity)) !important;
@@ -1838,6 +1858,18 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.ring-0 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.\!ring-0 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+}
+
 .ring-inset {
   --tw-ring-inset: inset;
 }

src/components/chat/ChatFloatingModal.module.sass

@@ -39,7 +39,7 @@
       height: 1.1rem
 
 .ChatContainer
-  z-index: 1010
+  z-index: 1071
   position: fixed
   bottom: 0
   left: 0

src/components/chat/ChatFloatingModal.tsx

@@ -44,6 +44,14 @@ export default function ChatFloatingModal ({
     return () => window.removeEventListener('keydown', close)
   }, [])
 
+  useEffect(() => {
+    if(open) {
+      document.documentElement.style.overflow = 'hidden'
+    } else {
+      document.documentElement.style.overflow = 'auto'
+    }
+  }, [ open ])
+
   const hasOpened = useRef(false)
   const toggleChat = () => {
     let event

src/components/creatorsStaking/Banner/calculateApr.tsx

@@ -13,19 +13,21 @@ export const useCalculateApr = () => {
   const generalEraInfo = useGeneralEraInfo()
   const { decimal } = useGetDecimalsAndSymbolByNetwork('subsocial')
 
+  const { info, loading } = generalEraInfo || {}
+
   const apr = useMemo(() => {
-    if (!generalEraInfo) return
+    if (!info || loading) return
 
     const totalStakedWithDecimal = convertToBalanceWithDecimal(
-      generalEraInfo.staked,
+      info.staked,
       decimal
     )
 
     return annualReward
       .dividedBy(totalStakedWithDecimal)
       .multipliedBy(backerPercent)
       .multipliedBy(100)
-  }, [ !!generalEraInfo ])
+  }, [ !!info, loading ])
 
   return apr
 }

src/components/creatorsStaking/Banner/index.tsx

@@ -5,7 +5,6 @@ import {
   useFetchGeneralEraInfo,
   useGeneralEraInfo,
 } from '../../../rtk/features/creatorStaking/generalEraInfo/generalEraInfoHooks'
-import { useCreatorsList } from 'src/rtk/features/creatorStaking/creatorsList/creatorsListHooks'
 import ValueOrSkeleton from '../utils/ValueOrSkeleton'
 import { NextEraStartDate } from '../utils/NextEraStartDate'
 import { DashboardCard, TotalStakedBalance } from './utils'
@@ -23,15 +22,14 @@ const TimeInEra = () => {
 
 const StatsCards = () => {
   const generalEraInfo = useGeneralEraInfo()
-  const creatorsList = useCreatorsList()
   const apr = useCalculateApr()
 
-  const creatorsCount = creatorsList?.length
+  const { info, loading } = generalEraInfo || {}
 
   const dashboardData = [
     {
       title: 'Total Staked',
-      value: <TotalStakedBalance value={generalEraInfo?.staked || 0} />,
+      value: <TotalStakedBalance value={info?.staked || 0} loading={loading} />,
       infoTitle: 'The total amount of tokens staked on the Subsocial network',
     },
     {
@@ -43,13 +41,13 @@ const StatsCards = () => {
         />
       ),
       infoTitle:
-        'An estimate on how many tokens you will receive per year when you stake',
+        'An estimate of how much your token balance will increase after a year of staking',
     },
     {
       title: 'Current Era',
       value: (
         <ValueOrSkeleton
-          value={generalEraInfo?.currentEra}
+          value={info?.currentEra}
           skeletonClassName={skeletonClassName}
         />
       ),
@@ -66,14 +64,15 @@ const StatsCards = () => {
       ),
     },
     {
-      title: 'Total Creators',
+      title: 'Total Stakers',
       value: (
         <ValueOrSkeleton
-          value={creatorsCount}
+          value={info?.backerCount}
           skeletonClassName={skeletonClassName}
+          loading={loading}
         />
       ),
-      infoTitle: 'The number of creators available to stake to',
+      infoTitle: 'The total number of unique accounts currently staking SUB',
     },
   ]
 

src/components/creatorsStaking/Banner/utils.tsx

@@ -29,9 +29,10 @@ export const DashboardCard = ({ title, value, desc, infoTitle }: StatsCardProps)
 
 type SubsocialBalanceProps = {
   value: number | string
+  loading?: boolean
 }
 
-export const TotalStakedBalance = ({ value }: SubsocialBalanceProps) => {
+export const TotalStakedBalance = ({ value, loading }: SubsocialBalanceProps) => {
   const chainsInfo = useChainInfo()
 
   const { tokenDecimals, tokenSymbols } = chainsInfo?.subsocial || {}
@@ -47,7 +48,7 @@ export const TotalStakedBalance = ({ value }: SubsocialBalanceProps) => {
     <ValueOrSkeleton
       value={<>{toShortMoney({ num: balanceWithDecimal.toNumber() })} {symbol}</>}
       skeletonClassName='h-[20px] mb-3'
-      loading={value === undefined}
+      loading={loading}
     />
   )
 }

src/components/creatorsStaking/CreatorDashboard/DashboardCards.tsx

@@ -22,7 +22,7 @@ const DashboardCards = ({ creators }: DashboardCardsProps) => {
   const myAddress = useMyAddress()
   const creatorRewards = useCreatorRewards(myAddress)
   const eraInfo = useGeneralEraInfo()
-  const era = eraInfo?.currentEra
+  const era = eraInfo?.info?.currentEra
 
   const spaceIds = creators.map((creator) => creator.id)
 

src/components/creatorsStaking/Creators/CreatorCard.tsx

@@ -144,14 +144,14 @@ const CreatorCard = ({ spaceId, era }: CreatorCardProps) => {
         isGrayDecimal={false}
       />
     ) : (
-      <>-</>
+      <>—</>
     )
 
   const aboutText = (
     <div
       className={clsx(
         'flex items-center text-sm',
-        'text-text-muted leading-[22px]',
+        'leading-[22px]',
         'font-normal min-h-[44px] w-full'
       )}
     >
@@ -194,6 +194,17 @@ const CreatorCard = ({ spaceId, era }: CreatorCardProps) => {
     </a>
   )
 
+  const accountDesc = (
+    <div className='flex flex-col gap-2'>
+      {!!postsCount && postsLink}
+      <ContactInfo
+        className={clsx('text-[#64748B]')}
+        spaceId={spaceId}
+        {...contactInfo}
+      />
+    </div>
+  )
+
   return (
     <>
       <div
@@ -216,9 +227,11 @@ const CreatorCard = ({ spaceId, era }: CreatorCardProps) => {
                     loading={spaceLoading}
                   />
                 }
-                desc={!!postsCount && postsLink}
+                desc={accountDesc}
                 avatar={image}
                 owner={owner}
+                imgSize={66}
+                titleClassName='leading-[20px]'
                 descClassName='p-[1px] leading-none'
                 infoClassName='flex flex-col gap-1'
                 titleRef={cardRef}
@@ -228,20 +241,20 @@ const CreatorCard = ({ spaceId, era }: CreatorCardProps) => {
                 <Tooltip title='Community chat'>
                   <Button
                     onClick={onChatButtonClick}
-                    variant='primaryOutline'
+                    variant='iconPrimary'
                     size='circle'
-                    className='h-[31px] w-[31px]'
+                    className='h-[20px] w-[20px] !p-0'
                   >
-                    <img src='/images/creator-staking/messenger.svg' alt='' />
+                    <img
+                      src='/images/creator-staking/messenger.svg'
+                      className='h-[20px] w-[20px]'
+                      alt=''
+                    />
                   </Button>
                 </Tooltip>
               </div>
             </div>
-            <ContactInfo
-              className={clsx('text-[#64748B]')}
-              spaceId={spaceId}
-              {...contactInfo}
-            />
+
             {aboutText}
           </div>
           <div className='border-b border-[#D4E2EF]'></div>

src/components/creatorsStaking/Creators/SortByDropDown.tsx

@@ -26,6 +26,11 @@ const SortByDropDown = ({
   const [ isOpen, setIsOpen ] = useState(false)
 
   const menus = [
+    {
+      key: 'default',
+      text: 'Default',
+      onClick: () => changeSortBy('default'),
+    },
     {
       key: 'total-stake',
       text: 'Total stake',

src/components/creatorsStaking/Creators/index.tsx

@@ -83,7 +83,7 @@ type CreatorsSectionInnerProps = {
 const CreatorsSectionInner = ({ spaceIds, era }: CreatorsSectionInnerProps) => {
   const [ tab, setTab ] = useState(0)
   const myAddress = useMyAddress()
-  const [ sortBy, changeSortBy ] = useState('total-stake')
+  const [ sortBy, changeSortBy ] = useState('default')
   const { showSuccessModal, setShowSuccessModal, amount, stakedSpaceId } =
     useModalContext()
   const creatorsList = useCreatorsList()
@@ -183,7 +183,7 @@ const CreatorsSection = () => {
   const eraInfo = useGeneralEraInfo()
 
   const creatorsSpaceIds = creatorsList?.map((creator) => creator.id)
-  const currentEra = eraInfo?.currentEra
+  const currentEra = eraInfo?.info?.currentEra
 
   useFetchCreatorsSpaces(creatorsSpaceIds)
   useFetchEraStakes(creatorsSpaceIds, currentEra)

src/components/creatorsStaking/Creators/modals/AboutModal.tsx

@@ -33,7 +33,7 @@ const AboutModal = ({
   const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
   const { isMobile } = useResponsiveSize()
 
-  const { currentEra } = generalEraInfo || {}
+  const { currentEra } = generalEraInfo?.info || {}
 
   const eraStake = useEraStakesById(spaceId, currentEra)
   const [ openStakeModal, setOpenStakeModal ] = useState(false)

src/components/creatorsStaking/Creators/modals/StakeModal.tsx

@@ -168,7 +168,7 @@ const StakingModal = ({
   const generalEraInfo = useGeneralEraInfo()
   const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
 
-  const { currentEra } = generalEraInfo || {}
+  const { currentEra } = generalEraInfo?.info || {}
 
   const eraStake = useEraStakesById(spaceId, currentEra)
 

src/components/creatorsStaking/Creators/modals/TxButtons.tsx

@@ -52,7 +52,7 @@ const StakingTxButton = ({
     fetchBalanceByNetwork(dispatch, [ myAddress || '' ], 'subsocial')
     fetchBackerInfo(dispatch, [ spaceId ], myAddress || '')
     fetchGeneralEraInfo(dispatch)
-    fetchEraStakes(dispatch, [ spaceId ], eraInfo?.currentEra || '0')
+    fetchEraStakes(dispatch, [ spaceId ], eraInfo?.info?.currentEra || '0')
 
     fetchBackerLedger(dispatch, myAddress || '')
 

src/components/creatorsStaking/MyStaking/ClaimRewardsTxButton.tsx

@@ -42,7 +42,7 @@ const ClaimRewardsTxButton = ({
 
     if(restake) {
       fetchBackerInfo(dispatch, rewardsSpaceIds, myAddress || '')
-      fetchEraStakes(dispatch, rewardsSpaceIds, eraInfo?.currentEra || '0')
+      fetchEraStakes(dispatch, rewardsSpaceIds, eraInfo?.info?.currentEra || '0')
     }
   }
 

src/components/creatorsStaking/MyStaking/MyRewards.tsx

@@ -97,6 +97,7 @@ const MyRewards = () => {
           skeletonClassName='h-[24px]'
         />
       ),
+      tooltipTitle: 'How many tokens you have staked across all creators',
     },
     {
       title: <>Estimated Rewards, {symbol}</>,
@@ -115,11 +116,13 @@ const MyRewards = () => {
           restake={restake}
         />
       ),
+      tooltipTitle: 'The estimated amount of SUB you have available to claim as staking rewards',
     },
     {
       title: 'Re-Stake After Claiming',
       value: <div className='font-semibold'>{restake ? 'ON' : 'OFF'}</div>,
       button: <RestakeButton restake={restake} setRestake={setRestake} />,
+      tooltipTitle: 'Turning this on will automatically stake your rewards after you claim them',
     },
   ]
 

src/components/creatorsStaking/MyStaking/Unstaking.tsx

@@ -23,7 +23,7 @@ type TimeRemainingProps = {
 const TimeRemaining = ({ unlockEra, className }: TimeRemainingProps) => {
   const eraInfo = useGeneralEraInfo()
   const { currentBlockNumber } = useStakingContext()
-  const { currentEra, blockPerEra, nextEraBlock } = eraInfo || {}
+  const { currentEra, blockPerEra, nextEraBlock } = eraInfo?.info || {}
 
   const blocksToNextEra = new BN(nextEraBlock || '0').minus(
     new BN(currentBlockNumber || '0')

src/components/creatorsStaking/MyStaking/WithdrawTxButton.tsx

@@ -24,7 +24,7 @@ const WithdrawTxButton = ({ switchToFirstTab }: WithdrawTxButtonProps) => {
   const dispatch = useAppDispatch()
 
   const { ledger, loading } = backerLedger || {}
-  const { currentEra } = eraInfo || {}
+  const { currentEra } = eraInfo?.info || {}
 
   const unbondingChunks = ledger?.unbondingInfo.unbondingChunks