@huma-finance/widgets 0.0.41 → 0.0.42-beta.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.41",
+  "version": "0.0.42-beta.91+a796d63",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.41",
-    "@huma-finance/shared": "^0.0.41",
+    "@huma-finance/sdk": "^0.0.42-beta.91+a796d63",
+    "@huma-finance/shared": "^0.0.42-beta.91+a796d63",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -194,5 +194,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "2e59758ee0f4bf6cc9dd6c031f2a61a066d2fdfe"
+  "gitHead": "a796d634e328eddb1bb0939c9f20bf4d4d125d0d"
 }

package/src/components/CreditLine/borrow/1-Evaluation.tsx

@@ -9,6 +9,7 @@ import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { CheckCircleIcon, CheckGreenIcon } from '../../icons'
 import spinner from '../../icons/spinner.gif'
+import { SignIn } from '../../SignIn'
 
 type Props = {
   poolInfo: PoolInfoType
@@ -20,7 +21,11 @@ export function Evaluation({
   handleApprove,
 }: Props): React.ReactElement {
   const theme = useTheme()
-  const { checkingEA } = useEA()
+  const {
+    checkingEA,
+    isWalletOwnershipVerificationRequired,
+    isWalletOwnershipVerified,
+  } = useEA()
   const dispatch = useAppDispatch()
   const { account, chainId } = useWeb3React()
   const [status, setStatus] = useState<'checking' | 'success'>('checking')
@@ -47,6 +52,7 @@ export function Evaluation({
     handleApprove,
     poolInfo.assetAddress,
     poolInfo.pool,
+    isWalletOwnershipVerified,
   ])
 
   const styles = {
@@ -115,6 +121,10 @@ export function Evaluation({
     dispatch(setStep(WIDGET_STEP.ChooseAmount))
   }
 
+  if (isWalletOwnershipVerificationRequired) {
+    return <SignIn />
+  }
+
   return (
     <Box css={styles.wrapper}>
       <Typography variant='h6' css={styles.header}>

package/src/components/InvoiceFactoring/borrow/1-Evaluation.tsx

@@ -5,6 +5,7 @@ import React, { useEffect } from 'react'
 import useEA from '../../../hooks/useEA'
 import { LoadingModal } from '../../LoadingModal'
 import { WIDGET_STEP } from '../../../store/widgets.store'
+import { SignIn } from '../../SignIn'
 
 type Props = {
   poolInfo: PoolInfoType
@@ -12,7 +13,11 @@ type Props = {
 }
 
 export function Evaluation({ poolInfo, tokenId }: Props): React.ReactElement {
-  const { checkingEA } = useEA()
+  const {
+    checkingEA,
+    isWalletOwnershipVerificationRequired,
+    isWalletOwnershipVerified,
+  } = useEA()
   const { account, chainId } = useWeb3React()
 
   useEffect(() => {
@@ -38,8 +43,12 @@ export function Evaluation({ poolInfo, tokenId }: Props): React.ReactElement {
     poolInfo.assetAddress,
     poolInfo.pool,
     tokenId,
+    isWalletOwnershipVerified,
   ])
 
+  if (isWalletOwnershipVerificationRequired) {
+    return <SignIn />
+  }
   return (
     <LoadingModal
       title='Checking Invoice'

package/src/components/Lend/supply/1-Evaluation/EvaluationKYC.tsx

@@ -1,12 +1,13 @@
 import {
+  CHAINS,
   configUtil,
   DocSignatureStatus,
   IdentityService,
   PoolInfoType,
   timeUtil,
-  VerificationStatusResult,
-  CHAINS,
+  useAuthErrorHandling,
   useParamsSearch,
+  VerificationStatusResult,
 } from '@huma-finance/shared'
 import { Box, css, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
@@ -26,11 +27,16 @@ const KYCProvider = 'Securitize'
 type KYCCopy = {
   title: string
   description: string
-  buttonText: string
+  buttonText?: string
 }
 
 // TODO: Add copies for the other pools. Currently only the Jia pool is using the KYC process.
 const JiaPoolCopies = {
+  signInRequired: {
+    title: 'Sign In',
+    description:
+      'Please sign in to verify that you are the owner of the wallet.',
+  },
   verifyIdentity: {
     title: 'Verify Identity',
     description: `This pool is only available to accredited investors at the moment, with minimum investments of $10,000. Please complete identity verification and investor accreditation via ${KYCProvider}.`,
@@ -81,6 +87,8 @@ export function EvaluationKYC({
   const isDev = envUtil.checkIsDev()
   const { account, chainId } = useWeb3React()
   const { kycProvider, code, kycPool } = useParamsSearch()
+  const { isWalletOwnershipVerified, setError: setAuthError } =
+    useAuthErrorHandling(isDev)
   const [loadingType, setLoadingType] = useState<
     'verificationStatus' | 'sendDocSignatureLink'
   >()
@@ -157,8 +165,13 @@ export function EvaluationKYC({
           )
         }
       } catch (e) {
-        // The repeated call will throw an error of 401, so we can ignore it.
-        console.error(e)
+        try {
+          setAuthError(e)
+          setKYCCopy(JiaPoolCopies.signInRequired)
+        } catch (e) {
+          // The repeated call will throw an error of 401, so we can ignore it.
+          console.log(e)
+        }
       }
 
       try {
@@ -204,12 +217,17 @@ export function EvaluationKYC({
           }
         }
       } catch (e: unknown) {
-        console.error(e)
-        dispatch(
-          setError({
-            errorMessage: 'Something went wrong, please try again later.',
-          }),
-        )
+        try {
+          setAuthError(e)
+          setKYCCopy(JiaPoolCopies.signInRequired)
+        } catch (e) {
+          console.error(e)
+          dispatch(
+            setError({
+              errorMessage: 'Something went wrong, please try again later.',
+            }),
+          )
+        }
       } finally {
         setLoadingType(undefined)
       }
@@ -228,6 +246,8 @@ export function EvaluationKYC({
     kycPool,
     kycProvider,
     poolInfo.pool,
+    setAuthError,
+    isWalletOwnershipVerified,
   ])
 
   const approveLender = async () => {
@@ -273,12 +293,23 @@ export function EvaluationKYC({
           setOpenSnackBar(true)
         }
       } catch (e: unknown) {
-        console.error(e)
-        dispatch(
-          setError({
-            errorMessage: 'Something went wrong, please try again later.',
-          }),
-        )
+        try {
+          const { envelopeId } = await IdentityService.requestDocSignature(
+            account!,
+            chainId!,
+            isDev,
+          )
+          localStorage.setItem(envelopeKey, envelopeId)
+          localStorage.setItem(
+            envelopeLastQueryTimeKey,
+            String(timeUtil.getUnixTimestamp()),
+          )
+          setOpenSnackBar(true)
+          setKYCCopy(JiaPoolCopies.resendSignatureLink)
+        } catch (e) {
+          setAuthError(e)
+          setKYCCopy(JiaPoolCopies.signInRequired)
+        }
       } finally {
         setLoadingType(undefined)
       }
@@ -302,9 +333,11 @@ export function EvaluationKYC({
           <img src={ApproveLenderImg} alt='approve-lender' />
         </Box>
         <Box css={styles.description}>{kycCopy.description}</Box>
-        <BottomButton variant='contained' onClick={approveLender}>
-          {kycCopy.buttonText}
-        </BottomButton>
+        {Boolean(kycCopy.buttonText) && (
+          <BottomButton variant='contained' onClick={approveLender}>
+            {kycCopy.buttonText}
+          </BottomButton>
+        )}
         {getEmailLinkSentSnackbar()}
       </WrapperModal>
     )

package/src/components/SignIn.tsx

@@ -0,0 +1,48 @@
+import { Box, css, Typography, useTheme } from '@mui/material'
+import React from 'react'
+import { ApproveLenderImg } from './images'
+
+export function SignIn(): React.ReactElement {
+  const theme = useTheme()
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    icon: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 100px;
+      margin-right: 30px;
+      & > img {
+        width: 170px;
+      }
+    `,
+    content: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 30px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      line-height: 24px;
+      color: #49505b;
+      margin-bottom: 65px;
+    `,
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        Sign In
+      </Typography>
+      <Box css={styles.icon}>
+        <img src={ApproveLenderImg} alt='approve-lender' />
+      </Box>
+      <Box css={styles.content}>
+        Please sign in to verify your ownership of the wallet.
+      </Box>
+    </Box>
+  )
+}

package/src/components/StreamFactoring/borrow/1-Evaluation.tsx

@@ -5,6 +5,7 @@ import React, { useEffect } from 'react'
 import useEA from '../../../hooks/useEA'
 import { LoadingModal } from '../../LoadingModal'
 import { WIDGET_STEP } from '../../../store/widgets.store'
+import { SignIn } from '../../SignIn'
 
 type Props = {
   poolInfo: PoolInfoType
@@ -17,8 +18,12 @@ export function Evaluation({
   payerAddress,
   superToken,
 }: Props): React.ReactElement {
+  const {
+    checkingEA,
+    isWalletOwnershipVerificationRequired,
+    isWalletOwnershipVerified,
+  } = useEA()
   const { account } = useWeb3React()
-  const { checkingEA } = useEA()
 
   useEffect(() => {
     if (account) {
@@ -44,8 +49,12 @@ export function Evaluation({
     poolInfo.assetAddress,
     poolInfo.pool,
     superToken,
+    isWalletOwnershipVerified,
   ])
 
+  if (isWalletOwnershipVerificationRequired) {
+    return <SignIn />
+  }
   return (
     <LoadingModal
       title='Checking Stream'

package/src/hooks/useEA.ts

@@ -4,6 +4,7 @@ import {
   EARejectMessage,
   EARejectReason,
   EAService,
+  useAuthErrorHandling,
 } from '@huma-finance/shared'
 import { useWeb3React } from '@web3-react/core'
 import { useCallback } from 'react'
@@ -16,6 +17,11 @@ import { useAppDispatch } from './useRedux'
 const useEA = () => {
   const dispatch = useAppDispatch()
   const { chainId } = useWeb3React()
+  const {
+    isWalletOwnershipVerificationRequired,
+    isWalletOwnershipVerified,
+    setError: setAuthError,
+  } = useAuthErrorHandling(envUtil.checkIsDev())
 
   const checkingEA = useCallback(
     async (payload: EAPayload, nextStep: WIDGET_STEP) => {
@@ -36,18 +42,27 @@ const useEA = () => {
             }),
           )
         } else {
-          dispatch(
-            setError({
-              errorMessage: e.message,
-            }),
-          )
+          try {
+            setAuthError(e)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          } catch (e: any) {
+            dispatch(
+              setError({
+                errorMessage: e.message,
+              }),
+            )
+          }
         }
       }
     },
-    [chainId, dispatch],
+    [chainId, dispatch, setAuthError],
   )
 
-  return { checkingEA }
+  return {
+    checkingEA,
+    isWalletOwnershipVerificationRequired,
+    isWalletOwnershipVerified,
+  }
 }
 
 export default useEA

package/src/store/widgets.store.ts

@@ -6,6 +6,7 @@ export enum WIDGET_TYPE {
 }
 
 export enum WIDGET_STEP {
+  SignIn = 'SignIn',
   Evaluation = 'Evaluation',
   ChooseAmount = 'ChooseAmount',
   Permit = 'Permit',

package/src/utils/env.ts

@@ -1,9 +1,7 @@
 const checkIsDev = () =>
-  !!(
-    window.location.hostname.startsWith('dev') ||
-    window.location.hostname.startsWith('deploy-preview') ||
-    process.env.NODE_ENV === 'development'
-  )
+  window.location.hostname.startsWith('dev') ||
+  window.location.hostname.startsWith('deploy-preview') ||
+  process.env.NODE_ENV === 'development'
 
 export const envUtil = {
   checkIsDev,