@huma-finance/widgets 0.0.30 → 0.0.32

package/src/components/CreditLine/borrow/5-Success.tsx

@@ -9,12 +9,14 @@ type Props = {
   poolInfo: PoolInfoType
   creditRecord: CreditRecordType
   handleAction: () => void
+  hasNextStep: boolean
 }
 
 export function Success({
   poolInfo,
   creditRecord,
   handleAction,
+  hasNextStep,
 }: Props): React.ReactElement {
   const { borrowAmountNet } = useAppSelector(selectWidgetState)
   const { poolUnderlyingToken } = poolInfo
@@ -26,5 +28,11 @@ export function Success({
     `Note: your payment will be automatically deducted on ${dueDate}.`,
   ]
 
-  return <TxDoneModal handleAction={handleAction} content={content} />
+  return (
+    <TxDoneModal
+      handleAction={handleAction}
+      content={content}
+      buttonText={hasNextStep ? "WHAT'S NEXT" : undefined}
+    />
+  )
 }

package/src/components/CreditLine/borrow/6-Notifications.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { NotifiSubscriptionModal } from '../../Notifi/NotifiSubscriptionModal'
+
+type Props = {
+  handleAction: () => void
+}
+
+export function Notifications({ handleAction }: Props): React.ReactElement {
+  return <NotifiSubscriptionModal handleSuccess={handleAction} />
+}

package/src/components/CreditLine/borrow/index.tsx

@@ -20,6 +20,11 @@ import { ChooseAmount } from './2-ChooseAmount'
 import { ApproveAllowance } from './4-ApproveAllowance'
 import { Transfer } from './3-Transfer'
 import { Success } from './5-Success'
+import { Notifications } from './6-Notifications'
+import {
+  useDoesChainSupportNotifi,
+  useIsFirstTimeNotifiUser,
+} from '../../../hooks/useNotifi'
 
 /**
  * Credit line pool borrow props
@@ -46,7 +51,7 @@ export function CreditLineBorrow({
   handleSuccess,
 }: CreditLineBorrowProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId } = useWeb3React()
   const poolName = POOL_NAME[poolNameStr]
   const poolType = POOL_TYPE[poolTypeStr]
   const poolInfo = usePoolInfo(poolName, poolType)
@@ -56,6 +61,8 @@ export function CreditLineBorrow({
     poolType,
     account,
   )
+  const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
+  const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
   const { creditRecord } = accountStats
   const accountState = creditRecord?.state
 
@@ -76,6 +83,14 @@ export function CreditLineBorrow({
     refreshAccountStats()
   }, [handleApprove, refreshAccountStats])
 
+  const setupNotificationsOrClose = useCallback(() => {
+    if (isFirstTimeNotifiUser && notifiChainSupported) {
+      dispatch(setStep(WIDGET_STEP.Notifications))
+    } else {
+      handleClose()
+    }
+  }, [dispatch, handleClose, isFirstTimeNotifiUser, notifiChainSupported])
+
   if (!poolInfo) {
     return null
   }
@@ -101,10 +116,14 @@ export function CreditLineBorrow({
       {step === WIDGET_STEP.Done && (
         <Success
           poolInfo={poolInfo}
-          handleAction={handleClose}
+          handleAction={setupNotificationsOrClose}
           creditRecord={creditRecord!}
+          hasNextStep={isFirstTimeNotifiUser}
         />
       )}
+      {step === WIDGET_STEP.Notifications && (
+        <Notifications handleAction={handleClose} />
+      )}
       {step === WIDGET_STEP.Error && (
         <ErrorModal
           title='Borrow'

package/src/components/Factoring/UpcomingList.tsx

@@ -69,7 +69,7 @@ export function UpcomingList<T>({
       <Box css={styles.description} marginBottom='47px'>
         {!isActive && <Box component='span'>{connectWalletDesc}</Box>}
         {isActive && !items?.length && <Box>{noItemDesc}</Box>}
-        {isActive && items?.length && (
+        {isActive && !!items?.length && (
           <Box css={styles.tableWrapper}>
             {loading && (
               <Box css={styles.progress}>

package/src/components/HumaSnackBar.tsx

@@ -0,0 +1,60 @@
+import { css } from '@emotion/react'
+import { Alert, Box, Snackbar } from '@mui/material'
+
+type Props = {
+  open: boolean
+  title: string
+  message: string
+  severity: 'success' | 'info' | 'warning' | 'error'
+  autoHideDuration?: number
+  onClose: () => void
+}
+
+export function HumaSnackBar({
+  open,
+  autoHideDuration,
+  title,
+  message,
+  severity,
+  onClose,
+}: Props) {
+  const styles = {
+    snackbar: css`
+      margin-top: 80px;
+    `,
+    alert: css`
+      max-width: 400px;
+      padding: 20px 35px 20px 20px;
+      border-radius: 16px;
+      overflow: hidden;
+    `,
+    title: css`
+      margin-bottom: 10px;
+      font-size: 16px;
+      font-family: 'Uni-Neue-Bold';
+    `,
+    message: css`
+      font-size: 15px;
+      font-family: 'Uni-Neue-Regular';
+    `,
+  }
+
+  return (
+    <Snackbar
+      open={open}
+      autoHideDuration={autoHideDuration ?? 6000}
+      onClose={onClose}
+      css={styles.snackbar}
+    >
+      <Alert
+        onClose={onClose}
+        title={title}
+        severity={severity}
+        css={styles.alert}
+      >
+        <Box css={styles.title}>{title}</Box>
+        <Box css={styles.message}>{message}</Box>
+      </Alert>
+    </Snackbar>
+  )
+}

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

@@ -0,0 +1,86 @@
+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 { useAppDispatch } from '../../../../hooks/useRedux'
+import { setError, setStep } from '../../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../../store/widgets.store'
+import { CustomError } from '../../../../utilTypes'
+import { BottomButton } from '../../../BottomButton'
+import { ApproveLenderIcon } from '../../../icons'
+import { LoadingModal } from '../../../LoadingModal'
+import { WrapperModal } from '../../../WrapperModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleApproveSuccess: () => void
+}
+
+export function EvaluationEA({
+  poolInfo,
+  handleApproveSuccess,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const { account, chainId } = useWeb3React()
+  const [loading, setLoading] = useState(false)
+
+  const styles = {
+    iconWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: 30px;
+    `,
+    description: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: 50px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #a8a1b2;
+    `,
+  }
+
+  const approveLender = async () => {
+    if (account) {
+      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 }))
+      }
+    }
+  }
+
+  if (!loading) {
+    return (
+      <WrapperModal
+        title='Lender Approval'
+        subTitle='This pool requires lender approval'
+      >
+        <Box css={styles.iconWrapper}>
+          <ApproveLenderIcon />
+        </Box>
+        <Box css={styles.description} />
+        <BottomButton variant='contained' onClick={approveLender}>
+          GET APPROVED
+        </BottomButton>
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <LoadingModal
+      title='Approval Pending'
+      description='Waiting for approval confirmation...'
+    />
+  )
+}

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

@@ -0,0 +1,287 @@
+import {
+  configUtil,
+  DocSignatureStatus,
+  IdentityService,
+  PoolInfoType,
+  timeUtil,
+  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 { envUtil } from '../../../../utils/env'
+import { BottomButton } from '../../../BottomButton'
+import { HumaSnackBar } from '../../../HumaSnackBar'
+import { ApproveLenderIcon } from '../../../icons'
+import { LoadingModal } from '../../../LoadingModal'
+import { WrapperModal } from '../../../WrapperModal'
+
+const KYCProvider = 'Securitize'
+
+const KYCCopiesByState: {
+  [key: string]: {
+    description: string
+    buttonText: string
+  }
+} = {
+  verifyIdentity: {
+    description: `Link your ${KYCProvider} account or create a new one to complete identity verification.`,
+    buttonText: 'VERIFY MY IDENTITY',
+  },
+  emailSignatureLink: {
+    description: `Final step: Your digital signature on legal documents is required. Click below to email yourself the DocuSign link.`,
+    buttonText: 'EMAIL DOCUSIGN LINK',
+  },
+  resendSignatureLink: {
+    description: `DocuSign link sent successfully. Haven't received it? Check your spam folder or click below to resend it.`,
+    buttonText: 'RESEND DOCUSIGN LINK',
+  },
+  docUnderReview: {
+    description: `Documents received and under review. You'll be notified upon approval. Your patience is appreciated.`,
+    buttonText: 'THANK YOU',
+  },
+}
+
+const LoadingCopiesByType: {
+  [key: string]: {
+    description: string
+  }
+} = {
+  verificationStatus: {
+    description: `Checking your verification status...`,
+  },
+  sendDocSignatureLink: {
+    description: `Sending signature link...`,
+  },
+}
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleClose: () => void
+}
+
+export function EvaluationKYC({
+  poolInfo,
+  handleClose,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const isDev = envUtil.checkIsDev()
+  const { account, chainId } = useWeb3React()
+  const [loadingType, setLoadingType] = useState<
+    'verificationStatus' | 'sendDocSignatureLink'
+  >()
+  const [description, setDescription] = useState<string>(
+    KYCCopiesByState.verifyIdentity.description,
+  )
+  const [buttonText, setButtonText] = useState<string>(
+    KYCCopiesByState.verifyIdentity.buttonText,
+  )
+  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: 30px;
+    `,
+    description: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: 50px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #a8a1b2;
+    `,
+  }
+
+  const { envelopeKey, envelopeLastQueryTimeKey } = useMemo(() => {
+    const envelopeKey = `${poolInfo.pool.toLowerCase()}-${account?.toLowerCase()}`
+    const envelopeLastQueryTimeKey = `${envelopeKey}-last-query-time`
+    return {
+      envelopeKey,
+      envelopeLastQueryTimeKey,
+    }
+  }, [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(() => {
+    const fetchData = async () => {
+      if (account && chainId) {
+        try {
+          setLoadingType('verificationStatus')
+          const verificationStatus =
+            await IdentityService.getVerificationStatus(
+              account,
+              poolInfo.pool,
+              chainId,
+              isDev,
+            )
+          setKYCVerifyStatus(verificationStatus)
+          if (verificationStatus.isVerified) {
+            const envelopeId = localStorage.getItem(envelopeKey)
+            if (!envelopeId) {
+              setDescription(KYCCopiesByState.emailSignatureLink.description)
+              setButtonText(KYCCopiesByState.emailSignatureLink.buttonText)
+            } else if (!checkGetDocSignatureStatusIsAvailable()) {
+              setDescription(KYCCopiesByState.resendSignatureLink.description)
+              setButtonText(KYCCopiesByState.resendSignatureLink.buttonText)
+            } else {
+              const { status } = await IdentityService.getDocSignatureStatus(
+                envelopeId,
+                chainId,
+                isDev,
+              )
+              localStorage.setItem(
+                envelopeLastQueryTimeKey,
+                String(timeUtil.getUnixTimestamp()),
+              )
+              setDocSignatureStatus(status)
+              if (status === 'completed') {
+                setDescription(KYCCopiesByState.docUnderReview.description)
+                setButtonText(KYCCopiesByState.docUnderReview.buttonText)
+                // For voided and declined status, we need to send a new link
+              } else if (['voided', 'declined'].includes(status)) {
+                localStorage.removeItem(envelopeKey)
+                localStorage.removeItem(envelopeLastQueryTimeKey)
+                setDescription(KYCCopiesByState.emailSignatureLink.description)
+                setButtonText(KYCCopiesByState.emailSignatureLink.buttonText)
+              } else {
+                setDescription(KYCCopiesByState.resendSignatureLink.description)
+                setButtonText(KYCCopiesByState.resendSignatureLink.buttonText)
+              }
+            }
+          }
+        } catch (e: unknown) {
+          console.error(e)
+          dispatch(
+            setError({
+              errorMessage: 'Something went wrong, please try again later.',
+            }),
+          )
+        } finally {
+          setLoadingType(undefined)
+        }
+      }
+    }
+    fetchData()
+  }, [
+    account,
+    chainId,
+    checkGetDocSignatureStatusIsAvailable,
+    dispatch,
+    envelopeKey,
+    envelopeLastQueryTimeKey,
+    isDev,
+    poolInfo.pool,
+  ])
+
+  const approveLender = async () => {
+    if (docSignatureCompleted) {
+      handleClose()
+      return
+    }
+
+    const { isNotOnboarded, isVerified } = KYCVerifyStatus || {}
+
+    if (!isVerified) {
+      const issuerId = '53a66b32-583e-40e7-ba90-baf516d2cadd'
+      const baseUrl = configUtil.getKYCProviderBaseUrl(KYCProvider, isDev)
+      const originUrl = window.location.href.split('?')[0]
+      const redirectUrl = `${originUrl}?kycProvider=${KYCProvider}&kycPool=${poolInfo.pool}`
+      const providerAuthorizeUrl = `${baseUrl}/#/authorize?issuerId=${issuerId}&scope=details&details=verification&redirectUrl=${redirectUrl}`
+      const providerUrl = isNotOnboarded ? providerAuthorizeUrl : baseUrl
+      window.location.href = providerUrl
+    } 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)
+          setDescription(KYCCopiesByState.resendSignatureLink.description)
+          setButtonText(KYCCopiesByState.resendSignatureLink.buttonText)
+        } else {
+          await IdentityService.resendDocSignatureLink(
+            envelopeId,
+            chainId!,
+            isDev,
+          )
+          setOpenSnackBar(true)
+        }
+      } catch (e: unknown) {
+        console.error(e)
+        dispatch(
+          setError({
+            errorMessage: 'Something went wrong, please try again later.',
+          }),
+        )
+      } finally {
+        setLoadingType(undefined)
+      }
+    }
+  }
+
+  const getEmailLinkSentSnackbar = () => (
+    <HumaSnackBar
+      open={openSnackBar}
+      title='Signature Link Sent'
+      message='The secure signature session link has been sent to your email.'
+      severity='success'
+      onClose={() => setOpenSnackBar(false)}
+    />
+  )
+
+  if (!loadingType) {
+    return (
+      <WrapperModal
+        title='Lender Approval'
+        subTitle='This pool requires lender approval'
+      >
+        <Box css={styles.iconWrapper}>
+          <ApproveLenderIcon />
+        </Box>
+        <Box css={styles.description}>{description}</Box>
+        <BottomButton variant='contained' onClick={approveLender}>
+          {buttonText}
+        </BottomButton>
+        {getEmailLinkSentSnackbar()}
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <LoadingModal
+      title='Lender Approval'
+      description={LoadingCopiesByType[loadingType].description}
+    />
+  )
+}

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

@@ -0,0 +1,31 @@
+import { PoolInfoType } from '@huma-finance/shared'
+import React from 'react'
+
+import { EvaluationEA } from './EvaluationEA'
+import { EvaluationKYC } from './EvaluationKYC'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleClose: () => void
+  handleApproveSuccess: () => void
+}
+
+export function Evaluation({
+  poolInfo,
+  handleClose,
+  handleApproveSuccess,
+}: Props): React.ReactElement | null {
+  const lenderApprovalProvider = poolInfo.extra?.lenderApprovalProvider
+  const isKYC = lenderApprovalProvider?.type === 'KYC'
+
+  if (isKYC) {
+    return <EvaluationKYC poolInfo={poolInfo} handleClose={handleClose} />
+  }
+
+  return (
+    <EvaluationEA
+      poolInfo={poolInfo}
+      handleApproveSuccess={handleApproveSuccess}
+    />
+  )
+}

package/src/components/Lend/supply/2-ChooseAmount.tsx

@@ -48,7 +48,6 @@ export function ChooseAmount({
       : WIDGET_STEP.Transfer
     dispatch(setStep(step))
   }, [dispatch, needApprove])
-
   return (
     <ChooseAmountModal
       title={`Supply ${symbol}`}

package/src/components/Lend/supply/{7-Success.tsx → 5-Success.tsx}

@@ -15,9 +15,14 @@ import { TxDoneModal } from '../../TxDoneModal'
 type Props = {
   poolInfo: PoolInfoType
   handleAction: () => void
+  hasNextStep: boolean
 }
 
-export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
+export function Success({
+  poolInfo,
+  handleAction,
+  hasNextStep,
+}: Props): React.ReactElement {
   const { account } = useWeb3React()
   const { poolUnderlyingToken } = poolInfo
   const [{ txReceipt }] = useAtom(sendTxAtom)
@@ -45,5 +50,11 @@ export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
     `You successfully supplied ${formatMoney(supplyAmount)} ${symbol}.`,
   ]
 
-  return <TxDoneModal handleAction={handleAction} content={content} />
+  return (
+    <TxDoneModal
+      handleAction={handleAction}
+      content={content}
+      buttonText={hasNextStep ? "WHAT'S NEXT" : undefined}
+    />
+  )
 }

package/src/components/Lend/supply/6-Notifications.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { NotifiSubscriptionModal } from '../../Notifi/NotifiSubscriptionModal'
+
+type Props = {
+  handleAction: () => void
+}
+
+export function Notifications({ handleAction }: Props): React.ReactElement {
+  return <NotifiSubscriptionModal handleSuccess={handleAction} />
+}