@huma-finance/widgets 0.0.80 → 0.0.81-beta.1108

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

@@ -1,369 +0,0 @@
-import {
-  CHAINS,
-  configUtil,
-  DocSignatureStatus,
-  IdentityService,
-  PoolInfoType,
-  timeUtil,
-  VerificationStatusResult,
-} from '@huma-finance/shared'
-import {
-  useAuthErrorHandling,
-  useParamsSearch,
-  checkIsDev,
-} from '@huma-finance/web-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 KYCProvider = 'Securitize'
-
-type KYCCopy = {
-  title: string
-  description: string
-  buttonText?: string
-}
-
-// TODO: Add copies for the other pools. Currently only the Jia pool is using the KYC process.
-const JiaPoolCopies = {
-  signInRequired: {
-    title: 'Sign In',
-    description:
-      'Please sign in to verify that you are the owner of the wallet.',
-  },
-  verifyIdentity: {
-    title: 'Verify Identity',
-    description: `This pool is only available to professional/accredited investors at the moment, with minimum investments of $10,000. Please complete identity verification and investor accreditation via ${KYCProvider}.`,
-    buttonText: 'VERIFY MY IDENTITY',
-  },
-  emailSignatureLink: {
-    title: 'Pool Documents',
-    description: `By lending to this pool, you become a subscriber member of the Jia Pioneer Fund LLC. Please sign the LLC Agreement via DocuSign, securing your off-chain claim to the Fund's returns and collateral.`,
-    buttonText: 'EMAIL DOCUSIGN LINK',
-  },
-  resendSignatureLink: {
-    title: 'Resend Documents',
-    description: `Please check your inbox for the LLC Agreement sent via DocuSign. If you haven't received it, check your spam folder or click below to resend.`,
-    buttonText: 'RESEND DOCUSIGN LINK',
-  },
-  docUnderReview: {
-    title: 'Under Review',
-    description:
-      'Your documents are being reviewed and you will be notified upon approval. Thank you for your patience. Any questions? Email invest@jia.xyz.',
-    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 = checkIsDev()
-  const { account, chainId } = useWeb3React()
-  const { kycProvider, code, kycPool } = useParamsSearch()
-  const { isWalletOwnershipVerified, setAuthError, authError } =
-    useAuthErrorHandling(isDev)
-  const [loadingType, setLoadingType] = useState<
-    'verificationStatus' | 'sendDocSignatureLink'
-  >()
-  const [kycCopy, setKYCCopy] = useState<KYCCopy>(JiaPoolCopies.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(JiaPoolCopies.verifyIdentity)
-    const docuSignStatus = localStorage.getItem(envelopeDocuSignStatusKey)
-    setDocSignatureStatus(docuSignStatus as DocSignatureStatus['status'])
-    if (docuSignStatus === 'completed') {
-      setKYCCopy(JiaPoolCopies.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(JiaPoolCopies.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(JiaPoolCopies.emailSignatureLink)
-            } else if (!checkGetDocSignatureStatusIsAvailable()) {
-              setKYCCopy(JiaPoolCopies.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(JiaPoolCopies.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(JiaPoolCopies.emailSignatureLink)
-              } else {
-                setKYCCopy(JiaPoolCopies.resendSignatureLink)
-              }
-            }
-          }
-        }
-      } catch (e: unknown) {
-        try {
-          setAuthError(e)
-          setKYCCopy(JiaPoolCopies.signInRequired)
-        } catch (e) {
-          console.error(e)
-          dispatch(
-            setError({
-              errorMessage: 'Something went wrong, please try again later.',
-            }),
-          )
-        }
-      } finally {
-        setLoadingType(undefined)
-      }
-    }
-    fetchData()
-  }, [
-    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(KYCProvider, chainId!)
-      const originUrl = window.location.href.split('?')[0]
-      const redirectUrl = `${originUrl}?poolName=${poolInfo.poolName}&chainId=${poolInfo.chainId}&poolType=${poolInfo.poolType}&kycProvider=${KYCProvider}&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(JiaPoolCopies.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(JiaPoolCopies.resendSignatureLink)
-        } catch (e) {
-          setAuthError(e)
-          setKYCCopy(JiaPoolCopies.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)}
-    />
-  )
-
-  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/supply/1-Evaluation/index.tsx

@@ -1,31 +0,0 @@
-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/supplyV2/2-Evaluation.tsx

@@ -1,47 +0,0 @@
-import {
-  CHAIN_TYPE,
-  CloseModalOptions,
-  NETWORK_TYPE,
-  PoolInfoV2,
-} from '@huma-finance/shared'
-import React from 'react'
-
-import { Campaign } from '.'
-import { PersonaEvaluation } from '../components/PersonaEvaluation'
-import { SecuritizeEvaluation } from '../components/SecuritizeEvaluation'
-
-type Props = {
-  poolInfo: PoolInfoV2
-  networkType: NETWORK_TYPE
-  campaign?: Campaign
-  documentHash?: string
-  handleClose: (options?: CloseModalOptions) => void
-}
-
-export function Evaluation({
-  poolInfo,
-  networkType,
-  campaign,
-  documentHash,
-  handleClose,
-}: Props): React.ReactElement | null {
-  if (poolInfo.KYC?.Securitize) {
-    return (
-      <SecuritizeEvaluation poolInfo={poolInfo} handleClose={handleClose} />
-    )
-  }
-  if (poolInfo.KYC?.Persona && documentHash) {
-    return (
-      <PersonaEvaluation
-        poolInfo={poolInfo}
-        handleClose={handleClose}
-        campaign={campaign}
-        networkType={networkType}
-        chainType={CHAIN_TYPE.EVM}
-        documentHash={documentHash}
-      />
-    )
-  }
-
-  return null
-}

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

@@ -1,35 +0,0 @@
-import {
-  CHAIN_TYPE,
-  getEvmNetworkType,
-  PoolInfoV2,
-  TrancheType,
-} from '@huma-finance/shared'
-import React from 'react'
-
-import { ApproveLenderBase } from '../components/ApproveLenderBase'
-
-type Props = {
-  poolInfo: PoolInfoV2
-  isUniTranche: boolean
-  documentHash?: string
-  changeTranche: (tranche: TrancheType) => void
-}
-
-export function ApproveLender({
-  poolInfo,
-  isUniTranche,
-  documentHash,
-  changeTranche,
-}: Props): React.ReactElement {
-  return (
-    <ApproveLenderBase
-      juniorTrancheVault={poolInfo.juniorTrancheVault}
-      seniorTrancheVault={poolInfo.seniorTrancheVault}
-      isUniTranche={isUniTranche}
-      documentHash={documentHash}
-      chainType={CHAIN_TYPE.EVM}
-      networkType={getEvmNetworkType(poolInfo.chainId)}
-      changeTranche={changeTranche}
-    />
-  )
-}

package/src/components/PointsEarned.tsx

@@ -1,135 +0,0 @@
-import {
-  CloseModalOptions,
-  FEATHERS_TO_HUMA_RATIO,
-  formatNumber,
-  isEmpty,
-} from '@huma-finance/shared'
-import { txAtom } from '@huma-finance/web-shared'
-import { Box, css, useTheme } from '@mui/material'
-import { useResetAtom } from 'jotai/utils'
-import React, { useCallback } from 'react'
-import { useDispatch } from 'react-redux'
-
-import { useAppSelector } from '../hooks/useRedux'
-import { resetState } from '../store/widgets.reducers'
-import { selectWidgetState } from '../store/widgets.selectors'
-import { BottomButton } from './BottomButton'
-import { CongratulationsIcon, HumaPointsIcon, RibbonIcon } from './icons'
-
-type Props = {
-  lpConfig: { withdrawalLockupPeriodDays?: number }
-  handleAction: (options?: CloseModalOptions) => void
-}
-
-export function PointsEarned({
-  lpConfig,
-  handleAction,
-}: Props): React.ReactElement {
-  const theme = useTheme()
-  const dispatch = useDispatch()
-  const reset = useResetAtom(txAtom)
-  const { pointsAccumulated } = useAppSelector(selectWidgetState)
-  const hasPointsAccumulated =
-    !isEmpty(pointsAccumulated) && pointsAccumulated! > 0
-  const lockupMonths = Math.round(
-    (lpConfig.withdrawalLockupPeriodDays ?? 0) / 30,
-  )
-  const monthText =
-    lockupMonths > 1 ? `${lockupMonths} months` : `${lockupMonths} month`
-
-  const rewardsAccumulated = pointsAccumulated
-    ? pointsAccumulated / FEATHERS_TO_HUMA_RATIO
-    : undefined
-
-  const handleCloseModal = useCallback(() => {
-    reset()
-    dispatch(resetState())
-    handleAction({ isSuccess: true })
-  }, [dispatch, handleAction, reset])
-
-  const styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-    `,
-    congrats: css`
-      margin: ${theme.spacing(-4, -4.5, 0, -4.5)};
-    `,
-    ribbon: css`
-      position: relative;
-      ${theme.cssMixins.rowHCentered};
-      font-weight: 700;
-      margin-top: ${theme.spacing(-8)};
-      color: ${theme.palette.text.primary};
-      font-size: 20px;
-      line-height: 160%;
-      letter-spacing: 0.15px;
-    `,
-    ribbonContent: css`
-      ${theme.cssMixins.rowVCentered};
-      position: absolute;
-      top: ${theme.spacing(1)};
-
-      svg {
-        margin-right: ${theme.spacing(1)};
-      }
-    `,
-    entirePoints: css`
-      color: ${theme.palette.text.tertiary};
-      text-align: center;
-      font-weight: 700;
-      font-size: 20px;
-      line-height: 160%;
-      letter-spacing: 0.15px;
-      margin-top: ${theme.spacing(7)};
-    `,
-    entirePointsDetails: css`
-      color: ${theme.palette.text.tertiary};
-      text-align: center;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 150%;
-      letter-spacing: 0.15px;
-      margin-top: ${theme.spacing(4)};
-    `,
-    everyday: css`
-      font-weight: 700;
-    `,
-  }
-
-  return (
-    <Box css={styles.wrapper}>
-      <Box css={styles.congrats}>
-        <CongratulationsIcon />
-      </Box>
-      <Box css={styles.ribbon}>
-        <RibbonIcon />
-        <Box css={styles.ribbonContent}>
-          <HumaPointsIcon />
-          <Box>
-            {hasPointsAccumulated
-              ? `${formatNumber(rewardsAccumulated)} $HUMA`
-              : 'Rewards earned'}
-          </Box>
-        </Box>
-      </Box>
-      <Box css={styles.entirePoints}>
-        {hasPointsAccumulated ? (
-          <>
-            <Box>Congratulations,</Box>
-            <Box>you've earned {rewardsAccumulated} $HUMA</Box>
-          </>
-        ) : (
-          <Box>Congratulations on joining the Huma Protocol!</Box>
-        )}
-      </Box>
-      <Box css={styles.entirePointsDetails}>
-        You'll earn rewards <span css={styles.everyday}>everyday</span> for{' '}
-        {monthText} straight.
-      </Box>
-      <BottomButton variant='contained' onClick={handleCloseModal}>
-        GREAT
-      </BottomButton>
-    </Box>
-  )
-}

package/src/components/SignIn.tsx

@@ -1,53 +0,0 @@
-import { Box, css, Typography, useTheme } from '@mui/material'
-import React from 'react'
-import { ApproveLenderImg } from './images'
-
-type Props = {
-  description?: string
-}
-
-export function SignIn({ description }: Props): React.ReactElement {
-  const theme = useTheme()
-  const styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-    `,
-    header: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: ${theme.spacing(-0.5)};
-    `,
-    icon: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: ${theme.spacing(12)};
-      margin-right: ${theme.spacing(4)};
-      & > img {
-        width: 170px;
-      }
-    `,
-    content: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: ${theme.spacing(4)};
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 24px;
-      color: ${theme.palette.text.secondary};
-      margin-bottom: ${theme.spacing(8)};
-    `,
-  }
-
-  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}>
-        {description ??
-          'Please sign in to verify your ownership of the wallet.'}
-      </Box>
-    </Box>
-  )
-}