implement ca demo wallet checkout (#866)

* chore: update appkit deps

* add wallet checkout integration

* chore: update yarn.lock

* add purchase donut modal view and receipt view

* chore: display asset amount and name

* handle dialog tile console error

* rename payment methods to payment options

* add visual assets

* add options to select/deselect payment options

* handle error message in modal

* chore: fix handling error.message

* chore: visual assets type changes

* chore: refactor PurchaseDonutButton

* chore: remove unused imports and comments

* chore: remove registering PaymentOptionsModalView from PaymentOptions component

* chore: refactor to use existing getChainLogoUrl  method

* chore: refactored paymentOptionsView

* chore: remove +/- donut quantity for wallet_checkout usecase

* chore: handle all defined errors

* chore: updated donut price to 1 USD

* chore: add optimismSepolia in network array

Author: KannuSingh

advanced/dapps/chain-abstraction-demo/app/globals.css

@@ -31,15 +31,16 @@
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
     --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 15%;
+    --primary-foreground: 0 0% 98%;
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
+    --tertiary-foreground: rgba(244, 244, 244, 1);
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
     --accent: 240 4.8% 95.9%;
     --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 15%;
+    --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 10% 3.9%;
@@ -49,26 +50,33 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
+    
+    /* Custom variables from component */
+    --foreground-foreground-secondary: rgba(230, 230, 230, 1);
+    --foreground-foreground-accent-primary-010: rgba(9, 136, 240, 0.1);
+    --text-text-accent-primary: rgba(9, 136, 240, 1);
+    --border-border-secondary: rgba(200, 200, 200, 1);
   }
+  
   .dark {
     --background: 0 0% 13%;
     --foreground: 0 0% 15%;
     --invert: 0 0% 13%;
     --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 15%;
+    --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 15%;
+    --popover-foreground: 0 0% 98%;
     --primary: 0 0% 100%;
     --primary-foreground: 0 0% 15%;
     --secondary: 0 0% 60%;
-    --secondary-foreground: 0 0% 15%;
+    --secondary-foreground: 0 0% 98%;
     --tertiary-foreground: rgba(54, 54, 54, 1);
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
     --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 15%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 15%;
+    --destructive-foreground: 0 0% 98%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 207, 93%, 49%, 0.2;
@@ -77,6 +85,12 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    
+    /* Custom variables from component */
+    --foreground-foreground-secondary: rgba(42, 42, 42, 1);
+    --foreground-foreground-accent-primary-010: rgba(9, 136, 240, 0.1);
+    --text-text-accent-primary: rgba(9, 136, 240, 1);
+    --border-border-secondary: rgba(79, 79, 79, 1);
   }
 }
 
@@ -88,3 +102,29 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Additional utility classes for common patterns in the component */
+@layer components {
+  .rounded-button {
+    @apply h-8 w-8 rounded-full p-0;
+    background-color: var(--tertiary-foreground);
+  }
+  
+  .payment-option-badge {
+    @apply flex gap-1 p-1 rounded-full text-sm items-center;
+    background-color: var(--tertiary-foreground);
+  }
+  
+  .icon-container {
+    @apply w-10 h-10 rounded-full flex items-center justify-center;
+    background-color: var(--foreground-foreground-secondary);
+  }
+  
+  .accent-button {
+    background: var(--foreground-foreground-accent-primary-010);
+  }
+  
+  .accent-text {
+    color: var(--text-text-accent-primary);
+  }
+}

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

@@ -6,9 +6,12 @@ import { ConnectWalletButton } from "@/components/ConnectWalletButton";
 import { useAppKitAccount } from "@reown/appkit/react";
 import Navbar from "@/components/Navbar";
 import { GiftDonutModalTrigger } from "@/components/GiftDonutModalTrigger";
+import PurchaseDonutButton from "@/components/PurchaseDonutButton";
+import { useWalletCheckout } from "@/hooks/useWalletCheckout";
 
 export default function Home() {
   const { status, address } = useAppKitAccount();
+  const { isWalletCheckoutSupported, } = useWalletCheckout()
 
   return (
     <div className="sm:w-1/2 flex flex-col sm:mx-10">
@@ -33,12 +36,13 @@ export default function Home() {
               <p className=" font-bold text-primary">$1.00</p>
             </div>
             {status === "connected" || address ? (
-              <div>
+              <div className="flex gap-2">
                 <GiftDonutModalTrigger
                   triggerText="Gift Donut"
                   initialView="Checkout"
                   className="bg-blue-500 hover:bg-blue-700 text-invert"
                 />
+                {isWalletCheckoutSupported && <PurchaseDonutButton />}
               </div>
             ) : (
               <div>

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

@@ -0,0 +1,61 @@
+import { useWalletCheckout } from "@/hooks/useWalletCheckout"
+import { Button } from "@/components/ui/button"
+import { useAppKitProvider } from "@reown/appkit/react"
+import UniversalProvider from '@walletconnect/universal-provider'
+import { toast } from "sonner"
+import { useEffect, useRef } from "react"
+import { walletCheckoutManager } from "@/controllers/WalletCheckoutModalManager"
+import { WalletCheckoutModal } from "./WalletCheckoutModal"
+import { registerCheckoutViews } from "@/config/checkoutViews"
+
+
+const initializeCheckoutManager = () => {
+  registerCheckoutViews();
+}
+
+const PurchaseDonutButton = () => {
+  const { isWalletCheckoutSupported, getPreConfiguredPaymentsOptions } = useWalletCheckout()
+  const { walletProvider } = useAppKitProvider<UniversalProvider>('eip155')
+  
+  // Initialize checkout manager when the component mounts
+  useEffect(() => {
+    initializeCheckoutManager();
+    
+    // Configure payment options when component mounts
+    const configurePaymentsOptions = async () => {
+      if (isWalletCheckoutSupported) {
+        try {
+          const options = await getPreConfiguredPaymentsOptions();
+          walletCheckoutManager.setPaymentOptions(options);
+        } catch (error) {
+          console.error("Failed to configure payment options:", error);
+        }
+      }
+    };
+    
+    configurePaymentsOptions();
+  }, [getPreConfiguredPaymentsOptions, isWalletCheckoutSupported]);
+  
+  const handlePurchaseDonut = async () => {
+    if (!isWalletCheckoutSupported || !walletProvider) {
+      toast.error('Wallet checkout not supported', {
+        description: 'Your wallet does not support the checkout feature',
+      });
+      return;
+    }
+    walletCheckoutManager.resetTransactionState();
+    walletCheckoutManager.setWalletProvider(walletProvider);
+    walletCheckoutManager.open("checkout");
+  }
+
+  return (
+    <>
+      <Button onClick={handlePurchaseDonut} disabled={!isWalletCheckoutSupported}>
+        Purchase Donut
+      </Button>
+      <WalletCheckoutModal />
+    </>
+  );
+}
+
+export default PurchaseDonutButton

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

@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import { useSnapshot } from "valtio";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { walletCheckoutManager } from "../controllers/WalletCheckoutModalManager";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+
+export const WalletCheckoutModal: React.FC = () => {
+  const snap = useSnapshot(walletCheckoutManager.getState());
+  
+  const handleClose = () => {
+    walletCheckoutManager.close();
+  };
+  
+  if (!snap.isOpen) return null;
+  
+  const CurrentView = snap.views[snap.currentView]?.component;
+  
+  if (!CurrentView) return null;
+  
+  return (
+    <Dialog open={snap.isOpen} onOpenChange={handleClose}>
+      <DialogContent 
+        aria-describedby={undefined} 
+        className="sm:max-w-[435px] bg-background"
+      >
+        <VisuallyHidden.Root asChild>
+            <DialogTitle>Modal Title</DialogTitle>
+          </VisuallyHidden.Root>
+        <CurrentView 
+          onClose={handleClose} 
+          onViewChange={(viewKey) => walletCheckoutManager.switchView(viewKey)}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

advanced/dapps/chain-abstraction-demo/components/gift-donut-modal-views/CheckoutView.tsx

@@ -94,8 +94,7 @@ function GiftDonutForm({
                 <Button
                   variant="outline"
                   onClick={() => setDonutCount(count - 1)}
-                  style={{ backgroundColor: "var(--tertiary-foreground)" }}
-                  className="h-8 w-8 rounded-full p-0"
+                  className="rounded-button"
                   disabled={count <= 0}
                 >
                   -
@@ -104,33 +103,25 @@ function GiftDonutForm({
                 <Button
                   variant="outline"
                   onClick={() => setDonutCount(count + 1)}
-                  style={{ backgroundColor: "var(--tertiary-foreground)" }}
-                  className="h-8 w-8 rounded-full p-0"
+                  className="rounded-button"
                 >
                   +
                 </Button>
               </div>
             </div>
-            {/* Removed inline error message block */}
           </div>
         </div>
       </div>
       <div className="flex items-center flex-col gap-2 w-full text-primary">
         <div className="flex w-full items-center gap-2">
-          <div
-            className="w-10 h-10 rounded-full flex items-center justify-center"
-            style={{
-              background: "var(--foreground-foreground-secondary, rgba(42, 42, 42, 1))",
-            }}
-          >
+          <div className="icon-container">
             <CoinSVG />
           </div>
           <div className="flex flex-1 items-center justify-between">
             <p>Pay with</p>
             <div className="flex gap-4 items-center justify-between cursor-pointer">
               <div
-                className="flex gap-1 p-1 rounded-full text-sm items-center"
-                style={{ backgroundColor: "var(--tertiary-foreground)" }}
+                className="payment-option-badge"
                 onClick={() => onViewChange("PayWith")}
               >
                 {selectedToken && (
@@ -151,20 +142,14 @@ function GiftDonutForm({
           </div>
         </div>
         <div className="flex w-full items-center gap-2">
-          <div
-            className="w-10 h-10 rounded-full flex items-center justify-center"
-            style={{
-              background: "var(--foreground-foreground-secondary, rgba(42, 42, 42, 1))",
-            }}
-          >
+          <div className="icon-container">
             <NetworkSVG />
           </div>
           <div className="flex flex-1 items-center justify-between">
             <p>Choose Network</p>
             <div className="flex gap-4 items-center justify-between cursor-pointer">
               <div
-                className="flex gap-1 p-1 rounded-full text-sm items-center"
-                style={{ backgroundColor: "var(--tertiary-foreground)" }}
+                className="payment-option-badge"
                 onClick={() => onViewChange("ChooseNetwork")}
               >
                 {selectedNetwork && (
@@ -216,17 +201,14 @@ function GiftDonutForm({
         <button
           onClick={onClose}
           type="button"
-          style={{
-            border: "1px solid var(--border-border-secondary, rgba(79, 79, 79, 1))",
-          }}
-          className="flex flex-1 text-primary items-center justify-center border-secondary rounded-lg"
+          className="flex flex-1 text-primary items-center justify-center border border-border-secondary rounded-lg"
         >
           Cancel
         </button>
         <Button
-          style={{
-            background: "var(--foreground-foreground-accent-primary-010, rgba(9, 136, 240, 0.1))",
-          }}
+         style={{
+          background: "var(--foreground-foreground-accent-primary-010, rgba(9, 136, 240, 0.1))",
+        }}
           onClick={() => {
             // If token and network are incompatible, redirect to network selection
             if (!giftDonutModalManager.isTokenNetworkCompatible()) {
@@ -252,4 +234,4 @@ function GiftDonutForm({
   );
 }
 
-export default CheckoutView;
+export default CheckoutView;