@huma-finance/widgets 0.0.51-beta.227 → 0.0.51-beta.347

package/src/components/CreditLine/borrowV2/index.tsx

@@ -0,0 +1,140 @@
+import {
+  CreditStateV2,
+  POOL_NAME,
+  useCreditStatsV2,
+  usePoolInfoV2,
+  usePoolUnderlyingTokenInfoV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import React, { useCallback, useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import {
+  useDoesChainSupportNotifi,
+  useIsFirstTimeNotifiUser,
+} from '../../../hooks/useNotifi'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ErrorModal } from '../../ErrorModal'
+import { LoadingModal } from '../../LoadingModal'
+import { WidgetWrapper } from '../../WidgetWrapper'
+import { ChooseAmount } from './1-ChooseAmount'
+import { ApproveAllowance } from './2-ApproveAllowance'
+import { Transfer } from './3-Transfer'
+import { Success } from './4-Success'
+import { Notifications } from './5-Notifications'
+
+/**
+ * Credit line pool borrow props V2
+ * @typedef {Object} CreditLineBorrowPropsV2
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @property {function():void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
+ * @property {function((number|undefined)):void|undefined} handleSuccess Optional function to notify that the credit line pool borrow action is successful.
+ */
+export interface CreditLineBorrowPropsV2 {
+  poolName: keyof typeof POOL_NAME
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function CreditLineBorrowV2({
+  poolName: poolNameStr,
+  handleClose,
+  handleSuccess,
+}: CreditLineBorrowPropsV2): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const poolName = POOL_NAME[poolNameStr]
+  const { account, chainId, provider } = useWeb3React()
+  const poolInfo = usePoolInfoV2(poolName, chainId)
+  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [accountStats, refreshAccountStats] = useCreditStatsV2(
+    poolName,
+    account,
+    provider,
+  )
+  const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
+  const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
+  const { creditRecord } = accountStats
+  const accountState = creditRecord?.state
+
+  useEffect(() => {
+    if (!step && accountState !== undefined) {
+      if (accountState >= CreditStateV2.Approved) {
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+      }
+    }
+  }, [accountState, dispatch, step])
+
+  const setupNotificationsOrClose = useCallback(() => {
+    if (isFirstTimeNotifiUser && notifiChainSupported) {
+      dispatch(setStep(WIDGET_STEP.Notifications))
+    } else {
+      handleClose()
+    }
+  }, [dispatch, handleClose, isFirstTimeNotifiUser, notifiChainSupported])
+
+  const handleSuccessCallback = useCallback(() => {
+    refreshAccountStats()
+    if (handleSuccess) {
+      handleSuccess()
+    }
+  }, [handleSuccess, refreshAccountStats])
+
+  if (!poolInfo || !poolUnderlyingToken || !creditRecord) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle='Borrow'
+        handleClose={handleClose}
+        handleSuccess={handleSuccessCallback}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle='Borrow'
+      handleClose={handleClose}
+      handleSuccess={handleSuccessCallback}
+    >
+      {!step && <LoadingModal title='Borrow' />}
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          accountStats={accountStats}
+        />
+      )}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolUnderlyingToken={poolUnderlyingToken}
+          handleAction={setupNotificationsOrClose}
+          creditRecord={accountStats.creditRecord!}
+          hasNextStep={isFirstTimeNotifiUser}
+        />
+      )}
+      {step === WIDGET_STEP.Notifications && (
+        <Notifications handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Borrow'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/CreditLine/payment/1-ChooseAmount.tsx

@@ -6,7 +6,6 @@ import {
   useCLPoolAllowance,
 } from '@huma-finance/shared'
 import React, { useCallback, useEffect, useState } from 'react'
-import { BigNumber } from 'ethers'
 
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setPaymentAmount, setStep } from '../../../store/widgets.reducers'
@@ -25,10 +24,15 @@ export function ChooseAmount({
   poolInfo,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const { symbol, decimals } = poolInfo.poolUnderlyingToken
   const [currentAmount, setCurrentAmount] = useState(0)
-  const { allowance } = useCLPoolAllowance(poolInfo.poolName, account)
+  const { allowance } = useCLPoolAllowance(
+    poolInfo.poolName,
+    chainId,
+    account,
+    provider,
+  )
 
   useEffect(() => {
     setCurrentAmount(totalDueAmount)
@@ -44,8 +48,8 @@ export function ChooseAmount({
   )
 
   const handleAction = useCallback(() => {
-    const payAmount = upScale<BigNumber>(toBigNumber(currentAmount), decimals)
-    const step = payAmount.gt(allowance)
+    const payAmount = upScale(currentAmount, decimals)
+    const step = toBigNumber(payAmount).gt(allowance)
       ? WIDGET_STEP.ApproveAllowance
       : WIDGET_STEP.Transfer
     dispatch(setStep(step))

package/src/components/CreditLine/payment/3-Transfer.tsx

@@ -1,7 +1,6 @@
 import { useWeb3React } from '@web3-react/core'
 import { PoolInfoType, toBigNumber, upScale } from '@huma-finance/shared'
 import React, { useCallback } from 'react'
-import { BigNumber } from 'ethers'
 
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -18,10 +17,7 @@ export function Transfer({ poolInfo }: Props): React.ReactElement {
   const { account } = useWeb3React()
   const { paymentAmount } = useAppSelector(selectWidgetState)
   const { decimals } = poolInfo.poolUnderlyingToken
-  const paymentBigNumber = upScale<BigNumber>(
-    toBigNumber(paymentAmount!),
-    decimals,
-  )
+  const paymentBigNumber = toBigNumber(upScale(paymentAmount!, decimals))
 
   const handleSuccess = useCallback(() => {
     dispatch(setStep(WIDGET_STEP.Done))

package/src/components/CreditLine/payment/4-Success.tsx

@@ -1,7 +1,7 @@
 import {
   decodeLogs,
   downScale,
-  formatMoney,
+  formatNumber,
   PoolInfoType,
   sendTxAtom,
   TRANSFER_ABI,
@@ -32,7 +32,7 @@ export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
   }, [decimals, txReceipt])
 
   const content = [
-    `You successfully paid ${formatMoney(payedAmount)} ${symbol}.`,
+    `You successfully paid ${formatNumber(payedAmount)} ${symbol}.`,
   ]
 
   return <TxDoneModal handleAction={handleAction} content={content} />

package/src/components/CreditLine/payment/index.tsx

@@ -41,15 +41,17 @@ export function CreditLinePayment({
   handleSuccess,
 }: CreditLinePaymentProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const poolName = POOL_NAME[poolNameStr]
   const poolType = POOL_TYPE[poolTypeStr]
-  const poolInfo = usePoolInfo(poolName, poolType)
+  const poolInfo = usePoolInfo(poolName, poolType, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
   const [{ creditRecord, payoffAmount, totalDueAmount }] = useAccountStats(
     poolName,
     poolType,
+    chainId,
     account,
+    provider,
   )
 
   useEffect(() => {

package/src/components/CreditLine/paymentV2/1-ChooseAmount.tsx

@@ -0,0 +1,96 @@
+import {
+  formatNumber,
+  PoolInfoV2,
+  toBigNumber,
+  UnderlyingTokenInfo,
+  upScale,
+  usePoolSafeAllowanceV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber, ethers } from 'ethers'
+import React, { useCallback, useEffect, useState } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setPaymentAmount, setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { InputAmountModal } from '../../InputAmountModal'
+import { LoadingModal } from '../../LoadingModal'
+
+type Props = {
+  payoffAmount: BigNumber
+  totalDueAmount: BigNumber
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+}
+
+export function ChooseAmount({
+  payoffAmount: payoffAmountBN,
+  totalDueAmount: totalDueAmountBN,
+  poolInfo,
+  poolUnderlyingToken,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const { symbol, decimals } = poolUnderlyingToken
+  const [currentAmount, setCurrentAmount] = useState(0)
+  const { allowance } = usePoolSafeAllowanceV2(
+    poolInfo.poolName,
+    account,
+    provider,
+  )
+  const totalDueAmount = Number(
+    ethers.utils.formatUnits(totalDueAmountBN, decimals),
+  )
+  const payoffAmount = Number(
+    ethers.utils.formatUnits(payoffAmountBN, decimals),
+  )
+
+  console.log('totalDueAmountBN', totalDueAmountBN.toString())
+  console.log('payoffAmountBN', payoffAmountBN.toString())
+  console.log('payoffAmount', payoffAmount)
+  console.log('currentAmount', currentAmount)
+
+  useEffect(() => {
+    setCurrentAmount(totalDueAmount)
+  }, [totalDueAmount])
+
+  useEffect(() => {
+    setCurrentAmount(totalDueAmount)
+    dispatch(setPaymentAmount({ paymentAmount: totalDueAmount }))
+  }, [dispatch, totalDueAmount])
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      setCurrentAmount(newAmount)
+      dispatch(setPaymentAmount({ paymentAmount: newAmount }))
+    },
+    [dispatch],
+  )
+
+  const handleAction = useCallback(() => {
+    const payAmount = upScale(currentAmount, decimals)
+    const step = toBigNumber(payAmount).gt(allowance!)
+      ? WIDGET_STEP.ApproveAllowance
+      : WIDGET_STEP.Transfer
+    dispatch(setStep(step))
+  }, [allowance, currentAmount, decimals, dispatch])
+
+  if (!allowance) {
+    return <LoadingModal title='Pay' />
+  }
+
+  return (
+    <InputAmountModal
+      title='Pay'
+      subTitle='Enter Amount'
+      tokenSymbol={symbol}
+      currentAmount={currentAmount}
+      handleChangeAmount={handleChangeAmount}
+      maxAmount={payoffAmount}
+      maxAmountText='Pay Off'
+      info={`${formatNumber(totalDueAmount.toFixed(0))} Due`}
+      handleAction={handleAction}
+      actionText='PAY'
+    />
+  )
+}

package/src/components/CreditLine/paymentV2/2-ApproveAllowance.tsx

@@ -0,0 +1,33 @@
+import { PoolInfoV2, UnderlyingTokenInfo } from '@huma-finance/shared'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ApproveAllowanceModalV2 } from '../../ApproveAllowanceModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+}
+
+export function ApproveAllowance({
+  poolInfo,
+  poolUnderlyingToken,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  return (
+    <ApproveAllowanceModalV2
+      poolInfo={poolInfo}
+      spender={poolInfo.poolSafe}
+      poolUnderlyingToken={poolUnderlyingToken}
+      handleSuccess={handleSuccess}
+      showAutoPayback
+    />
+  )
+}

package/src/components/CreditLine/paymentV2/3-Transfer.tsx

@@ -0,0 +1,55 @@
+import {
+  PoolInfoV2,
+  toBigNumber,
+  UnderlyingTokenInfo,
+  upScale,
+  useCreditContractV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { LoadingModal } from '../../LoadingModal'
+import { TxSendModalV2 } from '../../TxSendModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+}
+
+export function Transfer({
+  poolInfo,
+  poolUnderlyingToken,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const { paymentAmount } = useAppSelector(selectWidgetState)
+  const { decimals } = poolUnderlyingToken
+  const paymentBigNumber = toBigNumber(upScale(paymentAmount!, decimals))
+  const creditContract = useCreditContractV2(
+    poolInfo.poolName,
+    provider,
+    account,
+  )
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  if (!account || !creditContract) {
+    return <LoadingModal title='Pay' />
+  }
+
+  return (
+    <TxSendModalV2
+      title='Pay'
+      contract={creditContract}
+      method='makePayment'
+      params={[account, paymentBigNumber]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/CreditLine/paymentV2/4-Success.tsx

@@ -0,0 +1,42 @@
+import {
+  decodeLogs,
+  downScale,
+  formatNumber,
+  sendTxAtom,
+  TRANSFER_ABI,
+  UnderlyingTokenInfo,
+} from '@huma-finance/shared'
+import { useAtom } from 'jotai'
+import React, { useEffect, useState } from 'react'
+
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolUnderlyingToken: UnderlyingTokenInfo
+  handleAction: () => void
+}
+
+export function Success({
+  poolUnderlyingToken,
+  handleAction,
+}: Props): React.ReactElement {
+  const { symbol, decimals } = poolUnderlyingToken
+  const [{ txReceipt }] = useAtom(sendTxAtom)
+  const [paidAmount, setPaidAmount] = useState<string | undefined>()
+
+  useEffect(() => {
+    if (txReceipt) {
+      const [event] = decodeLogs(txReceipt.logs, TRANSFER_ABI)
+      if (event) {
+        const paidAmount = downScale(event.args.value.toString(), decimals)
+        setPaidAmount(paidAmount)
+      }
+    }
+  }, [decimals, txReceipt])
+
+  const content = [
+    `You successfully paid ${formatNumber(paidAmount)} ${symbol}.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

package/src/components/CreditLine/paymentV2/index.tsx

@@ -0,0 +1,111 @@
+import {
+  POOL_NAME,
+  useCreditStatsV2,
+  usePoolInfoV2,
+  usePoolUnderlyingTokenInfoV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ErrorModal } from '../../ErrorModal'
+import { WidgetWrapper } from '../../WidgetWrapper'
+import { ChooseAmount } from './1-ChooseAmount'
+import { ApproveAllowance } from './2-ApproveAllowance'
+import { Transfer } from './3-Transfer'
+import { Success } from './4-Success'
+
+/**
+ * Credit line pool payment props V2
+ * @typedef {Object} CreditLinePaymentPropsV2
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @property {function():void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
+ * @property {function((number|undefined)):void|undefined} handleSuccess Optional function to notify that the credit line pool payment action is successful.
+ */
+export type CreditLinePaymentPropsV2 = {
+  poolName: keyof typeof POOL_NAME
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function CreditLinePaymentV2({
+  poolName: poolNameStr,
+  handleClose,
+  handleSuccess,
+}: CreditLinePaymentPropsV2): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { account, chainId, provider } = useWeb3React()
+  const poolName = POOL_NAME[poolNameStr]
+  const poolInfo = usePoolInfoV2(poolName, chainId)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [{ creditRecord, totalDueAmount, payoffAmount }] = useCreditStatsV2(
+    poolName,
+    account,
+    provider,
+  )
+  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
+
+  useEffect(() => {
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
+  }, [dispatch])
+
+  if (!poolInfo || !creditRecord || !poolUnderlyingToken) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle='Pay'
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      isLoading={!creditRecord}
+      loadingTitle='Pay'
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          payoffAmount={payoffAmount!}
+          totalDueAmount={totalDueAmount!}
+        />
+      )}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && (
+        <Transfer
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+        />
+      )}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolUnderlyingToken={poolUnderlyingToken}
+          handleAction={handleClose}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Pay'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/CreditLine/supplyFLC/1-ApproveAllowance.tsx

@@ -0,0 +1,40 @@
+import {
+  FirstLossCoverIndex,
+  PoolInfoV2,
+  UnderlyingTokenInfo,
+} from '@huma-finance/shared'
+import { BigNumber } from 'ethers'
+import React from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ApproveAllowanceModalV2 } from '../../ApproveAllowanceModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  amountToDeposit: BigNumber
+}
+
+export function ApproveAllowance({
+  poolInfo,
+  poolUnderlyingToken,
+  amountToDeposit,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+
+  const handleSuccess = () => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }
+
+  return (
+    <ApproveAllowanceModalV2
+      poolInfo={poolInfo}
+      spender={poolInfo.firstLossCovers[FirstLossCoverIndex.borrower]}
+      poolUnderlyingToken={poolUnderlyingToken}
+      allowanceAmount={amountToDeposit}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/CreditLine/supplyFLC/2-Transfer.tsx

@@ -0,0 +1,53 @@
+import {
+  FirstLossCoverIndex,
+  PoolInfoV2,
+  useFirstLossCoverContractV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber } from 'ethers'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { LoadingModal } from '../../LoadingModal'
+import { TxSendModalV2 } from '../../TxSendModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  amountToDeposit: BigNumber
+  title: string
+}
+
+export function Transfer({
+  poolInfo,
+  amountToDeposit,
+  title,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { provider, account } = useWeb3React()
+  const firstLossCoverContract = useFirstLossCoverContractV2(
+    poolInfo.poolName,
+    FirstLossCoverIndex.borrower,
+    provider,
+    account,
+  )
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  if (!firstLossCoverContract) {
+    return <LoadingModal title={title} />
+  }
+
+  return (
+    <TxSendModalV2
+      title={title}
+      contract={firstLossCoverContract}
+      method='depositCover'
+      params={[amountToDeposit]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}