@huma-finance/widgets 0.0.48-beta.291 → 0.0.48-beta.296

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.48-beta.291+e9f7853",
+  "version": "0.0.48-beta.296+a50d41c",
   "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",
-    "@huma-finance/shared": "^0.0.47",
+    "@huma-finance/sdk": "^0.0.48-beta.296+a50d41c",
+    "@huma-finance/shared": "^0.0.48-beta.296+a50d41c",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -193,5 +193,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "e9f78530d12c83443870f12b85436a65788e0b94"
+  "gitHead": "a50d41ce9bafdb1b8894da5c38a139b4efcda676"
 }

package/src/components/CreditLine/paymentV2/1-ChooseAmount.tsx

@@ -45,11 +45,6 @@ export function ChooseAmount({
     ethers.utils.formatUnits(payoffAmountBN, decimals),
   )
 
-  console.log('totalDueAmountBN', totalDueAmountBN.toString())
-  console.log('payoffAmountBN', payoffAmountBN.toString())
-  console.log('payoffAmount', payoffAmount)
-  console.log('currentAmount', currentAmount)
-
   useEffect(() => {
     setCurrentAmount(totalDueAmount)
   }, [totalDueAmount])

package/src/components/Lend/supplyV2/1-ChooseTranche.tsx

@@ -1,4 +1,4 @@
-import { TrancheType, UnderlyingTokenInfo } from '@huma-finance/shared'
+import { UnderlyingTokenInfo } from '@huma-finance/shared'
 import {
   css,
   FormControl,
@@ -10,6 +10,7 @@ import {
 } from '@mui/material'
 import React from 'react'
 
+import { SupplyType } from '.'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
@@ -18,14 +19,16 @@ import { WrapperModal } from '../../WrapperModal'
 
 type Props = {
   poolUnderlyingToken: UnderlyingTokenInfo
-  selectedTranche: TrancheType | undefined
-  changeTranche: (tranche: TrancheType) => void
+  selectedSupplyType: SupplyType | undefined
+  supplyTypes: SupplyType[]
+  changeSupplyType: (supplyType: SupplyType) => void
 }
 
-export function ChooseTranche({
+export function ChooseSupplyType({
   poolUnderlyingToken,
-  selectedTranche,
-  changeTranche,
+  selectedSupplyType,
+  supplyTypes,
+  changeSupplyType,
 }: Props): React.ReactElement | null {
   const theme = useTheme()
   const dispatch = useAppDispatch()
@@ -57,24 +60,19 @@ export function ChooseTranche({
     `,
   }
 
+  const handleChangeSupplyType = (supplyTypeValue: string | number) => {
+    const supplyType = supplyTypes.find(
+      (item) => item.value === supplyTypeValue,
+    )
+    if (supplyType) {
+      changeSupplyType(supplyType)
+    }
+  }
+
   const handleNext = () => {
     dispatch(setStep(WIDGET_STEP.ChooseAmount))
   }
 
-  const items: {
-    label: string
-    value: TrancheType
-  }[] = [
-    {
-      label: 'Senior',
-      value: 'senior',
-    },
-    {
-      label: 'Junior',
-      value: 'junior',
-    },
-  ]
-
   return (
     <WrapperModal title={`Supply ${poolUnderlyingToken.symbol}`}>
       <FormControl>
@@ -83,9 +81,9 @@ export function ChooseTranche({
           aria-labelledby='buttons-group-label'
           name='radio-buttons-group'
           css={styles.radioGroup}
-          onChange={(e) => changeTranche(e.target.value as TrancheType)}
+          onChange={(e) => handleChangeSupplyType(e.target.value)}
         >
-          {items.map((item) => (
+          {supplyTypes.map((item) => (
             <FormControlLabel
               key={item.label}
               value={item.value}
@@ -106,7 +104,7 @@ export function ChooseTranche({
       </FormControl>
       <BottomButton
         variant='contained'
-        disabled={!selectedTranche}
+        disabled={!selectedSupplyType}
         onClick={handleNext}
       >
         NEXT

package/src/components/Lend/supplyV2/3-ChooseAmount.tsx

@@ -1,8 +1,9 @@
 import {
+  FirstLossCoverIndex,
+  formatNumber,
   PoolInfoV2,
-  TrancheType,
   UnderlyingTokenInfo,
-  formatNumber,
+  useFirstLossCoverAllowanceV2,
   usePoolSafeAllowanceV2,
   usePoolUnderlyingTokenBalanceV2,
 } from '@huma-finance/shared'
@@ -10,6 +11,7 @@ import { useWeb3React } from '@web3-react/core'
 import { BigNumber, ethers } from 'ethers'
 import React, { useState } from 'react'
 
+import { SupplyType } from '.'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
@@ -18,30 +20,31 @@ import { InputAmountModal } from '../../InputAmountModal'
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
-  selectedTranche: TrancheType | undefined
+  selectedSupplyType: SupplyType
 }
 
 export function ChooseAmount({
   poolInfo,
   poolUnderlyingToken,
-  selectedTranche,
+  selectedSupplyType,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { account, provider } = useWeb3React()
   const { symbol, decimals } = poolUnderlyingToken
   const [currentAmount, setCurrentAmount] = useState<number | string>(0)
-  const { allowance = BigNumber.from(0) } = usePoolSafeAllowanceV2(
-    poolInfo.poolName,
-    account,
-    provider,
-  )
-  const [balance] = usePoolUnderlyingTokenBalanceV2(
-    poolInfo.poolName,
-    account,
-    provider,
-  )
+  const { allowance: poolSafeAllowance = BigNumber.from(0) } =
+    usePoolSafeAllowanceV2(poolInfo.poolName, account, provider)
+  const [firstLossCoverAllowance = BigNumber.from(0)] =
+    useFirstLossCoverAllowanceV2(
+      poolInfo.poolName,
+      Number(selectedSupplyType.value) as FirstLossCoverIndex,
+      account,
+      provider,
+    )
+  const [underlyingTokenBalance = BigNumber.from(0)] =
+    usePoolUnderlyingTokenBalanceV2(poolInfo.poolName, account, provider)
   const maxAmountFormatted = ethers.utils.formatUnits(
-    balance,
+    underlyingTokenBalance,
     poolUnderlyingToken.decimals,
   )
 
@@ -55,16 +58,23 @@ export function ChooseAmount({
       String(currentAmount),
       decimals,
     )
-    const step = currentAmountBN.gt(allowance)
-      ? WIDGET_STEP.ApproveAllowance
-      : WIDGET_STEP.Transfer
-    dispatch(setStep(step))
+    if (selectedSupplyType.type === 'tranche') {
+      const step = currentAmountBN.gt(poolSafeAllowance)
+        ? WIDGET_STEP.ApproveAllowance
+        : WIDGET_STEP.Transfer
+      dispatch(setStep(step))
+    } else {
+      const step = currentAmountBN.gt(firstLossCoverAllowance)
+        ? WIDGET_STEP.ApproveAllowance
+        : WIDGET_STEP.Transfer
+      dispatch(setStep(step))
+    }
   }
 
   return (
     <InputAmountModal
       title='Enter Amount'
-      subTitle={`Supplying ${symbol} with ${selectedTranche}`}
+      subTitle={`Supplying ${symbol} with ${selectedSupplyType?.label}`}
       tokenSymbol={symbol}
       currentAmount={currentAmount}
       handleChangeAmount={handleChangeAmount}

package/src/components/Lend/supplyV2/4-ApproveAllowance.tsx

@@ -1,6 +1,11 @@
-import { PoolInfoV2, UnderlyingTokenInfo } from '@huma-finance/shared'
+import {
+  FirstLossCoverIndex,
+  PoolInfoV2,
+  UnderlyingTokenInfo,
+} from '@huma-finance/shared'
 import React, { useCallback } from 'react'
 
+import { SupplyType } from '.'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
@@ -9,14 +14,22 @@ import { ApproveAllowanceModalV2 } from '../../ApproveAllowanceModalV2'
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
+  selectedSupplyType: SupplyType
 }
 
 export function ApproveAllowance({
   poolInfo,
   poolUnderlyingToken,
+  selectedSupplyType,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const spender = poolInfo.poolSafe
+  let spender = poolInfo.poolSafe
+  if (selectedSupplyType.type === 'firstLossCover') {
+    spender =
+      poolInfo.firstLossCovers[
+        Number(selectedSupplyType.value) as FirstLossCoverIndex
+      ]
+  }
 
   const handleSuccess = useCallback(() => {
     dispatch(setStep(WIDGET_STEP.Transfer))

package/src/components/Lend/supplyV2/5-Transfer.tsx

@@ -1,30 +1,34 @@
 import {
+  FirstLossCoverIndex,
+  getFirstLossCoverContractV2,
+  getTrancheVaultContractV2,
   PoolInfoV2,
-  useTrancheVaultContractV2,
   TrancheType,
   UnderlyingTokenInfo,
 } from '@huma-finance/shared'
 import { useWeb3React } from '@web3-react/core'
 import { ethers } from 'ethers'
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 
+import { SupplyType } from '.'
 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 { LoadingModal } from '../../LoadingModal'
 import { TxSendModalV2 } from '../../TxSendModalV2'
 
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
-  trancheType: TrancheType
+  selectedSupplyType: SupplyType
 }
 
 export function Transfer({
   poolInfo,
   poolUnderlyingToken,
-  trancheType,
-}: Props): React.ReactElement | null {
+  selectedSupplyType,
+}: Props): React.ReactElement {
   const dispatch = useAppDispatch()
   const { account, provider } = useWeb3React()
   const { supplyAmount } = useAppSelector(selectWidgetState)
@@ -33,26 +37,66 @@ export function Transfer({
     String(supplyAmount),
     decimals,
   )
-  const trancheVaultContract = useTrancheVaultContractV2(
+  const [contract, setContract] = useState<ethers.Contract | undefined>(
+    undefined,
+  )
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (account) {
+        if (selectedSupplyType.type === 'tranche') {
+          const trancheVaultContract = await getTrancheVaultContractV2(
+            poolInfo.poolName,
+            selectedSupplyType.value as TrancheType,
+            provider,
+            account,
+          )
+          if (trancheVaultContract) {
+            setContract(trancheVaultContract)
+          }
+        }
+        if (selectedSupplyType.type === 'firstLossCover') {
+          const firstLossCoverContract = await getFirstLossCoverContractV2(
+            poolInfo.poolName,
+            Number(selectedSupplyType.value) as FirstLossCoverIndex,
+            provider,
+            account,
+          )
+          if (firstLossCoverContract) {
+            setContract(firstLossCoverContract)
+          }
+        }
+      }
+    }
+    fetchData()
+  }, [
+    account,
     poolInfo.poolName,
-    trancheType,
     provider,
-    account,
-  )
+    selectedSupplyType.type,
+    selectedSupplyType.value,
+  ])
+
+  const method =
+    selectedSupplyType.type === 'tranche' ? 'deposit' : 'depositCover'
+  const params =
+    selectedSupplyType.type === 'tranche'
+      ? [supplyBigNumber, account]
+      : [supplyBigNumber]
 
   const handleSuccess = useCallback(() => {
     dispatch(setStep(WIDGET_STEP.Done))
   }, [dispatch])
 
-  if (!trancheVaultContract || !account) {
-    return null
+  if (!contract) {
+    return <LoadingModal title='Transaction Pending' />
   }
 
   return (
     <TxSendModalV2
-      contract={trancheVaultContract}
-      method='deposit'
-      params={[supplyBigNumber, account]}
+      contract={contract}
+      method={method}
+      params={params}
       handleSuccess={handleSuccess}
     />
   )

package/src/components/Lend/supplyV2/6-Success.tsx

@@ -45,11 +45,8 @@ export function Success({
       const events = decodeLogs(txReceipt.logs, TRANSFER_ABI)
       if (events) {
         events.forEach((event) => {
-          const { from, to, value } = event.args
-          if (
-            from.toLowerCase() === account?.toLowerCase() &&
-            to.toLowerCase() === poolInfo.poolSafe.toLowerCase()
-          ) {
+          const { from, value } = event.args
+          if (from.toLowerCase() === account?.toLowerCase()) {
             setSupplyAmount(downScale(value.toString(), decimals))
           }
         })

package/src/components/Lend/supplyV2/index.tsx

@@ -1,7 +1,9 @@
 import {
-  POOL_NAME,
-  TrancheType,
+  capitalizeFirstLetter,
+  FirstLossCoverIndex,
   openInNewTab,
+  POOL_NAME,
+  useFirstLossCoverStatsV2,
   useLenderApprovedV2,
   usePoolInfoV2,
   usePoolUnderlyingTokenInfoV2,
@@ -16,7 +18,7 @@ import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ErrorModal } from '../../ErrorModal'
 import { WidgetWrapper } from '../../WidgetWrapper'
-import { ChooseTranche } from './1-ChooseTranche'
+import { ChooseSupplyType } from './1-ChooseTranche'
 import { Evaluation } from './2-Evaluation'
 import { ChooseAmount } from './3-ChooseAmount'
 import { ApproveAllowance } from './4-ApproveAllowance'
@@ -24,6 +26,12 @@ import { Transfer } from './5-Transfer'
 import { Success } from './6-Success'
 import { Notifications } from './7-Notifications'
 
+export type SupplyType = {
+  label: string
+  value: string
+  type: 'tranche' | 'firstLossCover'
+}
+
 /**
  * Lend pool supply props
  * @typedef {Object} LendSupplyPropsV2
@@ -47,7 +55,8 @@ export function LendSupplyV2({
   const { chainId, provider, account } = useWeb3React()
   const poolInfo = usePoolInfoV2(poolName, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
+  const [supplyTypes, setSupplyTypes] = useState<SupplyType[]>([])
+  const [selectedSupplyType, setSelectedSupplyType] = useState<SupplyType>()
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
 
   const [lenderApprovedSenior] = useLenderApprovedV2(
@@ -62,40 +71,57 @@ export function LendSupplyV2({
     account,
     provider,
   )
+  const [flcStats] = useFirstLossCoverStatsV2(poolName, account, provider)
 
   const lenderApproveStatusFetched =
-    lenderApprovedSenior !== undefined && lenderApprovedJunior !== undefined
+    lenderApprovedSenior !== undefined &&
+    lenderApprovedJunior !== undefined &&
+    flcStats !== undefined
 
   useEffect(() => {
     if (!step && poolInfo && lenderApproveStatusFetched) {
-      if (lenderApprovedJunior && !lenderApprovedSenior) {
-        setSelectedTranche('junior')
-        dispatch(setStep(WIDGET_STEP.ChooseAmount))
-        return
+      const items: SupplyType[] = []
+      if (lenderApprovedSenior) {
+        items.push({
+          label: 'Senior Tranche',
+          value: 'senior',
+          type: 'tranche',
+        })
       }
-
-      if (lenderApprovedSenior && !lenderApprovedJunior) {
-        setSelectedTranche('senior')
-        dispatch(setStep(WIDGET_STEP.ChooseAmount))
-        return
+      if (lenderApprovedJunior) {
+        items.push({
+          label: 'Junior Tranche',
+          value: 'junior',
+          type: 'tranche',
+        })
       }
+      flcStats
+        .filter((flc) => flc.isApproved)
+        .forEach((flc) => {
+          items.push({
+            label: `${capitalizeFirstLetter(
+              FirstLossCoverIndex[flc.firstLossCoverIndex],
+            )} First Loss Cover`,
+            value: String(flc.firstLossCoverIndex),
+            type: 'firstLossCover',
+          })
+        })
 
-      if (lenderApprovedJunior && lenderApprovedSenior) {
+      if (items.length === 1) {
+        setSelectedSupplyType(items[0])
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+      } else if (items.length > 1) {
+        setSupplyTypes(items)
         dispatch(setStep(WIDGET_STEP.ChooseTranche))
-        return
-      }
-
-      if (poolInfo.KYC) {
+      } else if (poolInfo.KYC) {
         dispatch(setStep(WIDGET_STEP.Evaluation))
-        return
-      }
-
-      if (poolInfo.supplyLink) {
+      } else if (poolInfo.supplyLink) {
         openInNewTab(poolInfo.supplyLink)
       }
     }
   }, [
     dispatch,
+    flcStats,
     lenderApproveStatusFetched,
     lenderApprovedJunior,
     lenderApprovedSenior,
@@ -123,33 +149,35 @@ export function LendSupplyV2({
       handleSuccess={handleSuccess}
     >
       {step === WIDGET_STEP.ChooseTranche && (
-        <ChooseTranche
+        <ChooseSupplyType
           poolUnderlyingToken={poolUnderlyingToken}
-          selectedTranche={selectedTranche}
-          changeTranche={setSelectedTranche}
+          selectedSupplyType={selectedSupplyType}
+          supplyTypes={supplyTypes}
+          changeSupplyType={setSelectedSupplyType}
         />
       )}
       {step === WIDGET_STEP.Evaluation && (
         <Evaluation poolInfo={poolInfo} handleClose={handleClose} />
       )}
-      {step === WIDGET_STEP.ChooseAmount && (
+      {step === WIDGET_STEP.ChooseAmount && selectedSupplyType && (
         <ChooseAmount
           poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
-          selectedTranche={selectedTranche}
+          selectedSupplyType={selectedSupplyType}
         />
       )}
-      {step === WIDGET_STEP.ApproveAllowance && (
+      {step === WIDGET_STEP.ApproveAllowance && selectedSupplyType && (
         <ApproveAllowance
           poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
+          selectedSupplyType={selectedSupplyType}
         />
       )}
-      {step === WIDGET_STEP.Transfer && selectedTranche && (
+      {step === WIDGET_STEP.Transfer && selectedSupplyType && (
         <Transfer
           poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
-          trancheType={selectedTranche}
+          selectedSupplyType={selectedSupplyType}
         />
       )}
       {step === WIDGET_STEP.Done && (