@huma-finance/widgets 0.0.6-alpha.0

package/src/components/Lend/withdraw/index.tsx

@@ -0,0 +1,101 @@
+import { useWeb3React } from '@web3-react/core'
+import {
+  POOL_NAME,
+  POOL_TYPE,
+  useLenderPosition,
+  usePoolInfo,
+} from '@huma-finance/shared'
+import React, { useCallback, 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 { CheckWithdrawable } from './1-CheckWithdrawble'
+import { ChooseAmount } from './2-ChooseAmount'
+import { Transfer } from './3-Transfer'
+import { Success } from './4-Success'
+
+/**
+ * Lend pool withdraw props
+ * @typedef {Object} LendWithdrawProps
+ * @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 lending pool withdraw action is successful.
+ */
+export type LendWithdrawProps = {
+  poolName: keyof typeof POOL_NAME
+  poolType: keyof typeof POOL_TYPE
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function LendWithdraw({
+  poolName: poolNameStr,
+  poolType: poolTypeStr,
+  handleClose,
+  handleSuccess,
+}: LendWithdrawProps): 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 [lenderPosition, refreshLenderPosition] = useLenderPosition(
+    poolName,
+    poolType,
+    account,
+  )
+
+  useEffect(() => {
+    if (!step && lenderPosition) {
+      dispatch(setStep(WIDGET_STEP.CheckWithdrawable))
+    }
+  }, [dispatch, lenderPosition, step])
+
+  const handleWithdrawSuccess = useCallback(
+    (blockNumber: number) => {
+      refreshLenderPosition()
+      if (handleSuccess) {
+        handleSuccess(blockNumber)
+      }
+    },
+    [handleSuccess, refreshLenderPosition],
+  )
+
+  if (!poolInfo) {
+    return null
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      handleClose={handleClose}
+      handleSuccess={handleWithdrawSuccess}
+    >
+      {(!step || step === WIDGET_STEP.CheckWithdrawable) && (
+        <CheckWithdrawable poolInfo={poolInfo} handleClose={handleClose} />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount poolInfo={poolInfo} lenderPosition={lenderPosition!} />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && (
+        <Success poolInfo={poolInfo} handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Withdraw'
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/LoadingModal.tsx

@@ -0,0 +1,49 @@
+import { Box, css, useTheme } from '@mui/material'
+import React from 'react'
+import { HumaLoading } from './HumaLoading'
+
+import { WrapperModal } from './WrapperModal'
+
+type Props = {
+  title: string
+  description?: string
+  hideLoader?: boolean
+  children?: React.ReactNode
+}
+
+export function LoadingModal({
+  title,
+  description,
+  hideLoader = false,
+  children,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+
+  const styles = {
+    loader: css`
+      width: 100%;
+      ${theme.cssMixins.rowHCentered};
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    `,
+    bottom: css`
+      & .MuiButtonBase-root {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+      }
+    `,
+  }
+
+  return (
+    <WrapperModal title={title} subTitle={description}>
+      {!hideLoader && (
+        <Box css={styles.loader}>
+          <HumaLoading />
+        </Box>
+      )}
+      <Box css={styles.bottom}>{children}</Box>
+    </WrapperModal>
+  )
+}

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

@@ -0,0 +1,57 @@
+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'
+
+type Props = {
+  poolInfo: PoolInfoType
+  payerAddress: string
+  superToken: string
+  currentFlowRate: string
+}
+
+export function Evaluation({
+  poolInfo,
+  payerAddress,
+  superToken,
+  currentFlowRate,
+}: Props): React.ReactElement {
+  const { account } = useWeb3React()
+  const { checkingEA } = useEA()
+  const ONE_MONTH_SECONDS = 30 * 24 * 60 * 60
+  const creditLimit = toBigNumber(currentFlowRate)
+    .mul(ONE_MONTH_SECONDS)
+    .toString()
+
+  useEffect(() => {
+    if (account) {
+      checkingEA(
+        {
+          creditLimit,
+          poolAddress: poolInfo.pool,
+          borrowerWalletAddress: account,
+          payerAddress,
+          superToken,
+        },
+        WIDGET_STEP.ChooseAmount,
+      )
+    }
+  }, [
+    account,
+    checkingEA,
+    creditLimit,
+    payerAddress,
+    poolInfo.pool,
+    superToken,
+  ])
+
+  return (
+    <LoadingModal
+      title='Checking Stream'
+      description='Checking if the stream qualifies for factoring...'
+    />
+  )
+}

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

@@ -0,0 +1,124 @@
+import {
+  downScale,
+  PoolInfoType,
+  toBigNumber,
+  upScale,
+  useFeeManager,
+} from '@huma-finance/shared'
+import React, { useCallback, useState } from 'react'
+
+import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
+import { setBorrowInfo, setStream } 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
+  currentFlowRate: string
+}
+
+export function ChooseAmount({
+  poolInfo,
+  currentFlowRate,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { approveInfo } = useAppSelector(selectWidgetState)
+  const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
+  const [chargedFees, setChargedFees] = useState(0)
+  const [currentAmount, setCurrentAmount] = useState(0)
+  const borrowPeriodInSeconds = approveInfo!.intervalInDays * 24 * 60 * 60
+
+  const getBorrowFlowrateAndAmount = useCallback(
+    (borrowAmount: number) => {
+      const currentFlowRateBN = toBigNumber(currentFlowRate)
+      const borrowAmountBN = toBigNumber(
+        upScale(borrowAmount, approveInfo!.tokenDecimal),
+      )
+
+      const totalAmountInBorrowPeriod = currentFlowRateBN.mul(
+        borrowPeriodInSeconds,
+      )
+      let borrowFlowrate = borrowAmountBN
+        .mul(currentFlowRateBN)
+        .div(totalAmountInBorrowPeriod)
+        // To ensure enough flowRate due to round down when convert to string
+        .add(1)
+
+      // Can not borrow all the available flowrate
+      if (borrowFlowrate.gte(currentFlowRateBN)) {
+        borrowFlowrate = currentFlowRateBN.sub(1)
+      }
+
+      // As borrowFlowrate adds 1, need to calculate the new accurate borrow amount
+      const newBorrowAmountBN = borrowFlowrate
+        .mul(totalAmountInBorrowPeriod)
+        .div(currentFlowRateBN)
+      const newBorrowAmount = downScale(
+        newBorrowAmountBN,
+        approveInfo!.tokenDecimal,
+      )
+
+      return {
+        borrowFlowrate: borrowFlowrate.toString(),
+        borrowAmount: Number(newBorrowAmount),
+        borrowAmountBN: newBorrowAmountBN.toString(),
+      }
+    },
+    [approveInfo, borrowPeriodInSeconds, currentFlowRate],
+  )
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      if (approveInfo) {
+        setCurrentAmount(newAmount)
+        setChargedFees(getFeesCharged(newAmount))
+      }
+    },
+    [approveInfo, getFeesCharged],
+  )
+  const handleAction = useCallback(() => {
+    const { borrowFlowrate, borrowAmount, borrowAmountBN } =
+      getBorrowFlowrateAndAmount(currentAmount)
+
+    dispatch(
+      setStream({
+        borrowFlowrate,
+        durationInSeconds: borrowPeriodInSeconds,
+      }),
+    )
+    dispatch(
+      setBorrowInfo({
+        borrowAmount,
+        borrowAmountBN,
+        chargedFees,
+        nextStep: WIDGET_STEP.ConfirmTransfer,
+      }),
+    )
+  }, [
+    borrowPeriodInSeconds,
+    chargedFees,
+    currentAmount,
+    dispatch,
+    getBorrowFlowrateAndAmount,
+  ])
+
+  if (!approveInfo) {
+    return null
+  }
+
+  return (
+    <ChooseAmountModal
+      title='Choose Amount'
+      description1='Access up to 100% of your stream flowrate'
+      sliderMax={Number(approveInfo.creditLimit)}
+      currentAmount={currentAmount}
+      tokenSymbol={approveInfo.tokenSymbol}
+      topLeft='Fees'
+      topRight={`${chargedFees} ${approveInfo.tokenSymbol}`}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+      actionText='Confirm Transfer'
+    />
+  )
+}

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

@@ -0,0 +1,104 @@
+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 { 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 { chainId } = useWeb3React()
+  const { borrowAmount, approveInfo } = 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 step = CHAINS[chainId!].isTestnet
+      ? WIDGET_STEP.ApproveAllowance
+      : WIDGET_STEP.Permit
+    dispatch(setStep(step))
+  }
+
+  if (isEmpty(borrowAmount) || 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 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)} {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/StreamFactoring/borrow/4-ApproveAllowance.tsx

@@ -0,0 +1,65 @@
+import { useWeb3React } from '@web3-react/core'
+import {
+  PoolInfoType,
+  toBigNumber,
+  upScale,
+  usePoolAllowance,
+} from '@huma-finance/shared'
+import React, { useCallback } 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 { ApproveAllowanceModal } from '../../ApproveAllowanceModal'
+import { LoadingModal } from '../../LoadingModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+}
+
+export function ApproveAllowance({
+  poolInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { account } = useWeb3React()
+  const { borrowAmount, approveInfo } = 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 handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Permit))
+  }, [dispatch])
+
+  const newAllowance = getNewAllowance()
+
+  if (!newAllowance) {
+    return (
+      <LoadingModal
+        title={`Approve ${approveInfo?.tokenSymbol}`}
+        description='Waiting for approval confirmation...'
+      />
+    )
+  }
+
+  return (
+    <ApproveAllowanceModal
+      poolInfo={poolInfo}
+      allowanceAmount={newAllowance}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

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

@@ -0,0 +1,144 @@
+import { Contract, ethers } from 'ethers'
+import {
+  CHAINS,
+  Erc2612,
+  PoolInfoType,
+  StreamFactoringPool,
+  useERC2612Permit,
+  useMount,
+} from '@huma-finance/shared'
+import ERC2612Abi from '@huma-finance/shared/dist/abis/erc2612.json'
+import PoolAbi from '@huma-finance/shared/dist/abis/StreamFactoringPool.json'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import {
+  setError,
+  setMultisend,
+  setStep,
+} from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { LoadingModal } from '../../LoadingModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  payerAddress: string
+  chainId: number
+  borrower: string
+  superToken: string
+}
+
+export function Permit({
+  poolInfo,
+  payerAddress,
+  chainId,
+  borrower,
+  superToken,
+}: Props): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { address: tokenAddress } = poolInfo.poolUnderlyingToken
+  const { borrowAmountBN, stream } = useAppSelector(selectWidgetState)
+  const { getERC2612PermitMessage, getTradableStreamPermitMessage } =
+    useERC2612Permit()
+
+  const getApproveAllowanceCallData = async () => {
+    const erc2612PermitResult = await getERC2612PermitMessage(
+      tokenAddress,
+      poolInfo.pool,
+      borrowAmountBN!,
+    )
+    const tokenContract = new Contract(tokenAddress, ERC2612Abi) as Erc2612
+    return tokenContract.interface.encodeFunctionData('permit', [
+      poolInfo.pool,
+      borrowAmountBN!,
+      erc2612PermitResult.nonce,
+      erc2612PermitResult.deadline,
+      erc2612PermitResult.v,
+      erc2612PermitResult.r,
+      erc2612PermitResult.s,
+    ])
+  }
+
+  const getDrawdownCallData = async () => {
+    const NFTPermitResult = await getTradableStreamPermitMessage(
+      poolInfo.assetAddress!,
+      borrower,
+      superToken,
+      payerAddress,
+      poolInfo.pool,
+      stream!.borrowFlowrate!,
+      stream!.durationInSeconds!,
+    )
+
+    const drawdownEncodedData = ethers.utils.defaultAbiCoder.encode(
+      [
+        'address',
+        'address',
+        'address',
+        'int96',
+        'uint256',
+        'uint256',
+        'uint8',
+        'bytes32',
+        'bytes32',
+      ],
+      [
+        borrower,
+        superToken,
+        payerAddress,
+        stream?.borrowFlowrate,
+        stream?.durationInSeconds,
+        NFTPermitResult.expiry,
+        NFTPermitResult.v,
+        NFTPermitResult.r,
+        NFTPermitResult.s,
+      ],
+    )
+    const poolContract = new Contract(
+      poolInfo.pool,
+      PoolAbi,
+    ) as StreamFactoringPool
+
+    return poolContract.interface.encodeFunctionData(
+      'drawdownWithAuthorization',
+      [borrowAmountBN!, poolInfo.assetAddress!, drawdownEncodedData],
+    )
+  }
+
+  useMount(async () => {
+    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.pool)
+      callData.push(drawdownCalldata)
+
+      dispatch(setMultisend({ addresses, callData }))
+      dispatch(setStep(WIDGET_STEP.Transfer))
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (e: any) {
+      let errorMessage = e.reason || `Sign permit failed`
+      if (e.code === 4001 || e.code === 'ACTION_REJECTED') {
+        errorMessage = 'User has rejected the permit sign'
+      }
+      dispatch(setError({ errorMessage, errorReason: errorMessage }))
+    }
+  })
+
+  return (
+    <LoadingModal
+      title='Sign Token and NFT'
+      description='Waiting for signing...'
+    />
+  )
+}

package/src/components/StreamFactoring/borrow/6-Transfer.tsx

@@ -0,0 +1,37 @@
+import { PoolInfoType, useMultiSendContract } 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 | null {
+  const dispatch = useAppDispatch()
+  const multiSendContract = useMultiSendContract()
+  const { multisend } = useAppSelector(selectWidgetState)
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  if (!multisend || !multiSendContract) {
+    return null
+  }
+
+  return (
+    <TxSendModal
+      poolInfo={poolInfo}
+      contract={multiSendContract}
+      title='Transfer Tradable Stream and Money'
+      method='multisend'
+      params={[multisend.addresses, multisend.callData]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/StreamFactoring/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 { borrowAmount, approveInfo } = useAppSelector(selectWidgetState)
+
+  const content = [
+    `${borrowAmount?.toFixed(2)} ${
+      approveInfo?.tokenSymbol
+    } is now in your wallet.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}