feat: add form error when user doesn't have enough balance to buy cre…

…dits
regen-network · Oct 10, 2024 · 6eb76bf · 6eb76bf
1 parent cde9ef2
commit 6eb76bf
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 6 deletions.
diff --git a/web-marketplace/src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx b/web-marketplace/src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx
@@ -350,7 +350,7 @@ const BuyCreditsModal: React.FC<React.PropsWithChildren<BuyCreditsModalProps>> =
  bankDenom: selectedSellOrder?.askDenom ?? '',
  baseDenom: selectedSellOrder?.askBaseDenom,
  }),
- userBalance,
+ userBalance: userBalance || 0,
  _,
  })}
  />

diff --git a/web-marketplace/src/components/organisms/BuyCreditsModal/hooks/useFetchUserBalance.tsx b/web-marketplace/src/components/organisms/BuyCreditsModal/hooks/useFetchUserBalance.tsx
@@ -9,12 +9,16 @@ import { UISellOrderInfo } from 'pages/Projects/AllProjects/AllProjects.types';
 
 interface Params {
  selectedSellOrder?: UISellOrderInfo;
+ askDenom?: string;
 }
 
-export const useFetchUserBalance = ({ selectedSellOrder }: Params): number => {
+export const useFetchUserBalance = ({
+ selectedSellOrder,
+ askDenom,
+}: Params): number | null => {
  const { wallet } = useWallet();
  const { bankClient } = useLedger();
- const { data: allBalancesData } = useQuery(
+ const { data: allBalancesData, isLoading } = useQuery(
  getAllBalancesQuery({
  request: { address: wallet?.address },
  client: bankClient,
@@ -25,10 +29,13 @@ export const useFetchUserBalance = ({ selectedSellOrder }: Params): number => {
  const userBalance = useMemo(
  () =>
  allBalancesData?.balances.find(
- balance => balance.denom === selectedSellOrder?.askDenom,
+ balance => balance.denom === selectedSellOrder?.askDenom || askDenom,
  )?.amount,
- [allBalancesData?.balances, selectedSellOrder?.askDenom],
+ [allBalancesData?.balances, selectedSellOrder?.askDenom, askDenom],
  );
 
+ if (isLoading) {
+ return null;
+ }
  return userBalance ? Number(userBalance) : 0;
 };
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx
@@ -3,3 +3,4 @@ import { msg } from '@lingui/macro';
 export const MAX_AMOUNT = msg`Amount cannot exceed`;
 export const MAX_CREDITS = msg`Credits cannot exceed`;
 export const POSITIVE_NUMBER = msg`Must be positive`;
+export const NOT_ENOUGH_BALANCE = msg`You don’t have enough`;
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema.tsx
@@ -11,15 +11,18 @@ import { z } from 'zod';
 import {
  MAX_AMOUNT,
  MAX_CREDITS,
+ NOT_ENOUGH_BALANCE,
  POSITIVE_NUMBER,
 } from './ChooseCreditsForm.constants';
 
 export const createChooseCreditsFormSchema = ({
  creditsAvailable,
  spendingCap,
+ userBalance,
 }: {
  creditsAvailable: number;
  spendingCap: number;
+ userBalance: number;
 }) => {
  return z.object({
  [CURRENCY_AMOUNT]: z.coerce
@@ -31,7 +34,8 @@ export const createChooseCreditsFormSchema = ({
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
  })}`,
- ),
+ )
+ .max(userBalance, `${i18n._(NOT_ENOUGH_BALANCE)}`),
  [CREDITS_AMOUNT]: z.coerce
  .number()
  .positive(i18n._(POSITIVE_NUMBER))

diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.tsx
@@ -18,12 +18,15 @@ import { Loading } from 'web-components/src/components/loading';
 import { PrevNextButtons } from 'web-components/src/components/molecules/PrevNextButtons/PrevNextButtons';
 import { UseStateSetter } from 'web-components/src/types/react/useState';
 
+import { microToDenom } from 'lib/denom.utils';
+
 import { NEXT, PAYMENT_OPTIONS } from 'pages/BuyCredits/BuyCredits.constants';
 import { PaymentOptionsType } from 'pages/BuyCredits/BuyCredits.types';
 import { UISellOrderInfo } from 'pages/Projects/AllProjects/AllProjects.types';
 import { Currency } from 'components/molecules/CreditsAmount/CreditsAmount.types';
 import { AllowedDenoms } from 'components/molecules/DenomLabel/DenomLabel.utils';
 
+import { useFetchUserBalance } from '../BuyCreditsModal/hooks/useFetchUserBalance';
 import { CryptoOptions } from './ChooseCreditsForm.CryptoOptions';
 import { PaymentOptions } from './ChooseCreditsForm.PaymentOptions';
 import {
@@ -99,11 +102,15 @@ export function ChooseCreditsForm({
 
  const [spendingCap, setSpendingCap] = useState(0);
  const [creditsAvailable, setCreditsAvailable] = useState(0);
+ // A big number here avoids the NOT_ENOUGH_BALANCE error on rendering
+ // the form until the actual user balance is fetched
+ const [userBalance, setUserBalance] = useState(10101010101010101);
 
  const form = useZodForm({
  schema: createChooseCreditsFormSchema({
  creditsAvailable,
  spendingCap,
+ userBalance,
  }),
  defaultValues: {
  [CURRENCY_AMOUNT]: initialValues?.[CURRENCY_AMOUNT] || 0,
@@ -127,6 +134,17 @@ export function ChooseCreditsForm({
  name: CURRENCY,
  });
 
+ const microUserBalance = useFetchUserBalance({
+ askDenom: currency?.askDenom,
+ });
+
+ useEffect(() => {
+ if (microUserBalance) {
+ const _userBalance = microToDenom(microUserBalance);
+ setUserBalance(_userBalance);
+ }
+ }, [microUserBalance, userBalance]);
+
  const filteredCryptoSellOrders = useMemo(
  () =>
  getFilteredCryptoSellOrders({