@huma-finance/widgets 0.0.8 → 0.0.10

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/3-ChooseAmount.tsx

@@ -25,51 +25,45 @@ export function ChooseAmount({
   const { creditRecord } = accountStats
   const [chargedFees, setChargedFees] = useState(0)
   const [currentAmount, setCurrentAmount] = useState(0)
-  const { approveInfo } = useAppSelector(selectWidgetState)
+  const { approval } = useAppSelector(selectWidgetState)
   const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
-  const [remainder, setRemainder] = useState(approveInfo!.receivableAmount)
+  const [remainder, setRemainder] = useState(approval!.receivable?.amount)
 
   const getAvailableCreditLimit = () => {
-    if (approveInfo && creditRecord) {
+    if (approval && creditRecord) {
       const principal = creditRecord.unbilledPrincipal
         .add(creditRecord.totalDue)
         .sub(creditRecord.feesAndInterestDue)
         .toNumber()
-      return Number(approveInfo.creditLimit) - principal
+      return Number(approval.terms.creditLimit) - principal
     }
     return 0
   }
 
   const handleChangeAmount = useCallback(
     (newAmount: number) => {
-      if (approveInfo) {
+      if (approval) {
         setCurrentAmount(newAmount)
         setChargedFees(getFeesCharged(newAmount))
-        setRemainder(Number(approveInfo.receivableAmount) - newAmount)
+        setRemainder(Number(approval.receivable!.amount) - newAmount)
       }
     },
-    [approveInfo, getFeesCharged],
+    [approval, getFeesCharged],
   )
 
   const handleAction = useCallback(() => {
     dispatch(
       setBorrowInfo({
         borrowAmount: currentAmount,
-        borrowAmountBN: upScale(currentAmount, approveInfo?.tokenDecimal),
+        borrowAmountBN: upScale(currentAmount, approval?.token.decimal),
         chargedFees,
         remainder: Number(remainder!),
         nextStep: WIDGET_STEP.ConfirmTransfer,
       }),
     )
-  }, [
-    approveInfo?.tokenDecimal,
-    chargedFees,
-    currentAmount,
-    dispatch,
-    remainder,
-  ])
+  }, [approval?.token.decimal, chargedFees, currentAmount, dispatch, remainder])
 
-  if (!approveInfo) {
+  if (!approval) {
     return null
   }
 
@@ -80,11 +74,11 @@ export function ChooseAmount({
       description2='The remainder will be sent to your wallet when the invoice is paid'
       sliderMax={getAvailableCreditLimit()}
       currentAmount={currentAmount}
-      tokenSymbol={approveInfo.tokenSymbol}
+      tokenSymbol={approval.token.symbol}
       topLeft='Fees'
-      topRight={`${chargedFees} ${approveInfo.tokenSymbol}`}
+      topRight={`${chargedFees} ${approval.token.symbol}`}
       downLeft='Remainder'
-      downRight={`${remainder} ${approveInfo.tokenSymbol}`}
+      downRight={`${remainder} ${approval.token.symbol}`}
       handleChangeAmount={handleChangeAmount}
       handleAction={handleAction}
     />

package/src/components/InvoiceFactoring/borrow/4-ConfirmTransfer.tsx

@@ -11,7 +11,7 @@ import { WIDGET_STEP } from '../../../store/widgets.store'
 export function ConfirmTransfer(): React.ReactElement | null {
   const theme = useTheme()
   const dispatch = useAppDispatch()
-  const { borrowAmountNet, approveInfo } = useAppSelector(selectWidgetState)
+  const { borrowAmountNet, approval } = useAppSelector(selectWidgetState)
 
   const styles = {
     wrapper: css`
@@ -70,7 +70,7 @@ export function ConfirmTransfer(): React.ReactElement | null {
     dispatch(setStep(WIDGET_STEP.ApproveNFT))
   }
 
-  if (isEmpty(borrowAmountNet) || isEmpty(approveInfo)) {
+  if (isEmpty(borrowAmountNet) || isEmpty(approval)) {
     return null
   }
 
@@ -90,7 +90,7 @@ export function ConfirmTransfer(): React.ReactElement | null {
         </Box>
         <Box css={styles.transfer}>
           <Box>
-            {borrowAmountNet!} {approveInfo?.tokenSymbol}
+            {borrowAmountNet!} {approval?.token.symbol}
           </Box>
           <ArrowForwardIosIcon css={styles.arrow} />
           <Box>You</Box>

package/src/components/InvoiceFactoring/borrow/7-Success.tsx

@@ -1,20 +1,20 @@
-import React from 'react'
-import { useAppSelector } from '../../../hooks/useRedux'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { TxDoneModal } from '../../TxDoneModal'
-
-type Props = {
-  handleAction: () => void
-}
-
-export function Success({ handleAction }: Props): React.ReactElement {
-  const { borrowAmountNet, remainder, approveInfo } =
-    useAppSelector(selectWidgetState)
-
-  const content = [
-    `${borrowAmountNet} ${approveInfo?.tokenSymbol} is now in your wallet.`,
-    `The remaining ${remainder} ${approveInfo?.tokenSymbol} will be sent to your wallet when the invoice is paid.`,
-  ]
-
-  return <TxDoneModal handleAction={handleAction} content={content} />
-}
+import React from 'react'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  handleAction: () => void
+}
+
+export function Success({ handleAction }: Props): React.ReactElement {
+  const { borrowAmountNet, remainder, approval } =
+    useAppSelector(selectWidgetState)
+
+  const content = [
+    `${borrowAmountNet} ${approval?.token.symbol} is now in your wallet.`,
+    `The remaining ${remainder} ${approval?.token.symbol} will be sent to your wallet when the invoice is paid.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

package/src/components/Lend/supply/4-ConfirmTransfer.tsx

@@ -11,7 +11,7 @@ import { WIDGET_STEP } from '../../../store/widgets.store'
 export function ConfirmTransfer(): React.ReactElement | null {
   const theme = useTheme()
   const dispatch = useAppDispatch()
-  const { borrowAmountNet, approveInfo } = useAppSelector(selectWidgetState)
+  const { borrowAmountNet, approval } = useAppSelector(selectWidgetState)
 
   const styles = {
     wrapper: css`
@@ -70,7 +70,7 @@ export function ConfirmTransfer(): React.ReactElement | null {
     dispatch(setStep(WIDGET_STEP.ApproveNFT))
   }
 
-  if (isEmpty(borrowAmountNet) || isEmpty(approveInfo)) {
+  if (isEmpty(borrowAmountNet) || isEmpty(approval)) {
     return null
   }
 
@@ -90,7 +90,7 @@ export function ConfirmTransfer(): React.ReactElement | null {
         </Box>
         <Box css={styles.transfer}>
           <Box>
-            {borrowAmountNet!} {approveInfo?.tokenSymbol}
+            {borrowAmountNet!} {approval?.token.symbol}
           </Box>
           <ArrowForwardIosIcon css={styles.arrow} />
           <Box>You</Box>

package/src/components/LoadingModal.tsx

@@ -1,49 +1,49 @@
-import { Box, css, useTheme } from '@mui/material'
-import React from 'react'
-import { HumaLoading } from './HumaLoading'
-
-import { WrapperModal } from './WrapperModal'
-
-type Props = {
-  title: string
-  description?: string
-  hideLoader?: boolean
-  children?: React.ReactNode
-}
-
-export function LoadingModal({
-  title,
-  description,
-  hideLoader = false,
-  children,
-}: Props): React.ReactElement {
-  const theme = useTheme()
-
-  const styles = {
-    loader: css`
-      width: 100%;
-      ${theme.cssMixins.rowHCentered};
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    `,
-    bottom: css`
-      & .MuiButtonBase-root {
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-      }
-    `,
-  }
-
-  return (
-    <WrapperModal title={title} subTitle={description}>
-      {!hideLoader && (
-        <Box css={styles.loader}>
-          <HumaLoading />
-        </Box>
-      )}
-      <Box css={styles.bottom}>{children}</Box>
-    </WrapperModal>
-  )
-}
+import { Box, css, useTheme } from '@mui/material'
+import React from 'react'
+import { HumaLoading } from './HumaLoading'
+
+import { WrapperModal } from './WrapperModal'
+
+type Props = {
+  title: string
+  description?: string
+  hideLoader?: boolean
+  children?: React.ReactNode
+}
+
+export function LoadingModal({
+  title,
+  description,
+  hideLoader = false,
+  children,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+
+  const styles = {
+    loader: css`
+      width: 100%;
+      ${theme.cssMixins.rowHCentered};
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    `,
+    bottom: css`
+      & .MuiButtonBase-root {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+      }
+    `,
+  }
+
+  return (
+    <WrapperModal title={title} subTitle={description}>
+      {!hideLoader && (
+        <Box css={styles.loader}>
+          <HumaLoading />
+        </Box>
+      )}
+      <Box css={styles.bottom}>{children}</Box>
+    </WrapperModal>
+  )
+}

package/src/components/StreamFactoring/borrow/2-ChooseAmount.tsx

@@ -23,17 +23,17 @@ export function ChooseAmount({
   currentFlowRate,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const { approveInfo } = useAppSelector(selectWidgetState)
+  const { approval } = useAppSelector(selectWidgetState)
   const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
   const [chargedFees, setChargedFees] = useState(0)
   const [currentAmount, setCurrentAmount] = useState(0)
-  const borrowPeriodInSeconds = approveInfo!.intervalInDays * 24 * 60 * 60
+  const borrowPeriodInSeconds = approval!.terms.intervalInDays * 24 * 60 * 60
 
   const getBorrowFlowrateAndAmount = useCallback(
     (borrowAmount: number) => {
       const currentFlowRateBN = toBigNumber(currentFlowRate)
       const borrowAmountBN = toBigNumber(
-        upScale(borrowAmount, approveInfo!.tokenDecimal),
+        upScale(borrowAmount, approval!.token.decimal),
       )
 
       const totalAmountInBorrowPeriod = currentFlowRateBN.mul(
@@ -56,7 +56,7 @@ export function ChooseAmount({
         .div(currentFlowRateBN)
       const newBorrowAmount = downScale(
         newBorrowAmountBN,
-        approveInfo!.tokenDecimal,
+        approval!.token.decimal,
       )
 
       return {
@@ -65,17 +65,17 @@ export function ChooseAmount({
         borrowAmountBN: newBorrowAmountBN.toString(),
       }
     },
-    [approveInfo, borrowPeriodInSeconds, currentFlowRate],
+    [approval, borrowPeriodInSeconds, currentFlowRate],
   )
 
   const handleChangeAmount = useCallback(
     (newAmount: number) => {
-      if (approveInfo) {
+      if (approval) {
         setCurrentAmount(newAmount)
         setChargedFees(getFeesCharged(newAmount))
       }
     },
-    [approveInfo, getFeesCharged],
+    [approval, getFeesCharged],
   )
   const handleAction = useCallback(() => {
     const { borrowFlowrate, borrowAmount, borrowAmountBN } =
@@ -103,7 +103,7 @@ export function ChooseAmount({
     getBorrowFlowrateAndAmount,
   ])
 
-  if (!approveInfo) {
+  if (!approval) {
     return null
   }
 
@@ -111,11 +111,11 @@ export function ChooseAmount({
     <ChooseAmountModal
       title='Choose Amount'
       description1='Access up to 100% of your stream flowrate'
-      sliderMax={Number(approveInfo.creditLimit)}
+      sliderMax={Number(approval.terms.creditLimit)}
       currentAmount={currentAmount}
-      tokenSymbol={approveInfo.tokenSymbol}
+      tokenSymbol={approval.token.symbol}
       topLeft='Fees'
-      topRight={`${chargedFees} ${approveInfo.tokenSymbol}`}
+      topRight={`${chargedFees} ${approval.token.symbol}`}
       handleChangeAmount={handleChangeAmount}
       handleAction={handleAction}
       actionText='Confirm Transfer'