@huma-finance/widgets 0.0.37 → 0.0.38-beta.0

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

@@ -1,31 +1,31 @@
-import { PoolInfoType } from '@huma-finance/shared'
-import React from 'react'
-
-import { EvaluationEA } from './EvaluationEA'
-import { EvaluationKYC } from './EvaluationKYC'
-
-type Props = {
-  poolInfo: PoolInfoType
-  handleClose: () => void
-  handleApproveSuccess: () => void
-}
-
-export function Evaluation({
-  poolInfo,
-  handleClose,
-  handleApproveSuccess,
-}: Props): React.ReactElement | null {
-  const lenderApprovalProvider = poolInfo.extra?.lenderApprovalProvider
-  const isKYC = lenderApprovalProvider?.type === 'KYC'
-
-  if (isKYC) {
-    return <EvaluationKYC poolInfo={poolInfo} handleClose={handleClose} />
-  }
-
-  return (
-    <EvaluationEA
-      poolInfo={poolInfo}
-      handleApproveSuccess={handleApproveSuccess}
-    />
-  )
-}
+import { PoolInfoType } from '@huma-finance/shared'
+import React from 'react'
+
+import { EvaluationEA } from './EvaluationEA'
+import { EvaluationKYC } from './EvaluationKYC'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleClose: () => void
+  handleApproveSuccess: () => void
+}
+
+export function Evaluation({
+  poolInfo,
+  handleClose,
+  handleApproveSuccess,
+}: Props): React.ReactElement | null {
+  const lenderApprovalProvider = poolInfo.extra?.lenderApprovalProvider
+  const isKYC = lenderApprovalProvider?.type === 'KYC'
+
+  if (isKYC) {
+    return <EvaluationKYC poolInfo={poolInfo} handleClose={handleClose} />
+  }
+
+  return (
+    <EvaluationEA
+      poolInfo={poolInfo}
+      handleApproveSuccess={handleApproveSuccess}
+    />
+  )
+}

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

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

package/src/components/Lend/supply/5-Success.tsx

@@ -1,60 +1,60 @@
-import { useWeb3React } from '@web3-react/core'
-import {
-  decodeLogs,
-  downScale,
-  formatMoney,
-  PoolInfoType,
-  sendTxAtom,
-} from '@huma-finance/shared'
-import transferAbi from '@huma-finance/shared/dist/abis/Transfer.json'
-import { useAtom } from 'jotai'
-import React, { useEffect, useState } from 'react'
-
-import { TxDoneModal } from '../../TxDoneModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  handleAction: () => void
-  hasNextStep: boolean
-}
-
-export function Success({
-  poolInfo,
-  handleAction,
-  hasNextStep,
-}: Props): React.ReactElement {
-  const { account } = useWeb3React()
-  const { poolUnderlyingToken } = poolInfo
-  const [{ txReceipt }] = useAtom(sendTxAtom)
-  const { symbol, decimals, address } = poolUnderlyingToken
-  const [supplyAmount, setSupplyAmount] = useState<string | undefined>()
-
-  useEffect(() => {
-    if (txReceipt) {
-      const events = decodeLogs(txReceipt.logs, transferAbi)
-      if (events) {
-        events.forEach((event) => {
-          const { from, to, value } = event.args
-          if (
-            from.toLowerCase() === account?.toLowerCase() &&
-            to.toLowerCase() === poolInfo.pool.toLowerCase()
-          ) {
-            setSupplyAmount(downScale(value.toString(), decimals))
-          }
-        })
-      }
-    }
-  }, [account, address, decimals, poolInfo.pool, txReceipt])
-
-  const content = [
-    `You successfully supplied ${formatMoney(supplyAmount)} ${symbol}.`,
-  ]
-
-  return (
-    <TxDoneModal
-      handleAction={handleAction}
-      content={content}
-      buttonText={hasNextStep ? "WHAT'S NEXT" : undefined}
-    />
-  )
-}
+import { useWeb3React } from '@web3-react/core'
+import {
+  decodeLogs,
+  downScale,
+  formatMoney,
+  PoolInfoType,
+  sendTxAtom,
+} from '@huma-finance/shared'
+import transferAbi from '@huma-finance/shared/dist/abis/Transfer.json'
+import { useAtom } from 'jotai'
+import React, { useEffect, useState } from 'react'
+
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleAction: () => void
+  hasNextStep: boolean
+}
+
+export function Success({
+  poolInfo,
+  handleAction,
+  hasNextStep,
+}: Props): React.ReactElement {
+  const { account } = useWeb3React()
+  const { poolUnderlyingToken } = poolInfo
+  const [{ txReceipt }] = useAtom(sendTxAtom)
+  const { symbol, decimals, address } = poolUnderlyingToken
+  const [supplyAmount, setSupplyAmount] = useState<string | undefined>()
+
+  useEffect(() => {
+    if (txReceipt) {
+      const events = decodeLogs(txReceipt.logs, transferAbi)
+      if (events) {
+        events.forEach((event) => {
+          const { from, to, value } = event.args
+          if (
+            from.toLowerCase() === account?.toLowerCase() &&
+            to.toLowerCase() === poolInfo.pool.toLowerCase()
+          ) {
+            setSupplyAmount(downScale(value.toString(), decimals))
+          }
+        })
+      }
+    }
+  }, [account, address, decimals, poolInfo.pool, txReceipt])
+
+  const content = [
+    `You successfully supplied ${formatMoney(supplyAmount)} ${symbol}.`,
+  ]
+
+  return (
+    <TxDoneModal
+      handleAction={handleAction}
+      content={content}
+      buttonText={hasNextStep ? "WHAT'S NEXT" : undefined}
+    />
+  )
+}

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

@@ -1,10 +1,10 @@
-import React from 'react'
-import { NotifiSubscriptionModal } from '../../Notifi/NotifiSubscriptionModal'
-
-type Props = {
-  handleAction: () => void
-}
-
-export function Notifications({ handleAction }: Props): React.ReactElement {
-  return <NotifiSubscriptionModal handleSuccess={handleAction} />
-}
+import React from 'react'
+import { NotifiSubscriptionModal } from '../../Notifi/NotifiSubscriptionModal'
+
+type Props = {
+  handleAction: () => void
+}
+
+export function Notifications({ handleAction }: Props): React.ReactElement {
+  return <NotifiSubscriptionModal handleSuccess={handleAction} />
+}