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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.48-beta.187+c2ad954",
+  "version": "0.0.48-beta.188+fa13511",
   "publishConfig": {
     "access": "public"
   },
@@ -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": "fa13511dd738b17865b849f8744c28bdf3393c3f"
 }

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/index.tsx

@@ -37,10 +37,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
@@ -86,31 +82,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}
-    />
-  )
-}

package/src/components/RequestNetworkInvoiceFactoring/4-ApproveNFT.tsx

@@ -1,55 +0,0 @@
-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/RequestNetworkInvoiceFactoring/5-Transfer.tsx

@@ -1,34 +0,0 @@
-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/RequestNetworkInvoiceFactoring/6-Success.tsx

@@ -1,20 +0,0 @@
-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/RequestNetworkInvoiceFactoring/index.tsx

@@ -1,137 +0,0 @@
-import { useWeb3React } from '@web3-react/core'
-import { RequestLogicTypes } from '@requestnetwork/types'
-import {
-  POOL_NAME,
-  POOL_TYPE,
-  useAccountStats,
-  usePoolInfo,
-} from '@huma-finance/shared'
-import React, { useEffect, useState } from 'react'
-import { useDispatch } from 'react-redux'
-import { RequestNetwork } from '@requestnetwork/request-client.js'
-import { getReceivableTokenIdForRequest } from '@requestnetwork/payment-processor'
-import { BigNumberish } from 'ethers'
-
-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} RequestNetworkInvoiceFactoringBorrowProps
- * @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 RequestNetworkInvoiceFactoringBorrowProps {
-  poolName: keyof typeof POOL_NAME
-  poolType: keyof typeof POOL_TYPE
-  requestId: RequestLogicTypes.RequestId
-  handleClose: () => void
-  handleSuccess?: (blockNumber?: number) => void
-}
-
-export function RequestNetworkInvoiceFactoringBorrow({
-  poolName: poolNameStr,
-  poolType: poolTypeStr,
-  requestId,
-  handleClose,
-  handleSuccess,
-}: RequestNetworkInvoiceFactoringBorrowProps): React.ReactElement | null {
-  const dispatch = useDispatch()
-  const { account, provider } = 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)
-  const [tokenId, setTokenId] = useState<BigNumberish>()
-  const [isLoading, setIsLoading] = useState<boolean>(true)
-
-  useEffect(() => {
-    dispatch(setStep(WIDGET_STEP.Evaluation))
-  }, [dispatch])
-
-  useEffect(() => {
-    if (provider == null) {
-      return () => {} // Return empty func to satisty consistent return lint rule
-    }
-
-    // Refetch every 5 seconds until requestData is non-null
-    const interval = setInterval(() => {
-      async function getInvoice() {
-        if (provider == null) {
-          return
-        }
-
-        const requestNetwork = new RequestNetwork({
-          nodeConnectionConfig: {
-            baseURL: `https://xdai.gateway.request.network/`,
-          },
-        })
-        const request = await requestNetwork.fromRequestId(requestId)
-        const requestData = request.getData()
-        const tokenId = await getReceivableTokenIdForRequest(
-          requestData,
-          provider,
-        )
-
-        // Check if token ID exists yet for this request
-        if (tokenId) {
-          setTokenId(tokenId)
-          setIsLoading(false)
-          clearInterval(interval)
-        }
-      }
-      getInvoice()
-    }, 5000)
-
-    return () => clearInterval(interval)
-  }, [provider, requestId])
-
-  if (!poolInfo) {
-    return null
-  }
-
-  return (
-    <WidgetWrapper
-      isOpen
-      isLoading={isLoading}
-      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>
-  )
-}

package/src/cosmos/RequestNetworkBorrow.fixture.tsx

@@ -1,65 +0,0 @@
-import { POOL_NAME, POOL_TYPE } from '@huma-finance/shared'
-import { JsonRpcProvider } from '@ethersproject/providers'
-import { Button } from '@mui/material'
-import { Box } from '@mui/system'
-import { useState } from 'react'
-import { WalletWrapper } from './WalletWrapper'
-import { initEnv } from './utils/env'
-import { RequestNetworkInvoiceFactoringBorrowWidget } from '..'
-
-initEnv()
-
-function Fixture() {
-  const poolName = POOL_NAME.RequestNetwork
-  const poolType = POOL_TYPE.Invoice
-  const [showModal, setShowModal] = useState(false)
-  const [requestId, setRequestId] = useState(
-    '01a84260baadbf9a46ea205d485b1a773f863c7531d19b6dd1d5073d82a5c414b7',
-  )
-
-  const handleClick = () => {
-    setShowModal(true)
-  }
-
-  const handleClose = () => {
-    setShowModal(false)
-  }
-
-  return (
-    <>
-      <Box>Pool: {poolName}</Box>
-      <Box>Pool Type: {poolType}</Box>
-      <input
-        type='text'
-        value={requestId}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onChange={(event: any) => {
-          setRequestId(event.target.value)
-        }}
-      />
-      <Button variant='contained' onClick={handleClick}>
-        Borrow
-      </Button>
-      {showModal && (
-        <RequestNetworkInvoiceFactoringBorrowWidget
-          poolName={poolName}
-          poolType={poolType}
-          requestId={requestId}
-          handleClose={() => {
-            handleClose()
-          }}
-          handleSuccess={() => {
-            alert('Success')
-          }}
-          provider={new JsonRpcProvider()}
-        />
-      )}
-    </>
-  )
-}
-
-export default (
-  <WalletWrapper>
-    <Fixture />
-  </WalletWrapper>
-)