@huma-finance/widgets 0.0.10 → 0.0.12

package/src/components/HumaTable.tsx

@@ -1,158 +1,158 @@
-import { Box, css, TablePagination, useTheme } from '@mui/material'
-import Table from '@mui/material/Table'
-import TableBody from '@mui/material/TableBody'
-import TableCell from '@mui/material/TableCell'
-import TableContainer from '@mui/material/TableContainer'
-import TableHead from '@mui/material/TableHead'
-import TableRow from '@mui/material/TableRow'
-import * as React from 'react'
-
-import { ColumnType } from '../utilTypes'
-import { SeparatorIcon } from './icons'
-
-type Props<T> = {
-  columns: ColumnType<T>[]
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  rows?: any[]
-  hideRowsPerPage?: boolean
-}
-
-export function HumaTable<T>({
-  columns,
-  rows,
-  hideRowsPerPage = false,
-}: Props<T>): React.ReactElement | null {
-  const theme = useTheme()
-  const [page, setPage] = React.useState(0)
-  const [rowsPerPage, setRowsPerPage] = React.useState(5)
-  const noPagination = rows ? rows.length <= 5 : true
-  const rowperPageOptions = hideRowsPerPage ? [] : [5, 10, 25]
-
-  const styles = {
-    tableHeader: css`
-      font-family: 'Uni-Neue-Regular';
-      ${theme.cssMixins.rowVCentered}
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.87);
-    `,
-    tableBody: css`
-      font-family: 'Uni-Neue-Regular';
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.87);
-    `,
-  }
-
-  const handleChangePage = (event: unknown, newPage: number) => {
-    setPage(newPage)
-  }
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    setRowsPerPage(parseInt(event.target.value, 10))
-    setPage(0)
-  }
-
-  if (!columns) {
-    return null
-  }
-
-  return (
-    <>
-      <TableContainer>
-        <Table aria-label='simple table'>
-          <TableHead>
-            <TableRow>
-              {columns.map((column) => (
-                <TableCell key={column.title} width={column.width}>
-                  <Box css={styles.tableHeader}>
-                    {!column.noSeparator && <SeparatorIcon />}
-                    <Box
-                      component='span'
-                      sx={{ marginLeft: column.noSeparator ? '0' : '12px' }}
-                    >
-                      {column.title}
-                    </Box>
-                  </Box>
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows &&
-              rows
-                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                .map((row) => (
-                  <TableRow key={row.id || row.name}>
-                    {columns.map((column, index) => (
-                      <TableCell
-                        // eslint-disable-next-line react/no-array-index-key
-                        key={`${column.dataIndex}-${index}`}
-                        component='th'
-                        scope='row'
-                        css={styles.tableBody}
-                        width={column.width}
-                        sx={column.style}
-                      >
-                        {column.dataIndex && (
-                          <Box
-                            component='span'
-                            sx={{
-                              display: 'flex',
-                              alignItems: 'center',
-                              marginLeft: column.noSeparator ? '0' : '12px',
-                            }}
-                          >
-                            {row[column.dataIndex]}
-                          </Box>
-                        )}
-                        {column.action && (
-                          <Box
-                            component='span'
-                            sx={{
-                              display: 'flex',
-                              alignItems: 'center',
-                              marginLeft: column.noSeparator ? '0' : '12px',
-                              lineHeight: 0,
-                              height: 0,
-                            }}
-                          >
-                            {column.action(row)}
-                          </Box>
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      {!noPagination && (
-        <TablePagination
-          size='small'
-          sx={{
-            '.MuiTablePagination-selectLabel': {
-              fontSize: '12px',
-            },
-            '.MuiTablePagination-select': {
-              fontSize: '12px',
-            },
-            '.MuiTablePagination-displayedRows': {
-              fontSize: '12px',
-            },
-            '.MuiTablePagination-menuItem': {
-              fontSize: '14px',
-            },
-          }}
-          rowsPerPageOptions={rowperPageOptions}
-          component='div'
-          count={rows ? rows.length : 0}
-          rowsPerPage={rowsPerPage}
-          page={page}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-        />
-      )}
-    </>
-  )
-}
+import { Box, css, TablePagination, useTheme } from '@mui/material'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import * as React from 'react'
+
+import { ColumnType } from '../utilTypes'
+import { SeparatorIcon } from './icons'
+
+type Props<T> = {
+  columns: ColumnType<T>[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rows?: any[]
+  hideRowsPerPage?: boolean
+}
+
+export function HumaTable<T>({
+  columns,
+  rows,
+  hideRowsPerPage = false,
+}: Props<T>): React.ReactElement | null {
+  const theme = useTheme()
+  const [page, setPage] = React.useState(0)
+  const [rowsPerPage, setRowsPerPage] = React.useState(5)
+  const noPagination = rows ? rows.length <= 5 : true
+  const rowperPageOptions = hideRowsPerPage ? [] : [5, 10, 25]
+
+  const styles = {
+    tableHeader: css`
+      font-family: 'Uni-Neue-Regular';
+      ${theme.cssMixins.rowVCentered}
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.87);
+    `,
+    tableBody: css`
+      font-family: 'Uni-Neue-Regular';
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.87);
+    `,
+  }
+
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage)
+  }
+
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setRowsPerPage(parseInt(event.target.value, 10))
+    setPage(0)
+  }
+
+  if (!columns) {
+    return null
+  }
+
+  return (
+    <>
+      <TableContainer>
+        <Table aria-label='simple table'>
+          <TableHead>
+            <TableRow>
+              {columns.map((column) => (
+                <TableCell key={column.title} width={column.width}>
+                  <Box css={styles.tableHeader}>
+                    {!column.noSeparator && <SeparatorIcon />}
+                    <Box
+                      component='span'
+                      sx={{ marginLeft: column.noSeparator ? '0' : '12px' }}
+                    >
+                      {column.title}
+                    </Box>
+                  </Box>
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows &&
+              rows
+                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                .map((row) => (
+                  <TableRow key={row.id || row.name}>
+                    {columns.map((column, index) => (
+                      <TableCell
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={`${column.dataIndex}-${index}`}
+                        component='th'
+                        scope='row'
+                        css={styles.tableBody}
+                        width={column.width}
+                        sx={column.style}
+                      >
+                        {column.dataIndex && (
+                          <Box
+                            component='span'
+                            sx={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              marginLeft: column.noSeparator ? '0' : '12px',
+                            }}
+                          >
+                            {row[column.dataIndex]}
+                          </Box>
+                        )}
+                        {column.action && (
+                          <Box
+                            component='span'
+                            sx={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              marginLeft: column.noSeparator ? '0' : '12px',
+                              lineHeight: 0,
+                              height: 0,
+                            }}
+                          >
+                            {column.action(row)}
+                          </Box>
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      {!noPagination && (
+        <TablePagination
+          size='small'
+          sx={{
+            '.MuiTablePagination-selectLabel': {
+              fontSize: '12px',
+            },
+            '.MuiTablePagination-select': {
+              fontSize: '12px',
+            },
+            '.MuiTablePagination-displayedRows': {
+              fontSize: '12px',
+            },
+            '.MuiTablePagination-menuItem': {
+              fontSize: '14px',
+            },
+          }}
+          rowsPerPageOptions={rowperPageOptions}
+          component='div'
+          count={rows ? rows.length : 0}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      )}
+    </>
+  )
+}

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}
+    />
+  )
+}

package/src/components/InvoiceFactoring/borrow/3-ChooseAmount.tsx

@@ -1,86 +1,86 @@
-import {
-  AccountStats,
-  PoolInfoType,
-  upScale,
-  useFeeManager,
-} from '@huma-finance/shared'
-import React, { useCallback, useState } from 'react'
-
-import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
-import { setBorrowInfo } from '../../../store/widgets.reducers'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ChooseAmountModal } from '../../ChooseAmountModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  accountStats: AccountStats
-}
-
-export function ChooseAmount({
-  poolInfo,
-  accountStats,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { creditRecord } = accountStats
-  const [chargedFees, setChargedFees] = useState(0)
-  const [currentAmount, setCurrentAmount] = useState(0)
-  const { approval } = useAppSelector(selectWidgetState)
-  const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
-  const [remainder, setRemainder] = useState(approval!.receivable?.amount)
-
-  const getAvailableCreditLimit = () => {
-    if (approval && creditRecord) {
-      const principal = creditRecord.unbilledPrincipal
-        .add(creditRecord.totalDue)
-        .sub(creditRecord.feesAndInterestDue)
-        .toNumber()
-      return Number(approval.terms.creditLimit) - principal
-    }
-    return 0
-  }
-
-  const handleChangeAmount = useCallback(
-    (newAmount: number) => {
-      if (approval) {
-        setCurrentAmount(newAmount)
-        setChargedFees(getFeesCharged(newAmount))
-        setRemainder(Number(approval.receivable!.amount) - newAmount)
-      }
-    },
-    [approval, getFeesCharged],
-  )
-
-  const handleAction = useCallback(() => {
-    dispatch(
-      setBorrowInfo({
-        borrowAmount: currentAmount,
-        borrowAmountBN: upScale(currentAmount, approval?.token.decimal),
-        chargedFees,
-        remainder: Number(remainder!),
-        nextStep: WIDGET_STEP.ConfirmTransfer,
-      }),
-    )
-  }, [approval?.token.decimal, chargedFees, currentAmount, dispatch, remainder])
-
-  if (!approval) {
-    return null
-  }
-
-  return (
-    <ChooseAmountModal
-      title='Choose Amount'
-      description1='Access up to 80% of your invoice value'
-      description2='The remainder will be sent to your wallet when the invoice is paid'
-      sliderMax={getAvailableCreditLimit()}
-      currentAmount={currentAmount}
-      tokenSymbol={approval.token.symbol}
-      topLeft='Fees'
-      topRight={`${chargedFees} ${approval.token.symbol}`}
-      downLeft='Remainder'
-      downRight={`${remainder} ${approval.token.symbol}`}
-      handleChangeAmount={handleChangeAmount}
-      handleAction={handleAction}
-    />
-  )
-}
+import {
+  AccountStats,
+  PoolInfoType,
+  upScale,
+  useFeeManager,
+} from '@huma-finance/shared'
+import React, { useCallback, useState } from 'react'
+
+import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
+import { setBorrowInfo } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ChooseAmountModal } from '../../ChooseAmountModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  accountStats: AccountStats
+}
+
+export function ChooseAmount({
+  poolInfo,
+  accountStats,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { creditRecord } = accountStats
+  const [chargedFees, setChargedFees] = useState(0)
+  const [currentAmount, setCurrentAmount] = useState(0)
+  const { approval } = useAppSelector(selectWidgetState)
+  const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
+  const [remainder, setRemainder] = useState(approval!.receivable?.amount)
+
+  const getAvailableCreditLimit = () => {
+    if (approval && creditRecord) {
+      const principal = creditRecord.unbilledPrincipal
+        .add(creditRecord.totalDue)
+        .sub(creditRecord.feesAndInterestDue)
+        .toNumber()
+      return Number(approval.terms.creditLimit) - principal
+    }
+    return 0
+  }
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      if (approval) {
+        setCurrentAmount(newAmount)
+        setChargedFees(getFeesCharged(newAmount))
+        setRemainder(Number(approval.receivable!.amount) - newAmount)
+      }
+    },
+    [approval, getFeesCharged],
+  )
+
+  const handleAction = useCallback(() => {
+    dispatch(
+      setBorrowInfo({
+        borrowAmount: currentAmount,
+        borrowAmountBN: upScale(currentAmount, approval?.token.decimal),
+        chargedFees,
+        remainder: Number(remainder!),
+        nextStep: WIDGET_STEP.ConfirmTransfer,
+      }),
+    )
+  }, [approval?.token.decimal, chargedFees, currentAmount, dispatch, remainder])
+
+  if (!approval) {
+    return null
+  }
+
+  return (
+    <ChooseAmountModal
+      title='Choose Amount'
+      description1='Access up to 80% of your invoice value'
+      description2='The remainder will be sent to your wallet when the invoice is paid'
+      sliderMax={getAvailableCreditLimit()}
+      currentAmount={currentAmount}
+      tokenSymbol={approval.token.symbol}
+      topLeft='Fees'
+      topRight={`${chargedFees} ${approval.token.symbol}`}
+      downLeft='Remainder'
+      downRight={`${remainder} ${approval.token.symbol}`}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+    />
+  )
+}