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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.47",
+  "version": "0.0.48-beta.187+c2ad954",
   "publishConfig": {
     "access": "public"
   },
@@ -39,6 +39,8 @@
     "@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",
@@ -119,6 +121,7 @@
     "@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",
@@ -192,5 +195,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "af0cb55217eca44673d30a47eca96d11d9139906"
+  "gitHead": "c2ad954e101271a1f0d59dda4a4eaaf29c1336fc"
 }

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

@@ -0,0 +1,58 @@
+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

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

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

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

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

@@ -0,0 +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>
+  )
+}

package/src/components/RequestNetworkInvoiceFactoring/5-Transfer.tsx

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

package/src/components/RequestNetworkInvoiceFactoring/6-Success.tsx

@@ -0,0 +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} />
+}

package/src/components/RequestNetworkInvoiceFactoring/index.tsx

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,65 @@
+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>
+)

package/src/index.tsx

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