@huma-finance/widgets 0.0.35 → 0.0.37

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

@@ -6,6 +6,7 @@ import {
   timeUtil,
   VerificationStatusResult,
   CHAINS,
+  useParamsSearch,
 } from '@huma-finance/shared'
 import { Box, css, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
@@ -79,6 +80,7 @@ export function EvaluationKYC({
   const dispatch = useAppDispatch()
   const isDev = envUtil.checkIsDev()
   const { account, chainId } = useWeb3React()
+  const { kycProvider, code, kycPool } = useParamsSearch()
   const [loadingType, setLoadingType] = useState<
     'verificationStatus' | 'sendDocSignatureLink'
   >()
@@ -108,14 +110,17 @@ export function EvaluationKYC({
     `,
   }
 
-  const { envelopeKey, envelopeLastQueryTimeKey } = useMemo(() => {
-    const envelopeKey = `${poolInfo.pool.toLowerCase()}-${account?.toLowerCase()}`
-    const envelopeLastQueryTimeKey = `${envelopeKey}-last-query-time`
-    return {
-      envelopeKey,
-      envelopeLastQueryTimeKey,
-    }
-  }, [account, poolInfo.pool])
+  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
@@ -132,9 +137,32 @@ export function EvaluationKYC({
   }, [envelopeLastQueryTimeKey])
 
   useEffect(() => {
+    const docuSignStatus = localStorage.getItem(envelopeDocuSignStatusKey)
+    setDocSignatureStatus(docuSignStatus as DocSignatureStatus['status'])
+    if (docuSignStatus === 'completed') {
+      setKYCCopy(JiaPoolCopies.docUnderReview)
+      return
+    }
+
     const fetchData = async () => {
-      if (account && chainId) {
-        try {
+      try {
+        if (kycProvider && kycPool && account && chainId) {
+          setLoadingType('verificationStatus')
+          await IdentityService.onboard(
+            account,
+            code as string,
+            kycPool as string,
+            chainId,
+            isDev,
+          )
+        }
+      } catch (e) {
+        // The repeated call will throw an error of 401, so we can ignore it.
+        console.error(e)
+      }
+
+      try {
+        if (account && chainId) {
           setLoadingType('verificationStatus')
           const verificationStatus =
             await IdentityService.getVerificationStatus(
@@ -160,6 +188,7 @@ export function EvaluationKYC({
                 envelopeLastQueryTimeKey,
                 String(timeUtil.getUnixTimestamp()),
               )
+              localStorage.setItem(envelopeDocuSignStatusKey, status)
               setDocSignatureStatus(status)
               if (status === 'completed') {
                 setKYCCopy(JiaPoolCopies.docUnderReview)
@@ -173,16 +202,16 @@ export function EvaluationKYC({
               }
             }
           }
-        } catch (e: unknown) {
-          console.error(e)
-          dispatch(
-            setError({
-              errorMessage: 'Something went wrong, please try again later.',
-            }),
-          )
-        } finally {
-          setLoadingType(undefined)
         }
+      } catch (e: unknown) {
+        console.error(e)
+        dispatch(
+          setError({
+            errorMessage: 'Something went wrong, please try again later.',
+          }),
+        )
+      } finally {
+        setLoadingType(undefined)
       }
     }
     fetchData()
@@ -190,10 +219,14 @@ export function EvaluationKYC({
     account,
     chainId,
     checkGetDocSignatureStatusIsAvailable,
+    code,
     dispatch,
+    envelopeDocuSignStatusKey,
     envelopeKey,
     envelopeLastQueryTimeKey,
     isDev,
+    kycPool,
+    kycProvider,
     poolInfo.pool,
   ])
 

package/src/components/Notifi/NotifiSubscriptionModal.tsx

@@ -10,7 +10,11 @@ import {
   EventTypeItem,
   BroadcastEventTypeItem,
 } from '@notifi-network/notifi-frontend-client'
-import { getBlockchainConfigFromChain, txAtom } from '@huma-finance/shared'
+import {
+  getBlockchainConfigFromChain,
+  txAtom,
+  getNotifiDappId,
+} from '@huma-finance/shared'
 import { ethers } from 'ethers'
 import {
   Box,
@@ -99,7 +103,7 @@ export function NotifiSubscriptionModal({
   const [notifiClient, setNotifiClient] = useState<NotifiFrontendClient>()
   const [showSuccessScreen, setShowSuccessScreen] = useState<boolean>(false)
   const [isLoading, setIsLoading] = useState<boolean>(false)
-  const [emailAddress, setEmailAddress] = useState<string>()
+  const [emailAddress, setEmailAddress] = useState<string>('')
   const [emailValid, setEmailValid] = useState<boolean>()
 
   useEffect(() => {
@@ -107,7 +111,7 @@ export function NotifiSubscriptionModal({
       if (account != null && chainId != null) {
         const client = newFrontendClient({
           account: { publicKey: account },
-          tenantId: 'humadapp',
+          tenantId: getNotifiDappId(envUtil.checkIsDev()),
           env: envUtil.checkIsDev() ? 'Development' : 'Production',
           walletBlockchain: getBlockchainConfigFromChain(chainId),
         })

package/src/components/SuperfluidFactoring/SuperfluidFactoredList.tsx

@@ -31,7 +31,6 @@ const getColumns = (): ColumnType<FactoredStreamType>[] => [
   {
     title: '',
     dataIndex: 'icon',
-    noSeparator: true,
     width: 10,
     style: { padding: '0 0 0 16px' },
   },

package/src/components/SuperfluidFactoring/SuperfluidUpcomingList.tsx

@@ -73,7 +73,6 @@ const getUpcomingColumns = (
   {
     title: '',
     dataIndex: 'icon',
-    noSeparator: true,
     width: 10,
     style: { padding: '0 0 0 16px' },
   },

package/src/components/ViewOnExplorer.tsx

@@ -1,6 +1,6 @@
 import { Box, Button } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
-import { CHAINS, openInNewTab } from '@huma-finance/shared'
+import { getExplorerUrl, openInNewTab } from '@huma-finance/shared'
 import React from 'react'
 
 type Props = {
@@ -9,17 +9,14 @@ type Props = {
 
 export function ViewOnExplorer({ txHash }: Props): React.ReactElement | null {
   const { chainId } = useWeb3React()
-  const chain = chainId ? CHAINS[chainId] : null
+  const link = getExplorerUrl(chainId, txHash, 'tx')
 
-  if (!txHash || !chain) {
+  if (!link) {
     return null
   }
 
   return (
-    <Button
-      variant='outlined'
-      onClick={() => openInNewTab(`${chain.explorer}/tx/${txHash}`)}
-    >
+    <Button variant='outlined' onClick={() => openInNewTab(link)}>
       <Box component='span'>VIEW ON EXPLORER</Box>
     </Button>
   )

package/src/hooks/useElementDimensions.ts

@@ -0,0 +1,30 @@
+import { MutableRefObject, useEffect, useState } from 'react'
+
+export const useElementDimensions = (
+  ref: MutableRefObject<HTMLDivElement | undefined>,
+) => {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+
+  useEffect(() => {
+    const getDimensions = () => ({
+      width: ref?.current?.offsetWidth ?? 0,
+      height: ref?.current?.offsetHeight ?? 0,
+    })
+
+    const handleResize = () => {
+      setDimensions(getDimensions())
+    }
+
+    if (ref.current) {
+      setDimensions(getDimensions())
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [ref])
+
+  return dimensions
+}

package/src/index.tsx

@@ -12,7 +12,12 @@ import { Provider as AtomProvider } from 'jotai'
 import { useCallback, useEffect, useState } from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
 
+import { useWeb3React } from '@web3-react/core'
 import { ChainNotSupportedModal } from './components/ChainNotSupportedModal'
+import {
+  CreditLineApprove,
+  CreditLineApproveProps,
+} from './components/CreditLine/approve'
 import {
   CreditLineBorrow,
   CreditLineBorrowProps,
@@ -50,29 +55,21 @@ type JsonRpcConnectionMap = {
  * @typedef {Object} WidgetProps
  * @property {desiredChainId|undefined} desiredChainId Optional desired chain id, will trigger the switch network action if different from the current chain id
  * @property {JsonRpcConnectionMap|undefined} jsonRpcUrlMap Optional mapping of your JSON-RPC connections indexed by chainId
- * @property {Eip1193Provider|JsonRpcProvider|null|undefined} provider Optional EIP-1193 provider or JsonRpc Provider
+ * @property {Eip1193Provider|JsonRpcProviderl} provider EIP-1193 provider or JsonRpc Provider
  */
 type WidgetProps = {
   handleClose?: () => void
   desiredChainId?: number
   jsonRpcUrlMap?: JsonRpcConnectionMap
-  provider?: Eip1193Provider | JsonRpcProvider | null
+  provider: Eip1193Provider | JsonRpcProvider
 }
 
 function Widget(props: WCProps<WidgetProps>) {
-  const { children, desiredChainId } = props
-  const { ethereum } = window
-  // @ts-ignore
-  const netWorkVersion = ethereum?.networkVersion || ethereum?.chainId
-  const [currentChainId, setCurrentChainId] = useState<number | undefined>(
-    netWorkVersion ? Number(netWorkVersion) : undefined,
-  )
-  const chainSupported = !!supportedChainId(currentChainId)
-  const [chainNotSupportedOpen, setChainNotSupportedOpen] = useState(false)
+  const { children } = props
+  const { chainId } = useWeb3React()
 
-  useEffect(() => {
-    setCurrentChainId(netWorkVersion ? Number(netWorkVersion) : undefined)
-  }, [netWorkVersion])
+  const chainSupported = !!supportedChainId(chainId)
+  const [chainNotSupportedOpen, setChainNotSupportedOpen] = useState(false)
 
   useEffect(() => {
     if (chainSupported) {
@@ -82,44 +79,6 @@ function Widget(props: WCProps<WidgetProps>) {
     }
   }, [chainSupported])
 
-  useEffect(() => {
-    const chainChangeListener = (chainId: number) => {
-      setCurrentChainId(chainId)
-    }
-
-    if (window.ethereum) {
-      // @ts-ignore
-      window.ethereum?.on('chainChanged', chainChangeListener)
-    }
-    return () => {
-      if (window.ethereum) {
-        // @ts-ignore
-        window.ethereum?.removeListener('chainChanged', chainChangeListener)
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    if (
-      window.ethereum &&
-      desiredChainId &&
-      currentChainId !== desiredChainId
-    ) {
-      const changeNetwork = async () => {
-        try {
-          // @ts-ignore
-          await window.ethereum.request({
-            method: 'wallet_switchEthereumChain',
-            params: [{ chainId: `0x${Number(desiredChainId).toString(16)}` }],
-          })
-        } catch (error) {
-          console.error(error)
-        }
-      }
-      changeNetwork()
-    }
-  }, [currentChainId, desiredChainId])
-
   const handleCloseCallback = useCallback(() => {
     setChainNotSupportedOpen(false)
   }, [])
@@ -160,7 +119,7 @@ type InvoiceFactoringBorrowWidgetProps = InvoiceFactoringBorrowProps &
 /**
  * Invoice factoring borrow widget
  *
- * @param {InvoiceFactoringBorrowProps | WidgetProps} props - The invoice factoring pool borrow widget props.
+ * @param {InvoiceFactoringBorrowWidgetProps} props - The invoice factoring pool borrow widget props.
  * @returns Invoice factoring pool borrow widget component
  */
 export function InvoiceFactoringBorrowWidget(
@@ -185,7 +144,7 @@ type InvoiceFactoringPaymentWidgetProps = InvoiceFactoringPaymentProps &
 /**
  * Invoice factoring payment widget
  *
- * @param {InvoiceFactoringPaymentProps | WidgetProps} props - The invoice factoring pool payment widget props.
+ * @param {InvoiceFactoringPaymentWidgetProps} props - The invoice factoring pool payment widget props.
  * @returns Invoice factoring pool payment widget component
  */
 export function InvoiceFactoringPaymentWidget(
@@ -209,7 +168,7 @@ type CreditLineBorrowWidgetProps = CreditLineBorrowProps & WidgetProps
 /**
  * Credit line borrow widget
  *
- * @param {CreditLineBorrowProps | WidgetProps} props - The credit line pool borrow widget props.
+ * @param {CreditLineBorrowWidgetProps} props - The credit line pool borrow widget props.
  * @returns Credit line pool borrow widget component
  */
 export function CreditLineBorrowWidget(props: CreditLineBorrowWidgetProps) {
@@ -231,7 +190,7 @@ type CreditLinePaymentWidgetProps = CreditLinePaymentProps & WidgetProps
 /**
  * Credit line payment widget
  *
- * @param {CreditLinePaymentProps | WidgetProps} props - The credit line pool payment widget props.
+ * @param {CreditLinePaymentWidgetProps} props - The credit line pool payment widget props.
  * @returns Credit line pool payment widget component
  */
 export function CreditLinePaymentWidget(props: CreditLinePaymentWidgetProps) {
@@ -242,6 +201,29 @@ export function CreditLinePaymentWidget(props: CreditLinePaymentWidgetProps) {
   )
 }
 
+/**
+ * Credit line allowance approval widget props
+ * @typedef {Object} CreditLinePaymentWidgetProps
+ * @property {CreditLineApproveProps} CreditLineApproveProps - Credit line allowance approve props.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type CreditLineApproveWidgetProps = CreditLineApproveProps & WidgetProps
+
+/**
+ * Credit line allowance approve widget to top up a pool's ERC20 token allowance.
+ * To be used when re-enabling autopay and other pool actions that require allowance.
+ *
+ * @param {CreditLineApproveWidgetProps} props - The credit line pool approve widget props.
+ * @returns Credit line pool approve widget component
+ */
+export function CreditLineApproveWidget(props: CreditLineApproveWidgetProps) {
+  return (
+    <Widget {...props}>
+      <CreditLineApprove {...props} />
+    </Widget>
+  )
+}
+
 /**
  * Lend pool supply widget props
  * @typedef {Object} LendSupplyWidgetProps
@@ -253,7 +235,7 @@ type LendSupplyWidgetProps = LendSupplyProps & WidgetProps
 /**
  * Lend supply widget
  *
- * @param {LendSupplyProps | WidgetProps} props - The lend pool supply widget props.
+ * @param {LendSupplyWidgetProps} props - The lend pool supply widget props.
  * @returns Lend pool supply widget component
  */
 export function LendSupplyWidget(props: LendSupplyWidgetProps) {
@@ -275,7 +257,7 @@ type LendWithdrawWidgetProps = LendWithdrawProps & WidgetProps
 /**
  * Lend withdraw widget
  *
- * @param {LendWithdrawProps | WidgetProps} props The lend pool withdraw widget props
+ * @param {LendWithdrawWidgetProps} props The lend pool withdraw widget props
  * @returns Lend pool withdraw widget component
  */
 export function LendWithdrawWidget(props: LendWithdrawWidgetProps) {

package/src/utilTypes.d.ts

@@ -13,7 +13,6 @@ export type ColumnType<T> = {
   title: string
   dataIndex?: string
   width?: number
-  noSeparator?: boolean
   style?: Record<string, string>
   action?: (record: T) => React.ReactNode
 }