feat(dapp): add balance validation to auctions (#400)

KeitoTadashi · evavirseda · web-flow · commit c45a9c926030 · 2025-07-22T17:33:45.000+02:00
* feat(dapp): add balance validation to auctions

* feat(dapp): move balance validation to a hook

* fix validation

* comments

* fix balance validation

---------

Co-authored-by: evavirseda &lt;evirseda@boxfish.studio&gt;
diff --git a/dapp/src/auctions/components/dialogs/AuctionBidDialog.tsx b/dapp/src/auctions/components/dialogs/AuctionBidDialog.tsx
@@ -34,7 +34,13 @@ import { useAuctionBid } from '@/auctions/hooks/useAuctionBid';
 import { useCountdown } from '@/auctions/hooks/useCountdown';
 import { useGetAuctionMetadata } from '@/auctions/hooks/useGetAuctionMetadata';
 import { formatTimeRemaining, getTimeRemaining, getUserAuctionStatus } from '@/auctions/lib/utils';
-import { NameRecordData, queryKey, useNameRecord } from '@/hooks';
+import { NameRecordData, queryKey, useBalanceValidation, useNameRecord } from '@/hooks';
+import {
+    GAS_BALANCE_TOO_LOW_ID,
+    GAS_BUDGET_ERROR_MESSAGES,
+    INSUFFICIENT_COIN_BALANCE_ID,
+    NOT_ENOUGH_BALANCE_ID,
+} from '@/lib/constants';
 import { formatNanosToIota } from '@/lib/utils';
 import { toNanos } from '@/lib/utils/amount';
 import { formatExpirationDate } from '@/lib/utils/format/formatExpirationDate';
@@ -76,11 +82,17 @@ export function AuctionBidDialog({ name, closeDialog, onCompleted }: AuctionBidD
         data: auctionBidTransaction,
         isLoading: isAuctionBidLoading,
         isPending: isAuctionBidPending,
-        error,
+        error: auctionError,
     } = useAuctionBid({
         name,
         bidNanos: bidNanos ?? BigInt(0),
     });
+
+    const { data: balanceValidation, error: balanceValidationError } = useBalanceValidation(
+        auctionBidTransaction?.builtTx ?? null,
+        Number(bidNanos),
+    );
+
     const { mutateAsync: signAndExecuteTransaction, isPending: isSendingTransaction } =
         useSignAndExecuteTransaction();
 
@@ -104,6 +116,11 @@ export function AuctionBidDialog({ name, closeDialog, onCompleted }: AuctionBidD
         },
     });
 
+    const hasEnoughGas =
+        !balanceValidationError?.message.includes(NOT_ENOUGH_BALANCE_ID) &&
+        !balanceValidationError?.message.includes(GAS_BALANCE_TOO_LOW_ID) &&
+        !balanceValidationError?.message.includes(INSUFFICIENT_COIN_BALANCE_ID);
+
     const status = auctionMetadata && getUserAuctionStatus(auctionMetadata, account?.address || '');
     const timeRemainingMs = auctionMetadata && getTimeRemaining(auctionMetadata);
     const { milliseconds } = useCountdown(timeRemainingMs || 0);
@@ -114,7 +131,12 @@ export function AuctionBidDialog({ name, closeDialog, onCompleted }: AuctionBidD
     const isLoading =
         isNameRecordLoading || isAuctionBidLoading || isSendingTransaction || isSigningTransaction;
     const isPending = isAuctionBidPending;
-    const disablePlaceBid = isPending || isLoading || isBidBelowMinimum;
+    const disablePlaceBid =
+        isPending ||
+        isLoading ||
+        isBidBelowMinimum ||
+        !balanceValidation?.hasBalance ||
+        !hasEnoughGas;
 
     const formattedTimeRemaining = formatTimeRemaining(milliseconds);
     const currentBid = auctionMetadata
@@ -143,8 +165,12 @@ export function AuctionBidDialog({ name, closeDialog, onCompleted }: AuctionBidD
             return `The value exceeds the maximum decimals (${IOTA_DECIMALS}).`;
         } else if (isBidBelowMinimum) {
             return `Bid must be ≥ ${minBidLabel}`;
-        } else if (error) {
-            return error.message;
+        } else if (!hasEnoughGas) {
+            return GAS_BUDGET_ERROR_MESSAGES[NOT_ENOUGH_BALANCE_ID];
+        } else if (auctionError) {
+            return auctionError.message;
+        } else if (balanceValidationError) {
+            return balanceValidationError.message;
         }
     })();
 
@@ -193,7 +219,7 @@ export function AuctionBidDialog({ name, closeDialog, onCompleted }: AuctionBidD
                                 </div>
                             )}
                             <Input
-                                type={InputType.Number}
+                                type={InputType.NumericFormat}
                                 label="Your Bid"
                                 min={Number(minBidNanos)}
                                 value={bidAmountValue}
@@ -226,7 +252,7 @@ export function AuctionBidDialog({ name, closeDialog, onCompleted }: AuctionBidD
                                     text={auctionMetadata ? 'Bid' : 'Start auction'}
                                     onClick={() => {
                                         if (auctionBidTransaction) {
-                                            handleConfirm(auctionBidTransaction);
+                                            handleConfirm(auctionBidTransaction.transaction);
                                         }
                                     }}
                                     fullWidth
diff --git a/dapp/src/auctions/hooks/useAuctionBid.ts b/dapp/src/auctions/hooks/useAuctionBid.ts
@@ -61,10 +61,13 @@ export function useAuctionBid({ name, bidNanos }: UseActionBidParams) {
                       name,
                   );
 
-            await transaction.build({
+            const tx = await transaction.build({
                 client: iotaClient,
             });
-            return transaction;
+            return {
+                transaction,
+                builtTx: tx,
+            };
         },
         enabled: enableAuctionBid,
     });
diff --git a/dapp/src/components/dialogs/PurchaseNameDialog.tsx b/dapp/src/components/dialogs/PurchaseNameDialog.tsx
@@ -3,6 +3,7 @@
 
 'use client';
 
+import { Warning } from '@iota/apps-ui-icons';
 import {
     Button,
     ButtonType,
@@ -13,6 +14,9 @@ import {
     DialogPosition,
     DisplayStats,
     Header,
+    InfoBox,
+    InfoBoxStyle,
+    InfoBoxType,
     LoadingIndicator,
     Panel,
     Select,
@@ -23,8 +27,7 @@ import { normalizeIotaName } from '@iota/iota-names-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 
-import { NameUpdate, queryKey, useUpdateNameTransaction } from '@/hooks';
-import { useBalance } from '@/hooks/useBalance';
+import { NameUpdate, queryKey, useBalanceValidation, useUpdateNameTransaction } from '@/hooks';
 import { useCoreConfig } from '@/hooks/useCoreConfig';
 import { useNameRecord } from '@/hooks/useNameRecord';
 import {
@@ -86,11 +89,14 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
         updates: updates,
     });
 
+    const { data: balanceValidation, error: balanceValidationError } = useBalanceValidation(
+        updateNameData?.builtTx ?? null,
+        price,
+    );
+
     const { mutateAsync: signAndExecuteTransaction, isPending: isSendingTransaction } =
         useSignAndExecuteTransaction();
 
-    const { data: coinBalance, error: coinBalanceError } = useBalance(account?.address ?? '');
-
     const {
         mutateAsync: handlePurchase,
         error: purchaseError,
@@ -130,19 +136,17 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
           }))
         : [];
 
-    const totalBalance = Number(coinBalance?.totalBalance) || 0;
-    const totalGas = Number(updateNameData?.gasSummary?.totalGas) || 0;
-    const totalPrice = nameRecordData?.type === 'available' ? nameRecordData.price + totalGas : 0;
-    const hasBalance = totalBalance > totalPrice;
-
     const hasEnoughGas =
         !updateNameError?.message.includes(NOT_ENOUGH_BALANCE_ID) &&
         !updateNameError?.message.includes(GAS_BALANCE_TOO_LOW_ID);
 
     const canPay =
-        isConnected && hasEnoughGas && hasBalance && nameRecordData?.type === 'available';
+        isConnected &&
+        hasEnoughGas &&
+        balanceValidation?.hasBalance &&
+        nameRecordData?.type === 'available';
 
-    const hasErrors = updateNameError || coinBalanceError || purchaseError;
+    const hasErrors = updateNameError || balanceValidationError || purchaseError;
 
     const isLoading = isNameRecordLoading || isUpdateNameLoading || isSigning;
 
@@ -186,12 +190,63 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
                                 </div>
                             </Panel>
                             <div className="flex flex-row gap-x-sm w-full">
-                                <DisplayStats label="Registration Expires" value={expirationDate} />
-                                <DisplayStats
-                                    label="Total Due"
-                                    value={formatNanosToIota(totalPrice)}
-                                />
+                                {!isLoading &&
+                                    balanceValidation &&
+                                    typeof balanceValidation?.totalPrice === 'number' &&
+                                    balanceValidation.totalPrice > 0 && (
+                                        <>
+                                            <DisplayStats
+                                                label="Registration Expires"
+                                                value={expirationDate}
+                                            />
+                                            <DisplayStats
+                                                label="Total Due"
+                                                value={formatNanosToIota(
+                                                    balanceValidation.totalPrice,
+                                                )}
+                                            />
+                                        </>
+                                    )}
                             </div>
+
+                            {!hasEnoughGas && (
+                                <InfoBox
+                                    title="Error"
+                                    supportingText={
+                                        GAS_BUDGET_ERROR_MESSAGES[GAS_BALANCE_TOO_LOW_ID]
+                                    }
+                                    icon={<Warning />}
+                                    type={InfoBoxType.Error}
+                                    style={InfoBoxStyle.Default}
+                                />
+                            )}
+                            {purchaseError && (
+                                <InfoBox
+                                    title="Error"
+                                    supportingText={purchaseError.message}
+                                    icon={<Warning />}
+                                    type={InfoBoxType.Error}
+                                    style={InfoBoxStyle.Default}
+                                />
+                            )}
+                            {nameRecordError && (
+                                <InfoBox
+                                    title="Error"
+                                    supportingText={nameRecordError.message}
+                                    icon={<Warning />}
+                                    type={InfoBoxType.Error}
+                                    style={InfoBoxStyle.Default}
+                                />
+                            )}
+                            {hasEnoughGas && updateNameError && (
+                                <InfoBox
+                                    title="Error"
+                                    supportingText={updateNameError.message}
+                                    icon={<Warning />}
+                                    type={InfoBoxType.Error}
+                                    style={InfoBoxStyle.Default}
+                                />
+                            )}
                             <div className="flex w-full flex-row gap-x-xs mt-xs">
                                 <Button
                                     type={ButtonType.Secondary}
@@ -209,26 +264,6 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
                                 />
                             </div>
                         </div>
-                        {!hasEnoughGas && (
-                            <div className="text-center text-red-400 text-sm">
-                                {GAS_BUDGET_ERROR_MESSAGES[GAS_BALANCE_TOO_LOW_ID]}
-                            </div>
-                        )}
-                        {purchaseError && (
-                            <div className="text-center text-red-400 text-sm">
-                                {purchaseError.message}
-                            </div>
-                        )}
-                        {nameRecordError && (
-                            <div className="text-center text-red-400 text-sm">
-                                {nameRecordError.message}
-                            </div>
-                        )}
-                        {hasEnoughGas && updateNameError && (
-                            <div className="text-center text-red-400 text-sm">
-                                {updateNameError.message}
-                            </div>
-                        )}
                     </div>
                 </DialogBody>
             </DialogContent>
diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts
@@ -10,3 +10,4 @@ export * from './usePriceList';
 export * from './queryKey';
 export * from './useGetDefaultName';
 export * from './useUpdateNameTransaction';
+export * from './useBalanceValidation';
diff --git a/dapp/src/hooks/useBalanceValidation.ts b/dapp/src/hooks/useBalanceValidation.ts
@@ -0,0 +1,55 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useCurrentAccount, useIotaClient } from '@iota/dapp-kit';
+import { useQuery } from '@tanstack/react-query';
+
+import { getGasSummary } from '@/lib/utils/getGasSummary';
+
+import { useBalance } from './useBalance';
+
+export function useBalanceValidation(
+    builtTx: Uint8Array<ArrayBufferLike> | null,
+    price: number | null,
+) {
+    const client = useIotaClient();
+    const account = useCurrentAccount();
+    const { data: coinBalance, error: coinBalanceError } = useBalance(account?.address ?? '');
+    return useQuery({
+        queryKey: [builtTx, price, client, coinBalance, coinBalanceError, account?.address],
+        queryFn: async () => {
+            if (!builtTx || !price) {
+                return {
+                    totalGas: 0,
+                    totalPrice: 0,
+                    hasBalance: false,
+                    gasSummary: '',
+                    coinBalanceError: undefined,
+                };
+            }
+            const txDryRun = await client.dryRunTransactionBlock({
+                transactionBlock: builtTx,
+            });
+            const totalGas = Number(getGasSummary(txDryRun)?.totalGas);
+            const totalPrice = Number(price) + totalGas;
+            const totalBalance = Number(coinBalance?.totalBalance);
+            const hasBalance = totalBalance > totalPrice;
+            return {
+                totalGas,
+                totalPrice,
+                hasBalance,
+                coinBalanceError,
+            };
+        },
+        enabled: !!price && price > 0,
+        gcTime: 0,
+        select: ({ totalGas, totalPrice, hasBalance, coinBalanceError }) => {
+            return {
+                totalGas,
+                totalPrice,
+                hasBalance,
+                coinBalanceError,
+            };
+        },
+    });
+}
diff --git a/dapp/src/hooks/useUpdateNameTransaction.ts b/dapp/src/hooks/useUpdateNameTransaction.ts
@@ -173,15 +173,17 @@ export function useUpdateNameTransaction({ address, updates }: UseUpdateNameTran
             });
             return {
                 transaction: iotaNamesTx.transaction,
+                builtTx: transaction,
                 txDryRun,
             };
         },
         enabled: !!address && !!updates.length,
         gcTime: 0,
-        select: ({ transaction, txDryRun }) => {
+        select: ({ transaction, txDryRun, builtTx }) => {
             return {
                 transaction,
                 gasSummary: getGasSummary(txDryRun),
+                builtTx,
             };
         },
     });
diff --git a/dapp/src/lib/constants/errorMessages.constants.ts b/dapp/src/lib/constants/errorMessages.constants.ts
@@ -3,6 +3,7 @@
 
 export const GAS_BALANCE_TOO_LOW_ID = 'GasBalanceTooLow';
 export const NOT_ENOUGH_BALANCE_ID = 'No valid gas coins found';
+export const INSUFFICIENT_COIN_BALANCE_ID = 'InsufficientCoinBalance';
 
 export const GAS_BUDGET_ERROR_MESSAGES = {
     [GAS_BALANCE_TOO_LOW_ID]: 'Not enough balance to cover transaction fees.',
