@huma-finance/widgets 0.0.31 → 0.0.32

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

@@ -1,68 +1,68 @@
-import {
-  AccountStats,
-  PoolInfoType,
-  upScale,
-  useCLFeeManager,
-} 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 { poolUnderlyingToken } = poolInfo
-  const { symbol, decimals } = poolUnderlyingToken
-  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 = WIDGET_STEP.Transfer
-    dispatch(
-      setBorrowInfo({
-        borrowAmount: currentAmount,
-        borrowAmountBN: upScale(currentAmount, decimals),
-        chargedFees,
-        nextStep,
-      }),
-    )
-  }, [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'
-    />
-  )
-}
+import {
+  AccountStats,
+  PoolInfoType,
+  upScale,
+  useCLFeeManager,
+} 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 { poolUnderlyingToken } = poolInfo
+  const { symbol, decimals } = poolUnderlyingToken
+  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 = WIDGET_STEP.Transfer
+    dispatch(
+      setBorrowInfo({
+        borrowAmount: currentAmount,
+        borrowAmountBN: upScale(currentAmount, decimals),
+        chargedFees,
+        nextStep,
+      }),
+    )
+  }, [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/3-Transfer.tsx

@@ -1,44 +1,44 @@
-import {
-  PoolInfoType,
-  toBigNumber,
-  txAtom,
-  useCLPoolAllowance,
-} from '@huma-finance/shared'
-import React, { useCallback } from 'react'
-
-import { useResetAtom } from 'jotai/utils'
-import { useWeb3React } from '@web3-react/core'
-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 reset = useResetAtom(txAtom)
-  const { account } = useWeb3React()
-  const { borrowAmountBN } = useAppSelector(selectWidgetState)
-  const { allowance } = useCLPoolAllowance(poolInfo.poolName, account)
-
-  const handleSuccess = useCallback(() => {
-    reset()
-    const nextStep = allowance.gte(toBigNumber(borrowAmountBN!))
-      ? WIDGET_STEP.Done
-      : WIDGET_STEP.ApproveAllowance
-    dispatch(setStep(nextStep))
-  }, [allowance, borrowAmountBN, dispatch, reset])
-
-  return (
-    <TxSendModal
-      poolInfo={poolInfo}
-      method='drawdown'
-      params={[borrowAmountBN]}
-      handleSuccess={handleSuccess}
-    />
-  )
-}
+import {
+  PoolInfoType,
+  toBigNumber,
+  txAtom,
+  useCLPoolAllowance,
+} from '@huma-finance/shared'
+import React, { useCallback } from 'react'
+
+import { useResetAtom } from 'jotai/utils'
+import { useWeb3React } from '@web3-react/core'
+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 reset = useResetAtom(txAtom)
+  const { account } = useWeb3React()
+  const { borrowAmountBN } = useAppSelector(selectWidgetState)
+  const { allowance } = useCLPoolAllowance(poolInfo.poolName, account)
+
+  const handleSuccess = useCallback(() => {
+    reset()
+    const nextStep = allowance.gte(toBigNumber(borrowAmountBN!))
+      ? WIDGET_STEP.Done
+      : WIDGET_STEP.ApproveAllowance
+    dispatch(setStep(nextStep))
+  }, [allowance, borrowAmountBN, dispatch, reset])
+
+  return (
+    <TxSendModal
+      poolInfo={poolInfo}
+      method='drawdown'
+      params={[borrowAmountBN]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

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

@@ -1,29 +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.Done))
-  }, [dispatch])
-
-  return (
-    <ApproveAllowanceModal
-      poolInfo={poolInfo}
-      handleSuccess={handleSuccess}
-      showAutoPayback
-    />
-  )
-}
+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.Done))
+  }, [dispatch])
+
+  return (
+    <ApproveAllowanceModal
+      poolInfo={poolInfo}
+      handleSuccess={handleSuccess}
+      showAutoPayback
+    />
+  )
+}

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

@@ -1,30 +1,38 @@
-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} />
-}
+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
+  hasNextStep: boolean
+}
+
+export function Success({
+  poolInfo,
+  creditRecord,
+  handleAction,
+  hasNextStep,
+}: 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}
+      buttonText={hasNextStep ? "WHAT'S NEXT" : undefined}
+    />
+  )
+}

package/src/components/CreditLine/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/CreditLine/borrow/index.tsx

@@ -1,117 +1,136 @@
-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 { ChooseAmount } from './2-ChooseAmount'
-import { ApproveAllowance } from './4-ApproveAllowance'
-import { Transfer } from './3-Transfer'
-import { Success } from './5-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.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>
-  )
-}
+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 { ChooseAmount } from './2-ChooseAmount'
+import { ApproveAllowance } from './4-ApproveAllowance'
+import { Transfer } from './3-Transfer'
+import { Success } from './5-Success'
+import { Notifications } from './6-Notifications'
+import {
+  useDoesChainSupportNotifi,
+  useIsFirstTimeNotifiUser,
+} from '../../../hooks/useNotifi'
+
+/**
+ * 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, chainId } = 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 { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
+  const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
+  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])
+
+  const setupNotificationsOrClose = useCallback(() => {
+    if (isFirstTimeNotifiUser && notifiChainSupported) {
+      dispatch(setStep(WIDGET_STEP.Notifications))
+    } else {
+      handleClose()
+    }
+  }, [dispatch, handleClose, isFirstTimeNotifiUser, notifiChainSupported])
+
+  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.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={setupNotificationsOrClose}
+          creditRecord={creditRecord!}
+          hasNextStep={isFirstTimeNotifiUser}
+        />
+      )}
+      {step === WIDGET_STEP.Notifications && (
+        <Notifications handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Borrow'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}