DAO-532 Implemented allowance step (#69)

RootstockCollective · Jul 22, 2024 · 4ff3921 · 4ff3921
1 parent 9f45820
commit 4ff3921
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 41 deletions.
diff --git a/src/app/user/Stake/StakePreview.tsx b/src/app/user/Stake/StakePreview.tsx
@@ -4,14 +4,14 @@ import { TbFileSearch } from 'react-icons/tb'
 import { StakePreviewBalance } from './StakePreviewBalance'
 import { StakePreviewBalanceProps } from '@/app/user/Stake/types'
 import { ReactNode } from 'react'
-import { ActionBeingExecuted, textsDependingOnAction } from '@/app/user/Stake/Steps/stepsUtils'
 
 interface StakePreviewProps {
   from: Omit<StakePreviewBalanceProps, 'topLeftText'>
   to: Omit<StakePreviewBalanceProps, 'topLeftText'>
   onConfirm: () => void
   onCancel: () => void
-  actionName: ActionBeingExecuted
+  actionName: string
+  actionText: string
   customComponentBeforeFooter?: ReactNode
   disableConfirm?: boolean
 }
@@ -24,6 +24,7 @@ export const StakePreview = ({
   customComponentBeforeFooter,
   disableConfirm = true,
   actionName,
+  actionText,
 }: StakePreviewProps) => {
   return (
     <div className="px-[50px] py-[20px] flex justify-center flex-col">
@@ -40,8 +41,8 @@ export const StakePreview = ({
           <TbFileSearch size={48} color="#665EF6" />
         </div>
       </div>
-      <Paragraph className="mt-[62px] text-center">{textsDependingOnAction[actionName].preview}</Paragraph>{' '}
-      <Span className="text-center">Preview your stake and make sure everything is correct!</Span>
+      <Paragraph className="mt-[62px] text-center">{actionName}</Paragraph>{' '}
+      <Span className="text-center">{actionText}</Span>
       <div className="flex justify-center">
         <div className="bg-input-bg rounded-[6px] mt-[32px] w-full max-w-[500px]">
           <StakePreviewBalance topLeftText="From" {...from} />

diff --git a/src/app/user/Stake/StakingContext.tsx b/src/app/user/Stake/StakingContext.tsx
@@ -15,6 +15,13 @@ export type ActionHookToUse = (
   customFooter: ReactNode
 }
 
+type StakePreviewToken = {
+  amount: string
+  amountConvertedToCurrency: string
+  balance: string
+  tokenSymbol: string
+}
+
 interface StakingContextProps {
   balances: TokenBalanceRecord
   prices: GetPricesResult
@@ -30,6 +37,15 @@ interface StakingContextProps {
   }
   actionToUse: ActionHookToUse
   actionName: ActionBeingExecuted
+  stakePreviewFrom: StakePreviewToken
+  stakePreviewTo: StakePreviewToken
+}
+
+const DEFAULT_STAKE_PREVIEW_TOKEN = {
+  amount: '0',
+  balance: '0',
+  tokenSymbol: '0',
+  amountConvertedToCurrency: '0',
 }
 
 const StakingContext = createContext<StakingContextProps>({
@@ -46,6 +62,8 @@ const StakingContext = createContext<StakingContextProps>({
   },
   actionToUse: () => ({ shouldEnableConfirm: false, onConfirm: async () => '0x0', customFooter: null }),
   actionName: 'STAKE',
+  stakePreviewFrom: { ...DEFAULT_STAKE_PREVIEW_TOKEN },
+  stakePreviewTo: { ...DEFAULT_STAKE_PREVIEW_TOKEN },
 })
 
 interface Props {
@@ -85,6 +103,32 @@ export const StakingProvider: FC<Props> = ({
     }
   }, [stakeData.amount, tokenToSend.price, tokenToReceive.price])
 
+  const stakePreviewFrom = useMemo(
+    () => ({
+      amount: stakeData.amount,
+      amountConvertedToCurrency:
+        'USD ' + (Number(tokenToSend.price) * Number(stakeData.amount) ?? 0).toString(),
+      balance: tokenToSend.balance,
+      tokenSymbol: tokenToSend.symbol,
+    }),
+    [stakeData.amount, tokenToSend.balance, tokenToSend.price, tokenToSend.symbol],
+  )
+
+  const stakePreviewTo = useMemo(
+    () => ({
+      amount: amountDataToReceive.amountToReceive.toString(),
+      amountConvertedToCurrency: amountDataToReceive.amountToReceiveConvertedToCurrency.toString(),
+      balance: tokenToReceive.balance,
+      tokenSymbol: tokenToReceive.symbol,
+    }),
+    [
+      amountDataToReceive.amountToReceive,
+      amountDataToReceive.amountToReceiveConvertedToCurrency,
+      tokenToReceive.balance,
+      tokenToReceive.symbol,
+    ],
+  )
+
   const data = useMemo(
     () => ({
       balances,
@@ -98,6 +142,8 @@ export const StakingProvider: FC<Props> = ({
       amountDataToReceive,
       actionToUse,
       actionName,
+      stakePreviewFrom,
+      stakePreviewTo,
     }),
     [
       balances,
@@ -110,6 +156,8 @@ export const StakingProvider: FC<Props> = ({
       amountDataToReceive,
       actionToUse,
       actionName,
+      stakePreviewFrom,
+      stakePreviewTo,
     ],
   )
 

diff --git a/src/app/user/Stake/StakingSteps.tsx b/src/app/user/Stake/StakingSteps.tsx
@@ -5,7 +5,7 @@ import { Modal } from '@/components/Modal/Modal'
 import { useBalancesContext } from '@/app/user/Balances/context/BalancesContext'
 import { StakingToken } from '@/app/user/Stake/types'
 import { currentEnvContracts } from '@/lib/contracts'
-import { steps } from './Steps/stepsUtils'
+import { stakingSteps } from './Steps/stepsUtils'
 import { useStakeRIF } from '@/app/user/Stake/hooks/useStakeRIF'
 
 interface StakingStepsProps {
@@ -16,7 +16,7 @@ const StakingSteps = ({ onCloseModal }: StakingStepsProps) => {
   const { step, onGoNext, onGoBack } = useSteps()
   const { balances, prices } = useBalancesContext()
 
-  const currentStep = useMemo(() => steps[step], [step])
+  const currentStep = useMemo(() => stakingSteps[step], [step])
 
   const StepComponent = currentStep.stepComponent
 

diff --git a/src/app/user/Stake/Steps/StepAllowance.tsx b/src/app/user/Stake/Steps/StepAllowance.tsx
@@ -0,0 +1,37 @@
+import { useStakingContext } from '@/app/user/Stake/StakingContext'
+import { StakePreview } from '@/app/user/Stake/StakePreview'
+import { StepProps } from '@/app/user/Stake/types'
+import { useStakeRIF } from '@/app/user/Stake/hooks/useStakeRIF'
+
+export const StepAllowance = ({ onGoNext, onCloseModal }: StepProps) => {
+  const {
+    amount,
+    tokenToSend,
+    tokenToReceive,
+    stakePreviewFrom: from,
+    stakePreviewTo: to,
+  } = useStakingContext()
+
+  const { shouldEnableConfirm, customFooter } = useStakeRIF(
+    amount,
+    tokenToSend.contract,
+    tokenToReceive.contract,
+  )
+
+  const actionText = !shouldEnableConfirm
+    ? 'You need to request allowance before staking.'
+    : 'You have enough allowance to stake.'
+  const onGoNextStep = () => onGoNext?.()
+  return (
+    <StakePreview
+      onConfirm={onGoNextStep}
+      onCancel={onCloseModal ? onCloseModal : () => {}}
+      disableConfirm={!shouldEnableConfirm}
+      from={from}
+      to={to}
+      actionName="Allowance"
+      actionText={actionText}
+      customComponentBeforeFooter={customFooter}
+    />
+  )
+}
diff --git a/src/app/user/Stake/Steps/StepTwo.tsx b/src/app/user/Stake/Steps/StepTwo.tsx
@@ -1,49 +1,21 @@
 import { StakePreview } from '@/app/user/Stake/StakePreview'
 import { StepProps } from '@/app/user/Stake/types'
 import { useStakingContext } from '@/app/user/Stake/StakingContext'
-import { useMemo } from 'react'
+import { textsDependingOnAction } from '@/app/user/Stake/Steps/stepsUtils'
 
 export const StepTwo = ({ onGoNext, onCloseModal }: StepProps) => {
   const {
     amount,
     setStakeTxHash,
     tokenToSend,
     tokenToReceive,
-    amountDataToReceive,
     actionToUse,
     actionName,
+    stakePreviewFrom: from,
+    stakePreviewTo: to,
   } = useStakingContext()
 
-  const {
-    shouldEnableConfirm,
-    onConfirm: onConfirmAction,
-    customFooter,
-  } = actionToUse(amount, tokenToSend.contract, tokenToReceive.contract)
-
-  const from = useMemo(
-    () => ({
-      amount,
-      amountConvertedToCurrency: 'USD ' + (Number(tokenToSend.price) * Number(amount) ?? 0).toString(),
-      balance: tokenToSend.balance,
-      tokenSymbol: tokenToSend.symbol,
-    }),
-    [amount, tokenToSend.balance, tokenToSend.price, tokenToSend.symbol],
-  )
-
-  const to = useMemo(
-    () => ({
-      amount: amountDataToReceive.amountToReceive.toString(),
-      amountConvertedToCurrency: amountDataToReceive.amountToReceiveConvertedToCurrency.toString(),
-      balance: tokenToReceive.balance,
-      tokenSymbol: tokenToReceive.symbol,
-    }),
-    [
-      amountDataToReceive.amountToReceive,
-      amountDataToReceive.amountToReceiveConvertedToCurrency,
-      tokenToReceive.balance,
-      tokenToReceive.symbol,
-    ],
-  )
+  const { onConfirm: onConfirmAction } = actionToUse(amount, tokenToSend.contract, tokenToReceive.contract)
 
   const onConfirm = async () => {
     try {
@@ -61,11 +33,11 @@ export const StepTwo = ({ onGoNext, onCloseModal }: StepProps) => {
     <StakePreview
       onConfirm={onConfirm}
       onCancel={onCloseModal ? onCloseModal : () => {}}
+      disableConfirm={false}
       from={from}
       to={to}
-      disableConfirm={!shouldEnableConfirm}
-      customComponentBeforeFooter={customFooter}
-      actionName={actionName}
+      actionName={textsDependingOnAction[actionName].preview}
+      actionText={textsDependingOnAction[actionName].previewText}
     />
   )
 }
diff --git a/src/app/user/Stake/Steps/stepsUtils.tsx b/src/app/user/Stake/Steps/stepsUtils.tsx
@@ -1,6 +1,7 @@
 import { StepOne } from '@/app/user/Stake/Steps/StepOne'
 import { StepTwo } from '@/app/user/Stake/Steps/StepTwo'
 import { StepThree } from '@/app/user/Stake/Steps/StepThree'
+import { StepAllowance } from '@/app/user/Stake/Steps/StepAllowance'
 
 export const steps = [
   {
@@ -29,6 +30,7 @@ export const textsDependingOnAction = {
     inputLabel: 'Amount to stake',
     confirmButtonText: 'Stake',
     preview: 'Stake preview',
+    previewText: 'Preview your stake and make sure everything is correct!',
     inProcess: 'Stake in process',
     description: (
       <>
@@ -42,9 +44,37 @@ export const textsDependingOnAction = {
     inputLabel: 'Amount to unstake',
     confirmButtonText: 'Unstake',
     preview: 'Unstake preview',
+    previewText: 'Preview your unstake and make sure everything is correct!',
     inProcess: 'Unstake in process',
     description: 'Your tokens will arrive soon.',
   },
 }
 
+export const stakingSteps = [
+  {
+    stepComponent: StepOne,
+    modalProps: {
+      width: 720,
+    },
+  },
+  {
+    stepComponent: StepAllowance,
+    modalProps: {
+      width: 720,
+    },
+  },
+  {
+    stepComponent: StepTwo,
+    modalProps: {
+      width: 720,
+    },
+  },
+  {
+    stepComponent: StepThree,
+    modalProps: {
+      width: 720,
+    },
+  },
+]
+
 export type ActionBeingExecuted = keyof typeof textsDependingOnAction