@huma-finance/widgets 0.0.51-beta.227 → 0.0.51-beta.347

package/src/components/ReceivableBackedCreditLine/payment/index.tsx

@@ -0,0 +1,159 @@
+import {
+  POOL_NAME,
+  useCreditStatsV2,
+  usePoolInfoV2,
+  usePoolUnderlyingTokenInfoV2,
+  useReceivableInfoV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber, ethers } from 'ethers'
+import React, { useEffect, useState } 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 { ChoosePaymentType } from './1-ChoosePaymentType'
+import { ChooseAmount } from './2-ChooseAmount'
+import { ApproveAllowance } from './3-ApproveAllowance'
+import { CreateReceivable } from './4-CreateReceivable'
+import { ApproveReceivable } from './5-ApproveReceivable'
+import { Transfer } from './6-Transfer'
+import { Success } from './7-Success'
+
+export enum PaymentType {
+  PaymentWithReceivable = 1,
+  PaymentWithReceivableAndDrawdown = 2,
+}
+
+/**
+ * Credit line pool payment props V2
+ * @typedef {Object} CreditLinePaymentPropsV2
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @property {tokenId} tokenID The receivable token id.
+ * @property {function():void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
+ * @property {function((number|undefined)):void|undefined} handleSuccess Optional function to notify that the credit line pool payment action is successful.
+ */
+export type ReceivableBackedCreditLinePaymentPropsV2 = {
+  poolName: keyof typeof POOL_NAME
+  tokenId: string
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function ReceivableBackedCreditLinePaymentV2({
+  poolName: poolNameStr,
+  tokenId,
+  handleClose,
+  handleSuccess,
+}: ReceivableBackedCreditLinePaymentPropsV2): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { account, chainId, provider } = useWeb3React()
+  const poolName = POOL_NAME[poolNameStr]
+  const poolInfo = usePoolInfoV2(poolName, chainId)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [{ creditRecord }] = useCreditStatsV2(poolName, account, provider)
+  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
+  const [paymentType, setPaymentType] = useState<PaymentType>()
+
+  const [borrowTokenId, setBorrowTokenId] = useState<string>()
+  const paymentReceivableInfo = useReceivableInfoV2(poolName, tokenId, provider)
+  const payoffAmount = paymentReceivableInfo
+    ? BigNumber.from(paymentReceivableInfo.receivableAmount).sub(
+        paymentReceivableInfo.paidAmount,
+      )
+    : BigNumber.from(0)
+  const [successTxReceipt, setSuccessTxReceipt] =
+    useState<ethers.ContractReceipt>()
+
+  useEffect(() => {
+    dispatch(setStep(WIDGET_STEP.ChoosePaymentType))
+  }, [dispatch])
+
+  if (
+    !poolInfo ||
+    !creditRecord ||
+    !poolUnderlyingToken ||
+    !paymentReceivableInfo
+  ) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle='Pay'
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      isLoading={!creditRecord}
+      loadingTitle='Pay'
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChoosePaymentType && (
+        <ChoosePaymentType
+          paymentType={paymentType}
+          changePaymentType={setPaymentType}
+        />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && paymentType && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          payoffAmount={payoffAmount}
+          paymentType={paymentType}
+        />
+      )}
+      {step === WIDGET_STEP.ApproveAllowance && paymentType && (
+        <ApproveAllowance
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          paymentType={paymentType}
+        />
+      )}
+      {step === WIDGET_STEP.MintNFT && (
+        <CreateReceivable
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          setTokenId={setBorrowTokenId}
+        />
+      )}
+      {step === WIDGET_STEP.ApproveNFT && borrowTokenId && (
+        <ApproveReceivable poolInfo={poolInfo} tokenId={borrowTokenId} />
+      )}
+      {step === WIDGET_STEP.Transfer && paymentType && (
+        <Transfer
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          paymentType={paymentType}
+          paymentTokenId={tokenId}
+          borrowTokenId={borrowTokenId}
+          setSuccessTxReceipt={setSuccessTxReceipt}
+        />
+      )}
+      {step === WIDGET_STEP.Done && paymentType && successTxReceipt && (
+        <Success
+          poolUnderlyingToken={poolUnderlyingToken}
+          paymentType={paymentType}
+          handleAction={handleClose}
+          successTxReceipt={successTxReceipt}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Pay'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

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

@@ -7,6 +7,7 @@ import {
 } from '@huma-finance/shared'
 import React, { useCallback, useState } from 'react'
 
+import { useWeb3React } from '@web3-react/core'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
 import { setBorrowInfo, setStream } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -23,8 +24,14 @@ export function ChooseAmount({
   currentFlowRate,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
+  const { chainId, provider } = useWeb3React()
   const { approval } = useAppSelector(selectWidgetState)
-  const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
+  const { getFeesCharged } = useFeeManager(
+    poolInfo.poolName,
+    poolInfo.poolType,
+    chainId,
+    provider,
+  )
   const [chargedFees, setChargedFees] = useState(0)
   const [currentAmount, setCurrentAmount] = useState(0)
   const borrowPeriodInSeconds = approval!.terms.intervalInDays * 24 * 60 * 60

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

@@ -1,6 +1,7 @@
 import { PoolInfoType, useMultiSendContract } from '@huma-finance/shared'
 import React, { useCallback } from 'react'
 
+import { useWeb3React } from '@web3-react/core'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -13,8 +14,9 @@ type Props = {
 
 export function Transfer({ poolInfo }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const multiSendContract = useMultiSendContract()
+  const { chainId, provider } = useWeb3React()
   const { multisend } = useAppSelector(selectWidgetState)
+  const multiSendContract = useMultiSendContract(chainId, provider)
 
   const handleSuccess = useCallback(() => {
     dispatch(setStep(WIDGET_STEP.Done))

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

@@ -1,4 +1,6 @@
+import { formatNumber } from '@huma-finance/shared'
 import React from 'react'
+
 import { useAppSelector } from '../../../hooks/useRedux'
 import { selectWidgetState } from '../../../store/widgets.selectors'
 import { TxDoneModal } from '../../TxDoneModal'
@@ -11,7 +13,7 @@ export function Success({ handleAction }: Props): React.ReactElement {
   const { borrowAmount, approval } = useAppSelector(selectWidgetState)
 
   const content = [
-    `${borrowAmount?.toFixed(2)} ${
+    `${formatNumber(borrowAmount)} ${
       approval?.token.symbol
     } is now in your wallet.`,
   ]

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

@@ -39,8 +39,8 @@ export function StreamFactoringBorrow({
   handleSuccess,
 }: StreamFactoringBorrowProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
-  const poolInfo = usePoolInfo(poolName, poolType)
+  const { account, chainId } = useWeb3React()
+  const poolInfo = usePoolInfo(poolName, poolType, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
 
   useEffect(() => {

package/src/components/TxDoneModal.tsx

@@ -78,7 +78,7 @@ export function TxDoneModal({
         css={styles.doneButton}
         onClick={handleCloseModal}
       >
-        {buttonText == null ? 'DONE' : buttonText}
+        {!buttonText ? 'DONE' : buttonText}
       </Button>
     </Box>
   )

package/src/components/TxSendModal.tsx

@@ -32,8 +32,14 @@ export function TxSendModal({
   handleSuccess,
 }: Props): React.ReactElement {
   const dispatch = useAppDispatch()
-  const { provider } = useWeb3React()
-  const poolContract = usePoolContract(poolInfo.poolName, poolInfo.poolType)
+  const { provider, chainId, account } = useWeb3React()
+  const poolContract = usePoolContract(
+    poolInfo.poolName,
+    poolInfo.poolType,
+    chainId,
+    provider,
+    account,
+  )
   const [{ state, txHash }, send] = useAtom(sendTxAtom)
 
   useEffect(() => {

package/src/components/TxSendModalV2.tsx

@@ -0,0 +1,51 @@
+import { sendTxAtom, TxStateType, useMount } from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { Contract } from 'ethers'
+import { useAtom } from 'jotai'
+import React, { useEffect } from 'react'
+
+import { useAppDispatch } from '../hooks/useRedux'
+import { LoadingModal } from './LoadingModal'
+import { ViewOnExplorer } from './ViewOnExplorer'
+
+type Props = {
+  method: string
+  params: unknown[]
+  title?: string
+  contract: Contract
+  handleSuccess?: () => void
+}
+
+export function TxSendModalV2({
+  title,
+  method,
+  params,
+  contract,
+  handleSuccess,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { provider } = useWeb3React()
+
+  const [{ state, txHash }, send] = useAtom(sendTxAtom)
+
+  useEffect(() => {
+    if (state === TxStateType.Success) {
+      if (handleSuccess) {
+        handleSuccess()
+      }
+    }
+  }, [dispatch, handleSuccess, state])
+
+  useMount(() => {
+    send({ contract, method, params, provider })
+  })
+
+  return (
+    <LoadingModal
+      title={title ?? 'Transaction Pending'}
+      description='Waiting for confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

package/src/hooks/useNotifi.ts

@@ -3,7 +3,6 @@ import {
   checkIsDev,
   doesChainSupportNotifi,
   getBlockchainConfigFromChain,
-  getNotifiDappId,
 } from '@huma-finance/shared'
 import {
   NotifiFrontendClient,
@@ -34,7 +33,6 @@ export const useDoesChainSupportNotifi = (
 export const useNotifiClient = (
   account: string | undefined,
   chainId: number | undefined,
-  isDev: boolean,
 ) => {
   const [notifiClient, setNotifiClient] = useState<NotifiFrontendClient | null>(
     null,
@@ -46,8 +44,8 @@ export const useNotifiClient = (
       if (account != null && chainId != null && notifiChainSupported) {
         const client = newFrontendClient({
           account: { publicKey: account },
-          tenantId: getNotifiDappId(isDev),
-          env: isDev ? 'Development' : 'Production',
+          tenantId: 'humafinanceprod',
+          env: 'Production',
           walletBlockchain: getBlockchainConfigFromChain(chainId),
         })
         await client.initialize()
@@ -56,7 +54,7 @@ export const useNotifiClient = (
     }
 
     createNotifiClient()
-  }, [account, chainId, isDev, notifiChainSupported])
+  }, [account, chainId, notifiChainSupported])
 
   return { notifiClient }
 }
@@ -66,7 +64,7 @@ export const useIsFirstTimeNotifiUser = (
   chainId: number | undefined,
 ) => {
   const [isFirstTimeNotifiUser, setIsFirstTimeNotifiUser] = useState(false)
-  const { notifiClient } = useNotifiClient(account, chainId, checkIsDev())
+  const { notifiClient } = useNotifiClient(account, chainId)
   const { notifiChainSupported } = useDoesChainSupportNotifi(account, chainId)
 
   useEffect(() => {

package/src/index.tsx

@@ -8,22 +8,38 @@ import {
 import { ThemeProvider } from '@mui/material'
 import { Provider as Eip1193Provider } from '@web3-react/types'
 import { Provider as AtomProvider } from 'jotai'
+import { useEffect, useState } from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
 
-import { useEffect, useState } from 'react'
 import { ChainSupportProvider } from './components/ChainSupportProvider'
 import {
   CreditLineApprove,
   CreditLineApproveProps,
 } from './components/CreditLine/approve'
+import {
+  AutoPaybackPropsV2,
+  AutoPaybackV2,
+} from './components/CreditLine/autoPaybackV2'
 import {
   CreditLineBorrow,
   CreditLineBorrowProps,
 } from './components/CreditLine/borrow'
+import {
+  CreditLineBorrowPropsV2,
+  CreditLineBorrowV2,
+} from './components/CreditLine/borrowV2'
 import {
   CreditLinePayment,
   CreditLinePaymentProps,
 } from './components/CreditLine/payment'
+import {
+  CreditLinePaymentPropsV2,
+  CreditLinePaymentV2,
+} from './components/CreditLine/paymentV2'
+import {
+  SupplyFirstLossCover,
+  SupplyFirstLossCoverProps,
+} from './components/CreditLine/supplyFLC'
 import {
   InvoiceFactoringBorrow,
   InvoiceFactoringBorrowProps,
@@ -32,8 +48,29 @@ import {
   InvoiceFactoringPayment,
   InvoiceFactoringPaymentProps,
 } from './components/InvoiceFactoring/payment'
+import {
+  AddRedemptionPropsV2,
+  AddRedemptionV2,
+} from './components/Lend/addRedemptionV2'
+import {
+  CancelRedemptionPropsV2,
+  CancelRedemptionV2,
+} from './components/Lend/cancelRedemptionV2 '
 import { LendSupply, LendSupplyProps } from './components/Lend/supply'
+import { LendSupplyPropsV2, LendSupplyV2 } from './components/Lend/supplyV2'
 import { LendWithdraw, LendWithdrawProps } from './components/Lend/withdraw'
+import {
+  LendWithdrawPropsV2,
+  LendWithdrawV2,
+} from './components/Lend/withdrawV2'
+import {
+  ReceivableBackedCreditLineBorrowPropsV2,
+  ReceivableBackedCreditLineBorrowV2,
+} from './components/ReceivableBackedCreditLine/borrow'
+import {
+  ReceivableBackedCreditLinePaymentPropsV2,
+  ReceivableBackedCreditLinePaymentV2,
+} from './components/ReceivableBackedCreditLine/payment'
 import { SuperfluidFactoring } from './components/SuperfluidFactoring'
 import { store } from './store'
 import { themeHuma } from './theme'
@@ -161,6 +198,28 @@ export function CreditLineBorrowWidget(props: CreditLineBorrowWidgetProps) {
   )
 }
 
+/**
+ * Credit line pool borrow widget props V2
+ * @typedef {Object} CreditLineBorrowWidgetPropsV2
+ * @property {CreditLineBorrowPropsV2} CreditLineBorrowPropsV2 - Credit line pool borrow props V2.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type CreditLineBorrowWidgetPropsV2 = CreditLineBorrowPropsV2 & WidgetProps
+
+/**
+ * Credit line borrow widget V2
+ *
+ * @param {CreditLineBorrowWidgetPropsV2} props - The credit line pool borrow widget props V2.
+ * @returns Credit line pool borrow widget component V2
+ */
+export function CreditLineBorrowWidgetV2(props: CreditLineBorrowWidgetPropsV2) {
+  return (
+    <Widget {...props}>
+      <CreditLineBorrowV2 {...props} />
+    </Widget>
+  )
+}
+
 /**
  * Credit line pool payment widget props
  * @typedef {Object} CreditLinePaymentWidgetProps
@@ -183,6 +242,30 @@ export function CreditLinePaymentWidget(props: CreditLinePaymentWidgetProps) {
   )
 }
 
+/**
+ * Credit line pool payment widget props V2
+ * @typedef {Object} CreditLinePaymentWidgetPropsV2
+ * @property {CreditLinePaymentPropsV2} CreditLinePaymentPropsV2 - Credit line pool payment props V2.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type CreditLinePaymentWidgetPropsV2 = CreditLinePaymentPropsV2 & WidgetProps
+
+/**
+ * Credit line payment widget V2
+ *
+ * @param {CreditLinePaymentWidgetPropsV2} props - The credit line pool payment widget props V2.
+ * @returns Credit line pool payment widget component V2
+ */
+export function CreditLinePaymentWidgetV2(
+  props: CreditLinePaymentWidgetPropsV2,
+) {
+  return (
+    <Widget {...props}>
+      <CreditLinePaymentV2 {...props} />
+    </Widget>
+  )
+}
+
 /**
  * Credit line allowance approval widget props
  * @typedef {Object} CreditLinePaymentWidgetProps
@@ -228,6 +311,28 @@ export function LendSupplyWidget(props: LendSupplyWidgetProps) {
   )
 }
 
+/**
+ * Lend pool supply widget props V2
+ * @typedef {Object} LendSupplyWidgetPropsV2
+ * @property {LendSupplyPropsV2} LendSupplyPropsV2 - Lend pool supply props V2.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type LendSupplyWidgetPropsV2 = LendSupplyPropsV2 & WidgetProps
+
+/**
+ * Lend supply widget V2
+ *
+ * @param {LendSupplyWidgetPropsV2} props - The lend pool supply widget props V2.
+ * @returns Lend pool supply widget component V2
+ */
+export function LendSupplyWidgetV2(props: LendSupplyWidgetPropsV2) {
+  return (
+    <Widget {...props}>
+      <LendSupplyV2 {...props} />
+    </Widget>
+  )
+}
+
 /**
  * Lend pool withdraw widget props
  * @typedef {Object} LendWithdrawWidgetProps
@@ -250,6 +355,96 @@ export function LendWithdrawWidget(props: LendWithdrawWidgetProps) {
   )
 }
 
+/**
+ * Lend pool supply widget props V2
+ * @typedef {Object} LendWithdrawWidgetPropsV2
+ * @property {LendWithdrawPropsV2} LendSupplyPropsV2 - Lend pool supply props V2.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type LendWithdrawWidgetPropsV2 = LendWithdrawPropsV2 & WidgetProps
+
+/**
+ * Lend withdraw widget V2
+ *
+ * @param {LendWithdrawWidgetPropsV2} props - The lend pool supply widget props V2.
+ * @returns Lend pool supply widget component V2
+ */
+export function LendWithdrawWidgetV2(props: LendWithdrawWidgetPropsV2) {
+  return (
+    <Widget {...props}>
+      <LendWithdrawV2 {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Lend pool add redemption widget props V2
+ * @typedef {Object} AddRedemptionWidgetPropsV2
+ * @property {AddRedemptionWidgetPropsV2} AddRedemptionWidgetPropsV2 - Lend pool add redemption props V2.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type AddRedemptionWidgetPropsV2 = AddRedemptionPropsV2 & WidgetProps
+
+/**
+ * Add redemption widget V2
+ *
+ * @param {AddRedemptionWidgetPropsV2} props - The lend pool add redemption widget props V2.
+ * @returns Lend pool add redemption widget component V2
+ */
+export function AddRedemptionWidgetV2(props: AddRedemptionWidgetPropsV2) {
+  return (
+    <Widget {...props}>
+      <AddRedemptionV2 {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Lend pool cancel redemption widget props V2
+ * @typedef {Object} CancelRedemptionWidgetPropsV2
+ * @property {CancelRedemptionWidgetPropsV2} CancelRedemptionWidgetPropsV2 - Lend pool cancel redemption props V2.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type CancelRedemptionWidgetPropsV2 = CancelRedemptionPropsV2 & WidgetProps
+
+/**
+ * Cancel redemption widget V2
+ *
+ * @param {CancelRedemptionWidgetPropsV2} props - The lend pool cancel redemption widget props V2.
+ * @returns Lend pool cancel redemption widget component V2
+ */
+export function CancelRedemptionWidgetV2(props: CancelRedemptionWidgetPropsV2) {
+  return (
+    <Widget {...props}>
+      <CancelRedemptionV2 {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Supply first loss cover widget props
+ * @typedef {Object} SupplyFirstLossCoverWidgetProps
+ * @property {SupplyFirstLossCover} SupplyFirstLossCover - Supply first loss cover props.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type SupplyFirstLossCoverWidgetProps = SupplyFirstLossCoverProps & WidgetProps
+
+/**
+ * Supply first loss cover widget
+ *
+ * @param {SupplyFirstLossCoverWidgetProps} props - The supply first loss cover widget props.
+ * @returns Supply first loss cover widget component
+ */
+export function SupplyFirstLossCoverWidget(
+  props: SupplyFirstLossCoverWidgetProps,
+) {
+  return (
+    <Widget {...props}>
+      <SupplyFirstLossCover {...props} />
+    </Widget>
+  )
+}
+
 /**
  * Superfluid factoring widget
  *
@@ -263,3 +458,75 @@ export function SuperfluidFactoringWidget(props: WidgetProps) {
     </Widget>
   )
 }
+
+/**
+ * Auto payback widget props V2
+ * @typedef {Object} AutoPaybackWidgetPropsV2
+ * @property {AutoPayback} AutoPayback - Auto payback props V2.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type AutoPaybackWidgetPropsV2 = AutoPaybackPropsV2 & WidgetProps
+
+/**
+ * Supply first loss cover widget
+ *
+ * @param {SupplyFirstLossCoverWidgetProps} props - The supply first loss cover widget props.
+ * @returns Supply first loss cover widget component
+ */
+export function AutoPaybackWidgetV2(props: AutoPaybackWidgetPropsV2) {
+  return (
+    <Widget {...props}>
+      <AutoPaybackV2 {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Receivable backed credit line pool borrow widget props V2
+ * @typedef {Object} ReceivableBackedCreditLineBorrowWidgetPropsV2
+ * @property {ReceivableBackedCreditLineBorrowPropsV2} ReceivableBackedCreditLineBorrowPropsV2 - Receivable backed credit line pool borrow props V2.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type ReceivableBackedCreditLineBorrowWidgetPropsV2 =
+  ReceivableBackedCreditLineBorrowPropsV2 & WidgetProps
+
+/**
+ * Receivable backed credit line borrow widget V2
+ *
+ * @param {ReceivableBackedCreditLineBorrowWidgetPropsV2} props - The receivable backed credit line pool borrow widget props V2.
+ * @returns Receivable backed credit line pool borrow widget component V2
+ */
+export function ReceivableBackedCreditLineBorrowWidgetV2(
+  props: ReceivableBackedCreditLineBorrowWidgetPropsV2,
+) {
+  return (
+    <Widget {...props}>
+      <ReceivableBackedCreditLineBorrowV2 {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Receivable backed credit line pool payment widget props V2
+ * @typedef {Object} ReceivableBackedCreditLinePaymentWidgetPropsV2
+ * @property {ReceivableBackedCreditLinePaymentPropsV2} ReceivableBackedCreditLinePaymentPropsV2 - Receivable backed credit line pool payment props V2.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type ReceivableBackedCreditLinePaymentWidgetPropsV2 =
+  ReceivableBackedCreditLinePaymentPropsV2 & WidgetProps
+
+/**
+ * Receivable backed credit line payment widget V2
+ *
+ * @param {ReceivableBackedCreditLinePaymentWidgetPropsV2} props - The receivable backed credit line pool payment widget props V2.
+ * @returns Receivable backed credit line pool payment widget component V2
+ */
+export function ReceivableBackedCreditLinePaymentWidgetV2(
+  props: ReceivableBackedCreditLinePaymentWidgetPropsV2,
+) {
+  return (
+    <Widget {...props}>
+      <ReceivableBackedCreditLinePaymentV2 {...props} />
+    </Widget>
+  )
+}