chore: handing donut increment, token selection

reown-com · Feb 3, 2025 · f3323ca · f3323ca
1 parent c468be8
commit f3323ca
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
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
@@ -9,6 +9,8 @@ import { cn } from "@/lib/utils";
 import { ArrowRight, ChevronRight, X } from "lucide-react";
 import CoinSVG from "../assets/CoinSVG";
 import NetworkSVG from "../assets/NetworkSVG";
+import { useWalletAssets } from "@/context/WalletAssetsProvider";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 
 function CheckoutView({ onViewChange, onClose }: GiftDonutModalViewProps) {
   return (
@@ -29,13 +31,18 @@ function GiftDonutForm({
   onClose,
 }: GiftDonutFormProps) {
   const donutCount = giftDonutModalManager.getDonutCount();
+  const {getBalanceBySymbol} = useWalletAssets();
   const [count, setCount] = React.useState(donutCount);
 
   const selectedToken = giftDonutModalManager.getToken();
   const selectedNetwork = giftDonutModalManager.getNetwork();
-
+  const tokenBalance = getBalanceBySymbol(selectedToken.name);
+  const maxDonutPurchasable = Math.trunc(parseFloat(tokenBalance) / 1.00);
+
   const setDonutCount = (count: number) => {
     if (count < 0) return;
+    const balance = getBalanceBySymbol(selectedToken.name);
+    if (count > parseFloat(balance)) return;
     setCount(count);
     giftDonutModalManager.setDonutCount(count);
   };
@@ -69,14 +76,24 @@ function GiftDonutForm({
                   -
                 </Button>
                 {count}
-                <Button
-                  variant="outline"
-                  onClick={() => setDonutCount(count + 1)}
-                  style={{ backgroundColor: "var(--tertiary-foreground)" }}
-                  className="ml-2 rounded-full "
-                >
-                  +
-                </Button>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="outline"
+                        onClick={() => setDonutCount(count + 1)}
+                        style={{ backgroundColor: "var(--tertiary-foreground)" }}
+                        className="ml-2 rounded-full "
+                      >
+                        +
+                      </Button>
+                </TooltipTrigger>
+                  <TooltipContent >
+                    <p>Maximum donuts you can gift: {maxDonutPurchasable}</p>
+                    <p className="text-xs">Available: {tokenBalance} {selectedToken.name}</p>
+                  </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               </div>
             </div>
           </div>

diff --git a/advanced/dapps/chain-abstraction-demo/controllers/GiftDonutModalManager.ts b/advanced/dapps/chain-abstraction-demo/controllers/GiftDonutModalManager.ts
@@ -44,7 +44,7 @@ class GiftDonutModalManager {
       views: {},
       state: {
         token: supportedTokens[0],
-        donutCount: 1,
+        donutCount: 0,
       },
     });
   }
@@ -98,6 +98,7 @@ class GiftDonutModalManager {
   }
 
   setToken(token: Token): void {
+    this.state.state.donutCount = 0; // Reset donut count when changing token
     this.state.state.token = token;
   }