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

package/src/components/Lend/redeemV2/1-ChooseAction.tsx

@@ -1,237 +0,0 @@
-import {
-  PoolInfoV2,
-  timestampToLL,
-  UnderlyingTokenInfo,
-  useLenderDepositRecordV2,
-  useLPConfigV2,
-  useNextEpochStartTimeV2,
-} from '@huma-finance/shared'
-import {
-  Box,
-  css,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  useTheme,
-} from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { BigNumber, ethers } from 'ethers'
-import React from 'react'
-
-import { REDEMPTION_TYPE, RedemptionInfo } from '.'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setError, setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { BottomButton } from '../../BottomButton'
-import { LoadingModal } from '../../LoadingModal'
-import { WrapperModal } from '../../WrapperModal'
-
-type Props = {
-  poolInfo: PoolInfoV2
-  poolUnderlyingToken: UnderlyingTokenInfo
-  seniorRedemptionInfo: RedemptionInfo | undefined
-  juniorRedemptionInfo: RedemptionInfo | undefined
-  redemptionType: REDEMPTION_TYPE | undefined
-  seniorPosition: BigNumber | undefined
-  juniorPosition: BigNumber | undefined
-  changeRedemptionType: (tranche: REDEMPTION_TYPE) => void
-}
-
-export function ChooseAction({
-  poolInfo,
-  poolUnderlyingToken,
-  seniorRedemptionInfo,
-  juniorRedemptionInfo,
-  redemptionType,
-  seniorPosition,
-  juniorPosition,
-  changeRedemptionType,
-}: Props): React.ReactElement | null {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-  const { symbol } = poolUnderlyingToken
-  const { account, provider } = useWeb3React()
-  const [seniorDepositRecord] = useLenderDepositRecordV2(
-    poolInfo.poolName,
-    'senior',
-    account,
-    provider,
-  )
-  const [juniorDepositRecord] = useLenderDepositRecordV2(
-    poolInfo.poolName,
-    'junior',
-    account,
-    provider,
-  )
-  const lpConfig = useLPConfigV2(poolInfo.poolName, provider)
-  const nextEpochStartTime = useNextEpochStartTimeV2(
-    poolInfo.poolName,
-    provider,
-  )
-
-  const isLoading =
-    seniorRedemptionInfo === undefined ||
-    juniorRedemptionInfo === undefined ||
-    seniorDepositRecord === undefined ||
-    juniorDepositRecord === undefined ||
-    lpConfig === undefined ||
-    nextEpochStartTime === undefined
-
-  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 = () => {
-    if (isLoading) {
-      return
-    }
-
-    const depositRecord =
-      redemptionType === REDEMPTION_TYPE.AddSeniorRedemption
-        ? seniorDepositRecord
-        : juniorDepositRecord
-
-    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 request too soon',
-          errorMessage: `Your last deposit was on ${timestampToLL(
-            depositRecord.lastDepositTime.toNumber(),
-          )}. Depositors need to wait ${
-            lpConfig.withdrawalLockoutPeriodInDays
-          } days before redemption request`,
-        }),
-      )
-      return
-    }
-
-    dispatch(setStep(WIDGET_STEP.ChooseAmount))
-  }
-
-  const formatAmount = (amount?: BigNumber) => {
-    if (!amount || amount.lte(0)) {
-      return undefined
-    }
-    return ethers.utils.formatUnits(amount, poolUnderlyingToken.decimals)
-  }
-
-  const items: {
-    label: string
-    value: REDEMPTION_TYPE
-    amount?: string
-    show: boolean
-  }[] = [
-    {
-      label: 'Request Senior Tranche Redemption',
-      value: REDEMPTION_TYPE.AddSeniorRedemption,
-      show: seniorPosition?.gt(0) ?? false,
-    },
-    {
-      label: 'Cancel Senior Tranche Redemption',
-      value: REDEMPTION_TYPE.CancelSeniorRedemption,
-      amount: formatAmount(seniorRedemptionInfo?.amount),
-      show: seniorRedemptionInfo?.amount.gt(0) ?? false,
-    },
-    {
-      label: 'Request Junior Tranche Redemption',
-      value: REDEMPTION_TYPE.AddJuniorRedemption,
-      show: juniorPosition?.gt(0) ?? false,
-    },
-    {
-      label: 'Cancel Junior Tranche Redemption',
-      value: REDEMPTION_TYPE.CancelJuniorRedemption,
-      amount: formatAmount(juniorRedemptionInfo?.amount),
-      show: juniorRedemptionInfo?.amount.gt(0) ?? false,
-    },
-  ]
-
-  if (isLoading) {
-    return <LoadingModal title={`Redeem ${symbol}`} />
-  }
-
-  return (
-    <WrapperModal title={`Redeem ${symbol}`}>
-      <FormControl>
-        <FormLabel css={styles.subTitle}>Select Redemption Type</FormLabel>
-        <RadioGroup
-          aria-labelledby='buttons-group-label'
-          name='radio-buttons-group'
-          css={styles.radioGroup}
-          onChange={(e) => changeRedemptionType(Number(e.target.value))}
-        >
-          {items
-            .filter((item) => item.show)
-            .map((item) => {
-              const { label } = item
-              let labelNode = <Box>{label}</Box>
-              if (item.amount) {
-                labelNode = (
-                  <>
-                    <Box>{label}</Box>
-                    <Box>
-                      ({item.amount} {symbol} available)
-                    </Box>
-                  </>
-                )
-              }
-              return (
-                <FormControlLabel
-                  key={item.label}
-                  value={item.value}
-                  control={
-                    <Radio
-                      sx={{
-                        '& .MuiSvgIcon-root': {
-                          fontSize: 24,
-                        },
-                      }}
-                    />
-                  }
-                  label={labelNode}
-                  css={styles.formControl}
-                />
-              )
-            })}
-        </RadioGroup>
-      </FormControl>
-      <BottomButton
-        variant='contained'
-        disabled={redemptionType === undefined}
-        onClick={handleNext}
-      >
-        NEXT
-      </BottomButton>
-    </WrapperModal>
-  )
-}

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

@@ -1,101 +0,0 @@
-import {
-  getTrancheVaultContractV2,
-  PoolInfoV2,
-  UnderlyingTokenInfo,
-} from '@huma-finance/shared'
-import { useWeb3React } from '@web3-react/core'
-import { BigNumber, ethers } from 'ethers'
-import React, { useEffect, useState } from 'react'
-
-import { REDEMPTION_TYPE, RedemptionActionInfo } from '.'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import {
-  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
-  redemptionType: REDEMPTION_TYPE
-  maxAmount: BigNumber
-}
-
-export function ChooseAmount({
-  poolInfo,
-  poolUnderlyingToken,
-  redemptionType,
-  maxAmount,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { provider } = useWeb3React()
-  const { symbol } = poolUnderlyingToken
-  const [sharePrice, setSharePrice] = useState(0)
-  const [currentAmount, setCurrentAmount] = useState<number>(0)
-  const [currentShares, setCurrentShares] = useState<number>(0)
-  const redemptionActionInfo = RedemptionActionInfo[redemptionType]
-  const maxAmountFormatted = ethers.utils.formatUnits(
-    maxAmount,
-    poolUnderlyingToken.decimals,
-  )
-
-  useEffect(() => {
-    if (maxAmount.gt(0)) {
-      const fetchData = async () => {
-        const vaultContract = await getTrancheVaultContractV2(
-          poolInfo.poolName,
-          redemptionActionInfo.tranche,
-          provider,
-        )
-        if (vaultContract) {
-          const shares = await vaultContract.convertToShares(maxAmount)
-          const price = maxAmount.div(shares)
-          setSharePrice(price.toNumber())
-        }
-      }
-      fetchData()
-    }
-  }, [maxAmount, poolInfo.poolName, provider, redemptionActionInfo.tranche])
-
-  const handleChangeAmount = (newAmount: number) => {
-    const shares = Number(newAmount) / sharePrice
-    setCurrentShares(shares)
-    setCurrentAmount(Number(newAmount))
-    dispatch(setRedeemAmount(Number(newAmount)))
-    dispatch(setRedeemShares(shares))
-  }
-
-  const handleAction = () => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
-  }
-
-  if (sharePrice === 0) {
-    return (
-      <LoadingModal
-        title={`${redemptionActionInfo.action} Redemption Request`}
-      />
-    )
-  }
-
-  return (
-    <InputAmountModal
-      title={`${redemptionActionInfo.action} Redemption Request`}
-      subTitle={
-        redemptionActionInfo.action === 'Create'
-          ? `Input ${symbol} amount to redeem from ${redemptionActionInfo.tranche} tranche`
-          : `Input the amount of the redemption request in ${symbol} that you wish to cancel from the ${redemptionActionInfo.tranche} tranche`
-      }
-      tokenSymbol={symbol}
-      currentAmount={currentAmount}
-      handleChangeAmount={handleChangeAmount}
-      maxAmount={maxAmountFormatted}
-      info={`${currentShares.toFixed(1)} Shares`}
-      handleAction={handleAction}
-      actionText='SUBMIT'
-    />
-  )
-}

package/src/components/Lend/redeemV2/4-Done.tsx

@@ -1,33 +0,0 @@
-import { formatMoney, UnderlyingTokenInfo } from '@huma-finance/shared'
-import React from 'react'
-
-import { REDEMPTION_TYPE, RedemptionActionInfo } from '.'
-import { useAppSelector } from '../../../hooks/useRedux'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { TxDoneModal } from '../../TxDoneModal'
-
-type Props = {
-  poolUnderlyingToken: UnderlyingTokenInfo
-  redemptionType: REDEMPTION_TYPE
-  handleAction: () => void
-}
-
-export function Done({
-  poolUnderlyingToken,
-  redemptionType,
-  handleAction,
-}: Props): React.ReactElement {
-  const { symbol } = poolUnderlyingToken
-  const { redeemAmount, redeemShares } = useAppSelector(selectWidgetState)
-  const redemptionActionInfo = RedemptionActionInfo[redemptionType]
-  const isCreate = redemptionActionInfo.action === 'Create'
-
-  const content = [
-    `You successfully ${isCreate ? 'created' : 'canceled'} ${formatMoney(
-      redeemAmount,
-    )} ${symbol} (${redeemShares} shares) redemption request.`,
-    isCreate ? `Note: Exact redemption amounts may vary once processed.` : '',
-  ]
-
-  return <TxDoneModal handleAction={handleAction} content={content} />
-}

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

@@ -1,207 +0,0 @@
-import {
-  POOL_NAME,
-  useCancellableRedemptionInfoV2,
-  useLenderPositionV2,
-  usePoolInfoV2,
-  usePoolUnderlyingTokenInfoV2,
-} from '@huma-finance/shared'
-import { useWeb3React } from '@web3-react/core'
-import { BigNumber } from 'ethers'
-import React, { useCallback, 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 { ChooseAction } from './1-ChooseAction'
-import { ChooseAmount } from './2-ChooseAmount'
-import { Transfer } from './3-Transfer'
-import { Done } from './4-Done'
-
-/**
- * Lend pool withdraw props
- * @typedef {Object} LendRedeemPropsV2
- * @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 lending pool withdraw action is successful.
- */
-export type LendRedeemPropsV2 = {
-  poolName: keyof typeof POOL_NAME
-  handleClose: () => void
-  handleSuccess?: (blockNumber?: number) => void
-}
-
-export enum REDEMPTION_TYPE {
-  AddSeniorRedemption = 1,
-  CancelSeniorRedemption = 2,
-  AddJuniorRedemption = 3,
-  CancelJuniorRedemption = 4,
-}
-
-export const RedemptionActionInfo: {
-  [key in REDEMPTION_TYPE]: {
-    action: 'Create' | 'Cancel'
-    tranche: 'senior' | 'junior'
-  }
-} = {
-  [REDEMPTION_TYPE.AddSeniorRedemption]: {
-    action: 'Create',
-    tranche: 'senior',
-  },
-  [REDEMPTION_TYPE.CancelSeniorRedemption]: {
-    action: 'Cancel',
-    tranche: 'senior',
-  },
-  [REDEMPTION_TYPE.AddJuniorRedemption]: {
-    action: 'Create',
-    tranche: 'junior',
-  },
-  [REDEMPTION_TYPE.CancelJuniorRedemption]: {
-    action: 'Cancel',
-    tranche: 'junior',
-  },
-}
-
-export type RedemptionInfo = {
-  shares: BigNumber
-  amount: BigNumber
-}
-
-export function LendRedeemV2({
-  poolName: poolNameStr,
-  handleClose,
-  handleSuccess,
-}: LendRedeemPropsV2): React.ReactElement | null {
-  const dispatch = useDispatch()
-  const { account, chainId, provider } = useWeb3React()
-  const poolName = POOL_NAME[poolNameStr]
-  const poolInfo = usePoolInfoV2(poolName, chainId)
-  const { step, errorMessage, errorReason } = useAppSelector(selectWidgetState)
-  const [seniorRedemptionInfo, refreshSeniorRedemptionInfo] =
-    useCancellableRedemptionInfoV2(poolName, 'senior', account, provider)
-  const [juniorRedemptionInfo, refreshJuniorRedemptionInfo] =
-    useCancellableRedemptionInfoV2(poolName, 'junior', account, provider)
-  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
-  const [seniorPosition, refreshSeniorPosition] = useLenderPositionV2(
-    poolName,
-    'senior',
-    account,
-    provider,
-  )
-  const [juniorPosition, refreshJuniorPosition] = useLenderPositionV2(
-    poolName,
-    'junior',
-    account,
-    provider,
-  )
-  const [redemptionType, setRedemptionType] = useState<REDEMPTION_TYPE>()
-  const redemptionActionInfo = redemptionType
-    ? RedemptionActionInfo[redemptionType]
-    : undefined
-
-  useEffect(() => {
-    if (!step) {
-      dispatch(setStep(WIDGET_STEP.ChooseTranche))
-    }
-  }, [dispatch, step])
-
-  const handleRedeemSuccess = useCallback(
-    (blockNumber: number) => {
-      refreshSeniorRedemptionInfo()
-      refreshJuniorRedemptionInfo()
-      refreshSeniorPosition()
-      refreshJuniorPosition()
-      if (handleSuccess) {
-        handleSuccess(blockNumber)
-      }
-    },
-    [
-      handleSuccess,
-      refreshJuniorPosition,
-      refreshJuniorRedemptionInfo,
-      refreshSeniorPosition,
-      refreshSeniorRedemptionInfo,
-    ],
-  )
-
-  const getMaxAmount = () => {
-    if (redemptionActionInfo?.tranche === 'senior') {
-      return redemptionActionInfo?.action === 'Create'
-        ? seniorPosition
-        : seniorRedemptionInfo?.amount
-    }
-    if (redemptionActionInfo?.tranche === 'junior') {
-      return redemptionActionInfo?.action === 'Create'
-        ? juniorPosition
-        : juniorRedemptionInfo?.amount
-    }
-    return undefined
-  }
-
-  if (!poolInfo || !poolUnderlyingToken) {
-    return (
-      <WidgetWrapper
-        isOpen
-        isLoading
-        loadingTitle='Redeem'
-        handleClose={handleClose}
-        handleSuccess={handleSuccess}
-      />
-    )
-  }
-
-  return (
-    <WidgetWrapper
-      isOpen
-      loadingTitle='Redeem'
-      handleClose={handleClose}
-      handleSuccess={handleRedeemSuccess}
-    >
-      {step === WIDGET_STEP.ChooseTranche && (
-        <ChooseAction
-          poolInfo={poolInfo}
-          poolUnderlyingToken={poolUnderlyingToken}
-          seniorRedemptionInfo={seniorRedemptionInfo}
-          juniorRedemptionInfo={juniorRedemptionInfo}
-          redemptionType={redemptionType}
-          changeRedemptionType={setRedemptionType}
-          seniorPosition={seniorPosition}
-          juniorPosition={juniorPosition}
-        />
-      )}
-      {step === WIDGET_STEP.ChooseAmount && redemptionType && (
-        <ChooseAmount
-          poolInfo={poolInfo}
-          poolUnderlyingToken={poolUnderlyingToken}
-          redemptionType={redemptionType}
-          maxAmount={getMaxAmount() ?? BigNumber.from(0)}
-        />
-      )}
-      {step === WIDGET_STEP.Transfer && redemptionType && (
-        <Transfer
-          poolInfo={poolInfo}
-          poolUnderlyingToken={poolUnderlyingToken}
-          redemptionType={redemptionType}
-        />
-      )}
-      {step === WIDGET_STEP.Done && redemptionType && (
-        <Done
-          poolUnderlyingToken={poolUnderlyingToken}
-          handleAction={handleClose}
-          redemptionType={redemptionType}
-        />
-      )}
-      {step === WIDGET_STEP.Error && (
-        <ErrorModal
-          title='Redeem'
-          errorReason={errorReason}
-          errorMessage={errorMessage}
-          handleOk={handleClose}
-        />
-      )}
-    </WidgetWrapper>
-  )
-}

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

@@ -1,88 +0,0 @@
-import {
-  FirstLossCoverIndex,
-  getFirstLossCoverContractV2,
-  PoolInfoV2,
-  UnderlyingTokenInfo,
-} from '@huma-finance/shared'
-import { useWeb3React } from '@web3-react/core'
-import { ethers } from 'ethers'
-import React, { useEffect, useState } from 'react'
-
-import { WithdrawType } from '.'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setStep, setWithdrawAmount } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { InputAmountModal } from '../../InputAmountModal'
-
-type Props = {
-  poolInfo: PoolInfoV2
-  poolUnderlyingToken: UnderlyingTokenInfo
-  selectedWithdrawType: WithdrawType
-}
-
-export function ChooseAmount({
-  poolInfo,
-  poolUnderlyingToken,
-  selectedWithdrawType,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { provider } = useWeb3React()
-  const { symbol } = poolUnderlyingToken
-  const [sharePrice, setSharePrice] = useState(0)
-  const [currentAmount, setCurrentAmount] = useState<number>(0)
-  const [currentShares, setCurrentShares] = useState<number>(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) as FirstLossCoverIndex,
-          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: number) => {
-    const shares = Number(newAmount) / sharePrice
-    setCurrentShares(shares)
-    setCurrentAmount(newAmount)
-    dispatch(setWithdrawAmount(Number(newAmount)))
-  }
-
-  const handleAction = () => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
-  }
-
-  return (
-    <InputAmountModal
-      title={`Withdraw ${symbol}`}
-      subTitle={selectedWithdrawType.label}
-      tokenSymbol={symbol}
-      currentAmount={currentAmount}
-      handleChangeAmount={handleChangeAmount}
-      maxAmount={maxAmountFormatted}
-      info={`${currentShares.toFixed(1)} Shares`}
-      handleAction={handleAction}
-      actionText='WITHDRAW'
-    />
-  )
-}