@huma-finance/widgets 0.0.8 → 0.0.11

package/src/components/StreamFactoring/borrow/5-Permit.tsx

@@ -1,144 +1,144 @@
-import { Contract, ethers } from 'ethers'
-import {
-  CHAINS,
-  Erc2612,
-  PoolInfoType,
-  StreamFactoringPool,
-  useERC2612Permit,
-  useMount,
-} from '@huma-finance/shared'
-import ERC2612Abi from '@huma-finance/shared/dist/abis/erc2612.json'
-import PoolAbi from '@huma-finance/shared/dist/abis/StreamFactoringPool.json'
-import React from 'react'
-import { useDispatch } from 'react-redux'
-
-import { useAppSelector } from '../../../hooks/useRedux'
-import {
-  setError,
-  setMultisend,
-  setStep,
-} from '../../../store/widgets.reducers'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { LoadingModal } from '../../LoadingModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  payerAddress: string
-  chainId: number
-  borrower: string
-  superToken: string
-}
-
-export function Permit({
-  poolInfo,
-  payerAddress,
-  chainId,
-  borrower,
-  superToken,
-}: Props): React.ReactElement | null {
-  const dispatch = useDispatch()
-  const { address: tokenAddress } = poolInfo.poolUnderlyingToken
-  const { borrowAmountBN, stream } = useAppSelector(selectWidgetState)
-  const { getERC2612PermitMessage, getTradableStreamPermitMessage } =
-    useERC2612Permit()
-
-  const getApproveAllowanceCallData = async () => {
-    const erc2612PermitResult = await getERC2612PermitMessage(
-      tokenAddress,
-      poolInfo.pool,
-      borrowAmountBN!,
-    )
-    const tokenContract = new Contract(tokenAddress, ERC2612Abi) as Erc2612
-    return tokenContract.interface.encodeFunctionData('permit', [
-      poolInfo.pool,
-      borrowAmountBN!,
-      erc2612PermitResult.nonce,
-      erc2612PermitResult.deadline,
-      erc2612PermitResult.v,
-      erc2612PermitResult.r,
-      erc2612PermitResult.s,
-    ])
-  }
-
-  const getDrawdownCallData = async () => {
-    const NFTPermitResult = await getTradableStreamPermitMessage(
-      poolInfo.assetAddress!,
-      borrower,
-      superToken,
-      payerAddress,
-      poolInfo.pool,
-      stream!.borrowFlowrate!,
-      stream!.durationInSeconds!,
-    )
-
-    const drawdownEncodedData = ethers.utils.defaultAbiCoder.encode(
-      [
-        'address',
-        'address',
-        'address',
-        'int96',
-        'uint256',
-        'uint256',
-        'uint8',
-        'bytes32',
-        'bytes32',
-      ],
-      [
-        borrower,
-        superToken,
-        payerAddress,
-        stream?.borrowFlowrate,
-        stream?.durationInSeconds,
-        NFTPermitResult.expiry,
-        NFTPermitResult.v,
-        NFTPermitResult.r,
-        NFTPermitResult.s,
-      ],
-    )
-    const poolContract = new Contract(
-      poolInfo.pool,
-      PoolAbi,
-    ) as StreamFactoringPool
-
-    return poolContract.interface.encodeFunctionData(
-      'drawdownWithAuthorization',
-      [borrowAmountBN!, poolInfo.assetAddress!, drawdownEncodedData],
-    )
-  }
-
-  useMount(async () => {
-    try {
-      const callData = []
-      const addresses: string[] = []
-
-      // The token in Goerli hasn't integrated ERC-2612
-      if (!CHAINS[chainId].isTestnet) {
-        const approveAllowanceCallData = await getApproveAllowanceCallData()
-        addresses.push(tokenAddress)
-        callData.push(approveAllowanceCallData)
-      }
-
-      const drawdownCalldata = await getDrawdownCallData()
-      addresses.push(poolInfo.pool)
-      callData.push(drawdownCalldata)
-
-      dispatch(setMultisend({ addresses, callData }))
-      dispatch(setStep(WIDGET_STEP.Transfer))
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (e: any) {
-      let errorMessage = e.reason || `Sign permit failed`
-      if (e.code === 4001 || e.code === 'ACTION_REJECTED') {
-        errorMessage = 'User has rejected the permit sign'
-      }
-      dispatch(setError({ errorMessage, errorReason: errorMessage }))
-    }
-  })
-
-  return (
-    <LoadingModal
-      title='Sign Token and NFT'
-      description='Waiting for signing...'
-    />
-  )
-}
+import { Contract, ethers } from 'ethers'
+import {
+  CHAINS,
+  Erc2612,
+  PoolInfoType,
+  StreamFactoringPool,
+  useERC2612Permit,
+  useMount,
+} from '@huma-finance/shared'
+import ERC2612Abi from '@huma-finance/shared/dist/abis/erc2612.json'
+import PoolAbi from '@huma-finance/shared/dist/abis/StreamFactoringPool.json'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import {
+  setError,
+  setMultisend,
+  setStep,
+} from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { LoadingModal } from '../../LoadingModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  payerAddress: string
+  chainId: number
+  borrower: string
+  superToken: string
+}
+
+export function Permit({
+  poolInfo,
+  payerAddress,
+  chainId,
+  borrower,
+  superToken,
+}: Props): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { address: tokenAddress } = poolInfo.poolUnderlyingToken
+  const { borrowAmountBN, stream } = useAppSelector(selectWidgetState)
+  const { getERC2612PermitMessage, getTradableStreamPermitMessage } =
+    useERC2612Permit()
+
+  const getApproveAllowanceCallData = async () => {
+    const erc2612PermitResult = await getERC2612PermitMessage(
+      tokenAddress,
+      poolInfo.pool,
+      borrowAmountBN!,
+    )
+    const tokenContract = new Contract(tokenAddress, ERC2612Abi) as Erc2612
+    return tokenContract.interface.encodeFunctionData('permit', [
+      poolInfo.pool,
+      borrowAmountBN!,
+      erc2612PermitResult.nonce,
+      erc2612PermitResult.deadline,
+      erc2612PermitResult.v,
+      erc2612PermitResult.r,
+      erc2612PermitResult.s,
+    ])
+  }
+
+  const getDrawdownCallData = async () => {
+    const NFTPermitResult = await getTradableStreamPermitMessage(
+      poolInfo.assetAddress!,
+      borrower,
+      superToken,
+      payerAddress,
+      poolInfo.pool,
+      stream!.borrowFlowrate!,
+      stream!.durationInSeconds!,
+    )
+
+    const drawdownEncodedData = ethers.utils.defaultAbiCoder.encode(
+      [
+        'address',
+        'address',
+        'address',
+        'int96',
+        'uint256',
+        'uint256',
+        'uint8',
+        'bytes32',
+        'bytes32',
+      ],
+      [
+        borrower,
+        superToken,
+        payerAddress,
+        stream?.borrowFlowrate,
+        stream?.durationInSeconds,
+        NFTPermitResult.expiry,
+        NFTPermitResult.v,
+        NFTPermitResult.r,
+        NFTPermitResult.s,
+      ],
+    )
+    const poolContract = new Contract(
+      poolInfo.pool,
+      PoolAbi,
+    ) as StreamFactoringPool
+
+    return poolContract.interface.encodeFunctionData(
+      'drawdownWithAuthorization',
+      [borrowAmountBN!, poolInfo.assetAddress!, drawdownEncodedData],
+    )
+  }
+
+  useMount(async () => {
+    try {
+      const callData = []
+      const addresses: string[] = []
+
+      // The token in Goerli hasn't integrated ERC-2612
+      if (!CHAINS[chainId].isTestnet) {
+        const approveAllowanceCallData = await getApproveAllowanceCallData()
+        addresses.push(tokenAddress)
+        callData.push(approveAllowanceCallData)
+      }
+
+      const drawdownCalldata = await getDrawdownCallData()
+      addresses.push(poolInfo.pool)
+      callData.push(drawdownCalldata)
+
+      dispatch(setMultisend({ addresses, callData }))
+      dispatch(setStep(WIDGET_STEP.Transfer))
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (e: any) {
+      let errorMessage = e.reason || `Sign permit failed`
+      if (e.code === 4001 || e.code === 'ACTION_REJECTED') {
+        errorMessage = 'User has rejected the permit sign'
+      }
+      dispatch(setError({ errorMessage, errorReason: errorMessage }))
+    }
+  })
+
+  return (
+    <LoadingModal
+      title='Sign Token and NFT'
+      description='Waiting for signing...'
+    />
+  )
+}

package/src/components/StreamFactoring/borrow/6-Transfer.tsx

@@ -1,37 +1,37 @@
-import { PoolInfoType, useMultiSendContract } 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 | null {
-  const dispatch = useAppDispatch()
-  const multiSendContract = useMultiSendContract()
-  const { multisend } = useAppSelector(selectWidgetState)
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
-  }, [dispatch])
-
-  if (!multisend || !multiSendContract) {
-    return null
-  }
-
-  return (
-    <TxSendModal
-      poolInfo={poolInfo}
-      contract={multiSendContract}
-      title='Transfer Tradable Stream and Money'
-      method='multisend'
-      params={[multisend.addresses, multisend.callData]}
-      handleSuccess={handleSuccess}
-    />
-  )
-}
+import { PoolInfoType, useMultiSendContract } 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 | null {
+  const dispatch = useAppDispatch()
+  const multiSendContract = useMultiSendContract()
+  const { multisend } = useAppSelector(selectWidgetState)
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  if (!multisend || !multiSendContract) {
+    return null
+  }
+
+  return (
+    <TxSendModal
+      poolInfo={poolInfo}
+      contract={multiSendContract}
+      title='Transfer Tradable Stream and Money'
+      method='multisend'
+      params={[multisend.addresses, multisend.callData]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/StreamFactoring/borrow/7-Success.tsx

@@ -8,11 +8,11 @@ type Props = {
 }
 
 export function Success({ handleAction }: Props): React.ReactElement {
-  const { borrowAmount, approveInfo } = useAppSelector(selectWidgetState)
+  const { borrowAmount, approval } = useAppSelector(selectWidgetState)
 
   const content = [
     `${borrowAmount?.toFixed(2)} ${
-      approveInfo?.tokenSymbol
+      approval?.token.symbol
     } is now in your wallet.`,
   ]
 

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

@@ -1,95 +1,94 @@
-import { useWeb3React } from '@web3-react/core'
-import { POOL_NAME, POOL_TYPE, usePoolInfo } from '@huma-finance/shared'
-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 { Evaluation } from './1-Evaluation'
-import { ChooseAmount } from './2-ChooseAmount'
-import { ConfirmTransfer } from './3-ConfirmTransfer'
-import { ApproveAllowance } from './4-ApproveAllowance'
-import { Permit } from './5-Permit'
-import { Transfer } from './6-Transfer'
-import { Success } from './7-Success'
-
-export type StreamFactoringBorrowProps = {
-  poolName: POOL_NAME
-  poolType: POOL_TYPE
-  payerAddress: string
-  superToken: string
-  currentFlowRate: string
-  isOpen: boolean
-  handleClose: () => void
-  handleSuccess: (blockNumber: number) => void
-}
-
-export function StreamFactoringBorrow({
-  poolName,
-  poolType,
-  payerAddress,
-  superToken,
-  currentFlowRate,
-  isOpen,
-  handleClose,
-  handleSuccess,
-}: StreamFactoringBorrowProps): React.ReactElement | null {
-  const dispatch = useDispatch()
-  const { account, chainId } = useWeb3React()
-  const poolInfo = usePoolInfo(poolName, poolType)
-  const { step, errorMessage } = useAppSelector(selectWidgetState)
-
-  useEffect(() => {
-    dispatch(setStep(WIDGET_STEP.Evaluation))
-  }, [dispatch])
-
-  if (!poolInfo) {
-    return null
-  }
-
-  return (
-    <WidgetWrapper
-      isOpen={isOpen}
-      handleClose={handleClose}
-      handleSuccess={handleSuccess}
-    >
-      {step === WIDGET_STEP.Evaluation && (
-        <Evaluation
-          poolInfo={poolInfo}
-          payerAddress={payerAddress}
-          superToken={superToken}
-          currentFlowRate={currentFlowRate}
-        />
-      )}
-      {step === WIDGET_STEP.ChooseAmount && (
-        <ChooseAmount poolInfo={poolInfo} currentFlowRate={currentFlowRate} />
-      )}
-      {step === WIDGET_STEP.ConfirmTransfer && <ConfirmTransfer />}
-      {step === WIDGET_STEP.ApproveAllowance && (
-        <ApproveAllowance poolInfo={poolInfo} />
-      )}
-      {step === WIDGET_STEP.Permit && account && chainId && (
-        <Permit
-          poolInfo={poolInfo}
-          payerAddress={payerAddress}
-          chainId={chainId}
-          borrower={account}
-          superToken={superToken}
-        />
-      )}
-      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
-      {step === WIDGET_STEP.Done && <Success handleAction={handleClose} />}
-      {step === WIDGET_STEP.Error && (
-        <ErrorModal
-          title='Stream Borrowing'
-          errorMessage={errorMessage}
-          handleOk={handleClose}
-        />
-      )}
-    </WidgetWrapper>
-  )
-}
+import { useWeb3React } from '@web3-react/core'
+import { POOL_NAME, POOL_TYPE, usePoolInfo } from '@huma-finance/shared'
+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 { Evaluation } from './1-Evaluation'
+import { ChooseAmount } from './2-ChooseAmount'
+import { ConfirmTransfer } from './3-ConfirmTransfer'
+import { ApproveAllowance } from './4-ApproveAllowance'
+import { Permit } from './5-Permit'
+import { Transfer } from './6-Transfer'
+import { Success } from './7-Success'
+
+export type StreamFactoringBorrowProps = {
+  poolName: POOL_NAME
+  poolType: POOL_TYPE
+  payerAddress: string
+  superToken: string
+  currentFlowRate: string
+  isOpen: boolean
+  handleClose: () => void
+  handleSuccess: (blockNumber: number) => void
+}
+
+export function StreamFactoringBorrow({
+  poolName,
+  poolType,
+  payerAddress,
+  superToken,
+  currentFlowRate,
+  isOpen,
+  handleClose,
+  handleSuccess,
+}: StreamFactoringBorrowProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { account, chainId } = useWeb3React()
+  const poolInfo = usePoolInfo(poolName, poolType)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+
+  useEffect(() => {
+    dispatch(setStep(WIDGET_STEP.Evaluation))
+  }, [dispatch])
+
+  if (!poolInfo) {
+    return null
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen={isOpen}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.Evaluation && (
+        <Evaluation
+          poolInfo={poolInfo}
+          payerAddress={payerAddress}
+          superToken={superToken}
+        />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount poolInfo={poolInfo} currentFlowRate={currentFlowRate} />
+      )}
+      {step === WIDGET_STEP.ConfirmTransfer && <ConfirmTransfer />}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance poolInfo={poolInfo} />
+      )}
+      {step === WIDGET_STEP.Permit && account && chainId && (
+        <Permit
+          poolInfo={poolInfo}
+          payerAddress={payerAddress}
+          chainId={chainId}
+          borrower={account}
+          superToken={superToken}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && <Success handleAction={handleClose} />}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Stream Borrowing'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}