@huma-finance/widgets 0.0.11 → 0.0.13

package/src/components/ConfirmTransferModal.tsx

@@ -0,0 +1,153 @@
+import { combineStyles } from '@huma-finance/shared'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+import React from 'react'
+
+import { ReceiptIcon, UsdcIcon } from './icons'
+
+type Props = {
+  title: string
+  description: string
+  items: [
+    { leftText: string; rightText: string },
+    { leftText: string; rightText: string },
+  ]
+  actionText: string
+  handleAction: () => void
+}
+
+export function ConfirmTransferModal({
+  title,
+  description,
+  items,
+  actionText,
+  handleAction,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+      ${theme.cssMixins.colStretch};
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    description: css`
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #49505b;
+      margin-top: 30px;
+      text-align: center;
+    `,
+    transferWrapper: css`
+      margin-top: 75px;
+    `,
+    transfer: css`
+      font-family: 'Uni-Neue-Regular';
+      ${theme.cssMixins.rowSpaceBetweened}
+      ${theme.cssMixins.rowVCentered}
+      height: 72px;
+      background: #f9f8fa;
+      border-radius: 4px;
+      font-weight: 500;
+      font-size: 16px;
+      color: #49505b;
+      padding: 24px 20px;
+      margin-bottom: 9px;
+      position: relative;
+      box-sizing: border-box;
+    `,
+    transferItem: css`
+      ${theme.cssMixins.rowVCentered}
+    `,
+    arrow: css`
+      @keyframes bounceAlpha {
+        0% {
+          opacity: 1;
+          transform: translateX(0px) scale(1);
+        }
+        25% {
+          opacity: 0;
+          transform: translateX(10px) scale(0.9);
+        }
+        26% {
+          opacity: 0;
+          transform: translateX(-10px) scale(0.9);
+        }
+        55% {
+          opacity: 1;
+          transform: translateX(0px) scale(1);
+        }
+      }
+      animation-name: bounceAlpha;
+      animation-duration: 1.4s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+
+      color: #b246ff;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      left: calc(15% + 36px);
+      bottom: 0;
+      right: 0;
+      width: 16px;
+      height: 16px;
+    `,
+    arrowFirst: css`
+      left: calc(15% + 20px);
+      animation-delay: 0.2s;
+    `,
+    okButton: css`
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+    `,
+    usdcIcon: css`
+      width: 22px;
+      margin-right: 20px;
+      & > path:first-of-type {
+        fill: #76707e;
+      }
+    `,
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        {title}
+      </Typography>
+      <Box css={styles.description}>{description}</Box>
+      <Box css={styles.transferWrapper}>
+        <Box css={styles.transfer}>
+          <Box css={styles.transferItem}>
+            <ReceiptIcon css={{ width: '24px', marginRight: '20px' }} />
+            {items[0].leftText}
+          </Box>
+          <ArrowForwardIosIcon
+            css={combineStyles([styles.arrow, styles.arrowFirst])}
+          />
+          <ArrowForwardIosIcon css={styles.arrow} />
+          <Box>{items[0].rightText}</Box>
+        </Box>
+        <Box css={styles.transfer}>
+          <Box css={styles.transferItem}>
+            <UsdcIcon css={styles.usdcIcon} />
+            {items[1].leftText}
+          </Box>
+          <ArrowForwardIosIcon
+            css={combineStyles([styles.arrow, styles.arrowFirst])}
+          />
+          <ArrowForwardIosIcon css={styles.arrow} />
+          <Box>{items[1].rightText}</Box>
+        </Box>
+      </Box>
+      <Button variant='contained' css={styles.okButton} onClick={handleAction}>
+        {actionText}
+      </Button>
+    </Box>
+  )
+}

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

@@ -1,6 +1,6 @@
 import { Box, Button, css, Typography, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
-import { ChainEnum, PoolInfoType } from '@huma-finance/shared'
+import { PoolInfoType } from '@huma-finance/shared'
 import React, { useEffect, useState } from 'react'
 
 import useEA from '../../../hooks/useEA'
@@ -34,7 +34,6 @@ export function Evaluation({
             borrowerWalletAddress: account,
           },
           WIDGET_STEP.Evaluation,
-          chainId === ChainEnum.Goerli,
         )
         handleApprove()
         setStatus('success')

package/src/components/CreditLine/borrow/{3-ChooseAmount.tsx → 2-ChooseAmount.tsx}

@@ -1,10 +1,8 @@
-import { useWeb3React } from '@web3-react/core'
 import {
   AccountStats,
   PoolInfoType,
   upScale,
   useCLFeeManager,
-  useCLPoolAllowance,
 } from '@huma-finance/shared'
 import React, { useCallback, useState } from 'react'
 
@@ -23,10 +21,8 @@ export function ChooseAmount({
   accountStats,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const { account } = useWeb3React()
   const { poolUnderlyingToken } = poolInfo
   const { symbol, decimals } = poolUnderlyingToken
-  const { approved } = useCLPoolAllowance(poolInfo.poolName, account)
   const { getFeesCharged } = useCLFeeManager(poolInfo.poolName)
   const [chargedFees, setChargedFees] = useState(0)
   const [currentAmount, setCurrentAmount] = useState(0)
@@ -42,9 +38,7 @@ export function ChooseAmount({
   )
 
   const handleAction = useCallback(() => {
-    const nextStep = approved
-      ? WIDGET_STEP.Transfer
-      : WIDGET_STEP.ApproveAllowance
+    const nextStep = WIDGET_STEP.Transfer
     dispatch(
       setBorrowInfo({
         borrowAmount: currentAmount,
@@ -53,7 +47,7 @@ export function ChooseAmount({
         nextStep,
       }),
     )
-  }, [approved, chargedFees, currentAmount, decimals, dispatch])
+  }, [chargedFees, currentAmount, decimals, dispatch])
 
   return (
     <ChooseAmountModal

package/src/components/CreditLine/borrow/{5-Transfer.tsx → 3-Transfer.tsx}

@@ -1,6 +1,13 @@
-import { PoolInfoType } from '@huma-finance/shared'
+import {
+  PoolInfoType,
+  toBigNumber,
+  txAtom,
+  useCLPoolAllowance,
+} from '@huma-finance/shared'
 import React, { useCallback } from 'react'
 
+import { useResetAtom } from 'jotai/utils'
+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,11 +20,18 @@ type Props = {
 
 export function Transfer({ poolInfo }: Props): React.ReactElement {
   const dispatch = useAppDispatch()
+  const reset = useResetAtom(txAtom)
+  const { account } = useWeb3React()
   const { borrowAmountBN } = useAppSelector(selectWidgetState)
+  const { allowance } = useCLPoolAllowance(poolInfo.poolName, account)
 
   const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
-  }, [dispatch])
+    reset()
+    const nextStep = allowance.gte(toBigNumber(borrowAmountBN!))
+      ? WIDGET_STEP.Done
+      : WIDGET_STEP.ApproveAllowance
+    dispatch(setStep(nextStep))
+  }, [allowance, borrowAmountBN, dispatch, reset])
 
   return (
     <TxSendModal

package/src/components/CreditLine/borrow/4-ApproveAllowance.tsx

@@ -16,7 +16,7 @@ export function ApproveAllowance({
   const dispatch = useAppDispatch()
 
   const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
+    dispatch(setStep(WIDGET_STEP.Done))
   }, [dispatch])
 
   return (

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

@@ -16,11 +16,10 @@ import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ErrorModal } from '../../ErrorModal'
 import { WidgetWrapper } from '../../WidgetWrapper'
 import { Evaluation } from './1-Evaluation'
-import { AllowList } from './2-AllowList'
-import { ChooseAmount } from './3-ChooseAmount'
+import { ChooseAmount } from './2-ChooseAmount'
 import { ApproveAllowance } from './4-ApproveAllowance'
-import { Transfer } from './5-Transfer'
-import { Success } from './6-Success'
+import { Transfer } from './3-Transfer'
+import { Success } from './5-Success'
 
 /**
  * Credit line pool borrow props
@@ -92,7 +91,6 @@ export function CreditLineBorrow({
       {step === WIDGET_STEP.Evaluation && (
         <Evaluation poolInfo={poolInfo} handleApprove={approveCallback} />
       )}
-      {step === WIDGET_STEP.AddToAllowList && <AllowList poolInfo={poolInfo} />}
       {step === WIDGET_STEP.ChooseAmount && (
         <ChooseAmount poolInfo={poolInfo} accountStats={accountStats} />
       )}

package/src/components/Factoring/FactoredList.tsx

@@ -58,7 +58,7 @@ export function FactoredList<T>({
         let factoredItem = {
           id,
           due: dueDate,
-          icon: <ReceiptIcon css={{ width: '18px' }} />,
+          icon: <ReceiptIcon css={{ width: '24px' }} />,
           amount: formatMoney(downScale(receivableAmount.toString(), decimals)),
           factored: formatMoney(downScale(totalDue.toString(), decimals)),
           remained: formatMoney(

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

@@ -1,5 +1,5 @@
 import { useWeb3React } from '@web3-react/core'
-import { ChainEnum, PoolInfoType, toBigNumber } from '@huma-finance/shared'
+import { PoolInfoType, toBigNumber } from '@huma-finance/shared'
 import React, { useEffect } from 'react'
 
 import useEA from '../../../hooks/useEA'
@@ -21,8 +21,6 @@ export function Evaluation({ poolInfo, tokenId }: Props): React.ReactElement {
         {
           poolAddress: poolInfo.pool,
           borrowerWalletAddress: account,
-          receivableAddress: poolInfo.assetAddress,
-          receivableParam: toBigNumber(tokenId).toHexString(),
           context: {
             receivable: {
               address: poolInfo.assetAddress!,
@@ -31,7 +29,6 @@ export function Evaluation({ poolInfo, tokenId }: Props): React.ReactElement {
           },
         },
         WIDGET_STEP.ChooseAmount,
-        chainId === ChainEnum.Goerli,
       )
     }
   }, [

package/src/components/InvoiceFactoring/borrow/{3-ChooseAmount.tsx → 2-ChooseAmount.tsx}

@@ -27,7 +27,9 @@ export function ChooseAmount({
   const [currentAmount, setCurrentAmount] = useState(0)
   const { approval } = useAppSelector(selectWidgetState)
   const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
-  const [remainder, setRemainder] = useState(approval!.receivable?.amount)
+  const [remainder, setRemainder] = useState<string | number | undefined>(
+    approval!.receivable?.amountFormatted,
+  )
 
   const getAvailableCreditLimit = () => {
     if (approval && creditRecord) {
@@ -35,7 +37,7 @@ export function ChooseAmount({
         .add(creditRecord.totalDue)
         .sub(creditRecord.feesAndInterestDue)
         .toNumber()
-      return Number(approval.terms.creditLimit) - principal
+      return Number(approval.terms.creditLimitFormatted) - principal
     }
     return 0
   }
@@ -45,7 +47,7 @@ export function ChooseAmount({
       if (approval) {
         setCurrentAmount(newAmount)
         setChargedFees(getFeesCharged(newAmount))
-        setRemainder(Number(approval.receivable!.amount) - newAmount)
+        setRemainder(Number(approval.receivable!.amountFormatted) - newAmount)
       }
     },
     [approval, getFeesCharged],

package/src/components/InvoiceFactoring/borrow/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/InvoiceFactoring/borrow/index.tsx

@@ -16,12 +16,11 @@ import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ErrorModal } from '../../ErrorModal'
 import { WidgetWrapper } from '../../WidgetWrapper'
 import { Evaluation } from './1-Evaluation'
-import { AllowList } from './2-AllowList'
-import { ChooseAmount } from './3-ChooseAmount'
-import { ConfirmTransfer } from './4-ConfirmTransfer'
-import { ApproveNFT } from './5-ApproveNFT'
-import { Transfer } from './6-Transfer'
-import { Success } from './7-Success'
+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
@@ -72,7 +71,6 @@ export function InvoiceFactoringBorrow({
       {step === WIDGET_STEP.Evaluation && (
         <Evaluation poolInfo={poolInfo} tokenId={tokenId.toString()} />
       )}
-      {step === WIDGET_STEP.AddToAllowList && <AllowList poolInfo={poolInfo} />}
       {step === WIDGET_STEP.ChooseAmount && (
         <ChooseAmount poolInfo={poolInfo} accountStats={accountStats} />
       )}

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

@@ -26,9 +26,10 @@ export function Evaluation({
         {
           poolAddress: poolInfo.pool,
           borrowerWalletAddress: account,
-          payerAddress,
-          superToken,
           context: {
+            receivable: {
+              address: poolInfo.assetAddress!,
+            },
             payerAddress,
             superToken,
           },
@@ -36,7 +37,14 @@ export function Evaluation({
         WIDGET_STEP.ChooseAmount,
       )
     }
-  }, [account, checkingEA, payerAddress, poolInfo.pool, superToken])
+  }, [
+    account,
+    checkingEA,
+    payerAddress,
+    poolInfo.assetAddress,
+    poolInfo.pool,
+    superToken,
+  ])
 
   return (
     <LoadingModal

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

@@ -49,6 +49,9 @@ 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
@@ -111,7 +114,7 @@ export function ChooseAmount({
     <ChooseAmountModal
       title='Choose Amount'
       description1='Access up to 100% of your stream flowrate'
-      sliderMax={Number(approval.terms.creditLimit)}
+      sliderMax={Number(approval.terms.creditLimitFormatted)}
       currentAmount={currentAmount}
       tokenSymbol={approval.token.symbol}
       topLeft='Fees'

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

@@ -1,104 +1,42 @@
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
-import { Box, Button, css, Typography, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
 import { CHAINS, isEmpty } from '@huma-finance/shared'
-import React from 'react'
+import { useWeb3React } from '@web3-react/core'
+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 { ConfirmTransferModal } from '../../ConfirmTransferModal'
 
 export function ConfirmTransfer(): React.ReactElement | null {
-  const theme = useTheme()
   const dispatch = useAppDispatch()
   const { chainId } = useWeb3React()
   const { borrowAmount, approval } = useAppSelector(selectWidgetState)
 
-  const styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-      ${theme.cssMixins.colStretch};
-    `,
-    header: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
-    `,
-    description: css`
-      font-weight: 500;
-      font-size: 16px;
-      color: #49505b;
-      margin-top: 30px;
-    `,
-    transferWrapper: css`
-      margin-top: 75px;
-    `,
-    transfer: css`
-      ${theme.cssMixins.rowSpaceBetweened}
-      ${theme.cssMixins.rowVCentered}
-      height: 72px;
-      background: #f9f8fa;
-      border-radius: 4px;
-      font-weight: 500;
-      font-size: 16px;
-      color: #49505b;
-      padding: 24px 32px;
-      margin-bottom: 9px;
-      position: relative;
-    `,
-    arrow: css`
-      color: #d2d0d6;
-      position: absolute;
-      margin: auto;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    `,
-    okButton: css`
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-    `,
-  }
-
-  const handleAction = () => {
+  const handleAction = useCallback(() => {
     const step = CHAINS[chainId!].isTestnet
       ? WIDGET_STEP.ApproveAllowance
       : WIDGET_STEP.Permit
     dispatch(setStep(step))
-  }
+  }, [chainId, dispatch])
 
   if (isEmpty(borrowAmount) || isEmpty(approval)) {
     return null
   }
 
   return (
-    <Box css={styles.wrapper}>
-      <Typography variant='h6' css={styles.header}>
-        Confirm transaction details
-      </Typography>
-      <Box css={styles.description}>
-        Huma keeps your Tradable Stream NFT as collateral until it's fully paid.
-      </Box>
-      <Box css={styles.transferWrapper}>
-        <Box css={styles.transfer}>
-          <Box>Tradable Stream</Box>
-          <ArrowForwardIosIcon css={styles.arrow} />
-          <Box>Huma</Box>
-        </Box>
-        <Box css={styles.transfer}>
-          <Box>
-            {borrowAmount!.toFixed(2)} {approval?.token.symbol}
-          </Box>
-          <ArrowForwardIosIcon css={styles.arrow} />
-          <Box>You</Box>
-        </Box>
-      </Box>
-      <Button variant='contained' css={styles.okButton} onClick={handleAction}>
-        Approve Transfer
-      </Button>
-    </Box>
+    <ConfirmTransferModal
+      title='Confirm transaction details'
+      description={`Huma keeps your Tradable Stream NFT as collateral until it's fully paid.`}
+      items={[
+        { leftText: 'Tradable Stream', rightText: 'Huma' },
+        {
+          leftText: `${borrowAmount!.toFixed(2)} ${approval?.token.symbol}`,
+          rightText: 'You',
+        },
+      ]}
+      actionText='Approve Transfer'
+      handleAction={handleAction}
+    />
   )
 }

package/src/components/StreamFactoring/borrow/4-ApproveAllowance.tsx

@@ -1,10 +1,4 @@
-import { useWeb3React } from '@web3-react/core'
-import {
-  PoolInfoType,
-  toBigNumber,
-  upScale,
-  usePoolAllowance,
-} from '@huma-finance/shared'
+import { PoolInfoType } from '@huma-finance/shared'
 import React, { useCallback } from 'react'
 import { useDispatch } from 'react-redux'
 
@@ -13,7 +7,6 @@ import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ApproveAllowanceModal } from '../../ApproveAllowanceModal'
-import { LoadingModal } from '../../LoadingModal'
 
 type Props = {
   poolInfo: PoolInfoType
@@ -23,43 +16,18 @@ export function ApproveAllowance({
   poolInfo,
 }: Props): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
-  const { borrowAmount, approval } = useAppSelector(selectWidgetState)
-  const { allowance, loaded } = usePoolAllowance(
-    poolInfo.poolName,
-    poolInfo.poolType,
-    account,
-  )
-
-  const getNewAllowance = () => {
-    if (!borrowAmount || !loaded) {
-      return null
-    }
-    return toBigNumber(
-      upScale(borrowAmount, poolInfo.poolUnderlyingToken.decimals),
-    ).add(allowance)
-  }
+  const { borrowAmountBN } = useAppSelector(selectWidgetState)
 
   const handleSuccess = useCallback(() => {
     dispatch(setStep(WIDGET_STEP.Permit))
   }, [dispatch])
 
-  const newAllowance = getNewAllowance()
-
-  if (!newAllowance) {
-    return (
-      <LoadingModal
-        title={`Approve ${approval?.token?.symbol}`}
-        description='Waiting for approval confirmation...'
-      />
-    )
-  }
-
   return (
     <ApproveAllowanceModal
       poolInfo={poolInfo}
-      allowanceAmount={newAllowance}
+      allowanceAmount={borrowAmountBN!}
       handleSuccess={handleSuccess}
+      spender={poolInfo.poolProcessor!}
     />
   )
 }