@huma-finance/widgets 0.0.26 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "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.26",
-    "@huma-finance/shared": "^0.0.26",
+    "@huma-finance/sdk": "^0.0.27",
+    "@huma-finance/shared": "^0.0.27",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -191,5 +191,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "56be2f72a82a3bb86d04115a909ad1507ff5b2e2"
+  "gitHead": "6b5806b0d29519bd5c10724b207f5c50c88085f9"
 }

package/src/components/BottomButton.tsx

@@ -5,11 +5,13 @@ import { WCProps } from '../utilTypes'
 
 type Props = {
   variant: 'contained' | 'outlined'
+  disabled?: boolean
   onClick?: () => void
 }
 
 export function BottomButton({
   variant,
+  disabled = false,
   onClick,
   children,
 }: WCProps<Props>): React.ReactElement {
@@ -23,7 +25,7 @@ export function BottomButton({
 
   return (
     <Box css={styles}>
-      <Button variant={variant} onClick={onClick}>
+      <Button variant={variant} onClick={onClick} disabled={disabled}>
         {children}
       </Button>
     </Box>

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

@@ -1,7 +1,12 @@
+import {
+  EAService,
+  IdentityService,
+  PoolInfoType,
+  VerificationStatusResult,
+} from '@huma-finance/shared'
 import { Box, css, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
-import { EAService, PoolInfoType } from '@huma-finance/shared'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setError, setStep } from '../../../store/widgets.reducers'
@@ -11,6 +16,7 @@ import { BottomButton } from '../../BottomButton'
 import { ApproveLenderIcon } from '../../icons'
 import { LoadingModal } from '../../LoadingModal'
 import { WrapperModal } from '../../WrapperModal'
+import { envUtil } from '../../../utils/env'
 
 type Props = {
   poolInfo: PoolInfoType
@@ -23,8 +29,18 @@ export function Evaluation({
 }: Props): React.ReactElement | null {
   const theme = useTheme()
   const dispatch = useAppDispatch()
+  const isDev = envUtil.checkIsDev()
   const { account, chainId } = useWeb3React()
   const [loading, setLoading] = useState(false)
+  const [description, setDescription] = useState<string>()
+  const [KYCVerifyStatus, setKYCVerifyStatus] =
+    useState<VerificationStatusResult>()
+  const lenderApprovalProvider = poolInfo.extra?.lenderApprovalProvider
+  const isKYC = lenderApprovalProvider?.type === 'KYC'
+  const [subTitle, setSubTitle] = useState<string>(
+    'This pool requires lender approval',
+  )
+  const [buttonText, setButtonText] = useState<string>('GET APPROVED')
 
   const styles = {
     iconWrapper: css`
@@ -40,39 +56,108 @@ export function Evaluation({
     `,
   }
 
-  const approveLender = async () => {
-    if (account) {
-      try {
-        setLoading(true)
-        const payload = {
-          poolAddress: poolInfo.pool,
-          lenderWalletAddress: account,
+  useEffect(() => {
+    if (isKYC) {
+      setDescription(
+        `Approval process is run by ${lenderApprovalProvider.provider}`,
+      )
+    }
+  }, [lenderApprovalProvider?.provider, isKYC])
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (account && chainId && isKYC) {
+        try {
+          setLoading(true)
+          const verificationStatus =
+            await IdentityService.getVerificationStatus(
+              account,
+              poolInfo.pool,
+              chainId,
+              isDev,
+            )
+          setKYCVerifyStatus(verificationStatus)
+          if (verificationStatus.isVerified) {
+            setSubTitle(
+              'Approval process in progress. Please contact Pool Owner.',
+            )
+            setButtonText('CONTACT POOL OWNER')
+          }
+        } finally {
+          setLoading(false)
         }
-        await EAService.approveLender(payload, chainId!)
-        handleApproveSuccess()
-        setLoading(false)
-        dispatch(setStep(WIDGET_STEP.ChooseAmount))
-      } catch (e: unknown) {
-        const error = e as CustomError
-        setLoading(false)
-        dispatch(setError({ errorMessage: error.message }))
       }
     }
+    fetchData()
+  }, [account, chainId, isDev, isKYC, poolInfo.pool])
+
+  const approveLenderByEA = async () => {
+    try {
+      setLoading(true)
+      const payload = {
+        poolAddress: poolInfo.pool,
+        lenderWalletAddress: account!,
+      }
+      await EAService.approveLender(payload, chainId!)
+      handleApproveSuccess()
+      setLoading(false)
+      dispatch(setStep(WIDGET_STEP.ChooseAmount))
+    } catch (e: unknown) {
+      const error = e as CustomError
+      setLoading(false)
+      dispatch(setError({ errorMessage: error.message }))
+    }
+  }
+
+  const approveLenderByKYC = () => {
+    switch (lenderApprovalProvider?.provider) {
+      case 'Securitize':
+        {
+          const issuerId = '53a66b32-583e-40e7-ba90-baf516d2cadd'
+          const baseUrl = `https://id${isDev ? '.sandbox' : ''}.securitize.io`
+          const originUrl = window.location.href.split('?')[0]
+          const redirectUrl = `${originUrl}?type=KYC&pool=${poolInfo.pool}`
+          const providerAuthorizeUrl = `${baseUrl}/#/authorize?issuerId=${issuerId}&scope=details&details=verification&redirectUrl=${redirectUrl}`
+          const { isNotOnboarded } = KYCVerifyStatus || {}
+          const providerUrl = isNotOnboarded ? providerAuthorizeUrl : baseUrl
+          window.location.href = providerUrl
+        }
+        break
+      default:
+        break
+    }
+  }
+
+  const approveLender = () => {
+    switch (lenderApprovalProvider?.type) {
+      case 'EA':
+        approveLenderByEA()
+        break
+      case 'KYC':
+        approveLenderByKYC()
+        break
+      default:
+        approveLenderByEA()
+        break
+    }
   }
 
   if (!loading) {
     return (
-      <WrapperModal
-        title='Lender Approval'
-        subTitle='This pool requires lender approval'
-      >
+      <WrapperModal title='Lender Approval' subTitle={subTitle}>
         <Box css={styles.iconWrapper}>
           <ApproveLenderIcon />
         </Box>
-        <Box css={styles.description} />
-        <BottomButton variant='contained' onClick={approveLender}>
-          GET APPROVED
-        </BottomButton>
+        <Box css={styles.description}>{description}</Box>
+        {true && (
+          <BottomButton
+            variant='contained'
+            onClick={approveLender}
+            disabled={KYCVerifyStatus?.isVerified}
+          >
+            {buttonText}
+          </BottomButton>
+        )}
       </WrapperModal>
     )
   }

package/src/index.tsx

@@ -61,8 +61,9 @@ type WidgetProps = {
 
 function Widget(props: WCProps<WidgetProps>) {
   const { children, desiredChainId } = props
+  const { ethereum } = window
   // @ts-ignore
-  const netWorkVersion = window.ethereum?.networkVersion
+  const netWorkVersion = ethereum?.networkVersion || ethereum?.chainId
   const [currentChainId, setCurrentChainId] = useState<number | undefined>(
     netWorkVersion ? Number(netWorkVersion) : undefined,
   )

package/src/utils/env.ts

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