@huma-finance/widgets 0.0.31 → 0.0.33

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

@@ -1,144 +1,167 @@
-import { useWeb3React } from '@web3-react/core'
-import {
-  POOL_NAME,
-  POOL_TYPE,
-  downScale,
-  useLenderApproved,
-  useLenderPosition,
-  usePoolAllowance,
-  usePoolInfo,
-  usePoolUnderlyingTokenBalance,
-  useWithdrawlLockoutInSeconds,
-} 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 './3-ApproveAllowance'
-import { Transfer } from './6-Transfer'
-import { Success } from './7-Success'
-
-/**
- * Lend pool supply props
- * @typedef {Object} LendSupplyProps
- * @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 supply action is successful.
- */
-export interface LendSupplyProps {
-  poolName: keyof typeof POOL_NAME
-  poolType: keyof typeof POOL_TYPE
-  handleClose: () => void
-  handleSuccess?: (blockNumber?: number) => void
-}
-
-export function LendSupply({
-  poolName: poolNameStr,
-  poolType: poolTypeStr,
-  handleClose,
-  handleSuccess,
-}: LendSupplyProps): 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 { decimals } = poolInfo?.poolUnderlyingToken || {}
-  const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const { allowance } = usePoolAllowance(poolName, poolType, account)
-  const [lenderApproved, refreshLenderApproved] = useLenderApproved(
-    poolName,
-    poolType,
-    account,
-  )
-  const [, refreshLenderPosition] = useLenderPosition(
-    poolName,
-    poolType,
-    account,
-  )
-  const withdrawlLockoutSeconds = useWithdrawlLockoutInSeconds(
-    poolName,
-    poolType,
-  )
-  const underlyingTokenBalance = usePoolUnderlyingTokenBalance(
-    poolName,
-    poolType,
-    account,
-  )
-  const balanceWithoutDecimals = downScale(underlyingTokenBalance, decimals)
-
-  useEffect(() => {
-    if (!step && lenderApproved !== undefined) {
-      const nextStep = lenderApproved
-        ? WIDGET_STEP.ChooseAmount
-        : WIDGET_STEP.Evaluation
-      dispatch(setStep(nextStep))
-    }
-  }, [dispatch, lenderApproved, step])
-
-  const handleApproveSuccess = useCallback(() => {
-    refreshLenderApproved()
-  }, [refreshLenderApproved])
-
-  const handleSupplySuccess = useCallback(
-    (blockNumber: number) => {
-      refreshLenderPosition()
-      if (handleSuccess) {
-        handleSuccess(blockNumber)
-      }
-    },
-    [handleSuccess, refreshLenderPosition],
-  )
-
-  if (!poolInfo) {
-    return null
-  }
-
-  return (
-    <WidgetWrapper
-      isOpen
-      isLoading={lenderApproved === undefined}
-      loadingTitle={`Supply ${poolInfo.poolUnderlyingToken.symbol}`}
-      handleClose={handleClose}
-      handleSuccess={handleSupplySuccess}
-    >
-      {step === WIDGET_STEP.Evaluation && (
-        <Evaluation
-          poolInfo={poolInfo}
-          handleApproveSuccess={handleApproveSuccess}
-        />
-      )}
-      {step === WIDGET_STEP.ChooseAmount && (
-        <ChooseAmount
-          poolInfo={poolInfo}
-          allowance={allowance}
-          underlyingTokenBalance={balanceWithoutDecimals}
-          withdrawlLockoutSeconds={withdrawlLockoutSeconds}
-        />
-      )}
-      {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='Supply'
-          errorReason='Sorry there was an error'
-          errorMessage={errorMessage}
-          handleOk={handleClose}
-        />
-      )}
-    </WidgetWrapper>
-  )
-}
+import {
+  downScale,
+  POOL_NAME,
+  POOL_TYPE,
+  useLenderApproved,
+  useLenderPosition,
+  usePoolAllowance,
+  usePoolInfo,
+  usePoolUnderlyingTokenBalance,
+  useWithdrawlLockoutInSeconds,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import React, { useCallback, useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import {
+  useIsFirstTimeNotifiUser,
+  useDoesChainSupportNotifi,
+} 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 { Evaluation } from './1-Evaluation'
+import { ChooseAmount } from './2-ChooseAmount'
+import { ApproveAllowance } from './3-ApproveAllowance'
+import { Transfer } from './4-Transfer'
+import { Success } from './5-Success'
+import { Notifications } from './6-Notifications'
+
+/**
+ * Lend pool supply props
+ * @typedef {Object} LendSupplyProps
+ * @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 supply action is successful.
+ */
+export interface LendSupplyProps {
+  poolName: keyof typeof POOL_NAME
+  poolType: keyof typeof POOL_TYPE
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function LendSupply({
+  poolName: poolNameStr,
+  poolType: poolTypeStr,
+  handleClose,
+  handleSuccess,
+}: LendSupplyProps): 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 { decimals } = poolInfo?.poolUnderlyingToken || {}
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const { allowance } = usePoolAllowance(poolName, poolType, account)
+  const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
+  const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
+  const [lenderApproved, refreshLenderApproved] = useLenderApproved(
+    poolName,
+    poolType,
+    account,
+  )
+  const [, refreshLenderPosition] = useLenderPosition(
+    poolName,
+    poolType,
+    account,
+  )
+  const withdrawlLockoutSeconds = useWithdrawlLockoutInSeconds(
+    poolName,
+    poolType,
+  )
+  const underlyingTokenBalance = usePoolUnderlyingTokenBalance(
+    poolName,
+    poolType,
+    account,
+  )
+  const balanceWithoutDecimals = downScale(underlyingTokenBalance, decimals)
+
+  useEffect(() => {
+    if (!step && lenderApproved !== undefined) {
+      const nextStep = lenderApproved
+        ? WIDGET_STEP.ChooseAmount
+        : WIDGET_STEP.Evaluation
+      dispatch(setStep(nextStep))
+    }
+  }, [dispatch, lenderApproved, step])
+
+  const handleApproveSuccess = useCallback(() => {
+    refreshLenderApproved()
+  }, [refreshLenderApproved])
+
+  const handleSupplySuccess = useCallback(
+    (blockNumber: number) => {
+      refreshLenderPosition()
+      if (handleSuccess) {
+        handleSuccess(blockNumber)
+      }
+    },
+    [handleSuccess, refreshLenderPosition],
+  )
+
+  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={lenderApproved === undefined}
+      loadingTitle={`Supply ${poolInfo.poolUnderlyingToken.symbol}`}
+      handleClose={handleClose}
+      handleSuccess={handleSupplySuccess}
+    >
+      {step === WIDGET_STEP.Evaluation && (
+        <Evaluation
+          poolInfo={poolInfo}
+          handleClose={handleClose}
+          handleApproveSuccess={handleApproveSuccess}
+        />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          allowance={allowance}
+          underlyingTokenBalance={balanceWithoutDecimals}
+          withdrawlLockoutSeconds={withdrawlLockoutSeconds}
+        />
+      )}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance poolInfo={poolInfo} />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolInfo={poolInfo}
+          handleAction={setupNotificationsOrClose}
+          hasNextStep={isFirstTimeNotifiUser}
+        />
+      )}
+      {step === WIDGET_STEP.Notifications && (
+        <Notifications handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Supply'
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/Lend/withdraw/1-CheckWithdrawble.tsx

@@ -1,73 +1,73 @@
-import { useWeb3React } from '@web3-react/core'
-import {
-  isEmpty,
-  PoolInfoType,
-  timeUtil,
-  useLastDepositTime,
-  useWithdrawlLockoutInSeconds,
-} from '@huma-finance/shared'
-import React, { useEffect, useState } from 'react'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { ErrorModal } from '../../ErrorModal'
-import { setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { LoadingModal } from '../../LoadingModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  handleClose: () => void
-}
-
-export function CheckWithdrawable({
-  poolInfo,
-  handleClose,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { account } = useWeb3React()
-  const withdrawlLockoutSeconds = useWithdrawlLockoutInSeconds(
-    poolInfo.poolName,
-    poolInfo.poolType,
-  )
-  const lastDepositTime = useLastDepositTime(
-    poolInfo.poolName,
-    poolInfo.poolType,
-    account,
-  )
-
-  const { symbol } = poolInfo.poolUnderlyingToken
-  const [status, setStatus] = useState<'checking' | 'error'>('checking')
-
-  useEffect(() => {
-    if (!isEmpty(withdrawlLockoutSeconds) && !isEmpty(lastDepositTime)) {
-      const currentTimestamp = timeUtil.getUnixTimestamp()
-      if (lastDepositTime! + withdrawlLockoutSeconds! > currentTimestamp) {
-        setStatus('error')
-      } else {
-        dispatch(setStep(WIDGET_STEP.ChooseAmount))
-      }
-    }
-  }, [dispatch, lastDepositTime, withdrawlLockoutSeconds])
-
-  if (status === 'error') {
-    const errorMessage = `Your last deposit was on ${timeUtil.timestampToLL(
-      lastDepositTime,
-    )}. Depositors need to wait for ${timeUtil
-      .secondsToDays(withdrawlLockoutSeconds)
-      .toFixed(0)} days before withdrawal.`
-    return (
-      <ErrorModal
-        title={`Withdraw ${symbol}`}
-        errorReason='Withdraw too soon'
-        errorMessage={errorMessage}
-        handleOk={handleClose}
-      />
-    )
-  }
-
-  return (
-    <LoadingModal
-      title={`Withdraw ${symbol}`}
-      description='Checking withdrawable amount...'
-    />
-  )
-}
+import { useWeb3React } from '@web3-react/core'
+import {
+  isEmpty,
+  PoolInfoType,
+  timeUtil,
+  useLastDepositTime,
+  useWithdrawlLockoutInSeconds,
+} from '@huma-finance/shared'
+import React, { useEffect, useState } from 'react'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { ErrorModal } from '../../ErrorModal'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { LoadingModal } from '../../LoadingModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleClose: () => void
+}
+
+export function CheckWithdrawable({
+  poolInfo,
+  handleClose,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account } = useWeb3React()
+  const withdrawlLockoutSeconds = useWithdrawlLockoutInSeconds(
+    poolInfo.poolName,
+    poolInfo.poolType,
+  )
+  const lastDepositTime = useLastDepositTime(
+    poolInfo.poolName,
+    poolInfo.poolType,
+    account,
+  )
+
+  const { symbol } = poolInfo.poolUnderlyingToken
+  const [status, setStatus] = useState<'checking' | 'error'>('checking')
+
+  useEffect(() => {
+    if (!isEmpty(withdrawlLockoutSeconds) && !isEmpty(lastDepositTime)) {
+      const currentTimestamp = timeUtil.getUnixTimestamp()
+      if (lastDepositTime! + withdrawlLockoutSeconds! > currentTimestamp) {
+        setStatus('error')
+      } else {
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+      }
+    }
+  }, [dispatch, lastDepositTime, withdrawlLockoutSeconds])
+
+  if (status === 'error') {
+    const errorMessage = `Your last deposit was on ${timeUtil.timestampToLL(
+      lastDepositTime,
+    )}. Depositors need to wait for ${timeUtil
+      .secondsToDays(withdrawlLockoutSeconds)
+      .toFixed(0)} days before withdrawal.`
+    return (
+      <ErrorModal
+        title={`Withdraw ${symbol}`}
+        errorReason='Withdraw too soon'
+        errorMessage={errorMessage}
+        handleOk={handleClose}
+      />
+    )
+  }
+
+  return (
+    <LoadingModal
+      title={`Withdraw ${symbol}`}
+      description='Checking withdrawable amount...'
+    />
+  )
+}

package/src/components/Lend/withdraw/2-ChooseAmount.tsx

@@ -1,50 +1,50 @@
-import { BigNumber } from 'ethers'
-import { downScale, PoolInfoType } from '@huma-finance/shared'
-import React, { useCallback, useState } from 'react'
-
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setStep, setWithdrawAmount } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ChooseAmountModal } from '../../ChooseAmountModal'
-
-type Props = {
-  lenderPosition: BigNumber
-  poolInfo: PoolInfoType
-}
-
-export function ChooseAmount({
-  lenderPosition,
-  poolInfo,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { poolUnderlyingToken } = poolInfo
-  const { symbol, decimals } = poolUnderlyingToken
-  const [currentAmount, setCurrentAmount] = useState(0)
-  const withdrawableAmount = downScale<number>(lenderPosition, decimals)
-
-  const handleChangeAmount = useCallback(
-    (newAmount: number) => {
-      setCurrentAmount(newAmount)
-      dispatch(setWithdrawAmount(newAmount))
-    },
-    [dispatch],
-  )
-
-  const handleAction = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
-  }, [dispatch])
-
-  return (
-    <ChooseAmountModal
-      title={`Withdraw ${symbol}`}
-      description1='Choose Amount'
-      sliderMax={Number(withdrawableAmount)}
-      currentAmount={currentAmount}
-      tokenSymbol={symbol}
-      handleChangeAmount={handleChangeAmount}
-      handleAction={handleAction}
-      actionText='withdraw'
-      hideTerms
-    />
-  )
-}
+import { BigNumber } from 'ethers'
+import { downScale, PoolInfoType } from '@huma-finance/shared'
+import React, { useCallback, useState } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep, setWithdrawAmount } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ChooseAmountModal } from '../../ChooseAmountModal'
+
+type Props = {
+  lenderPosition: BigNumber
+  poolInfo: PoolInfoType
+}
+
+export function ChooseAmount({
+  lenderPosition,
+  poolInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { poolUnderlyingToken } = poolInfo
+  const { symbol, decimals } = poolUnderlyingToken
+  const [currentAmount, setCurrentAmount] = useState(0)
+  const withdrawableAmount = downScale<number>(lenderPosition, decimals)
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      setCurrentAmount(newAmount)
+      dispatch(setWithdrawAmount(newAmount))
+    },
+    [dispatch],
+  )
+
+  const handleAction = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  return (
+    <ChooseAmountModal
+      title={`Withdraw ${symbol}`}
+      description1='Choose Amount'
+      sliderMax={Number(withdrawableAmount)}
+      currentAmount={currentAmount}
+      tokenSymbol={symbol}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+      actionText='withdraw'
+      hideTerms
+    />
+  )
+}

package/src/components/Lend/withdraw/3-Transfer.tsx

@@ -1,32 +1,32 @@
-import { PoolInfoType, toBigNumber, upScale } 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 { decimals } = poolInfo.poolUnderlyingToken
-  const { withdrawAmount } = useAppSelector(selectWidgetState)
-  const withdrawBigNumber = toBigNumber(upScale(withdrawAmount!, decimals))
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
-  }, [dispatch])
-
-  return (
-    <TxSendModal
-      poolInfo={poolInfo}
-      method='withdraw'
-      params={[withdrawBigNumber]}
-      handleSuccess={handleSuccess}
-    />
-  )
-}
+import { PoolInfoType, toBigNumber, upScale } 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 { decimals } = poolInfo.poolUnderlyingToken
+  const { withdrawAmount } = useAppSelector(selectWidgetState)
+  const withdrawBigNumber = toBigNumber(upScale(withdrawAmount!, decimals))
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  return (
+    <TxSendModal
+      poolInfo={poolInfo}
+      method='withdraw'
+      params={[withdrawBigNumber]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}