@huma-finance/widgets 0.0.6-alpha.0

package/src/components/Factoring/FactoredList.tsx

@@ -0,0 +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>
+  )
+}

package/src/components/Factoring/UpcomingList.tsx

@@ -0,0 +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>
+  )
+}

package/src/components/Factoring/index.ts

@@ -0,0 +1,2 @@
+export * from './UpcomingList'
+export * from './FactoredList'

package/src/components/HumaLoading.tsx

@@ -0,0 +1,68 @@
+import { css } from '@emotion/react'
+import { useTheme } from '@mui/material'
+import React, { useEffect, useState } from 'react'
+
+import { LoaderIcon } from './icons'
+
+type Props = {
+  fullScreen?: boolean
+  minHeight?: string
+}
+
+export function HumaLoading({
+  fullScreen = false,
+  minHeight = '0px',
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const pathLength = 45
+  const [count, setCount] = useState(1)
+  const intervalTime = 30
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (count <= pathLength) {
+        const element = document.querySelector(
+          `#huma-loader-wrapper > svg > path:nth-of-type(${count})`,
+        )
+        if (element) {
+          // @ts-ignore
+          element.style.visibility = 'visible'
+          setCount((pre) => pre + 1)
+        }
+      } else {
+        const elements = document.querySelectorAll(
+          `#huma-loader-wrapper > svg > path`,
+        )
+        if (elements) {
+          // @ts-ignore
+          elements.forEach((element) => {
+            // @ts-ignore
+            element.style.visibility = 'hidden'
+          })
+          setCount(1)
+        }
+      }
+    }, intervalTime)
+    return () => clearInterval(interval)
+  }, [count])
+
+  const styles = {
+    wrapper: css`
+      ${theme.cssMixins.rowCentered};
+      min-height: ${fullScreen ? '100vh' : minHeight};
+      width: 50px;
+      height: 50px;
+    `,
+    icon: css`
+      & > path {
+        visibility: hidden;
+      }
+    `,
+  }
+
+  return (
+    <div css={styles.wrapper} id='huma-loader-wrapper'>
+      <LoaderIcon css={styles.icon} />
+    </div>
+  )
+}

package/src/components/HumaTable.tsx

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

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

@@ -0,0 +1,46 @@
+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...'
+    />
+  )
+}

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

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

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

@@ -0,0 +1,92 @@
+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 { approveInfo } = useAppSelector(selectWidgetState)
+  const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
+  const [remainder, setRemainder] = useState(approveInfo!.receivableAmount)
+
+  const getAvailableCreditLimit = () => {
+    if (approveInfo && creditRecord) {
+      const principal = creditRecord.unbilledPrincipal
+        .add(creditRecord.totalDue)
+        .sub(creditRecord.feesAndInterestDue)
+        .toNumber()
+      return Number(approveInfo.creditLimit) - principal
+    }
+    return 0
+  }
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      if (approveInfo) {
+        setCurrentAmount(newAmount)
+        setChargedFees(getFeesCharged(newAmount))
+        setRemainder(Number(approveInfo.receivableAmount) - newAmount)
+      }
+    },
+    [approveInfo, getFeesCharged],
+  )
+
+  const handleAction = useCallback(() => {
+    dispatch(
+      setBorrowInfo({
+        borrowAmount: currentAmount,
+        borrowAmountBN: upScale(currentAmount, approveInfo?.tokenDecimal),
+        chargedFees,
+        remainder: Number(remainder!),
+        nextStep: WIDGET_STEP.ConfirmTransfer,
+      }),
+    )
+  }, [
+    approveInfo?.tokenDecimal,
+    chargedFees,
+    currentAmount,
+    dispatch,
+    remainder,
+  ])
+
+  if (!approveInfo) {
+    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={approveInfo.tokenSymbol}
+      topLeft='Fees'
+      topRight={`${chargedFees} ${approveInfo.tokenSymbol}`}
+      downLeft='Remainder'
+      downRight={`${remainder} ${approveInfo.tokenSymbol}`}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+    />
+  )
+}