@huma-finance/widgets 0.0.48-beta.202 → 0.0.48-beta.280

package/src/components/Notifi/NotifiSubscriptionModal.tsx

@@ -1,38 +1,30 @@
-import React, { useCallback, useState } from 'react'
-import { useWeb3React } from '@web3-react/core'
-import {
-  NotifiFrontendClient,
-  Uint8SignMessageFunction,
-  SignMessageParams,
-  CardConfigItemV1,
-  DirectPushEventTypeItem,
-  EventTypeItem,
-  BroadcastEventTypeItem,
-} from '@notifi-network/notifi-frontend-client'
 import {
   checkIsDev,
   getBlockchainConfigFromChain,
   txAtom,
 } from '@huma-finance/shared'
-import { ethers } from 'ethers'
+import { Box, css, TextField, Typography, useTheme } from '@mui/material'
 import {
-  Box,
-  Input,
-  InputAdornment,
-  Typography,
-  css,
-  useTheme,
-} from '@mui/material'
-import Email from '@mui/icons-material/Email'
+  BroadcastEventTypeItem,
+  CardConfigItemV1,
+  DirectPushEventTypeItem,
+  EventTypeItem,
+  NotifiFrontendClient,
+  SignMessageParams,
+  Uint8SignMessageFunction,
+} from '@notifi-network/notifi-frontend-client'
+import { useWeb3React } from '@web3-react/core'
+import { ethers } from 'ethers'
 import { useResetAtom } from 'jotai/utils'
+import React, { useCallback, useState } from 'react'
 
-import { WrapperModal } from '../WrapperModal'
+import { useNotifiClient } from '../../hooks/useNotifi'
+import { useAppDispatch } from '../../hooks/useRedux'
+import { resetState } from '../../store/widgets.reducers'
 import { BottomButton } from '../BottomButton'
-import { LoadingModal } from '../LoadingModal'
 import { CheckIcon } from '../icons'
-import { resetState } from '../../store/widgets.reducers'
-import { useAppDispatch } from '../../hooks/useRedux'
-import { useNotifiClient } from '../../hooks/useNotifi'
+import { LoadingModal } from '../LoadingModal'
+import { WrapperModal } from '../WrapperModal'
 
 type Props = {
   handleSuccess: () => void
@@ -176,7 +168,7 @@ export function NotifiSubscriptionModal({
       margin-top: ${theme.spacing(6)};
     `,
     inputField: css`
-      width: 90%;
+      width: 100%;
       font-size: 16px;
     `,
     inputWrapper: css`
@@ -215,33 +207,33 @@ export function NotifiSubscriptionModal({
 
   return (
     <WrapperModal title='Connect Your Email'>
-      <Typography variant='body2' margin={theme.spacing(1, 0)}>
-        Connect your wallet to receive important emails about your account
+      <Typography
+        variant='body2'
+        textAlign='justify'
+        margin={theme.spacing(6, 0, 4, 0)}
+      >
+        Connect your emails to receive important update about your account.
       </Typography>
       <Box css={styles.inputWrapper}>
-        <Input
+        <TextField
           css={styles.inputField}
+          label='Your Email'
           type='email'
           value={emailAddress}
           onChange={handleEmailAddressChange}
-          placeholder='youremail@example.com'
-          startAdornment={
-            <InputAdornment position='start'>
-              <Email />
-            </InputAdornment>
-          }
+          variant='standard'
         />
       </Box>
       <Box css={styles.disclaimer}>
         You can adjust these settings at any time by clicking the alert icon in
-        the header
+        the header.
       </Box>
       <BottomButton
         variant='contained'
         onClick={logInAndSubscribe}
         disabled={!emailValid || isLoading}
       >
-        CONNECT WALLET
+        CONNECT EMAIL
       </BottomButton>
     </WrapperModal>
   )

package/src/components/NumericFormatCustom.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { NumericFormat, NumericFormatProps } from 'react-number-format'
+
+interface CustomProps {
+  onChange: (event: { target: { name: string; value: string } }) => void
+  name: string
+}
+
+export const NumericFormatCustom = React.forwardRef<
+  NumericFormatProps,
+  CustomProps
+>((props, ref) => {
+  const { onChange, ...other } = props
+
+  return (
+    <NumericFormat
+      {...other}
+      getInputRef={ref}
+      onValueChange={(values) => {
+        onChange({
+          target: {
+            name: props.name,
+            value: values.value,
+          },
+        })
+      }}
+      thousandSeparator
+      valueIsNumericString
+    />
+  )
+})

package/src/components/ReceivableBackedCreditLine/borrow/1-ChooseAmount.tsx

@@ -0,0 +1,101 @@
+import {
+  CreditStatsV2,
+  PoolInfoV2,
+  UnderlyingTokenInfo,
+  usePoolSafeAllowanceV2,
+  useReceivableInfoV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber, ethers } from 'ethers'
+import React, { useCallback, useEffect, 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'
+import { LoadingModal } from '../../LoadingModal'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  accountStats: CreditStatsV2
+  tokenId: string
+}
+
+export function ChooseAmount({
+  poolInfo,
+  poolUnderlyingToken,
+  accountStats,
+  tokenId,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const { symbol, decimals } = poolUnderlyingToken!
+  const [currentAmount, setCurrentAmount] = useState(0)
+  const { creditAvailable } = accountStats
+  const receivableInfo = useReceivableInfoV2(
+    poolInfo.poolName,
+    tokenId,
+    provider,
+  )
+  const { autopayEnabled } = usePoolSafeAllowanceV2(
+    poolInfo.poolName,
+    account,
+    provider,
+  )
+  const [maxAmount, setMaxAmount] = useState(0)
+
+  useEffect(() => {
+    if (creditAvailable) {
+      let maxAmountBN: BigNumber = creditAvailable
+
+      if (receivableInfo) {
+        const receivableAmountBN = BigNumber.from(
+          receivableInfo.receivableAmount,
+        )
+        maxAmountBN = receivableAmountBN.lte(creditAvailable)
+          ? receivableAmountBN
+          : creditAvailable
+      }
+      setMaxAmount(Number(ethers.utils.formatUnits(maxAmountBN, decimals)))
+    }
+  }, [creditAvailable, decimals, receivableInfo])
+
+  const handleChangeAmount = useCallback((newAmount: number) => {
+    setCurrentAmount(newAmount)
+  }, [])
+
+  const handleAction = useCallback(() => {
+    const nextStep = autopayEnabled
+      ? WIDGET_STEP.ApproveNFT
+      : 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 || (tokenId && !receivableInfo)) {
+    return <LoadingModal title='Borrow' />
+  }
+
+  return (
+    <ChooseAmountModal
+      title='Borrow'
+      description1='Choose Amount'
+      sliderMax={maxAmount}
+      currentAmount={currentAmount}
+      tokenSymbol={symbol}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+      actionText='Borrow'
+    />
+  )
+}

package/src/components/ReceivableBackedCreditLine/borrow/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.ApproveNFT))
+  }, [dispatch])
+
+  return (
+    <ApproveAllowanceModalV2
+      poolInfo={poolInfo}
+      spender={poolInfo.poolSafe}
+      poolUnderlyingToken={poolUnderlyingToken}
+      handleSuccess={handleSuccess}
+      showAutoPayback
+    />
+  )
+}

package/src/components/ReceivableBackedCreditLine/borrow/3-ApproveReceivable.tsx

@@ -0,0 +1,64 @@
+import {
+  PoolInfoV2,
+  sendTxAtom,
+  txAtom,
+  TxStateType,
+  useReceivableContractV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+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: PoolInfoV2
+  tokenId: string
+}
+
+export function ApproveReceivable({
+  poolInfo,
+  tokenId,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { provider, account } = useWeb3React()
+  const [{ state, txHash }, send] = useAtom(sendTxAtom)
+  const reset = useResetAtom(txAtom)
+  const receivableContract = useReceivableContractV2(
+    poolInfo.poolName,
+    provider,
+    account,
+  )
+
+  useEffect(() => {
+    if (state === TxStateType.Success) {
+      reset()
+      dispatch(setStep(WIDGET_STEP.Transfer))
+    }
+  }, [dispatch, reset, state])
+
+  useEffect(() => {
+    if (receivableContract) {
+      send({
+        contract: receivableContract,
+        method: 'approve',
+        params: [poolInfo.poolCredit, tokenId],
+        provider,
+      })
+    }
+  }, [poolInfo.poolCredit, provider, receivableContract, send, tokenId])
+
+  return (
+    <LoadingModal
+      title='Approve Receivable'
+      description='Waiting for approval confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

package/src/components/ReceivableBackedCreditLine/borrow/4-Transfer.tsx

@@ -0,0 +1,61 @@
+import { drawdownWithReceivable } from '@huma-finance/sdk'
+import { PoolInfoV2 } from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber } from 'ethers'
+import React, { useEffect, useState } 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 { ViewOnExplorer } from '../../ViewOnExplorer'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  tokenId: string
+}
+
+export function Transfer({ poolInfo, tokenId }: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { provider, account } = useWeb3React()
+  const { borrowAmountBN: borrowAmountBNJson } =
+    useAppSelector(selectWidgetState)
+  const borrowAmountBN = BigNumber.from(borrowAmountBNJson).toString()
+  const [txHash, setTxHash] = useState('')
+
+  useEffect(() => {
+    const sendTx = async () => {
+      if (provider) {
+        try {
+          const tx = await drawdownWithReceivable(
+            provider.getSigner(),
+            poolInfo.poolName,
+            tokenId,
+            borrowAmountBN,
+          )
+          setTxHash(tx.hash)
+          await tx.wait()
+          dispatch(setStep(WIDGET_STEP.Done))
+        } catch (e) {
+          console.error(e)
+          dispatch(setStep(WIDGET_STEP.Error))
+        }
+      }
+    }
+    sendTx()
+  }, [borrowAmountBN, dispatch, poolInfo.poolName, provider, tokenId])
+
+  if (!account || !provider) {
+    return <LoadingModal title='Borrow' />
+  }
+
+  return (
+    <LoadingModal
+      title='Transaction Pending'
+      description='Waiting for confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

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

@@ -0,0 +1,41 @@
+import {
+  CreditStatsV2,
+  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 = [
+    `${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/ReceivableBackedCreditLine/borrow/6-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} />
+}

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

@@ -0,0 +1,148 @@
+import {
+  CreditStateV2,
+  POOL_NAME,
+  useCreditStatsV2,
+  usePoolInfoV2,
+  usePoolUnderlyingTokenInfoV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import React, { useCallback, useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import {
+  useDoesChainSupportNotifi,
+  useIsFirstTimeNotifiUser,
+} from '../../../hooks/useNotifi'
+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 { ApproveReceivable } from './3-ApproveReceivable'
+import { Transfer } from './4-Transfer'
+import { Success } from './5-Success'
+import { Notifications } from './6-Notifications'
+
+/**
+ * Receivable backed credit line pool borrow props V2
+ * @typedef {Object} ReceivableBackedCreditLineBorrowPropsV2
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @property {tokenId} tokenId The receivable token id.
+ * @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 ReceivableBackedCreditLineBorrowPropsV2 {
+  poolName: keyof typeof POOL_NAME
+  tokenId: string
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function ReceivableBackedCreditLineBorrowV2({
+  poolName: poolNameStr,
+  tokenId,
+  handleClose,
+  handleSuccess,
+}: ReceivableBackedCreditLineBorrowPropsV2): 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 [accountStats, refreshAccountStats] = useCreditStatsV2(
+    poolName,
+    account,
+    provider,
+  )
+  const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
+  const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
+  const { creditRecord } = accountStats
+  const accountState = creditRecord?.state
+
+  useEffect(() => {
+    if (!step && accountState !== undefined) {
+      if (accountState >= CreditStateV2.Approved) {
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+      }
+    }
+  }, [accountState, dispatch, step])
+
+  const setupNotificationsOrClose = useCallback(() => {
+    if (isFirstTimeNotifiUser && notifiChainSupported) {
+      dispatch(setStep(WIDGET_STEP.Notifications))
+    } else {
+      handleClose()
+    }
+  }, [dispatch, handleClose, isFirstTimeNotifiUser, notifiChainSupported])
+
+  const handleSuccessCallback = useCallback(() => {
+    refreshAccountStats()
+    if (handleSuccess) {
+      handleSuccess()
+    }
+  }, [handleSuccess, refreshAccountStats])
+
+  if (!poolInfo || !poolUnderlyingToken || !creditRecord || !step) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle='Borrow'
+        handleClose={handleClose}
+        handleSuccess={handleSuccessCallback}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle='Borrow'
+      handleClose={handleClose}
+      handleSuccess={handleSuccessCallback}
+    >
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          accountStats={accountStats}
+          tokenId={tokenId}
+        />
+      )}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+        />
+      )}
+      {step === WIDGET_STEP.ApproveNFT && tokenId && (
+        <ApproveReceivable poolInfo={poolInfo} tokenId={tokenId} />
+      )}
+      {step === WIDGET_STEP.Transfer && tokenId && (
+        <Transfer poolInfo={poolInfo} tokenId={tokenId} />
+      )}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolUnderlyingToken={poolUnderlyingToken}
+          handleAction={setupNotificationsOrClose}
+          creditRecord={accountStats.creditRecord!}
+          hasNextStep={isFirstTimeNotifiUser}
+        />
+      )}
+      {step === WIDGET_STEP.Notifications && (
+        <Notifications handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Borrow'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}