@huma-finance/widgets 0.0.48-beta.294 → 0.0.48-beta.297

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/1-ChooseTranche.tsx

@@ -1,201 +0,0 @@
-import {
-  formatBNFixed,
-  getTrancheVaultContractV2,
-  PoolInfoV2,
-  TrancheType,
-  UnderlyingTokenInfo,
-} from '@huma-finance/shared'
-import {
-  css,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  useTheme,
-} from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { BigNumber } from 'ethers'
-import React, { useEffect, useState } 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 { LoadingModal } from '../../LoadingModal'
-import { WrapperModal } from '../../WrapperModal'
-
-type Props = {
-  poolInfo: PoolInfoV2
-  poolUnderlyingToken: UnderlyingTokenInfo
-  selectedTranche: TrancheType | undefined
-  seniorWithdrawableAmount: BigNumber | undefined
-  juniorWithdrawableAmount: BigNumber | undefined
-  changeTranche: (tranche: TrancheType) => void
-}
-
-export function ChooseTranche({
-  poolInfo,
-  poolUnderlyingToken,
-  selectedTranche,
-  seniorWithdrawableAmount,
-  juniorWithdrawableAmount,
-  changeTranche,
-}: Props): React.ReactElement | null {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-  const { provider } = useWeb3React()
-  const { symbol, decimals } = 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?.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?.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`
-      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.Transfer))
-  }
-
-  const items: {
-    label: string
-    value: TrancheType
-    disabled: boolean | undefined
-  }[] = [
-    {
-      label: `Withdraw ${formatBNFixed(
-        seniorWithdrawableAmount,
-        decimals,
-      )} ${symbol} from Senior vault (${formatBNFixed(
-        seniorWithdrawableShares,
-        decimals,
-      )} shares)`,
-      value: 'senior',
-      disabled: seniorWithdrawableAmount?.lte(0) ?? true,
-    },
-    {
-      label: `Withdraw ${formatBNFixed(
-        juniorWithdrawableAmount,
-        decimals,
-      )} ${symbol} from Junior vault (${formatBNFixed(
-        juniorWithdrawableShares,
-        decimals,
-      )} shares)`,
-      value: 'junior',
-      disabled: juniorWithdrawableAmount?.lte(0) ?? true,
-    },
-  ]
-
-  if (isLoading) {
-    return <LoadingModal title={`Withdraw ${symbol}`} />
-  }
-
-  return (
-    <WrapperModal title={`Withdraw ${symbol}`}>
-      <FormControl>
-        <FormLabel css={styles.subTitle}>Select Withdraw 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}
-              disabled={item.disabled}
-              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>
-  )
-}