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

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

@@ -1,37 +1,346 @@
-import { PoolInfoV2, TrancheType } from '@huma-finance/shared'
-import React from 'react'
+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 { PersonaEvaluation } from './components/PersonaEvaluation'
-import { SecuritizeEvaluation } from './components/SecuritizeEvaluation'
+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
-  isUniTranche: boolean
-  changeTranche: (tranche: TrancheType) => void
   handleClose: () => void
 }
 
 export function Evaluation({
   poolInfo,
-  isUniTranche,
-  changeTranche,
   handleClose,
 }: Props): React.ReactElement | null {
-  if (poolInfo.KYC?.Securitize) {
-    return (
-      <SecuritizeEvaluation poolInfo={poolInfo} handleClose={handleClose} />
-    )
+  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-weight: 400;
+      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(() => {
+    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(
+        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)
+      }
+    }
   }
-  if (poolInfo.KYC?.Persona) {
+
+  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 (
-      <PersonaEvaluation
-        poolInfo={poolInfo}
-        handleClose={handleClose}
-        isUniTranche={isUniTranche}
-        changeTranche={changeTranche}
-      />
+      <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 null
+  return (
+    <LoadingModal
+      title='Lender Approval'
+      description={LoadingCopiesByType[loadingType].description}
+    />
+  )
 }

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

@@ -1,8 +1,9 @@
 import {
-  formatNumber,
   PoolInfoV2,
   TrancheType,
   UnderlyingTokenInfo,
+  formatNumber,
+  useLPConfigV2,
   usePoolSafeAllowanceV2,
   usePoolUnderlyingTokenBalanceV2,
 } from '@huma-finance/shared'
@@ -14,19 +15,18 @@ import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { InputAmountModal } from '../../InputAmountModal'
+import { LoadingModal } from '../../LoadingModal'
 
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
   selectedTranche: TrancheType | undefined
-  isUniTranche: boolean
 }
 
 export function ChooseAmount({
   poolInfo,
   poolUnderlyingToken,
   selectedTranche,
-  isUniTranche,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { account, provider } = useWeb3React()
@@ -46,6 +46,8 @@ export function ChooseAmount({
     balance,
     poolUnderlyingToken.decimals,
   )
+  const lpConfig = useLPConfigV2(poolInfo.poolName, provider)
+  const isUniTranche = lpConfig?.maxSeniorJuniorRatio === 0
 
   const handleChangeAmount = (newAmount: number) => {
     setCurrentAmount(newAmount)
@@ -63,6 +65,10 @@ export function ChooseAmount({
     dispatch(setStep(step))
   }
 
+  if (!lpConfig) {
+    return <LoadingModal title='Supply' />
+  }
+
   return (
     <InputAmountModal
       title='Enter Amount'

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

@@ -2,7 +2,6 @@ import {
   POOL_NAME,
   TrancheType,
   openInNewTab,
-  useLPConfigV2,
   useLenderApprovedV2,
   usePoolInfoV2,
   usePoolUnderlyingTokenInfoV2,
@@ -29,20 +28,17 @@ import { Notifications } from './7-Notifications'
  * Lend pool supply props
  * @typedef {Object} LendSupplyPropsV2
  * @property {POOL_NAME} poolName The name of the pool.
- * @property {boolean} shouldApproveAll To check if should approve both tranches.
  * @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 LendSupplyPropsV2 {
   poolName: keyof typeof POOL_NAME
-  shouldApproveAll?: boolean
   handleClose: () => void
   handleSuccess?: (blockNumber?: number) => void
 }
 
 export function LendSupplyV2({
   poolName: poolNameStr,
-  shouldApproveAll,
   handleClose,
   handleSuccess,
 }: LendSupplyPropsV2): React.ReactElement | null {
@@ -53,8 +49,7 @@ export function LendSupplyV2({
   const { step, errorMessage } = useAppSelector(selectWidgetState)
   const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
-  const lpConfig = useLPConfigV2(poolName, provider)
-  const isUniTranche = lpConfig?.maxSeniorJuniorRatio === 0
+
   const [lenderApprovedSenior] = useLenderApprovedV2(
     poolName,
     'senior',
@@ -72,21 +67,7 @@ export function LendSupplyV2({
     lenderApprovedSenior !== undefined && lenderApprovedJunior !== undefined
 
   useEffect(() => {
-    if (!step && poolInfo && lenderApproveStatusFetched && lpConfig) {
-      if (
-        shouldApproveAll &&
-        !isUniTranche &&
-        (!lenderApprovedJunior || !lenderApprovedSenior)
-      ) {
-        if (poolInfo.KYC) {
-          dispatch(setStep(WIDGET_STEP.Evaluation))
-        } else if (poolInfo.supplyLink) {
-          openInNewTab(poolInfo.supplyLink)
-          handleClose()
-        }
-        return
-      }
-
+    if (!step && poolInfo && lenderApproveStatusFetched) {
       if (lenderApprovedJunior && !lenderApprovedSenior) {
         setSelectedTranche('junior')
         dispatch(setStep(WIDGET_STEP.ChooseAmount))
@@ -117,22 +98,14 @@ export function LendSupplyV2({
   }, [
     dispatch,
     handleClose,
-    isUniTranche,
     lenderApproveStatusFetched,
     lenderApprovedJunior,
     lenderApprovedSenior,
-    lpConfig,
     poolInfo,
-    shouldApproveAll,
     step,
   ])
 
-  if (
-    !poolInfo ||
-    !poolUnderlyingToken ||
-    !lenderApproveStatusFetched ||
-    !lpConfig
-  ) {
+  if (!poolInfo || !poolUnderlyingToken || !lenderApproveStatusFetched) {
     return (
       <WidgetWrapper
         isOpen
@@ -159,19 +132,13 @@ export function LendSupplyV2({
         />
       )}
       {step === WIDGET_STEP.Evaluation && (
-        <Evaluation
-          poolInfo={poolInfo}
-          handleClose={handleClose}
-          isUniTranche={isUniTranche}
-          changeTranche={setSelectedTranche}
-        />
+        <Evaluation poolInfo={poolInfo} handleClose={handleClose} />
       )}
       {step === WIDGET_STEP.ChooseAmount && (
         <ChooseAmount
           poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
           selectedTranche={selectedTranche}
-          isUniTranche={isUniTranche}
         />
       )}
       {step === WIDGET_STEP.ApproveAllowance && (

package/src/components/Lend/withdrawV2/1-ConfirmTransfer.tsx

@@ -80,7 +80,7 @@ export function ConfirmTransfer({
     itemWrapper: css`
       margin-top: ${theme.spacing(9)};
       color: ${theme.palette.text.primary};
-      font-family: 'Uni-Neue-Regular';
+      font-weight: 400;
       font-size: 16px;
       line-height: 175%;
       letter-spacing: 0.15px;
@@ -93,7 +93,7 @@ export function ConfirmTransfer({
     `,
     itemValue: css`
       font-size: 20px;
-      font-family: 'Uni-Neue-Bold';
+      font-weight: 700;
     `,
     divider: css`
       border-color: #eae6f0;

package/src/components/Notifi/NotifiSubscriptionModal.tsx

@@ -158,7 +158,7 @@ export function NotifiSubscriptionModal({
   const styles = {
     disclaimer: css`
       ${theme.cssMixins.rowCentered};
-      font-family: 'Uni-Neue-Regular';
+      font-weight: 400;
       font-size: 16px;
       color: #a8a1b2;
       margin-top: ${theme.spacing(6)};

package/src/components/ReceivableBackedCreditLine/payment/1-ChoosePaymentType.tsx

@@ -31,7 +31,7 @@ export function ChoosePaymentType({
   const styles = {
     subTitle: css`
       color: ${theme.palette.text.primary} !important;
-      font-family: 'Uni-Neue-Regular';
+      font-weight: 400;
       font-size: 16px;
       line-height: 150%;
       letter-spacing: 0.15px;
@@ -46,7 +46,7 @@ export function ChoosePaymentType({
       margin-bottom: ${theme.spacing(1)};
       .MuiFormControlLabel-label {
         color: ${theme.palette.text.primary};
-        font-family: 'Uni-Neue-Regular';
+        font-weight: 400;
         font-size: 16px;
         line-height: 150%;
         letter-spacing: 0.15px;

package/src/components/SignIn.tsx

@@ -24,7 +24,7 @@ export function SignIn(): React.ReactElement {
     content: css`
       ${theme.cssMixins.rowHCentered};
       margin-top: ${theme.spacing(4)};
-      font-family: 'Uni-Neue-Regular';
+      font-weight: 400;
       font-size: 16px;
       line-height: 24px;
       color: #49505b;

package/src/components/SuperfluidFactoring/index.tsx

@@ -5,11 +5,11 @@ import {
   POOL_NAME,
   POOL_TYPE,
   PoolMap,
-  PoolSubgraphMap,
   useFactoring,
 } from '@huma-finance/shared'
 import React from 'react'
 
+import { SubgraphService } from '@huma-finance/sdk'
 import { Activity } from '../Activity'
 import { ApolloWrapper } from '../ApolloWrapper'
 import { StreamFactoringBorrow } from '../StreamFactoring/borrow'
@@ -57,7 +57,7 @@ export function SuperfluidFactoring(): React.ReactElement {
           loading={loading && actionType === 'borrow'}
         />
       </ApolloWrapper>
-      <ApolloWrapper uri={PoolSubgraphMap[chainId!]?.subgraph}>
+      <ApolloWrapper uri={SubgraphService.getSubgraphUrlForChainId(chainId!)}>
         {poolInfo && (
           <Activity
             poolInfo={poolInfo}

package/src/components/TxDoneModal.tsx

@@ -33,7 +33,7 @@ export function TxDoneModal({
     `,
     content: css`
       ${theme.cssMixins.colVCentered};
-      font-family: 'Uni-Neue-Regular';
+      font-weight: 400;
       font-size: 18px;
       color: #423b46;
       margin-top: ${theme.spacing(8)};

package/src/components/WrapperModal.tsx

@@ -21,14 +21,14 @@ export function WrapperModal({
     `,
     header: css`
       ${theme.cssMixins.rowHCentered};
-      font-family: 'Uni-Neue-Bold';
+      font-weight: 700;
       font-size: 20px;
       margin-top: ${theme.spacing(-0.5)};
     `,
     content: css`
       ${theme.cssMixins.rowHCentered};
       margin-top: ${theme.spacing(4)};
-      font-family: 'Uni-Neue-Regular';
+      font-weight: 400;
       font-size: 16px;
       line-height: 24px;
       color: #49505b;

package/src/components/humaModal/HumaModal.tsx

@@ -48,7 +48,6 @@ export function HumaModal({
 
   return (
     <Dialog
-      id='huma-modal'
       disableScrollLock
       maxWidth={false}
       fullScreen={isXsSize}

package/src/index.tsx

@@ -1,5 +1,3 @@
-import './index.css'
-
 import { JsonRpcProvider } from '@ethersproject/providers'
 import {
   Provider as Web3Provider,

package/src/store/widgets.reducers.ts

@@ -108,6 +108,7 @@ export const widgetSlice = createSlice({
         payload,
       }: PayloadAction<{ errorMessage: string; errorReason?: string }>,
     ) => {
+      console.trace()
       state.errorMessage = payload.errorMessage
       state.errorReason = payload.errorReason
       state.step = WIDGET_STEP.Error

package/src/theme/components.ts

@@ -26,7 +26,7 @@ export function components(theme: Theme): ThemeOptions['components'] {
           },
         },
         root: {
-          fontFamily: 'Uni-Neue-Bold',
+          fontWeight: '700',
           fontSize: '15px',
           borderRadius: '32px',
           '&.MuiButton-containedPrimary': {