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

package/src/components/Lend/supplyV2/2-Evaluation.tsx

@@ -0,0 +1,345 @@
+import {
+  CHAINS,
+  checkIsDev,
+  configUtil,
+  DocSignatureStatus,
+  IdentityService,
+  KYCCopy,
+  PoolInfoV2,
+  timeUtil,
+  useAuthErrorHandling,
+  useParamsSearch,
+  VerificationStatusResult,
+} from '@huma-finance/shared'
+import { Box, css, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setError } from '../../../store/widgets.reducers'
+import { BottomButton } from '../../BottomButton'
+import { HumaSnackBar } from '../../HumaSnackBar'
+import { ApproveLenderImg } from '../../images'
+import { LoadingModal } from '../../LoadingModal'
+import { WrapperModal } from '../../WrapperModal'
+
+const LoadingCopiesByType: {
+  [key: string]: {
+    description: string
+  }
+} = {
+  verificationStatus: {
+    description: `Checking your verification status...`,
+  },
+  sendDocSignatureLink: {
+    description: `Sending signature link...`,
+  },
+}
+
+type Props = {
+  poolInfo: PoolInfoV2
+  handleClose: () => void
+}
+
+export function Evaluation({
+  poolInfo,
+  handleClose,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const isDev = checkIsDev()
+  const { account, chainId } = useWeb3React()
+  const { kycProvider, code, kycPool } = useParamsSearch()
+  const {
+    isWalletOwnershipVerified,
+    setError: setAuthError,
+    error: authError,
+  } = useAuthErrorHandling(isDev)
+  const [loadingType, setLoadingType] = useState<
+    'verificationStatus' | 'sendDocSignatureLink'
+  >()
+  const KYCCopies = poolInfo.KYC!
+  const [kycCopy, setKYCCopy] = useState<KYCCopy>(KYCCopies.verifyIdentity)
+  const [KYCVerifyStatus, setKYCVerifyStatus] =
+    useState<VerificationStatusResult>()
+  const [docSignatureStatus, setDocSignatureStatus] =
+    useState<DocSignatureStatus['status']>()
+  const docSignatureCompleted = docSignatureStatus === 'completed'
+  const [openSnackBar, setOpenSnackBar] = useState<boolean>(false)
+
+  const styles = {
+    iconWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: ${theme.spacing(8)};
+      & > img {
+        width: 144px;
+      }
+    `,
+    description: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: ${theme.spacing(10)};
+      padding: ${theme.spacing(0, 2)};
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #a8a1b2;
+    `,
+  }
+
+  const { envelopeKey, envelopeLastQueryTimeKey, envelopeDocuSignStatusKey } =
+    useMemo(() => {
+      const envelopeKey = `${poolInfo.pool.toLowerCase()}-${account?.toLowerCase()}`
+      const envelopeLastQueryTimeKey = `${envelopeKey}-last-query-time`
+      const envelopeDocuSignStatusKey = `${envelopeKey}-docuSign-status`
+      return {
+        envelopeKey,
+        envelopeLastQueryTimeKey,
+        envelopeDocuSignStatusKey,
+      }
+    }, [account, poolInfo.pool])
+
+  // DocuSign GET requests to any specific URL can be called not more often than once every 15 minutes.
+  // https://developers.docusign.com/platform/api-guidelines/#:~:text=Polling,not%20once%20every%2010%20minutes
+  const checkGetDocSignatureStatusIsAvailable = useCallback(() => {
+    const lastQueryTime = localStorage.getItem(envelopeLastQueryTimeKey)
+    if (!lastQueryTime) {
+      return true
+    }
+    const lastQueryTimeNumber = Number(lastQueryTime)
+    const now = timeUtil.getUnixTimestamp()
+    const diff = now - lastQueryTimeNumber
+    const fifteenMinutes = 15 * 60
+    return diff > fifteenMinutes
+  }, [envelopeLastQueryTimeKey])
+
+  useEffect(() => {
+    const docuSignStatus = localStorage.getItem(envelopeDocuSignStatusKey)
+    setDocSignatureStatus(docuSignStatus as DocSignatureStatus['status'])
+    if (docuSignStatus === 'completed') {
+      setKYCCopy(KYCCopies.docUnderReview)
+      return
+    }
+
+    const fetchData = async () => {
+      try {
+        if (kycProvider && kycPool && account && chainId) {
+          setLoadingType('verificationStatus')
+          await IdentityService.onboard(
+            account,
+            code as string,
+            kycPool as string,
+            chainId,
+            isDev,
+          )
+        }
+      } catch (e) {
+        try {
+          setAuthError(e)
+          setKYCCopy(KYCCopies.signInRequired)
+        } catch (e) {
+          // The repeated call will throw an error of 401, so we can ignore it.
+          console.log(e)
+        }
+      }
+
+      try {
+        if (account && chainId) {
+          setLoadingType('verificationStatus')
+          const verificationStatus =
+            await IdentityService.getVerificationStatus(
+              account,
+              poolInfo.pool,
+              chainId,
+              isDev,
+            )
+          setKYCVerifyStatus(verificationStatus)
+          if (verificationStatus.isVerified) {
+            const envelopeId = localStorage.getItem(envelopeKey)
+            if (!envelopeId) {
+              setKYCCopy(KYCCopies.emailSignatureLink)
+            } else if (!checkGetDocSignatureStatusIsAvailable()) {
+              setKYCCopy(KYCCopies.resendSignatureLink)
+            } else {
+              const { status } = await IdentityService.getDocSignatureStatus(
+                envelopeId,
+                chainId,
+                isDev,
+              )
+              localStorage.setItem(
+                envelopeLastQueryTimeKey,
+                String(timeUtil.getUnixTimestamp()),
+              )
+              localStorage.setItem(envelopeDocuSignStatusKey, status)
+              setDocSignatureStatus(status)
+              if (status === 'completed') {
+                setKYCCopy(KYCCopies.docUnderReview)
+                // For voided and declined status, we need to send a new link
+              } else if (['voided', 'declined'].includes(status)) {
+                localStorage.removeItem(envelopeKey)
+                localStorage.removeItem(envelopeLastQueryTimeKey)
+                setKYCCopy(KYCCopies.emailSignatureLink)
+              } else {
+                setKYCCopy(KYCCopies.resendSignatureLink)
+              }
+            }
+          } else {
+            setKYCCopy(KYCCopies.verifyIdentity)
+          }
+        }
+      } catch (e: unknown) {
+        try {
+          setAuthError(e)
+          setKYCCopy(KYCCopies.signInRequired)
+        } catch (e) {
+          console.error(e)
+          dispatch(
+            setError({
+              errorMessage: 'Something went wrong, please try again later.',
+            }),
+          )
+        }
+      } finally {
+        setLoadingType(undefined)
+      }
+    }
+    fetchData()
+  }, [
+    KYCCopies.docUnderReview,
+    KYCCopies.emailSignatureLink,
+    KYCCopies.resendSignatureLink,
+    KYCCopies.signInRequired,
+    KYCCopies.verifyIdentity,
+    account,
+    chainId,
+    checkGetDocSignatureStatusIsAvailable,
+    code,
+    dispatch,
+    envelopeDocuSignStatusKey,
+    envelopeKey,
+    envelopeLastQueryTimeKey,
+    isDev,
+    kycPool,
+    kycProvider,
+    poolInfo.pool,
+    setAuthError,
+    isWalletOwnershipVerified,
+  ])
+
+  useEffect(() => {
+    if (
+      authError &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      [4001, 'ACTION_REJECTED'].includes((authError as any).code)
+    ) {
+      dispatch(
+        setError({
+          errorMessage: 'User has rejected the transaction.',
+        }),
+      )
+    }
+  }, [authError, dispatch])
+
+  const approveLender = async () => {
+    if (docSignatureCompleted) {
+      handleClose()
+      return
+    }
+
+    const { isNotOnboarded, isVerified } = KYCVerifyStatus || {}
+
+    if (!isVerified) {
+      const issuerId = CHAINS[chainId!].isTestnet
+        ? '53a66b32-583e-40e7-ba90-baf516d2cadd'
+        : '5557baf5-d3c2-4c80-b522-c05a11c6e586'
+      const baseUrl = configUtil.getKYCProviderBaseUrl(
+        poolInfo.KYC!.provider,
+        chainId!,
+      )
+      const originUrl = window.location.href.split('?')[0]
+      const redirectUrl = `${originUrl}?poolName=${
+        poolInfo.poolName
+      }&kycProvider=${poolInfo.KYC!.provider}&kycPool=${poolInfo.pool}`
+      const providerAuthorizeUrl = `${baseUrl}/#/authorize?issuerId=${issuerId}&scope=details&details=verification&redirectUrl=${redirectUrl}`
+      window.location.href = isNotOnboarded ? providerAuthorizeUrl : baseUrl
+    } else {
+      const envelopeId = localStorage.getItem(envelopeKey)
+      try {
+        setLoadingType('sendDocSignatureLink')
+        if (!envelopeId) {
+          const { envelopeId } = await IdentityService.requestDocSignature(
+            account!,
+            chainId!,
+            isDev,
+          )
+          localStorage.setItem(envelopeKey, envelopeId)
+          localStorage.setItem(
+            envelopeLastQueryTimeKey,
+            String(timeUtil.getUnixTimestamp()),
+          )
+          setOpenSnackBar(true)
+          setKYCCopy(KYCCopies.resendSignatureLink)
+        } else {
+          await IdentityService.resendDocSignatureLink(
+            envelopeId,
+            chainId!,
+            isDev,
+          )
+          setOpenSnackBar(true)
+        }
+      } catch (e: unknown) {
+        try {
+          const { envelopeId } = await IdentityService.requestDocSignature(
+            account!,
+            chainId!,
+            isDev,
+          )
+          localStorage.setItem(envelopeKey, envelopeId)
+          localStorage.setItem(
+            envelopeLastQueryTimeKey,
+            String(timeUtil.getUnixTimestamp()),
+          )
+          setOpenSnackBar(true)
+          setKYCCopy(KYCCopies.resendSignatureLink)
+        } catch (e) {
+          setAuthError(e)
+          setKYCCopy(KYCCopies.signInRequired)
+        }
+      } finally {
+        setLoadingType(undefined)
+      }
+    }
+  }
+
+  const getEmailLinkSentSnackbar = () => (
+    <HumaSnackBar
+      open={openSnackBar}
+      title='Signature Link Sent'
+      message='The secure signature session link has been sent to you via email.'
+      severity='success'
+      onClose={() => setOpenSnackBar(false)}
+    />
+  )
+
+  if (!loadingType) {
+    return (
+      <WrapperModal title={kycCopy.title}>
+        <Box css={styles.iconWrapper}>
+          <img src={ApproveLenderImg} alt='approve-lender' />
+        </Box>
+        <Box css={styles.description}>{kycCopy.description}</Box>
+        {Boolean(kycCopy.buttonText) && (
+          <BottomButton variant='contained' onClick={approveLender}>
+            {kycCopy.buttonText}
+          </BottomButton>
+        )}
+        {getEmailLinkSentSnackbar()}
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <LoadingModal
+      title='Lender Approval'
+      description={LoadingCopiesByType[loadingType].description}
+    />
+  )
+}

package/src/components/Lend/supplyV2/3-ChooseAmount.tsx

@@ -0,0 +1,122 @@
+import {
+  PoolInfoV2,
+  TrancheType,
+  UnderlyingTokenInfo,
+  usePoolSafeAllowanceV2,
+} from '@huma-finance/shared'
+import { Box, css, TextField, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber, ethers } from 'ethers'
+import React, { useState } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { BottomButton } from '../../BottomButton'
+import { NumericFormatCustom } from '../../NumericFormatCustom'
+import { WrapperModal } from '../../WrapperModal'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  selectedTranche: TrancheType | undefined
+}
+
+export function ChooseAmount({
+  poolInfo,
+  poolUnderlyingToken,
+  selectedTranche,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const { symbol, decimals } = poolUnderlyingToken
+  const [currentAmount, setCurrentAmount] = useState<number | string>(0)
+  const { allowance = BigNumber.from(0) } = usePoolSafeAllowanceV2(
+    poolInfo.poolName,
+    account,
+    provider,
+  )
+  const [inputTouched, setInputTouched] = useState(false)
+
+  const styles = {
+    inputAmountWrapper: css`
+      margin-bottom: ${theme.spacing(1)};
+      margin-top: ${theme.spacing(16)};
+    `,
+    inputAmount: css`
+      ${theme.cssMixins.rowSpaceBetweened};
+    `,
+    inputField: css`
+      input {
+        width: 100%;
+        color: ${theme.palette.text.primary};
+        font-family: 'Uni-Neue-Black';
+        font-size: 40px;
+        line-height: 133.4%;
+      }
+    `,
+    inputFieldSymbol: css`
+      color: ${theme.palette.text.primary};
+      font-family: 'Uni-Neue-Black';
+      font-size: 40px;
+      line-height: 133.4%;
+    `,
+  }
+
+  const handleChangeAmount = (
+    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => {
+    setInputTouched(true)
+    const newAmount = event.target.value
+    setCurrentAmount(newAmount)
+    dispatch(setSupplyAmount(Number(newAmount)))
+  }
+
+  const handleAction = () => {
+    const currentAmountBN = ethers.utils.parseUnits(
+      String(currentAmount),
+      decimals,
+    )
+    const step = currentAmountBN.gt(allowance)
+      ? WIDGET_STEP.ApproveAllowance
+      : WIDGET_STEP.Transfer
+    dispatch(setStep(step))
+  }
+
+  return (
+    <WrapperModal
+      title='Enter Amount'
+      subTitle={`Supplying ${symbol} with ${selectedTranche}`}
+    >
+      <Box css={styles.inputAmountWrapper}>
+        <Box css={styles.inputAmount}>
+          <TextField
+            css={styles.inputField}
+            value={!inputTouched && currentAmount === 0 ? '' : currentAmount}
+            onChange={handleChangeAmount}
+            InputProps={{
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              inputComponent: NumericFormatCustom as any,
+              endAdornment: (
+                <Box component='span' css={styles.inputFieldSymbol}>
+                  {symbol}
+                </Box>
+              ),
+            }}
+            placeholder='0'
+            variant='standard'
+          />
+        </Box>
+      </Box>
+
+      <BottomButton
+        variant='contained'
+        onClick={handleAction}
+        disabled={Number(currentAmount) <= 0}
+      >
+        SUPPLY
+      </BottomButton>
+    </WrapperModal>
+  )
+}

package/src/components/Lend/supplyV2/4-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 spender = poolInfo.poolSafe
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  return (
+    <ApproveAllowanceModalV2
+      poolInfo={poolInfo}
+      poolUnderlyingToken={poolUnderlyingToken}
+      spender={spender}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/Lend/supplyV2/5-Transfer.tsx

@@ -0,0 +1,59 @@
+import {
+  PoolInfoV2,
+  useTrancheVaultContractV2,
+  TrancheType,
+  UnderlyingTokenInfo,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { ethers } from 'ethers'
+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 { TxSendModalV2 } from '../../TxSendModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  trancheType: TrancheType
+}
+
+export function Transfer({
+  poolInfo,
+  poolUnderlyingToken,
+  trancheType,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const { supplyAmount } = useAppSelector(selectWidgetState)
+  const { decimals } = poolUnderlyingToken
+  const supplyBigNumber = ethers.utils.parseUnits(
+    String(supplyAmount),
+    decimals,
+  )
+  const trancheVaultContract = useTrancheVaultContractV2(
+    poolInfo.poolName,
+    trancheType,
+    provider,
+    account,
+  )
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  if (!trancheVaultContract || !account) {
+    return null
+  }
+
+  return (
+    <TxSendModalV2
+      contract={trancheVaultContract}
+      method='deposit'
+      params={[supplyBigNumber, account]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/Lend/supplyV2/6-Success.tsx

@@ -0,0 +1,79 @@
+import {
+  decodeLogs,
+  downScale,
+  formatMoney,
+  PoolInfoV2,
+  sendTxAtom,
+  TRANSFER_ABI,
+  UnderlyingTokenInfo,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { useAtom } from 'jotai'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+
+import {
+  useDoesChainSupportNotifi,
+  useIsFirstTimeNotifiUser,
+} from '../../../hooks/useNotifi'
+import { TxDoneModal } from '../../TxDoneModal'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  handleAction: () => void
+}
+
+export function Success({
+  poolInfo,
+  poolUnderlyingToken,
+  handleAction,
+}: Props): React.ReactElement {
+  const dispatch = useDispatch()
+  const { account, chainId } = useWeb3React()
+  const [{ txReceipt }] = useAtom(sendTxAtom)
+  const { symbol, decimals, address } = poolUnderlyingToken
+  const [supplyAmount, setSupplyAmount] = useState<string | undefined>()
+  const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
+  const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
+  const hasNextStep = isFirstTimeNotifiUser
+
+  useEffect(() => {
+    if (txReceipt) {
+      const events = decodeLogs(txReceipt.logs, TRANSFER_ABI)
+      if (events) {
+        events.forEach((event) => {
+          const { from, to, value } = event.args
+          if (
+            from.toLowerCase() === account?.toLowerCase() &&
+            to.toLowerCase() === poolInfo.poolSafe.toLowerCase()
+          ) {
+            setSupplyAmount(downScale(value.toString(), decimals))
+          }
+        })
+      }
+    }
+  }, [account, address, decimals, poolInfo.poolSafe, txReceipt])
+
+  const setupNotificationsOrClose = useCallback(() => {
+    if (isFirstTimeNotifiUser && notifiChainSupported) {
+      dispatch(setStep(WIDGET_STEP.Notifications))
+    } else {
+      handleAction()
+    }
+  }, [dispatch, handleAction, isFirstTimeNotifiUser, notifiChainSupported])
+
+  const content = [
+    `You successfully supplied ${formatMoney(supplyAmount)} ${symbol}.`,
+  ]
+
+  return (
+    <TxDoneModal
+      handleAction={setupNotificationsOrClose}
+      content={content}
+      buttonText={hasNextStep ? "WHAT'S NEXT" : undefined}
+    />
+  )
+}

package/src/components/Lend/supplyV2/7-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} />
+}