@huma-finance/widgets 0.0.29 → 0.0.31

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

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/Factoring/index.ts

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

package/src/components/HumaLoading.tsx

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