@huma-finance/widgets 0.0.6-alpha.0

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

@@ -0,0 +1,104 @@
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+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'
+
+export function ConfirmTransfer(): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const { borrowAmountNet, approveInfo } = useAppSelector(selectWidgetState)
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+      ${theme.cssMixins.colStretch};
+    `,
+    header: css`
+      font-family: 'Uni-Neue-Bold';
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    description: css`
+      font-family: 'Uni-Neue-Regular';
+      font-weight: 500;
+      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 32px;
+      margin-bottom: 9px;
+      position: relative;
+      box-sizing: border-box;
+    `,
+    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 = () => {
+    dispatch(setStep(WIDGET_STEP.ApproveNFT))
+  }
+
+  if (isEmpty(borrowAmountNet) || isEmpty(approveInfo)) {
+    return null
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        Confirm transaction details
+      </Typography>
+      <Box css={styles.description}>
+        Huma keeps your Invoice NFT as collateral until it's fully paid.
+      </Box>
+      <Box css={styles.transferWrapper}>
+        <Box css={styles.transfer}>
+          <Box>Invoice NFT</Box>
+          <ArrowForwardIosIcon css={styles.arrow} />
+          <Box>Huma</Box>
+        </Box>
+        <Box css={styles.transfer}>
+          <Box>
+            {borrowAmountNet!} {approveInfo?.tokenSymbol}
+          </Box>
+          <ArrowForwardIosIcon css={styles.arrow} />
+          <Box>You</Box>
+        </Box>
+      </Box>
+      <Button variant='contained' css={styles.okButton} onClick={handleAction}>
+        Approve Transfer
+      </Button>
+    </Box>
+  )
+}

package/src/components/InvoiceFactoring/borrow/5-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/InvoiceFactoring/borrow/6-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/InvoiceFactoring/borrow/7-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, approveInfo } =
+    useAppSelector(selectWidgetState)
+
+  const content = [
+    `${borrowAmountNet} ${approveInfo?.tokenSymbol} is now in your wallet.`,
+    `The remaining ${remainder} ${approveInfo?.tokenSymbol} will be sent to your wallet when the invoice is paid.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

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

@@ -0,0 +1,96 @@
+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 { 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'
+
+/**
+ * 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.AddToAllowList && <AllowList poolInfo={poolInfo} />}
+      {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/components/InvoiceFactoring/payment/1-ChooseAmount.tsx

@@ -0,0 +1,67 @@
+import { useWeb3React } from '@web3-react/core'
+import {
+  CreditRecordType,
+  downScale,
+  PoolInfoType,
+  toBigNumber,
+  upScale,
+  useRFPoolAllowance,
+} from '@huma-finance/shared'
+import React, { useCallback, useState } from 'react'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setPaymentAmount, setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ChooseAmountModal } from '../../ChooseAmountModal'
+
+type Props = {
+  creditRecord: CreditRecordType
+  poolInfo: PoolInfoType
+}
+
+export function ChooseAmount({
+  creditRecord,
+  poolInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account } = useWeb3React()
+  const { symbol, decimals } = poolInfo.poolUnderlyingToken
+  const totalDue = downScale<number>(creditRecord.totalDue.toNumber(), decimals)
+  const { allowance } = useRFPoolAllowance(poolInfo.poolName, account)
+  const [remainingDue, setRemainingDue] = useState(totalDue)
+  const [currentAmount, setCurrentAmount] = useState(0)
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      setCurrentAmount(newAmount)
+      const remainDueAmount = totalDue - newAmount
+      setRemainingDue(remainDueAmount)
+      dispatch(setPaymentAmount({ paymentAmount: newAmount, remainDueAmount }))
+    },
+    [dispatch, totalDue],
+  )
+
+  const handleAction = useCallback(() => {
+    const payAmount = upScale(currentAmount, decimals)
+    const nextStep = toBigNumber(payAmount).gt(allowance)
+      ? WIDGET_STEP.ApproveAllowance
+      : WIDGET_STEP.Transfer
+    dispatch(setStep(nextStep))
+  }, [allowance, currentAmount, decimals, dispatch])
+
+  return (
+    <ChooseAmountModal
+      title='Make the payment'
+      description1='Choose amount'
+      sliderMax={totalDue}
+      currentAmount={currentAmount}
+      tokenSymbol={symbol}
+      topLeft='Total Due'
+      topRight={`${totalDue} ${symbol}`}
+      downLeft='Remaining Due'
+      downRight={`${remainingDue} ${symbol}`}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+      actionText='make payment'
+    />
+  )
+}

package/src/components/InvoiceFactoring/payment/2-ApproveAllowance.tsx

@@ -0,0 +1,23 @@
+import { PoolInfoType } from '@huma-finance/shared'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ApproveAllowanceModal } from '../../ApproveAllowanceModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+}
+
+export function ApproveAllowance({ poolInfo }: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  return (
+    <ApproveAllowanceModal poolInfo={poolInfo} handleSuccess={handleSuccess} />
+  )
+}

package/src/components/InvoiceFactoring/payment/3-Transfer.tsx

@@ -0,0 +1,34 @@
+import { useWeb3React } from '@web3-react/core'
+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
+}
+
+export function Transfer({ poolInfo }: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { account } = useWeb3React()
+  const { decimals } = poolInfo.poolUnderlyingToken
+  const { paymentAmount } = useAppSelector(selectWidgetState)
+  const paymentBigNumber = toBigNumber(upScale(paymentAmount!, decimals))
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  return (
+    <TxSendModal
+      poolInfo={poolInfo}
+      method='makePayment'
+      params={[account, paymentBigNumber]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/InvoiceFactoring/payment/4-Success.tsx

@@ -0,0 +1,23 @@
+import { PoolInfoType } from '@huma-finance/shared'
+import React from 'react'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleAction: () => void
+}
+
+export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
+  const { symbol } = poolInfo.poolUnderlyingToken
+  const { paymentAmount, remainDueAmount } = useAppSelector(selectWidgetState)
+
+  const content = [
+    `You have successfully made a payment of ${paymentAmount} ${symbol}.`,
+    `The remaining due amount is ${remainDueAmount} ${symbol}.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

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

@@ -0,0 +1,86 @@
+import { useWeb3React } from '@web3-react/core'
+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 { ChooseAmount } from './1-ChooseAmount'
+import { ApproveAllowance } from './2-ApproveAllowance'
+import { Transfer } from './3-Transfer'
+import { Success } from './4-Success'
+
+/**
+ * Invoice factoring pool payment props
+ * @typedef {Object} InvoiceFactoringPaymentProps
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @property {POOL_TYPE} poolType The type of the pool.
+ * @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 payment action is successful.
+ */
+export type InvoiceFactoringPaymentProps = {
+  poolName: keyof typeof POOL_NAME
+  poolType: keyof typeof POOL_TYPE
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function InvoiceFactoringPayment({
+  poolName: poolNameStr,
+  poolType: poolTypeStr,
+  handleClose,
+  handleSuccess,
+}: InvoiceFactoringPaymentProps): 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 [{ creditRecord }] = useAccountStats(poolName, poolType, account)
+
+  useEffect(() => {
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
+  }, [dispatch])
+
+  if (!poolInfo) {
+    return null
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      isLoading={!creditRecord}
+      loadingTitle='Make Payment'
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount creditRecord={creditRecord!} poolInfo={poolInfo} />
+      )}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance poolInfo={poolInfo} />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && (
+        <Success poolInfo={poolInfo} handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Make Payment'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/Lend/supply/1-Evaluation.tsx

@@ -0,0 +1,86 @@
+import { Box, css, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { EAService, PoolInfoType } from '@huma-finance/shared'
+import React, { useState } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setError, setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { CustomError } from '../../../utilTypes'
+import { BottomButton } from '../../BottomButton'
+import { ApproveLenderIcon } from '../../icons'
+import { LoadingModal } from '../../LoadingModal'
+import { WrapperModal } from '../../WrapperModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleApproveSuccess: () => void
+}
+
+export function Evaluation({
+  poolInfo,
+  handleApproveSuccess,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const { account, chainId } = useWeb3React()
+  const [loading, setLoading] = useState(false)
+
+  const styles = {
+    iconWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: 30px;
+    `,
+    description: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: 50px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #a8a1b2;
+    `,
+  }
+
+  const approveLender = async () => {
+    if (account) {
+      try {
+        setLoading(true)
+        const payload = {
+          poolAddress: poolInfo.pool,
+          lenderWalletAddress: account,
+        }
+        await EAService.approveLender(payload, chainId!)
+        handleApproveSuccess()
+        setLoading(false)
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+      } catch (e: unknown) {
+        const error = e as CustomError
+        setLoading(false)
+        dispatch(setError({ errorMessage: error.message }))
+      }
+    }
+  }
+
+  if (!loading) {
+    return (
+      <WrapperModal
+        title='Lender Approval'
+        subTitle='This pool requires lender approval'
+      >
+        <Box css={styles.iconWrapper}>
+          <ApproveLenderIcon />
+        </Box>
+        <Box css={styles.description} />
+        <BottomButton variant='contained' onClick={approveLender}>
+          GET APPROVED
+        </BottomButton>
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <LoadingModal
+      title='Approval Pending'
+      description='Waiting for approval confirmation...'
+    />
+  )
+}