@huma-finance/widgets 0.0.35 → 0.0.36

package/src/components/CreditLine/borrow/1-Evaluation.tsx

@@ -1,157 +1,157 @@
-import { Box, Button, css, Typography, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { PoolInfoType } from '@huma-finance/shared'
-import React, { useEffect, useState } from 'react'
-
-import useEA from '../../../hooks/useEA'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { CheckCircleIcon, CheckGreenIcon } from '../../icons'
-import spinner from '../../icons/spinner.gif'
-
-type Props = {
-  poolInfo: PoolInfoType
-  handleApprove: () => void
-}
-
-export function Evaluation({
-  poolInfo,
-  handleApprove,
-}: Props): React.ReactElement {
-  const theme = useTheme()
-  const { checkingEA } = useEA()
-  const dispatch = useAppDispatch()
-  const { account, chainId } = useWeb3React()
-  const [status, setStatus] = useState<'checking' | 'success'>('checking')
-
-  useEffect(() => {
-    const fetchData = async () => {
-      if (account && chainId) {
-        await checkingEA(
-          {
-            poolAddress: poolInfo.pool,
-            borrowerWalletAddress: account,
-          },
-          WIDGET_STEP.Evaluation,
-        )
-        handleApprove()
-        setStatus('success')
-      }
-    }
-    fetchData()
-  }, [
-    account,
-    chainId,
-    checkingEA,
-    handleApprove,
-    poolInfo.assetAddress,
-    poolInfo.pool,
-  ])
-
-  const styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-    `,
-    header: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
-    `,
-    content: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: 30px;
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      line-height: 24px;
-      color: #49505b;
-      margin-bottom: 65px;
-    `,
-    checkWrapper: css`
-      ${theme.cssMixins.rowVCentered}
-      width: 100%;
-      height: 72px;
-      background: #f9f8fa;
-      border-radius: 4px;
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      color: #49505b;
-    `,
-    checkIcon: css`
-      ${theme.cssMixins.rowCentered}
-      width: 105px;
-      height: 100%;
-
-      & > img {
-        max-width: 100%;
-        max-height: 100%;
-      }
-    `,
-    congratsWrapper: css`
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      padding: 0 16px;
-      ${theme.cssMixins.rowVCentered}
-      margin-top: 60px;
-      height: 52px;
-      background: linear-gradient(
-          0deg,
-          rgba(255, 255, 255, 0.9),
-          rgba(255, 255, 255, 0.9)
-        ),
-        #2e7d32;
-      border-radius: 4px;
-    `,
-    bottom: css`
-      & .MuiButtonBase-root {
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-      }
-    `,
-  }
-
-  const goToNextStep = () => {
-    dispatch(setStep(WIDGET_STEP.ChooseAmount))
-  }
-
-  return (
-    <Box css={styles.wrapper}>
-      <Typography variant='h6' css={styles.header}>
-        Borrow
-      </Typography>
-      <Box css={styles.content}>
-        Looks like it’s your first time around here. Let’s see if you qualify...
-      </Box>
-      <Box css={styles.checkWrapper} sx={{ marginBottom: '16px' }}>
-        <Box css={styles.checkIcon}>
-          {status === 'checking' && <img src={spinner} alt='loading...' />}
-          {status === 'success' && <CheckGreenIcon />}
-        </Box>
-        <Box>Checking your income</Box>
-      </Box>
-      <Box css={styles.checkWrapper}>
-        <Box css={styles.checkIcon}>
-          {status === 'checking' && <img src={spinner} alt='loading...' />}
-          {status === 'success' && <CheckGreenIcon />}
-        </Box>
-        <Box>Checking other qualifications</Box>
-      </Box>
-      {status === 'success' && (
-        <>
-          <Box css={styles.congratsWrapper}>
-            <CheckCircleIcon />
-            <Box sx={{ marginLeft: '16px' }}>
-              Congrats, you are qualified to borrow
-            </Box>
-          </Box>
-          <Box css={styles.bottom}>
-            <Button variant='contained' onClick={goToNextStep}>
-              CONTINUE TO BORROW
-            </Button>
-          </Box>
-        </>
-      )}
-    </Box>
-  )
-}
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { PoolInfoType } from '@huma-finance/shared'
+import React, { useEffect, useState } from 'react'
+
+import useEA from '../../../hooks/useEA'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { CheckCircleIcon, CheckGreenIcon } from '../../icons'
+import spinner from '../../icons/spinner.gif'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleApprove: () => void
+}
+
+export function Evaluation({
+  poolInfo,
+  handleApprove,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const { checkingEA } = useEA()
+  const dispatch = useAppDispatch()
+  const { account, chainId } = useWeb3React()
+  const [status, setStatus] = useState<'checking' | 'success'>('checking')
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (account && chainId) {
+        await checkingEA(
+          {
+            poolAddress: poolInfo.pool,
+            borrowerWalletAddress: account,
+          },
+          WIDGET_STEP.Evaluation,
+        )
+        handleApprove()
+        setStatus('success')
+      }
+    }
+    fetchData()
+  }, [
+    account,
+    chainId,
+    checkingEA,
+    handleApprove,
+    poolInfo.assetAddress,
+    poolInfo.pool,
+  ])
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    content: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 30px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      line-height: 24px;
+      color: #49505b;
+      margin-bottom: 65px;
+    `,
+    checkWrapper: css`
+      ${theme.cssMixins.rowVCentered}
+      width: 100%;
+      height: 72px;
+      background: #f9f8fa;
+      border-radius: 4px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #49505b;
+    `,
+    checkIcon: css`
+      ${theme.cssMixins.rowCentered}
+      width: 105px;
+      height: 100%;
+
+      & > img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    `,
+    congratsWrapper: css`
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      padding: 0 16px;
+      ${theme.cssMixins.rowVCentered}
+      margin-top: 60px;
+      height: 52px;
+      background: linear-gradient(
+          0deg,
+          rgba(255, 255, 255, 0.9),
+          rgba(255, 255, 255, 0.9)
+        ),
+        #2e7d32;
+      border-radius: 4px;
+    `,
+    bottom: css`
+      & .MuiButtonBase-root {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+      }
+    `,
+  }
+
+  const goToNextStep = () => {
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        Borrow
+      </Typography>
+      <Box css={styles.content}>
+        Looks like it’s your first time around here. Let’s see if you qualify...
+      </Box>
+      <Box css={styles.checkWrapper} sx={{ marginBottom: '16px' }}>
+        <Box css={styles.checkIcon}>
+          {status === 'checking' && <img src={spinner} alt='loading...' />}
+          {status === 'success' && <CheckGreenIcon />}
+        </Box>
+        <Box>Checking your income</Box>
+      </Box>
+      <Box css={styles.checkWrapper}>
+        <Box css={styles.checkIcon}>
+          {status === 'checking' && <img src={spinner} alt='loading...' />}
+          {status === 'success' && <CheckGreenIcon />}
+        </Box>
+        <Box>Checking other qualifications</Box>
+      </Box>
+      {status === 'success' && (
+        <>
+          <Box css={styles.congratsWrapper}>
+            <CheckCircleIcon />
+            <Box sx={{ marginLeft: '16px' }}>
+              Congrats, you are qualified to borrow
+            </Box>
+          </Box>
+          <Box css={styles.bottom}>
+            <Button variant='contained' onClick={goToNextStep}>
+              CONTINUE TO BORROW
+            </Button>
+          </Box>
+        </>
+      )}
+    </Box>
+  )
+}

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

@@ -1,68 +1,74 @@
-import {
-  AccountStats,
-  PoolInfoType,
-  upScale,
-  useCLFeeManager,
-} from '@huma-finance/shared'
-import React, { useCallback, useState } from 'react'
-
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setBorrowInfo } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ChooseAmountModal } from '../../ChooseAmountModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  accountStats: AccountStats
-}
-
-export function ChooseAmount({
-  poolInfo,
-  accountStats,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { poolUnderlyingToken } = poolInfo
-  const { symbol, decimals } = poolUnderlyingToken
-  const { getFeesCharged } = useCLFeeManager(poolInfo.poolName)
-  const [chargedFees, setChargedFees] = useState(0)
-  const [currentAmount, setCurrentAmount] = useState(0)
-  const { creditRecordStatic, creditAvailableAmount } = accountStats
-
-  const handleChangeAmount = useCallback(
-    (newAmount: number) => {
-      setCurrentAmount(newAmount)
-      const newChargedFees = getFeesCharged(newAmount)
-      setChargedFees(newChargedFees)
-    },
-    [getFeesCharged],
-  )
-
-  const handleAction = useCallback(() => {
-    const nextStep = WIDGET_STEP.Transfer
-    dispatch(
-      setBorrowInfo({
-        borrowAmount: currentAmount,
-        borrowAmountBN: upScale(currentAmount, decimals),
-        chargedFees,
-        nextStep,
-      }),
-    )
-  }, [chargedFees, currentAmount, decimals, dispatch])
-
-  return (
-    <ChooseAmountModal
-      title='Borrow'
-      description1='Choose Amount'
-      sliderMax={creditAvailableAmount}
-      currentAmount={currentAmount}
-      tokenSymbol={symbol}
-      topLeft='Origination Fee'
-      topRight={`${chargedFees} ${symbol}`}
-      downLeft='APR'
-      downRight={`${creditRecordStatic!.aprInBps / 100}%`}
-      handleChangeAmount={handleChangeAmount}
-      handleAction={handleAction}
-      actionText='borrow'
-    />
-  )
-}
+import {
+  AccountStats,
+  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'
+import { setBorrowInfo } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ChooseAmountModal } from '../../ChooseAmountModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  accountStats: AccountStats
+}
+
+export function ChooseAmount({
+  poolInfo,
+  accountStats,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account } = useWeb3React()
+  const { poolUnderlyingToken } = poolInfo
+  const { symbol, decimals } = poolUnderlyingToken
+  const { getFeesCharged } = useCLFeeManager(poolInfo.poolName)
+  const [chargedFees, setChargedFees] = useState(0)
+  const [currentAmount, setCurrentAmount] = useState(0)
+  const { creditRecordStatic, creditAvailableAmount } = accountStats
+
+  const { approved } = useCLPoolAllowance(poolInfo.poolName, account)
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      setCurrentAmount(newAmount)
+      const newChargedFees = getFeesCharged(newAmount)
+      setChargedFees(newChargedFees)
+    },
+    [getFeesCharged],
+  )
+
+  const handleAction = useCallback(() => {
+    const nextStep = approved
+      ? WIDGET_STEP.Transfer
+      : WIDGET_STEP.ApproveAllowance
+    dispatch(
+      setBorrowInfo({
+        borrowAmount: currentAmount,
+        borrowAmountBN: upScale(currentAmount, decimals),
+        chargedFees,
+        nextStep,
+      }),
+    )
+  }, [approved, chargedFees, currentAmount, decimals, dispatch])
+
+  return (
+    <ChooseAmountModal
+      title='Borrow'
+      description1='Choose Amount'
+      sliderMax={creditAvailableAmount}
+      currentAmount={currentAmount}
+      tokenSymbol={symbol}
+      topLeft='Origination Fee'
+      topRight={`${chargedFees} ${symbol}`}
+      downLeft='APR'
+      downRight={`${creditRecordStatic!.aprInBps / 100}%`}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+      actionText='borrow'
+    />
+  )
+}

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

@@ -1,29 +1,29 @@
-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.Done))
-  }, [dispatch])
-
-  return (
-    <ApproveAllowanceModal
-      poolInfo={poolInfo}
-      handleSuccess={handleSuccess}
-      showAutoPayback
-    />
-  )
-}
+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}
+      showAutoPayback
+    />
+  )
+}

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

@@ -1,44 +1,34 @@
-import {
-  PoolInfoType,
-  toBigNumber,
-  txAtom,
-  useCLPoolAllowance,
-} from '@huma-finance/shared'
-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'
-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 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
-    dispatch(setStep(nextStep))
-  }, [allowance, borrowAmountBN, dispatch, reset])
-
-  return (
-    <TxSendModal
-      poolInfo={poolInfo}
-      method='drawdown'
-      params={[borrowAmountBN]}
-      handleSuccess={handleSuccess}
-    />
-  )
-}
+import { PoolInfoType, txAtom } from '@huma-finance/shared'
+import { useResetAtom } from 'jotai/utils'
+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 reset = useResetAtom(txAtom)
+  const { borrowAmountBN } = useAppSelector(selectWidgetState)
+
+  const handleSuccess = useCallback(() => {
+    reset()
+    const nextStep = WIDGET_STEP.Done
+    dispatch(setStep(nextStep))
+  }, [dispatch, reset])
+
+  return (
+    <TxSendModal
+      poolInfo={poolInfo}
+      method='drawdown'
+      params={[borrowAmountBN]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}