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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.48-beta.296+a50d41c",
+  "version": "0.0.48-beta.298+d1ebb18",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.48-beta.296+a50d41c",
-    "@huma-finance/shared": "^0.0.48-beta.296+a50d41c",
+    "@huma-finance/sdk": "^0.0.48-beta.298+d1ebb18",
+    "@huma-finance/shared": "^0.0.48-beta.298+d1ebb18",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -193,5 +193,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "a50d41ce9bafdb1b8894da5c38a139b4efcda676"
+  "gitHead": "d1ebb189766905904362198e7b0205e2b2ff39bc"
 }

package/src/components/CreditLine/borrowV2/3-Transfer.tsx

@@ -43,7 +43,7 @@ export function Transfer({ poolInfo }: Props): React.ReactElement {
       title='Borrow'
       contract={creditContract}
       method='drawdown'
-      params={[account, borrowAmountBN]}
+      params={[borrowAmountBN]}
       handleSuccess={handleSuccess}
     />
   )

package/src/components/CreditLine/paymentV2/1-ChooseAmount.tsx

@@ -45,6 +45,11 @@ export function ChooseAmount({
     ethers.utils.formatUnits(payoffAmountBN, decimals),
   )
 
+  console.log('totalDueAmountBN', totalDueAmountBN.toString())
+  console.log('payoffAmountBN', payoffAmountBN.toString())
+  console.log('payoffAmount', payoffAmount)
+  console.log('currentAmount', currentAmount)
+
   useEffect(() => {
     setCurrentAmount(totalDueAmount)
   }, [totalDueAmount])

package/src/components/InputAmountModal.tsx

@@ -10,9 +10,11 @@ type Props = {
   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
@@ -23,16 +25,18 @@ export function InputAmountModal({
   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 = ` ${tokenSymbol}`
+  const suffix = ` ${defaultSuffix ?? tokenSymbol}`
 
   const styles = {
     inputAmountWrapper: css`
@@ -51,23 +55,39 @@ export function InputAmountModal({
         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: var(--Purple-3, #f7f1ff);
+      background: #f7f1ff;
       padding: 4px 10px;
       gap: 8px;
-      color: var(--Purple-1, #b246ff);
+      color: #b246ff;
       font-family: 'Uni-Neue-Bold';
       font-size: 13px;
       line-height: 22px;
       letter-spacing: 0.46px;
     `,
     info: css`
-      color: var(--Black-5, #6b6572);
+      color: ${theme.palette.text.primary};
       font-family: 'Uni-Neue-Bold';
       font-size: 20px;
       line-height: 160%;
@@ -105,7 +125,14 @@ export function InputAmountModal({
             placeholder={`0${suffix}`}
             variant='standard'
             InputProps={{
-              endAdornment: (
+              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>

package/src/components/Lend/{withdrawV2 → addRedemptionV2}/1-ChooseTranche.tsx

@@ -1,4 +1,4 @@
-import { UnderlyingTokenInfo } from '@huma-finance/shared'
+import { TrancheType } from '@huma-finance/shared'
 import {
   css,
   FormControl,
@@ -10,7 +10,6 @@ import {
 } from '@mui/material'
 import React from 'react'
 
-import { WithdrawType } from '.'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
@@ -18,21 +17,16 @@ import { BottomButton } from '../../BottomButton'
 import { WrapperModal } from '../../WrapperModal'
 
 type Props = {
-  poolUnderlyingToken: UnderlyingTokenInfo
-  selectedWithdrawType: WithdrawType | undefined
-  withdrawTypes: WithdrawType[]
-  changeWithdrawType: (WithdrawType: WithdrawType) => void
+  selectedTranche: TrancheType | undefined
+  changeTranche: (tranche: TrancheType) => void
 }
 
 export function ChooseTranche({
-  poolUnderlyingToken,
-  selectedWithdrawType,
-  withdrawTypes,
-  changeWithdrawType,
+  selectedTranche,
+  changeTranche,
 }: Props): React.ReactElement | null {
   const theme = useTheme()
   const dispatch = useAppDispatch()
-  const { symbol } = poolUnderlyingToken
 
   const styles = {
     subTitle: css`
@@ -61,34 +55,35 @@ export function ChooseTranche({
     `,
   }
 
-  const handleChangeWithdrawType = (withdrawTypeValue: string | number) => {
-    const withdrawType = withdrawTypes.find(
-      (item) => item.value === withdrawTypeValue,
-    )
-    if (withdrawType) {
-      changeWithdrawType(withdrawType)
-    }
-  }
-
   const handleNext = () => {
-    if (selectedWithdrawType?.type === 'firstLossCover') {
-      dispatch(setStep(WIDGET_STEP.ChooseAmount))
-    } else {
-      dispatch(setStep(WIDGET_STEP.Transfer))
-    }
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
   }
 
+  const items: {
+    label: string
+    value: TrancheType
+  }[] = [
+    {
+      label: 'Senior',
+      value: 'senior',
+    },
+    {
+      label: 'Junior',
+      value: 'junior',
+    },
+  ]
+
   return (
-    <WrapperModal title={`Withdraw ${symbol}`}>
+    <WrapperModal title='Redemption'>
       <FormControl>
-        <FormLabel css={styles.subTitle}>Select Withdraw Type</FormLabel>
+        <FormLabel css={styles.subTitle}>Select Tranche Type</FormLabel>
         <RadioGroup
           aria-labelledby='buttons-group-label'
           name='radio-buttons-group'
           css={styles.radioGroup}
-          onChange={(e) => handleChangeWithdrawType(e.target.value)}
+          onChange={(e) => changeTranche(e.target.value as TrancheType)}
         >
-          {withdrawTypes.map((item) => (
+          {items.map((item) => (
             <FormControlLabel
               key={item.label}
               value={item.value}
@@ -109,7 +104,7 @@ export function ChooseTranche({
       </FormControl>
       <BottomButton
         variant='contained'
-        disabled={!selectedWithdrawType}
+        disabled={!selectedTranche}
         onClick={handleNext}
       >
         NEXT

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

@@ -0,0 +1,62 @@
+import { formatNumber, UnderlyingTokenInfo } from '@huma-finance/shared'
+import { ethers } from 'ethers'
+import React, { useState } from 'react'
+
+import { TrancheInfo } 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'
+
+type Props = {
+  poolUnderlyingToken: UnderlyingTokenInfo
+  trancheInfo: TrancheInfo
+}
+
+export function ChooseAmount({
+  poolUnderlyingToken,
+  trancheInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { symbol } = poolUnderlyingToken
+  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 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))
+  }
+
+  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'
+    />
+  )
+}

package/src/components/Lend/{redeemV2 → addRedemptionV2}/3-Transfer.tsx

@@ -4,10 +4,10 @@ import {
   useTrancheVaultContractV2,
 } from '@huma-finance/shared'
 import { useWeb3React } from '@web3-react/core'
+import { ethers } from 'ethers'
 import React, { useCallback } from 'react'
 
-import { ethers } from 'ethers'
-import { REDEMPTION_TYPE, RedemptionActionInfo } from '.'
+import { TrancheInfo } from '.'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -17,43 +17,38 @@ import { TxSendModalV2 } from '../../TxSendModalV2'
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
-  redemptionType: REDEMPTION_TYPE
+  trancheInfo: TrancheInfo
 }
 
 export function Transfer({
   poolInfo,
   poolUnderlyingToken,
-  redemptionType,
+  trancheInfo,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { decimals } = poolUnderlyingToken
   const { account, provider } = useWeb3React()
   const { redeemShares } = useAppSelector(selectWidgetState)
-  const redemptionActionInfo = RedemptionActionInfo[redemptionType]
   const trancheVaultContract = useTrancheVaultContractV2(
     poolInfo.poolName,
-    redemptionActionInfo.tranche,
+    trancheInfo.tranche,
     provider,
     account,
   )
   const redeemSharesBN = ethers.utils.parseUnits(String(redeemShares), decimals)
-  const method =
-    redemptionActionInfo.action === 'Create'
-      ? 'addRedemptionRequest'
-      : 'cancelRedemptionRequest'
 
   const handleSuccess = useCallback(() => {
     dispatch(setStep(WIDGET_STEP.Done))
   }, [dispatch])
 
-  if (!trancheVaultContract || !account) {
+  if (!trancheVaultContract) {
     return null
   }
 
   return (
     <TxSendModalV2
       contract={trancheVaultContract}
-      method={method}
+      method='addRedemptionRequest'
       params={[redeemSharesBN]}
       handleSuccess={handleSuccess}
     />

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

@@ -0,0 +1,20 @@
+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'
+
+type Props = {
+  handleAction: () => void
+}
+
+export function Done({ handleAction }: Props): React.ReactElement {
+  const { redeemShares } = useAppSelector(selectWidgetState)
+
+  const content = [
+    `${formatNumber(redeemShares)} shares requested for redemption`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

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

@@ -0,0 +1,172 @@
+import {
+  getTrancheAssetsAndShares,
+  POOL_NAME,
+  TrancheType,
+  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 { ChooseTranche } from './1-ChooseTranche'
+import { ChooseAmount } from './2-ChooseAmount'
+import { Transfer } from './3-Transfer'
+import { Done } from './4-Done'
+
+export type TrancheInfo = {
+  tranche: TrancheType
+  assets: BigNumber
+  shares: BigNumber
+}
+
+/**
+ * Lend pool add redemption props
+ * @typedef {Object} AddRedemptionPropsV2
+ * @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 AddRedemptionPropsV2 = {
+  poolName: keyof typeof POOL_NAME
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function AddRedemptionV2({
+  poolName: poolNameStr,
+  handleClose,
+  handleSuccess,
+}: AddRedemptionPropsV2): React.ReactElement | null {
+  const title = 'Redemption'
+  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 poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
+  const [seniorTrancheInfo, setSeniorTrancheInfo] = useState<TrancheInfo>()
+  const [juniorTrancheInfo, setJuniorTrancheInfo] = useState<TrancheInfo>()
+  const [trancheInfo, setTrancheInfo] = useState<TrancheInfo>()
+  const trancheInfoFetched = seniorTrancheInfo && juniorTrancheInfo
+
+  useEffect(() => {
+    if (account) {
+      getTrancheAssetsAndShares(poolName, 'senior', account, provider).then(
+        (info) => {
+          if (info) {
+            setSeniorTrancheInfo({ ...info, tranche: 'senior' })
+          }
+        },
+      )
+      getTrancheAssetsAndShares(poolName, 'junior', account, provider).then(
+        (info) => {
+          if (info) {
+            setJuniorTrancheInfo({ ...info, tranche: 'junior' })
+          }
+        },
+      )
+    }
+  }, [account, poolName, provider])
+
+  useEffect(() => {
+    if (!step && trancheInfoFetched) {
+      if (juniorTrancheInfo.assets.gt(0) && seniorTrancheInfo.assets.lte(0)) {
+        setTrancheInfo(juniorTrancheInfo)
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (seniorTrancheInfo.assets.gt(0) && juniorTrancheInfo.assets.lte(0)) {
+        setTrancheInfo(seniorTrancheInfo)
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (juniorTrancheInfo.assets.gt(0) && seniorTrancheInfo.assets.gt(0)) {
+        dispatch(setStep(WIDGET_STEP.ChooseTranche))
+      }
+    }
+  }, [dispatch, juniorTrancheInfo, seniorTrancheInfo, step, trancheInfoFetched])
+
+  const handleRedeemSuccess = useCallback(
+    (blockNumber: number) => {
+      if (handleSuccess) {
+        handleSuccess(blockNumber)
+      }
+    },
+    [handleSuccess],
+  )
+
+  const handleChangeTranche = useCallback(
+    (tranche: TrancheType) => {
+      if (tranche === 'senior') {
+        setTrancheInfo(seniorTrancheInfo)
+      } else if (tranche === 'junior') {
+        setTrancheInfo(juniorTrancheInfo)
+      } else {
+        setTrancheInfo(undefined)
+      }
+    },
+    [juniorTrancheInfo, seniorTrancheInfo],
+  )
+
+  if (!poolInfo || !poolUnderlyingToken || !trancheInfoFetched) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle={title}
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleRedeemSuccess}
+    >
+      {step === WIDGET_STEP.ChooseTranche && (
+        <ChooseTranche
+          selectedTranche={trancheInfo?.tranche}
+          changeTranche={handleChangeTranche}
+        />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && trancheInfo && (
+        <ChooseAmount
+          poolUnderlyingToken={poolUnderlyingToken}
+          trancheInfo={trancheInfo}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && trancheInfo && (
+        <Transfer
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          trancheInfo={trancheInfo}
+        />
+      )}
+      {step === WIDGET_STEP.Done && trancheInfo && (
+        <Done handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title={title}
+          errorReason={errorReason}
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/Lend/cancelRedemptionV2 /1-Transfer.tsx

@@ -0,0 +1,51 @@
+import {
+  PoolInfoV2,
+  TrancheType,
+  useTrancheVaultContractV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import React, { useCallback } from 'react'
+
+import { RedemptionInfo } from '.'
+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
+  trancheType: TrancheType
+  redemptionInfo: RedemptionInfo
+}
+
+export function Transfer({
+  poolInfo,
+  trancheType,
+  redemptionInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const trancheVaultContract = useTrancheVaultContractV2(
+    poolInfo.poolName,
+    trancheType,
+    provider,
+    account,
+  )
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  if (!trancheVaultContract) {
+    return null
+  }
+
+  return (
+    <TxSendModalV2
+      contract={trancheVaultContract}
+      method='cancelRedemptionRequest'
+      params={[redemptionInfo.shares]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/Lend/cancelRedemptionV2 /2-Done.tsx

@@ -0,0 +1,29 @@
+import { UnderlyingTokenInfo } from '@huma-finance/shared'
+import { ethers } from 'ethers'
+import React from 'react'
+
+import { RedemptionInfo } from '.'
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolUnderlyingToken: UnderlyingTokenInfo
+  redemptionInfo: RedemptionInfo
+  handleAction: () => void
+}
+
+export function Done({
+  poolUnderlyingToken,
+  redemptionInfo,
+  handleAction,
+}: Props): React.ReactElement {
+  const shares = ethers.utils.formatUnits(
+    redemptionInfo.shares,
+    poolUnderlyingToken.decimals,
+  )
+
+  const content = [
+    `You successfully canceled ${shares} shares redemption request.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}