@huma-finance/widgets 0.0.59-beta.494 → 0.0.59-beta.511

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.59-beta.494+6f95cfb",
+  "version": "0.0.59-beta.511+0c622c1",
   "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.58",
-    "@huma-finance/shared": "^0.0.58",
+    "@huma-finance/sdk": "^0.0.59-beta.511+0c622c1",
+    "@huma-finance/shared": "^0.0.59-beta.511+0c622c1",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -63,6 +63,7 @@
     "history": "^5.3.0",
     "jotai": "^1.13.1",
     "moment": "^2.29.4",
+    "persona": "^5.1.0",
     "qrcode": "^1.5.1",
     "query-string": "^7.1.1",
     "react": "^18.2.0",
@@ -137,6 +138,7 @@
     "@typechain/ethers-v5": "^10.1.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^17.0.45",
+    "@types/persona": "^0.0.32",
     "@types/qrcode": "^1.5.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
@@ -193,5 +195,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "6f95cfb0c84875a8e823e25133b37bc7cab0abdc"
+  "gitHead": "0c622c19fc81a5882f69a49a2272dc9035d995ab"
 }

package/src/components/ChooseAmountModal.tsx

@@ -134,7 +134,7 @@ export function ChooseAmountModal({
       margin-bottom: ${theme.spacing(7)};
       &.MuiSlider-root {
         height: 8px !important;
-        color: #e9e9e9;
+        color: ${theme.palette.text.primary};
       }
       & .MuiSlider-track {
         height: 8px !important;
@@ -158,8 +158,7 @@ export function ChooseAmountModal({
     `,
     divider: css`
       margin: ${theme.spacing(2, 0)};
-      background: #49505b;
-      border-color: #e9e3f1;
+      border-color: ${theme.palette.divider};
     `,
     okButton: css`
       font-weight: 700;

package/src/components/ConfirmTransferModal.tsx

@@ -86,7 +86,7 @@ export function ConfirmTransferModal({
       animation-iteration-count: infinite;
       animation-timing-function: linear;
 
-      color: #b246ff;
+      color: ${theme.palette.primary.main};
       position: absolute;
       margin: auto;
       top: 0;

package/src/components/ErrorModal.tsx

@@ -62,7 +62,7 @@ export function ErrorModal({
     errorIcon: css`
       position: absolute;
       font-size: 20px;
-      color: #d32f2f;
+      color: ${theme.palette.error.main};
       margin: ${theme.spacing(0, 2)};
     `,
     messageWrapper: css`

package/src/components/InputAmountModal.tsx

@@ -86,8 +86,8 @@ export function InputAmountModal({
     `,
     info: css`
       color: ${theme.palette.text.primary};
-      font-weight: 700;
-      font-size: 20px;
+      font-weight: 400;
+      font-size: 16px;
       line-height: 160%;
       letter-spacing: 0.15px;
     `,

package/src/components/Lend/supplyV2/2-Evaluation.tsx

@@ -1,346 +1,48 @@
-import {
-  CHAINS,
-  checkIsDev,
-  configUtil,
-  DocSignatureStatus,
-  IdentityService,
-  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 { PoolInfoV2, TrancheType } from '@huma-finance/shared'
+import { BigNumber } from 'ethers'
+import React 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...`,
-  },
-}
+import { Campaign } from '.'
+import { PersonaEvaluation } from './components/PersonaEvaluation'
+import { SecuritizeEvaluation } from './components/SecuritizeEvaluation'
 
 type Props = {
   poolInfo: PoolInfoV2
+  isUniTranche: boolean
+  minDepositAmount: BigNumber
+  pointsTestnetExperience: boolean
+  campaign?: Campaign
+  changeTranche: (tranche: TrancheType) => void
   handleClose: () => void
 }
 
 export function Evaluation({
   poolInfo,
+  isUniTranche,
+  minDepositAmount,
+  campaign,
+  pointsTestnetExperience,
+  changeTranche,
   handleClose,
 }: Props): React.ReactElement | null {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-  const isDev = checkIsDev()
-  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!
-  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 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.secondary};
-    `,
-  }
-
-  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(
-        poolInfo.KYC!.provider,
-        chainId!,
-      )
-      const originUrl = window.location.href.split('?')[0]
-      const redirectUrl = `${originUrl}?poolName=${
-        poolInfo.poolName
-      }&kycProvider=${poolInfo.KYC!.provider}&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)
-      }
-    }
+  if (poolInfo.KYC?.Securitize) {
+    return (
+      <SecuritizeEvaluation poolInfo={poolInfo} handleClose={handleClose} />
+    )
   }
-
-  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)}
-    />
-  )
-
-  if (!loadingType) {
+  if (poolInfo.KYC?.Persona) {
     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>
+      <PersonaEvaluation
+        poolInfo={poolInfo}
+        handleClose={handleClose}
+        isUniTranche={isUniTranche}
+        pointsTestnetExperience={pointsTestnetExperience}
+        campaign={campaign}
+        minDepositAmount={minDepositAmount}
+        changeTranche={changeTranche}
+      />
     )
   }
 
-  return (
-    <LoadingModal
-      title='Lender Approval'
-      description={LoadingCopiesByType[loadingType].description}
-    />
-  )
+  return null
 }

package/src/components/Lend/supplyV2/3-ChooseAmount.tsx

@@ -1,37 +1,49 @@
 import {
+  CampaignService,
+  checkIsDev,
+  formatNumber,
   PoolInfoV2,
   TrancheType,
   UnderlyingTokenInfo,
-  formatNumber,
-  useLPConfigV2,
+  useDebouncedValue,
   usePoolSafeAllowanceV2,
   usePoolUnderlyingTokenBalanceV2,
 } from '@huma-finance/shared'
 import { useWeb3React } from '@web3-react/core'
 import { BigNumber, ethers } from 'ethers'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { InputAmountModal } from '../../InputAmountModal'
-import { LoadingModal } from '../../LoadingModal'
+import { Campaign } from '.'
 
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
   selectedTranche: TrancheType | undefined
+  isUniTranche: boolean
+  pointsTestnetExperience: boolean
+  campaign?: Campaign
 }
 
 export function ChooseAmount({
   poolInfo,
   poolUnderlyingToken,
   selectedTranche,
+  isUniTranche,
+  pointsTestnetExperience,
+  campaign,
 }: Props): React.ReactElement | null {
+  const isDev = checkIsDev()
   const dispatch = useAppDispatch()
   const { account, provider } = useWeb3React()
   const { symbol, decimals } = poolUnderlyingToken
   const [currentAmount, setCurrentAmount] = useState<number | string>(0)
+  const debouncedValue = useDebouncedValue(currentAmount)
+  const [campaignPoints, setCampaignPoints] = useState<number>(0)
+  const [lockupPeriodMonths, setLockupPeriodMonths] = useState<number>(0)
   const { allowance = BigNumber.from(0) } = usePoolSafeAllowanceV2(
     poolInfo.poolName,
     account,
@@ -46,8 +58,42 @@ export function ChooseAmount({
     balance,
     poolUnderlyingToken.decimals,
   )
-  const lpConfig = useLPConfigV2(poolInfo.poolName, provider)
-  const isUniTranche = lpConfig?.maxSeniorJuniorRatio === 0
+
+  useEffect(() => {
+    const getBasePoints = async () => {
+      if (campaign && selectedTranche && Number(debouncedValue) > 0) {
+        const estimatedPoints = await CampaignService.getEstimatedPoints(
+          campaign.campaignGroupId,
+          ethers.utils
+            .parseUnits(
+              String(debouncedValue),
+              poolInfo.poolUnderlyingToken.decimals,
+            )
+            .toString(),
+          isDev,
+          pointsTestnetExperience,
+        )
+        const campaignPoints = estimatedPoints.find(
+          (item) => item.campaignId === campaign.id,
+        )
+        if (campaignPoints) {
+          setCampaignPoints(campaignPoints[`${selectedTranche}TranchePoints`])
+          setLockupPeriodMonths(campaignPoints.lockupPeriodMonths)
+        }
+      } else {
+        setCampaignPoints(0)
+      }
+    }
+    getBasePoints()
+  }, [
+    campaign,
+    debouncedValue,
+    decimals,
+    isDev,
+    pointsTestnetExperience,
+    poolInfo.poolUnderlyingToken.decimals,
+    selectedTranche,
+  ])
 
   const handleChangeAmount = (newAmount: number) => {
     setCurrentAmount(newAmount)
@@ -65,8 +111,11 @@ export function ChooseAmount({
     dispatch(setStep(step))
   }
 
-  if (!lpConfig) {
-    return <LoadingModal title='Supply' />
+  let info = `${formatNumber(maxAmountFormatted)} Available`
+  if (campaign && campaignPoints > 0) {
+    info = `You will earn ${formatNumber(
+      campaignPoints,
+    )} points for the entire ${lockupPeriodMonths} months right away.`
   }
 
   return (
@@ -79,7 +128,7 @@ export function ChooseAmount({
       currentAmount={currentAmount}
       handleChangeAmount={handleChangeAmount}
       maxAmount={maxAmountFormatted}
-      info={`${formatNumber(maxAmountFormatted)} Available`}
+      info={info}
       handleAction={handleAction}
       actionText='SUPPLY'
     />

package/src/components/Lend/supplyV2/6-Success.tsx

@@ -4,11 +4,13 @@ import {
   formatMoney,
   PoolInfoV2,
   sendTxAtom,
+  timeUtil,
   TRANSFER_ABI,
   UnderlyingTokenInfo,
 } from '@huma-finance/shared'
 import { useWeb3React } from '@web3-react/core'
 import { useAtom } from 'jotai'
+import moment from 'moment'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 
@@ -16,24 +18,31 @@ import {
   useDoesChainSupportNotifi,
   useIsFirstTimeNotifiUser,
 } from '../../../hooks/useNotifi'
-import { TxDoneModal } from '../../TxDoneModal'
 import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
+import { TxDoneModal } from '../../TxDoneModal'
+import { Campaign } from '.'
 
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
+  lpConfig: { withdrawalLockoutPeriodInDays: number }
+  campaign?: Campaign
+  updateTransactionHash: (hash: string) => void
   handleAction: () => void
 }
 
 export function Success({
   poolInfo,
   poolUnderlyingToken,
+  lpConfig,
+  campaign,
+  updateTransactionHash,
   handleAction,
 }: Props): React.ReactElement {
   const dispatch = useDispatch()
   const { account, chainId } = useWeb3React()
-  const [{ txReceipt }] = useAtom(sendTxAtom)
+  const [{ txReceipt, txHash }] = useAtom(sendTxAtom)
   const { symbol, decimals, address } = poolUnderlyingToken
   const [supplyAmount, setSupplyAmount] = useState<string | undefined>()
   const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
@@ -57,23 +66,57 @@ export function Success({
     }
   }, [account, address, decimals, poolInfo.poolSafe, txReceipt])
 
-  const setupNotificationsOrClose = useCallback(() => {
+  useEffect(() => {
+    if (txHash) {
+      updateTransactionHash(txHash)
+    }
+  }, [txHash, updateTransactionHash])
+
+  const handleUserAction = useCallback(() => {
     if (isFirstTimeNotifiUser && notifiChainSupported) {
       dispatch(setStep(WIDGET_STEP.Notifications))
+    } else if (campaign) {
+      dispatch(setStep(WIDGET_STEP.PointsEarned))
     } else {
       handleAction()
     }
-  }, [dispatch, handleAction, isFirstTimeNotifiUser, notifiChainSupported])
+  }, [
+    campaign,
+    dispatch,
+    handleAction,
+    isFirstTimeNotifiUser,
+    notifiChainSupported,
+  ])
 
   const content = [
     `You successfully supplied ${formatMoney(supplyAmount)} ${symbol}.`,
   ]
 
+  const getSubContent = () => {
+    const currentTime = moment().add(
+      lpConfig.withdrawalLockoutPeriodInDays,
+      'days',
+    )
+    return [
+      `First redemption date: ${timeUtil.timestampToLL(
+        currentTime.unix(),
+      )}. You can redeem end of each month after.`,
+    ]
+  }
+
+  const getButtonText = () => {
+    if (hasNextStep) {
+      return "WHAT'S NEXT"
+    }
+    return campaign ? 'VIEW POINTS' : undefined
+  }
+
   return (
     <TxDoneModal
-      handleAction={setupNotificationsOrClose}
+      handleAction={handleUserAction}
       content={content}
-      buttonText={hasNextStep ? "WHAT'S NEXT" : undefined}
+      subContent={getSubContent()}
+      buttonText={getButtonText()}
     />
   )
 }