@huma-finance/widgets 0.0.42-beta.76 → 0.0.42-beta.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.42-beta.76+6ee5093",
+  "version": "0.0.42-beta.94+250029f",
   "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.42-beta.76+6ee5093",
-    "@huma-finance/shared": "^0.0.42-beta.76+6ee5093",
+    "@huma-finance/sdk": "^0.0.42-beta.94+250029f",
+    "@huma-finance/shared": "^0.0.42-beta.94+250029f",
     "@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": "6ee509335f870cf5bc69fbd6ce742f843e3e0798"
+  "gitHead": "250029fad7f3f01df9612e4674953c6478193acd"
 }

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

@@ -88,7 +88,7 @@ export function EvaluationKYC({
   const { account, chainId } = useWeb3React()
   const { kycProvider, code, kycPool } = useParamsSearch()
   const { isWalletOwnershipVerified, setError: setAuthError } =
-    useAuthErrorHandling(account, chainId, isDev)
+    useAuthErrorHandling(isDev)
   const [loadingType, setLoadingType] = useState<
     'verificationStatus' | 'sendDocSignatureLink'
   >()

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,