@huma-finance/widgets 0.0.48-beta.202 → 0.0.48-beta.280

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

@@ -0,0 +1,159 @@
+import {
+  POOL_NAME,
+  useCreditStatsV2,
+  usePoolInfoV2,
+  usePoolUnderlyingTokenInfoV2,
+  useReceivableInfoV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber, ethers } from 'ethers'
+import React, { useEffect, useState } 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 { ChoosePaymentType } from './1-ChoosePaymentType'
+import { ChooseAmount } from './2-ChooseAmount'
+import { ApproveAllowance } from './3-ApproveAllowance'
+import { CreateReceivable } from './4-CreateReceivable'
+import { ApproveReceivable } from './5-ApproveReceivable'
+import { Transfer } from './6-Transfer'
+import { Success } from './7-Success'
+
+export enum PaymentType {
+  PaymentWithReceivable = 1,
+  PaymentWithReceivableAndDrawdown = 2,
+}
+
+/**
+ * Credit line pool payment props V2
+ * @typedef {Object} CreditLinePaymentPropsV2
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @property {tokenId} tokenID The receivable token id.
+ * @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 ReceivableBackedCreditLinePaymentPropsV2 = {
+  poolName: keyof typeof POOL_NAME
+  tokenId: string
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function ReceivableBackedCreditLinePaymentV2({
+  poolName: poolNameStr,
+  tokenId,
+  handleClose,
+  handleSuccess,
+}: ReceivableBackedCreditLinePaymentPropsV2): 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 }] = useCreditStatsV2(poolName, account, provider)
+  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
+  const [paymentType, setPaymentType] = useState<PaymentType>()
+
+  const [borrowTokenId, setBorrowTokenId] = useState<string>()
+  const paymentReceivableInfo = useReceivableInfoV2(poolName, tokenId, provider)
+  const payoffAmount = paymentReceivableInfo
+    ? BigNumber.from(paymentReceivableInfo.receivableAmount).sub(
+        paymentReceivableInfo.paidAmount,
+      )
+    : BigNumber.from(0)
+  const [successTxReceipt, setSuccessTxReceipt] =
+    useState<ethers.ContractReceipt>()
+
+  useEffect(() => {
+    dispatch(setStep(WIDGET_STEP.ChoosePaymentType))
+  }, [dispatch])
+
+  if (
+    !poolInfo ||
+    !creditRecord ||
+    !poolUnderlyingToken ||
+    !paymentReceivableInfo
+  ) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle='Pay'
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      isLoading={!creditRecord}
+      loadingTitle='Pay'
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChoosePaymentType && (
+        <ChoosePaymentType
+          paymentType={paymentType}
+          changePaymentType={setPaymentType}
+        />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && paymentType && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          payoffAmount={payoffAmount}
+          paymentType={paymentType}
+        />
+      )}
+      {step === WIDGET_STEP.ApproveAllowance && paymentType && (
+        <ApproveAllowance
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          paymentType={paymentType}
+        />
+      )}
+      {step === WIDGET_STEP.MintNFT && (
+        <CreateReceivable
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          setTokenId={setBorrowTokenId}
+        />
+      )}
+      {step === WIDGET_STEP.ApproveNFT && borrowTokenId && (
+        <ApproveReceivable poolInfo={poolInfo} tokenId={borrowTokenId} />
+      )}
+      {step === WIDGET_STEP.Transfer && paymentType && (
+        <Transfer
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          paymentType={paymentType}
+          paymentTokenId={tokenId}
+          borrowTokenId={borrowTokenId}
+          setSuccessTxReceipt={setSuccessTxReceipt}
+        />
+      )}
+      {step === WIDGET_STEP.Done && paymentType && successTxReceipt && (
+        <Success
+          poolUnderlyingToken={poolUnderlyingToken}
+          paymentType={paymentType}
+          handleAction={handleClose}
+          successTxReceipt={successTxReceipt}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Pay'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

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

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

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

@@ -7,6 +7,7 @@ import {
 } from '@huma-finance/shared'
 import React, { useCallback, useState } from 'react'
 
+import { useWeb3React } from '@web3-react/core'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
 import { setBorrowInfo, setStream } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -23,29 +24,31 @@ export function ChooseAmount({
   currentFlowRate,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
+  const { chainId, provider } = useWeb3React()
   const { approval } = useAppSelector(selectWidgetState)
-  const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
+  const { getFeesCharged } = useFeeManager(
+    poolInfo.poolName,
+    poolInfo.poolType,
+    chainId,
+    provider,
+  )
   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 borrowAmountSuperTokenBN = toBigNumber(
-        upScale(borrowAmount, superTokenDecimals),
+      const borrowAmountBN = toBigNumber(
+        upScale(borrowAmount, approval!.token.decimal),
       )
 
-      const totalAmountSuperTokenInBorrowPeriod = currentFlowRateBN.mul(
+      const totalAmountInBorrowPeriod = currentFlowRateBN.mul(
         borrowPeriodInSeconds,
       )
-      let borrowFlowrate = borrowAmountSuperTokenBN
+      let borrowFlowrate = borrowAmountBN
         .mul(currentFlowRateBN)
-        .div(totalAmountSuperTokenInBorrowPeriod)
+        .div(totalAmountInBorrowPeriod)
         // To ensure enough flowRate due to round down when convert to string
         .add(1)
 
@@ -53,28 +56,26 @@ 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(totalAmountSuperTokenInBorrowPeriod)
+        .mul(totalAmountInBorrowPeriod)
         .div(currentFlowRateBN)
-      const newBorrowAmount = downScale(newBorrowAmountBN, superTokenDecimals)
-      const newBorrowAmountUnderlyingTokenBN = toBigNumber(
-        upScale(newBorrowAmount, underlyingTokenDecimals),
+      const newBorrowAmount = downScale(
+        newBorrowAmountBN,
+        approval!.token.decimal,
       )
 
       return {
         borrowFlowrate: borrowFlowrate.toString(),
         borrowAmount: Number(newBorrowAmount),
-        borrowAmountBN: newBorrowAmountUnderlyingTokenBN,
+        borrowAmountBN: newBorrowAmountBN,
       }
     },
-    [
-      borrowPeriodInSeconds,
-      currentFlowRate,
-      superTokenDecimals,
-      underlyingTokenDecimals,
-    ],
+    [approval, borrowPeriodInSeconds, currentFlowRate],
   )
 
   const handleChangeAmount = useCallback(
@@ -120,7 +121,7 @@ export function ChooseAmount({
     <ChooseAmountModal
       title='Choose Amount'
       description1='Access up to 100% of your stream flowrate'
-      sliderMax={borrowMaxAmount}
+      sliderMax={Number(approval.terms.creditLimitFormatted)}
       currentAmount={currentAmount}
       tokenSymbol={approval.token.symbol}
       topLeft='Fees'

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

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

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

@@ -1,9 +1,12 @@
 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'
@@ -22,6 +25,7 @@ import { LoadingModal } from '../../LoadingModal'
 type Props = {
   poolInfo: PoolInfoType
   payerAddress: string
+  chainId: number
   borrower: string
   superToken: string
 }
@@ -29,15 +33,36 @@ 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 { getTradableStreamPermitMessage } = useERC2612Permit()
+  const { getERC2612PermitMessage, 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!,
@@ -88,6 +113,14 @@ 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/6-Transfer.tsx

@@ -1,6 +1,7 @@
 import { PoolInfoType, useMultiSendContract } from '@huma-finance/shared'
 import React, { useCallback } from 'react'
 
+import { useWeb3React } from '@web3-react/core'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -13,8 +14,9 @@ type Props = {
 
 export function Transfer({ poolInfo }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const multiSendContract = useMultiSendContract()
+  const { chainId, provider } = useWeb3React()
   const { multisend } = useAppSelector(selectWidgetState)
+  const multiSendContract = useMultiSendContract(chainId, provider)
 
   const handleSuccess = useCallback(() => {
     dispatch(setStep(WIDGET_STEP.Done))

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

@@ -39,8 +39,8 @@ export function StreamFactoringBorrow({
   handleSuccess,
 }: StreamFactoringBorrowProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
-  const poolInfo = usePoolInfo(poolName, poolType)
+  const { account, chainId } = useWeb3React()
+  const poolInfo = usePoolInfo(poolName, poolType, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
 
   useEffect(() => {
@@ -71,10 +71,11 @@ export function StreamFactoringBorrow({
       {step === WIDGET_STEP.ApproveAllowance && (
         <ApproveAllowance poolInfo={poolInfo} />
       )}
-      {step === WIDGET_STEP.Permit && account && (
+      {step === WIDGET_STEP.Permit && account && chainId && (
         <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?.superToken?.symbol ?? '',
+        name: poolInfo?.extra?.superTokens?.[0].symbol ?? '',
       }),
-    [poolInfo?.extra?.superToken],
+    [poolInfo?.extra?.superTokens],
   )
 
   return (

package/src/components/SuperfluidFactoring/SuperfluidUpcomingList.tsx

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

package/src/components/TxDoneModal.tsx

@@ -78,7 +78,7 @@ export function TxDoneModal({
         css={styles.doneButton}
         onClick={handleCloseModal}
       >
-        {buttonText == null ? 'DONE' : buttonText}
+        {!buttonText ? 'DONE' : buttonText}
       </Button>
     </Box>
   )

package/src/components/TxSendModal.tsx

@@ -32,8 +32,14 @@ export function TxSendModal({
   handleSuccess,
 }: Props): React.ReactElement {
   const dispatch = useAppDispatch()
-  const { provider } = useWeb3React()
-  const poolContract = usePoolContract(poolInfo.poolName, poolInfo.poolType)
+  const { provider, chainId, account } = useWeb3React()
+  const poolContract = usePoolContract(
+    poolInfo.poolName,
+    poolInfo.poolType,
+    chainId,
+    provider,
+    account,
+  )
   const [{ state, txHash }, send] = useAtom(sendTxAtom)
 
   useEffect(() => {

package/src/components/TxSendModalV2.tsx

@@ -0,0 +1,51 @@
+import { sendTxAtom, TxStateType, useMount } from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { Contract } from 'ethers'
+import { useAtom } from 'jotai'
+import React, { useEffect } from 'react'
+
+import { useAppDispatch } from '../hooks/useRedux'
+import { LoadingModal } from './LoadingModal'
+import { ViewOnExplorer } from './ViewOnExplorer'
+
+type Props = {
+  method: string
+  params: unknown[]
+  title?: string
+  contract: Contract
+  handleSuccess?: () => void
+}
+
+export function TxSendModalV2({
+  title,
+  method,
+  params,
+  contract,
+  handleSuccess,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { provider } = useWeb3React()
+
+  const [{ state, txHash }, send] = useAtom(sendTxAtom)
+
+  useEffect(() => {
+    if (state === TxStateType.Success) {
+      if (handleSuccess) {
+        handleSuccess()
+      }
+    }
+  }, [dispatch, handleSuccess, state])
+
+  useMount(() => {
+    send({ contract, method, params, provider })
+  })
+
+  return (
+    <LoadingModal
+      title={title ?? 'Transaction Pending'}
+      description='Waiting for confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}