@huma-finance/widgets 0.0.48-beta.187 → 0.0.48-beta.189

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.48-beta.187+c2ad954",
+  "version": "0.0.48-beta.189+347bf1c",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.47",
-    "@huma-finance/shared": "^0.0.47",
+    "@huma-finance/sdk": "^0.0.48-beta.189+347bf1c",
+    "@huma-finance/shared": "^0.0.48-beta.189+347bf1c",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -39,8 +39,6 @@
     "@mui/x-date-pickers": "^5.0.7",
     "@notifi-network/notifi-frontend-client": "^0.75.1",
     "@reduxjs/toolkit": "^1.8.6",
-    "@requestnetwork/payment-processor": "0.38.1-next.1918",
-    "@requestnetwork/request-client.js": "0.40.1-next.1918",
     "@types/utf8": "^3.0.1",
     "@walletconnect/ethereum-provider": "1.8.0",
     "@walletconnect/jsonrpc-http-connection": "^1.0.3",
@@ -121,7 +119,6 @@
     "@babel/preset-react": "^7.14.5",
     "@emotion/babel-plugin": "^11.10.2",
     "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@requestnetwork/types": "^0.36.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-image": "^3.0.2",
@@ -195,5 +192,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "c2ad954e101271a1f0d59dda4a4eaaf29c1336fc"
+  "gitHead": "347bf1c48c9d6a68b97d6f470c2cc7db26262769"
 }

package/src/components/ApproveAllowanceModal.tsx

@@ -85,6 +85,12 @@ export function ApproveAllowanceModal({
     const amountToIncrease = BigNumber.from(targetAllowanceAmount).sub(
       currentAllowance ?? 0,
     )
+
+    if (amountToIncrease.lte(0)) {
+      handleSuccess()
+      return
+    }
+
     send({
       contract: poolUnderlyingTokenContract!,
       method: 'increaseAllowance',
@@ -94,6 +100,7 @@ export function ApproveAllowanceModal({
   }, [
     account,
     allowanceAmount,
+    handleSuccess,
     poolInfo.pool,
     poolUnderlyingTokenContract,
     provider,

package/src/components/Lend/withdraw/2-ChooseAmount.tsx

@@ -9,18 +9,24 @@ import { ChooseAmountModal } from '../../ChooseAmountModal'
 
 type Props = {
   lenderPosition: BigNumber
+  poolBalance: BigNumber
   poolInfo: PoolInfoType
 }
 
 export function ChooseAmount({
   lenderPosition,
+  poolBalance,
   poolInfo,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { poolUnderlyingToken } = poolInfo
   const { symbol, decimals } = poolUnderlyingToken
   const [currentAmount, setCurrentAmount] = useState(0)
-  const withdrawableAmount = downScale<number>(lenderPosition, decimals)
+  // Take the minimum of the pool balance or the lender position
+  const withdrawableAmountBN = lenderPosition.lt(poolBalance)
+    ? lenderPosition
+    : poolBalance
+  const withdrawableAmount = downScale<number>(withdrawableAmountBN, decimals)
 
   const handleChangeAmount = useCallback(
     (newAmount: number) => {

package/src/components/Lend/withdraw/index.tsx

@@ -3,6 +3,7 @@ import {
   POOL_NAME,
   POOL_TYPE,
   useLenderPosition,
+  usePoolBalance,
   usePoolInfo,
 } from '@huma-finance/shared'
 import React, { useCallback, useEffect } from 'react'
@@ -51,21 +52,23 @@ export function LendWithdraw({
     poolType,
     account,
   )
+  const [poolBalance, refreshPoolBalance] = usePoolBalance(poolName, poolType)
 
   useEffect(() => {
-    if (!step && lenderPosition) {
+    if (!step && lenderPosition && poolBalance) {
       dispatch(setStep(WIDGET_STEP.CheckWithdrawable))
     }
-  }, [dispatch, lenderPosition, step])
+  }, [dispatch, lenderPosition, poolBalance, step])
 
   const handleWithdrawSuccess = useCallback(
     (blockNumber: number) => {
       refreshLenderPosition()
+      refreshPoolBalance()
       if (handleSuccess) {
         handleSuccess(blockNumber)
       }
     },
-    [handleSuccess, refreshLenderPosition],
+    [handleSuccess, refreshLenderPosition, refreshPoolBalance],
   )
 
   if (!poolInfo) {
@@ -82,7 +85,11 @@ export function LendWithdraw({
         <CheckWithdrawable poolInfo={poolInfo} handleClose={handleClose} />
       )}
       {step === WIDGET_STEP.ChooseAmount && (
-        <ChooseAmount poolInfo={poolInfo} lenderPosition={lenderPosition!} />
+        <ChooseAmount
+          poolInfo={poolInfo}
+          lenderPosition={lenderPosition!}
+          poolBalance={poolBalance!}
+        />
       )}
       {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
       {step === WIDGET_STEP.Done && (

package/src/components/StreamFactoring/borrow/1-Evaluation.tsx

@@ -1,10 +1,11 @@
-import { useWeb3React } from '@web3-react/core'
+import { getAddress } from '@ethersproject/address'
 import { PoolInfoType } from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
 import React, { useEffect } from 'react'
 
 import useEA from '../../../hooks/useEA'
-import { LoadingModal } from '../../LoadingModal'
 import { WIDGET_STEP } from '../../../store/widgets.store'
+import { LoadingModal } from '../../LoadingModal'
 import { SignIn } from '../../SignIn'
 
 type Props = {
@@ -35,7 +36,7 @@ export function Evaluation({
             receivable: {
               address: poolInfo.assetAddress!,
             },
-            payerWalletAddress: payerAddress,
+            payerWalletAddress: getAddress(payerAddress),
             superToken,
           },
         },

package/src/components/StreamFactoring/borrow/2-ChooseAmount.tsx

@@ -28,20 +28,24 @@ export function ChooseAmount({
   const [chargedFees, setChargedFees] = useState(0)
   const [currentAmount, setCurrentAmount] = useState(0)
   const borrowPeriodInSeconds = approval!.terms.intervalInDays * 24 * 60 * 60
+  const superTokenDecimals = poolInfo.extra?.superToken?.decimals!
+  const underlyingTokenDecimals = poolInfo.poolUnderlyingToken.decimals!
+  // To ensure not to borrow all the available flowrate due to contract limitation
+  const borrowMaxAmount = Number(approval!.terms.creditLimitFormatted) - 0.01
 
   const getBorrowFlowrateAndAmount = useCallback(
     (borrowAmount: number) => {
       const currentFlowRateBN = toBigNumber(currentFlowRate)
-      const borrowAmountBN = toBigNumber(
-        upScale(borrowAmount, approval!.token.decimal),
+      const borrowAmountSuperTokenBN = toBigNumber(
+        upScale(borrowAmount, superTokenDecimals),
       )
 
-      const totalAmountInBorrowPeriod = currentFlowRateBN.mul(
+      const totalAmountSuperTokenInBorrowPeriod = currentFlowRateBN.mul(
         borrowPeriodInSeconds,
       )
-      let borrowFlowrate = borrowAmountBN
+      let borrowFlowrate = borrowAmountSuperTokenBN
         .mul(currentFlowRateBN)
-        .div(totalAmountInBorrowPeriod)
+        .div(totalAmountSuperTokenInBorrowPeriod)
         // To ensure enough flowRate due to round down when convert to string
         .add(1)
 
@@ -49,26 +53,28 @@ export function ChooseAmount({
       if (borrowFlowrate.gte(currentFlowRateBN)) {
         borrowFlowrate = currentFlowRateBN.sub(1)
       }
-      if (borrowAmountBN.gte(approval!.terms.creditLimit)) {
-        borrowFlowrate = borrowFlowrate.sub(1)
-      }
 
       // As borrowFlowrate adds 1, need to calculate the new accurate borrow amount
       const newBorrowAmountBN = borrowFlowrate
-        .mul(totalAmountInBorrowPeriod)
+        .mul(totalAmountSuperTokenInBorrowPeriod)
         .div(currentFlowRateBN)
-      const newBorrowAmount = downScale(
-        newBorrowAmountBN,
-        approval!.token.decimal,
+      const newBorrowAmount = downScale(newBorrowAmountBN, superTokenDecimals)
+      const newBorrowAmountUnderlyingTokenBN = toBigNumber(
+        upScale(newBorrowAmount, underlyingTokenDecimals),
       )
 
       return {
         borrowFlowrate: borrowFlowrate.toString(),
         borrowAmount: Number(newBorrowAmount),
-        borrowAmountBN: newBorrowAmountBN,
+        borrowAmountBN: newBorrowAmountUnderlyingTokenBN,
       }
     },
-    [approval, borrowPeriodInSeconds, currentFlowRate],
+    [
+      borrowPeriodInSeconds,
+      currentFlowRate,
+      superTokenDecimals,
+      underlyingTokenDecimals,
+    ],
   )
 
   const handleChangeAmount = useCallback(
@@ -114,7 +120,7 @@ export function ChooseAmount({
     <ChooseAmountModal
       title='Choose Amount'
       description1='Access up to 100% of your stream flowrate'
-      sliderMax={Number(approval.terms.creditLimitFormatted)}
+      sliderMax={borrowMaxAmount}
       currentAmount={currentAmount}
       tokenSymbol={approval.token.symbol}
       topLeft='Fees'

package/src/components/StreamFactoring/borrow/3-ConfirmTransfer.tsx

@@ -1,5 +1,4 @@
-import { CHAINS, isEmpty } from '@huma-finance/shared'
-import { useWeb3React } from '@web3-react/core'
+import { isEmpty } from '@huma-finance/shared'
 import React, { useCallback } from 'react'
 
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
@@ -10,15 +9,11 @@ import { ConfirmTransferModal } from '../../ConfirmTransferModal'
 
 export function ConfirmTransfer(): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const { chainId } = useWeb3React()
   const { borrowAmount, approval } = useAppSelector(selectWidgetState)
 
   const handleAction = useCallback(() => {
-    const step = CHAINS[chainId!].isTestnet
-      ? WIDGET_STEP.ApproveAllowance
-      : WIDGET_STEP.Permit
-    dispatch(setStep(step))
-  }, [chainId, dispatch])
+    dispatch(setStep(WIDGET_STEP.ApproveAllowance))
+  }, [dispatch])
 
   if (isEmpty(borrowAmount) || isEmpty(approval)) {
     return null

package/src/components/StreamFactoring/borrow/5-Permit.tsx

@@ -1,12 +1,9 @@
 import {
-  CHAINS,
-  Erc2612,
   PoolInfoType,
   SuperfluidPoolProcessor,
+  SuperfluidPoolProcessor_ABI,
   useERC2612Permit,
   useMount,
-  ERC2612_ABI,
-  SuperfluidPoolProcessor_ABI,
 } from '@huma-finance/shared'
 import { BigNumber, Contract, ethers } from 'ethers'
 import React from 'react'
@@ -25,7 +22,6 @@ import { LoadingModal } from '../../LoadingModal'
 type Props = {
   poolInfo: PoolInfoType
   payerAddress: string
-  chainId: number
   borrower: string
   superToken: string
 }
@@ -33,36 +29,15 @@ type Props = {
 export function Permit({
   poolInfo,
   payerAddress,
-  chainId,
   borrower,
   superToken,
 }: Props): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { address: tokenAddress } = poolInfo.poolUnderlyingToken
   const { borrowAmountBN: borrowAmountBNJson, stream } =
     useAppSelector(selectWidgetState)
-  const { getERC2612PermitMessage, getTradableStreamPermitMessage } =
-    useERC2612Permit()
+  const { getTradableStreamPermitMessage } = useERC2612Permit()
   const borrowAmountBN = BigNumber.from(borrowAmountBNJson)
 
-  const getApproveAllowanceCallData = async () => {
-    const erc2612PermitResult = await getERC2612PermitMessage(
-      tokenAddress,
-      poolInfo.poolProcessor!,
-      borrowAmountBN.toString()!,
-    )
-    const tokenContract = new Contract(tokenAddress, ERC2612_ABI) as Erc2612
-    return tokenContract.interface.encodeFunctionData('permit', [
-      poolInfo.poolProcessor!,
-      borrowAmountBN.toString()!,
-      erc2612PermitResult.nonce,
-      erc2612PermitResult.deadline,
-      erc2612PermitResult.v,
-      erc2612PermitResult.r,
-      erc2612PermitResult.s,
-    ])
-  }
-
   const getDrawdownCallData = async () => {
     const NFTPermitResult = await getTradableStreamPermitMessage(
       poolInfo.assetAddress!,
@@ -113,14 +88,6 @@ export function Permit({
     try {
       const callData = []
       const addresses: string[] = []
-
-      // The token in Goerli hasn't integrated ERC-2612
-      if (!CHAINS[chainId].isTestnet) {
-        const approveAllowanceCallData = await getApproveAllowanceCallData()
-        addresses.push(tokenAddress)
-        callData.push(approveAllowanceCallData)
-      }
-
       const drawdownCalldata = await getDrawdownCallData()
       addresses.push(poolInfo.poolProcessor!)
       callData.push(drawdownCalldata)

package/src/components/StreamFactoring/borrow/index.tsx

@@ -39,7 +39,7 @@ export function StreamFactoringBorrow({
   handleSuccess,
 }: StreamFactoringBorrowProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account, chainId } = useWeb3React()
+  const { account } = useWeb3React()
   const poolInfo = usePoolInfo(poolName, poolType)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
 
@@ -71,11 +71,10 @@ export function StreamFactoringBorrow({
       {step === WIDGET_STEP.ApproveAllowance && (
         <ApproveAllowance poolInfo={poolInfo} />
       )}
-      {step === WIDGET_STEP.Permit && account && chainId && (
+      {step === WIDGET_STEP.Permit && account && (
         <Permit
           poolInfo={poolInfo}
           payerAddress={payerAddress}
-          chainId={chainId}
           borrower={account}
           superToken={superToken}
         />

package/src/components/SuperfluidFactoring/SuperfluidFactoredList.tsx

@@ -50,9 +50,9 @@ export function SuperfluidFactoredList({
   const setItem = useCallback(
     () =>
       Promise.resolve({
-        name: poolInfo?.extra?.superTokens?.[0].symbol ?? '',
+        name: poolInfo?.extra?.superToken?.symbol ?? '',
       }),
-    [poolInfo?.extra?.superTokens],
+    [poolInfo?.extra?.superToken],
   )
 
   return (

package/src/components/SuperfluidFactoring/SuperfluidUpcomingList.tsx

@@ -106,7 +106,9 @@ export function SuperfluidUpcomingList({
   const { data } = useQuery<{ streams: Stream[] }>(GET_RECEIVED_STREAMS, {
     variables: {
       receiver: account ? account.toLowerCase() : undefined,
-      tokenIds: poolInfo?.extra?.superTokens?.map((item) => item.id) ?? [],
+      tokenIds: poolInfo?.extra?.superToken
+        ? [poolInfo.extra.superToken.id]
+        : [],
     },
   })
 

package/src/index.tsx

@@ -10,6 +10,7 @@ import { Provider as Eip1193Provider } from '@web3-react/types'
 import { Provider as AtomProvider } from 'jotai'
 import { Provider as ReduxProvider } from 'react-redux'
 
+import { useEffect, useState } from 'react'
 import { ChainSupportProvider } from './components/ChainSupportProvider'
 import {
   CreditLineApprove,
@@ -37,10 +38,6 @@ import { SuperfluidFactoring } from './components/SuperfluidFactoring'
 import { store } from './store'
 import { themeHuma } from './theme'
 import { WCProps } from './utilTypes'
-import {
-  RequestNetworkInvoiceFactoringBorrow,
-  RequestNetworkInvoiceFactoringBorrowProps,
-} from './components/RequestNetworkInvoiceFactoring'
 
 /**
  * Mapping of your JSON-RPC connections indexed by chainId
@@ -67,11 +64,17 @@ type WidgetProps = {
 
 function Widget(props: WCProps<WidgetProps>) {
   const { children, provider } = props
+  const [chainId, setChainId] = useState<number | undefined>(undefined)
 
-  let chainId
-  if (provider instanceof JsonRpcProvider) {
-    chainId = provider.network.chainId
-  }
+  useEffect(() => {
+    const getChainId = async () => {
+      if (provider instanceof JsonRpcProvider) {
+        const network = await provider.getNetwork()
+        setChainId(network?.chainId)
+      }
+    }
+    getChainId()
+  }, [provider])
 
   return (
     <ThemeProvider theme={themeHuma}>
@@ -86,31 +89,6 @@ function Widget(props: WCProps<WidgetProps>) {
   )
 }
 
-/**
- * Invoice factoring pool borrow widget props
- * @typedef {Object} RequestNetworkInvoiceFactoringBorrowWidgetProps
- * @property {RequestNetworkInvoiceFactoringBorrowProps} RequestNetworkInvoiceFactoringBorrowProps - Invoice factoring pool borrow props.
- * @property {WidgetProps} WidgetProps - Widget general props.
- */
-type RequestNetworkInvoiceFactoringBorrowWidgetProps =
-  RequestNetworkInvoiceFactoringBorrowProps & WidgetProps
-
-/**
- * Invoice factoring borrow widget
- *
- * @param {RequestNetworkInvoiceFactoringBorrowWidgetProps} props - The invoice factoring pool borrow widget props.
- * @returns Invoice factoring pool borrow widget component
- */
-export function RequestNetworkInvoiceFactoringBorrowWidget(
-  props: RequestNetworkInvoiceFactoringBorrowWidgetProps,
-) {
-  return (
-    <Widget {...props}>
-      <RequestNetworkInvoiceFactoringBorrow {...props} />
-    </Widget>
-  )
-}
-
 /**
  * Invoice factoring pool borrow widget props
  * @typedef {Object} InvoiceFactoringBorrowWidgetProps

package/src/components/RequestNetworkInvoiceFactoring/1-Evaluation.tsx

@@ -1,58 +0,0 @@
-import { useWeb3React } from '@web3-react/core'
-import { PoolInfoType, toBigNumber } from '@huma-finance/shared'
-import React, { useEffect } from 'react'
-
-import useEA from '../../hooks/useEA'
-import { LoadingModal } from '../LoadingModal'
-import { WIDGET_STEP } from '../../store/widgets.store'
-import { SignIn } from '../SignIn'
-
-type Props = {
-  poolInfo: PoolInfoType
-  tokenId: string
-}
-
-export function Evaluation({ poolInfo, tokenId }: Props): React.ReactElement {
-  const {
-    checkingEA,
-    isWalletOwnershipVerificationRequired,
-    isWalletOwnershipVerified,
-  } = useEA()
-  const { account, chainId } = useWeb3React()
-
-  useEffect(() => {
-    if (account && chainId) {
-      checkingEA(
-        {
-          poolAddress: poolInfo.pool,
-          borrowerWalletAddress: account,
-          context: {
-            receivable: {
-              address: poolInfo.assetAddress!,
-              param: toBigNumber(tokenId).toHexString(),
-            },
-          },
-        },
-        WIDGET_STEP.ChooseAmount,
-      )
-    }
-  }, [
-    account,
-    chainId,
-    checkingEA,
-    poolInfo.assetAddress,
-    poolInfo.pool,
-    tokenId,
-    isWalletOwnershipVerified,
-  ])
-
-  if (isWalletOwnershipVerificationRequired) {
-    return <SignIn />
-  }
-  return (
-    <LoadingModal
-      title='Checking Invoice'
-      description='Checking if the invoice qualifies for factoring...'
-    />
-  )
-}

package/src/components/RequestNetworkInvoiceFactoring/2-ChooseAmount.tsx

@@ -1,88 +0,0 @@
-import {
-  AccountStats,
-  PoolInfoType,
-  upScale,
-  useFeeManager,
-} from '@huma-finance/shared'
-import React, { useCallback, useState } from 'react'
-
-import { useAppDispatch, useAppSelector } from '../../hooks/useRedux'
-import { setBorrowInfo } from '../../store/widgets.reducers'
-import { selectWidgetState } from '../../store/widgets.selectors'
-import { WIDGET_STEP } from '../../store/widgets.store'
-import { ChooseAmountModal } from '../ChooseAmountModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  accountStats: AccountStats
-}
-
-export function ChooseAmount({
-  poolInfo,
-  accountStats,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { creditRecord } = accountStats
-  const [chargedFees, setChargedFees] = useState(0)
-  const [currentAmount, setCurrentAmount] = useState(0)
-  const { approval } = useAppSelector(selectWidgetState)
-  const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
-  const [remainder, setRemainder] = useState<string | number | undefined>(
-    approval!.receivable?.amountFormatted,
-  )
-
-  const getAvailableCreditLimit = () => {
-    if (approval && creditRecord) {
-      const principal = creditRecord.unbilledPrincipal
-        .add(creditRecord.totalDue)
-        .sub(creditRecord.feesAndInterestDue)
-        .toNumber()
-      return Number(approval.terms.creditLimitFormatted) - principal
-    }
-    return 0
-  }
-
-  const handleChangeAmount = useCallback(
-    (newAmount: number) => {
-      if (approval) {
-        setCurrentAmount(newAmount)
-        setChargedFees(getFeesCharged(newAmount))
-        setRemainder(Number(approval.receivable!.amountFormatted) - newAmount)
-      }
-    },
-    [approval, getFeesCharged],
-  )
-
-  const handleAction = useCallback(() => {
-    dispatch(
-      setBorrowInfo({
-        borrowAmount: currentAmount,
-        borrowAmountBN: upScale(currentAmount, approval?.token.decimal),
-        chargedFees,
-        remainder: Number(remainder!),
-        nextStep: WIDGET_STEP.ConfirmTransfer,
-      }),
-    )
-  }, [approval?.token.decimal, chargedFees, currentAmount, dispatch, remainder])
-
-  if (!approval) {
-    return null
-  }
-
-  return (
-    <ChooseAmountModal
-      title='Choose Amount'
-      description1='Access up to 80% of your invoice value'
-      description2='The remainder will be sent to your wallet when the invoice is paid'
-      sliderMax={getAvailableCreditLimit()}
-      currentAmount={currentAmount}
-      tokenSymbol={approval.token.symbol}
-      topLeft='Fees'
-      topRight={`${chargedFees} ${approval.token.symbol}`}
-      downLeft='Remainder'
-      downRight={`${remainder} ${approval.token.symbol}`}
-      handleChangeAmount={handleChangeAmount}
-      handleAction={handleAction}
-    />
-  )
-}

package/src/components/RequestNetworkInvoiceFactoring/3-ConfirmTransfer.tsx

@@ -1,37 +0,0 @@
-import { isEmpty } from '@huma-finance/shared'
-import React 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 { ConfirmTransferModal } from '../ConfirmTransferModal'
-
-export function ConfirmTransfer(): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { borrowAmountNet, approval } = useAppSelector(selectWidgetState)
-
-  const handleAction = () => {
-    dispatch(setStep(WIDGET_STEP.ApproveNFT))
-  }
-
-  if (isEmpty(borrowAmountNet) || isEmpty(approval)) {
-    return null
-  }
-
-  return (
-    <ConfirmTransferModal
-      title='Confirm transaction details'
-      description={`Huma keeps your Invoice NFT as collateral until it's fully paid.`}
-      items={[
-        { leftText: 'Invoice NFT', rightText: 'Huma' },
-        {
-          leftText: `${borrowAmountNet!} ${approval?.token.symbol}`,
-          rightText: 'You',
-        },
-      ]}
-      actionText='APPROVE TRANSFER'
-      handleAction={handleAction}
-    />
-  )
-}