@huma-finance/widgets 0.0.29 → 0.0.31

package/src/components/InvoiceFactoring/payment/4-Success.tsx

@@ -1,23 +1,23 @@
-import { PoolInfoType } from '@huma-finance/shared'
-import React from 'react'
-
-import { useAppSelector } from '../../../hooks/useRedux'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { TxDoneModal } from '../../TxDoneModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  handleAction: () => void
-}
-
-export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
-  const { symbol } = poolInfo.poolUnderlyingToken
-  const { paymentAmount, remainDueAmount } = useAppSelector(selectWidgetState)
-
-  const content = [
-    `You have successfully made a payment of ${paymentAmount} ${symbol}.`,
-    `The remaining due amount is ${remainDueAmount} ${symbol}.`,
-  ]
-
-  return <TxDoneModal handleAction={handleAction} content={content} />
-}
+import { PoolInfoType } from '@huma-finance/shared'
+import React from 'react'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleAction: () => void
+}
+
+export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
+  const { symbol } = poolInfo.poolUnderlyingToken
+  const { paymentAmount, remainDueAmount } = useAppSelector(selectWidgetState)
+
+  const content = [
+    `You have successfully made a payment of ${paymentAmount} ${symbol}.`,
+    `The remaining due amount is ${remainDueAmount} ${symbol}.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

package/src/components/InvoiceFactoring/payment/index.tsx

@@ -1,86 +1,86 @@
-import { useWeb3React } from '@web3-react/core'
-import {
-  POOL_NAME,
-  POOL_TYPE,
-  useAccountStats,
-  usePoolInfo,
-} from '@huma-finance/shared'
-import React, { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
-
-import { useAppSelector } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ErrorModal } from '../../ErrorModal'
-import { WidgetWrapper } from '../../WidgetWrapper'
-import { ChooseAmount } from './1-ChooseAmount'
-import { ApproveAllowance } from './2-ApproveAllowance'
-import { Transfer } from './3-Transfer'
-import { Success } from './4-Success'
-
-/**
- * Invoice factoring pool payment props
- * @typedef {Object} InvoiceFactoringPaymentProps
- * @property {POOL_NAME} poolName The name of the pool.
- * @property {POOL_TYPE} poolType The type of the pool.
- * @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 invoice pool payment action is successful.
- */
-export type InvoiceFactoringPaymentProps = {
-  poolName: keyof typeof POOL_NAME
-  poolType: keyof typeof POOL_TYPE
-  handleClose: () => void
-  handleSuccess?: (blockNumber?: number) => void
-}
-
-export function InvoiceFactoringPayment({
-  poolName: poolNameStr,
-  poolType: poolTypeStr,
-  handleClose,
-  handleSuccess,
-}: InvoiceFactoringPaymentProps): React.ReactElement | null {
-  const dispatch = useDispatch()
-  const { account } = useWeb3React()
-  const poolName = POOL_NAME[poolNameStr]
-  const poolType = POOL_TYPE[poolTypeStr]
-  const poolInfo = usePoolInfo(poolName, poolType)
-  const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [{ creditRecord }] = useAccountStats(poolName, poolType, account)
-
-  useEffect(() => {
-    dispatch(setStep(WIDGET_STEP.ChooseAmount))
-  }, [dispatch])
-
-  if (!poolInfo) {
-    return null
-  }
-
-  return (
-    <WidgetWrapper
-      isOpen
-      isLoading={!creditRecord}
-      loadingTitle='Make Payment'
-      handleClose={handleClose}
-      handleSuccess={handleSuccess}
-    >
-      {step === WIDGET_STEP.ChooseAmount && (
-        <ChooseAmount creditRecord={creditRecord!} poolInfo={poolInfo} />
-      )}
-      {step === WIDGET_STEP.ApproveAllowance && (
-        <ApproveAllowance poolInfo={poolInfo} />
-      )}
-      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
-      {step === WIDGET_STEP.Done && (
-        <Success poolInfo={poolInfo} handleAction={handleClose} />
-      )}
-      {step === WIDGET_STEP.Error && (
-        <ErrorModal
-          title='Make Payment'
-          errorMessage={errorMessage}
-          handleOk={handleClose}
-        />
-      )}
-    </WidgetWrapper>
-  )
-}
+import { useWeb3React } from '@web3-react/core'
+import {
+  POOL_NAME,
+  POOL_TYPE,
+  useAccountStats,
+  usePoolInfo,
+} from '@huma-finance/shared'
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ErrorModal } from '../../ErrorModal'
+import { WidgetWrapper } from '../../WidgetWrapper'
+import { ChooseAmount } from './1-ChooseAmount'
+import { ApproveAllowance } from './2-ApproveAllowance'
+import { Transfer } from './3-Transfer'
+import { Success } from './4-Success'
+
+/**
+ * Invoice factoring pool payment props
+ * @typedef {Object} InvoiceFactoringPaymentProps
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @property {POOL_TYPE} poolType The type of the pool.
+ * @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 invoice pool payment action is successful.
+ */
+export type InvoiceFactoringPaymentProps = {
+  poolName: keyof typeof POOL_NAME
+  poolType: keyof typeof POOL_TYPE
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function InvoiceFactoringPayment({
+  poolName: poolNameStr,
+  poolType: poolTypeStr,
+  handleClose,
+  handleSuccess,
+}: InvoiceFactoringPaymentProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { account } = useWeb3React()
+  const poolName = POOL_NAME[poolNameStr]
+  const poolType = POOL_TYPE[poolTypeStr]
+  const poolInfo = usePoolInfo(poolName, poolType)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [{ creditRecord }] = useAccountStats(poolName, poolType, account)
+
+  useEffect(() => {
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
+  }, [dispatch])
+
+  if (!poolInfo) {
+    return null
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      isLoading={!creditRecord}
+      loadingTitle='Make Payment'
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount creditRecord={creditRecord!} poolInfo={poolInfo} />
+      )}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance poolInfo={poolInfo} />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && (
+        <Success poolInfo={poolInfo} handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Make Payment'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

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

@@ -1,171 +1,175 @@
-import {
-  EAService,
-  IdentityService,
-  PoolInfoType,
-  VerificationStatusResult,
-} from '@huma-finance/shared'
-import { Box, css, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import React, { useEffect, 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'
-import { envUtil } from '../../../utils/env'
-
-type Props = {
-  poolInfo: PoolInfoType
-  handleApproveSuccess: () => void
-}
-
-export function Evaluation({
-  poolInfo,
-  handleApproveSuccess,
-}: 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`
-      ${theme.cssMixins.rowCentered};
-      margin-top: 30px;
-    `,
-    description: css`
-      ${theme.cssMixins.rowCentered};
-      margin-top: 50px;
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      color: #a8a1b2;
-    `,
-  }
-
-  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)
-        }
-      }
-    }
-    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={subTitle}>
-        <Box css={styles.iconWrapper}>
-          <ApproveLenderIcon />
-        </Box>
-        <Box css={styles.description}>{description}</Box>
-        {true && (
-          <BottomButton
-            variant='contained'
-            onClick={approveLender}
-            disabled={KYCVerifyStatus?.isVerified}
-          >
-            {buttonText}
-          </BottomButton>
-        )}
-      </WrapperModal>
-    )
-  }
-
-  return (
-    <LoadingModal
-      title='Approval Pending'
-      description='Waiting for approval confirmation...'
-    />
-  )
-}
+import {
+  EAService,
+  IdentityService,
+  PoolInfoType,
+  VerificationStatusResult,
+  configUtil,
+} from '@huma-finance/shared'
+import { Box, css, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import React, { useEffect, 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'
+import { envUtil } from '../../../utils/env'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleApproveSuccess: () => void
+}
+
+export function Evaluation({
+  poolInfo,
+  handleApproveSuccess,
+}: 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 [buttonText, setButtonText] = useState<string>('VERIFY MY IDENTITY')
+
+  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;
+    `,
+  }
+
+  useEffect(() => {
+    if (isKYC) {
+      setDescription(
+        `Link your ${lenderApprovalProvider.provider} account or create a new one to complete identity verification.`,
+      )
+    }
+  }, [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) {
+            setDescription(
+              'Please review the documents to complete the approval process.',
+            )
+            setButtonText('REVIEW DOCUMENT')
+          }
+        } finally {
+          setLoading(false)
+        }
+      }
+    }
+    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 { isNotOnboarded, isVerified } = KYCVerifyStatus || {}
+
+          if (isVerified) {
+            if (lenderApprovalProvider.documentUrl) {
+              window.location.href = lenderApprovalProvider.documentUrl
+            }
+          } else {
+            const issuerId = '53a66b32-583e-40e7-ba90-baf516d2cadd'
+            const baseUrl = configUtil.getKYCProviderBaseUrl(
+              'Securitize',
+              isDev,
+            )
+            const originUrl = window.location.href.split('?')[0]
+            const redirectUrl = `${originUrl}?kycProvider=Securitize&kycPool=${poolInfo.pool}`
+            const providerAuthorizeUrl = `${baseUrl}/#/authorize?issuerId=${issuerId}&scope=details&details=verification&redirectUrl=${redirectUrl}`
+            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'
+      >
+        <Box css={styles.iconWrapper}>
+          <ApproveLenderIcon />
+        </Box>
+        <Box css={styles.description}>{description}</Box>
+        <BottomButton variant='contained' onClick={approveLender}>
+          {buttonText}
+        </BottomButton>
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <LoadingModal
+      title='Approval Pending'
+      description='Waiting for approval confirmation...'
+    />
+  )
+}