@huma-finance/widgets 0.0.35 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.35",
-    "@huma-finance/shared": "^0.0.35",
+    "@huma-finance/sdk": "^0.0.37",
+    "@huma-finance/shared": "^0.0.37",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -83,6 +83,7 @@
     "prebuild": "tsc -p tsconfig.build.json",
     "build": "rollup -c",
     "cosmos": "cosmos",
+    "lint": "eslint --max-warnings=0 \"src/**/*.{js,ts,tsx,graphql}\"",
     "lint-staged": "lint-staged",
     "e2e": "cypress run --config baseUrl=http://localhost:8000 --headed --browser chrome --e2e",
     "generateDocs": "jsdoc2md --files 'src/**/*.tsx' --configure ./jsdoc2md.json > API.md",
@@ -192,5 +193,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "88e081a522c4efde3d7a45c7a5789a06f8f833af"
+  "gitHead": "7ec34fafed3ca19acf9e1be6e3de27d6a03460a5"
 }

package/src/components/Activity.tsx

@@ -47,7 +47,7 @@ type ActivityDataType = {
 }
 
 const columns = [
-  { title: 'Action', dataIndex: 'eventText', noSeparator: true },
+  { title: 'Action', dataIndex: 'eventText' },
   {
     title: 'Amount',
     action: (record: { amount: string }) => {
@@ -117,10 +117,6 @@ export function Activity({
     `,
   }
 
-  if (!events) {
-    return null
-  }
-
   return (
     <Box css={styles.wrapper}>
       <Box css={styles.title}>Recent Activity</Box>

package/src/components/ApproveAllowanceModal.tsx

@@ -1,7 +1,7 @@
 import { MaxUint256 } from '@ethersproject/constants'
 import { Box, css, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
-import { BigNumber } from 'ethers'
+import { BigNumber, BigNumberish } from 'ethers'
 import {
   PoolInfoType,
   sendTxAtom,
@@ -23,8 +23,9 @@ import { WrapperModal } from './WrapperModal'
 type Props = {
   poolInfo: PoolInfoType
   showAutoPayback?: boolean
-  allowanceAmount?: BigNumber | string
+  allowanceAmount?: BigNumberish
   spender?: string
+  resetAfterSuccess?: boolean
   handleSuccess: () => void
 }
 
@@ -33,10 +34,11 @@ export function ApproveAllowanceModal({
   showAutoPayback = false,
   allowanceAmount,
   spender,
+  resetAfterSuccess = true,
   handleSuccess,
 }: Props): React.ReactElement | null {
   const theme = useTheme()
-  const { provider } = useWeb3React()
+  const { provider, account } = useWeb3React()
   const { poolUnderlyingToken } = poolInfo
   const { symbol } = poolUnderlyingToken
   const poolUnderlyingTokenContract = usePoolUnderlyingTokenContract(
@@ -49,10 +51,12 @@ export function ApproveAllowanceModal({
 
   useEffect(() => {
     if (state === TxStateType.Success) {
-      reset()
+      if (resetAfterSuccess) {
+        reset()
+      }
       handleSuccess()
     }
-  }, [handleSuccess, reset, state, symbol])
+  }, [handleSuccess, reset, resetAfterSuccess, state, symbol])
 
   const styles = {
     iconWrapper: css`
@@ -71,14 +75,24 @@ export function ApproveAllowanceModal({
     `,
   }
 
-  const sendApprove = useCallback(() => {
+  const sendIncreaseAllowance = useCallback(async () => {
+    const allowanceSpender = spender ?? poolInfo.pool
+    const targetAllowanceAmount = allowanceAmount ?? MaxUint256
+    const currentAllowance = await poolUnderlyingTokenContract?.allowance(
+      account!,
+      allowanceSpender,
+    )
+    const amountToIncrease = BigNumber.from(targetAllowanceAmount).sub(
+      currentAllowance ?? 0,
+    )
     send({
       contract: poolUnderlyingTokenContract!,
-      method: 'approve',
-      params: [spender ?? poolInfo.pool, allowanceAmount ?? MaxUint256],
+      method: 'increaseAllowance',
+      params: [allowanceSpender, amountToIncrease],
       provider,
     })
   }, [
+    account,
     allowanceAmount,
     poolInfo.pool,
     poolUnderlyingTokenContract,
@@ -89,7 +103,7 @@ export function ApproveAllowanceModal({
 
   useMount(() => {
     if (!showAutoPayback) {
-      sendApprove()
+      sendIncreaseAllowance()
     }
   })
 
@@ -106,7 +120,7 @@ export function ApproveAllowanceModal({
           This allowance transaction removes the need to confirm follow up{' '}
           {symbol} transactions. Gas is on us.
         </Box>
-        <BottomButton variant='contained' onClick={sendApprove}>
+        <BottomButton variant='contained' onClick={sendIncreaseAllowance}>
           APPROVE {symbol} PAYMENTS
         </BottomButton>
       </WrapperModal>

package/src/components/CreditLine/approve/1-ApproveAllowance.tsx

@@ -0,0 +1,34 @@
+import { PoolInfoType } from '@huma-finance/shared'
+import { BigNumberish } from 'ethers'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ApproveAllowanceModal } from '../../ApproveAllowanceModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  amount?: BigNumberish
+}
+
+export function ApproveAllowance({
+  poolInfo,
+  amount,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  return (
+    <ApproveAllowanceModal
+      poolInfo={poolInfo}
+      allowanceAmount={amount}
+      handleSuccess={handleSuccess}
+      resetAfterSuccess={false}
+      showAutoPayback
+    />
+  )
+}

package/src/components/CreditLine/approve/2-Success.tsx

@@ -0,0 +1,43 @@
+import {
+  PoolInfoType,
+  decodeLogs,
+  downScale,
+  formatMoney,
+  sendTxAtom,
+} from '@huma-finance/shared'
+import erc20Abi from '@huma-finance/shared/dist/abis/erc20.json'
+import React, { useEffect, useState } from 'react'
+
+import { useAtom } from 'jotai'
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleAction: () => void
+}
+
+export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
+  const { symbol, decimals } = poolInfo.poolUnderlyingToken
+  const [{ txReceipt }] = useAtom(sendTxAtom)
+  const [approvedAmount, setApprovedAmount] = useState<string | undefined>()
+
+  useEffect(() => {
+    if (txReceipt) {
+      const [event] = decodeLogs(txReceipt.logs, erc20Abi)
+      if (event) {
+        const payedAmount = downScale(event.args.value.toString(), decimals)
+        setApprovedAmount(payedAmount)
+      }
+    }
+  }, [decimals, txReceipt])
+
+  return (
+    <TxDoneModal
+      handleAction={handleAction}
+      content={[
+        `You successfully approved ${formatMoney(approvedAmount)} ${symbol}.`,
+        `Your pool will automatically pay off the due amount on the credit line before the end of each billing cycle.`,
+      ]}
+    />
+  )
+}

package/src/components/CreditLine/approve/index.tsx

@@ -0,0 +1,85 @@
+import {
+  POOL_NAME,
+  POOL_TYPE,
+  useAccountStats,
+  usePoolInfo,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumberish } from 'ethers'
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ErrorModal } from '../../ErrorModal'
+import { WidgetWrapper } from '../../WidgetWrapper'
+import { ApproveAllowance } from './1-ApproveAllowance'
+import { Success } from './2-Success'
+
+/**
+ * Credit line pool approve allowance props
+ * @typedef {Object} CreditLineApproveProps
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @property {POOL_TYPE} poolType The type of the pool.
+ * @property {BigNumberish|undefined} amount The amount to approve.
+ * @property {function():void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
+ * @property {function((number|undefined)):void|undefined} handleSuccess Optional function to notify that the credit line pool approve allowance action is successful.
+ */
+export type CreditLineApproveProps = {
+  poolName: keyof typeof POOL_NAME
+  poolType: keyof typeof POOL_TYPE
+  amount?: BigNumberish
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function CreditLineApprove({
+  poolName: poolNameStr,
+  poolType: poolTypeStr,
+  amount,
+  handleClose,
+  handleSuccess,
+}: CreditLineApproveProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { account } = useWeb3React()
+  const poolName = POOL_NAME[poolNameStr]
+  const poolType = POOL_TYPE[poolTypeStr]
+  const poolInfo = usePoolInfo(poolName, poolType)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [accountStats] = useAccountStats(poolName, poolType, account)
+  const { creditRecord } = accountStats
+
+  useEffect(() => {
+    dispatch(setStep(WIDGET_STEP.ApproveAllowance))
+  }, [dispatch])
+
+  if (!poolInfo) {
+    return null
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      isLoading={!creditRecord}
+      loadingTitle='Approve Allowance'
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance poolInfo={poolInfo} amount={amount} />
+      )}
+      {step === WIDGET_STEP.Done && (
+        <Success poolInfo={poolInfo} handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Approve Allowance'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

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

@@ -3,7 +3,9 @@ import {
   PoolInfoType,
   upScale,
   useCLFeeManager,
+  useCLPoolAllowance,
 } from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
 import React, { useCallback, useState } from 'react'
 
 import { useAppDispatch } from '../../../hooks/useRedux'
@@ -21,6 +23,7 @@ export function ChooseAmount({
   accountStats,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
+  const { account } = useWeb3React()
   const { poolUnderlyingToken } = poolInfo
   const { symbol, decimals } = poolUnderlyingToken
   const { getFeesCharged } = useCLFeeManager(poolInfo.poolName)
@@ -28,6 +31,7 @@ export function ChooseAmount({
   const [currentAmount, setCurrentAmount] = useState(0)
   const { creditRecordStatic, creditAvailableAmount } = accountStats
 
+  const { approved } = useCLPoolAllowance(poolInfo.poolName, account)
   const handleChangeAmount = useCallback(
     (newAmount: number) => {
       setCurrentAmount(newAmount)
@@ -38,7 +42,9 @@ export function ChooseAmount({
   )
 
   const handleAction = useCallback(() => {
-    const nextStep = WIDGET_STEP.Transfer
+    const nextStep = approved
+      ? WIDGET_STEP.Transfer
+      : WIDGET_STEP.ApproveAllowance
     dispatch(
       setBorrowInfo({
         borrowAmount: currentAmount,
@@ -47,7 +53,7 @@ export function ChooseAmount({
         nextStep,
       }),
     )
-  }, [chargedFees, currentAmount, decimals, dispatch])
+  }, [approved, chargedFees, currentAmount, decimals, dispatch])
 
   return (
     <ChooseAmountModal

package/src/components/CreditLine/borrow/{4-ApproveAllowance.tsx → 3-ApproveAllowance.tsx}

@@ -16,7 +16,7 @@ export function ApproveAllowance({
   const dispatch = useAppDispatch()
 
   const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
+    dispatch(setStep(WIDGET_STEP.Transfer))
   }, [dispatch])
 
   return (

package/src/components/CreditLine/borrow/{3-Transfer.tsx → 4-Transfer.tsx}

@@ -1,13 +1,7 @@
-import {
-  PoolInfoType,
-  toBigNumber,
-  txAtom,
-  useCLPoolAllowance,
-} from '@huma-finance/shared'
+import { PoolInfoType, txAtom } from '@huma-finance/shared'
+import { useResetAtom } from 'jotai/utils'
 import React, { useCallback } from 'react'
 
-import { useResetAtom } from 'jotai/utils'
-import { useWeb3React } from '@web3-react/core'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -21,17 +15,13 @@ type Props = {
 export function Transfer({ poolInfo }: Props): React.ReactElement {
   const dispatch = useAppDispatch()
   const reset = useResetAtom(txAtom)
-  const { account } = useWeb3React()
   const { borrowAmountBN } = useAppSelector(selectWidgetState)
-  const { allowance } = useCLPoolAllowance(poolInfo.poolName, account)
 
   const handleSuccess = useCallback(() => {
     reset()
-    const nextStep = allowance.gte(toBigNumber(borrowAmountBN!))
-      ? WIDGET_STEP.Done
-      : WIDGET_STEP.ApproveAllowance
+    const nextStep = WIDGET_STEP.Done
     dispatch(setStep(nextStep))
-  }, [allowance, borrowAmountBN, dispatch, reset])
+  }, [dispatch, reset])
 
   return (
     <TxSendModal

package/src/components/CreditLine/borrow/index.tsx

@@ -17,8 +17,8 @@ import { ErrorModal } from '../../ErrorModal'
 import { WidgetWrapper } from '../../WidgetWrapper'
 import { Evaluation } from './1-Evaluation'
 import { ChooseAmount } from './2-ChooseAmount'
-import { ApproveAllowance } from './4-ApproveAllowance'
-import { Transfer } from './3-Transfer'
+import { ApproveAllowance } from './3-ApproveAllowance'
+import { Transfer } from './4-Transfer'
 import { Success } from './5-Success'
 import { Notifications } from './6-Notifications'
 import {

package/src/components/HumaTable.tsx

@@ -1,4 +1,4 @@
-import { Box, css, TablePagination, useTheme } from '@mui/material'
+import { Box, css, Skeleton, TablePagination, useTheme } from '@mui/material'
 import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
@@ -7,6 +7,7 @@ import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import * as React from 'react'
 
+import { useElementDimensions } from '../hooks/useElementDimensions'
 import { ColumnType } from '../utilTypes'
 import { SeparatorIcon } from './icons'
 
@@ -17,16 +18,20 @@ type Props<T> = {
   hideRowsPerPage?: boolean
 }
 
+// @TODO: Move HumaTable along with Superfluid widget to Dapp package
 export function HumaTable<T>({
   columns,
   rows,
   hideRowsPerPage = false,
 }: Props<T>): React.ReactElement | null {
   const theme = useTheme()
+  const ref = React.useRef()
   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 rowPerPageOptions = hideRowsPerPage ? [] : [5, 10, 25]
+  const { width } = useElementDimensions(ref)
+  const isLoading = !columns || !rows
 
   const styles = {
     tableHeader: css`
@@ -40,6 +45,14 @@ export function HumaTable<T>({
       font-size: 14px;
       color: rgba(0, 0, 0, 0.87);
     `,
+    empty: css`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 20px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 14px;
+    `,
   }
 
   const handleChangePage = (event: unknown, newPage: number) => {
@@ -53,77 +66,96 @@ export function HumaTable<T>({
     setPage(0)
   }
 
-  if (!columns) {
-    return null
+  const getTableHeader = () => (
+    <TableHead>
+      <TableRow>
+        {columns.map((column, index) => (
+          <TableCell key={column.title} width={column.width}>
+            <Box css={styles.tableHeader}>
+              {index !== 0 && <SeparatorIcon />}
+              <Box component='span' sx={{ marginLeft: index ? '12px' : '0' }}>
+                {column.title}
+              </Box>
+            </Box>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  )
+
+  if (isLoading) {
+    return (
+      <Box ref={ref}>
+        <Box sx={{ width }}>
+          <Skeleton />
+          <Skeleton />
+          <Skeleton />
+        </Box>
+      </Box>
+    )
+  }
+
+  if (rows.length === 0) {
+    return (
+      <TableContainer>
+        <Table aria-label='simple table'>{getTableHeader()}</Table>
+        <Box css={styles.empty}>
+          <Box>No Data</Box>
+        </Box>
+      </TableContainer>
+    )
   }
 
   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' }}
+          {getTableHeader()}
+          <TableBody>
+            {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.title}
-                    </Box>
-                  </Box>
-                </TableCell>
+                      {column.dataIndex && (
+                        <Box
+                          component='span'
+                          sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            marginLeft: index ? '12px' : '0',
+                          }}
+                        >
+                          {row[column.dataIndex]}
+                        </Box>
+                      )}
+                      {column.action && (
+                        <Box
+                          component='span'
+                          sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            marginLeft: index ? '12px' : '0',
+                            lineHeight: 0,
+                            height: 0,
+                          }}
+                        >
+                          {column.action(row)}
+                        </Box>
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
               ))}
-            </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>
@@ -144,13 +176,26 @@ export function HumaTable<T>({
               fontSize: '14px',
             },
           }}
-          rowsPerPageOptions={rowperPageOptions}
+          rowsPerPageOptions={rowPerPageOptions}
           component='div'
           count={rows ? rows.length : 0}
           rowsPerPage={rowsPerPage}
           page={page}
           onPageChange={handleChangePage}
           onRowsPerPageChange={handleChangeRowsPerPage}
+          SelectProps={{
+            MenuProps: {
+              sx: {
+                '.MuiTablePagination-menuItem': {
+                  padding: '4px 0',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  fontSize: '14px',
+                  lineHeight: '1.2',
+                },
+              },
+            },
+          }}
         />
       )}
     </>