@huma-finance/widgets 0.0.48-beta.202 → 0.0.48-beta.280

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

@@ -0,0 +1,127 @@
+import {
+  POOL_NAME,
+  TrancheType,
+  usePoolInfoV2,
+  usePoolUnderlyingTokenInfoV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+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 { ChooseTranche } from './1-ChooseTranche'
+import { Evaluation } from './2-Evaluation'
+import { ChooseAmount } from './3-ChooseAmount'
+import { ApproveAllowance } from './4-ApproveAllowance'
+import { Transfer } from './5-Transfer'
+import { Success } from './6-Success'
+import { Notifications } from './7-Notifications'
+
+/**
+ * Lend pool supply props
+ * @typedef {Object} LendSupplyPropsV2
+ * @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 supply action is successful.
+ */
+export interface LendSupplyPropsV2 {
+  poolName: keyof typeof POOL_NAME
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function LendSupplyV2({
+  poolName: poolNameStr,
+  handleClose,
+  handleSuccess,
+}: LendSupplyPropsV2): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const poolName = POOL_NAME[poolNameStr]
+  const { chainId, provider } = useWeb3React()
+  const poolInfo = usePoolInfoV2(poolName, chainId)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
+  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
+
+  useEffect(() => {
+    if (!step) {
+      dispatch(setStep(WIDGET_STEP.ChooseTranche))
+    }
+  }, [dispatch, step])
+
+  if (!poolInfo || !poolUnderlyingToken) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle='Supply'
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={`Supply ${poolUnderlyingToken.symbol}`}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseTranche && (
+        <ChooseTranche
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          selectedTranche={selectedTranche}
+          changeTranche={setSelectedTranche}
+        />
+      )}
+      {step === WIDGET_STEP.Evaluation && (
+        <Evaluation poolInfo={poolInfo} handleClose={handleClose} />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          selectedTranche={selectedTranche}
+        />
+      )}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && selectedTranche && (
+        <Transfer
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          trancheType={selectedTranche}
+        />
+      )}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          handleAction={handleClose}
+        />
+      )}
+      {step === WIDGET_STEP.Notifications && (
+        <Notifications handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Supply'
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/Lend/withdraw/1-CheckWithdrawble.tsx

@@ -23,15 +23,19 @@ export function CheckWithdrawable({
   handleClose,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const withdrawlLockoutSeconds = useWithdrawlLockoutInSeconds(
     poolInfo.poolName,
     poolInfo.poolType,
+    chainId,
+    provider,
   )
   const lastDepositTime = useLastDepositTime(
     poolInfo.poolName,
     poolInfo.poolType,
+    chainId,
     account,
+    provider,
   )
 
   const { symbol } = poolInfo.poolUnderlyingToken

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

@@ -9,24 +9,18 @@ import { ChooseAmountModal } from '../../ChooseAmountModal'
 
 type Props = {
   lenderPosition: BigNumber
-  poolBalance: BigNumber
   poolInfo: PoolInfoType
 }
 
 export function ChooseAmount({
   lenderPosition,
-  poolBalance,
   poolInfo,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { poolUnderlyingToken } = poolInfo
   const { symbol, decimals } = poolUnderlyingToken
   const [currentAmount, setCurrentAmount] = useState(0)
-  // Take the minimum of the pool balance or the lender position
-  const withdrawableAmountBN = lenderPosition.lt(poolBalance)
-    ? lenderPosition
-    : poolBalance
-  const withdrawableAmount = downScale<number>(withdrawableAmountBN, decimals)
+  const withdrawableAmount = downScale<number>(lenderPosition, decimals)
 
   const handleChangeAmount = useCallback(
     (newAmount: number) => {

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

@@ -3,7 +3,6 @@ import {
   POOL_NAME,
   POOL_TYPE,
   useLenderPosition,
-  usePoolBalance,
   usePoolInfo,
 } from '@huma-finance/shared'
 import React, { useCallback, useEffect } from 'react'
@@ -42,33 +41,33 @@ export function LendWithdraw({
   handleSuccess,
 }: LendWithdrawProps): 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 [lenderPosition, refreshLenderPosition] = useLenderPosition(
     poolName,
     poolType,
+    chainId,
     account,
+    provider,
   )
-  const [poolBalance, refreshPoolBalance] = usePoolBalance(poolName, poolType)
 
   useEffect(() => {
-    if (!step && lenderPosition && poolBalance) {
+    if (!step && lenderPosition) {
       dispatch(setStep(WIDGET_STEP.CheckWithdrawable))
     }
-  }, [dispatch, lenderPosition, poolBalance, step])
+  }, [dispatch, lenderPosition, step])
 
   const handleWithdrawSuccess = useCallback(
     (blockNumber: number) => {
       refreshLenderPosition()
-      refreshPoolBalance()
       if (handleSuccess) {
         handleSuccess(blockNumber)
       }
     },
-    [handleSuccess, refreshLenderPosition, refreshPoolBalance],
+    [handleSuccess, refreshLenderPosition],
   )
 
   if (!poolInfo) {
@@ -85,11 +84,7 @@ export function LendWithdraw({
         <CheckWithdrawable poolInfo={poolInfo} handleClose={handleClose} />
       )}
       {step === WIDGET_STEP.ChooseAmount && (
-        <ChooseAmount
-          poolInfo={poolInfo}
-          lenderPosition={lenderPosition!}
-          poolBalance={poolBalance!}
-        />
+        <ChooseAmount poolInfo={poolInfo} lenderPosition={lenderPosition!} />
       )}
       {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
       {step === WIDGET_STEP.Done && (

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

@@ -0,0 +1,201 @@
+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>
+  )
+}

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

@@ -0,0 +1,48 @@
+import {
+  PoolInfoV2,
+  TrancheType,
+  useTrancheVaultContractV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { TxSendModalV2 } from '../../TxSendModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  selectedTranche: TrancheType
+}
+
+export function Transfer({
+  poolInfo,
+  selectedTranche,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const trancheVaultContract = useTrancheVaultContractV2(
+    poolInfo.poolName,
+    selectedTranche,
+    provider,
+    account,
+  )
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  if (!trancheVaultContract || !account) {
+    return null
+  }
+
+  return (
+    <TxSendModalV2
+      contract={trancheVaultContract}
+      method='disburse'
+      params={[]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/Lend/withdrawV2/3-Done.tsx

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

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

@@ -0,0 +1,129 @@
+import {
+  POOL_NAME,
+  TrancheType,
+  usePoolInfoV2,
+  usePoolUnderlyingTokenInfoV2,
+  useWithdrawableAssetsV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { BigNumber } from 'ethers'
+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 { ChooseTranche } from './1-ChooseTranche'
+import { Transfer } from './2-Transfer'
+import { Done } from './3-Done'
+
+/**
+ * Lend pool withdraw props
+ * @typedef {Object} LendWithdrawPropsV2
+ * @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 LendWithdrawPropsV2 = {
+  poolName: keyof typeof POOL_NAME
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function LendWithdrawV2({
+  poolName: poolNameStr,
+  handleClose,
+  handleSuccess,
+}: LendWithdrawPropsV2): 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 [seniorWithdrawableAmount, refreshSeniorWithdrawableAmount] =
+    useWithdrawableAssetsV2(poolName, 'senior', account, provider)
+  const [juniorWithdrawableAmount, refreshJuniorWithdrawableAmount] =
+    useWithdrawableAssetsV2(poolName, 'junior', account, provider)
+  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
+  const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
+  const [withdrawAmount, setWithdrawAmount] = useState<BigNumber>()
+
+  useEffect(() => {
+    if (!step) {
+      dispatch(setStep(WIDGET_STEP.ChooseTranche))
+    }
+  }, [dispatch, step])
+
+  const handleWithdrawSuccess = useCallback(
+    (blockNumber: number) => {
+      refreshSeniorWithdrawableAmount()
+      refreshJuniorWithdrawableAmount()
+      if (handleSuccess) {
+        handleSuccess(blockNumber)
+      }
+    },
+    [
+      handleSuccess,
+      refreshJuniorWithdrawableAmount,
+      refreshSeniorWithdrawableAmount,
+    ],
+  )
+
+  const handleChangeTranche = useCallback(
+    (tranche: TrancheType) => {
+      setSelectedTranche(tranche)
+      if (tranche === 'senior') {
+        setWithdrawAmount(seniorWithdrawableAmount)
+      }
+      if (tranche === 'junior') {
+        setWithdrawAmount(juniorWithdrawableAmount)
+      }
+    },
+    [juniorWithdrawableAmount, seniorWithdrawableAmount],
+  )
+
+  if (!poolInfo || !poolUnderlyingToken) {
+    return null
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle='Withdraw'
+      handleClose={handleClose}
+      handleSuccess={handleWithdrawSuccess}
+    >
+      {step === WIDGET_STEP.ChooseTranche && (
+        <ChooseTranche
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          selectedTranche={selectedTranche}
+          changeTranche={handleChangeTranche}
+          seniorWithdrawableAmount={seniorWithdrawableAmount}
+          juniorWithdrawableAmount={juniorWithdrawableAmount}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && selectedTranche && (
+        <Transfer poolInfo={poolInfo} selectedTranche={selectedTranche} />
+      )}
+      {step === WIDGET_STEP.Done && withdrawAmount && (
+        <Done
+          poolUnderlyingToken={poolUnderlyingToken}
+          withdrawAmount={withdrawAmount}
+          handleAction={handleClose}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Withdraw'
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}