diff --git a/advanced/dapps/chain-abstraction-demo/components/GiftDonutModalTrigger.tsx b/advanced/dapps/chain-abstraction-demo/components/GiftDonutModalTrigger.tsx
index 27a9e3bbf..3fcbb847a 100644
--- a/advanced/dapps/chain-abstraction-demo/components/GiftDonutModalTrigger.tsx
+++ b/advanced/dapps/chain-abstraction-demo/components/GiftDonutModalTrigger.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
import { Button } from "./ui/button";
import GiftDonutModal from "./GiftDonutModal";
import { GiftDonutModalViews } from "./gift-donut-modal-views";
-import { useWalletGetAssets } from "@/context/WalletAssetsProvider";
+import { useWalletGetAssets } from "@/hooks/useWalletGetAssets";
import { useAppKitNetwork } from "@reown/appkit/react";
import { supportedNetworks } from "@/data/EIP155Data";
diff --git a/advanced/dapps/chain-abstraction-demo/components/gift-donut-modal-views/CheckoutView.tsx b/advanced/dapps/chain-abstraction-demo/components/gift-donut-modal-views/CheckoutView.tsx
index 5f8d964c3..544682d63 100644
--- a/advanced/dapps/chain-abstraction-demo/components/gift-donut-modal-views/CheckoutView.tsx
+++ b/advanced/dapps/chain-abstraction-demo/components/gift-donut-modal-views/CheckoutView.tsx
@@ -6,7 +6,7 @@ import { Button } from "../ui/button";
import Image from "next/image";
import React from "react";
import { cn } from "@/lib/utils";
-import { ArrowRight, ChevronRight, X } from "lucide-react";
+import { AlertTriangle, ArrowRight, ChevronRight, X } from "lucide-react";
import CoinSVG from "../assets/CoinSVG";
import NetworkSVG from "../assets/NetworkSVG";
import {
@@ -39,18 +39,19 @@ function GiftDonutForm({
const selectedToken = giftDonutModalManager.getToken();
const selectedNetwork = giftDonutModalManager.getNetwork();
- const tokenBalance = giftDonutModalManager.getBalanceBySymbol(
- selectedToken.name,
- );
+ const tokenBalance = giftDonutModalManager.getBalanceBySymbol(selectedToken.name);
const maxDonutPurchasable = Math.trunc(parseFloat(tokenBalance) / 1.0);
+ // Allow any count >= 0.
const setDonutCount = (newCount: number) => {
if (newCount < 0) return;
- if (newCount > maxDonutPurchasable) return;
setCount(newCount);
giftDonutModalManager.setDonutCount(newCount);
};
+ // Check whether the selected count exceeds the available balance.
+ const isExceeded = count > maxDonutPurchasable;
+
return (
@@ -63,7 +64,7 @@ function GiftDonutForm({
-
+
Donut #1
@@ -74,7 +75,6 @@ function GiftDonutForm({
variant="link"
size="sm"
onClick={() => setDonutCount(maxDonutPurchasable)}
- disabled={count >= maxDonutPurchasable}
className="text-xs h-auto p-0 text-secondary hover:text-primary"
>
Max: {maxDonutPurchasable}
@@ -98,12 +98,12 @@ function GiftDonutForm({
onClick={() => setDonutCount(count + 1)}
style={{ backgroundColor: "var(--tertiary-foreground)" }}
className="h-8 w-8 rounded-full p-0"
- disabled={count >= maxDonutPurchasable}
>
+
+ {/* Removed inline error message block */}
@@ -147,8 +146,7 @@ function GiftDonutForm({
@@ -179,28 +177,47 @@ function GiftDonutForm({
+ {/* Total Section Updated with Tooltip and Warning Icon */}
Total
-
- ${(count * 1.0).toFixed(2)}
-
+ {isExceeded ? (
+
+
+
+
+
+
+ ${(count * 1.0).toFixed(2)}
+
+
+ Warning: Your selected count exceeds your token balance
+
+
+
+
+ ) : (
+
+ ${(count * 1.0).toFixed(2)}
+
+ )}