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

package/src/components/CreditLine/supplyFLC/3-Success.tsx

@@ -0,0 +1,26 @@
+import { UnderlyingTokenInfo, formatMoney } from '@huma-finance/shared'
+import { BigNumber, ethers } from 'ethers'
+import React from 'react'
+
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  amountToDeposit: BigNumber
+  poolUnderlyingToken: UnderlyingTokenInfo
+  handleAction: () => void
+}
+
+export function Success({
+  amountToDeposit,
+  poolUnderlyingToken,
+  handleAction,
+}: Props): React.ReactElement {
+  const { symbol, decimals } = poolUnderlyingToken
+  const amountFormatted = ethers.utils.formatUnits(amountToDeposit, decimals)
+
+  const content = [
+    `You have supplied ${formatMoney(amountFormatted)} ${symbol}.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

package/src/components/CreditLine/supplyFLC/index.tsx

@@ -0,0 +1,121 @@
+import {
+  FirstLossCoverIndex,
+  POOL_NAME,
+  useFirstLossCoverAllowanceV2,
+  useFirstLossCoverRequirementV2,
+  usePoolInfoV2,
+  usePoolUnderlyingTokenInfoV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+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 { ApproveAllowance } from './1-ApproveAllowance'
+import { Success } from './3-Success'
+import { Transfer } from './2-Transfer'
+
+/**
+ * Supply first loss cover props
+ * @typedef {Object} SupplyFirstLossCoverProps
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @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 borrow action is successful.
+ */
+export interface SupplyFirstLossCoverProps {
+  poolName: keyof typeof POOL_NAME
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function SupplyFirstLossCover({
+  poolName: poolNameStr,
+  handleClose,
+  handleSuccess,
+}: SupplyFirstLossCoverProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const poolName = POOL_NAME[poolNameStr]
+  const { account, chainId, provider } = useWeb3React()
+  const poolInfo = usePoolInfoV2(poolName, chainId)
+  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [requirement] = useFirstLossCoverRequirementV2(
+    poolName,
+    FirstLossCoverIndex.borrower,
+    account,
+    provider,
+  )
+  const [allowance] = useFirstLossCoverAllowanceV2(
+    poolName,
+    FirstLossCoverIndex.borrower,
+    account,
+    provider,
+  )
+  const { minAmountToDeposit } = requirement || {}
+  const title = 'Deposit First Loss Cover'
+
+  useEffect(() => {
+    if (!step && minAmountToDeposit && allowance) {
+      if (minAmountToDeposit.gt(allowance!)) {
+        dispatch(setStep(WIDGET_STEP.ApproveAllowance))
+      } else {
+        dispatch(setStep(WIDGET_STEP.Transfer))
+      }
+    }
+  }, [allowance, dispatch, minAmountToDeposit, step])
+
+  if (!poolInfo || !poolUnderlyingToken || !minAmountToDeposit || !allowance) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle={title}
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          amountToDeposit={minAmountToDeposit}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && (
+        <Transfer
+          poolInfo={poolInfo}
+          amountToDeposit={minAmountToDeposit}
+          title={title}
+        />
+      )}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolUnderlyingToken={poolUnderlyingToken}
+          handleAction={handleClose}
+          amountToDeposit={minAmountToDeposit}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title={title}
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/Factoring/FactoredList.tsx

@@ -39,10 +39,11 @@ export function FactoredList<T>({
 }: Props<T>): React.ReactElement {
   const theme = useTheme()
   const { isMdSize } = useMQ()
-  const { isActive } = useWeb3React()
+  const { isActive, chainId } = useWeb3React()
   const { decimals } = usePoolUnderlyingToken(
     poolInfo.poolName,
     poolInfo.poolType,
+    chainId,
   )
   const [factoredItem, setFactoredItem] = useState<Partial<T>>()
   const { creditRecord, receivableInfo } = accountStats

package/src/components/InputAmountModal.tsx

@@ -0,0 +1,156 @@
+import { Box, Button, css, TextField, useTheme } from '@mui/material'
+import React, { useState } from 'react'
+import { NumericFormat } from 'react-number-format'
+
+import { BottomButton } from './BottomButton'
+import { WrapperModal } from './WrapperModal'
+
+type Props = {
+  title: string
+  subTitle: string
+  actionText: string
+  tokenSymbol: string
+  suffix?: string
+  currentAmount: number | string
+  maxAmount: number | string
+  maxAmountText?: string
+  maxAmountTitle?: string
+  info?: string
+  handleChangeAmount: (amount: number) => void
+  handleAction: () => void
+}
+
+export function InputAmountModal({
+  title,
+  subTitle,
+  actionText,
+  tokenSymbol,
+  suffix: defaultSuffix,
+  currentAmount,
+  maxAmount,
+  maxAmountText = 'MAX',
+  maxAmountTitle,
+  info,
+  handleChangeAmount,
+  handleAction,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const [inputTouched, setInputTouched] = useState(false)
+  const suffix = ` ${defaultSuffix ?? tokenSymbol}`
+
+  const styles = {
+    inputAmountWrapper: css`
+      margin-bottom: ${theme.spacing(1)};
+      margin-top: ${theme.spacing(16)};
+    `,
+    inputAmount: css`
+      ${theme.cssMixins.rowSpaceBetweened};
+    `,
+    inputField: css`
+      input {
+        width: 100%;
+        color: ${theme.palette.text.primary};
+        font-family: 'Uni-Neue-Black';
+        font-size: 40px;
+        line-height: 133.4%;
+      }
+    `,
+    maxWrapper: css`
+      position: relative;
+      display: flex;
+      justify-content: flex-end;
+    `,
+    maxTitle: css`
+      position: absolute;
+      color: ${theme.palette.text.primary};
+      font-family: 'Uni-Neue-Regular';
+      font-size: 12px;
+      line-height: 166%;
+      letter-spacing: 0.4px;
+      top: ${theme.spacing(-3)};
+      width: 200px;
+      text-align: right;
+    `,
+    max: css`
+      display: flex;
+      min-width: fit-content;
+      justify-content: center;
+      align-items: center;
+      border-radius: 32px;
+      background: #f7f1ff;
+      padding: 4px 10px;
+      gap: 8px;
+      color: #b246ff;
+      font-family: 'Uni-Neue-Bold';
+      font-size: 13px;
+      line-height: 22px;
+      letter-spacing: 0.46px;
+    `,
+    info: css`
+      color: ${theme.palette.text.primary};
+      font-family: 'Uni-Neue-Bold';
+      font-size: 20px;
+      line-height: 160%;
+      letter-spacing: 0.15px;
+    `,
+  }
+
+  const onChange = (
+    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => {
+    setInputTouched(true)
+    handleChangeAmount(
+      Number(event.target.value.replace(suffix, '').replaceAll(',', '')),
+    )
+  }
+
+  const setMaxAmount = () => {
+    handleChangeAmount(Number(maxAmount))
+  }
+
+  return (
+    <WrapperModal title={title} subTitle={subTitle}>
+      <Box css={styles.inputAmountWrapper}>
+        <Box css={styles.inputAmount}>
+          <NumericFormat
+            css={styles.inputField}
+            decimalScale={0}
+            onChange={onChange}
+            value={
+              !inputTouched && Number(currentAmount) === 0 ? '' : currentAmount
+            }
+            suffix={suffix}
+            thousandSeparator
+            customInput={TextField}
+            placeholder={`0${suffix}`}
+            variant='standard'
+            InputProps={{
+              endAdornment: maxAmountTitle ? (
+                <Box css={styles.maxWrapper}>
+                  <Box css={styles.maxTitle}>{maxAmountTitle}</Box>
+                  <Button css={styles.max} onClick={setMaxAmount}>
+                    {maxAmountText}
+                  </Button>
+                </Box>
+              ) : (
+                <Button css={styles.max} onClick={setMaxAmount}>
+                  {maxAmountText}
+                </Button>
+              ),
+            }}
+          />
+        </Box>
+      </Box>
+
+      {info && <Box css={styles.info}>{info}</Box>}
+
+      <BottomButton
+        variant='contained'
+        onClick={handleAction}
+        disabled={Number(currentAmount) <= 0}
+      >
+        {actionText}
+      </BottomButton>
+    </WrapperModal>
+  )
+}

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

@@ -2,6 +2,7 @@ import { AccountStats, PoolInfoType, useFeeManager } from '@huma-finance/shared'
 import React, { useCallback, useState } from 'react'
 import { ethers } from 'ethers'
 
+import { useWeb3React } from '@web3-react/core'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
 import { setBorrowInfo } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -19,10 +20,16 @@ export function ChooseAmount({
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { creditRecord } = accountStats
+  const { chainId, provider } = useWeb3React()
   const [chargedFees, setChargedFees] = useState(0)
   const [currentAmount, setCurrentAmount] = useState(0)
   const { approval } = useAppSelector(selectWidgetState)
-  const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
+  const { getFeesCharged } = useFeeManager(
+    poolInfo.poolName,
+    poolInfo.poolType,
+    chainId,
+    provider,
+  )
   const [remainder, setRemainder] = useState<string | number | undefined>(
     approval!.receivable?.amountFormatted,
   )

package/src/components/InvoiceFactoring/borrow/4-ApproveNFT.tsx

@@ -23,10 +23,14 @@ type Props = {
 
 export function ApproveNFT({ poolInfo, tokenId }: Props): React.ReactElement {
   const dispatch = useAppDispatch()
-  const { provider } = useWeb3React()
+  const { chainId, provider } = useWeb3React()
   const [{ state, txHash }, send] = useAtom(sendTxAtom)
   const reset = useResetAtom(txAtom)
-  const invoiceNFTContract = useInvoiceNFTContract(poolInfo.poolName)
+  const invoiceNFTContract = useInvoiceNFTContract(
+    poolInfo.poolName,
+    chainId,
+    provider,
+  )
 
   useEffect(() => {
     if (state === TxStateType.Success) {

package/src/components/InvoiceFactoring/borrow/6-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'
@@ -12,7 +14,9 @@ export function Success({ handleAction }: Props): React.ReactElement {
     useAppSelector(selectWidgetState)
 
   const content = [
-    `${borrowAmountNet} ${approval?.token.symbol} is now in your wallet.`,
+    `${formatNumber(borrowAmountNet)} ${
+      approval?.token.symbol
+    } is now in your wallet.`,
     `The remaining ${remainder} ${approval?.token.symbol} will be sent to your wallet when the invoice is paid.`,
   ]
 

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

@@ -47,12 +47,18 @@ export function InvoiceFactoringBorrow({
   handleSuccess,
 }: InvoiceFactoringBorrowProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const poolName = POOL_NAME[poolNameStr]
   const poolType = POOL_TYPE[poolTypeStr]
-  const poolInfo = usePoolInfo(poolName, poolType)
+  const poolInfo = usePoolInfo(poolName, poolType, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [accountStats] = useAccountStats(poolName, poolType, account)
+  const [accountStats] = useAccountStats(
+    poolName,
+    poolType,
+    chainId,
+    account,
+    provider,
+  )
 
   useEffect(() => {
     dispatch(setStep(WIDGET_STEP.Evaluation))

package/src/components/InvoiceFactoring/payment/1-ChooseAmount.tsx

@@ -23,10 +23,15 @@ export function ChooseAmount({
   poolInfo,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const { symbol, decimals } = poolInfo.poolUnderlyingToken
   const totalDue = downScale<number>(creditRecord.totalDue.toNumber(), decimals)
-  const { allowance } = useRFPoolAllowance(poolInfo.poolName, account)
+  const { allowance } = useRFPoolAllowance(
+    poolInfo.poolName,
+    chainId,
+    account,
+    provider,
+  )
   const [remainingDue, setRemainingDue] = useState(totalDue)
   const [currentAmount, setCurrentAmount] = useState(0)
 

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

@@ -41,12 +41,18 @@ export function InvoiceFactoringPayment({
   handleSuccess,
 }: InvoiceFactoringPaymentProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const poolName = POOL_NAME[poolNameStr]
   const poolType = POOL_TYPE[poolTypeStr]
-  const poolInfo = usePoolInfo(poolName, poolType)
+  const poolInfo = usePoolInfo(poolName, poolType, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [{ creditRecord }] = useAccountStats(poolName, poolType, account)
+  const [{ creditRecord }] = useAccountStats(
+    poolName,
+    poolType,
+    chainId,
+    account,
+    provider,
+  )
 
   useEffect(() => {
     dispatch(setStep(WIDGET_STEP.ChooseAmount))

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

@@ -0,0 +1,114 @@
+import { TrancheType } from '@huma-finance/shared'
+import {
+  css,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  useTheme,
+} from '@mui/material'
+import React from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { BottomButton } from '../../BottomButton'
+import { WrapperModal } from '../../WrapperModal'
+
+type Props = {
+  selectedTranche: TrancheType | undefined
+  changeTranche: (tranche: TrancheType) => void
+}
+
+export function ChooseTranche({
+  selectedTranche,
+  changeTranche,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+
+  const styles = {
+    subTitle: css`
+      color: ${theme.palette.text.primary} !important;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+      margin-top: ${theme.spacing(5)};
+      margin-left: ${theme.spacing(2)};
+    `,
+    radioGroup: css`
+      margin-left: ${theme.spacing(3)};
+      margin-top: ${theme.spacing(3)};
+    `,
+    formControl: css`
+      margin-bottom: ${theme.spacing(1)};
+
+      .MuiFormControlLabel-label {
+        color: ${theme.palette.text.primary};
+        font-family: 'Uni-Neue-Regular';
+        font-size: 16px;
+        line-height: 150%;
+        letter-spacing: 0.15px;
+      }
+    `,
+  }
+
+  const handleNext = () => {
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
+  }
+
+  const items: {
+    label: string
+    value: TrancheType
+  }[] = [
+    {
+      label: 'Senior',
+      value: 'senior',
+    },
+    {
+      label: 'Junior',
+      value: 'junior',
+    },
+  ]
+
+  return (
+    <WrapperModal title='Redemption'>
+      <FormControl>
+        <FormLabel css={styles.subTitle}>Select Tranche Type</FormLabel>
+        <RadioGroup
+          aria-labelledby='buttons-group-label'
+          name='radio-buttons-group'
+          css={styles.radioGroup}
+          onChange={(e) => changeTranche(e.target.value as TrancheType)}
+        >
+          {items.map((item) => (
+            <FormControlLabel
+              key={item.label}
+              value={item.value}
+              control={
+                <Radio
+                  sx={{
+                    '& .MuiSvgIcon-root': {
+                      fontSize: 24,
+                    },
+                  }}
+                />
+              }
+              label={item.label}
+              css={styles.formControl}
+            />
+          ))}
+        </RadioGroup>
+      </FormControl>
+      <BottomButton
+        variant='contained'
+        disabled={!selectedTranche}
+        onClick={handleNext}
+      >
+        NEXT
+      </BottomButton>
+    </WrapperModal>
+  )
+}

package/src/components/Lend/addRedemptionV2/2-ChooseAmount.tsx

@@ -0,0 +1,114 @@
+import {
+  formatNumber,
+  PoolInfoV2,
+  timestampToLL,
+  UnderlyingTokenInfo,
+  useLenderDepositRecordV2,
+  useLPConfigV2,
+  useNextEpochStartTimeV2,
+} from '@huma-finance/shared'
+import { ethers } from 'ethers'
+import React, { useEffect, useState } from 'react'
+
+import { useWeb3React } from '@web3-react/core'
+import { TrancheInfo } from '.'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import {
+  setError,
+  setRedeemAmount,
+  setRedeemShares,
+  setStep,
+} from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { InputAmountModal } from '../../InputAmountModal'
+import { LoadingModal } from '../../LoadingModal'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  trancheInfo: TrancheInfo
+}
+
+export function ChooseAmount({
+  poolInfo,
+  poolUnderlyingToken,
+  trancheInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { symbol } = poolUnderlyingToken
+  const { account, provider } = useWeb3React()
+  const [currentAmount, setCurrentAmount] = useState<number>(0)
+  const [currentShares, setCurrentShares] = useState<number>(0)
+  const maxSharesFormatted = ethers.utils.formatUnits(
+    trancheInfo.shares,
+    poolUnderlyingToken.decimals,
+  )
+  const sharePrice =
+    trancheInfo.assets.toNumber() / trancheInfo.shares.toNumber()
+  const [depositRecord] = useLenderDepositRecordV2(
+    poolInfo.poolName,
+    trancheInfo.tranche,
+    account,
+    provider,
+  )
+  const lpConfig = useLPConfigV2(poolInfo.poolName, provider)
+  const nextEpochStartTime = useNextEpochStartTimeV2(
+    poolInfo.poolName,
+    provider,
+  )
+
+  useEffect(() => {
+    if (depositRecord && lpConfig && nextEpochStartTime) {
+      const SECONDS_IN_A_DAY = 24 * 60 * 60
+      if (
+        nextEpochStartTime <
+        depositRecord.lastDepositTime.toNumber() +
+          lpConfig.withdrawalLockoutPeriodInDays * SECONDS_IN_A_DAY
+      ) {
+        dispatch(setStep(WIDGET_STEP.Error))
+        dispatch(
+          setError({
+            errorReason: 'Redemption too soon',
+            errorMessage: `Your last deposit was on ${timestampToLL(
+              depositRecord!.lastDepositTime.toNumber(),
+            )}. Depositors need to wait ${
+              lpConfig!.withdrawalLockoutPeriodInDays
+            } days before redemption`,
+          }),
+        )
+      }
+    }
+  }, [depositRecord, dispatch, lpConfig, nextEpochStartTime])
+
+  const handleChangeShares = (newShares: number) => {
+    const amount = Number(newShares) * sharePrice
+    setCurrentShares(Number(newShares))
+    setCurrentAmount(amount)
+    dispatch(setRedeemShares(Number(newShares)))
+    dispatch(setRedeemAmount(amount))
+  }
+
+  const handleAction = () => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }
+
+  if (!depositRecord || !lpConfig || !nextEpochStartTime) {
+    return <LoadingModal title='Redemption' />
+  }
+
+  return (
+    <InputAmountModal
+      title='Redemption'
+      subTitle={`Enter number of shares to redeem from ${trancheInfo.tranche} tranche`}
+      tokenSymbol={symbol}
+      currentAmount={currentShares}
+      handleChangeAmount={handleChangeShares}
+      maxAmount={maxSharesFormatted}
+      info={`${String(formatNumber(currentAmount))} ${symbol}`}
+      maxAmountTitle={`${formatNumber(maxSharesFormatted)} Shares`}
+      suffix='Shares'
+      handleAction={handleAction}
+      actionText='REQUEST'
+    />
+  )
+}