@huma-finance/widgets 0.0.37 → 0.0.38-beta.0

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

@@ -1,88 +1,88 @@
-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}
-    />
-  )
-}
+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/InvoiceFactoring/borrow/3-ConfirmTransfer.tsx

@@ -1,37 +1,37 @@
-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}
-    />
-  )
-}
+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}
+    />
+  )
+}

package/src/components/InvoiceFactoring/borrow/4-ApproveNFT.tsx

@@ -1,55 +1,55 @@
-import { useWeb3React } from '@web3-react/core'
-import {
-  PoolInfoType,
-  sendTxAtom,
-  txAtom,
-  TxStateType,
-  useInvoiceNFTContract,
-} from '@huma-finance/shared'
-import { useAtom } from 'jotai'
-import { useResetAtom } from 'jotai/utils'
-import React, { useEffect } 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 { ViewOnExplorer } from '../../ViewOnExplorer'
-
-type Props = {
-  poolInfo: PoolInfoType
-  tokenId: string
-}
-
-export function ApproveNFT({ poolInfo, tokenId }: Props): React.ReactElement {
-  const dispatch = useAppDispatch()
-  const { provider } = useWeb3React()
-  const [{ state, txHash }, send] = useAtom(sendTxAtom)
-  const reset = useResetAtom(txAtom)
-  const invoiceNFTContract = useInvoiceNFTContract(poolInfo.poolName)
-
-  useEffect(() => {
-    if (state === TxStateType.Success) {
-      reset()
-      dispatch(setStep(WIDGET_STEP.Transfer))
-    }
-  }, [dispatch, reset, state])
-
-  useEffect(() => {
-    send({
-      contract: invoiceNFTContract!,
-      method: 'approve',
-      params: [poolInfo.pool, tokenId],
-      provider,
-    })
-  }, [invoiceNFTContract, poolInfo.pool, provider, send, tokenId])
-
-  return (
-    <LoadingModal
-      title='Approve Invoice Transfer'
-      description='Waiting for approval confirmation...'
-    >
-      <ViewOnExplorer txHash={txHash} />
-    </LoadingModal>
-  )
-}
+import { useWeb3React } from '@web3-react/core'
+import {
+  PoolInfoType,
+  sendTxAtom,
+  txAtom,
+  TxStateType,
+  useInvoiceNFTContract,
+} from '@huma-finance/shared'
+import { useAtom } from 'jotai'
+import { useResetAtom } from 'jotai/utils'
+import React, { useEffect } 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 { ViewOnExplorer } from '../../ViewOnExplorer'
+
+type Props = {
+  poolInfo: PoolInfoType
+  tokenId: string
+}
+
+export function ApproveNFT({ poolInfo, tokenId }: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { provider } = useWeb3React()
+  const [{ state, txHash }, send] = useAtom(sendTxAtom)
+  const reset = useResetAtom(txAtom)
+  const invoiceNFTContract = useInvoiceNFTContract(poolInfo.poolName)
+
+  useEffect(() => {
+    if (state === TxStateType.Success) {
+      reset()
+      dispatch(setStep(WIDGET_STEP.Transfer))
+    }
+  }, [dispatch, reset, state])
+
+  useEffect(() => {
+    send({
+      contract: invoiceNFTContract!,
+      method: 'approve',
+      params: [poolInfo.pool, tokenId],
+      provider,
+    })
+  }, [invoiceNFTContract, poolInfo.pool, provider, send, tokenId])
+
+  return (
+    <LoadingModal
+      title='Approve Invoice Transfer'
+      description='Waiting for approval confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

package/src/components/InvoiceFactoring/borrow/5-Transfer.tsx

@@ -1,34 +1,34 @@
-import { PoolInfoType, toBigNumber, upScale } from '@huma-finance/shared'
-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 { TxSendModal } from '../../TxSendModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  tokenId: string
-}
-
-export function Transfer({ poolInfo, tokenId }: Props): React.ReactElement {
-  const dispatch = useAppDispatch()
-  const { decimals } = poolInfo.poolUnderlyingToken
-  const { borrowAmount } = useAppSelector(selectWidgetState)
-  const requestLoanBigNumber = toBigNumber(upScale(borrowAmount!, decimals))
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
-  }, [dispatch])
-
-  return (
-    <TxSendModal
-      poolInfo={poolInfo}
-      title='Transfer Invoice and Money'
-      method='drawdownWithReceivable'
-      params={[requestLoanBigNumber, poolInfo.assetAddress, tokenId]}
-      handleSuccess={handleSuccess}
-    />
-  )
-}
+import { PoolInfoType, toBigNumber, upScale } from '@huma-finance/shared'
+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 { TxSendModal } from '../../TxSendModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  tokenId: string
+}
+
+export function Transfer({ poolInfo, tokenId }: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { decimals } = poolInfo.poolUnderlyingToken
+  const { borrowAmount } = useAppSelector(selectWidgetState)
+  const requestLoanBigNumber = toBigNumber(upScale(borrowAmount!, decimals))
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  return (
+    <TxSendModal
+      poolInfo={poolInfo}
+      title='Transfer Invoice and Money'
+      method='drawdownWithReceivable'
+      params={[requestLoanBigNumber, poolInfo.assetAddress, tokenId]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/InvoiceFactoring/borrow/6-Success.tsx

@@ -1,20 +1,20 @@
-import React from 'react'
-import { useAppSelector } from '../../../hooks/useRedux'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { TxDoneModal } from '../../TxDoneModal'
-
-type Props = {
-  handleAction: () => void
-}
-
-export function Success({ handleAction }: Props): React.ReactElement {
-  const { borrowAmountNet, remainder, approval } =
-    useAppSelector(selectWidgetState)
-
-  const content = [
-    `${borrowAmountNet} ${approval?.token.symbol} is now in your wallet.`,
-    `The remaining ${remainder} ${approval?.token.symbol} will be sent to your wallet when the invoice is paid.`,
-  ]
-
-  return <TxDoneModal handleAction={handleAction} content={content} />
-}
+import React from 'react'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  handleAction: () => void
+}
+
+export function Success({ handleAction }: Props): React.ReactElement {
+  const { borrowAmountNet, remainder, approval } =
+    useAppSelector(selectWidgetState)
+
+  const content = [
+    `${borrowAmountNet} ${approval?.token.symbol} is now in your wallet.`,
+    `The remaining ${remainder} ${approval?.token.symbol} will be sent to your wallet when the invoice is paid.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

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

@@ -1,94 +1,94 @@
-import { useWeb3React } from '@web3-react/core'
-import { BigNumber } from 'ethers'
-import {
-  POOL_NAME,
-  POOL_TYPE,
-  useAccountStats,
-  usePoolInfo,
-} from '@huma-finance/shared'
-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 { Evaluation } from './1-Evaluation'
-import { ChooseAmount } from './2-ChooseAmount'
-import { ConfirmTransfer } from './3-ConfirmTransfer'
-import { ApproveNFT } from './4-ApproveNFT'
-import { Transfer } from './5-Transfer'
-import { Success } from './6-Success'
-
-/**
- * Invoice factoring pool borrow props
- * @typedef {Object} InvoiceFactoringBorrowProps
- * @property {POOL_NAME} poolName The name of the pool.
- * @property {POOL_TYPE} poolType The type of the pool.
- * @property {string|BigNumber} tokenId The NFT token id representing invoice.
- * @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 invoice pool borrow action is successful.
- */
-export interface InvoiceFactoringBorrowProps {
-  poolName: keyof typeof POOL_NAME
-  poolType: keyof typeof POOL_TYPE
-  tokenId: string | BigNumber
-  handleClose: () => void
-  handleSuccess?: (blockNumber?: number) => void
-}
-
-export function InvoiceFactoringBorrow({
-  poolName: poolNameStr,
-  poolType: poolTypeStr,
-  tokenId,
-  handleClose,
-  handleSuccess,
-}: InvoiceFactoringBorrowProps): React.ReactElement | null {
-  const dispatch = useDispatch()
-  const { account } = useWeb3React()
-  const poolName = POOL_NAME[poolNameStr]
-  const poolType = POOL_TYPE[poolTypeStr]
-  const poolInfo = usePoolInfo(poolName, poolType)
-  const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [accountStats] = useAccountStats(poolName, poolType, account)
-
-  useEffect(() => {
-    dispatch(setStep(WIDGET_STEP.Evaluation))
-  }, [dispatch])
-
-  if (!poolInfo) {
-    return null
-  }
-
-  return (
-    <WidgetWrapper
-      isOpen
-      handleClose={handleClose}
-      handleSuccess={handleSuccess}
-    >
-      {step === WIDGET_STEP.Evaluation && (
-        <Evaluation poolInfo={poolInfo} tokenId={tokenId.toString()} />
-      )}
-      {step === WIDGET_STEP.ChooseAmount && (
-        <ChooseAmount poolInfo={poolInfo} accountStats={accountStats} />
-      )}
-      {step === WIDGET_STEP.ConfirmTransfer && <ConfirmTransfer />}
-      {step === WIDGET_STEP.ApproveNFT && (
-        <ApproveNFT poolInfo={poolInfo} tokenId={tokenId.toString()} />
-      )}
-      {step === WIDGET_STEP.Transfer && (
-        <Transfer poolInfo={poolInfo} tokenId={tokenId.toString()} />
-      )}
-      {step === WIDGET_STEP.Done && <Success handleAction={handleClose} />}
-      {step === WIDGET_STEP.Error && (
-        <ErrorModal
-          title='Invoice Factoring'
-          errorMessage={errorMessage}
-          handleOk={handleClose}
-        />
-      )}
-    </WidgetWrapper>
-  )
-}
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber } from 'ethers'
+import {
+  POOL_NAME,
+  POOL_TYPE,
+  useAccountStats,
+  usePoolInfo,
+} from '@huma-finance/shared'
+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 { Evaluation } from './1-Evaluation'
+import { ChooseAmount } from './2-ChooseAmount'
+import { ConfirmTransfer } from './3-ConfirmTransfer'
+import { ApproveNFT } from './4-ApproveNFT'
+import { Transfer } from './5-Transfer'
+import { Success } from './6-Success'
+
+/**
+ * Invoice factoring pool borrow props
+ * @typedef {Object} InvoiceFactoringBorrowProps
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @property {POOL_TYPE} poolType The type of the pool.
+ * @property {string|BigNumber} tokenId The NFT token id representing invoice.
+ * @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 invoice pool borrow action is successful.
+ */
+export interface InvoiceFactoringBorrowProps {
+  poolName: keyof typeof POOL_NAME
+  poolType: keyof typeof POOL_TYPE
+  tokenId: string | BigNumber
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function InvoiceFactoringBorrow({
+  poolName: poolNameStr,
+  poolType: poolTypeStr,
+  tokenId,
+  handleClose,
+  handleSuccess,
+}: InvoiceFactoringBorrowProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { account } = useWeb3React()
+  const poolName = POOL_NAME[poolNameStr]
+  const poolType = POOL_TYPE[poolTypeStr]
+  const poolInfo = usePoolInfo(poolName, poolType)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [accountStats] = useAccountStats(poolName, poolType, account)
+
+  useEffect(() => {
+    dispatch(setStep(WIDGET_STEP.Evaluation))
+  }, [dispatch])
+
+  if (!poolInfo) {
+    return null
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.Evaluation && (
+        <Evaluation poolInfo={poolInfo} tokenId={tokenId.toString()} />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount poolInfo={poolInfo} accountStats={accountStats} />
+      )}
+      {step === WIDGET_STEP.ConfirmTransfer && <ConfirmTransfer />}
+      {step === WIDGET_STEP.ApproveNFT && (
+        <ApproveNFT poolInfo={poolInfo} tokenId={tokenId.toString()} />
+      )}
+      {step === WIDGET_STEP.Transfer && (
+        <Transfer poolInfo={poolInfo} tokenId={tokenId.toString()} />
+      )}
+      {step === WIDGET_STEP.Done && <Success handleAction={handleClose} />}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Invoice Factoring'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}