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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.48-v2.278+0bbf0c0",
+  "version": "0.0.48-v2.296+a164927",
   "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-v2.278+0bbf0c0",
-    "@huma-finance/shared": "^0.0.48-v2.278+0bbf0c0",
+    "@huma-finance/sdk": "^0.0.48-v2.296+a164927",
+    "@huma-finance/shared": "^0.0.48-v2.296+a164927",
     "@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": "0bbf0c0272ed00be64f4d1a2c7299287d18cf08f"
+  "gitHead": "a1649276102423ab6203cd72cf131f448a385cac"
 }

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

@@ -1,4 +1,9 @@
-import { CreditRecordType, PoolInfoType, timeUtil } from '@huma-finance/shared'
+import {
+  CreditRecordType,
+  PoolInfoType,
+  formatNumber,
+  timeUtil,
+} from '@huma-finance/shared'
 import React from 'react'
 
 import { useAppSelector } from '../../../hooks/useRedux'
@@ -24,7 +29,7 @@ export function Success({
   const dueDate = timeUtil.timestampToLL(creditRecord?.dueDate.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/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/borrowV2/4-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/CreditLine/payment/4-Success.tsx

@@ -1,7 +1,7 @@
 import {
   decodeLogs,
   downScale,
-  formatMoney,
+  formatNumber,
   PoolInfoType,
   sendTxAtom,
   TRANSFER_ABI,
@@ -32,7 +32,7 @@ export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
   }, [decimals, txReceipt])
 
   const content = [
-    `You successfully paid ${formatMoney(payedAmount)} ${symbol}.`,
+    `You successfully paid ${formatNumber(payedAmount)} ${symbol}.`,
   ]
 
   return <TxDoneModal handleAction={handleAction} content={content} />

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/4-Success.tsx

@@ -1,7 +1,7 @@
 import {
   decodeLogs,
   downScale,
-  formatMoney,
+  formatNumber,
   sendTxAtom,
   TRANSFER_ABI,
   UnderlyingTokenInfo,
@@ -35,7 +35,7 @@ export function Success({
   }, [decimals, txReceipt])
 
   const content = [
-    `You successfully paid ${formatMoney(paidAmount)} ${symbol}.`,
+    `You successfully paid ${formatNumber(paidAmount)} ${symbol}.`,
   ]
 
   return <TxDoneModal handleAction={handleAction} content={content} />

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/InvoiceFactoring/borrow/6-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'
@@ -12,7 +14,9 @@ export function Success({ handleAction }: Props): React.ReactElement {
     useAppSelector(selectWidgetState)
 
   const content = [
-    `${borrowAmountNet} ${approval?.token.symbol} is now in your wallet.`,
+    `${formatNumber(borrowAmountNet)} ${
+      approval?.token.symbol
+    } is now in your wallet.`,
     `The remaining ${remainder} ${approval?.token.symbol} will be sent to your wallet when the invoice is paid.`,
   ]
 

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`
-          : `Cancel ${symbol} amount from ${redemptionActionInfo.tranche} tranche redemption request`
+          ? `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/1-ChooseTranche.tsx

@@ -1,10 +1,4 @@
-import {
-  openInNewTab,
-  PoolInfoV2,
-  TrancheType,
-  UnderlyingTokenInfo,
-  useLenderApprovedV2,
-} from '@huma-finance/shared'
+import { TrancheType, UnderlyingTokenInfo } from '@huma-finance/shared'
 import {
   css,
   FormControl,
@@ -14,7 +8,6 @@ import {
   RadioGroup,
   useTheme,
 } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
 import React from 'react'
 
 import { useAppDispatch } from '../../../hooks/useRedux'
@@ -22,39 +15,20 @@ import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { BottomButton } from '../../BottomButton'
 import { WrapperModal } from '../../WrapperModal'
-import { LoadingModal } from '../../LoadingModal'
 
 type Props = {
-  poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
   selectedTranche: TrancheType | undefined
   changeTranche: (tranche: TrancheType) => void
 }
 
 export function ChooseTranche({
-  poolInfo,
   poolUnderlyingToken,
   selectedTranche,
   changeTranche,
 }: Props): React.ReactElement | null {
   const theme = useTheme()
-  const { poolName } = poolInfo
   const dispatch = useAppDispatch()
-  const { account, provider } = useWeb3React()
-  const [lenderApprovedSenior] = useLenderApprovedV2(
-    poolName,
-    'senior',
-    account,
-    provider,
-  )
-  const [lenderApprovedJunior] = useLenderApprovedV2(
-    poolName,
-    'junior',
-    account,
-    provider,
-  )
-  const isLoading =
-    lenderApprovedSenior === undefined || lenderApprovedJunior === undefined
 
   const styles = {
     subTitle: css`
@@ -84,16 +58,7 @@ export function ChooseTranche({
   }
 
   const handleNext = () => {
-    if (
-      (selectedTranche === 'senior' && lenderApprovedSenior) ||
-      (selectedTranche === 'junior' && lenderApprovedJunior)
-    ) {
-      dispatch(setStep(WIDGET_STEP.ChooseAmount))
-    } else if (poolInfo.KYC) {
-      dispatch(setStep(WIDGET_STEP.Evaluation))
-    } else if (poolInfo.supplyLink) {
-      openInNewTab(poolInfo.supplyLink)
-    }
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
   }
 
   const items: {
@@ -110,10 +75,6 @@ export function ChooseTranche({
     },
   ]
 
-  if (isLoading) {
-    return <LoadingModal title={`Supply ${poolUnderlyingToken.symbol}`} />
-  }
-
   return (
     <WrapperModal title={`Supply ${poolUnderlyingToken.symbol}`}>
       <FormControl>