refactor and display balances

advanced/dapps/chain-abstraction-demo/app/page.tsx

@@ -1,53 +1,54 @@
-"use client";
-
-import * as React from "react";
-import Image from "next/image";
-import { ConnectWalletButton } from "@/components/ConnectWalletButton";
-import { useAppKitAccount } from "@reown/appkit/react";
+'use client'
+import { BalanceDisplay } from "@/components/BalanceDisplay";
+import { DonutImage } from "@/components/DonutImage";
+import { DonutInfo } from "@/components/DonutInfo";
+import { GiftDonutButton } from "@/components/GiftDonutButton";
 import Navbar from "@/components/Navbar";
-import { GiftDonutModalTrigger } from "@/components/GiftDonutModalTrigger";
+import { useWalletAssets } from "@/context/WalletAssetsProvider";
+import { useAppKitAccount } from "@reown/appkit/react";
+import React from "react";
+
+const DONUT_PRICE = 1.00;
 
 export default function Home() {
-  const { status, address } = useAppKitAccount();
+  const { status } = useAppKitAccount();
+  const { balances, isLoading, getBalanceBySymbol } = useWalletAssets();
+
+  const hasEnoughBalance = React.useMemo(() => {
+    const usdcBalance = parseFloat(getBalanceBySymbol("USDC"));
+    const usdtBalance = parseFloat(getBalanceBySymbol("USDT"));
+    return (usdcBalance >= DONUT_PRICE) || (usdtBalance >= DONUT_PRICE);
+  }, [getBalanceBySymbol]);
+
 
   return (
     <div className="sm:w-1/2 flex flex-col sm:mx-10">
       <Navbar />
       <div className="flex flex-col justify-center gap-4 mt-8">
-        <div className="flex items-center justify-center h-64 relative ">
-          <Image
-            src="/donut-cover.png"
-            alt="Gift Donut"
-            className="object-cover"
-            fill={true}
-          />
-        </div>
-        <div className="flex flex-col gap-5">
-          <div className="flex flex-col text-left">
-            <p className=" font-bold text-primary">Donut #1</p>
-            <p className=" text-secondary">Lorem ipsum dolor sit...</p>
-          </div>
-          <div className="flex justify-between items-center w-full">
-            <div className="flex flex-col text-left">
-              <p className=" text-secondary">Price</p>
-              <p className=" font-bold text-primary">$1.00</p>
+        <DonutImage />
+        <div className="flex flex-col gap-5 justify-end w-full">
+          <div className="flex flex-col justify-between gap-4 w-full">
+          <DonutInfo />
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex flex-col items-center">
+                <p className="text-secondary">Price</p>
+                <p className="font-bold text-primary">${DONUT_PRICE.toFixed(2)}</p>
             </div>
-            {status === "connected" || address ? (
-              <div>
-                <GiftDonutModalTrigger
-                  triggerText="Gift Donut"
-                  initialView="Checkout"
-                  className="bg-blue-500 hover:bg-blue-700 text-invert"
-                />
-              </div>
-            ) : (
-              <div>
-                <ConnectWalletButton />
-              </div>
-            )}
+            <GiftDonutButton
+              isConnected={status === "connected"}
+              isLoading={isLoading}
+              hasEnoughBalance={hasEnoughBalance}
+            />
           </div>
+          </div>
+          {status === "connected" && (
+              <BalanceDisplay 
+                balances={balances}
+                isLoading={isLoading}
+              />
+            )}
         </div>
       </div>
     </div>
   );
-}
+}

advanced/dapps/chain-abstraction-demo/components/BalanceDisplay.tsx

@@ -0,0 +1,22 @@
+import { TokenBalance } from "@/context/WalletAssetsProvider";
+
+interface BalanceDisplayProps {
+  balances: TokenBalance[];
+  isLoading: boolean;
+}
+
+export const BalanceDisplay: React.FC<BalanceDisplayProps> = ({ balances, isLoading }) => {
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-1 text-sm text-secondary mt-2">
+      {balances.map((token) => (
+        <div key={token.address}>
+          Available {token.symbol} Balance: {token.balance} {token.symbol} 
+        </div>
+      ))}
+    </div>
+  );
+};

advanced/dapps/chain-abstraction-demo/components/DonutImage.tsx

@@ -0,0 +1,12 @@
+import Image from "next/image";
+
+export const DonutImage = () => (
+  <div className="flex items-center justify-center h-64 relative">
+    <Image
+      src="/donut-cover.png"
+      alt="Gift Donut"
+      className="object-cover"
+      fill={true}
+    />
+  </div>
+);

advanced/dapps/chain-abstraction-demo/components/DonutInfo.tsx

@@ -0,0 +1,9 @@
+interface DonutInfoProps {
+}
+
+export const DonutInfo: React.FC<DonutInfoProps> = ({  }) => (
+  <div className="flex flex-col text-left">
+    <p className="font-bold text-primary">Donut #1</p>
+    <p className="text-secondary">Lorem ipsum dolor sit...</p>
+  </div>
+);

advanced/dapps/chain-abstraction-demo/components/GiftDonutButton.tsx

@@ -0,0 +1,66 @@
+import { Loader2 } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { GiftDonutModalTrigger } from "@/components/GiftDonutModalTrigger";
+import { ConnectWalletButton } from "@/components/ConnectWalletButton";
+
+interface GiftDonutButtonProps {
+  isConnected: boolean;
+  isLoading: boolean;
+  hasEnoughBalance: boolean;
+}
+
+export const GiftDonutButton: React.FC<GiftDonutButtonProps> = ({
+  isConnected,
+  isLoading,
+  hasEnoughBalance,
+}) => {
+  if (!isConnected) {
+    return (
+    <div>
+      <ConnectWalletButton />
+    </div>
+    );
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div>
+            <GiftDonutModalTrigger
+              triggerText={
+                isLoading ? (
+                  <div className="flex items-center gap-2">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Loading
+                  </div>
+                ) : (
+                  "Gift Donut"
+                )
+              }
+              initialView="Checkout"
+              className={`${
+                isLoading 
+                  ? "bg-blue-400"
+                  : hasEnoughBalance
+                    ? "bg-blue-500 hover:bg-blue-700"
+                    : "bg-gray-400 cursor-not-allowed"
+              } text-invert`}
+              disabled={isLoading || !hasEnoughBalance}
+            />
+          </div>
+        </TooltipTrigger>
+        {!isLoading && !hasEnoughBalance && (
+          <TooltipContent>
+            <p>Insufficient USDC balance</p>
+          </TooltipContent>
+        )}
+      </Tooltip>
+    </TooltipProvider>
+  );
+};

advanced/dapps/chain-abstraction-demo/components/GiftDonutModalTrigger.tsx

@@ -10,8 +10,8 @@ import { GiftDonutModalViews } from "./gift-donut-modal-views";
 type GiftDonutModalTriggerProps = {
   views?: Record<string, React.FC<GiftDonutModalViewProps>>;
   initialView?: string;
-  triggerText?: string;
-  // Button customization props
+  triggerText?: string | React.ReactElement;
+  disabled?: boolean; 
   className?: string;
   variant?:
     | "default"
@@ -27,6 +27,7 @@ export const GiftDonutModalTrigger: React.FC<GiftDonutModalTriggerProps> = ({
   views = GiftDonutModalViews,
   initialView = "Checkout",
   triggerText = "Gift Donut",
+  disabled = false, 
   className,
   variant = "default",
   buttonProps = {},
@@ -63,11 +64,12 @@ export const GiftDonutModalTrigger: React.FC<GiftDonutModalTriggerProps> = ({
         }}
         variant={variant}
         className={className}
+        disabled={disabled}  
         {...buttonProps}
       >
         {triggerText}
       </Button>
       <GiftDonutModal />
     </>
   );
-};
+};

advanced/dapps/chain-abstraction-demo/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }