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

package/dist/index.js

@@ -1,5 +1,5 @@
 import { JsonRpcProvider } from '@ethersproject/providers';
-import { txAtom, useMQ, supportedChainId, sendTxAtom, isTxFailed, getExplorerUrl, openInNewTab, usePoolUnderlyingTokenContract, TxStateType, useMount, decodeLogs, ERC20_ABI, downScale, formatMoney, POOL_NAME, POOL_TYPE, usePoolInfo, useAccountStats, getERC20Contract, usePoolInfoV2, usePoolUnderlyingTokenInfoV2, usePoolSafeAllowanceV2, useAuthErrorHandling, checkIsDev, EAService, EARejectionError, EARejectMessage, EARejectReason, useCLFeeManager, useCLPoolAllowance, usePoolContract, timeUtil, formatNumber, doesChainSupportNotifi, getNotifiDappId, getBlockchainConfigFromChain, CreditState, useCreditContractV2, useCreditStatsV2, CreditStateV2, upScale, toBigNumber, TRANSFER_ABI, FirstLossCoverIndex, useFirstLossCoverContractV2, useFirstLossCoverRequirementV2, useFirstLossCoverAllowanceV2, useFeeManager, combineStyles, isEmpty, useInvoiceNFTContract, useRFPoolAllowance, useLenderDepositRecordV2, useLPConfigV2, useNextEpochStartTimeV2, timestampToLL, getTrancheVaultContractV2, useTrancheVaultContractV2, useCancellableRedemptionInfoV2, useLenderPositionV2, useParamsSearch, IdentityService, CHAINS, configUtil, usePoolAllowance, useLenderApproved, useLenderPosition, useWithdrawlLockoutInSeconds, usePoolUnderlyingTokenBalance, usePoolUnderlyingTokenBalanceV2, useLenderApprovedV2, useLastDepositTime, formatBNFixed, useWithdrawableAssetsV2, useReceivableInfoV2, useReceivableContractV2, CreditEventText, useERC2612Permit, ERC2612_ABI, SuperfluidPoolProcessor_ABI, useMultiSendContract, usePoolUnderlyingToken, hasRFActiveLoan, getWalletAddressAbbr, useFactoring, PoolMap, PoolSubgraphMap, CreditEvent, CURRENCY_CODE, Provider as Provider$1 } from '@huma-finance/shared';
+import { txAtom, useMQ, supportedChainId, sendTxAtom, isTxFailed, getExplorerUrl, openInNewTab, usePoolUnderlyingTokenContract, TxStateType, useMount, decodeLogs, ERC20_ABI, downScale, formatMoney, POOL_NAME, POOL_TYPE, usePoolInfo, useAccountStats, getERC20Contract, usePoolInfoV2, usePoolUnderlyingTokenInfoV2, usePoolSafeAllowanceV2, useAuthErrorHandling, checkIsDev, EAService, EARejectionError, EARejectMessage, EARejectReason, useCLFeeManager, useCLPoolAllowance, usePoolContract, timeUtil, formatNumber, doesChainSupportNotifi, getNotifiDappId, getBlockchainConfigFromChain, CreditState, useCreditContractV2, useCreditStatsV2, CreditStateV2, upScale, toBigNumber, TRANSFER_ABI, FirstLossCoverIndex, useFirstLossCoverContractV2, useFirstLossCoverRequirementV2, useFirstLossCoverAllowanceV2, useFeeManager, combineStyles, isEmpty, useInvoiceNFTContract, useRFPoolAllowance, useLenderDepositRecordV2, useLPConfigV2, useNextEpochStartTimeV2, timestampToLL, getTrancheVaultContractV2, useTrancheVaultContractV2, useCancellableRedemptionInfoV2, useLenderPositionV2, useParamsSearch, IdentityService, CHAINS, configUtil, usePoolAllowance, useLenderApproved, useLenderPosition, useWithdrawlLockoutInSeconds, usePoolUnderlyingTokenBalance, usePoolUnderlyingTokenBalanceV2, getFirstLossCoverContractV2, useLenderApprovedV2, useFirstLossCoverStatsV2, capitalizeFirstLetter, useLastDepositTime, useTrancheWithdrawableAssetsV2, usePoolIsReadyForFlcWithdrawalV2, formatBNFixed, useReceivableInfoV2, useReceivableContractV2, CreditEventText, useERC2612Permit, ERC2612_ABI, SuperfluidPoolProcessor_ABI, useMultiSendContract, usePoolUnderlyingToken, hasRFActiveLoan, getWalletAddressAbbr, useFactoring, PoolMap, PoolSubgraphMap, CreditEvent, CURRENCY_CODE, Provider as Provider$1 } from '@huma-finance/shared';
 import { useTheme, css, Box, Typography, Tooltip, Button, Dialog, Slider, Input, Divider, TextField, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Snackbar, Alert, Skeleton, TablePagination, LinearProgress, createTheme, ThemeProvider } from '@mui/material';
 import { useAtom, Provider as Provider$2 } from 'jotai';
 import * as React from 'react';
@@ -2438,7 +2438,7 @@ function ChooseAmountModal(_ref) {
   });
 }
 
-function ChooseAmount$c(_ref) {
+function ChooseAmount$d(_ref) {
   let {
     poolInfo,
     accountStats
@@ -2915,7 +2915,7 @@ function CreditLineBorrow(_ref) {
     children: [step === WIDGET_STEP.Evaluation && jsx(Evaluation$4, {
       poolInfo: poolInfo,
       handleApprove: approveCallback
-    }), step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$c, {
+    }), step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$d, {
       poolInfo: poolInfo,
       accountStats: accountStats
     }), step === WIDGET_STEP.ApproveAllowance && jsx(ApproveAllowance$a, {
@@ -3006,7 +3006,7 @@ function InputAmountModal(_ref) {
   });
 }
 
-function ChooseAmount$b(_ref) {
+function ChooseAmount$c(_ref) {
   let {
     poolInfo,
     poolUnderlyingToken,
@@ -3248,7 +3248,7 @@ function CreditLineBorrowV2(_ref) {
     handleSuccess: handleSuccessCallback,
     children: [!step && jsx(LoadingModal, {
       title: "Borrow"
-    }), step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$b, {
+    }), step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$c, {
       poolInfo: poolInfo,
       poolUnderlyingToken: poolUnderlyingToken,
       accountStats: accountStats
@@ -3272,7 +3272,7 @@ function CreditLineBorrowV2(_ref) {
   });
 }
 
-function ChooseAmount$a(_ref) {
+function ChooseAmount$b(_ref) {
   let {
     payoffAmount,
     totalDueAmount,
@@ -3429,7 +3429,7 @@ function CreditLinePayment(_ref) {
     loadingTitle: "Make Payment",
     handleClose: handleClose,
     handleSuccess: handleSuccess,
-    children: [step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$a, {
+    children: [step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$b, {
       poolInfo: poolInfo,
       payoffAmount: payoffAmount,
       totalDueAmount: totalDueAmount
@@ -3448,7 +3448,7 @@ function CreditLinePayment(_ref) {
   });
 }
 
-function ChooseAmount$9(_ref) {
+function ChooseAmount$a(_ref) {
   let {
     payoffAmount: payoffAmountBN,
     totalDueAmount: totalDueAmountBN,
@@ -3470,10 +3470,6 @@ function ChooseAmount$9(_ref) {
   } = usePoolSafeAllowanceV2(poolInfo.poolName, account, provider);
   const totalDueAmount = Number(ethers.utils.formatUnits(totalDueAmountBN, decimals));
   const payoffAmount = Number(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]);
@@ -3637,7 +3633,7 @@ function CreditLinePaymentV2(_ref) {
     loadingTitle: "Pay",
     handleClose: handleClose,
     handleSuccess: handleSuccess,
-    children: [step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$9, {
+    children: [step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$a, {
       poolInfo: poolInfo,
       poolUnderlyingToken: poolUnderlyingToken,
       payoffAmount: payoffAmount,
@@ -3830,7 +3826,7 @@ function Evaluation$3(_ref) {
   });
 }
 
-function ChooseAmount$8(_ref) {
+function ChooseAmount$9(_ref) {
   var _receivable;
   let {
     poolInfo,
@@ -4111,7 +4107,7 @@ function InvoiceFactoringBorrow(_ref) {
     children: [step === WIDGET_STEP.Evaluation && jsx(Evaluation$3, {
       poolInfo: poolInfo,
       tokenId: tokenId.toString()
-    }), step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$8, {
+    }), step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$9, {
       poolInfo: poolInfo,
       accountStats: accountStats
     }), step === WIDGET_STEP.ConfirmTransfer && jsx(ConfirmTransfer$1, {}), step === WIDGET_STEP.ApproveNFT && jsx(ApproveNFT, {
@@ -4130,7 +4126,7 @@ function InvoiceFactoringBorrow(_ref) {
   });
 }
 
-function ChooseAmount$7(_ref) {
+function ChooseAmount$8(_ref) {
   let {
     creditRecord,
     poolInfo
@@ -4275,7 +4271,7 @@ function InvoiceFactoringPayment(_ref) {
     loadingTitle: "Make Payment",
     handleClose: handleClose,
     handleSuccess: handleSuccess,
-    children: [step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$7, {
+    children: [step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$8, {
       creditRecord: creditRecord,
       poolInfo: poolInfo
     }), step === WIDGET_STEP.ApproveAllowance && jsx(ApproveAllowance$5, {
@@ -4421,7 +4417,7 @@ function ChooseAction(_ref) {
   });
 }
 
-function ChooseAmount$6(_ref) {
+function ChooseAmount$7(_ref) {
   let {
     poolInfo,
     poolUnderlyingToken,
@@ -4636,7 +4632,7 @@ function LendRedeemV2(_ref) {
       changeRedemptionType: setRedemptionType,
       seniorPosition: seniorPosition,
       juniorPosition: juniorPosition
-    }), step === WIDGET_STEP.ChooseAmount && redemptionType && jsx(ChooseAmount$6, {
+    }), step === WIDGET_STEP.ChooseAmount && redemptionType && jsx(ChooseAmount$7, {
       poolInfo: poolInfo,
       poolUnderlyingToken: poolUnderlyingToken,
       redemptionType: redemptionType,
@@ -5046,7 +5042,7 @@ function Evaluation$2(_ref) {
   });
 }
 
-function ChooseAmount$5(_ref) {
+function ChooseAmount$6(_ref) {
   let {
     allowance,
     withdrawlLockoutSeconds,
@@ -5253,7 +5249,7 @@ function LendSupply(_ref) {
       poolInfo: poolInfo,
       handleClose: handleClose,
       handleApproveSuccess: handleApproveSuccess
-    }), step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$5, {
+    }), step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$6, {
       poolInfo: poolInfo,
       allowance: allowance,
       underlyingTokenBalance: balanceWithoutDecimals,
@@ -5278,11 +5274,12 @@ function LendSupply(_ref) {
 }
 
 var _templateObject$9, _templateObject2$7, _templateObject3$6;
-function ChooseTranche$1(_ref) {
+function ChooseSupplyType(_ref) {
   let {
     poolUnderlyingToken,
-    selectedTranche,
-    changeTranche
+    selectedSupplyType,
+    supplyTypes,
+    changeSupplyType
   } = _ref;
   const theme = useTheme();
   const dispatch = useAppDispatch();
@@ -5291,16 +5288,15 @@ function ChooseTranche$1(_ref) {
     radioGroup: css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n      margin-left: ", ";\n      margin-top: ", ";\n    "])), theme.spacing(3), theme.spacing(3)),
     formControl: css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n      margin-bottom: ", ";\n\n      .MuiFormControlLabel-label {\n        color: ", ";\n        font-family: 'Uni-Neue-Regular';\n        font-size: 16px;\n        line-height: 150%;\n        letter-spacing: 0.15px;\n      }\n    "])), theme.spacing(1), theme.palette.text.primary)
   };
+  const handleChangeSupplyType = supplyTypeValue => {
+    const supplyType = supplyTypes.find(item => item.value === supplyTypeValue);
+    if (supplyType) {
+      changeSupplyType(supplyType);
+    }
+  };
   const handleNext = () => {
     dispatch(setStep(WIDGET_STEP.ChooseAmount));
   };
-  const items = [{
-    label: 'Senior',
-    value: 'senior'
-  }, {
-    label: 'Junior',
-    value: 'junior'
-  }];
   return jsxs(WrapperModal, {
     title: "Supply ".concat(poolUnderlyingToken.symbol),
     children: [jsxs(FormControl, {
@@ -5311,8 +5307,8 @@ function ChooseTranche$1(_ref) {
         "aria-labelledby": "buttons-group-label",
         name: "radio-buttons-group",
         css: styles.radioGroup,
-        onChange: e => changeTranche(e.target.value),
-        children: items.map(item => jsx(FormControlLabel, {
+        onChange: e => handleChangeSupplyType(e.target.value),
+        children: supplyTypes.map(item => jsx(FormControlLabel, {
           value: item.value,
           control: jsx(Radio, {
             sx: {
@@ -5327,7 +5323,7 @@ function ChooseTranche$1(_ref) {
       })]
     }), jsx(BottomButton, {
       variant: "contained",
-      disabled: !selectedTranche,
+      disabled: !selectedSupplyType,
       onClick: handleNext,
       children: "NEXT"
     })]
@@ -5566,11 +5562,11 @@ function Evaluation$1(_ref) {
   });
 }
 
-function ChooseAmount$4(_ref) {
+function ChooseAmount$5(_ref) {
   let {
     poolInfo,
     poolUnderlyingToken,
-    selectedTranche
+    selectedSupplyType
   } = _ref;
   const dispatch = useAppDispatch();
   const {
@@ -5583,22 +5579,28 @@ function ChooseAmount$4(_ref) {
   } = poolUnderlyingToken;
   const [currentAmount, setCurrentAmount] = useState(0);
   const {
-    allowance = BigNumber.from(0)
+    allowance: poolSafeAllowance = BigNumber.from(0)
   } = usePoolSafeAllowanceV2(poolInfo.poolName, account, provider);
-  const [balance] = usePoolUnderlyingTokenBalanceV2(poolInfo.poolName, account, provider);
-  const maxAmountFormatted = ethers.utils.formatUnits(balance, poolUnderlyingToken.decimals);
+  const [firstLossCoverAllowance = BigNumber.from(0)] = useFirstLossCoverAllowanceV2(poolInfo.poolName, Number(selectedSupplyType.value), account, provider);
+  const [underlyingTokenBalance = BigNumber.from(0)] = usePoolUnderlyingTokenBalanceV2(poolInfo.poolName, account, provider);
+  const maxAmountFormatted = ethers.utils.formatUnits(underlyingTokenBalance, poolUnderlyingToken.decimals);
   const handleChangeAmount = newAmount => {
     setCurrentAmount(newAmount);
     dispatch(setSupplyAmount(Number(newAmount)));
   };
   const handleAction = () => {
     const currentAmountBN = ethers.utils.parseUnits(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 jsx(InputAmountModal, {
     title: "Enter Amount",
-    subTitle: "Supplying ".concat(symbol, " with ").concat(selectedTranche),
+    subTitle: "Supplying ".concat(symbol, " with ").concat(selectedSupplyType === null || selectedSupplyType === void 0 ? void 0 : selectedSupplyType.label),
     tokenSymbol: symbol,
     currentAmount: currentAmount,
     handleChangeAmount: handleChangeAmount,
@@ -5612,10 +5614,14 @@ function ChooseAmount$4(_ref) {
 function ApproveAllowance$3(_ref) {
   let {
     poolInfo,
-    poolUnderlyingToken
+    poolUnderlyingToken,
+    selectedSupplyType
   } = _ref;
   const dispatch = useAppDispatch();
-  const spender = poolInfo.poolSafe;
+  let spender = poolInfo.poolSafe;
+  if (selectedSupplyType.type === 'firstLossCover') {
+    spender = poolInfo.firstLossCovers[Number(selectedSupplyType.value)];
+  }
   const handleSuccess = useCallback(() => {
     dispatch(setStep(WIDGET_STEP.Transfer));
   }, [dispatch]);
@@ -5631,7 +5637,7 @@ function Transfer$5(_ref) {
   let {
     poolInfo,
     poolUnderlyingToken,
-    trancheType
+    selectedSupplyType
   } = _ref;
   const dispatch = useAppDispatch();
   const {
@@ -5645,17 +5651,40 @@ function Transfer$5(_ref) {
     decimals
   } = poolUnderlyingToken;
   const supplyBigNumber = ethers.utils.parseUnits(String(supplyAmount), decimals);
-  const trancheVaultContract = useTrancheVaultContractV2(poolInfo.poolName, trancheType, provider, account);
+  const [contract, setContract] = useState(undefined);
+  useEffect(() => {
+    const fetchData = async () => {
+      if (account) {
+        if (selectedSupplyType.type === 'tranche') {
+          const trancheVaultContract = await getTrancheVaultContractV2(poolInfo.poolName, selectedSupplyType.value, provider, account);
+          if (trancheVaultContract) {
+            setContract(trancheVaultContract);
+          }
+        }
+        if (selectedSupplyType.type === 'firstLossCover') {
+          const firstLossCoverContract = await getFirstLossCoverContractV2(poolInfo.poolName, Number(selectedSupplyType.value), provider, account);
+          if (firstLossCoverContract) {
+            setContract(firstLossCoverContract);
+          }
+        }
+      }
+    };
+    fetchData();
+  }, [account, poolInfo.poolName, provider, 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 jsx(LoadingModal, {
+      title: "Transaction Pending"
+    });
   }
   return jsx(TxSendModalV2, {
-    contract: trancheVaultContract,
-    method: "deposit",
-    params: [supplyBigNumber, account],
+    contract: contract,
+    method: method,
+    params: params,
     handleSuccess: handleSuccess
   });
 }
@@ -5694,10 +5723,9 @@ function Success$4(_ref) {
         events.forEach(event => {
           const {
             from,
-            to,
             value
           } = event.args;
-          if (from.toLowerCase() === (account === null || account === void 0 ? void 0 : account.toLowerCase()) && to.toLowerCase() === poolInfo.poolSafe.toLowerCase()) {
+          if (from.toLowerCase() === (account === null || account === void 0 ? void 0 : account.toLowerCase())) {
             setSupplyAmount(downScale(value.toString(), decimals));
           }
         });
@@ -5746,36 +5774,50 @@ function LendSupplyV2(_ref) {
     step,
     errorMessage
   } = useAppSelector(selectWidgetState);
-  const [selectedTranche, setSelectedTranche] = useState();
+  const [supplyTypes, setSupplyTypes] = useState([]);
+  const [selectedSupplyType, setSelectedSupplyType] = useState();
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider);
   const [lenderApprovedSenior] = useLenderApprovedV2(poolName, 'senior', account, provider);
   const [lenderApprovedJunior] = useLenderApprovedV2(poolName, 'junior', account, provider);
-  const lenderApproveStatusFetched = lenderApprovedSenior !== undefined && lenderApprovedJunior !== undefined;
+  const [flcStats] = useFirstLossCoverStatsV2(poolName, account, provider);
+  const lenderApproveStatusFetched = lenderApprovedSenior !== undefined && lenderApprovedJunior !== undefined && flcStats !== undefined;
   useEffect(() => {
     if (!step && poolInfo && lenderApproveStatusFetched) {
-      if (lenderApprovedJunior && !lenderApprovedSenior) {
-        setSelectedTranche('junior');
-        dispatch(setStep(WIDGET_STEP.ChooseAmount));
-        return;
+      const items = [];
+      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'
+        });
       }
-      if (lenderApprovedJunior && lenderApprovedSenior) {
+      flcStats.filter(flc => flc.isApproved).forEach(flc => {
+        items.push({
+          label: "".concat(capitalizeFirstLetter(FirstLossCoverIndex[flc.firstLossCoverIndex]), " First Loss Cover"),
+          value: String(flc.firstLossCoverIndex),
+          type: 'firstLossCover'
+        });
+      });
+      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, lenderApproveStatusFetched, lenderApprovedJunior, lenderApprovedSenior, poolInfo, step]);
+  }, [dispatch, flcStats, lenderApproveStatusFetched, lenderApprovedJunior, lenderApprovedSenior, poolInfo, step]);
   if (!poolInfo || !poolUnderlyingToken || !lenderApproveStatusFetched) {
     return jsx(WidgetWrapper, {
       isOpen: true,
@@ -5790,24 +5832,26 @@ function LendSupplyV2(_ref) {
     loadingTitle: "Supply ".concat(poolUnderlyingToken.symbol),
     handleClose: handleClose,
     handleSuccess: handleSuccess,
-    children: [step === WIDGET_STEP.ChooseTranche && jsx(ChooseTranche$1, {
+    children: [step === WIDGET_STEP.ChooseTranche && jsx(ChooseSupplyType, {
       poolUnderlyingToken: poolUnderlyingToken,
-      selectedTranche: selectedTranche,
-      changeTranche: setSelectedTranche
+      selectedSupplyType: selectedSupplyType,
+      supplyTypes: supplyTypes,
+      changeSupplyType: setSelectedSupplyType
     }), step === WIDGET_STEP.Evaluation && jsx(Evaluation$1, {
       poolInfo: poolInfo,
       handleClose: handleClose
-    }), step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$4, {
+    }), step === WIDGET_STEP.ChooseAmount && selectedSupplyType && jsx(ChooseAmount$5, {
       poolInfo: poolInfo,
       poolUnderlyingToken: poolUnderlyingToken,
-      selectedTranche: selectedTranche
-    }), step === WIDGET_STEP.ApproveAllowance && jsx(ApproveAllowance$3, {
+      selectedSupplyType: selectedSupplyType
+    }), step === WIDGET_STEP.ApproveAllowance && selectedSupplyType && jsx(ApproveAllowance$3, {
       poolInfo: poolInfo,
-      poolUnderlyingToken: poolUnderlyingToken
-    }), step === WIDGET_STEP.Transfer && selectedTranche && jsx(Transfer$5, {
+      poolUnderlyingToken: poolUnderlyingToken,
+      selectedSupplyType: selectedSupplyType
+    }), step === WIDGET_STEP.Transfer && selectedSupplyType && jsx(Transfer$5, {
       poolInfo: poolInfo,
       poolUnderlyingToken: poolUnderlyingToken,
-      trancheType: selectedTranche
+      selectedSupplyType: selectedSupplyType
     }), step === WIDGET_STEP.Done && jsx(Success$4, {
       poolInfo: poolInfo,
       poolUnderlyingToken: poolUnderlyingToken,
@@ -5865,7 +5909,7 @@ function CheckWithdrawable(_ref) {
   });
 }
 
-function ChooseAmount$3(_ref) {
+function ChooseAmount$4(_ref) {
   let {
     lenderPosition,
     poolInfo
@@ -6009,7 +6053,7 @@ function LendWithdraw(_ref) {
     children: [(!step || step === WIDGET_STEP.CheckWithdrawable) && jsx(CheckWithdrawable, {
       poolInfo: poolInfo,
       handleClose: handleClose
-    }), step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$3, {
+    }), step === WIDGET_STEP.ChooseAmount && jsx(ChooseAmount$4, {
       poolInfo: poolInfo,
       lenderPosition: lenderPosition
     }), step === WIDGET_STEP.Transfer && jsx(Transfer$4, {
@@ -6028,73 +6072,35 @@ function LendWithdraw(_ref) {
 
 var _templateObject$7, _templateObject2$5, _templateObject3$5;
 function ChooseTranche(_ref) {
-  var _seniorWithdrawableAm, _juniorWithdrawableAm;
   let {
-    poolInfo,
     poolUnderlyingToken,
-    selectedTranche,
-    seniorWithdrawableAmount,
-    juniorWithdrawableAmount,
-    changeTranche
+    selectedWithdrawType,
+    withdrawTypes,
+    changeWithdrawType
   } = _ref;
   const theme = useTheme();
   const dispatch = useAppDispatch();
   const {
-    provider
-  } = useWeb3React();
-  const {
-    symbol,
-    decimals
+    symbol
   } = poolUnderlyingToken;
-  const [seniorWithdrawableShares, setSeniorWithdrawableShares] = useState(BigNumber.from(0));
-  const [juniorWithdrawableShares, setJuniorWithdrawableShares] = useState(BigNumber.from(0));
-  const isLoading = seniorWithdrawableAmount === undefined || juniorWithdrawableAmount === undefined;
-  useEffect(() => {
-    const fetchData = async () => {
-      if (seniorWithdrawableAmount !== null && seniorWithdrawableAmount !== void 0 && seniorWithdrawableAmount.gt(0)) {
-        const seniorVaultContract = await getTrancheVaultContractV2(poolInfo.poolName, 'senior', provider);
-        if (seniorVaultContract) {
-          const shares = await seniorVaultContract.convertToShares(seniorWithdrawableAmount);
-          setSeniorWithdrawableShares(shares);
-        }
-      }
-    };
-    fetchData();
-  }, [poolInfo.poolName, provider, seniorWithdrawableAmount]);
-  useEffect(() => {
-    const fetchData = async () => {
-      if (juniorWithdrawableAmount !== null && juniorWithdrawableAmount !== void 0 && juniorWithdrawableAmount.gt(0)) {
-        const juniorVaultContract = await getTrancheVaultContractV2(poolInfo.poolName, 'senior', provider);
-        if (juniorVaultContract) {
-          const shares = await juniorVaultContract.convertToShares(juniorWithdrawableAmount);
-          setJuniorWithdrawableShares(shares);
-        }
-      }
-    };
-    fetchData();
-  }, [poolInfo.poolName, provider, juniorWithdrawableAmount]);
   const styles = {
     subTitle: css(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n      color: ", " !important;\n      font-family: 'Uni-Neue-Regular';\n      font-size: 16px;\n      line-height: 150%;\n      letter-spacing: 0.15px;\n      margin-top: ", ";\n      margin-left: ", ";\n    "])), theme.palette.text.primary, theme.spacing(5), theme.spacing(2)),
     radioGroup: css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n      margin-left: ", ";\n      margin-top: ", ";\n    "])), theme.spacing(3), theme.spacing(3)),
     formControl: css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n      margin-bottom: ", ";\n\n      .MuiFormControlLabel-label {\n        color: ", ";\n        font-family: 'Uni-Neue-Regular';\n        font-size: 16px;\n        line-height: 150%;\n        letter-spacing: 0.15px;\n      }\n    "])), theme.spacing(1), theme.palette.text.primary)
   };
+  const handleChangeWithdrawType = withdrawTypeValue => {
+    const withdrawType = withdrawTypes.find(item => item.value === withdrawTypeValue);
+    if (withdrawType) {
+      changeWithdrawType(withdrawType);
+    }
+  };
   const handleNext = () => {
-    dispatch(setStep(WIDGET_STEP.Transfer));
+    if ((selectedWithdrawType === null || selectedWithdrawType === void 0 ? void 0 : selectedWithdrawType.type) === 'firstLossCover') {
+      dispatch(setStep(WIDGET_STEP.ChooseAmount));
+    } else {
+      dispatch(setStep(WIDGET_STEP.Transfer));
+    }
   };
-  const items = [{
-    label: "Withdraw ".concat(formatBNFixed(seniorWithdrawableAmount, decimals), " ").concat(symbol, " from Senior vault (").concat(formatBNFixed(seniorWithdrawableShares, decimals), " shares)"),
-    value: 'senior',
-    disabled: (_seniorWithdrawableAm = seniorWithdrawableAmount === null || seniorWithdrawableAmount === void 0 ? void 0 : seniorWithdrawableAmount.lte(0)) !== null && _seniorWithdrawableAm !== void 0 ? _seniorWithdrawableAm : true
-  }, {
-    label: "Withdraw ".concat(formatBNFixed(juniorWithdrawableAmount, decimals), " ").concat(symbol, " from Junior vault (").concat(formatBNFixed(juniorWithdrawableShares, decimals), " shares)"),
-    value: 'junior',
-    disabled: (_juniorWithdrawableAm = juniorWithdrawableAmount === null || juniorWithdrawableAmount === void 0 ? void 0 : juniorWithdrawableAmount.lte(0)) !== null && _juniorWithdrawableAm !== void 0 ? _juniorWithdrawableAm : true
-  }];
-  if (isLoading) {
-    return jsx(LoadingModal, {
-      title: "Withdraw ".concat(symbol)
-    });
-  }
   return jsxs(WrapperModal, {
     title: "Withdraw ".concat(symbol),
     children: [jsxs(FormControl, {
@@ -6105,10 +6111,9 @@ function ChooseTranche(_ref) {
         "aria-labelledby": "buttons-group-label",
         name: "radio-buttons-group",
         css: styles.radioGroup,
-        onChange: e => changeTranche(e.target.value),
-        children: items.map(item => jsx(FormControlLabel, {
+        onChange: e => handleChangeWithdrawType(e.target.value),
+        children: withdrawTypes.map(item => jsx(FormControlLabel, {
           value: item.value,
-          disabled: item.disabled,
           control: jsx(Radio, {
             sx: {
               '& .MuiSvgIcon-root': {
@@ -6122,34 +6127,116 @@ function ChooseTranche(_ref) {
       })]
     }), jsx(BottomButton, {
       variant: "contained",
-      disabled: !selectedTranche,
+      disabled: !selectedWithdrawType,
       onClick: handleNext,
       children: "NEXT"
     })]
   });
 }
 
+function ChooseAmount$3(_ref) {
+  let {
+    poolInfo,
+    poolUnderlyingToken,
+    selectedWithdrawType
+  } = _ref;
+  const dispatch = useAppDispatch();
+  const {
+    provider
+  } = useWeb3React();
+  const {
+    symbol
+  } = poolUnderlyingToken;
+  const [sharePrice, setSharePrice] = useState(0);
+  const [currentAmount, setCurrentAmount] = useState(0);
+  const [currentShares, setCurrentShares] = useState(0);
+  const maxAmountFormatted = ethers.utils.formatUnits(selectedWithdrawType.withdrawableAmount, poolUnderlyingToken.decimals);
+  useEffect(() => {
+    if (selectedWithdrawType.withdrawableAmount.gt(0)) {
+      const fetchData = async () => {
+        const firstLossCoverContract = await getFirstLossCoverContractV2(poolInfo.poolName, Number(selectedWithdrawType.value), provider);
+        if (firstLossCoverContract) {
+          const shares = await firstLossCoverContract.convertToShares(selectedWithdrawType.withdrawableAmount);
+          const price = selectedWithdrawType.withdrawableAmount.div(shares);
+          setSharePrice(price.toNumber());
+        }
+      };
+      fetchData();
+    }
+  }, [poolInfo.poolName, provider, selectedWithdrawType.value, selectedWithdrawType.withdrawableAmount]);
+  const handleChangeAmount = newAmount => {
+    const shares = Number(newAmount) / sharePrice;
+    setCurrentShares(shares);
+    setCurrentAmount(newAmount);
+    dispatch(setWithdrawAmount(Number(newAmount)));
+  };
+  const handleAction = () => {
+    dispatch(setStep(WIDGET_STEP.Transfer));
+  };
+  return jsx(InputAmountModal, {
+    title: "Withdraw ".concat(symbol),
+    subTitle: selectedWithdrawType.label,
+    tokenSymbol: symbol,
+    currentAmount: currentAmount,
+    handleChangeAmount: handleChangeAmount,
+    maxAmount: maxAmountFormatted,
+    info: "".concat(currentShares.toFixed(1), " Shares"),
+    handleAction: handleAction,
+    actionText: "WITHDRAW"
+  });
+}
+
 function Transfer$3(_ref) {
   let {
     poolInfo,
-    selectedTranche
+    poolUnderlyingToken,
+    selectedWithdrawType
   } = _ref;
   const dispatch = useAppDispatch();
   const {
     account,
     provider
   } = useWeb3React();
-  const trancheVaultContract = useTrancheVaultContractV2(poolInfo.poolName, selectedTranche, provider, account);
+  const {
+    withdrawAmount
+  } = useAppSelector(selectWidgetState);
+  const [firstLossCoverShares, setFirstLossCoverShares] = React__default.useState(undefined);
+  const [contract, setContract] = useState(undefined);
+  useEffect(() => {
+    const fetchData = async () => {
+      if (account) {
+        if (selectedWithdrawType.type === 'tranche') {
+          const trancheVaultContract = await getTrancheVaultContractV2(poolInfo.poolName, selectedWithdrawType.value, provider, account);
+          if (trancheVaultContract) {
+            setContract(trancheVaultContract);
+          }
+        }
+        if (selectedWithdrawType.type === 'firstLossCover') {
+          const firstLossCoverContract = await getFirstLossCoverContractV2(poolInfo.poolName, Number(selectedWithdrawType.value), provider, account);
+          if (firstLossCoverContract) {
+            const shares = await firstLossCoverContract.convertToShares(ethers.utils.parseUnits(String(withdrawAmount), poolUnderlyingToken.decimals));
+            setFirstLossCoverShares(shares);
+            setContract(firstLossCoverContract);
+          }
+        }
+      }
+    };
+    fetchData();
+  }, [account, poolInfo.poolName, poolUnderlyingToken.decimals, provider, selectedWithdrawType.type, selectedWithdrawType.value, withdrawAmount]);
+  const method = selectedWithdrawType.type === 'tranche' ? 'disburse' : 'redeemCover';
+  const params = selectedWithdrawType.type === 'tranche' ? [] : [firstLossCoverShares, account];
   const handleSuccess = useCallback(() => {
     dispatch(setStep(WIDGET_STEP.Done));
   }, [dispatch]);
-  if (!trancheVaultContract || !account) {
-    return null;
+  if (!account || !contract) {
+    return jsx(LoadingModal, {
+      title: "Transaction Pending"
+    });
   }
   return jsx(TxSendModalV2, {
-    contract: trancheVaultContract,
-    method: "disburse",
-    params: [],
+    contract: contract,
+    method: method,
+    params: params,
     handleSuccess: handleSuccess
   });
 }
@@ -6189,33 +6276,66 @@ function LendWithdrawV2(_ref) {
     step,
     errorMessage
   } = useAppSelector(selectWidgetState);
-  const [seniorWithdrawableAmount, refreshSeniorWithdrawableAmount] = useWithdrawableAssetsV2(poolName, 'senior', account, provider);
-  const [juniorWithdrawableAmount, refreshJuniorWithdrawableAmount] = useWithdrawableAssetsV2(poolName, 'junior', account, provider);
+  const [withdrawTypes, setWithdrawTypes] = useState([]);
+  const [selectedWithdrawType, setSelectedWithdrawType] = useState();
+  const [seniorWithdrawableAmount, refreshSeniorWithdrawableAmount] = useTrancheWithdrawableAssetsV2(poolName, 'senior', account, provider);
+  const [juniorWithdrawableAmount, refreshJuniorWithdrawableAmount] = useTrancheWithdrawableAssetsV2(poolName, 'junior', account, provider);
+  const isReadyForFlcWithdrawal = usePoolIsReadyForFlcWithdrawalV2(poolName, provider);
+  const [flcStats, refreshFlcStats] = useFirstLossCoverStatsV2(poolName, account, provider);
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider);
-  const [selectedTranche, setSelectedTranche] = useState();
-  const [withdrawAmount, setWithdrawAmount] = useState();
+  const {
+    symbol,
+    decimals
+  } = poolUnderlyingToken || {};
+  const isLoading = !poolInfo || !poolUnderlyingToken || isReadyForFlcWithdrawal === undefined || !seniorWithdrawableAmount || !juniorWithdrawableAmount || !flcStats;
   useEffect(() => {
-    if (!step) {
-      dispatch(setStep(WIDGET_STEP.ChooseTranche));
+    if (!step && !isLoading) {
+      const items = [];
+      if (seniorWithdrawableAmount.gt(0)) {
+        items.push({
+          label: "Withdraw ".concat(formatBNFixed(seniorWithdrawableAmount, decimals), " ").concat(symbol, " from Senior Tranche"),
+          value: 'senior',
+          type: 'tranche',
+          withdrawableAmount: seniorWithdrawableAmount
+        });
+      }
+      if (juniorWithdrawableAmount.gt(0)) {
+        items.push({
+          label: "Withdraw ".concat(formatBNFixed(juniorWithdrawableAmount, decimals), " ").concat(symbol, " from Junior Tranche"),
+          value: 'junior',
+          type: 'tranche',
+          withdrawableAmount: juniorWithdrawableAmount
+        });
+      }
+      if (isReadyForFlcWithdrawal) {
+        flcStats.filter(flc => flc.totalAssets.gt(0)).forEach(flc => {
+          items.push({
+            label: "Withdraw ".concat(symbol, " from ").concat(capitalizeFirstLetter(FirstLossCoverIndex[flc.firstLossCoverIndex]), " First Loss Cover"),
+            value: String(flc.firstLossCoverIndex),
+            type: 'firstLossCover',
+            withdrawableAmount: flc.totalAssets
+          });
+        });
+      }
+      setWithdrawTypes(items);
+      if (items.length === 1) {
+        setSelectedWithdrawType(items[0]);
+        const step = items[0].type === 'firstLossCover' ? WIDGET_STEP.ChooseAmount : WIDGET_STEP.Transfer;
+        dispatch(setStep(step));
+      } else if (items.length > 1) {
+        dispatch(setStep(WIDGET_STEP.ChooseTranche));
+      }
     }
-  }, [dispatch, step]);
+  }, [decimals, dispatch, flcStats, isLoading, isReadyForFlcWithdrawal, juniorWithdrawableAmount, seniorWithdrawableAmount, step, symbol]);
   const handleWithdrawSuccess = useCallback(blockNumber => {
     refreshSeniorWithdrawableAmount();
     refreshJuniorWithdrawableAmount();
+    refreshFlcStats();
     if (handleSuccess) {
       handleSuccess(blockNumber);
     }
-  }, [handleSuccess, refreshJuniorWithdrawableAmount, refreshSeniorWithdrawableAmount]);
-  const handleChangeTranche = useCallback(tranche => {
-    setSelectedTranche(tranche);
-    if (tranche === 'senior') {
-      setWithdrawAmount(seniorWithdrawableAmount);
-    }
-    if (tranche === 'junior') {
-      setWithdrawAmount(juniorWithdrawableAmount);
-    }
-  }, [juniorWithdrawableAmount, seniorWithdrawableAmount]);
-  if (!poolInfo || !poolUnderlyingToken) {
+  }, [handleSuccess, refreshFlcStats, refreshJuniorWithdrawableAmount, refreshSeniorWithdrawableAmount]);
+  if (isLoading) {
     return null;
   }
   return jsxs(WidgetWrapper, {
@@ -6224,18 +6344,21 @@ function LendWithdrawV2(_ref) {
     handleClose: handleClose,
     handleSuccess: handleWithdrawSuccess,
     children: [step === WIDGET_STEP.ChooseTranche && jsx(ChooseTranche, {
+      poolUnderlyingToken: poolUnderlyingToken,
+      selectedWithdrawType: selectedWithdrawType,
+      withdrawTypes: withdrawTypes,
+      changeWithdrawType: setSelectedWithdrawType
+    }), step === WIDGET_STEP.ChooseAmount && selectedWithdrawType && jsx(ChooseAmount$3, {
       poolInfo: poolInfo,
       poolUnderlyingToken: poolUnderlyingToken,
-      selectedTranche: selectedTranche,
-      changeTranche: handleChangeTranche,
-      seniorWithdrawableAmount: seniorWithdrawableAmount,
-      juniorWithdrawableAmount: juniorWithdrawableAmount
-    }), step === WIDGET_STEP.Transfer && selectedTranche && jsx(Transfer$3, {
+      selectedWithdrawType: selectedWithdrawType
+    }), step === WIDGET_STEP.Transfer && selectedWithdrawType && jsx(Transfer$3, {
       poolInfo: poolInfo,
-      selectedTranche: selectedTranche
-    }), step === WIDGET_STEP.Done && withdrawAmount && jsx(Done, {
       poolUnderlyingToken: poolUnderlyingToken,
-      withdrawAmount: withdrawAmount,
+      selectedWithdrawType: selectedWithdrawType
+    }), step === WIDGET_STEP.Done && selectedWithdrawType && jsx(Done, {
+      poolUnderlyingToken: poolUnderlyingToken,
+      withdrawAmount: selectedWithdrawType.withdrawableAmount,
       handleAction: handleClose
     }), step === WIDGET_STEP.Error && jsx(ErrorModal, {
       title: "Withdraw",