@huma-finance/widgets 0.0.21 → 0.0.24

package/src/components/LoadingModal.tsx

@@ -1,49 +1,49 @@
-import { Box, css, useTheme } from '@mui/material'
-import React from 'react'
-import { HumaLoading } from './HumaLoading'
-
-import { WrapperModal } from './WrapperModal'
-
-type Props = {
-  title: string
-  description?: string
-  hideLoader?: boolean
-  children?: React.ReactNode
-}
-
-export function LoadingModal({
-  title,
-  description,
-  hideLoader = false,
-  children,
-}: Props): React.ReactElement {
-  const theme = useTheme()
-
-  const styles = {
-    loader: css`
-      width: 100%;
-      ${theme.cssMixins.rowHCentered};
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    `,
-    bottom: css`
-      & .MuiButtonBase-root {
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-      }
-    `,
-  }
-
-  return (
-    <WrapperModal title={title} subTitle={description}>
-      {!hideLoader && (
-        <Box css={styles.loader}>
-          <HumaLoading />
-        </Box>
-      )}
-      <Box css={styles.bottom}>{children}</Box>
-    </WrapperModal>
-  )
-}
+import { Box, css, useTheme } from '@mui/material'
+import React from 'react'
+import { HumaLoading } from './HumaLoading'
+
+import { WrapperModal } from './WrapperModal'
+
+type Props = {
+  title: string
+  description?: string
+  hideLoader?: boolean
+  children?: React.ReactNode
+}
+
+export function LoadingModal({
+  title,
+  description,
+  hideLoader = false,
+  children,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+
+  const styles = {
+    loader: css`
+      width: 100%;
+      ${theme.cssMixins.rowHCentered};
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    `,
+    bottom: css`
+      & .MuiButtonBase-root {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+      }
+    `,
+  }
+
+  return (
+    <WrapperModal title={title} subTitle={description}>
+      {!hideLoader && (
+        <Box css={styles.loader}>
+          <HumaLoading />
+        </Box>
+      )}
+      <Box css={styles.bottom}>{children}</Box>
+    </WrapperModal>
+  )
+}

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

@@ -1,55 +1,55 @@
-import { useWeb3React } from '@web3-react/core'
-import { PoolInfoType } from '@huma-finance/shared'
-import React, { useEffect } from 'react'
-
-import useEA from '../../../hooks/useEA'
-import { LoadingModal } from '../../LoadingModal'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-
-type Props = {
-  poolInfo: PoolInfoType
-  payerAddress: string
-  superToken: string
-}
-
-export function Evaluation({
-  poolInfo,
-  payerAddress,
-  superToken,
-}: Props): React.ReactElement {
-  const { account } = useWeb3React()
-  const { checkingEA } = useEA()
-
-  useEffect(() => {
-    if (account) {
-      checkingEA(
-        {
-          poolAddress: poolInfo.pool,
-          borrowerWalletAddress: account,
-          context: {
-            receivable: {
-              address: poolInfo.assetAddress!,
-            },
-            payerWalletAddress: payerAddress,
-            superToken,
-          },
-        },
-        WIDGET_STEP.ChooseAmount,
-      )
-    }
-  }, [
-    account,
-    checkingEA,
-    payerAddress,
-    poolInfo.assetAddress,
-    poolInfo.pool,
-    superToken,
-  ])
-
-  return (
-    <LoadingModal
-      title='Checking Stream'
-      description='Checking if the stream qualifies for factoring...'
-    />
-  )
-}
+import { useWeb3React } from '@web3-react/core'
+import { PoolInfoType } from '@huma-finance/shared'
+import React, { useEffect } from 'react'
+
+import useEA from '../../../hooks/useEA'
+import { LoadingModal } from '../../LoadingModal'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+
+type Props = {
+  poolInfo: PoolInfoType
+  payerAddress: string
+  superToken: string
+}
+
+export function Evaluation({
+  poolInfo,
+  payerAddress,
+  superToken,
+}: Props): React.ReactElement {
+  const { account } = useWeb3React()
+  const { checkingEA } = useEA()
+
+  useEffect(() => {
+    if (account) {
+      checkingEA(
+        {
+          poolAddress: poolInfo.pool,
+          borrowerWalletAddress: account,
+          context: {
+            receivable: {
+              address: poolInfo.assetAddress!,
+            },
+            payerWalletAddress: payerAddress,
+            superToken,
+          },
+        },
+        WIDGET_STEP.ChooseAmount,
+      )
+    }
+  }, [
+    account,
+    checkingEA,
+    payerAddress,
+    poolInfo.assetAddress,
+    poolInfo.pool,
+    superToken,
+  ])
+
+  return (
+    <LoadingModal
+      title='Checking Stream'
+      description='Checking if the stream qualifies for factoring...'
+    />
+  )
+}

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

@@ -1,127 +1,127 @@
-import {
-  downScale,
-  PoolInfoType,
-  toBigNumber,
-  upScale,
-  useFeeManager,
-} from '@huma-finance/shared'
-import React, { useCallback, useState } from 'react'
-
-import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
-import { setBorrowInfo, setStream } from '../../../store/widgets.reducers'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ChooseAmountModal } from '../../ChooseAmountModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  currentFlowRate: string
-}
-
-export function ChooseAmount({
-  poolInfo,
-  currentFlowRate,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { approval } = useAppSelector(selectWidgetState)
-  const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
-  const [chargedFees, setChargedFees] = useState(0)
-  const [currentAmount, setCurrentAmount] = useState(0)
-  const borrowPeriodInSeconds = approval!.terms.intervalInDays * 24 * 60 * 60
-
-  const getBorrowFlowrateAndAmount = useCallback(
-    (borrowAmount: number) => {
-      const currentFlowRateBN = toBigNumber(currentFlowRate)
-      const borrowAmountBN = toBigNumber(
-        upScale(borrowAmount, approval!.token.decimal),
-      )
-
-      const totalAmountInBorrowPeriod = currentFlowRateBN.mul(
-        borrowPeriodInSeconds,
-      )
-      let borrowFlowrate = borrowAmountBN
-        .mul(currentFlowRateBN)
-        .div(totalAmountInBorrowPeriod)
-        // To ensure enough flowRate due to round down when convert to string
-        .add(1)
-
-      // Can not borrow all the available flowrate
-      if (borrowFlowrate.gte(currentFlowRateBN)) {
-        borrowFlowrate = currentFlowRateBN.sub(1)
-      }
-      if (borrowAmountBN.gte(approval!.terms.creditLimit)) {
-        borrowFlowrate = borrowFlowrate.sub(1)
-      }
-
-      // As borrowFlowrate adds 1, need to calculate the new accurate borrow amount
-      const newBorrowAmountBN = borrowFlowrate
-        .mul(totalAmountInBorrowPeriod)
-        .div(currentFlowRateBN)
-      const newBorrowAmount = downScale(
-        newBorrowAmountBN,
-        approval!.token.decimal,
-      )
-
-      return {
-        borrowFlowrate: borrowFlowrate.toString(),
-        borrowAmount: Number(newBorrowAmount),
-        borrowAmountBN: newBorrowAmountBN.toString(),
-      }
-    },
-    [approval, borrowPeriodInSeconds, currentFlowRate],
-  )
-
-  const handleChangeAmount = useCallback(
-    (newAmount: number) => {
-      if (approval) {
-        setCurrentAmount(newAmount)
-        setChargedFees(getFeesCharged(newAmount))
-      }
-    },
-    [approval, getFeesCharged],
-  )
-  const handleAction = useCallback(() => {
-    const { borrowFlowrate, borrowAmount, borrowAmountBN } =
-      getBorrowFlowrateAndAmount(currentAmount)
-
-    dispatch(
-      setStream({
-        borrowFlowrate,
-        durationInSeconds: borrowPeriodInSeconds,
-      }),
-    )
-    dispatch(
-      setBorrowInfo({
-        borrowAmount,
-        borrowAmountBN,
-        chargedFees,
-        nextStep: WIDGET_STEP.ConfirmTransfer,
-      }),
-    )
-  }, [
-    borrowPeriodInSeconds,
-    chargedFees,
-    currentAmount,
-    dispatch,
-    getBorrowFlowrateAndAmount,
-  ])
-
-  if (!approval) {
-    return null
-  }
-
-  return (
-    <ChooseAmountModal
-      title='Choose Amount'
-      description1='Access up to 100% of your stream flowrate'
-      sliderMax={Number(approval.terms.creditLimitFormatted)}
-      currentAmount={currentAmount}
-      tokenSymbol={approval.token.symbol}
-      topLeft='Fees'
-      topRight={`${chargedFees} ${approval.token.symbol}`}
-      handleChangeAmount={handleChangeAmount}
-      handleAction={handleAction}
-      actionText='Confirm Transfer'
-    />
-  )
-}
+import {
+  downScale,
+  PoolInfoType,
+  toBigNumber,
+  upScale,
+  useFeeManager,
+} from '@huma-finance/shared'
+import React, { useCallback, useState } from 'react'
+
+import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
+import { setBorrowInfo, setStream } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ChooseAmountModal } from '../../ChooseAmountModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  currentFlowRate: string
+}
+
+export function ChooseAmount({
+  poolInfo,
+  currentFlowRate,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { approval } = useAppSelector(selectWidgetState)
+  const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
+  const [chargedFees, setChargedFees] = useState(0)
+  const [currentAmount, setCurrentAmount] = useState(0)
+  const borrowPeriodInSeconds = approval!.terms.intervalInDays * 24 * 60 * 60
+
+  const getBorrowFlowrateAndAmount = useCallback(
+    (borrowAmount: number) => {
+      const currentFlowRateBN = toBigNumber(currentFlowRate)
+      const borrowAmountBN = toBigNumber(
+        upScale(borrowAmount, approval!.token.decimal),
+      )
+
+      const totalAmountInBorrowPeriod = currentFlowRateBN.mul(
+        borrowPeriodInSeconds,
+      )
+      let borrowFlowrate = borrowAmountBN
+        .mul(currentFlowRateBN)
+        .div(totalAmountInBorrowPeriod)
+        // To ensure enough flowRate due to round down when convert to string
+        .add(1)
+
+      // Can not borrow all the available flowrate
+      if (borrowFlowrate.gte(currentFlowRateBN)) {
+        borrowFlowrate = currentFlowRateBN.sub(1)
+      }
+      if (borrowAmountBN.gte(approval!.terms.creditLimit)) {
+        borrowFlowrate = borrowFlowrate.sub(1)
+      }
+
+      // As borrowFlowrate adds 1, need to calculate the new accurate borrow amount
+      const newBorrowAmountBN = borrowFlowrate
+        .mul(totalAmountInBorrowPeriod)
+        .div(currentFlowRateBN)
+      const newBorrowAmount = downScale(
+        newBorrowAmountBN,
+        approval!.token.decimal,
+      )
+
+      return {
+        borrowFlowrate: borrowFlowrate.toString(),
+        borrowAmount: Number(newBorrowAmount),
+        borrowAmountBN: newBorrowAmountBN.toString(),
+      }
+    },
+    [approval, borrowPeriodInSeconds, currentFlowRate],
+  )
+
+  const handleChangeAmount = useCallback(
+    (newAmount: number) => {
+      if (approval) {
+        setCurrentAmount(newAmount)
+        setChargedFees(getFeesCharged(newAmount))
+      }
+    },
+    [approval, getFeesCharged],
+  )
+  const handleAction = useCallback(() => {
+    const { borrowFlowrate, borrowAmount, borrowAmountBN } =
+      getBorrowFlowrateAndAmount(currentAmount)
+
+    dispatch(
+      setStream({
+        borrowFlowrate,
+        durationInSeconds: borrowPeriodInSeconds,
+      }),
+    )
+    dispatch(
+      setBorrowInfo({
+        borrowAmount,
+        borrowAmountBN,
+        chargedFees,
+        nextStep: WIDGET_STEP.ConfirmTransfer,
+      }),
+    )
+  }, [
+    borrowPeriodInSeconds,
+    chargedFees,
+    currentAmount,
+    dispatch,
+    getBorrowFlowrateAndAmount,
+  ])
+
+  if (!approval) {
+    return null
+  }
+
+  return (
+    <ChooseAmountModal
+      title='Choose Amount'
+      description1='Access up to 100% of your stream flowrate'
+      sliderMax={Number(approval.terms.creditLimitFormatted)}
+      currentAmount={currentAmount}
+      tokenSymbol={approval.token.symbol}
+      topLeft='Fees'
+      topRight={`${chargedFees} ${approval.token.symbol}`}
+      handleChangeAmount={handleChangeAmount}
+      handleAction={handleAction}
+      actionText='Confirm Transfer'
+    />
+  )
+}

package/src/components/StreamFactoring/borrow/3-ConfirmTransfer.tsx

@@ -1,42 +1,42 @@
-import { CHAINS, isEmpty } from '@huma-finance/shared'
-import { useWeb3React } from '@web3-react/core'
-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 { ConfirmTransferModal } from '../../ConfirmTransferModal'
-
-export function ConfirmTransfer(): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { chainId } = useWeb3React()
-  const { borrowAmount, approval } = useAppSelector(selectWidgetState)
-
-  const handleAction = useCallback(() => {
-    const step = CHAINS[chainId!].isTestnet
-      ? WIDGET_STEP.ApproveAllowance
-      : WIDGET_STEP.Permit
-    dispatch(setStep(step))
-  }, [chainId, dispatch])
-
-  if (isEmpty(borrowAmount) || isEmpty(approval)) {
-    return null
-  }
-
-  return (
-    <ConfirmTransferModal
-      title='Confirm transaction details'
-      description={`Huma keeps your Tradable Stream NFT as collateral until it's fully paid.`}
-      items={[
-        { leftText: 'Tradable Stream', rightText: 'Huma' },
-        {
-          leftText: `${borrowAmount!.toFixed(2)} ${approval?.token.symbol}`,
-          rightText: 'You',
-        },
-      ]}
-      actionText='Approve Transfer'
-      handleAction={handleAction}
-    />
-  )
-}
+import { CHAINS, isEmpty } from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+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 { ConfirmTransferModal } from '../../ConfirmTransferModal'
+
+export function ConfirmTransfer(): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { chainId } = useWeb3React()
+  const { borrowAmount, approval } = useAppSelector(selectWidgetState)
+
+  const handleAction = useCallback(() => {
+    const step = CHAINS[chainId!].isTestnet
+      ? WIDGET_STEP.ApproveAllowance
+      : WIDGET_STEP.Permit
+    dispatch(setStep(step))
+  }, [chainId, dispatch])
+
+  if (isEmpty(borrowAmount) || isEmpty(approval)) {
+    return null
+  }
+
+  return (
+    <ConfirmTransferModal
+      title='Confirm transaction details'
+      description={`Huma keeps your Tradable Stream NFT as collateral until it's fully paid.`}
+      items={[
+        { leftText: 'Tradable Stream', rightText: 'Huma' },
+        {
+          leftText: `${borrowAmount!.toFixed(2)} ${approval?.token.symbol}`,
+          rightText: 'You',
+        },
+      ]}
+      actionText='APPROVE TRANSFER'
+      handleAction={handleAction}
+    />
+  )
+}

package/src/components/StreamFactoring/borrow/4-ApproveAllowance.tsx

@@ -1,33 +1,33 @@
-import { PoolInfoType } from '@huma-finance/shared'
-import React, { useCallback } 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 { ApproveAllowanceModal } from '../../ApproveAllowanceModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-}
-
-export function ApproveAllowance({
-  poolInfo,
-}: Props): React.ReactElement | null {
-  const dispatch = useDispatch()
-  const { borrowAmountBN } = useAppSelector(selectWidgetState)
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Permit))
-  }, [dispatch])
-
-  return (
-    <ApproveAllowanceModal
-      poolInfo={poolInfo}
-      allowanceAmount={borrowAmountBN!}
-      handleSuccess={handleSuccess}
-      spender={poolInfo.poolProcessor!}
-    />
-  )
-}
+import { PoolInfoType } from '@huma-finance/shared'
+import React, { useCallback } 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 { ApproveAllowanceModal } from '../../ApproveAllowanceModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+}
+
+export function ApproveAllowance({
+  poolInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { borrowAmountBN } = useAppSelector(selectWidgetState)
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Permit))
+  }, [dispatch])
+
+  return (
+    <ApproveAllowanceModal
+      poolInfo={poolInfo}
+      allowanceAmount={borrowAmountBN!}
+      handleSuccess={handleSuccess}
+      spender={poolInfo.poolProcessor!}
+    />
+  )
+}