@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.1

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -34,6 +34,7 @@ import {
 } from "@b3dotfun/sdk/global-account/react";
 import { cn, formatUsername } from "@b3dotfun/sdk/shared/utils";
 
+import { toast } from "@b3dotfun/sdk/global-account/react";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatTokenAmount, formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import { simpleHashChainToChainName } from "@b3dotfun/sdk/shared/utils/simplehash";
@@ -41,7 +42,7 @@ import invariant from "invariant";
 import { ChevronRight, ChevronRightCircle, Info, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
+
 import { base } from "viem/chains";
 import { useFeatureFlags } from "../contexts/FeatureFlagsContext";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
@@ -573,7 +574,7 @@ function AnySpendCustomInner({
         await handleCreateOrder(recipientAddress, onramp);
       } catch (err) {
         console.error("Error creating order:", err);
-        toast(`Error creating order: ${err instanceof Error ? err.message : err}`);
+        toast.error(`Error creating order: ${err instanceof Error ? err.message : err}`);
       }
     }
   };
@@ -643,27 +644,27 @@ function AnySpendCustomInner({
               ? "Join for"
               : "Recipient"}
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex flex-wrap items-center justify-end gap-2">
         {recipientAddress ? (
           <button
-            className={cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg")}
+            className={cn("text-as-tertiarry flex items-center gap-2 rounded-lg")}
             onClick={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
           >
-            <>
-              <div className="text-as-tertiarry flex items-center gap-1 text-sm">
-                <span>{recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress)}</span>
-              </div>
-            </>
+            <div className="text-as-tertiarry flex items-center gap-1 text-sm">
+              <span className="whitespace-nowrap">
+                {recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress)}
+              </span>
+            </div>
           </button>
         ) : (
           <button
             className="text-as-primary/70 flex items-center gap-1 rounded-lg"
             onClick={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
           >
-            <div className="text-sm font-medium">Select recipient</div>
+            <div className="whitespace-nowrap text-sm font-medium">Select recipient</div>
           </button>
         )}
-        <ChevronRight className="h-4 w-4" />
+        <ChevronRight className="h-4 w-4 shrink-0" />
       </div>
     </motion.div>
   ) : null;
@@ -671,7 +672,7 @@ function AnySpendCustomInner({
   const historyView = (
     <div
       className={cn(
-        "mx-auto flex w-full max-w-2xl flex-col items-center p-5",
+        "mx-auto flex w-full max-w-2xl flex-col items-center",
         mode === "modal" && "bg-b3-react-background",
       )}
     >
@@ -913,31 +914,29 @@ function AnySpendCustomInner({
               >
                 <div className="text-as-tertiarry flex h-7 items-center text-sm">Pay</div>
                 <button
-                  className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700"
+                  className="text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
                   onClick={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
                 >
                   {effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
                     <>
                       {connectedAddress ? (
-                        <>
-                          <span className="text-as-tertiarry flex items-center gap-1">
-                            {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
-                          </span>
-                        </>
+                        <span className="text-as-tertiarry whitespace-nowrap">
+                          {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
+                        </span>
                       ) : (
-                        "Connect wallet"
+                        <span className="whitespace-nowrap">Connect wallet</span>
                       )}
-                      <ChevronRight className="h-4 w-4" />
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
                     <>
-                      Transfer crypto
-                      <ChevronRight className="h-4 w-4" />
+                      <span className="whitespace-nowrap">Transfer crypto</span>
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   ) : (
                     <>
-                      Select payment method
-                      <ChevronRight className="h-4 w-4" />
+                      <span className="whitespace-nowrap">Select payment method</span>
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   )}
                 </button>
@@ -985,32 +984,34 @@ function AnySpendCustomInner({
                     filter: hasMounted ? "blur(0px)" : "blur(10px)",
                   }}
                   transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
-                  className="relative flex w-full items-center justify-between"
+                  className="relative flex w-full items-center justify-between gap-4"
                 >
-                  <div className="flex items-center gap-2">
-                    <span className="text-as-tertiarry flex items-center gap-1.5 text-sm">
+                  <span className="text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm">
+                    <span className="whitespace-nowrap">
                       Total <span className="text-as-tertiarry">(with fee)</span>
-                      {anyspendQuote?.data?.fee && (
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
-                                <Info className="h-4 w-4" />
-                              </button>
-                            </TooltipTrigger>
-                            <TooltipContent side="top">
-                              <FeeBreakDown fee={anyspendQuote.data.fee} />
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      )}
                     </span>
-                    {renderPointsBadge()}
-                  </div>
+                    {anyspendQuote?.data?.fee && (
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
+                              <Info className="h-4 w-4" />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="top">
+                            <FeeBreakDown fee={anyspendQuote.data.fee} />
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    )}
+                  </span>
                   <div className="flex flex-col items-end gap-0.5">
-                    <span className="text-as-primary font-semibold">
-                      {formattedSrcAmount || "--"} {srcToken.symbol}
-                    </span>
+                    <div className="flex flex-wrap items-center justify-end gap-2">
+                      {renderPointsBadge()}
+                      <span className="text-as-primary whitespace-nowrap font-semibold">
+                        {formattedSrcAmount || "--"} {srcToken.symbol}
+                      </span>
+                    </div>
                     {anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (
                       <span className="text-as-secondary text-xs">
                         incl. $
@@ -1090,33 +1091,33 @@ function AnySpendCustomInner({
               >
                 <div className="text-as-tertiarry flex h-7 items-center text-sm">Pay with</div>
                 <button
-                  className="text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700"
+                  className="text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
                   onClick={() => setActivePanel(PanelView.FIAT_PAYMENT_METHOD)}
                 >
                   {selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
                     <>
-                      <div className="flex items-center gap-2">
-                        <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
+                      <div className="flex items-center gap-2 whitespace-nowrap">
+                        <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
                           <span className="text-xs font-bold text-white">C</span>
                         </div>
                         Coinbase Pay
                       </div>
-                      <ChevronRight className="h-4 w-4" />
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   ) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (
                     <>
-                      <div className="flex items-center gap-2">
-                        <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
+                      <div className="flex items-center gap-2 whitespace-nowrap">
+                        <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
                           <span className="text-xs font-bold text-white">S</span>
                         </div>
                         Credit/Debit Card
                       </div>
-                      <ChevronRight className="h-4 w-4" />
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   ) : (
                     <>
-                      Select payment method
-                      <ChevronRight className="h-4 w-4" />
+                      <span className="whitespace-nowrap">Select payment method</span>
+                      <ChevronRight className="h-4 w-4 shrink-0" />
                     </>
                   )}
                 </button>
@@ -1137,30 +1138,34 @@ function AnySpendCustomInner({
                   filter: hasMounted ? "blur(0px)" : "blur(10px)",
                 }}
                 transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
-                className="relative flex w-full items-center justify-between"
+                className="relative flex w-full items-center justify-between gap-4"
               >
-                <div className="flex items-center gap-2">
-                  <span className="text-as-tertiarry flex items-center gap-1.5 text-sm">
+                <span className="text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm">
+                  <span className="whitespace-nowrap">
                     Total <span className="text-as-tertiarry">(USD)</span>
-                    {anyspendQuote?.data?.fee && (
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
-                              <Info className="h-4 w-4" />
-                            </button>
-                          </TooltipTrigger>
-                          <TooltipContent side="top">
-                            <FeeBreakDown fee={anyspendQuote.data.fee} />
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    )}
                   </span>
-                  {renderPointsBadge()}
-                </div>
+                  {anyspendQuote?.data?.fee && (
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
+                            <Info className="h-4 w-4" />
+                          </button>
+                        </TooltipTrigger>
+                        <TooltipContent side="top">
+                          <FeeBreakDown fee={anyspendQuote.data.fee} />
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  )}
+                </span>
                 <div className="flex flex-col items-end gap-0.5">
-                  <span className="text-as-primary text-xl font-semibold">${srcFiatAmount || "0.00"}</span>
+                  <div className="flex flex-wrap items-center justify-end gap-2">
+                    {renderPointsBadge()}
+                    <span className="text-as-primary whitespace-nowrap text-xl font-semibold">
+                      ${srcFiatAmount || "0.00"}
+                    </span>
+                  </div>
                   {anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && (
                     <span className="text-as-secondary text-xs">
                       incl. $
@@ -1252,8 +1257,6 @@ function AnySpendCustomInner({
   const cryptoPaymentMethodView = (
     <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
       <CryptoPaymentMethod
-        globalAddress={currentWallet?.wallet?.address}
-        globalWallet={currentWallet?.wallet}
         selectedPaymentMethod={effectiveCryptoPaymentMethod}
         setSelectedPaymentMethod={method => {
           // When user explicitly selects a payment method, save it

package/src/anyspend/react/components/AnySpendCustomExactIn.tsx

@@ -1,15 +1,23 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
-import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet } from "@b3dotfun/sdk/global-account/react";
+import {
+  Button,
+  ShinyButton,
+  StyleRoot,
+  toast,
+  TransitionPanel,
+  useAccountWallet,
+} from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
 import { ArrowDown, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useMemo, useRef } from "react";
-import { toast } from "sonner";
+
 import { useSetActiveWallet } from "thirdweb/react";
+import { B3_TOKEN } from "../../constants";
 import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaySection } from "./common/CryptoPaySection";
@@ -43,6 +51,7 @@ export interface AnySpendCustomExactInProps {
   destinationToken: components["schemas"]["Token"];
   destinationChainId: number;
   onSuccess?: (amount: string) => void;
+  onOpenCustomModal?: () => void;
   mainFooter?: React.ReactNode;
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
   customUsdInputValues?: string[];
@@ -79,6 +88,7 @@ function AnySpendCustomExactInInner({
   destinationToken,
   destinationChainId,
   onSuccess,
+  onOpenCustomModal,
   mainFooter,
   onTokenSelect,
   customUsdInputValues,
@@ -190,6 +200,9 @@ function AnySpendCustomExactInInner({
 
   const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
     if (activeInputAmountInWei === "0") return { text: "Enter an amount", disable: true, error: false, loading: false };
+    if (orderType === "hype_duel" && selectedSrcToken?.address?.toLowerCase() === B3_TOKEN.address.toLowerCase()) {
+      return { text: "Convert to HYPE using B3", disable: false, error: false, loading: false };
+    }
     if (isLoadingAnyspendQuote) return { text: "Loading quote...", disable: true, error: false, loading: true };
     if (isCreatingOrder || isCreatingOnrampOrder)
       return { text: "Creating order...", disable: true, error: false, loading: true };
@@ -259,9 +272,14 @@ function AnySpendCustomExactInInner({
     minDestinationAmount,
     DESTINATION_TOKEN_DETAILS.SYMBOL,
     orderType,
+    selectedSrcToken,
   ]);
 
   const onMainButtonClick = async () => {
+    if (orderType === "hype_duel" && selectedSrcToken?.address?.toLowerCase() === B3_TOKEN.address.toLowerCase()) {
+      onOpenCustomModal?.();
+      return;
+    }
     if (btnInfo.disable) return;
 
     if (!selectedRecipientOrDefault) {
@@ -540,8 +558,6 @@ function AnySpendCustomExactInInner({
 
   const cryptoPaymentMethodView = (
     <CryptoPaymentMethod
-      globalAddress={globalAddress}
-      globalWallet={undefined}
       selectedPaymentMethod={selectedCryptoPaymentMethod}
       setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
       isCreatingOrder={isCreatingOrder}

package/src/anyspend/react/components/AnySpendStakeB3.tsx

@@ -5,6 +5,7 @@ import {
   Input,
   StyleRoot,
   TextLoop,
+  toast,
   useHasMounted,
   useModalStore,
   useSimBalance,
@@ -16,7 +17,7 @@ import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useState } from "react";
-import { toast } from "sonner";
+
 import { createPublicClient, encodeFunctionData, erc20Abi, http } from "viem";
 import { base } from "viem/chains";
 import { useAccount, useWaitForTransactionReceipt } from "wagmi";

package/src/anyspend/react/components/AnySpendStakeB3ExactIn.tsx

@@ -6,6 +6,7 @@ import {
   Input,
   StyleRoot,
   TextLoop,
+  toast,
   useHasMounted,
   useModalStore,
   useSimBalance,
@@ -16,7 +17,7 @@ import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { ArrowRight, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useState } from "react";
-import { toast } from "sonner";
+
 import { createPublicClient, encodeFunctionData, erc20Abi, http } from "viem";
 import { base } from "viem/chains";
 import { useAccount, useWaitForTransactionReceipt } from "wagmi";

package/src/anyspend/react/components/AnyspendDepositHype.tsx

@@ -16,6 +16,7 @@ export interface AnySpendDepositHypeProps {
   sourceTokenAddress?: string;
   sourceTokenChainId?: number;
   onSuccess?: () => void;
+  onOpenCustomModal?: () => void;
   mainFooter?: React.ReactNode;
   /**
    * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
@@ -34,6 +35,7 @@ export function AnySpendDepositHype({
   sourceTokenAddress,
   sourceTokenChainId,
   onSuccess,
+  onOpenCustomModal,
   mainFooter,
   onTokenSelect,
   customUsdInputValues,
@@ -75,6 +77,7 @@ export function AnySpendDepositHype({
       minDestinationAmount={10}
       header={header}
       onSuccess={onSuccess}
+      onOpenCustomModal={onOpenCustomModal}
       mainFooter={mainFooter}
       onTokenSelect={onTokenSelect}
       customUsdInputValues={customUsdInputValues}

package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
+import { toast, useAccountWallet, WalletImage } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
@@ -8,9 +8,8 @@ import { WalletCoinbase, WalletMetamask, WalletRainbow, WalletWalletConnect } fr
 import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
 import { useState } from "react";
 import { createPortal } from "react-dom";
-import { toast } from "sonner";
 import { useSetActiveWallet, useWalletInfo } from "thirdweb/react";
-import { WalletId, createWallet } from "thirdweb/wallets";
+import { createWallet, WalletId } from "thirdweb/wallets";
 import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 
@@ -22,12 +21,6 @@ export enum CryptoPaymentMethodType {
 }
 
 interface CryptoPaymentMethodProps {
-  globalAddress?: string;
-  globalWallet?: {
-    meta?: {
-      icon?: string;
-    };
-  };
   selectedPaymentMethod: CryptoPaymentMethodType;
   setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;
   isCreatingOrder: boolean;
@@ -42,11 +35,7 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const {
-    wallet: globalWallet,
-    connectedEOAWallet: connectedEOAWallet,
-    connectedSmartWallet: connectedSmartWallet,
-  } = useAccountWallet();
+  const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = useAccountWallet();
   const { connector, address } = useAccount();
   const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
@@ -60,6 +49,7 @@ export function CryptoPaymentMethod({
 
   // Use custom hook to determine wallet display logic
   const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
+  console.log("shouldShowWagmiWallet :", shouldShowWagmiWallet);
 
   // Map wagmi connector names to thirdweb wallet IDs
   const getThirdwebWalletId = (connectorName: string): WalletId | null => {
@@ -185,7 +175,7 @@ export function CryptoPaymentMethod({
   };
 
   return (
-    <div className="crypto-payment-method mx-auto h-fit w-[460px] max-w-full">
+    <div className="crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-5">
       <div className={cn("relative flex flex-col gap-10")}>
         {/* Header */}
         <button
@@ -200,6 +190,49 @@ export function CryptoPaymentMethod({
           </div>
         </div>
 
+        {/* Toast Testing Section - Remove this after testing */}
+        {process.env.NODE_ENV === "development" && (
+          <div className="rounded-lg border border-yellow-500/50 bg-yellow-50 p-3 dark:bg-yellow-950/20">
+            <p className="mb-2 text-xs font-semibold text-yellow-800 dark:text-yellow-300">🧪 Toast Test (Dev Only)</p>
+            <div className="flex flex-wrap gap-2">
+              <button
+                onClick={() => toast.success("Success! Transaction completed")}
+                className="rounded bg-green-600 px-2 py-1 text-xs font-medium text-white hover:bg-green-700"
+              >
+                Success
+              </button>
+              <button
+                onClick={() => toast.error("Error! Transaction failed")}
+                className="rounded bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700"
+              >
+                Error
+              </button>
+              <button
+                onClick={() => toast.info("Info: Processing your request...")}
+                className="rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white hover:bg-blue-700"
+              >
+                Info
+              </button>
+              <button
+                onClick={() => toast.warning("Warning: Low balance detected")}
+                className="rounded bg-yellow-600 px-2 py-1 text-xs font-medium text-white hover:bg-yellow-700"
+              >
+                Warning
+              </button>
+              <button
+                onClick={() => {
+                  toast.success("Multiple test 1");
+                  setTimeout(() => toast.info("Multiple test 2"), 200);
+                  setTimeout(() => toast.warning("Multiple test 3"), 400);
+                }}
+                className="rounded bg-purple-600 px-2 py-1 text-xs font-medium text-white hover:bg-purple-700"
+              >
+                Multiple
+              </button>
+            </div>
+          </div>
+        )}
+
         {/* Payment Methods */}
         <div className="crypto-payment-methods flex flex-col gap-4">
           {/* Installed Wallets Section */}
@@ -334,13 +367,14 @@ export function CryptoPaymentMethod({
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-3">
-                        {globalWallet?.meta?.icon ? (
-                          <img src={globalWallet.meta.icon} alt="Global Account" className="h-10 w-10 rounded-full" />
-                        ) : (
-                          <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100">
-                            <Wallet className="h-5 w-5 text-purple-600" />
-                          </div>
-                        )}
+                        <WalletImage
+                          fallback={
+                            <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100">
+                              <Wallet className="h-5 w-5 text-purple-600" />
+                            </div>
+                          }
+                        />
+
                         <div className="flex flex-col">
                           <span className="text-as-primary font-semibold">Global Account</span>
                           <span className="text-as-primary/60 text-sm">{shortenAddress(globalAddress || "")}</span>

package/src/anyspend/react/components/common/FeeDetailPanel.tsx

@@ -83,7 +83,7 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
   const [showAllDiscountTiers, setShowAllDiscountTiers] = useState(false);
 
   return (
-    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-3">
+    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-3 px-5">
       <div className="flex w-full flex-col gap-3">
         <div className="text-center">
           <h3 className="text-as-primary text-lg font-bold">Fee Breakdown</h3>

package/src/anyspend/react/components/common/FiatPaymentMethod.tsx

@@ -81,7 +81,7 @@ export function FiatPaymentMethodComponent({
   // Show loading state while checking geo availability
   if (isLoadingGeoOnramp) {
     return (
-      <div className="fiat-payment-method mx-auto w-[460px] max-w-full">
+      <div className="fiat-payment-method mx-auto w-[460px] max-w-full p-5">
         <div className="flex flex-col gap-6">
           <div className="flex items-center gap-4">
             <button
@@ -104,7 +104,7 @@ export function FiatPaymentMethodComponent({
   }
 
   return (
-    <div className="fiat-payment-method mx-auto w-[460px] max-w-full">
+    <div className="fiat-payment-method mx-auto w-[460px] max-w-full p-5">
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className="flex items-center gap-4">

package/src/anyspend/react/components/common/InsufficientDepositPayment.tsx

@@ -12,12 +12,12 @@ import { Badge, CopyToClipboard, ShinyButton, TextLoop } from "@b3dotfun/sdk/glo
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { b3 } from "viem/chains";
 
+import { toast } from "@b3dotfun/sdk/global-account/react";
 import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust } from "@web3icons/react";
 import { ChevronRight, Copy, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { QRCodeSVG } from "qrcode.react";
-import { toast } from "sonner";
 
 interface InsufficientDepositPaymentProps {
   order: components["schemas"]["Order"];

package/src/anyspend/react/components/common/OrderDetails.tsx

@@ -31,13 +31,14 @@ import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 
+import { toast } from "@b3dotfun/sdk/global-account/react";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust, WalletWalletConnect } from "@web3icons/react";
 import { CheckIcon, ChevronRight, Copy, ExternalLink, Home, Loader2, RefreshCcw } from "lucide-react";
 import { motion } from "motion/react";
 import { QRCodeSVG } from "qrcode.react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import TimeAgo from "react-timeago";
-import { toast } from "sonner";
+
 import { encodeFunctionData, erc20Abi } from "viem";
 import { b3 } from "viem/chains";
 import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
@@ -1086,7 +1087,10 @@ export const OrderDetails = memo(function OrderDetails({
         />
       )}
 
-      <button className="order-details-cancel-btn flex w-full items-center justify-center gap-2" onClick={handleBack}>
+      <button
+        className="text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline"
+        onClick={handleBack}
+      >
         <RefreshCcw className="ml-2 h-4 w-4" /> Cancel and start over
       </button>
 

package/src/anyspend/react/components/common/OrderDetailsCollapsible.tsx

@@ -2,7 +2,7 @@
 
 import { ALL_CHAINS, capitalizeFirstLetter, getChainName } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-import { CopyToClipboard } from "@b3dotfun/sdk/global-account/react";
+import { CopyToClipboard, toast } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
@@ -10,7 +10,7 @@ import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronDown, Copy } from "lucide-react";
 import { motion } from "motion/react";
 import { memo, useState } from "react";
-import { toast } from "sonner";
+
 import { b3 } from "viem/chains";
 
 type Order = components["schemas"]["Order"];