@huma-finance/widgets 0.0.8 → 0.0.11

package/src/components/Lend/supply/1-Evaluation.tsx

@@ -1,86 +1,86 @@
-import { Box, css, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { EAService, PoolInfoType } from '@huma-finance/shared'
-import React, { useState } from 'react'
-
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setError, setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { CustomError } from '../../../utilTypes'
-import { BottomButton } from '../../BottomButton'
-import { ApproveLenderIcon } from '../../icons'
-import { LoadingModal } from '../../LoadingModal'
-import { WrapperModal } from '../../WrapperModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  handleApproveSuccess: () => void
-}
-
-export function Evaluation({
-  poolInfo,
-  handleApproveSuccess,
-}: Props): React.ReactElement | null {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-  const { account, chainId } = useWeb3React()
-  const [loading, setLoading] = useState(false)
-
-  const styles = {
-    iconWrapper: css`
-      ${theme.cssMixins.rowCentered};
-      margin-top: 30px;
-    `,
-    description: css`
-      ${theme.cssMixins.rowCentered};
-      margin-top: 50px;
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      color: #a8a1b2;
-    `,
-  }
-
-  const approveLender = async () => {
-    if (account) {
-      try {
-        setLoading(true)
-        const payload = {
-          poolAddress: poolInfo.pool,
-          lenderWalletAddress: account,
-        }
-        await EAService.approveLender(payload, chainId!)
-        handleApproveSuccess()
-        setLoading(false)
-        dispatch(setStep(WIDGET_STEP.ChooseAmount))
-      } catch (e: unknown) {
-        const error = e as CustomError
-        setLoading(false)
-        dispatch(setError({ errorMessage: error.message }))
-      }
-    }
-  }
-
-  if (!loading) {
-    return (
-      <WrapperModal
-        title='Lender Approval'
-        subTitle='This pool requires lender approval'
-      >
-        <Box css={styles.iconWrapper}>
-          <ApproveLenderIcon />
-        </Box>
-        <Box css={styles.description} />
-        <BottomButton variant='contained' onClick={approveLender}>
-          GET APPROVED
-        </BottomButton>
-      </WrapperModal>
-    )
-  }
-
-  return (
-    <LoadingModal
-      title='Approval Pending'
-      description='Waiting for approval confirmation...'
-    />
-  )
-}
+import { Box, css, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { EAService, PoolInfoType } from '@huma-finance/shared'
+import React, { useState } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setError, setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { CustomError } from '../../../utilTypes'
+import { BottomButton } from '../../BottomButton'
+import { ApproveLenderIcon } from '../../icons'
+import { LoadingModal } from '../../LoadingModal'
+import { WrapperModal } from '../../WrapperModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleApproveSuccess: () => void
+}
+
+export function Evaluation({
+  poolInfo,
+  handleApproveSuccess,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const { account, chainId } = useWeb3React()
+  const [loading, setLoading] = useState(false)
+
+  const styles = {
+    iconWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: 30px;
+    `,
+    description: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: 50px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #a8a1b2;
+    `,
+  }
+
+  const approveLender = async () => {
+    if (account) {
+      try {
+        setLoading(true)
+        const payload = {
+          poolAddress: poolInfo.pool,
+          lenderWalletAddress: account,
+        }
+        await EAService.approveLender(payload, chainId!)
+        handleApproveSuccess()
+        setLoading(false)
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+      } catch (e: unknown) {
+        const error = e as CustomError
+        setLoading(false)
+        dispatch(setError({ errorMessage: error.message }))
+      }
+    }
+  }
+
+  if (!loading) {
+    return (
+      <WrapperModal
+        title='Lender Approval'
+        subTitle='This pool requires lender approval'
+      >
+        <Box css={styles.iconWrapper}>
+          <ApproveLenderIcon />
+        </Box>
+        <Box css={styles.description} />
+        <BottomButton variant='contained' onClick={approveLender}>
+          GET APPROVED
+        </BottomButton>
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <LoadingModal
+      title='Approval Pending'
+      description='Waiting for approval confirmation...'
+    />
+  )
+}

package/src/components/Lend/supply/2-ChooseAmount.tsx

@@ -1,70 +1,70 @@
-import { BigNumber } from 'ethers'
-import {
-  PoolInfoType,
-  timeUtil,
-  toBigNumber,
-  upScale,
-} from '@huma-finance/shared'
-import React, { useCallback, useState } from 'react'
-
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ChooseAmountModal } from '../../ChooseAmountModal'
-import { getIcon } from '../../icons'
-
-type Props = {
-  allowance: BigNumber
-  withdrawlLockoutSeconds: number | undefined
-  underlyingTokenBalance: string
-  poolInfo: PoolInfoType
-}
-
-export function ChooseAmount({
-  allowance,
-  withdrawlLockoutSeconds,
-  underlyingTokenBalance,
-  poolInfo,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { poolUnderlyingToken } = poolInfo
-  const { symbol, decimals } = poolUnderlyingToken
-  const [currentAmount, setCurrentAmount] = useState(0)
-  const depositAmount = upScale<number>(currentAmount, decimals)
-  const needApprove = toBigNumber(depositAmount).gt(allowance)
-  const withdrawlLockoutDays = timeUtil.secondsToDays(withdrawlLockoutSeconds)
-
-  const handleChangeAmount = useCallback(
-    (newAmount: number) => {
-      setCurrentAmount(newAmount)
-      dispatch(setSupplyAmount(newAmount))
-    },
-    [dispatch],
-  )
-
-  const handleAction = useCallback(() => {
-    const step = needApprove
-      ? WIDGET_STEP.ApproveAllowance
-      : WIDGET_STEP.Transfer
-    dispatch(setStep(step))
-  }, [dispatch, needApprove])
-
-  return (
-    <ChooseAmountModal
-      title={`Supply ${symbol}`}
-      description1='Choose Amount'
-      description2={`Depositors need to wait for ${withdrawlLockoutDays.toFixed(
-        0,
-      )} days before withdrawal`}
-      sliderMax={Number(underlyingTokenBalance)}
-      currentAmount={currentAmount}
-      tokenSymbol={symbol}
-      handleChangeAmount={handleChangeAmount}
-      handleAction={handleAction}
-      actionText={needApprove ? 'approve allowance' : 'supply'}
-      type='input'
-      tokenIcon={getIcon(poolInfo.poolUnderlyingToken.icon)!}
-      hideTerms
-    />
-  )
-}
+import { BigNumber } from 'ethers'
+import {
+  PoolInfoType,
+  timeUtil,
+  toBigNumber,
+  upScale,
+} from '@huma-finance/shared'
+import React, { useCallback, useState } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ChooseAmountModal } from '../../ChooseAmountModal'
+import { getIcon } from '../../icons'
+
+type Props = {
+  allowance: BigNumber
+  withdrawlLockoutSeconds: number | undefined
+  underlyingTokenBalance: string
+  poolInfo: PoolInfoType
+}
+
+export function ChooseAmount({
+  allowance,
+  withdrawlLockoutSeconds,
+  underlyingTokenBalance,
+  poolInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { poolUnderlyingToken } = poolInfo
+  const { symbol, decimals } = poolUnderlyingToken
+  const [currentAmount, setCurrentAmount] = useState(0)
+  const depositAmount = upScale<number>(currentAmount, decimals)
+  const needApprove = toBigNumber(depositAmount).gt(allowance)
+  const withdrawlLockoutDays = timeUtil.secondsToDays(withdrawlLockoutSeconds)
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      setCurrentAmount(newAmount)
+      dispatch(setSupplyAmount(newAmount))
+    },
+    [dispatch],
+  )
+
+  const handleAction = useCallback(() => {
+    const step = needApprove
+      ? WIDGET_STEP.ApproveAllowance
+      : WIDGET_STEP.Transfer
+    dispatch(setStep(step))
+  }, [dispatch, needApprove])
+
+  return (
+    <ChooseAmountModal
+      title={`Supply ${symbol}`}
+      description1='Choose Amount'
+      description2={`Depositors need to wait for ${withdrawlLockoutDays.toFixed(
+        0,
+      )} days before withdrawal`}
+      sliderMax={Number(underlyingTokenBalance)}
+      currentAmount={currentAmount}
+      tokenSymbol={symbol}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+      actionText={needApprove ? 'approve allowance' : 'supply'}
+      type='input'
+      tokenIcon={getIcon(poolInfo.poolUnderlyingToken.icon)!}
+      hideTerms
+    />
+  )
+}

package/src/components/Lend/supply/3-ApproveAllowance.tsx

@@ -1,25 +1,25 @@
-import { PoolInfoType } from '@huma-finance/shared'
-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
-}
-
-export function ApproveAllowance({
-  poolInfo,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
-  }, [dispatch])
-
-  return (
-    <ApproveAllowanceModal poolInfo={poolInfo} handleSuccess={handleSuccess} />
-  )
-}
+import { PoolInfoType } from '@huma-finance/shared'
+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
+}
+
+export function ApproveAllowance({
+  poolInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  return (
+    <ApproveAllowanceModal poolInfo={poolInfo} handleSuccess={handleSuccess} />
+  )
+}

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

@@ -1,104 +1,104 @@
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
-import { Box, Button, css, Typography, useTheme } from '@mui/material'
-import { isEmpty } from '@huma-finance/shared'
-import React from 'react'
-
-import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-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 styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-      ${theme.cssMixins.colStretch};
-    `,
-    header: css`
-      font-family: 'Uni-Neue-Bold';
-      ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
-    `,
-    description: css`
-      font-family: 'Uni-Neue-Regular';
-      font-weight: 500;
-      font-size: 16px;
-      color: #49505b;
-      margin-top: 30px;
-      text-align: center;
-    `,
-    transferWrapper: css`
-      margin-top: 75px;
-    `,
-    transfer: css`
-      font-family: 'Uni-Neue-Regular';
-      ${theme.cssMixins.rowSpaceBetweened}
-      ${theme.cssMixins.rowVCentered}
-      height: 72px;
-      background: #f9f8fa;
-      border-radius: 4px;
-      font-weight: 500;
-      font-size: 16px;
-      color: #49505b;
-      padding: 24px 32px;
-      margin-bottom: 9px;
-      position: relative;
-      box-sizing: border-box;
-    `,
-    arrow: css`
-      color: #d2d0d6;
-      position: absolute;
-      margin: auto;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    `,
-    okButton: css`
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-    `,
-  }
-
-  const handleAction = () => {
-    dispatch(setStep(WIDGET_STEP.ApproveNFT))
-  }
-
-  if (isEmpty(borrowAmountNet) || isEmpty(approveInfo)) {
-    return null
-  }
-
-  return (
-    <Box css={styles.wrapper}>
-      <Typography variant='h6' css={styles.header}>
-        Confirm transaction details
-      </Typography>
-      <Box css={styles.description}>
-        Huma keeps your Invoice NFT as collateral until it's fully paid.
-      </Box>
-      <Box css={styles.transferWrapper}>
-        <Box css={styles.transfer}>
-          <Box>Invoice NFT</Box>
-          <ArrowForwardIosIcon css={styles.arrow} />
-          <Box>Huma</Box>
-        </Box>
-        <Box css={styles.transfer}>
-          <Box>
-            {borrowAmountNet!} {approveInfo?.tokenSymbol}
-          </Box>
-          <ArrowForwardIosIcon css={styles.arrow} />
-          <Box>You</Box>
-        </Box>
-      </Box>
-      <Button variant='contained' css={styles.okButton} onClick={handleAction}>
-        Approve Transfer
-      </Button>
-    </Box>
-  )
-}
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+import { isEmpty } from '@huma-finance/shared'
+import React from 'react'
+
+import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+
+export function ConfirmTransfer(): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const { borrowAmountNet, approval } = useAppSelector(selectWidgetState)
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+      ${theme.cssMixins.colStretch};
+    `,
+    header: css`
+      font-family: 'Uni-Neue-Bold';
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    description: css`
+      font-family: 'Uni-Neue-Regular';
+      font-weight: 500;
+      font-size: 16px;
+      color: #49505b;
+      margin-top: 30px;
+      text-align: center;
+    `,
+    transferWrapper: css`
+      margin-top: 75px;
+    `,
+    transfer: css`
+      font-family: 'Uni-Neue-Regular';
+      ${theme.cssMixins.rowSpaceBetweened}
+      ${theme.cssMixins.rowVCentered}
+      height: 72px;
+      background: #f9f8fa;
+      border-radius: 4px;
+      font-weight: 500;
+      font-size: 16px;
+      color: #49505b;
+      padding: 24px 32px;
+      margin-bottom: 9px;
+      position: relative;
+      box-sizing: border-box;
+    `,
+    arrow: css`
+      color: #d2d0d6;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    `,
+    okButton: css`
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+    `,
+  }
+
+  const handleAction = () => {
+    dispatch(setStep(WIDGET_STEP.ApproveNFT))
+  }
+
+  if (isEmpty(borrowAmountNet) || isEmpty(approval)) {
+    return null
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        Confirm transaction details
+      </Typography>
+      <Box css={styles.description}>
+        Huma keeps your Invoice NFT as collateral until it's fully paid.
+      </Box>
+      <Box css={styles.transferWrapper}>
+        <Box css={styles.transfer}>
+          <Box>Invoice NFT</Box>
+          <ArrowForwardIosIcon css={styles.arrow} />
+          <Box>Huma</Box>
+        </Box>
+        <Box css={styles.transfer}>
+          <Box>
+            {borrowAmountNet!} {approval?.token.symbol}
+          </Box>
+          <ArrowForwardIosIcon css={styles.arrow} />
+          <Box>You</Box>
+        </Box>
+      </Box>
+      <Button variant='contained' css={styles.okButton} onClick={handleAction}>
+        Approve Transfer
+      </Button>
+    </Box>
+  )
+}

package/src/components/Lend/supply/6-Transfer.tsx

@@ -1,32 +1,32 @@
-import { PoolInfoType, toBigNumber, upScale } from '@huma-finance/shared'
-import React, { useCallback } from 'react'
-
-import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { TxSendModal } from '../../TxSendModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-}
-
-export function Transfer({ poolInfo }: Props): React.ReactElement {
-  const dispatch = useAppDispatch()
-  const { supplyAmount } = useAppSelector(selectWidgetState)
-  const { decimals } = poolInfo.poolUnderlyingToken
-  const supplyBigNumber = toBigNumber(upScale(supplyAmount!, decimals))
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
-  }, [dispatch])
-
-  return (
-    <TxSendModal
-      poolInfo={poolInfo}
-      method='deposit'
-      params={[supplyBigNumber]}
-      handleSuccess={handleSuccess}
-    />
-  )
-}
+import { PoolInfoType, toBigNumber, upScale } from '@huma-finance/shared'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { TxSendModal } from '../../TxSendModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+}
+
+export function Transfer({ poolInfo }: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { supplyAmount } = useAppSelector(selectWidgetState)
+  const { decimals } = poolInfo.poolUnderlyingToken
+  const supplyBigNumber = toBigNumber(upScale(supplyAmount!, decimals))
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  return (
+    <TxSendModal
+      poolInfo={poolInfo}
+      method='deposit'
+      params={[supplyBigNumber]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}