@huma-finance/widgets 0.0.31 → 0.0.33

package/src/components/ErrorModal.tsx

@@ -1,132 +1,132 @@
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
-import { Box, Button, css, Tooltip, Typography, useTheme } from '@mui/material'
-import { txAtom } from '@huma-finance/shared'
-import { useResetAtom } from 'jotai/utils'
-import React, { useCallback } from 'react'
-
-import { useAppDispatch } from '../hooks/useRedux'
-import { resetState } from '../store/widgets.reducers'
-import { SorryIcon } from './icons'
-
-type Props = {
-  title: string
-  errorReason?: string
-  errorMessage?: string
-  handleOk: () => void
-  okText?: string
-  shouldResetState?: boolean
-}
-
-export function ErrorModal({
-  title,
-  errorReason,
-  errorMessage,
-  handleOk,
-  okText = 'OKAY',
-  shouldResetState = true,
-}: Props): React.ReactElement {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-  const reset = useResetAtom(txAtom)
-
-  if (!errorReason) {
-    errorReason = 'Oops! Something went wrong'
-  }
-
-  const styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-    `,
-    header: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
-    `,
-    sorry: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: 67px;
-    `,
-    content: css`
-      box-sizing: border-box;
-      width: 100%;
-      display: inline-table;
-      padding: 16px 0;
-      background: linear-gradient(
-          0deg,
-          rgba(255, 255, 255, 0.9),
-          rgba(255, 255, 255, 0.9)
-        ),
-        #d32f2f;
-      border-radius: 4px;
-      position: relative;
-      margin-top: 30px;
-      height: 79px;
-    `,
-    errorIcon: css`
-      position: absolute;
-      font-size: 20px;
-      color: #d32f2f;
-      margin: 0 15px;
-    `,
-    messageWrapper: css`
-      color: #541313;
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      padding-left: 50px;
-    `,
-    errorMessage: css`
-      margin-top: 4px;
-      font-size: 14px;
-      font-family: 'Uni-Neue-Regular';
-      color: #541313;
-      cursor: pointer;
-      display: -webkit-box;
-      line-height: 16px;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-right: 20px;
-    `,
-    okButton: css`
-      & .MuiButtonBase-root {
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-      }
-    `,
-  }
-
-  const handleCloseModal = useCallback(() => {
-    reset()
-    handleOk()
-    if (shouldResetState) {
-      dispatch(resetState())
-    }
-  }, [dispatch, handleOk, reset, shouldResetState])
-
-  return (
-    <Box css={styles.wrapper}>
-      <Typography variant='h6' css={styles.header}>
-        {title}
-      </Typography>
-      <Box css={styles.sorry}>
-        <SorryIcon />
-      </Box>
-      <Box css={styles.content}>
-        <ErrorOutlineIcon css={styles.errorIcon} />
-        <Box css={styles.messageWrapper}>
-          <Box>{errorReason}</Box>
-          <Tooltip title={errorMessage} placement='top'>
-            <Box css={styles.errorMessage}>{errorMessage}</Box>
-          </Tooltip>
-        </Box>
-      </Box>
-      <Box css={styles.okButton}>
-        <Button variant='contained' onClick={handleCloseModal}>
-          {okText}
-        </Button>
-      </Box>
-    </Box>
-  )
-}
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import { Box, Button, css, Tooltip, Typography, useTheme } from '@mui/material'
+import { txAtom } from '@huma-finance/shared'
+import { useResetAtom } from 'jotai/utils'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch } from '../hooks/useRedux'
+import { resetState } from '../store/widgets.reducers'
+import { SorryIcon } from './icons'
+
+type Props = {
+  title: string
+  errorReason?: string
+  errorMessage?: string
+  handleOk: () => void
+  okText?: string
+  shouldResetState?: boolean
+}
+
+export function ErrorModal({
+  title,
+  errorReason,
+  errorMessage,
+  handleOk,
+  okText = 'OKAY',
+  shouldResetState = true,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const reset = useResetAtom(txAtom)
+
+  if (!errorReason) {
+    errorReason = 'Oops! Something went wrong'
+  }
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    sorry: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 67px;
+    `,
+    content: css`
+      box-sizing: border-box;
+      width: 100%;
+      display: inline-table;
+      padding: 16px 0;
+      background: linear-gradient(
+          0deg,
+          rgba(255, 255, 255, 0.9),
+          rgba(255, 255, 255, 0.9)
+        ),
+        #d32f2f;
+      border-radius: 4px;
+      position: relative;
+      margin-top: 30px;
+      height: 79px;
+    `,
+    errorIcon: css`
+      position: absolute;
+      font-size: 20px;
+      color: #d32f2f;
+      margin: 0 15px;
+    `,
+    messageWrapper: css`
+      color: #541313;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      padding-left: 50px;
+    `,
+    errorMessage: css`
+      margin-top: 4px;
+      font-size: 14px;
+      font-family: 'Uni-Neue-Regular';
+      color: #541313;
+      cursor: pointer;
+      display: -webkit-box;
+      line-height: 16px;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: 20px;
+    `,
+    okButton: css`
+      & .MuiButtonBase-root {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+      }
+    `,
+  }
+
+  const handleCloseModal = useCallback(() => {
+    reset()
+    handleOk()
+    if (shouldResetState) {
+      dispatch(resetState())
+    }
+  }, [dispatch, handleOk, reset, shouldResetState])
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        {title}
+      </Typography>
+      <Box css={styles.sorry}>
+        <SorryIcon />
+      </Box>
+      <Box css={styles.content}>
+        <ErrorOutlineIcon css={styles.errorIcon} />
+        <Box css={styles.messageWrapper}>
+          <Box>{errorReason}</Box>
+          <Tooltip title={errorMessage} placement='top'>
+            <Box css={styles.errorMessage}>{errorMessage}</Box>
+          </Tooltip>
+        </Box>
+      </Box>
+      <Box css={styles.okButton}>
+        <Button variant='contained' onClick={handleCloseModal}>
+          {okText}
+        </Button>
+      </Box>
+    </Box>
+  )
+}

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: '24px' }} />,
-          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: '24px' }} />,
+          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>
+  )
+}