Fix bugs after testing

src/components/creatorsStaking/Banner/BannerActionButtons.tsx

@@ -48,7 +48,13 @@ const BannerActionButtons = () => {
         {haveSub ? (
           <LockingButtons locked={locked} />
         ) : (
-          <Button size={isMobile ? 'md' : 'lg'} variant={'primary'}>
+          <Button
+            size={isMobile ? 'md' : 'lg'}
+            href='https://docs.subsocial.network/docs/tutorials/GetSUB/get-sub'
+            target='_blank'
+            className='hover:text-white'
+            variant={'primary'}
+          >
             Get SUB
           </Button>
         )}

src/components/creatorsStaking/Banner/index.tsx

@@ -13,13 +13,19 @@ import {
   useBackerLedger,
   useFetchBackerLedger,
 } from '@/rtk/features/creatorStaking/backerLedger/backerLedgerHooks'
-import { useIsMulti, useMyAddress } from '@/components/providers/MyExtensionAccountsContext'
+import {
+  useIsMulti,
+  useMyAddress,
+} from '@/components/providers/MyExtensionAccountsContext'
 import { FormatBalance } from '@/components/common/balances'
 import { useGetChainDataByNetwork } from '@/components/utils/useGetDecimalsAndSymbolByNetwork'
 import BN from 'bignumber.js'
 import { isDef } from '@subsocial/utils'
 import BannerActionButtons from './BannerActionButtons'
 import { useResponsiveSize } from '@/components/responsive'
+import { useBalancesByNetwork } from '@/rtk/features/balances/balancesHooks'
+import { calculateBalanceForStaking } from '@/utils/balance'
+import { BN_ZERO } from '@polkadot/util'
 
 const skeletonClassName = 'h-[20px] mb-1'
 
@@ -31,6 +37,19 @@ const StatsCards = () => {
   const { isMobile } = useResponsiveSize()
   const isMulti = useIsMulti()
 
+  const { tokenSymbol } = useGetChainDataByNetwork('subsocial')
+
+  const { currencyBalance: balancesByCurrency, loading: balanceLoading } =
+    useBalancesByNetwork({
+      address: myAddress,
+      network: 'subsocial',
+      currency: tokenSymbol,
+    })
+
+  const availableBalanceValue = balancesByCurrency
+    ? calculateBalanceForStaking(balancesByCurrency, 'crestake')
+    : BN_ZERO
+
   const { decimal, tokenSymbol: symbol } = useGetChainDataByNetwork('subsocial')
 
   const { info, loading } = generalEraInfo ?? {}
@@ -50,8 +69,15 @@ const StatsCards = () => {
     />
   )
 
+  const availableBalance = (
+    <TotalStakedBalance
+      value={availableBalanceValue.toString()}
+      loading={balanceLoading}
+    />
+  )
+
   const dashboardData = useMemo(() => {
-    const myLockedDashboardItem = isLockedTokens && !isMulti
+    const dashboardItem = isLockedTokens
       ? {
           title: 'My lock',
           value: (
@@ -63,10 +89,14 @@ const StatsCards = () => {
           ),
           infoTitle: 'How many tokens you have locked',
         }
-      : undefined
+      : {
+          title: 'Available balance',
+          value: availableBalance,
+          infoTitle: 'The amount of tokens you can lock',
+        }
 
     return [
-      myLockedDashboardItem,
+      ...[ !isMulti && myAddress ? dashboardItem : undefined ],
       {
         title: 'Total locked',
         value: <TotalStakedBalance value={stakedBalance} loading={loading} />,
@@ -83,13 +113,13 @@ const StatsCards = () => {
         infoTitle: 'The total number of unique accounts currently locking SUB',
       },
     ].filter(isDef)
-  }, [ stakedBalance, info?.backerCount, myAddress, isMulti ])
+  }, [ loading, ledgerLoading, balanceLoading, myAddress, isMulti ])
 
   return (
     <div
       className={clsx(
         'grid grid-cols-2 md:gap-6 gap-4',
-        !isLockedTokens || isMulti ? 'md:grid-cols-2' : 'md:grid-cols-3'
+        isMulti || !myAddress ? 'md:grid-cols-2' : 'md:grid-cols-3'
       )}
     >
       {dashboardData.map((data, i) => (

src/components/creatorsStaking/Banner/utils.tsx

@@ -17,13 +17,13 @@ type StatsCardProps = {
 
 export const DashboardCard = ({ title, value, desc, infoTitle, className }: StatsCardProps) => {
   return (
-    <CardWrapper className={clsx('bg-white/50 min-h-[116px] backdrop-blur-[24.5px] w-full', className)}>
+    <CardWrapper className={clsx('bg-white/50 backdrop-blur-[24.5px] w-full', className)}>
       <div className='text-text-dark/80 flex items-center gap-2'>
         {title}
         {infoTitle && <Tooltip title={infoTitle}><QuestionCircleOutlined /></Tooltip>}
       </div>
       <div>
-        <div className='text-text-dark md:text-2xl text-[19px]  font-semibold'>{value}</div>
+        <div className='text-text-dark md:text-2xl text-[19px] font-semibold'>{value}</div>
         {desc && <div className='text-text-dark/80 text-sm'>{desc}</div>}
       </div>
     </CardWrapper>

src/components/creatorsStaking/ClaimSections/index.tsx

@@ -67,7 +67,7 @@ const ClaimSection = () => {
         <div className='text-2xl font-semibold leading-[26px] text-slate-900'>
           👉 My next steps
         </div>
-        <div className='text-slate-900 text-lg font-normal leading-[26px]'>
+        <div className='text-slate-900 text-lg font-normal text-center leading-[26px]'>
           You have staking rewards of{' '}
           <span className='font-semibold'>{myRewards}</span> available to claim:
         </div>

src/components/creatorsStaking/modals/StakeModal.tsx

@@ -11,16 +11,20 @@ import { useGetChainDataByNetwork } from 'src/components/utils/useGetDecimalsAnd
 import { DaysToWithdrawWarning } from '../utils/DaysToWithdraw'
 import { useStakingConsts } from '../../../rtk/features/creatorStaking/stakingConsts/stakingConstsHooks'
 import { useBackerLedger } from '@/rtk/features/creatorStaking/backerLedger/backerLedgerHooks'
+import BN from 'bignumber.js'
 
 const CurrentStake = () => {
   const myAddress = useMyAddress()
   const backerLedger = useBackerLedger(myAddress)
+  const consts = useStakingConsts()
   const { decimal, tokenSymbol } = useGetChainDataByNetwork('subsocial')
 
   const { ledger } = backerLedger || {}
 
   const { locked } = ledger || {}
 
+  const { minimumStakingAmount } = consts || {}
+
   const currentStake = (
     <FormatBalance
       value={locked}
@@ -30,10 +34,35 @@ const CurrentStake = () => {
     />
   )
 
+  const hideMinimumStake = new BN(locked || '0').lte(
+    minimumStakingAmount || '0'
+  )
+
+  const minimumStakingAmountWithDecimals = (
+    <FormatBalance
+      value={new BN(minimumStakingAmount || '0')
+        .minus(locked || '0')
+        .toString()}
+      decimals={decimal}
+      currency={tokenSymbol}
+      isGrayDecimal={false}
+    />
+  )
+
   return (
-    <div className='flex flex-col gap-1 bg-gray-50 p-4 rounded-2xl'>
-      <div className='text-sm text-text-muted leading-5'>My current lock</div>
-      <div className='font-medium text-base leading-6'>{currentStake}</div>
+    <div className='flex items-center gap-4'>
+      <div className='flex flex-col gap-1 w-full bg-gray-50 p-4 rounded-2xl'>
+        <div className='text-sm text-text-muted leading-5'>My current lock</div>
+        <div className='font-medium text-base leading-6'>{currentStake}</div>
+      </div>
+      {!hideMinimumStake && (
+        <div className='flex w-full flex-col gap-1 bg-gray-50 p-4 rounded-2xl'>
+          <div className='text-sm text-text-muted leading-5'>Required lock</div>
+          <div className='font-medium text-base leading-6'>
+            {minimumStakingAmountWithDecimals}
+          </div>
+        </div>
+      )}
     </div>
   )
 }

src/components/creatorsStaking/modals/TxButtons.tsx

@@ -26,7 +26,6 @@ import {
 } from 'src/rtk/features/creatorStaking/backerLedger/backerLedgerHooks'
 import { StakingModalVariant } from './StakeModal'
 import { showParsedErrorMessage } from 'src/components/utils'
-import { useModalContext } from '../contexts/ModalContext'
 import { useSendEvent } from '@/components/providers/AnalyticContext'
 import getAmountRange from '../utils/getAmountRangeForAnalytics'
 import { useGetChainDataByNetwork } from '@/components/utils/useGetDecimalsAndSymbolByNetwork'
@@ -64,13 +63,11 @@ function StakingTxButton ({
   tx,
   closeModal,
   onClick,
-  modalVariant,
   inputError,
 }: StakingTxButtonProps) {
   const myAddress = useMyAddress()
   const dispatch = useAppDispatch()
   const eraInfo = useGeneralEraInfo()
-  const { setShowSuccessModal, setStakedSpaceId } = useModalContext()
 
   const onSuccess = () => {
     fetchBalanceByNetwork(dispatch, [ myAddress || '' ], 'subsocial')
@@ -82,11 +79,6 @@ function StakingTxButton ({
 
     fetchBackerLedger(dispatch, myAddress || '')
 
-    if (modalVariant === 'stake') {
-      setStakedSpaceId(spaceId)
-      setShowSuccessModal(true)
-    }
-
     closeModal()
   }