@huma-finance/widgets 0.0.6-alpha.0

package/src/components/CreditLine/borrow/3-ChooseAmount.tsx

@@ -0,0 +1,74 @@
+import { useWeb3React } from '@web3-react/core'
+import {
+  AccountStats,
+  PoolInfoType,
+  upScale,
+  useCLFeeManager,
+  useCLPoolAllowance,
+} from '@huma-finance/shared'
+import React, { useCallback, useState } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setBorrowInfo } from '../../../store/widgets.reducers'
+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 { 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)
+  const { creditRecordStatic, creditAvailableAmount } = accountStats
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      setCurrentAmount(newAmount)
+      const newChargedFees = getFeesCharged(newAmount)
+      setChargedFees(newChargedFees)
+    },
+    [getFeesCharged],
+  )
+
+  const handleAction = useCallback(() => {
+    const nextStep = approved
+      ? WIDGET_STEP.Transfer
+      : WIDGET_STEP.ApproveAllowance
+    dispatch(
+      setBorrowInfo({
+        borrowAmount: currentAmount,
+        borrowAmountBN: upScale(currentAmount, decimals),
+        chargedFees,
+        nextStep,
+      }),
+    )
+  }, [approved, chargedFees, currentAmount, decimals, dispatch])
+
+  return (
+    <ChooseAmountModal
+      title='Borrow'
+      description1='Choose Amount'
+      sliderMax={creditAvailableAmount}
+      currentAmount={currentAmount}
+      tokenSymbol={symbol}
+      topLeft='Origination Fee'
+      topRight={`${chargedFees} ${symbol}`}
+      downLeft='APR'
+      downRight={`${creditRecordStatic!.aprInBps / 100}%`}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+      actionText='borrow'
+    />
+  )
+}

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

@@ -0,0 +1,29 @@
+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 | null {
+  const dispatch = useAppDispatch()
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  return (
+    <ApproveAllowanceModal
+      poolInfo={poolInfo}
+      handleSuccess={handleSuccess}
+      showAutoPayback
+    />
+  )
+}

package/src/components/CreditLine/borrow/5-Transfer.tsx

@@ -0,0 +1,30 @@
+import { PoolInfoType } 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 { borrowAmountBN } = useAppSelector(selectWidgetState)
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  return (
+    <TxSendModal
+      poolInfo={poolInfo}
+      method='drawdown'
+      params={[borrowAmountBN]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/CreditLine/borrow/6-Success.tsx

@@ -0,0 +1,30 @@
+import { CreditRecordType, PoolInfoType, timeUtil } 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
+  creditRecord: CreditRecordType
+  handleAction: () => void
+}
+
+export function Success({
+  poolInfo,
+  creditRecord,
+  handleAction,
+}: Props): React.ReactElement {
+  const { borrowAmountNet } = useAppSelector(selectWidgetState)
+  const { poolUnderlyingToken } = poolInfo
+  const { symbol } = poolUnderlyingToken
+  const dueDate = timeUtil.timestampToLL(creditRecord?.dueDate.toNumber())
+
+  const content = [
+    `${borrowAmountNet} ${symbol} is now in your wallet.`,
+    `Note: your payment will be automatically deducted on ${dueDate}.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

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

@@ -0,0 +1,119 @@
+import { useWeb3React } from '@web3-react/core'
+import {
+  CreditState,
+  POOL_NAME,
+  POOL_TYPE,
+  useAccountStats,
+  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 { Evaluation } from './1-Evaluation'
+import { AllowList } from './2-AllowList'
+import { ChooseAmount } from './3-ChooseAmount'
+import { ApproveAllowance } from './4-ApproveAllowance'
+import { Transfer } from './5-Transfer'
+import { Success } from './6-Success'
+
+/**
+ * Credit line pool borrow props
+ * @typedef {Object} CreditLineBorrowProps
+ * @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():void|undefined} handleApprove Optional function to notify when user is approved successfully to borrow again pool.
+ * @property {function((number|undefined)):void|undefined} handleSuccess Optional function to notify that the credit line pool borrow action is successful.
+ */
+export interface CreditLineBorrowProps {
+  poolName: keyof typeof POOL_NAME
+  poolType: keyof typeof POOL_TYPE
+  handleClose: () => void
+  handleApprove?: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function CreditLineBorrow({
+  poolName: poolNameStr,
+  poolType: poolTypeStr,
+  handleClose,
+  handleApprove,
+  handleSuccess,
+}: CreditLineBorrowProps): 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, refreshAccountStats] = useAccountStats(
+    poolName,
+    poolType,
+    account,
+  )
+  const { creditRecord } = accountStats
+  const accountState = creditRecord?.state
+
+  useEffect(() => {
+    if (!step && accountState !== undefined) {
+      const nextStep =
+        accountState >= CreditState.Approved
+          ? WIDGET_STEP.ChooseAmount
+          : WIDGET_STEP.Evaluation
+      dispatch(setStep(nextStep))
+    }
+  }, [accountState, dispatch, step])
+
+  const approveCallback = useCallback(() => {
+    if (handleApprove) {
+      handleApprove()
+    }
+    refreshAccountStats()
+  }, [handleApprove, refreshAccountStats])
+
+  if (!poolInfo) {
+    return null
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      isLoading={!creditRecord}
+      loadingTitle='Borrow'
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {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} />
+      )}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance poolInfo={poolInfo} />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolInfo={poolInfo}
+          handleAction={handleClose}
+          creditRecord={creditRecord!}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Borrow'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/CreditLine/payment/1-ChooseAmount.tsx

@@ -0,0 +1,67 @@
+import { useWeb3React } from '@web3-react/core'
+import {
+  PoolInfoType,
+  toBigNumber,
+  upScale,
+  useCLPoolAllowance,
+} from '@huma-finance/shared'
+import React, { useCallback, useEffect, 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 = {
+  payoffAmount: number
+  totalDueAmount: number
+  poolInfo: PoolInfoType
+}
+
+export function ChooseAmount({
+  payoffAmount,
+  totalDueAmount,
+  poolInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account } = useWeb3React()
+  const { symbol, decimals } = poolInfo.poolUnderlyingToken
+  const [currentAmount, setCurrentAmount] = useState(0)
+  const { allowance } = useCLPoolAllowance(poolInfo.poolName, account)
+
+  useEffect(() => {
+    setCurrentAmount(totalDueAmount)
+    dispatch(setPaymentAmount({ paymentAmount: totalDueAmount }))
+  }, [dispatch, totalDueAmount])
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      setCurrentAmount(newAmount)
+      dispatch(setPaymentAmount({ paymentAmount: newAmount }))
+    },
+    [dispatch],
+  )
+
+  const handleAction = useCallback(() => {
+    const payAmount = upScale(currentAmount, decimals)
+    const step = toBigNumber(payAmount).gt(allowance)
+      ? WIDGET_STEP.ApproveAllowance
+      : WIDGET_STEP.Transfer
+    dispatch(setStep(step))
+  }, [allowance, currentAmount, decimals, dispatch])
+
+  return (
+    <ChooseAmountModal
+      title='Pay'
+      description1='Choose amount'
+      sliderMax={payoffAmount}
+      currentAmount={currentAmount}
+      tokenSymbol={symbol}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+      actionText='pay'
+      payoffAmount={payoffAmount}
+      hideTerms
+    />
+  )
+}

package/src/components/CreditLine/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/CreditLine/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 { selectWidgetState } from '../../../store/widgets.selectors'
+import { setStep } from '../../../store/widgets.reducers'
+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 { paymentAmount } = useAppSelector(selectWidgetState)
+  const { decimals } = poolInfo.poolUnderlyingToken
+  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/CreditLine/payment/4-Success.tsx

@@ -0,0 +1,39 @@
+import {
+  decodeLogs,
+  downScale,
+  formatMoney,
+  PoolInfoType,
+  sendTxAtom,
+} from '@huma-finance/shared'
+import transferAbi from '@huma-finance/shared/dist/abis/Transfer.json'
+import { useAtom } from 'jotai'
+import React, { useEffect, useState } from 'react'
+
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleAction: () => void
+}
+
+export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
+  const { symbol, decimals } = poolInfo.poolUnderlyingToken
+  const [{ txReceipt }] = useAtom(sendTxAtom)
+  const [payedAmount, setPayedAmount] = useState<string | undefined>()
+
+  useEffect(() => {
+    if (txReceipt) {
+      const [event] = decodeLogs(txReceipt.logs, transferAbi)
+      if (event) {
+        const payedAmount = downScale(event.args.value.toString(), decimals)
+        setPayedAmount(payedAmount)
+      }
+    }
+  }, [decimals, txReceipt])
+
+  const content = [
+    `You successfully paid ${formatMoney(payedAmount)} ${symbol}.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

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

@@ -0,0 +1,94 @@
+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'
+
+/**
+ * Credit line pool payment props
+ * @typedef {Object} CreditLinePaymentProps
+ * @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 credit line pool payment action is successful.
+ */
+export type CreditLinePaymentProps = {
+  poolName: keyof typeof POOL_NAME
+  poolType: keyof typeof POOL_TYPE
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function CreditLinePayment({
+  poolName: poolNameStr,
+  poolType: poolTypeStr,
+  handleClose,
+  handleSuccess,
+}: CreditLinePaymentProps): 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, payoffAmount, totalDueAmount }] = 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
+          poolInfo={poolInfo}
+          payoffAmount={payoffAmount}
+          totalDueAmount={totalDueAmount}
+        />
+      )}
+      {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/ErrorModal.tsx

@@ -0,0 +1,132 @@
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import { Box, Button, css, Tooltip, Typography, useTheme } from '@mui/material'
+import { txAtom } from '@huma-finance/shared'
+import { useResetAtom } from 'jotai/utils'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch } from '../hooks/useRedux'
+import { resetState } from '../store/widgets.reducers'
+import { SorryIcon } from './icons'
+
+type Props = {
+  title: string
+  errorReason?: string
+  errorMessage?: string
+  handleOk: () => void
+  okText?: string
+  shouldResetState?: boolean
+}
+
+export function ErrorModal({
+  title,
+  errorReason,
+  errorMessage,
+  handleOk,
+  okText = 'OKAY',
+  shouldResetState = true,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const reset = useResetAtom(txAtom)
+
+  if (!errorReason) {
+    errorReason = 'Oops! Something went wrong'
+  }
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    sorry: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 67px;
+    `,
+    content: css`
+      box-sizing: border-box;
+      width: 100%;
+      display: inline-table;
+      padding: 16px 0;
+      background: linear-gradient(
+          0deg,
+          rgba(255, 255, 255, 0.9),
+          rgba(255, 255, 255, 0.9)
+        ),
+        #d32f2f;
+      border-radius: 4px;
+      position: relative;
+      margin-top: 30px;
+      height: 79px;
+    `,
+    errorIcon: css`
+      position: absolute;
+      font-size: 20px;
+      color: #d32f2f;
+      margin: 0 15px;
+    `,
+    messageWrapper: css`
+      color: #541313;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      padding-left: 50px;
+    `,
+    errorMessage: css`
+      margin-top: 4px;
+      font-size: 14px;
+      font-family: 'Uni-Neue-Regular';
+      color: #541313;
+      cursor: pointer;
+      display: -webkit-box;
+      line-height: 16px;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: 20px;
+    `,
+    okButton: css`
+      & .MuiButtonBase-root {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+      }
+    `,
+  }
+
+  const handleCloseModal = useCallback(() => {
+    reset()
+    handleOk()
+    if (shouldResetState) {
+      dispatch(resetState())
+    }
+  }, [dispatch, handleOk, reset, shouldResetState])
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        {title}
+      </Typography>
+      <Box css={styles.sorry}>
+        <SorryIcon />
+      </Box>
+      <Box css={styles.content}>
+        <ErrorOutlineIcon css={styles.errorIcon} />
+        <Box css={styles.messageWrapper}>
+          <Box>{errorReason}</Box>
+          <Tooltip title={errorMessage} placement='top'>
+            <Box css={styles.errorMessage}>{errorMessage}</Box>
+          </Tooltip>
+        </Box>
+      </Box>
+      <Box css={styles.okButton}>
+        <Button variant='contained' onClick={handleCloseModal}>
+          {okText}
+        </Button>
+      </Box>
+    </Box>
+  )
+}