fix: Resolve provider creation error & add fallback for wallets witho…

…ut wallet_getAssets support (#822) * chore:remove unnecessary lockfile * chore: update deps * chore:rename file * allow adding donut more than balance with warning * update lock file * refactor: remove disabled state from max button for better UX
reown-com · Feb 17, 2025 · 2209923 · 2209923
1 parent b127dde
commit 2209923
Show file tree

Hide file tree

Showing 5 changed files with 2,544 additions and 9,219 deletions.
diff --git 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
@@ -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 (
     <div className={cn("flex flex-col items-start gap-4", className)}>
       <div className="grid grid-cols-3 items-center w-full">
@@ -63,7 +64,7 @@ function GiftDonutForm({
           </Button>
         </div>
       </div>
-      <div className="flex items-center gap-2 w-full bg-primary-foreground p-4 rounded-3xl ">
+      <div className="flex items-center gap-2 w-full bg-primary-foreground p-4 rounded-3xl">
         <Image src="/donut-cover.png" alt="Gift Donut" width={80} height={80} />
         <div className="flex flex-col gap-2 w-full h-full">
           <p className="text-primary font-bold">Donut #1</p>
@@ -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}
                 >
                   +
                 </Button>
               </div>
             </div>
+            {/* Removed inline error message block */}
           </div>
         </div>
       </div>
@@ -112,8 +112,7 @@ function GiftDonutForm({
           <div
             className="w-10 h-10 rounded-full flex items-center justify-center"
             style={{
-              background:
-                "var(--foreground-foreground-secondary, rgba(42, 42, 42, 1))",
+              background: "var(--foreground-foreground-secondary, rgba(42, 42, 42, 1))",
             }}
           >
             <CoinSVG />
@@ -147,8 +146,7 @@ function GiftDonutForm({
           <div
             className="w-10 h-10 rounded-full flex items-center justify-center"
             style={{
-              background:
-                "var(--foreground-foreground-secondary, rgba(42, 42, 42, 1))",
+              background: "var(--foreground-foreground-secondary, rgba(42, 42, 42, 1))",
             }}
           >
             <NetworkSVG />
@@ -179,28 +177,47 @@ function GiftDonutForm({
           </div>
         </div>
       </div>
+      {/* Total Section Updated with Tooltip and Warning Icon */}
       <div className="flex justify-between w-full items-center">
         <p className="text-secondary">Total</p>
-        <p className="text-md font-bold text-primary">
-          ${(count * 1.0).toFixed(2)}
-        </p>
+        {isExceeded ? (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="flex items-center gap-2">
+                  <AlertTriangle className="h-4 w-4 text-yellow-500" />
+                  <p className="text-md font-bold text-yellow-500">
+                    ${(count * 1.0).toFixed(2)}
+                  </p>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent className="bg-primary-foreground">
+                <p className="text-xs text-primary">
+                  Warning: Your selected count exceeds your token balance
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        ) : (
+          <p className="text-md font-bold text-primary">
+            ${(count * 1.0).toFixed(2)}
+          </p>
+        )}
       </div>
       <div className="flex gap-2 w-full">
         <button
           onClick={onClose}
           type="button"
           style={{
-            border:
-              "1px solid var(--border-border-secondary, rgba(79, 79, 79, 1))",
+            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"
         >
-          Cancle
+          Cancel
         </button>
         <Button
           style={{
-            background:
-              "var(--foreground-foreground-accent-primary-010, rgba(9, 136, 240, 0.1))",
+            background: "var(--foreground-foreground-accent-primary-010, rgba(9, 136, 240, 0.1))",
           }}
           onClick={() => onViewChange("CheckoutReceipentAddress")}
           type="button"
@@ -209,9 +226,7 @@ function GiftDonutForm({
         >
           <p
             className="flex items-center"
-            style={{
-              color: "var(--text-text-accent-primary, rgba(9, 136, 240, 1))",
-            }}
+            style={{ color: "var(--text-text-accent-primary, rgba(9, 136, 240, 1))" }}
           >
             Next <ArrowRight className="w-4 h-4" />
           </p>

diff --git a/...ion-demo/context/WalletAssetsProvider.tsx → ...traction-demo/hooks/useWalletGetAssets.ts b/...ion-demo/context/WalletAssetsProvider.tsx → ...traction-demo/hooks/useWalletGetAssets.ts
@@ -17,17 +17,6 @@ import {
 } from "@/types/ERC7811";
 import { Capabilities } from "@/types/ERC5792";
 
-interface WalletAssetsContextType {
-  balances: TokenBalance[];
-  isLoading: boolean;
-  refetch: () => Promise<void>;
-  getBalanceBySymbol: (symbol: string) => string;
-  getBalanceByAddress: (address: `0x${string}`) => string;
-}
-const WalletAssetsContext = React.createContext<
-  WalletAssetsContextType | undefined
->(undefined);
-
 async function getAssetDiscoveryCapabilities({
   provider,
   chainIdAsHex,