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

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

@@ -0,0 +1,345 @@
+import {
+  CHAINS,
+  checkIsDev,
+  configUtil,
+  DocSignatureStatus,
+  IdentityService,
+  KYC_PROVIDER,
+  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 { 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
+  handleClose: () => void
+}
+
+export function SecuritizeEvaluation({
+  poolInfo,
+  handleClose,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const isDev = checkIsDev()
+  const dispatch = useAppDispatch()
+  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!.Securitize!
+  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 { 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(
+        KYC_PROVIDER.Securitize,
+        chainId!,
+      )
+      const originUrl = window.location.href.split('?')[0]
+      const redirectUrl = `${originUrl}?poolName=${poolInfo.poolName}&kycProvider=${KYC_PROVIDER.Securitize}&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)
+      }
+    }
+  }
+
+  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)}
+    />
+  )
+
+  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: ${theme.palette.text.primary};
+    `,
+  }
+
+  if (!loadingType) {
+    return (
+      <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 (
+    <LoadingModal
+      title='Lender Approval'
+      description={LoadingCopiesByType[loadingType].description}
+    />
+  )
+}

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

@@ -2,8 +2,10 @@ import {
   POOL_NAME,
   TrancheType,
   openInNewTab,
+  useLPConfigV2,
   useLenderApprovedV2,
   usePoolInfoV2,
+  usePoolSettingsV2,
   usePoolUnderlyingTokenInfoV2,
 } from '@huma-finance/shared'
 import { useWeb3React } from '@web3-react/core'
@@ -23,22 +25,31 @@ import { ApproveAllowance } from './4-ApproveAllowance'
 import { Transfer } from './5-Transfer'
 import { Success } from './6-Success'
 import { Notifications } from './7-Notifications'
+import { PointsEarned } from './8-PointsEarned'
+
+export interface Campaign {
+  id: string
+  campaignGroupId: string
+}
 
 /**
  * Lend pool supply props
  * @typedef {Object} LendSupplyPropsV2
  * @property {POOL_NAME} poolName The name of the pool.
+ * @property {Campaign} campaign The campaign info.
  * @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
+  campaign?: Campaign
   handleClose: () => void
   handleSuccess?: (blockNumber?: number) => void
 }
 
 export function LendSupplyV2({
   poolName: poolNameStr,
+  campaign,
   handleClose,
   handleSuccess,
 }: LendSupplyPropsV2): React.ReactElement | null {
@@ -48,8 +59,11 @@ export function LendSupplyV2({
   const poolInfo = usePoolInfoV2(poolName, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
   const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
+  const [transactionHash, setTransactionHash] = useState<string | undefined>()
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
-
+  const poolSettings = usePoolSettingsV2(poolName, provider)
+  const lpConfig = useLPConfigV2(poolName, provider)
+  const isUniTranche = lpConfig?.maxSeniorJuniorRatio === 0
   const [lenderApprovedSenior] = useLenderApprovedV2(
     poolName,
     'senior',
@@ -67,7 +81,21 @@ export function LendSupplyV2({
     lenderApprovedSenior !== undefined && lenderApprovedJunior !== undefined
 
   useEffect(() => {
-    if (!step && poolInfo && lenderApproveStatusFetched) {
+    if (!step && poolInfo && lenderApproveStatusFetched && lpConfig) {
+      if (
+        campaign &&
+        !isUniTranche &&
+        (!lenderApprovedJunior || !lenderApprovedSenior)
+      ) {
+        if (poolInfo.KYC) {
+          dispatch(setStep(WIDGET_STEP.Evaluation))
+        } else if (poolInfo.supplyLink) {
+          openInNewTab(poolInfo.supplyLink)
+          handleClose()
+        }
+        return
+      }
+
       if (lenderApprovedJunior && !lenderApprovedSenior) {
         setSelectedTranche('junior')
         dispatch(setStep(WIDGET_STEP.ChooseAmount))
@@ -98,14 +126,23 @@ export function LendSupplyV2({
   }, [
     dispatch,
     handleClose,
+    isUniTranche,
     lenderApproveStatusFetched,
     lenderApprovedJunior,
     lenderApprovedSenior,
+    lpConfig,
     poolInfo,
+    campaign,
     step,
   ])
 
-  if (!poolInfo || !poolUnderlyingToken || !lenderApproveStatusFetched) {
+  if (
+    !poolInfo ||
+    !poolUnderlyingToken ||
+    !lenderApproveStatusFetched ||
+    !lpConfig ||
+    !poolSettings
+  ) {
     return (
       <WidgetWrapper
         isOpen
@@ -132,13 +169,22 @@ export function LendSupplyV2({
         />
       )}
       {step === WIDGET_STEP.Evaluation && (
-        <Evaluation poolInfo={poolInfo} handleClose={handleClose} />
+        <Evaluation
+          poolInfo={poolInfo}
+          handleClose={handleClose}
+          isUniTranche={isUniTranche}
+          changeTranche={setSelectedTranche}
+          campaign={campaign}
+          minDepositAmount={poolSettings.minDepositAmount}
+        />
       )}
       {step === WIDGET_STEP.ChooseAmount && (
         <ChooseAmount
           poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
           selectedTranche={selectedTranche}
+          isUniTranche={isUniTranche}
+          campaign={campaign}
         />
       )}
       {step === WIDGET_STEP.ApproveAllowance && (
@@ -158,11 +204,21 @@ export function LendSupplyV2({
         <Success
           poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
+          lpConfig={lpConfig}
+          campaign={campaign}
+          updateTransactionHash={setTransactionHash}
           handleAction={handleClose}
         />
       )}
       {step === WIDGET_STEP.Notifications && (
-        <Notifications handleAction={handleClose} />
+        <Notifications campaign={campaign} handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.PointsEarned && transactionHash && (
+        <PointsEarned
+          transactionHash={transactionHash}
+          lpConfig={lpConfig}
+          handleAction={handleClose}
+        />
       )}
       {step === WIDGET_STEP.Error && (
         <ErrorModal

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

@@ -96,7 +96,7 @@ export function ConfirmTransfer({
       font-weight: 700;
     `,
     divider: css`
-      border-color: #eae6f0;
+      border-color: ${theme.palette.divider};
       margin-bottom: ${theme.spacing(3)};
     `,
   }

package/src/components/Notifi/NotifiSubscriptionModal.tsx

@@ -160,7 +160,7 @@ export function NotifiSubscriptionModal({
       ${theme.cssMixins.rowCentered};
       font-weight: 400;
       font-size: 16px;
-      color: #a8a1b2;
+      color: ${theme.palette.text.secondary};
       margin-top: ${theme.spacing(6)};
     `,
     inputField: css`

package/src/components/SignIn.tsx

@@ -2,7 +2,11 @@ import { Box, css, Typography, useTheme } from '@mui/material'
 import React from 'react'
 import { ApproveLenderImg } from './images'
 
-export function SignIn(): React.ReactElement {
+type Props = {
+  description?: string
+}
+
+export function SignIn({ description }: Props): React.ReactElement {
   const theme = useTheme()
   const styles = {
     wrapper: css`
@@ -27,7 +31,7 @@ export function SignIn(): React.ReactElement {
       font-weight: 400;
       font-size: 16px;
       line-height: 24px;
-      color: #49505b;
+      color: ${theme.palette.text.secondary};
       margin-bottom: ${theme.spacing(8)};
     `,
   }
@@ -41,7 +45,8 @@ export function SignIn(): React.ReactElement {
         <img src={ApproveLenderImg} alt='approve-lender' />
       </Box>
       <Box css={styles.content}>
-        Please sign in to verify your ownership of the wallet.
+        {description ??
+          'Please sign in to verify your ownership of the wallet.'}
       </Box>
     </Box>
   )

package/src/components/TxDoneModal.tsx

@@ -9,12 +9,14 @@ import { CheckIcon } from './icons'
 
 type Props = {
   content: string[]
-  handleAction: () => void
+  subContent?: string[]
   buttonText?: string
+  handleAction: () => void
 }
 
 export function TxDoneModal({
   content,
+  subContent,
   handleAction,
   buttonText,
 }: Props): React.ReactElement {
@@ -33,12 +35,20 @@ export function TxDoneModal({
     `,
     content: css`
       ${theme.cssMixins.colVCentered};
-      font-weight: 400;
+      font-weight: ${subContent ? 700 : 400};
       font-size: 18px;
-      color: #423b46;
+      color: ${theme.palette.text.secondary};
       margin-top: ${theme.spacing(8)};
       text-align: center;
     `,
+    subContent: css`
+      ${theme.cssMixins.colVCentered};
+      font-weight: 400;
+      font-size: 18px;
+      color: ${theme.palette.text.primary};
+      margin-top: ${theme.spacing(2)};
+      text-align: center;
+    `,
     check: css`
       width: 100%;
       ${theme.cssMixins.rowHCentered};
@@ -72,6 +82,15 @@ export function TxDoneModal({
           </Box>
         ))}
       </Box>
+      {subContent && (
+        <Box css={styles.subContent}>
+          {subContent.map((item) => (
+            <Box sx={{ marginTop: theme.spacing(1) }} key={item}>
+              {item}
+            </Box>
+          ))}
+        </Box>
+      )}
       <Button
         className='transaction-done-modal-close-btn'
         variant='contained'

package/src/components/WrapperModal.tsx

@@ -31,7 +31,7 @@ export function WrapperModal({
       font-weight: 400;
       font-size: 16px;
       line-height: 24px;
-      color: #49505b;
+      color: ${theme.palette.text.secondary};
     `,
     bottom: css`
       & .MuiButtonBase-root {

package/src/components/humaModal/HumaModal.tsx

@@ -3,8 +3,6 @@ import { Dialog } from '@mui/material'
 import { useMQ } from '@huma-finance/shared'
 import React from 'react'
 
-import { white } from '../../theme/palette'
-
 type HumaModalType = {
   children?: React.ReactNode
   isOpen: boolean
@@ -48,13 +46,16 @@ export function HumaModal({
 
   return (
     <Dialog
+      id='huma-modal'
       disableScrollLock
       maxWidth={false}
       fullScreen={isXsSize}
       open={isOpen}
       PaperProps={{
         style: {
-          background: white,
+          border: '1px solid #202020',
+          background: 'rgba(255, 255, 255, 0.05)',
+          backdropFilter: 'blur(50px)',
           borderRadius: '16px',
           overflow: overflow || 'inherit',
           overflowY: overflowY || 'inherit',

package/src/components/humaModal/HumaModalHeader.tsx

@@ -43,6 +43,7 @@ export function HumaModalHeader({
       position: absolute;
       right: ${theme.spacing(3)};
       top: ${theme.spacing(3)};
+      z-index: 1;
     `,
     headerBand: css`
       height: ${height}px;