Change texts

dappforce · Feb 2, 2024 · e6075dd · e6075dd
1 parent 6761b20
commit e6075dd
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 17 deletions.
diff --git a/src/components/creatorsStaking/ClaimSections/index.tsx b/src/components/creatorsStaking/ClaimSections/index.tsx
@@ -65,7 +65,7 @@ const ClaimSection = () => {
 
       <div className='flex flex-col items-center gap-6 bg-white rounded-[20px] md:p-6 p-4'>
         <div className='text-2xl font-semibold leading-[26px] text-slate-900'>
-          👉 My next steps
+          👉 Next steps
         </div>
         <div className='text-slate-900 text-lg font-normal text-center leading-[26px]'>
           You have staking rewards of{' '}

diff --git a/src/components/creatorsStaking/UnstakingSection/index.tsx b/src/components/creatorsStaking/UnstakingSection/index.tsx
@@ -58,7 +58,7 @@ const UnstakingSection = () => {
     <div className='flex flex-col gap-4 md:p-6 p-4 bg-white rounded-[20px]'>
       <div className='flex md:flex-row flex-col justify-between items-center gap-4'>
         <div className='font-semibold text-2xl leading-[26px]'>
-          Unlocking your SUB tokens
+          Unlocking my SUB tokens
         </div>
         <WithdrawTxButton />
       </div>

diff --git a/src/components/creatorsStaking/modals/StakeModal.tsx b/src/components/creatorsStaking/modals/StakeModal.tsx
@@ -12,6 +12,9 @@ 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'
+import { Tooltip } from 'antd'
+import { convertToBalanceWithDecimal } from '@subsocial/utils'
+import { QuestionCircleOutlined } from '@ant-design/icons'
 
 const CurrentStake = () => {
   const myAddress = useMyAddress()
@@ -34,9 +37,11 @@ const CurrentStake = () => {
     />
   )
 
-  const showMimimumStake = new BN(locked || '0').lt(
-    minimumStakingAmount || '0'
-  )
+  const showMimimumStake = new BN(locked || '0').lt(minimumStakingAmount || '0')
+
+  const minimumStake = minimumStakingAmount
+    ? convertToBalanceWithDecimal(minimumStakingAmount, decimal)
+    : '0'
 
   const requiredLock = (
     <FormatBalance
@@ -57,7 +62,13 @@ const CurrentStake = () => {
       </div>
       {showMimimumStake && (
         <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>
+          <Tooltip
+            title={`In order to qualify for Content Staking, you need to lock at least ${minimumStake} SUB`}
+          >
+            <div className='text-sm text-text-muted leading-5 flex items-center gap-2'>
+              Additional lock required <QuestionCircleOutlined />
+            </div>
+          </Tooltip>
           <div className='font-medium text-base leading-6'>{requiredLock}</div>
         </div>
       )}
@@ -80,18 +91,20 @@ const MinimumStake = () => {
     />
   )
 
-  return <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'>Minimum lock</div>
-    <div className='font-medium text-base leading-6'>{minimumStaking}</div>
-  </div>
+  return (
+    <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'>Minimum lock</div>
+      <div className='font-medium text-base leading-6'>{minimumStaking}</div>
+    </div>
+  )
 }
 
 export type StakingModalVariant = 'stake' | 'unstake' | 'increaseStake'
 
 const modalData = {
   stake: {
     title: '🌟 Lock SUB',
-    inputLabel: 'Lock amount:',
+    inputLabel: 'Amount to lock:',
     balanceLabel: 'Balance',
     modalButton: 'Lock',
     amountInput: StakeOrIncreaseStakeAmountInput,
@@ -107,7 +120,7 @@ const modalData = {
   },
   increaseStake: {
     title: '🌟 Lock more SUB',
-    inputLabel: 'Lock amount',
+    inputLabel: 'Increase locked amount',
     balanceLabel: 'Balance',
     modalButton: 'Lock',
     amountInput: StakeOrIncreaseStakeAmountInput,
@@ -134,14 +147,14 @@ const StakingModal = ({
   amount,
   eventSource,
 }: StakeModalProps) => {
-  const [inputError, setInputError] = useState<string | undefined>(undefined)
+  const [ inputError, setInputError ] = useState<string | undefined>(undefined)
 
   useEffect(() => {
     if (open) {
       setAmount('')
       inputError && setInputError(undefined)
     }
-  }, [open])
+  }, [ open ])
 
   const stakingConsts = useStakingConsts()
 

diff --git a/src/layout/SideMenuItems.tsx b/src/layout/SideMenuItems.tsx
@@ -151,7 +151,7 @@ export const DefaultMenu = (t: any, isAllNetworksConnected: boolean) => {
       hidden: isMulti || !isSignIn,
     },
     {
-      name: 'Creator Staking',
+      name: 'Content Staking',
       page: [ '/creators' ],
       icon: <img className='anticon' src='/images/creator-staking-user.svg' />,
       hidden: !isSignIn,

diff --git a/src/pages/creators/index.tsx b/src/pages/creators/index.tsx
@@ -11,8 +11,8 @@ getInitialPropsWithRedux(CreatorsStakingPage, async ({ dispatch }) => {
 
   return {
     head: {
-      title: 'Support Favorite Creators And Receive Tokens!',
-      desc: 'Stake SUB towards the best creators of content, applications, and communities. Both you and the creator will receive more tokens, and help grow the network.',
+      title: 'Join The Creator Economy On Subsocial',
+      desc: 'Earn rewards when you post content or engage with others in Subsocial\'s Content Staking system. Lock some SUB to get started today!',
       image: '/images/creator-staking/meta-bg.jpg',
       forceTitle: true,
     },