@huma-finance/widgets 0.0.48-beta.285 → 0.0.48-beta.287

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.48-beta.285+8f3c2ea",
+  "version": "0.0.48-beta.287+ac85e1b",
   "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.285+8f3c2ea",
-    "@huma-finance/shared": "^0.0.48-beta.285+8f3c2ea",
+    "@huma-finance/sdk": "^0.0.48-beta.287+ac85e1b",
+    "@huma-finance/shared": "^0.0.48-beta.287+ac85e1b",
     "@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": "8f3c2ea41fcde0549235950da76316b2262c0a83"
+  "gitHead": "ac85e1b1a3db9eb903f585425b27c57c98a15e19"
 }

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

@@ -1,5 +1,6 @@
 import {
   CreditStatsV2,
+  formatNumber,
   PoolInfoV2,
   UnderlyingTokenInfo,
   usePoolSafeAllowanceV2,
@@ -11,7 +12,7 @@ import React, { useCallback, useState } from 'react'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setBorrowInfo } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ChooseAmountModal } from '../../ChooseAmountModal'
+import { InputAmountModal } from '../../InputAmountModal'
 import { LoadingModal } from '../../LoadingModal'
 
 type Props = {
@@ -65,15 +66,16 @@ export function ChooseAmount({
   }
 
   return (
-    <ChooseAmountModal
+    <InputAmountModal
       title='Borrow'
-      description1='Choose Amount'
-      sliderMax={creditAvailableFormatted}
-      currentAmount={currentAmount}
+      subTitle='Choose Amount'
       tokenSymbol={symbol}
+      currentAmount={currentAmount}
       handleChangeAmount={handleChangeAmount}
+      maxAmount={creditAvailableFormatted}
+      info={`${formatNumber(creditAvailableFormatted)} Available`}
       handleAction={handleAction}
-      actionText='borrow'
+      actionText='BORROW'
     />
   )
 }

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

@@ -1,4 +1,5 @@
 import {
+  formatNumber,
   PoolInfoV2,
   toBigNumber,
   UnderlyingTokenInfo,
@@ -12,7 +13,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setPaymentAmount, setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ChooseAmountModal } from '../../ChooseAmountModal'
+import { InputAmountModal } from '../../InputAmountModal'
 import { LoadingModal } from '../../LoadingModal'
 
 type Props = {
@@ -44,6 +45,15 @@ 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])
+
   useEffect(() => {
     setCurrentAmount(totalDueAmount)
     dispatch(setPaymentAmount({ paymentAmount: totalDueAmount }))
@@ -70,17 +80,17 @@ export function ChooseAmount({
   }
 
   return (
-    <ChooseAmountModal
+    <InputAmountModal
       title='Pay'
-      description1='Choose amount'
-      sliderMax={payoffAmount}
-      currentAmount={currentAmount}
+      subTitle='Enter Amount'
       tokenSymbol={symbol}
+      currentAmount={currentAmount}
       handleChangeAmount={handleChangeAmount}
+      maxAmount={payoffAmount}
+      maxAmountText='Pay Off'
+      info={`${formatNumber(totalDueAmount.toFixed(0))} Due`}
       handleAction={handleAction}
-      actionText='pay'
-      payoffAmount={payoffAmount}
-      hideTerms
+      actionText='PAY'
     />
   )
 }

package/src/components/CreditLine/paymentV2/index.tsx

@@ -42,7 +42,7 @@ export function CreditLinePaymentV2({
   const poolName = POOL_NAME[poolNameStr]
   const poolInfo = usePoolInfoV2(poolName, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [{ creditRecord, payoffAmount }] = useCreditStatsV2(
+  const [{ creditRecord, totalDueAmount, payoffAmount }] = useCreditStatsV2(
     poolName,
     account,
     provider,
@@ -78,7 +78,7 @@ export function CreditLinePaymentV2({
           poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
           payoffAmount={payoffAmount!}
-          totalDueAmount={creditRecord.totalPastDue}
+          totalDueAmount={totalDueAmount!}
         />
       )}
       {step === WIDGET_STEP.ApproveAllowance && (

package/src/components/CreditLine/supplyFLC/index.tsx

@@ -2,7 +2,7 @@ import {
   FirstLossCoverIndex,
   POOL_NAME,
   useFirstLossCoverAllowanceV2,
-  useFirstLossCoverRequirement,
+  useFirstLossCoverRequirementV2,
   usePoolInfoV2,
   usePoolUnderlyingTokenInfoV2,
 } from '@huma-finance/shared'
@@ -44,7 +44,7 @@ export function SupplyFirstLossCover({
   const poolInfo = usePoolInfoV2(poolName, chainId)
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [requirement] = useFirstLossCoverRequirement(
+  const [requirement] = useFirstLossCoverRequirementV2(
     poolName,
     FirstLossCoverIndex.borrower,
     account,

package/src/components/InputAmountModal.tsx

@@ -0,0 +1,129 @@
+import { Box, Button, css, TextField, useTheme } from '@mui/material'
+import React, { useState } from 'react'
+import { NumericFormat } from 'react-number-format'
+
+import { BottomButton } from './BottomButton'
+import { WrapperModal } from './WrapperModal'
+
+type Props = {
+  title: string
+  subTitle: string
+  actionText: string
+  tokenSymbol: string
+  currentAmount: number | string
+  maxAmount: number | string
+  maxAmountText?: string
+  info?: string
+  handleChangeAmount: (amount: number) => void
+  handleAction: () => void
+}
+
+export function InputAmountModal({
+  title,
+  subTitle,
+  actionText,
+  tokenSymbol,
+  currentAmount,
+  maxAmount,
+  maxAmountText = 'MAX',
+  info,
+  handleChangeAmount,
+  handleAction,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const [inputTouched, setInputTouched] = useState(false)
+  const suffix = ` ${tokenSymbol}`
+
+  const styles = {
+    inputAmountWrapper: css`
+      margin-bottom: ${theme.spacing(1)};
+      margin-top: ${theme.spacing(16)};
+    `,
+    inputAmount: css`
+      ${theme.cssMixins.rowSpaceBetweened};
+    `,
+    inputField: css`
+      input {
+        width: 100%;
+        color: ${theme.palette.text.primary};
+        font-family: 'Uni-Neue-Black';
+        font-size: 40px;
+        line-height: 133.4%;
+      }
+    `,
+    max: css`
+      display: flex;
+      min-width: fit-content;
+      justify-content: center;
+      align-items: center;
+      border-radius: 32px;
+      background: var(--Purple-3, #f7f1ff);
+      padding: 4px 10px;
+      gap: 8px;
+      color: var(--Purple-1, #b246ff);
+      font-family: 'Uni-Neue-Bold';
+      font-size: 13px;
+      line-height: 22px;
+      letter-spacing: 0.46px;
+    `,
+    info: css`
+      color: var(--Black-5, #6b6572);
+      font-family: 'Uni-Neue-Bold';
+      font-size: 20px;
+      line-height: 160%;
+      letter-spacing: 0.15px;
+    `,
+  }
+
+  const onChange = (
+    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => {
+    setInputTouched(true)
+    handleChangeAmount(
+      Number(event.target.value.replace(suffix, '').replaceAll(',', '')),
+    )
+  }
+
+  const setMaxAmount = () => {
+    handleChangeAmount(Number(maxAmount))
+  }
+
+  return (
+    <WrapperModal title={title} subTitle={subTitle}>
+      <Box css={styles.inputAmountWrapper}>
+        <Box css={styles.inputAmount}>
+          <NumericFormat
+            css={styles.inputField}
+            decimalScale={0}
+            onChange={onChange}
+            value={
+              !inputTouched && Number(currentAmount) === 0 ? '' : currentAmount
+            }
+            suffix={suffix}
+            thousandSeparator
+            customInput={TextField}
+            placeholder={`0${suffix}`}
+            variant='standard'
+            InputProps={{
+              endAdornment: (
+                <Button css={styles.max} onClick={setMaxAmount}>
+                  {maxAmountText}
+                </Button>
+              ),
+            }}
+          />
+        </Box>
+      </Box>
+
+      {info && <Box css={styles.info}>{info}</Box>}
+
+      <BottomButton
+        variant='contained'
+        onClick={handleAction}
+        disabled={Number(currentAmount) <= 0}
+      >
+        {actionText}
+      </BottomButton>
+    </WrapperModal>
+  )
+}

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

@@ -135,6 +135,7 @@ export function ChooseAction({
       )
       return
     }
+
     dispatch(setStep(WIDGET_STEP.ChooseAmount))
   }
 

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

@@ -1,10 +1,8 @@
 import {
-  formatMoney,
   getTrancheVaultContractV2,
   PoolInfoV2,
   UnderlyingTokenInfo,
 } from '@huma-finance/shared'
-import { Box, css, Slider, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
 import { BigNumber, ethers } from 'ethers'
 import React, { useEffect, useState } from 'react'
@@ -17,9 +15,8 @@ import {
   setStep,
 } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
-import { BottomButton } from '../../BottomButton'
+import { InputAmountModal } from '../../InputAmountModal'
 import { LoadingModal } from '../../LoadingModal'
-import { WrapperModal } from '../../WrapperModal'
 
 type Props = {
   poolInfo: PoolInfoV2
@@ -34,7 +31,6 @@ export function ChooseAmount({
   redemptionType,
   maxAmount,
 }: Props): React.ReactElement | null {
-  const theme = useTheme()
   const dispatch = useAppDispatch()
   const { provider } = useWeb3React()
   const { symbol } = poolUnderlyingToken
@@ -65,49 +61,7 @@ export function ChooseAmount({
     }
   }, [maxAmount, poolInfo.poolName, provider, redemptionActionInfo.tranche])
 
-  const styles = {
-    sliderWrapper: css`
-      margin-bottom: ${theme.spacing(1)};
-      margin-top: ${theme.spacing(14)};
-    `,
-    currentAmount: css`
-      font-size: 32px;
-      font-family: 'Uni-Neue-Bold';
-      text-align: center;
-      background: linear-gradient(233deg, #b246ff 4.17%, #ff6a8a 178.69%);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    `,
-    slider: css`
-      &.MuiSlider-root {
-        height: 8px !important;
-        color: #e9e9e9;
-      }
-      & .MuiSlider-track {
-        height: 8px !important;
-        background: linear-gradient(232.71deg, #a363f4 4.17%, #ff6a8a 178.69%);
-        border-radius: 8px;
-      }
-      & .MuiSlider-thumb::before {
-        background: #ffffff;
-        border: 1px solid #f9f9f9;
-        box-shadow: 1px 1px 12px 2px rgba(163, 100, 244, 0.6);
-        border-radius: 50px;
-        width: 24px;
-        height: 24px;
-      }
-    `,
-    shares: css`
-      color: ${theme.palette.text.primary};
-      font-family: 'Uni-Neue-Bold';
-      font-size: 20px;
-      line-height: 160%;
-      letter-spacing: 0.15px;
-    `,
-  }
-
-  const handleChangeAmount = (event: Event, newAmount: number | number[]) => {
+  const handleChangeAmount = (newAmount: number) => {
     const shares = Number(newAmount) / sharePrice
     setCurrentShares(shares)
     setCurrentAmount(Number(newAmount))
@@ -128,35 +82,20 @@ export function ChooseAmount({
   }
 
   return (
-    <WrapperModal
-      title={redemptionActionInfo.action}
+    <InputAmountModal
+      title={`${redemptionActionInfo.action} Redemption Request`}
       subTitle={
         redemptionActionInfo.action === 'Create'
-          ? `Select ${symbol} amount to redeem from ${redemptionActionInfo.tranche} tranche`
-          : `Select the amount of the redemption request in ${symbol} that you wish to cancel from the ${redemptionActionInfo.tranche} tranche`
+          ? `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`
       }
-    >
-      <Box css={styles.sliderWrapper}>
-        <Box css={styles.currentAmount}>
-          {formatMoney(currentAmount)} {poolUnderlyingToken.symbol}
-        </Box>
-        <Slider
-          max={Number(maxAmountFormatted)}
-          min={0}
-          css={styles.slider}
-          aria-label='Amount'
-          value={currentAmount}
-          onChange={handleChangeAmount}
-        />
-        <Box css={styles.shares}>{currentShares.toFixed(1)} Shares</Box>
-      </Box>
-      <BottomButton
-        variant='contained'
-        onClick={handleAction}
-        disabled={Number(currentAmount) <= 0}
-      >
-        SUBMIT
-      </BottomButton>
-    </WrapperModal>
+      tokenSymbol={symbol}
+      currentAmount={currentAmount}
+      handleChangeAmount={handleChangeAmount}
+      maxAmount={maxAmountFormatted}
+      info={`${currentShares.toFixed(1)} Shares`}
+      handleAction={handleAction}
+      actionText='SUBMIT'
+    />
   )
 }

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

@@ -48,6 +48,7 @@ export function ChooseAmount({
       : WIDGET_STEP.Transfer
     dispatch(setStep(step))
   }, [dispatch, needApprove])
+
   return (
     <ChooseAmountModal
       title={`Supply ${symbol}`}

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

@@ -2,9 +2,10 @@ import {
   PoolInfoV2,
   TrancheType,
   UnderlyingTokenInfo,
+  formatNumber,
   usePoolSafeAllowanceV2,
+  usePoolUnderlyingTokenBalanceV2,
 } from '@huma-finance/shared'
-import { Box, css, TextField, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
 import { BigNumber, ethers } from 'ethers'
 import React, { useState } from 'react'
@@ -12,9 +13,7 @@ import React, { useState } from 'react'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
-import { BottomButton } from '../../BottomButton'
-import { NumericFormatCustom } from '../../NumericFormatCustom'
-import { WrapperModal } from '../../WrapperModal'
+import { InputAmountModal } from '../../InputAmountModal'
 
 type Props = {
   poolInfo: PoolInfoV2
@@ -27,7 +26,6 @@ export function ChooseAmount({
   poolUnderlyingToken,
   selectedTranche,
 }: Props): React.ReactElement | null {
-  const theme = useTheme()
   const dispatch = useAppDispatch()
   const { account, provider } = useWeb3React()
   const { symbol, decimals } = poolUnderlyingToken
@@ -37,38 +35,17 @@ export function ChooseAmount({
     account,
     provider,
   )
-  const [inputTouched, setInputTouched] = useState(false)
-
-  const styles = {
-    inputAmountWrapper: css`
-      margin-bottom: ${theme.spacing(1)};
-      margin-top: ${theme.spacing(16)};
-    `,
-    inputAmount: css`
-      ${theme.cssMixins.rowSpaceBetweened};
-    `,
-    inputField: css`
-      input {
-        width: 100%;
-        color: ${theme.palette.text.primary};
-        font-family: 'Uni-Neue-Black';
-        font-size: 40px;
-        line-height: 133.4%;
-      }
-    `,
-    inputFieldSymbol: css`
-      color: ${theme.palette.text.primary};
-      font-family: 'Uni-Neue-Black';
-      font-size: 40px;
-      line-height: 133.4%;
-    `,
-  }
+  const [balance] = usePoolUnderlyingTokenBalanceV2(
+    poolInfo.poolName,
+    account,
+    provider,
+  )
+  const maxAmountFormatted = ethers.utils.formatUnits(
+    balance,
+    poolUnderlyingToken.decimals,
+  )
 
-  const handleChangeAmount = (
-    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-  ) => {
-    setInputTouched(true)
-    const newAmount = event.target.value
+  const handleChangeAmount = (newAmount: number) => {
     setCurrentAmount(newAmount)
     dispatch(setSupplyAmount(Number(newAmount)))
   }
@@ -85,38 +62,16 @@ export function ChooseAmount({
   }
 
   return (
-    <WrapperModal
+    <InputAmountModal
       title='Enter Amount'
       subTitle={`Supplying ${symbol} with ${selectedTranche}`}
-    >
-      <Box css={styles.inputAmountWrapper}>
-        <Box css={styles.inputAmount}>
-          <TextField
-            css={styles.inputField}
-            value={!inputTouched && currentAmount === 0 ? '' : currentAmount}
-            onChange={handleChangeAmount}
-            InputProps={{
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              inputComponent: NumericFormatCustom as any,
-              endAdornment: (
-                <Box component='span' css={styles.inputFieldSymbol}>
-                  {symbol}
-                </Box>
-              ),
-            }}
-            placeholder='0'
-            variant='standard'
-          />
-        </Box>
-      </Box>
-
-      <BottomButton
-        variant='contained'
-        onClick={handleAction}
-        disabled={Number(currentAmount) <= 0}
-      >
-        SUPPLY
-      </BottomButton>
-    </WrapperModal>
+      tokenSymbol={symbol}
+      currentAmount={currentAmount}
+      handleChangeAmount={handleChangeAmount}
+      maxAmount={maxAmountFormatted}
+      info={`${formatNumber(maxAmountFormatted)} Available`}
+      handleAction={handleAction}
+      actionText='SUPPLY'
+    />
   )
 }

package/src/components/NumericFormatCustom.tsx

@@ -4,13 +4,14 @@ import { NumericFormat, NumericFormatProps } from 'react-number-format'
 interface CustomProps {
   onChange: (event: { target: { name: string; value: string } }) => void
   name: string
+  suffix?: string
 }
 
 export const NumericFormatCustom = React.forwardRef<
   NumericFormatProps,
   CustomProps
 >((props, ref) => {
-  const { onChange, ...other } = props
+  const { onChange, suffix, ...other } = props
 
   return (
     <NumericFormat
@@ -26,6 +27,7 @@ export const NumericFormatCustom = React.forwardRef<
       }}
       thousandSeparator
       valueIsNumericString
+      suffix={suffix}
     />
   )
 })