@huma-finance/widgets 0.0.47-beta.185 → 0.0.48-beta.186

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.47-beta.185+855b3b5",
+  "version": "0.0.48-beta.186+0a076b2",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.47-beta.185+855b3b5",
-    "@huma-finance/shared": "^0.0.47-beta.185+855b3b5",
+    "@huma-finance/sdk": "^0.0.48-beta.186+0a076b2",
+    "@huma-finance/shared": "^0.0.48-beta.186+0a076b2",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -192,5 +192,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "855b3b572bb1d1f8f58e9b407c83092995766db2"
+  "gitHead": "0a076b2a0a92ec06e3d311e1541f7b3c0ab52b21"
 }

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

@@ -1,11 +1,10 @@
-import { getAddress } from '@ethersproject/address'
-import { PoolInfoType } from '@huma-finance/shared'
 import { useWeb3React } from '@web3-react/core'
+import { PoolInfoType } from '@huma-finance/shared'
 import React, { useEffect } from 'react'
 
 import useEA from '../../../hooks/useEA'
-import { WIDGET_STEP } from '../../../store/widgets.store'
 import { LoadingModal } from '../../LoadingModal'
+import { WIDGET_STEP } from '../../../store/widgets.store'
 import { SignIn } from '../../SignIn'
 
 type Props = {
@@ -36,7 +35,7 @@ export function Evaluation({
             receivable: {
               address: poolInfo.assetAddress!,
             },
-            payerWalletAddress: getAddress(payerAddress),
+            payerWalletAddress: payerAddress,
             superToken,
           },
         },

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

@@ -28,14 +28,12 @@ export function ChooseAmount({
   const [chargedFees, setChargedFees] = useState(0)
   const [currentAmount, setCurrentAmount] = useState(0)
   const borrowPeriodInSeconds = approval!.terms.intervalInDays * 24 * 60 * 60
-  const superTokenDecimals = poolInfo.extra?.superToken?.decimals!
-  const underlyingTokenDecimals = poolInfo.poolUnderlyingToken.decimals!
 
   const getBorrowFlowrateAndAmount = useCallback(
     (borrowAmount: number) => {
       const currentFlowRateBN = toBigNumber(currentFlowRate)
       const borrowAmountBN = toBigNumber(
-        upScale(borrowAmount, superTokenDecimals),
+        upScale(borrowAmount, approval!.token.decimal),
       )
 
       const totalAmountInBorrowPeriod = currentFlowRateBN.mul(
@@ -59,24 +57,18 @@ export function ChooseAmount({
       const newBorrowAmountBN = borrowFlowrate
         .mul(totalAmountInBorrowPeriod)
         .div(currentFlowRateBN)
-      const newBorrowAmount = downScale(newBorrowAmountBN, superTokenDecimals)
-      const newBorrowAmountUnderlyingTokenBN = toBigNumber(
-        upScale(newBorrowAmount, underlyingTokenDecimals),
+      const newBorrowAmount = downScale(
+        newBorrowAmountBN,
+        approval!.token.decimal,
       )
 
       return {
         borrowFlowrate: borrowFlowrate.toString(),
         borrowAmount: Number(newBorrowAmount),
-        borrowAmountBN: newBorrowAmountUnderlyingTokenBN,
+        borrowAmountBN: newBorrowAmountBN,
       }
     },
-    [
-      approval,
-      borrowPeriodInSeconds,
-      currentFlowRate,
-      superTokenDecimals,
-      underlyingTokenDecimals,
-    ],
+    [approval, borrowPeriodInSeconds, currentFlowRate],
   )
 
   const handleChangeAmount = useCallback(

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

@@ -1,4 +1,5 @@
-import { isEmpty } from '@huma-finance/shared'
+import { CHAINS, isEmpty } from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
 import React, { useCallback } from 'react'
 
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
@@ -9,11 +10,15 @@ import { ConfirmTransferModal } from '../../ConfirmTransferModal'
 
 export function ConfirmTransfer(): React.ReactElement | null {
   const dispatch = useAppDispatch()
+  const { chainId } = useWeb3React()
   const { borrowAmount, approval } = useAppSelector(selectWidgetState)
 
   const handleAction = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.ApproveAllowance))
-  }, [dispatch])
+    const step = CHAINS[chainId!].isTestnet
+      ? WIDGET_STEP.ApproveAllowance
+      : WIDGET_STEP.Permit
+    dispatch(setStep(step))
+  }, [chainId, dispatch])
 
   if (isEmpty(borrowAmount) || isEmpty(approval)) {
     return null

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

@@ -1,9 +1,12 @@
 import {
+  CHAINS,
+  Erc2612,
   PoolInfoType,
   SuperfluidPoolProcessor,
-  SuperfluidPoolProcessor_ABI,
   useERC2612Permit,
   useMount,
+  ERC2612_ABI,
+  SuperfluidPoolProcessor_ABI,
 } from '@huma-finance/shared'
 import { BigNumber, Contract, ethers } from 'ethers'
 import React from 'react'
@@ -22,6 +25,7 @@ import { LoadingModal } from '../../LoadingModal'
 type Props = {
   poolInfo: PoolInfoType
   payerAddress: string
+  chainId: number
   borrower: string
   superToken: string
 }
@@ -29,15 +33,36 @@ type Props = {
 export function Permit({
   poolInfo,
   payerAddress,
+  chainId,
   borrower,
   superToken,
 }: Props): React.ReactElement | null {
   const dispatch = useDispatch()
+  const { address: tokenAddress } = poolInfo.poolUnderlyingToken
   const { borrowAmountBN: borrowAmountBNJson, stream } =
     useAppSelector(selectWidgetState)
-  const { getTradableStreamPermitMessage } = useERC2612Permit()
+  const { getERC2612PermitMessage, getTradableStreamPermitMessage } =
+    useERC2612Permit()
   const borrowAmountBN = BigNumber.from(borrowAmountBNJson)
 
+  const getApproveAllowanceCallData = async () => {
+    const erc2612PermitResult = await getERC2612PermitMessage(
+      tokenAddress,
+      poolInfo.poolProcessor!,
+      borrowAmountBN.toString()!,
+    )
+    const tokenContract = new Contract(tokenAddress, ERC2612_ABI) as Erc2612
+    return tokenContract.interface.encodeFunctionData('permit', [
+      poolInfo.poolProcessor!,
+      borrowAmountBN.toString()!,
+      erc2612PermitResult.nonce,
+      erc2612PermitResult.deadline,
+      erc2612PermitResult.v,
+      erc2612PermitResult.r,
+      erc2612PermitResult.s,
+    ])
+  }
+
   const getDrawdownCallData = async () => {
     const NFTPermitResult = await getTradableStreamPermitMessage(
       poolInfo.assetAddress!,
@@ -88,6 +113,14 @@ export function Permit({
     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.poolProcessor!)
       callData.push(drawdownCalldata)

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

@@ -39,7 +39,7 @@ export function StreamFactoringBorrow({
   handleSuccess,
 }: StreamFactoringBorrowProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId } = useWeb3React()
   const poolInfo = usePoolInfo(poolName, poolType)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
 
@@ -71,10 +71,11 @@ export function StreamFactoringBorrow({
       {step === WIDGET_STEP.ApproveAllowance && (
         <ApproveAllowance poolInfo={poolInfo} />
       )}
-      {step === WIDGET_STEP.Permit && account && (
+      {step === WIDGET_STEP.Permit && account && chainId && (
         <Permit
           poolInfo={poolInfo}
           payerAddress={payerAddress}
+          chainId={chainId}
           borrower={account}
           superToken={superToken}
         />

package/src/components/SuperfluidFactoring/SuperfluidFactoredList.tsx

@@ -50,9 +50,9 @@ export function SuperfluidFactoredList({
   const setItem = useCallback(
     () =>
       Promise.resolve({
-        name: poolInfo?.extra?.superToken?.symbol ?? '',
+        name: poolInfo?.extra?.superTokens?.[0].symbol ?? '',
       }),
-    [poolInfo?.extra?.superToken],
+    [poolInfo?.extra?.superTokens],
   )
 
   return (

package/src/components/SuperfluidFactoring/SuperfluidUpcomingList.tsx

@@ -106,9 +106,7 @@ export function SuperfluidUpcomingList({
   const { data } = useQuery<{ streams: Stream[] }>(GET_RECEIVED_STREAMS, {
     variables: {
       receiver: account ? account.toLowerCase() : undefined,
-      tokenIds: poolInfo?.extra?.superToken
-        ? [poolInfo.extra.superToken.id]
-        : [],
+      tokenIds: poolInfo?.extra?.superTokens?.map((item) => item.id) ?? [],
     },
   })
 

package/src/index.tsx

@@ -10,7 +10,6 @@ import { Provider as Eip1193Provider } from '@web3-react/types'
 import { Provider as AtomProvider } from 'jotai'
 import { Provider as ReduxProvider } from 'react-redux'
 
-import { useEffect, useState } from 'react'
 import { ChainSupportProvider } from './components/ChainSupportProvider'
 import {
   CreditLineApprove,
@@ -64,17 +63,11 @@ type WidgetProps = {
 
 function Widget(props: WCProps<WidgetProps>) {
   const { children, provider } = props
-  const [chainId, setChainId] = useState<number | undefined>(undefined)
 
-  useEffect(() => {
-    const getChainId = async () => {
-      if (provider instanceof JsonRpcProvider) {
-        const network = await provider.getNetwork()
-        setChainId(network?.chainId)
-      }
-    }
-    getChainId()
-  }, [provider])
+  let chainId
+  if (provider instanceof JsonRpcProvider) {
+    chainId = provider.network.chainId
+  }
 
   return (
     <ThemeProvider theme={themeHuma}>