@huma-finance/widgets 0.0.59-beta.480 → 0.0.59-beta.482

package/src/components/Lend/supplyV2/components/PersonaEvaluation.tsx

@@ -0,0 +1,361 @@
+import {
+  checkIsDev,
+  IdentityServiceV2,
+  IdentityVerificationStatusV2,
+  KYCCopy,
+  PoolInfoV2,
+  TrancheType,
+  useAuthErrorHandling,
+  VerificationStatusResultV2,
+} from '@huma-finance/shared'
+import { Box, css, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import Persona, { Client } from 'persona'
+import { useAppDispatch } from '../../../../hooks/useRedux'
+import { setError, setStep } from '../../../../store/widgets.reducers'
+import { BottomButton } from '../../../BottomButton'
+import { ApproveLenderImg } from '../../../images'
+import { LoadingModal } from '../../../LoadingModal'
+import { WrapperModal } from '../../../WrapperModal'
+import { WIDGET_STEP } from '../../../../store/widgets.store'
+
+const LoadingCopiesByType: {
+  [key: string]: {
+    description: string
+  }
+} = {
+  verificationStatus: {
+    description: `Checking your verification status...`,
+  },
+  startKYC: {
+    description: `Starting KYC...`,
+  },
+  approveLender: {
+    description: `Approving as lender...`,
+  },
+}
+
+type Props = {
+  poolInfo: PoolInfoV2
+  isUniTranche: boolean
+  changeTranche: (tranche: TrancheType) => void
+  handleClose: () => void
+}
+
+export function PersonaEvaluation({
+  poolInfo,
+  isUniTranche,
+  changeTranche,
+  handleClose,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const isDev = checkIsDev()
+  const dispatch = useAppDispatch()
+  const { account, chainId } = useWeb3React()
+  const {
+    errorType,
+    setError: setAuthError,
+    isWalletOwnershipVerified,
+    isWalletOwnershipVerificationRequired,
+  } = useAuthErrorHandling(isDev)
+  const KYCCopies = poolInfo.KYC!.Persona!
+  const [loadingType, setLoadingType] = useState<
+    'verificationStatus' | 'startKYC' | 'approveLender' | undefined
+  >()
+  const [kycCopy, setKYCCopy] = useState<KYCCopy>(KYCCopies.verifyIdentity)
+  const [inquiryId, setInquiryId] = useState<string | undefined>()
+  const [sessionToken, setSessionToken] = useState<string | undefined>()
+  const [verificationStatus, setVerificationStatus] = useState<
+    VerificationStatusResultV2 | undefined
+  >()
+  const [showPersonaClient, setShowPersonaClient] = useState<boolean>(false)
+  const isKYCCompletedRef = useRef<boolean>(false)
+  const isActionOngoingRef = useRef<boolean>(false)
+  const isKYCResumedRef = useRef<boolean>(false)
+
+  const approveLender = useCallback(async () => {
+    try {
+      isActionOngoingRef.current = true
+      setLoadingType('approveLender')
+      await IdentityServiceV2.approveLender(
+        account!,
+        chainId!,
+        poolInfo.juniorTrancheVault,
+        isDev,
+      )
+      if (!isUniTranche) {
+        await IdentityServiceV2.approveLender(
+          account!,
+          chainId!,
+          poolInfo.seniorTrancheVault,
+          isDev,
+        )
+      }
+      if (isUniTranche) {
+        changeTranche('junior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+      } else {
+        dispatch(setStep(WIDGET_STEP.ChooseTranche))
+      }
+    } finally {
+      isActionOngoingRef.current = false
+      setLoadingType(undefined)
+    }
+  }, [
+    account,
+    chainId,
+    changeTranche,
+    dispatch,
+    isDev,
+    isUniTranche,
+    poolInfo.juniorTrancheVault,
+    poolInfo.seniorTrancheVault,
+  ])
+
+  const checkVerificationStatus = useCallback(async () => {
+    if (isActionOngoingRef.current || isKYCResumedRef.current) {
+      return
+    }
+    try {
+      if (account && chainId) {
+        isActionOngoingRef.current = true
+        setLoadingType('verificationStatus')
+        const verificationStatus =
+          await IdentityServiceV2.getVerificationStatusV2(
+            account,
+            chainId,
+            isDev,
+          )
+        setVerificationStatus(verificationStatus)
+        setInquiryId(verificationStatus.personaInquiryId)
+
+        switch (verificationStatus.status) {
+          case IdentityVerificationStatusV2.NOT_STARTED: {
+            const startVerificationResult =
+              await IdentityServiceV2.startVerification(account, chainId, isDev)
+            setInquiryId(startVerificationResult.personaInquiryId)
+            setKYCCopy(KYCCopies.verifyIdentity)
+            setLoadingType(undefined)
+            break
+          }
+
+          case IdentityVerificationStatusV2.CREATED: {
+            setKYCCopy(KYCCopies.verifyIdentity)
+            setLoadingType(undefined)
+            break
+          }
+
+          case IdentityVerificationStatusV2.PENDING: {
+            if (!isKYCCompletedRef.current) {
+              const resumeVerificationResult =
+                await IdentityServiceV2.resumeVerification(
+                  account,
+                  chainId,
+                  isDev,
+                )
+              verificationStatus.status = resumeVerificationResult.status
+              setVerificationStatus(verificationStatus)
+              setSessionToken(resumeVerificationResult.sessionToken)
+              setLoadingType(undefined)
+              isKYCResumedRef.current = true
+            } else {
+              setLoadingType('verificationStatus')
+            }
+            setKYCCopy(KYCCopies.verifyIdentity)
+            break
+          }
+
+          case IdentityVerificationStatusV2.EXPIRED: {
+            const resumeVerificationResult =
+              await IdentityServiceV2.resumeVerification(
+                account,
+                chainId,
+                isDev,
+              )
+            verificationStatus.status = resumeVerificationResult.status
+            setVerificationStatus(verificationStatus)
+            setSessionToken(resumeVerificationResult.sessionToken)
+            setKYCCopy(KYCCopies.verifyIdentity)
+            setLoadingType(undefined)
+            isKYCResumedRef.current = true
+            break
+          }
+
+          case IdentityVerificationStatusV2.APPROVED: {
+            await approveLender()
+            break
+          }
+
+          case IdentityVerificationStatusV2.DECLINED: {
+            setKYCCopy(KYCCopies.verificationDeclined)
+            setLoadingType(undefined)
+            break
+          }
+
+          case IdentityVerificationStatusV2.NEEDS_REVIEW: {
+            setKYCCopy(KYCCopies.verificationNeedsReview)
+            setLoadingType(undefined)
+            break
+          }
+
+          default:
+            break
+        }
+      }
+    } catch (e: unknown) {
+      setAuthError(e)
+    } finally {
+      isActionOngoingRef.current = false
+    }
+  }, [KYCCopies, account, approveLender, chainId, isDev, setAuthError])
+
+  useEffect(() => {
+    checkVerificationStatus()
+  }, [checkVerificationStatus])
+
+  useEffect(() => {
+    if (isWalletOwnershipVerificationRequired && isWalletOwnershipVerified) {
+      checkVerificationStatus()
+    }
+  }, [
+    checkVerificationStatus,
+    isWalletOwnershipVerificationRequired,
+    isWalletOwnershipVerified,
+  ])
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (
+        verificationStatus?.status &&
+        [
+          IdentityVerificationStatusV2.CREATED,
+          IdentityVerificationStatusV2.PENDING,
+        ].includes(verificationStatus.status)
+      ) {
+        checkVerificationStatus()
+      }
+    }, 10 * 1000)
+    // eslint-disable-next-line consistent-return
+    return () => clearInterval(interval)
+  }, [checkVerificationStatus, verificationStatus?.status])
+
+  useEffect(() => {
+    if (errorType === 'NotSignedIn') {
+      setLoadingType(undefined)
+      setKYCCopy(KYCCopies.signInRequired)
+    } else if (errorType === 'UserRejected') {
+      dispatch(
+        setError({
+          errorMessage: 'User has rejected the transaction.',
+        }),
+      )
+    } else if (errorType === 'Other') {
+      dispatch(
+        setError({
+          errorMessage: 'Something went wrong. Please try again later.',
+        }),
+      )
+    }
+  }, [KYCCopies.signInRequired, dispatch, errorType])
+
+  useEffect(() => {
+    const modalElement = document.getElementById('huma-modal')
+    if (modalElement) {
+      modalElement.style.visibility = showPersonaClient ? 'hidden' : 'visible'
+    }
+  }, [showPersonaClient])
+
+  const startKYC = async () => {
+    isActionOngoingRef.current = true
+    isKYCResumedRef.current = false
+    setLoadingType('startKYC')
+    const client: Client = new Persona.Client({
+      inquiryId,
+      sessionToken,
+      onReady: () => {
+        client.open()
+        setShowPersonaClient(true)
+      },
+      onComplete: () => {
+        isKYCCompletedRef.current = true
+        isActionOngoingRef.current = false
+        setShowPersonaClient(false)
+        checkVerificationStatus()
+      },
+      onCancel: () => {
+        isActionOngoingRef.current = false
+        setShowPersonaClient(false)
+        setLoadingType(undefined)
+      },
+      onError: () => {
+        isActionOngoingRef.current = false
+        setShowPersonaClient(false)
+        setLoadingType(undefined)
+      },
+    })
+  }
+
+  const handleAction = () => {
+    if (verificationStatus) {
+      switch (verificationStatus.status) {
+        case IdentityVerificationStatusV2.NOT_STARTED:
+        case IdentityVerificationStatusV2.CREATED:
+        case IdentityVerificationStatusV2.PENDING:
+        case IdentityVerificationStatusV2.EXPIRED:
+          startKYC()
+          break
+
+        case IdentityVerificationStatusV2.DECLINED:
+        case IdentityVerificationStatusV2.NEEDS_REVIEW:
+          handleClose()
+          break
+
+        default:
+          break
+      }
+    }
+  }
+
+  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;
+    `,
+  }
+
+  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={handleAction}>
+            {kycCopy.buttonText}
+          </BottomButton>
+        )}
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <LoadingModal
+      title='Lender Approval'
+      description={LoadingCopiesByType[loadingType].description}
+    />
+  )
+}

package/src/components/Lend/supplyV2/components/SecuritizeEvaluation.tsx

@@ -0,0 +1,345 @@
+import {
+  CHAINS,
+  checkIsDev,
+  configUtil,
+  DocSignatureStatus,
+  IdentityService,
+  KYC_PROVIDER,
+  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 SecuritizeEvaluation({
+  poolInfo,
+  handleClose,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const isDev = checkIsDev()
+  const dispatch = useAppDispatch()
+  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!.Securitize!
+  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 { 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(() => {
+    setKYCCopy(KYCCopies.verifyIdentity)
+    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(
+        KYC_PROVIDER.Securitize,
+        chainId!,
+      )
+      const originUrl = window.location.href.split('?')[0]
+      const redirectUrl = `${originUrl}?poolName=${poolInfo.poolName}&kycProvider=${KYC_PROVIDER.Securitize}&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)}
+    />
+  )
+
+  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;
+    `,
+  }
+
+  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}
+    />
+  )
+}