@huma-finance/widgets 0.0.61-beta.550 → 0.0.61-beta.552

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.61-beta.550+850a9ff",
+  "version": "0.0.61-beta.552+89568b3",
   "publishConfig": {
     "access": "public"
   },
@@ -195,5 +195,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "850a9ff5aaa00b13b9fcb2de3c546c2b51b290f1"
+  "gitHead": "89568b3b32040fb6bcbaac6f238577ae720c109c"
 }

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

@@ -73,7 +73,7 @@ export function ChooseAmount({
       currentAmount={currentAmount}
       handleChangeAmount={handleChangeAmount}
       maxAmount={creditAvailableFormatted}
-      info={`${formatNumber(creditAvailableFormatted)} Available`}
+      infos={[`${formatNumber(creditAvailableFormatted)} Available`]}
       handleAction={handleAction}
       actionText='BORROW'
     />

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

@@ -83,7 +83,7 @@ export function ChooseAmount({
       handleChangeAmount={handleChangeAmount}
       maxAmount={payoffAmount}
       maxAmountText='Pay Off'
-      info={`${formatNumber(totalDueAmount.toFixed(0))} Due`}
+      infos={[`${formatNumber(totalDueAmount.toFixed(0))} Due`]}
       handleAction={handleAction}
       actionText='PAY'
     />

package/src/components/InputAmountModal.tsx

@@ -1,4 +1,12 @@
-import { Box, Button, css, TextField, useTheme } from '@mui/material'
+import { isEmpty } from '@huma-finance/shared'
+import {
+  Box,
+  Button,
+  css,
+  TextField,
+  Typography,
+  useTheme,
+} from '@mui/material'
 import React, { useState } from 'react'
 import { NumericFormat } from 'react-number-format'
 
@@ -15,7 +23,7 @@ type Props = {
   maxAmount: number | string
   maxAmountText?: string
   maxAmountTitle?: string
-  info?: string
+  infos?: string[]
   handleChangeAmount: (amount: number) => void
   handleAction: () => void
 }
@@ -30,7 +38,7 @@ export function InputAmountModal({
   maxAmount,
   maxAmountText = 'MAX',
   maxAmountTitle,
-  info,
+  infos,
   handleChangeAmount,
   handleAction,
 }: Props): React.ReactElement | null {
@@ -85,12 +93,16 @@ export function InputAmountModal({
       letter-spacing: 0.46px;
     `,
     info: css`
-      color: ${theme.palette.text.primary};
+      color: ${theme.palette.text.secondary};
       font-weight: 400;
       font-size: 16px;
       line-height: 160%;
       letter-spacing: 0.15px;
     `,
+    subInfo: css`
+      position: absolute;
+      bottom: ${theme.spacing(6)};
+    `,
   }
 
   const onChange = (
@@ -106,6 +118,25 @@ export function InputAmountModal({
     handleChangeAmount(Number(maxAmount))
   }
 
+  const getDisabled = () => {
+    if (Number(currentAmount) <= 0) {
+      return true
+    }
+    if (!isEmpty(maxAmount) && Number(currentAmount) > Number(maxAmount)) {
+      return true
+    }
+    return false
+  }
+
+  const getEndAdornment = () => (
+    <Box css={styles.maxWrapper}>
+      {maxAmountTitle && <Box css={styles.maxTitle}>{maxAmountTitle}</Box>}
+      <Button variant='contained' css={styles.max} onClick={setMaxAmount}>
+        {maxAmountText}
+      </Button>
+    </Box>
+  )
+
   return (
     <WrapperModal title={title} subTitle={subTitle}>
       <Box css={styles.inputAmountWrapper}>
@@ -122,34 +153,25 @@ export function InputAmountModal({
             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
-                  variant='contained'
-                  css={styles.max}
-                  onClick={setMaxAmount}
-                >
-                  {maxAmountText}
-                </Button>
-              ),
-            }}
+            InputProps={{ endAdornment: getEndAdornment() }}
           />
         </Box>
       </Box>
 
-      {info && <Box css={styles.info}>{info}</Box>}
+      {infos && (
+        <Box>
+          {infos.map((info) => (
+            <Typography css={styles.info} key={info}>
+              {info}
+            </Typography>
+          ))}
+        </Box>
+      )}
 
       <BottomButton
         variant='contained'
         onClick={handleAction}
-        disabled={Number(currentAmount) <= 0}
+        disabled={getDisabled()}
       >
         {actionText}
       </BottomButton>

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

@@ -106,7 +106,7 @@ export function ChooseAmount({
       currentAmount={currentShares}
       handleChangeAmount={handleChangeShares}
       maxAmount={maxSharesFormatted}
-      info={`${String(formatNumber(currentAmount))} ${symbol}`}
+      infos={[`${String(formatNumber(currentAmount))} ${symbol}`]}
       maxAmountTitle={`${formatNumber(maxSharesFormatted)} Shares`}
       suffix='Shares'
       handleAction={handleAction}

package/src/components/Lend/supplyV2/3-ChooseAmount.tsx

@@ -1,21 +1,13 @@
+import { formatNumber, PoolInfoV2, TrancheType } from '@huma-finance/shared'
+import { LPConfigStructOutput } from '@huma-finance/shared/src/v2/abis/types/PoolConfig'
 import {
-  CampaignService,
-  checkIsDev,
-  formatNumber,
-  PoolInfoV2,
-  TrancheType,
-  UnderlyingTokenInfo,
-} from '@huma-finance/shared'
-import {
-  useDebouncedValue,
   usePoolSafeAllowanceV2,
   usePoolUnderlyingTokenBalanceV2,
 } from '@huma-finance/web-shared'
 import { useWeb3React } from '@web3-react/core'
 import { BigNumber, ethers } from 'ethers'
-import React, { useEffect, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 
-import { Campaign } from '.'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
@@ -23,29 +15,25 @@ import { InputAmountModal } from '../../InputAmountModal'
 
 type Props = {
   poolInfo: PoolInfoV2
-  poolUnderlyingToken: UnderlyingTokenInfo
+  lpConfig: LPConfigStructOutput
+  juniorAssets: BigNumber
+  seniorAssets: BigNumber
   selectedTranche: TrancheType | undefined
   isUniTranche: boolean
-  pointsTestnetExperience: boolean
-  campaign?: Campaign
 }
 
 export function ChooseAmount({
   poolInfo,
-  poolUnderlyingToken,
+  lpConfig,
+  juniorAssets: juniorAssetsBN,
+  seniorAssets: seniorAssetsBN,
   selectedTranche,
   isUniTranche,
-  pointsTestnetExperience,
-  campaign,
 }: Props): React.ReactElement | null {
-  const isDev = checkIsDev()
   const dispatch = useAppDispatch()
   const { account, provider } = useWeb3React()
-  const { symbol, decimals } = poolUnderlyingToken
+  const { symbol, decimals } = poolInfo.poolUnderlyingToken
   const [currentAmount, setCurrentAmount] = useState<number | string>(0)
-  const debouncedValue = useDebouncedValue(currentAmount)
-  const [campaignPoints, setCampaignPoints] = useState<number>(0)
-  const [lockupPeriodMonths, setLockupPeriodMonths] = useState<number>(0)
   const { allowance = BigNumber.from(0) } = usePoolSafeAllowanceV2(
     poolInfo.poolName,
     account,
@@ -56,46 +44,22 @@ export function ChooseAmount({
     account,
     provider,
   )
-  const maxAmountFormatted = ethers.utils.formatUnits(
-    balance,
-    poolUnderlyingToken.decimals,
-  )
 
-  useEffect(() => {
-    const getBasePoints = async () => {
-      if (campaign && selectedTranche && Number(debouncedValue) > 0) {
-        const estimatedPoints = await CampaignService.getEstimatedPoints(
-          campaign.campaignGroupId,
-          ethers.utils
-            .parseUnits(
-              String(debouncedValue),
-              poolInfo.poolUnderlyingToken.decimals,
-            )
-            .toString(),
-          isDev,
-          pointsTestnetExperience,
-        )
-        const campaignPoints = estimatedPoints.find(
-          (item) => item.campaignId === campaign.id,
-        )
-        if (campaignPoints) {
-          setCampaignPoints(campaignPoints[`${selectedTranche}TranchePoints`])
-          setLockupPeriodMonths(campaignPoints.lockupPeriodMonths)
-        }
-      } else {
-        setCampaignPoints(0)
-      }
+  const { juniorAvailableCapBN, seniorAvailableCapBN } = useMemo(() => {
+    const { maxSeniorJuniorRatio, liquidityCap: liquidityCapBN } = lpConfig
+    const totalDeployedBN = seniorAssetsBN.add(juniorAssetsBN)
+    const totalAvailableCapBN = liquidityCapBN.sub(totalDeployedBN)
+    const maxSeniorAssetsBN = juniorAssetsBN.mul(maxSeniorJuniorRatio)
+    let seniorAvailableCapBN = maxSeniorAssetsBN.sub(seniorAssetsBN)
+    seniorAvailableCapBN = seniorAvailableCapBN.gt(totalAvailableCapBN)
+      ? totalAvailableCapBN
+      : seniorAvailableCapBN
+
+    return {
+      juniorAvailableCapBN: totalAvailableCapBN.sub(seniorAvailableCapBN),
+      seniorAvailableCapBN,
     }
-    getBasePoints()
-  }, [
-    campaign,
-    debouncedValue,
-    decimals,
-    isDev,
-    pointsTestnetExperience,
-    poolInfo.poolUnderlyingToken.decimals,
-    selectedTranche,
-  ])
+  }, [juniorAssetsBN, lpConfig, seniorAssetsBN])
 
   const handleChangeAmount = (newAmount: number) => {
     setCurrentAmount(newAmount)
@@ -113,24 +77,50 @@ export function ChooseAmount({
     dispatch(setStep(step))
   }
 
-  let info = `${formatNumber(maxAmountFormatted)} Available`
-  if (campaign && campaignPoints > 0) {
-    info = `You will earn ${formatNumber(
-      campaignPoints,
-    )} Huma points for the entire ${lockupPeriodMonths} months.`
+  const getTrancheCap = () => {
+    if (selectedTranche === 'junior') {
+      return juniorAvailableCapBN
+    }
+    return seniorAvailableCapBN
+  }
+
+  const getMaxAmount = () => {
+    const trancheCap = getTrancheCap()
+    return balance.gt(trancheCap) ? trancheCap : balance
+  }
+
+  const getInfos = () => {
+    const trancheCap = getTrancheCap()
+    const currentAmountBN = ethers.utils.parseUnits(
+      String(currentAmount),
+      decimals,
+    )
+    const remainingCap = trancheCap.sub(currentAmountBN)
+
+    if (remainingCap.lt(0)) {
+      return ['0 remaining capacity']
+    }
+    return [
+      `${formatNumber(
+        ethers.utils.formatUnits(remainingCap, decimals),
+      )} remaining capacity`,
+    ]
   }
 
   return (
     <InputAmountModal
       title='Enter Amount'
-      subTitle={`Supplying ${symbol} with ${
+      subTitle={`Depositing to ${
         isUniTranche ? 'uni tranche' : selectedTranche
-      }`}
+      } tranche`}
       tokenSymbol={symbol}
       currentAmount={currentAmount}
       handleChangeAmount={handleChangeAmount}
-      maxAmount={maxAmountFormatted}
-      info={info}
+      maxAmount={Number(ethers.utils.formatUnits(getMaxAmount(), decimals))}
+      maxAmountTitle={`${formatNumber(
+        ethers.utils.formatUnits(balance, decimals),
+      )} balance`}
+      infos={getInfos()}
       handleAction={handleAction}
       actionText='SUPPLY'
     />

package/src/components/Lend/supplyV2/4-ApproveAllowance.tsx

@@ -1,4 +1,4 @@
-import { PoolInfoV2, UnderlyingTokenInfo } from '@huma-finance/shared'
+import { PoolInfoV2 } from '@huma-finance/shared'
 import React, { useCallback } from 'react'
 
 import { useAppDispatch } from '../../../hooks/useRedux'
@@ -8,12 +8,10 @@ import { ApproveAllowanceModalV2 } from '../../ApproveAllowanceModalV2'
 
 type Props = {
   poolInfo: PoolInfoV2
-  poolUnderlyingToken: UnderlyingTokenInfo
 }
 
 export function ApproveAllowance({
   poolInfo,
-  poolUnderlyingToken,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const spender = poolInfo.poolSafe
@@ -25,7 +23,7 @@ export function ApproveAllowance({
   return (
     <ApproveAllowanceModalV2
       poolInfo={poolInfo}
-      poolUnderlyingToken={poolUnderlyingToken}
+      poolUnderlyingToken={poolInfo.poolUnderlyingToken}
       spender={spender}
       handleSuccess={handleSuccess}
     />

package/src/components/Lend/supplyV2/5-Transfer.tsx

@@ -1,8 +1,4 @@
-import {
-  PoolInfoV2,
-  TrancheType,
-  UnderlyingTokenInfo,
-} from '@huma-finance/shared'
+import { PoolInfoV2, TrancheType } from '@huma-finance/shared'
 import { useTrancheVaultContractV2 } from '@huma-finance/web-shared'
 import { useWeb3React } from '@web3-react/core'
 import { ethers } from 'ethers'
@@ -16,19 +12,17 @@ import { TxSendModalV2 } from '../../TxSendModalV2'
 
 type Props = {
   poolInfo: PoolInfoV2
-  poolUnderlyingToken: UnderlyingTokenInfo
   trancheType: TrancheType
 }
 
 export function Transfer({
   poolInfo,
-  poolUnderlyingToken,
   trancheType,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { account, provider } = useWeb3React()
   const { supplyAmount } = useAppSelector(selectWidgetState)
-  const { decimals } = poolUnderlyingToken
+  const { decimals } = poolInfo.poolUnderlyingToken
   const supplyBigNumber = ethers.utils.parseUnits(
     String(supplyAmount),
     decimals,

package/src/components/Lend/supplyV2/6-Success.tsx

@@ -5,7 +5,6 @@ import {
   PoolInfoV2,
   timeUtil,
   TRANSFER_ABI,
-  UnderlyingTokenInfo,
 } from '@huma-finance/shared'
 import { sendTxAtom } from '@huma-finance/web-shared'
 import { useWeb3React } from '@web3-react/core'
@@ -25,7 +24,6 @@ import { TxDoneModal } from '../../TxDoneModal'
 
 type Props = {
   poolInfo: PoolInfoV2
-  poolUnderlyingToken: UnderlyingTokenInfo
   lpConfig: { withdrawalLockoutPeriodInDays: number }
   campaign?: Campaign
   updateTransactionHash: (hash: string) => void
@@ -34,7 +32,6 @@ type Props = {
 
 export function Success({
   poolInfo,
-  poolUnderlyingToken,
   lpConfig,
   campaign,
   updateTransactionHash,
@@ -43,7 +40,7 @@ export function Success({
   const dispatch = useDispatch()
   const { account, chainId } = useWeb3React()
   const [{ txReceipt, txHash }] = useAtom(sendTxAtom)
-  const { symbol, decimals, address } = poolUnderlyingToken
+  const { symbol, decimals, address } = poolInfo.poolUnderlyingToken
   const [supplyAmount, setSupplyAmount] = useState<string | undefined>()
   const { isFirstTimeNotifiUser } = useIsFirstTimeNotifiUser(account, chainId)
   const { notifiChainSupported } = useDoesChainSupportNotifi(chainId)

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

@@ -8,7 +8,7 @@ import {
   useLenderApprovedV2,
   useLPConfigV2,
   usePoolInfoV2,
-  usePoolUnderlyingTokenInfoV2,
+  useTrancheVaultAssetsV2,
 } from '@huma-finance/web-shared'
 import { useWeb3React } from '@web3-react/core'
 import React, { useEffect, useState } from 'react'
@@ -62,10 +62,10 @@ export function LendSupplyV2({
   const poolName = POOL_NAME[poolNameStr]
   const { chainId, provider, account } = useWeb3React()
   const poolInfo = usePoolInfoV2(poolName, chainId)
+  const { poolUnderlyingToken } = poolInfo || {}
   const { step, errorMessage } = useAppSelector(selectWidgetState)
   const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
   const [transactionHash, setTransactionHash] = useState<string | undefined>()
-  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
   const lpConfig = useLPConfigV2(poolName, provider)
   const isUniTranche = lpConfig?.maxSeniorJuniorRatio === 0
   const [lenderApprovedSenior] = useLenderApprovedV2(
@@ -80,6 +80,8 @@ export function LendSupplyV2({
     account,
     provider,
   )
+  const [juniorAssets] = useTrancheVaultAssetsV2(poolName, 'junior', provider)
+  const [seniorAssets] = useTrancheVaultAssetsV2(poolName, 'senior', provider)
 
   const lenderApproveStatusFetched =
     lenderApprovedSenior !== undefined && lenderApprovedJunior !== undefined
@@ -144,7 +146,9 @@ export function LendSupplyV2({
     !poolInfo ||
     !poolUnderlyingToken ||
     !lenderApproveStatusFetched ||
-    !lpConfig
+    !lpConfig ||
+    !juniorAssets ||
+    !seniorAssets
   ) {
     return (
       <WidgetWrapper
@@ -184,30 +188,22 @@ export function LendSupplyV2({
       {step === WIDGET_STEP.ChooseAmount && (
         <ChooseAmount
           poolInfo={poolInfo}
-          poolUnderlyingToken={poolUnderlyingToken}
+          lpConfig={lpConfig}
+          juniorAssets={juniorAssets}
+          seniorAssets={seniorAssets}
           selectedTranche={selectedTranche}
           isUniTranche={isUniTranche}
-          pointsTestnetExperience={pointsTestnetExperience}
-          campaign={campaign}
         />
       )}
       {step === WIDGET_STEP.ApproveAllowance && (
-        <ApproveAllowance
-          poolInfo={poolInfo}
-          poolUnderlyingToken={poolUnderlyingToken}
-        />
+        <ApproveAllowance poolInfo={poolInfo} />
       )}
       {step === WIDGET_STEP.Transfer && selectedTranche && (
-        <Transfer
-          poolInfo={poolInfo}
-          poolUnderlyingToken={poolUnderlyingToken}
-          trancheType={selectedTranche}
-        />
+        <Transfer poolInfo={poolInfo} trancheType={selectedTranche} />
       )}
       {step === WIDGET_STEP.Done && (
         <Success
           poolInfo={poolInfo}
-          poolUnderlyingToken={poolUnderlyingToken}
           lpConfig={lpConfig}
           campaign={campaign}
           updateTransactionHash={setTransactionHash}