@huma-finance/widgets 0.0.51-beta.227 → 0.0.51-beta.347

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.51-beta.227+dda6d93",
+  "version": "0.0.51-beta.347+91129f3",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.50",
-    "@huma-finance/shared": "^0.0.50",
+    "@huma-finance/sdk": "^0.0.51-beta.347+91129f3",
+    "@huma-finance/shared": "^0.0.51-beta.347+91129f3",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -68,6 +68,7 @@
     "react": "^18.2.0",
     "react-app-rewired": "^2.2.1",
     "react-dom": "^18.2.0",
+    "react-number-format": "^5.3.1",
     "react-redux": "^8.0.4",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
@@ -192,5 +193,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "dda6d93a4ff0d35af66d292ea55ed749482c9f93"
+  "gitHead": "91129f368c265e7b589b93b13a110770151d10c5"
 }

package/src/components/ApproveAllowanceModal.tsx

@@ -38,12 +38,14 @@ export function ApproveAllowanceModal({
   handleSuccess,
 }: Props): React.ReactElement | null {
   const theme = useTheme()
-  const { provider, account } = useWeb3React()
+  const { provider, account, chainId } = useWeb3React()
   const { poolUnderlyingToken } = poolInfo
   const { symbol } = poolUnderlyingToken
   const poolUnderlyingTokenContract = usePoolUnderlyingTokenContract(
     poolInfo.poolName,
     poolInfo.poolType,
+    chainId,
+    provider,
   )
   const reset = useResetAtom(txAtom)
   const [{ state, txHash }, send] = useAtom(sendTxAtom)

package/src/components/ApproveAllowanceModalV2.tsx

@@ -0,0 +1,141 @@
+import { MaxUint256 } from '@ethersproject/constants'
+import {
+  getERC20Contract,
+  PoolInfoV2,
+  sendTxAtom,
+  txAtom,
+  TxStateType,
+  UnderlyingTokenInfo,
+  useMount,
+} from '@huma-finance/shared'
+import { Box, css, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber, BigNumberish } from 'ethers'
+import { useAtom } from 'jotai'
+import { useResetAtom } from 'jotai/utils'
+import React, { useCallback, useEffect } from 'react'
+
+import { BottomButton } from './BottomButton'
+import { AutoPaybackImg } from './images'
+import { LoadingModal } from './LoadingModal'
+import { ViewOnExplorer } from './ViewOnExplorer'
+import { WrapperModal } from './WrapperModal'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  showAutoPayback?: boolean
+  allowanceAmount?: BigNumberish
+  spender?: string
+  resetAfterSuccess?: boolean
+  handleSuccess: () => void
+}
+
+export function ApproveAllowanceModalV2({
+  poolInfo,
+  poolUnderlyingToken,
+  showAutoPayback = false,
+  allowanceAmount,
+  spender,
+  resetAfterSuccess = true,
+  handleSuccess,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const { provider, account } = useWeb3React()
+  const reset = useResetAtom(txAtom)
+  const [{ state, txHash }, send] = useAtom(sendTxAtom)
+  const waitingForAccept = state === TxStateType.New
+  const { symbol, address } = poolUnderlyingToken
+
+  useEffect(() => {
+    if (state === TxStateType.Success) {
+      if (resetAfterSuccess) {
+        reset()
+      }
+      handleSuccess()
+    }
+  }, [handleSuccess, reset, resetAfterSuccess, state])
+
+  const styles = {
+    iconWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: ${theme.spacing(6)};
+      & > img {
+        width: 220px;
+      }
+    `,
+    description: css`
+      margin-top: ${theme.spacing(4)};
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #a8a1b2;
+      padding: ${theme.spacing(0, 1)};
+    `,
+  }
+
+  const sendIncreaseAllowance = useCallback(async () => {
+    const allowanceSpender = spender ?? poolInfo.pool
+    const targetAllowanceAmount = allowanceAmount ?? MaxUint256
+    const underlyingTokenContract = await getERC20Contract(
+      address,
+      provider,
+      account,
+    )
+    const currentAllowance = await underlyingTokenContract?.allowance(
+      account!,
+      allowanceSpender,
+    )
+    const amountToIncrease = BigNumber.from(targetAllowanceAmount).sub(
+      currentAllowance ?? 0,
+    )
+    send({
+      contract: underlyingTokenContract!,
+      method: 'increaseAllowance',
+      params: [allowanceSpender, amountToIncrease],
+      provider,
+    })
+  }, [
+    account,
+    address,
+    allowanceAmount,
+    poolInfo.pool,
+    provider,
+    send,
+    spender,
+  ])
+
+  useMount(() => {
+    if (!showAutoPayback) {
+      sendIncreaseAllowance()
+    }
+  })
+
+  if (showAutoPayback && waitingForAccept) {
+    return (
+      <WrapperModal
+        title='Auto Payback'
+        subTitle='Enable auto payback and never miss payments. You only need to do it once.'
+      >
+        <Box css={styles.iconWrapper}>
+          <img src={AutoPaybackImg} alt='auto-payback' />
+        </Box>
+        <Box css={styles.description}>
+          This allowance transaction removes the need to confirm follow up{' '}
+          {symbol} transactions. Gas is on us.
+        </Box>
+        <BottomButton variant='contained' onClick={sendIncreaseAllowance}>
+          APPROVE {symbol} PAYMENTS
+        </BottomButton>
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <LoadingModal
+      title={`Approve ${symbol}`}
+      description='Waiting for approval confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

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

@@ -43,12 +43,18 @@ export function CreditLineApprove({
   handleSuccess,
 }: CreditLineApproveProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const poolName = POOL_NAME[poolNameStr]
   const poolType = POOL_TYPE[poolTypeStr]
-  const poolInfo = usePoolInfo(poolName, poolType)
+  const poolInfo = usePoolInfo(poolName, poolType, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [accountStats] = useAccountStats(poolName, poolType, account)
+  const [accountStats] = useAccountStats(
+    poolName,
+    poolType,
+    chainId,
+    account,
+    provider,
+  )
   const { creditRecord } = accountStats
 
   useEffect(() => {

package/src/components/CreditLine/autoPaybackV2/1-ApproveAllowance.tsx

@@ -0,0 +1,33 @@
+import { PoolInfoV2, UnderlyingTokenInfo } from '@huma-finance/shared'
+import React from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ApproveAllowanceModalV2 } from '../../ApproveAllowanceModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+}
+
+export function ApproveAllowance({
+  poolInfo,
+  poolUnderlyingToken,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+
+  const handleSuccess = () => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }
+
+  return (
+    <ApproveAllowanceModalV2
+      poolInfo={poolInfo}
+      spender={poolInfo.poolSafe}
+      poolUnderlyingToken={poolUnderlyingToken}
+      handleSuccess={handleSuccess}
+      showAutoPayback
+    />
+  )
+}

package/src/components/CreditLine/autoPaybackV2/2-Success.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  handleAction: () => void
+}
+
+export function Success({ handleAction }: Props): React.ReactElement {
+  const content = [`You have successfully enabled auto payback.`]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

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

@@ -0,0 +1,87 @@
+import {
+  POOL_NAME,
+  usePoolInfoV2,
+  usePoolSafeAllowanceV2,
+  usePoolUnderlyingTokenInfoV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+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 { ApproveAllowance } from './1-ApproveAllowance'
+import { Success } from './2-Success'
+
+/**
+ * Auto payback props V2
+ * @typedef {Object} AutoPaybackPropsV2
+ * @property {POOL_NAME} poolName The name 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 borrow action is successful.
+ */
+export interface AutoPaybackPropsV2 {
+  poolName: keyof typeof POOL_NAME
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function AutoPaybackV2({
+  poolName: poolNameStr,
+  handleClose,
+  handleSuccess,
+}: AutoPaybackPropsV2): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const poolName = POOL_NAME[poolNameStr]
+  const { account, chainId, provider } = useWeb3React()
+  const poolInfo = usePoolInfoV2(poolName, chainId)
+  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const { autopayEnabled } = usePoolSafeAllowanceV2(poolName, account, provider)
+
+  useEffect(() => {
+    if (!step && !autopayEnabled) {
+      dispatch(setStep(WIDGET_STEP.ApproveAllowance))
+    }
+  }, [autopayEnabled, dispatch, step])
+
+  if (!poolInfo || !poolUnderlyingToken || autopayEnabled === undefined) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle='Auto Payback'
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle='Auto Payback'
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+        />
+      )}
+      {step === WIDGET_STEP.Done && <Success handleAction={handleClose} />}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Auto Payback'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

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

@@ -23,15 +23,24 @@ export function ChooseAmount({
   accountStats,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const { poolUnderlyingToken } = poolInfo
   const { symbol, decimals } = poolUnderlyingToken
-  const { getFeesCharged } = useCLFeeManager(poolInfo.poolName)
+  const { getFeesCharged } = useCLFeeManager(
+    poolInfo.poolName,
+    chainId,
+    provider,
+  )
   const [chargedFees, setChargedFees] = useState(0)
   const [currentAmount, setCurrentAmount] = useState(0)
   const { creditRecordStatic, creditAvailableAmount } = accountStats
 
-  const { approved } = useCLPoolAllowance(poolInfo.poolName, account)
+  const { approved } = useCLPoolAllowance(
+    poolInfo.poolName,
+    chainId,
+    account,
+    provider,
+  )
   const handleChangeAmount = useCallback(
     (newAmount: number) => {
       setCurrentAmount(newAmount)

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

@@ -1,4 +1,9 @@
-import { CreditRecordType, PoolInfoType, timeUtil } from '@huma-finance/shared'
+import {
+  CreditRecordType,
+  PoolInfoType,
+  formatNumber,
+  timeUtil,
+} from '@huma-finance/shared'
 import React from 'react'
 
 import { useAppSelector } from '../../../hooks/useRedux'
@@ -24,7 +29,7 @@ export function Success({
   const dueDate = timeUtil.timestampToLL(creditRecord?.dueDate.toNumber())
 
   const content = [
-    `${borrowAmountNet} ${symbol} is now in your wallet.`,
+    `${formatNumber(borrowAmountNet)} ${symbol} is now in your wallet.`,
     `Note: your payment will be automatically deducted on ${dueDate}.`,
   ]
 

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

@@ -51,15 +51,17 @@ export function CreditLineBorrow({
   handleSuccess,
 }: CreditLineBorrowProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account, chainId } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const poolName = POOL_NAME[poolNameStr]
   const poolType = POOL_TYPE[poolTypeStr]
-  const poolInfo = usePoolInfo(poolName, poolType)
+  const poolInfo = usePoolInfo(poolName, poolType, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
   const [accountStats, refreshAccountStats] = useAccountStats(
     poolName,
     poolType,
+    chainId,
     account,
+    provider,
   )
   const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
   const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)

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

@@ -0,0 +1,81 @@
+import {
+  CreditStatsV2,
+  formatNumber,
+  PoolInfoV2,
+  UnderlyingTokenInfo,
+  usePoolSafeAllowanceV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { ethers } from 'ethers'
+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 { InputAmountModal } from '../../InputAmountModal'
+import { LoadingModal } from '../../LoadingModal'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  accountStats: CreditStatsV2
+}
+
+export function ChooseAmount({
+  poolInfo,
+  poolUnderlyingToken,
+  accountStats,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const { symbol, decimals } = poolUnderlyingToken!
+  const [currentAmount, setCurrentAmount] = useState(0)
+  const { creditAvailable } = accountStats
+  const creditAvailableFormatted = creditAvailable
+    ? Number(ethers.utils.formatUnits(creditAvailable, decimals))
+    : 0
+
+  const { autopayEnabled } = usePoolSafeAllowanceV2(
+    poolInfo.poolName,
+    account,
+    provider,
+  )
+  const handleChangeAmount = useCallback((newAmount: number) => {
+    setCurrentAmount(newAmount)
+  }, [])
+
+  const handleAction = useCallback(() => {
+    const nextStep = autopayEnabled
+      ? WIDGET_STEP.Transfer
+      : WIDGET_STEP.ApproveAllowance
+
+    dispatch(
+      setBorrowInfo({
+        borrowAmount: currentAmount,
+        borrowAmountBN: ethers.utils
+          .parseUnits(currentAmount.toString(), decimals)
+          .toJSON(),
+        chargedFees: 0,
+        nextStep,
+      }),
+    )
+  }, [autopayEnabled, currentAmount, decimals, dispatch])
+
+  if (autopayEnabled === undefined) {
+    return <LoadingModal title='Borrow' />
+  }
+
+  return (
+    <InputAmountModal
+      title='Borrow'
+      subTitle='Choose Amount'
+      tokenSymbol={symbol}
+      currentAmount={currentAmount}
+      handleChangeAmount={handleChangeAmount}
+      maxAmount={creditAvailableFormatted}
+      info={`${formatNumber(creditAvailableFormatted)} Available`}
+      handleAction={handleAction}
+      actionText='BORROW'
+    />
+  )
+}

package/src/components/CreditLine/borrowV2/2-ApproveAllowance.tsx

@@ -0,0 +1,33 @@
+import { PoolInfoV2, UnderlyingTokenInfo } 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 { ApproveAllowanceModalV2 } from '../../ApproveAllowanceModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+}
+
+export function ApproveAllowance({
+  poolInfo,
+  poolUnderlyingToken,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  return (
+    <ApproveAllowanceModalV2
+      poolInfo={poolInfo}
+      spender={poolInfo.poolSafe}
+      poolUnderlyingToken={poolUnderlyingToken}
+      handleSuccess={handleSuccess}
+      showAutoPayback
+    />
+  )
+}

package/src/components/CreditLine/borrowV2/3-Transfer.tsx

@@ -0,0 +1,50 @@
+import { PoolInfoV2, txAtom, useCreditContractV2 } from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber } from 'ethers'
+import { useResetAtom } from 'jotai/utils'
+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 { LoadingModal } from '../../LoadingModal'
+import { TxSendModalV2 } from '../../TxSendModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+}
+
+export function Transfer({ poolInfo }: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { provider, account } = useWeb3React()
+  const reset = useResetAtom(txAtom)
+  const { borrowAmountBN: borrowAmountBNJson } =
+    useAppSelector(selectWidgetState)
+  const borrowAmountBN = BigNumber.from(borrowAmountBNJson)
+  const creditContract = useCreditContractV2(
+    poolInfo.poolName,
+    provider,
+    account,
+  )
+
+  const handleSuccess = useCallback(() => {
+    reset()
+    const nextStep = WIDGET_STEP.Done
+    dispatch(setStep(nextStep))
+  }, [dispatch, reset])
+
+  if (!account || !creditContract) {
+    return <LoadingModal title='Borrow' />
+  }
+
+  return (
+    <TxSendModalV2
+      title='Borrow'
+      contract={creditContract}
+      method='drawdown'
+      params={[borrowAmountBN]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/CreditLine/borrowV2/4-Success.tsx

@@ -0,0 +1,42 @@
+import {
+  CreditStatsV2,
+  formatNumber,
+  timeUtil,
+  UnderlyingTokenInfo,
+} 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 = {
+  poolUnderlyingToken: UnderlyingTokenInfo
+  creditRecord: CreditStatsV2['creditRecord']
+  handleAction: () => void
+  hasNextStep: boolean
+}
+
+export function Success({
+  poolUnderlyingToken,
+  creditRecord,
+  handleAction,
+  hasNextStep,
+}: Props): React.ReactElement {
+  const { borrowAmountNet } = useAppSelector(selectWidgetState)
+  const { symbol } = poolUnderlyingToken
+  const dueDate = timeUtil.timestampToLL(creditRecord?.nextDueDate.toNumber())
+
+  const content = [
+    `${formatNumber(borrowAmountNet)} ${symbol} is now in your wallet.`,
+    `Note: your payment will be automatically deducted on ${dueDate}.`,
+  ]
+
+  return (
+    <TxDoneModal
+      handleAction={handleAction}
+      content={content}
+      buttonText={hasNextStep ? "WHAT'S NEXT" : undefined}
+    />
+  )
+}

package/src/components/CreditLine/borrowV2/5-Notifications.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { NotifiSubscriptionModal } from '../../Notifi/NotifiSubscriptionModal'
+
+type Props = {
+  handleAction: () => void
+}
+
+export function Notifications({ handleAction }: Props): React.ReactElement {
+  return <NotifiSubscriptionModal handleSuccess={handleAction} />
+}