@huma-finance/widgets 0.0.48-v2.278 → 0.0.48-v2.296

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/Lend/supplyV2/index.tsx

@@ -1,6 +1,8 @@
 import {
   POOL_NAME,
   TrancheType,
+  openInNewTab,
+  useLenderApprovedV2,
   usePoolInfoV2,
   usePoolUnderlyingTokenInfoV2,
 } from '@huma-finance/shared'
@@ -42,19 +44,66 @@ export function LendSupplyV2({
 }: LendSupplyPropsV2): React.ReactElement | null {
   const dispatch = useDispatch()
   const poolName = POOL_NAME[poolNameStr]
-  const { chainId, provider } = useWeb3React()
+  const { chainId, provider, account } = useWeb3React()
   const poolInfo = usePoolInfoV2(poolName, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
   const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
 
+  const [lenderApprovedSenior] = useLenderApprovedV2(
+    poolName,
+    'senior',
+    account,
+    provider,
+  )
+  const [lenderApprovedJunior] = useLenderApprovedV2(
+    poolName,
+    'junior',
+    account,
+    provider,
+  )
+
+  const lenderApproveStatusFetched =
+    lenderApprovedSenior !== undefined && lenderApprovedJunior !== undefined
+
   useEffect(() => {
-    if (!step) {
-      dispatch(setStep(WIDGET_STEP.ChooseTranche))
+    if (!step && poolInfo && lenderApproveStatusFetched) {
+      if (lenderApprovedJunior && !lenderApprovedSenior) {
+        setSelectedTranche('junior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (lenderApprovedSenior && !lenderApprovedJunior) {
+        setSelectedTranche('senior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (lenderApprovedJunior && lenderApprovedSenior) {
+        dispatch(setStep(WIDGET_STEP.ChooseTranche))
+        return
+      }
+
+      if (poolInfo.KYC) {
+        dispatch(setStep(WIDGET_STEP.Evaluation))
+        return
+      }
+
+      if (poolInfo.supplyLink) {
+        openInNewTab(poolInfo.supplyLink)
+      }
     }
-  }, [dispatch, step])
+  }, [
+    dispatch,
+    lenderApproveStatusFetched,
+    lenderApprovedJunior,
+    lenderApprovedSenior,
+    poolInfo,
+    step,
+  ])
 
-  if (!poolInfo || !poolUnderlyingToken) {
+  if (!poolInfo || !poolUnderlyingToken || !lenderApproveStatusFetched) {
     return (
       <WidgetWrapper
         isOpen
@@ -75,7 +124,6 @@ export function LendSupplyV2({
     >
       {step === WIDGET_STEP.ChooseTranche && (
         <ChooseTranche
-          poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
           selectedTranche={selectedTranche}
           changeTranche={setSelectedTranche}

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}
     />
   )
 })

package/src/components/ReceivableBackedCreditLine/borrow/5-Success.tsx

@@ -1,5 +1,6 @@
 import {
   CreditStatsV2,
+  formatNumber,
   timeUtil,
   UnderlyingTokenInfo,
 } from '@huma-finance/shared'
@@ -27,7 +28,7 @@ export function Success({
   const dueDate = timeUtil.timestampToLL(creditRecord?.nextDueDate.toNumber())
 
   const content = [
-    `${borrowAmountNet} ${symbol} is now in your wallet.`,
+    `${formatNumber(borrowAmountNet)} ${symbol} is now in your wallet.`,
     `Note: your payment will be automatically deducted on ${dueDate}.`,
   ]
 

package/src/components/ReceivableBackedCreditLine/payment/7-Success.tsx

@@ -1,7 +1,7 @@
 import {
   decodeLogs,
   downScale,
-  formatMoney,
+  formatNumber,
   TRANSFER_ABI,
   UnderlyingTokenInfo,
 } from '@huma-finance/shared'
@@ -37,12 +37,12 @@ export function Success({
     }
   }, [decimals, successTxReceipt])
 
-  const amoutFormatted = formatMoney(paidAmount)
+  const amountFormatted = formatNumber(paidAmount)
   const content =
     paymentType === PaymentType.PaymentWithReceivable
-      ? [`You successfully paid ${amoutFormatted} ${symbol}.`]
+      ? [`You successfully paid ${amountFormatted} ${symbol}.`]
       : [
-          `You successfully paid ${amoutFormatted} ${symbol} and borrowed ${amoutFormatted} ${symbol}.`,
+          `You successfully paid ${amountFormatted} ${symbol} and borrowed ${amountFormatted} ${symbol}.`,
         ]
 
   return <TxDoneModal handleAction={handleAction} content={content} />

package/src/components/StreamFactoring/borrow/7-Success.tsx

@@ -1,4 +1,6 @@
+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'
@@ -11,7 +13,7 @@ export function Success({ handleAction }: Props): React.ReactElement {
   const { borrowAmount, approval } = useAppSelector(selectWidgetState)
 
   const content = [
-    `${borrowAmount?.toFixed(2)} ${
+    `${formatNumber(borrowAmount)} ${
       approval?.token.symbol
     } is now in your wallet.`,
   ]