@huma-finance/widgets 0.0.8 → 0.0.11

package/src/components/Factoring/FactoredList.tsx

@@ -1,143 +1,143 @@
-import { Box, css, LinearProgress, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import {
-  AccountStats,
-  downScale,
-  formatMoney,
-  hasRFActiveLoan,
-  PoolInfoType,
-  timestampToLL,
-  useMQ,
-  usePoolUnderlyingToken,
-} from '@huma-finance/shared'
-import React, { useEffect, useState } from 'react'
-
-import { ColumnType } from '../../utilTypes'
-import { HumaTable } from '../HumaTable'
-import { ReceiptIcon } from '../icons'
-
-type Props<T> = {
-  title: 'Streams' | 'Invoices'
-  poolInfo: PoolInfoType
-  loading: boolean
-  accountStats: AccountStats
-  handlePayManually: (item: T) => void
-  getColumns: (handlePayManually: (item: T) => void) => ColumnType<T>[]
-  setItem?: (
-    accountStats: AccountStats,
-  ) => Promise<{ name?: string; payer?: string }>
-}
-
-export function FactoredList<T>({
-  title,
-  poolInfo,
-  loading,
-  accountStats,
-  handlePayManually,
-  getColumns,
-  setItem,
-}: Props<T>): React.ReactElement {
-  const theme = useTheme()
-  const { isMdSize } = useMQ()
-  const { isActive } = useWeb3React()
-  const { decimals } = usePoolUnderlyingToken(
-    poolInfo.poolName,
-    poolInfo.poolType,
-  )
-  const [factoredItem, setFactoredItem] = useState<Partial<T>>()
-  const { creditRecord, receivableInfo } = accountStats
-  const hasActiveLoan = hasRFActiveLoan(creditRecord, receivableInfo)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      if (creditRecord && receivableInfo?.receivableParam.gt(0) && decimals) {
-        const id = receivableInfo.receivableParam.toString()
-        const dueDate = timestampToLL(creditRecord.dueDate.toNumber())
-        const { receivableAmount } = receivableInfo
-        const { totalDue } = creditRecord
-        let factoredItem = {
-          id,
-          due: dueDate,
-          icon: <ReceiptIcon css={{ width: '18px' }} />,
-          amount: formatMoney(downScale(receivableAmount.toString(), decimals)),
-          factored: formatMoney(downScale(totalDue.toString(), decimals)),
-          remained: formatMoney(
-            downScale(receivableAmount.sub(totalDue).toString(), decimals),
-          ),
-        } as T
-        if (setItem) {
-          const customProps = await setItem(accountStats)
-          factoredItem = { ...factoredItem, ...customProps }
-        }
-        setFactoredItem(factoredItem)
-      }
-    }
-    fetchData()
-  }, [accountStats, creditRecord, decimals, receivableInfo, setItem])
-
-  const getPadding = () => {
-    if (isMdSize) {
-      return '0 8px 8px 8px'
-    }
-    return '0 16px 16px 16px'
-  }
-
-  const styles = {
-    title: css`
-      font-family: 'Uni-Neue-Black';
-      color: ${theme.palette.text.primary};
-      font-size: 24px;
-      margin-bottom: 16px;
-    `,
-    description: css`
-      font-family: 'Uni-Neue-Regular';
-      color: ${theme.palette.text.primary};
-      font-size: 1rem;
-    `,
-    tableWrapper: css`
-      margin-top: 24px;
-      padding: ${getPadding()};
-      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
-      border: 1px solid #ffffff;
-      border-radius: 24px;
-      position: relative;
-    `,
-    progress: css`
-      width: calc(100% - 30px);
-      position: absolute;
-      top: 0;
-      left: 15px;
-    `,
-  }
-
-  return (
-    <Box>
-      <Box css={styles.title}>Factored {title}</Box>
-      <Box css={styles.description} marginBottom='47px'>
-        {!isActive && (
-          <Box component='span'>
-            Please connect wallet to check your factored {title.toLowerCase()}.
-          </Box>
-        )}
-        {isActive && !hasActiveLoan && (
-          <Box component='span'>
-            You don’t have any factored {title.toLowerCase()}.
-          </Box>
-        )}
-        {isActive && hasActiveLoan && factoredItem && (
-          <Box css={styles.tableWrapper}>
-            {loading && (
-              <Box css={styles.progress}>
-                <LinearProgress />
-              </Box>
-            )}
-            <HumaTable
-              columns={getColumns(handlePayManually)}
-              rows={[factoredItem]}
-            />
-          </Box>
-        )}
-      </Box>
-    </Box>
-  )
-}
+import { Box, css, LinearProgress, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import {
+  AccountStats,
+  downScale,
+  formatMoney,
+  hasRFActiveLoan,
+  PoolInfoType,
+  timestampToLL,
+  useMQ,
+  usePoolUnderlyingToken,
+} from '@huma-finance/shared'
+import React, { useEffect, useState } from 'react'
+
+import { ColumnType } from '../../utilTypes'
+import { HumaTable } from '../HumaTable'
+import { ReceiptIcon } from '../icons'
+
+type Props<T> = {
+  title: 'Streams' | 'Invoices'
+  poolInfo: PoolInfoType
+  loading: boolean
+  accountStats: AccountStats
+  handlePayManually: (item: T) => void
+  getColumns: (handlePayManually: (item: T) => void) => ColumnType<T>[]
+  setItem?: (
+    accountStats: AccountStats,
+  ) => Promise<{ name?: string; payer?: string }>
+}
+
+export function FactoredList<T>({
+  title,
+  poolInfo,
+  loading,
+  accountStats,
+  handlePayManually,
+  getColumns,
+  setItem,
+}: Props<T>): React.ReactElement {
+  const theme = useTheme()
+  const { isMdSize } = useMQ()
+  const { isActive } = useWeb3React()
+  const { decimals } = usePoolUnderlyingToken(
+    poolInfo.poolName,
+    poolInfo.poolType,
+  )
+  const [factoredItem, setFactoredItem] = useState<Partial<T>>()
+  const { creditRecord, receivableInfo } = accountStats
+  const hasActiveLoan = hasRFActiveLoan(creditRecord, receivableInfo)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (creditRecord && receivableInfo?.receivableParam.gt(0) && decimals) {
+        const id = receivableInfo.receivableParam.toString()
+        const dueDate = timestampToLL(creditRecord.dueDate.toNumber())
+        const { receivableAmount } = receivableInfo
+        const { totalDue } = creditRecord
+        let factoredItem = {
+          id,
+          due: dueDate,
+          icon: <ReceiptIcon css={{ width: '18px' }} />,
+          amount: formatMoney(downScale(receivableAmount.toString(), decimals)),
+          factored: formatMoney(downScale(totalDue.toString(), decimals)),
+          remained: formatMoney(
+            downScale(receivableAmount.sub(totalDue).toString(), decimals),
+          ),
+        } as T
+        if (setItem) {
+          const customProps = await setItem(accountStats)
+          factoredItem = { ...factoredItem, ...customProps }
+        }
+        setFactoredItem(factoredItem)
+      }
+    }
+    fetchData()
+  }, [accountStats, creditRecord, decimals, receivableInfo, setItem])
+
+  const getPadding = () => {
+    if (isMdSize) {
+      return '0 8px 8px 8px'
+    }
+    return '0 16px 16px 16px'
+  }
+
+  const styles = {
+    title: css`
+      font-family: 'Uni-Neue-Black';
+      color: ${theme.palette.text.primary};
+      font-size: 24px;
+      margin-bottom: 16px;
+    `,
+    description: css`
+      font-family: 'Uni-Neue-Regular';
+      color: ${theme.palette.text.primary};
+      font-size: 1rem;
+    `,
+    tableWrapper: css`
+      margin-top: 24px;
+      padding: ${getPadding()};
+      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
+      border: 1px solid #ffffff;
+      border-radius: 24px;
+      position: relative;
+    `,
+    progress: css`
+      width: calc(100% - 30px);
+      position: absolute;
+      top: 0;
+      left: 15px;
+    `,
+  }
+
+  return (
+    <Box>
+      <Box css={styles.title}>Factored {title}</Box>
+      <Box css={styles.description} marginBottom='47px'>
+        {!isActive && (
+          <Box component='span'>
+            Please connect wallet to check your factored {title.toLowerCase()}.
+          </Box>
+        )}
+        {isActive && !hasActiveLoan && (
+          <Box component='span'>
+            You don’t have any factored {title.toLowerCase()}.
+          </Box>
+        )}
+        {isActive && hasActiveLoan && factoredItem && (
+          <Box css={styles.tableWrapper}>
+            {loading && (
+              <Box css={styles.progress}>
+                <LinearProgress />
+              </Box>
+            )}
+            <HumaTable
+              columns={getColumns(handlePayManually)}
+              rows={[factoredItem]}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  )
+}

package/src/components/Factoring/UpcomingList.tsx

@@ -1,90 +1,90 @@
-import { Box, css, LinearProgress, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { useMQ } from '@huma-finance/shared'
-import React from 'react'
-
-import { ColumnType, WCProps } from '../../utilTypes'
-import { HumaTable } from '../HumaTable'
-
-type Props<T> = {
-  items: T[] | undefined
-  loading: boolean
-  columns: ColumnType<T>[]
-  title: string
-  connectWalletDesc: string
-  noItemDesc: string
-}
-
-export function UpcomingList<T>({
-  items,
-  loading,
-  columns,
-  title,
-  connectWalletDesc,
-  noItemDesc,
-  children,
-}: WCProps<Props<T>>): React.ReactElement {
-  const theme = useTheme()
-  const { isActive } = useWeb3React()
-  const { isMdSize, isSmSize } = useMQ()
-
-  const getPadding = () => {
-    if (isMdSize) {
-      return '0 8px 8px 8px'
-    }
-    return '0 16px 16px 16px'
-  }
-
-  const styles = {
-    title: css`
-      font-family: 'Uni-Neue-Black';
-      color: ${theme.palette.text.primary};
-      font-size: 24px;
-      margin-bottom: 16px;
-    `,
-    description: css`
-      font-family: 'Uni-Neue-Regular';
-      color: ${theme.palette.text.primary};
-      font-size: 1rem;
-    `,
-    tableWrapper: css`
-      margin-top: 24px;
-      padding: ${getPadding()};
-      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
-      border: 1px solid #ffffff;
-      border-radius: 24px;
-      position: relative;
-    `,
-    progress: css`
-      width: calc(100% - 30px);
-      position: absolute;
-      top: 0;
-      left: 15px;
-    `,
-  }
-
-  return (
-    <Box>
-      <Box css={styles.title}>{title}</Box>
-      <Box css={styles.description} marginBottom='47px'>
-        {!isActive && <Box component='span'>{connectWalletDesc}</Box>}
-        {isActive && !items?.length && <Box>{noItemDesc}</Box>}
-        {isActive && items?.length && (
-          <Box css={styles.tableWrapper}>
-            {loading && (
-              <Box css={styles.progress}>
-                <LinearProgress />
-              </Box>
-            )}
-            <HumaTable
-              columns={columns}
-              rows={items}
-              hideRowsPerPage={isSmSize}
-            />
-          </Box>
-        )}
-        {children}
-      </Box>
-    </Box>
-  )
-}
+import { Box, css, LinearProgress, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { useMQ } from '@huma-finance/shared'
+import React from 'react'
+
+import { ColumnType, WCProps } from '../../utilTypes'
+import { HumaTable } from '../HumaTable'
+
+type Props<T> = {
+  items: T[] | undefined
+  loading: boolean
+  columns: ColumnType<T>[]
+  title: string
+  connectWalletDesc: string
+  noItemDesc: string
+}
+
+export function UpcomingList<T>({
+  items,
+  loading,
+  columns,
+  title,
+  connectWalletDesc,
+  noItemDesc,
+  children,
+}: WCProps<Props<T>>): React.ReactElement {
+  const theme = useTheme()
+  const { isActive } = useWeb3React()
+  const { isMdSize, isSmSize } = useMQ()
+
+  const getPadding = () => {
+    if (isMdSize) {
+      return '0 8px 8px 8px'
+    }
+    return '0 16px 16px 16px'
+  }
+
+  const styles = {
+    title: css`
+      font-family: 'Uni-Neue-Black';
+      color: ${theme.palette.text.primary};
+      font-size: 24px;
+      margin-bottom: 16px;
+    `,
+    description: css`
+      font-family: 'Uni-Neue-Regular';
+      color: ${theme.palette.text.primary};
+      font-size: 1rem;
+    `,
+    tableWrapper: css`
+      margin-top: 24px;
+      padding: ${getPadding()};
+      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
+      border: 1px solid #ffffff;
+      border-radius: 24px;
+      position: relative;
+    `,
+    progress: css`
+      width: calc(100% - 30px);
+      position: absolute;
+      top: 0;
+      left: 15px;
+    `,
+  }
+
+  return (
+    <Box>
+      <Box css={styles.title}>{title}</Box>
+      <Box css={styles.description} marginBottom='47px'>
+        {!isActive && <Box component='span'>{connectWalletDesc}</Box>}
+        {isActive && !items?.length && <Box>{noItemDesc}</Box>}
+        {isActive && items?.length && (
+          <Box css={styles.tableWrapper}>
+            {loading && (
+              <Box css={styles.progress}>
+                <LinearProgress />
+              </Box>
+            )}
+            <HumaTable
+              columns={columns}
+              rows={items}
+              hideRowsPerPage={isSmSize}
+            />
+          </Box>
+        )}
+        {children}
+      </Box>
+    </Box>
+  )
+}

package/src/components/InvoiceFactoring/borrow/1-Evaluation.tsx

@@ -1,46 +1,52 @@
-import { useWeb3React } from '@web3-react/core'
-import { ChainEnum, PoolInfoType, toBigNumber } from '@huma-finance/shared'
-import React, { useEffect } from 'react'
-
-import useEA from '../../../hooks/useEA'
-import { LoadingModal } from '../../LoadingModal'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-
-type Props = {
-  poolInfo: PoolInfoType
-  tokenId: string
-}
-
-export function Evaluation({ poolInfo, tokenId }: Props): React.ReactElement {
-  const { checkingEA } = useEA()
-  const { account, chainId } = useWeb3React()
-
-  useEffect(() => {
-    if (account && chainId) {
-      checkingEA(
-        {
-          poolAddress: poolInfo.pool,
-          borrowerWalletAddress: account,
-          receivableAddress: poolInfo.assetAddress,
-          receivableParam: toBigNumber(tokenId).toHexString(),
-        },
-        WIDGET_STEP.ChooseAmount,
-        chainId === ChainEnum.Goerli,
-      )
-    }
-  }, [
-    account,
-    chainId,
-    checkingEA,
-    poolInfo.assetAddress,
-    poolInfo.pool,
-    tokenId,
-  ])
-
-  return (
-    <LoadingModal
-      title='Checking Invoice'
-      description='Checking if the invoice qualifies for factoring...'
-    />
-  )
-}
+import { useWeb3React } from '@web3-react/core'
+import { ChainEnum, PoolInfoType, toBigNumber } from '@huma-finance/shared'
+import React, { useEffect } from 'react'
+
+import useEA from '../../../hooks/useEA'
+import { LoadingModal } from '../../LoadingModal'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+
+type Props = {
+  poolInfo: PoolInfoType
+  tokenId: string
+}
+
+export function Evaluation({ poolInfo, tokenId }: Props): React.ReactElement {
+  const { checkingEA } = useEA()
+  const { account, chainId } = useWeb3React()
+
+  useEffect(() => {
+    if (account && chainId) {
+      checkingEA(
+        {
+          poolAddress: poolInfo.pool,
+          borrowerWalletAddress: account,
+          receivableAddress: poolInfo.assetAddress,
+          receivableParam: toBigNumber(tokenId).toHexString(),
+          context: {
+            receivable: {
+              address: poolInfo.assetAddress!,
+              param: toBigNumber(tokenId).toHexString(),
+            },
+          },
+        },
+        WIDGET_STEP.ChooseAmount,
+        chainId === ChainEnum.Goerli,
+      )
+    }
+  }, [
+    account,
+    chainId,
+    checkingEA,
+    poolInfo.assetAddress,
+    poolInfo.pool,
+    tokenId,
+  ])
+
+  return (
+    <LoadingModal
+      title='Checking Invoice'
+      description='Checking if the invoice qualifies for factoring...'
+    />
+  )
+}

package/src/components/InvoiceFactoring/borrow/2-AllowList.tsx

@@ -1,34 +1,34 @@
-import { PoolInfoType } from '@huma-finance/shared'
-import React, { useCallback } from 'react'
-
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setError, setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { AllowListModal } from '../../AllowListModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-}
-
-export function AllowList({ poolInfo }: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Evaluation))
-  }, [dispatch])
-
-  const handleError = useCallback(
-    (errorMessage: string) => {
-      dispatch(setError({ errorMessage }))
-    },
-    [dispatch],
-  )
-
-  return (
-    <AllowListModal
-      poolInfo={poolInfo}
-      handleSuccess={handleSuccess}
-      handleError={handleError}
-    />
-  )
-}
+import { PoolInfoType } from '@huma-finance/shared'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setError, setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { AllowListModal } from '../../AllowListModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+}
+
+export function AllowList({ poolInfo }: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Evaluation))
+  }, [dispatch])
+
+  const handleError = useCallback(
+    (errorMessage: string) => {
+      dispatch(setError({ errorMessage }))
+    },
+    [dispatch],
+  )
+
+  return (
+    <AllowListModal
+      poolInfo={poolInfo}
+      handleSuccess={handleSuccess}
+      handleError={handleError}
+    />
+  )
+}