@b3dotfun/sdk 0.0.83 → 0.0.84-alpha.0

package/src/anyspend/react/hooks/useConnectedWalletDisplay.ts

@@ -5,8 +5,6 @@ import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMetho
 interface UseConnectedWalletDisplayResult {
   walletAddress: string | undefined;
   shouldShowConnectedEOA: boolean;
-  shouldShowWagmiWallet: boolean;
-  isWalletDuplicated: boolean;
   suggestedPaymentMethod: CryptoPaymentMethodType;
 }
 
@@ -22,27 +20,18 @@ export function useConnectedWalletDisplay(
 
   const globalWalletAddress = connectedSmartWallet?.getAccount()?.address;
 
-  // Helper function to check if two addresses are the same
-  const isSameAddress = (addr1?: string, addr2?: string): boolean => {
-    if (!addr1 || !addr2) return false;
-    return addr1.toLowerCase() === addr2.toLowerCase();
-  };
-
   // Check if connectedEOAWallet and wagmi wallet represent the same wallet
   const connectedEOAAddress = connectedEOAWallet?.getAccount()?.address;
-  const isWalletDuplicated =
-    isSameAddress(connectedEOAAddress, wagmiAddress) || isSameAddress(globalWalletAddress, wagmiAddress);
 
   // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
   const shouldShowConnectedEOA = !!connectedEOAWallet;
   // this is disabled because we don't want to display In-App Wallet as a payment method
-  const shouldShowWagmiWallet = false; // wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
 
   // Determine which address to use based on payment method
   let walletAddress: string | undefined;
 
   if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
-    walletAddress = connectedSmartWallet?.getAccount()?.address;
+    walletAddress = globalWalletAddress;
   } else if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
     // Prefer connectedEOAWallet, fallback to wagmi wallet
     walletAddress = connectedEOAAddress || wagmiAddress;
@@ -58,7 +47,7 @@ export function useConnectedWalletDisplay(
   if (connectedEOAAddress || wagmiAddress) {
     // If there's a connected EOA or wagmi wallet, suggest CONNECT_WALLET
     suggestedPaymentMethod = CryptoPaymentMethodType.CONNECT_WALLET;
-  } else if (connectedSmartWallet?.getAccount()?.address) {
+  } else if (globalWalletAddress) {
     // If only global wallet is available, suggest that
     suggestedPaymentMethod = CryptoPaymentMethodType.GLOBAL_WALLET;
   }
@@ -66,8 +55,6 @@ export function useConnectedWalletDisplay(
   return {
     walletAddress,
     shouldShowConnectedEOA,
-    shouldShowWagmiWallet,
-    isWalletDuplicated,
     suggestedPaymentMethod,
   };
 }

package/src/anyspend/react/hooks/useHyperliquidTransfer.ts

@@ -0,0 +1,152 @@
+import { HYPERLIQUID_CHAIN_ID, HYPERLIQUID_MAINNET } from "@b3dotfun/sdk/anyspend";
+import { toast } from "@b3dotfun/sdk/global-account/react";
+import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
+import axios from "axios";
+import { useCallback } from "react";
+import { parseSignature } from "viem";
+import { useWalletClient } from "wagmi";
+
+interface HyperliquidTransferParams {
+  /** Amount in smallest unit (USDC has 6 decimals) */
+  amount: string;
+  /** Recipient address */
+  destination: string;
+}
+
+/**
+ * @deprecated This hook is NOT USED in production.
+ *
+ * Hyperliquid is only supported as DESTINATION CHAIN (not source chain).
+ * Users cannot send FROM Hyperliquid in our flow, so EIP-712 signing is not needed.
+ *
+ * This hook was created during initial planning but is kept for:
+ * - Reference if we need to support source chain in the future
+ * - Understanding how Hyperliquid EIP-712 transfers work
+ *
+ * DO NOT USE THIS HOOK IN PRODUCTION CODE.
+ *
+ * Custom hook for handling Hyperliquid transfers via EIP-712 signature.
+ * Based on Relay SDK's Hyperliquid implementation.
+ *
+ * @example
+ * ```tsx
+ * const { initiateTransfer } = useHyperliquidTransfer();
+ *
+ * await initiateTransfer({
+ *   amount: "1000000", // 1 USDC
+ *   destination: "0x..."
+ * });
+ * ```
+ */
+export function useHyperliquidTransfer() {
+  const { data: walletClient } = useWalletClient();
+
+  /**
+   * Get the connected wallet address if available.
+   */
+  const getConnectedAddress = useCallback(() => {
+    return walletClient?.account?.address || null;
+  }, [walletClient]);
+
+  /**
+   * Initiate Hyperliquid transfer by signing EIP-712 message and sending to Hyperliquid API.
+   */
+  const initiateTransfer = useCallback(
+    async ({ amount, destination }: HyperliquidTransferParams): Promise<void> => {
+      if (!walletClient?.account) {
+        toast.error("Please connect your wallet");
+        throw new Error("Wallet not connected");
+      }
+
+      try {
+        const currentTime = new Date().getTime();
+
+        // Convert amount from smallest unit (6 decimals) to display format.
+        // e.g., "11151533" -> "11.151533"
+        const displayAmount = formatUnits(amount, 6);
+
+        // Prepare EIP-712 typed data for Hyperliquid USD send.
+        const typedData = {
+          domain: {
+            name: "HyperliquidSignTransaction",
+            version: "1",
+            chainId: HYPERLIQUID_CHAIN_ID,
+            verifyingContract: "0x0000000000000000000000000000000000000000" as `0x${string}`,
+          },
+          types: {
+            "HyperliquidTransaction:UsdSend": [
+              { name: "hyperliquidChain", type: "string" },
+              { name: "destination", type: "string" },
+              { name: "amount", type: "string" },
+              { name: "time", type: "uint64" },
+            ],
+          },
+          primaryType: "HyperliquidTransaction:UsdSend" as const,
+          message: {
+            hyperliquidChain: "Mainnet",
+            destination: destination.toLowerCase(),
+            amount: displayAmount,
+            time: BigInt(currentTime),
+          },
+        };
+
+        toast.info("Please sign the message in your wallet");
+
+        // Sign EIP-712 message.
+        const signature = await walletClient.signTypedData(typedData);
+
+        // Parse signature to get r, s, v components.
+        const { r, s, v } = parseSignature(signature);
+
+        toast.info("Sending transaction to Hyperliquid...");
+
+        // Send signature to Hyperliquid API.
+        const response = await axios.post(HYPERLIQUID_MAINNET.apiUrl + "/exchange", {
+          signature: {
+            r,
+            s,
+            v: Number(v ?? BigInt(0)),
+          },
+          nonce: currentTime,
+          action: {
+            type: "usdSend",
+            signatureChainId: `0x${HYPERLIQUID_CHAIN_ID.toString(16)}`,
+            hyperliquidChain: "Mainnet",
+            destination: destination.toLowerCase(),
+            amount: displayAmount,
+            time: currentTime,
+          },
+        });
+
+        // Check response status.
+        if (!response || response.status !== 200 || response.data?.status !== "ok") {
+          const errorMsg = response?.data?.error || "Failed to send transaction to Hyperliquid";
+          toast.error(errorMsg);
+          throw new Error(errorMsg);
+        }
+
+        toast.success("Transaction sent to Hyperliquid successfully!");
+      } catch (error: any) {
+        console.error("Hyperliquid transfer error:", error);
+
+        // Handle user rejection.
+        if (error?.message?.includes("User rejected") || error?.code === 4001) {
+          toast.error("Transaction signature rejected");
+          throw new Error("User rejected signature");
+        }
+
+        // Handle other errors.
+        const errorMsg = error?.message || "Failed to complete Hyperliquid transfer";
+        toast.error(errorMsg);
+        throw error;
+      }
+    },
+    [walletClient],
+  );
+
+  return {
+    initiateTransfer,
+    getConnectedAddress,
+    isWalletConnected: !!walletClient?.account,
+  };
+}

package/src/anyspend/react/providers/AnyspendProvider.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import { TooltipProvider } from "@b3dotfun/sdk/global-account/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactNode, useState } from "react";
+import { ReactNode } from "react";
 import { FeatureFlags, FeatureFlagsProvider } from "../contexts/FeatureFlagsContext";
 import { StripeRedirectHandler } from "./StripeRedirectHandler";
 
@@ -11,16 +10,6 @@ interface AnyspendProviderProps {
   featureFlags?: FeatureFlags;
 }
 
-const defaultQueryClientConfig = {
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: false,
-      staleTime: 30000,
-    },
-  },
-} as const;
-
 /**
  * AnyspendProvider is a top-level provider that wraps your application to provide
  * query caching and state management for all Anyspend hooks.
@@ -45,16 +34,12 @@ const defaultQueryClientConfig = {
  * ```
  */
 export const AnyspendProvider = function AnyspendProvider({ children, featureFlags }: AnyspendProviderProps) {
-  const [queryClient] = useState(() => new QueryClient(defaultQueryClientConfig));
-
   return (
-    <QueryClientProvider client={queryClient}>
-      <FeatureFlagsProvider featureFlags={featureFlags}>
-        <TooltipProvider>
-          <StripeRedirectHandler />
-          {children}
-        </TooltipProvider>
-      </FeatureFlagsProvider>
-    </QueryClientProvider>
+    <FeatureFlagsProvider featureFlags={featureFlags}>
+      <TooltipProvider>
+        <StripeRedirectHandler />
+        {children}
+      </TooltipProvider>
+    </FeatureFlagsProvider>
   );
 };

package/src/anyspend/types/chain.ts

@@ -1,9 +1,10 @@
-import { Chain } from "viem";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { Chain } from "viem";
 
 export enum ChainType {
   EVM = "evm",
   SOLANA = "solana",
+  HYPERLIQUID = "hyperliquid",
 }
 
 export interface IBaseChain {
@@ -29,3 +30,11 @@ export interface IEVMChain extends IBaseChain {
 export interface ISolanaChain extends IBaseChain {
   type: ChainType.SOLANA;
 }
+
+export interface IHyperliquidChain extends IBaseChain {
+  type: ChainType.HYPERLIQUID;
+  apiUrl: string;
+  blockExplorer: {
+    url: string;
+  };
+}

package/src/anyspend/utils/address.ts

@@ -1,4 +1,5 @@
 import { isAddress } from "viem";
+import { HYPERLIQUID_CHAIN_ID } from "./token";
 
 export function isSolanaAddress(address: string): boolean {
   // Solana addresses are 32-byte base58 strings (usually 32-44 characters)
@@ -10,6 +11,20 @@ export function isEvmOrSolanaAddress(address: string): boolean {
   return isAddress(address) || isSolanaAddress(address);
 }
 
+/**
+ * Check if an address is Hyperliquid's special USDC address.
+ * Hyperliquid USDC uses a special 34-character format (0x + 32 hex digits)
+ * instead of the standard 42-character Ethereum address format.
+ * This is required by Relay SDK for Hyperliquid integration.
+ *
+ * @param chainId - The chain ID to check
+ * @param address - The token address to validate
+ * @returns true if the address is Hyperliquid USDC's special format
+ */
+export function isHyperliquidUSDC(chainId: number, address: string): boolean {
+  return chainId === HYPERLIQUID_CHAIN_ID && address.toLowerCase() === "0x00000000000000000000000000000000";
+}
+
 export function normalizeAddress(address: string): string {
   if (isSolanaAddress(address)) {
     return address;

package/src/anyspend/utils/chain.ts

@@ -14,15 +14,17 @@ import {
   WalletClient,
 } from "viem";
 import { abstract, arbitrum, avalanche, b3, base, bsc, mainnet, optimism, polygon } from "viem/chains";
-import { ChainType, IBaseChain, IEVMChain, ISolanaChain } from "../types/chain";
+import { ChainType, IBaseChain, IEVMChain, IHyperliquidChain, ISolanaChain } from "../types/chain";
 import {
   getAvaxToken,
   getBnbToken,
   getEthToken,
   getHyperEVMNativeToken,
+  getHyperliquidUSDCToken,
   getPolToken,
   getSolanaToken,
   HYPEREVM_CHAIN_ID,
+  HYPERLIQUID_CHAIN_ID,
 } from "./token";
 
 function getCustomEvmChain(chain: Chain, rpcUrl: string): Chain {
@@ -283,11 +285,31 @@ export const SOLANA_MAINNET: ISolanaChain = {
   coingeckoName: "solana",
 };
 
+export const HYPERLIQUID_MAINNET: IHyperliquidChain = {
+  id: HYPERLIQUID_CHAIN_ID,
+  name: "Hyperliquid",
+  type: ChainType.HYPERLIQUID,
+  logoUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/32196.png",
+  nativeRequired: BigInt(0), // No native transfer needed - using Relay's useDepositAddress flow (USDC is native)
+  canDepositNative: true, // Can deposit USDC (native token)
+  defaultToken: getHyperliquidUSDCToken(),
+  nativeToken: getHyperliquidUSDCToken(),
+  coingeckoName: null,
+  apiUrl: "https://api.hyperliquid.xyz",
+  blockExplorer: {
+    url: "https://app.hyperliquid.xyz/explorer",
+  },
+};
+
 export const EVM_CHAINS: Record<number, IEVMChain> = { ...EVM_MAINNET, ...EVM_TESTNET };
 
 export const SOLANA_CHAINS: Record<number, ISolanaChain> = { [RELAY_SOLANA_MAINNET_CHAIN_ID]: SOLANA_MAINNET };
 
-export const ALL_CHAINS: Record<number, IBaseChain> = { ...EVM_CHAINS, ...SOLANA_CHAINS };
+export const HYPERLIQUID_CHAINS: Record<number, IHyperliquidChain> = {
+  [HYPERLIQUID_CHAIN_ID]: HYPERLIQUID_MAINNET,
+};
+
+export const ALL_CHAINS: Record<number, IBaseChain> = { ...EVM_CHAINS, ...SOLANA_CHAINS, ...HYPERLIQUID_CHAINS };
 
 export function getSolanaChains(network: "mainnet" | "testnet"): ISolanaChain {
   invariant(network === "mainnet", "Solana chain is only supported on mainnet");
@@ -335,7 +357,9 @@ export function canDepositNative(chainId: number): boolean {
 }
 
 export function isMainnet(chainId: number): boolean {
-  return EVM_MAINNET[chainId] !== undefined || RELAY_SOLANA_MAINNET_CHAIN_ID === chainId;
+  return (
+    EVM_MAINNET[chainId] !== undefined || RELAY_SOLANA_MAINNET_CHAIN_ID === chainId || HYPERLIQUID_CHAIN_ID === chainId
+  );
 }
 
 export function isTestnet(chainId: number): boolean {
@@ -349,7 +373,13 @@ export function getDefaultToken(chainId: number): components["schemas"]["Token"]
 
 export function getChainName(chainId: number): string {
   invariant(ALL_CHAINS[chainId], `Chain ${chainId} is not supported`);
-  return EVM_CHAINS[chainId] ? EVM_CHAINS[chainId].viem.name : "Solana";
+  const chain = ALL_CHAINS[chainId];
+
+  if (isEvmChain(chainId)) {
+    return (chain as IEVMChain).viem.name;
+  }
+
+  return chain.name;
 }
 
 export function getCoingeckoName(chainId: number): string | null {
@@ -511,6 +541,13 @@ export function getPaymentUrl(address: string, amount: bigint, currency: string,
       return url;
     }
 
+    case ChainType.HYPERLIQUID: {
+      // NOTE: Hyperliquid is only supported as destination chain (not source chain).
+      // Payment URLs are not needed since users cannot send FROM Hyperliquid in our flow.
+      // Return address as placeholder (this code path should not be reached).
+      return address;
+    }
+
     default:
       // Fallback to just the address if chain type is unknown
       return address;
@@ -524,6 +561,10 @@ export function getExplorerTxUrl(chainId: number, txHash: string) {
   if (EVM_CHAINS[chainId]) {
     return EVM_CHAINS[chainId].viem.blockExplorers?.default.url + "/tx/" + txHash;
   }
+  if (HYPERLIQUID_CHAINS[chainId]) {
+    return HYPERLIQUID_CHAINS[chainId].blockExplorer.url + "/tx/" + txHash;
+  }
+  // Default to Solscan for Solana transactions
   return "https://solscan.io/tx/" + txHash;
 }
 
@@ -531,6 +572,10 @@ export function getExplorerAddressUrl(chainId: number, address: string) {
   if (EVM_CHAINS[chainId]) {
     return EVM_CHAINS[chainId].viem.blockExplorers?.default.url + "/address/" + address;
   }
+  if (HYPERLIQUID_CHAINS[chainId]) {
+    return HYPERLIQUID_CHAINS[chainId].blockExplorer.url + "/address/" + address;
+  }
+  // Default to Solscan for Solana addresses
   return "https://solscan.io/account/" + address;
 }
 
@@ -550,3 +595,38 @@ export function getNativeToken(chainId: number): components["schemas"]["Token"]
 export function isEvmChain(chainId: number): boolean {
   return Boolean(EVM_CHAINS[chainId]);
 }
+
+export function isHyperliquidChain(chainId: number): boolean {
+  return HYPERLIQUID_CHAINS[chainId] !== undefined;
+}
+
+export function getHyperliquidChain(chainId: number): IHyperliquidChain {
+  invariant(HYPERLIQUID_CHAINS[chainId], `Chain ${chainId} is not a Hyperliquid chain`);
+  return HYPERLIQUID_CHAINS[chainId];
+}
+
+/**
+ * Get available chain IDs for AnySpend based on context (source or destination).
+ * Filters out chains that shouldn't be available for the given context.
+ *
+ * @param context - "from" for source chains, "to" for destination chains
+ * @returns Array of available chain IDs
+ *
+ * @example
+ * // Get source chains (excludes Hyperliquid)
+ * const sourceChains = getAvailableChainIds("from") // [1, 8453, 137, ...]
+ *
+ * // Get destination chains (includes Hyperliquid)
+ * const destChains = getAvailableChainIds("to") // [1, 8453, 137, ..., 1337]
+ */
+export function getAvailableChainIds(context: "from" | "to"): number[] {
+  const allChainIds = Object.values(ALL_CHAINS).map(chain => chain.id);
+
+  if (context === "from") {
+    // Hyperliquid is only supported as destination chain, not source chain
+    return allChainIds.filter(chainId => chainId !== HYPERLIQUID_CHAIN_ID);
+  }
+
+  // For destination ("to"), all chains are available including Hyperliquid
+  return allChainIds;
+}

package/src/anyspend/utils/token.ts

@@ -1,4 +1,4 @@
-import { RELAY_ETH_ADDRESS, RELAY_SOL_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend/constants";
+import { RELAY_SOL_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID, ZERO_ADDRESS } from "@b3dotfun/sdk/anyspend/constants";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { avalanche, bsc, polygon } from "viem/chains";
 
@@ -6,7 +6,7 @@ export const HYPERLIQUID_CHAIN_ID = 1337;
 export const HYPEREVM_CHAIN_ID = 999;
 
 export function isNativeToken(address: string): boolean {
-  return address.toLowerCase() === RELAY_ETH_ADDRESS || address.toLowerCase() === RELAY_SOL_ADDRESS;
+  return address.toLowerCase() === ZERO_ADDRESS || address.toLowerCase() === RELAY_SOL_ADDRESS;
 }
 
 export function getSolanaToken(): components["schemas"]["Token"] {
@@ -25,7 +25,7 @@ export function getSolanaToken(): components["schemas"]["Token"] {
 export function getEthToken(chainId: number): components["schemas"]["Token"] {
   return {
     chainId: chainId,
-    address: RELAY_ETH_ADDRESS,
+    address: ZERO_ADDRESS,
     symbol: "ETH",
     name: "Ethereum",
     decimals: 18,
@@ -38,7 +38,7 @@ export function getEthToken(chainId: number): components["schemas"]["Token"] {
 export function getPolToken(): components["schemas"]["Token"] {
   return {
     chainId: polygon.id,
-    address: RELAY_ETH_ADDRESS,
+    address: ZERO_ADDRESS,
     symbol: "POL",
     name: "Polygon",
     decimals: 18,
@@ -51,7 +51,7 @@ export function getPolToken(): components["schemas"]["Token"] {
 export function getBnbToken(): components["schemas"]["Token"] {
   return {
     chainId: bsc.id,
-    address: RELAY_ETH_ADDRESS,
+    address: ZERO_ADDRESS,
     symbol: "BNB",
     name: "BNB",
     decimals: 18,
@@ -64,7 +64,7 @@ export function getBnbToken(): components["schemas"]["Token"] {
 export function getAvaxToken(): components["schemas"]["Token"] {
   return {
     chainId: avalanche.id,
-    address: RELAY_ETH_ADDRESS,
+    address: ZERO_ADDRESS,
     symbol: "AVAX",
     name: "AVAX",
     decimals: 18,
@@ -77,7 +77,7 @@ export function getAvaxToken(): components["schemas"]["Token"] {
 export function getHyperEVMNativeToken(): components["schemas"]["Token"] {
   return {
     chainId: HYPEREVM_CHAIN_ID,
-    address: RELAY_ETH_ADDRESS,
+    address: ZERO_ADDRESS,
     symbol: "HYPE",
     name: "HYPE",
     decimals: 18,
@@ -86,3 +86,16 @@ export function getHyperEVMNativeToken(): components["schemas"]["Token"] {
     },
   };
 }
+
+export function getHyperliquidUSDCToken(): components["schemas"]["Token"] {
+  return {
+    chainId: HYPERLIQUID_CHAIN_ID,
+    address: ZERO_ADDRESS,
+    symbol: "USDC",
+    name: "USD Coin",
+    decimals: 6,
+    metadata: {
+      logoURI: "https://ethereum-optimism.github.io/data/USDC/logo.png",
+    },
+  };
+}

package/src/global-account/react/components/B3Provider/B3Provider.tsx

@@ -12,7 +12,7 @@ import { loadGA4Script } from "@b3dotfun/sdk/global-account/utils/analytics";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import "@relayprotocol/relay-kit-ui/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   getLastAuthProvider,
   ThirdwebProvider,
@@ -92,7 +92,11 @@ export function B3Provider({
   useEffect(() => {
     setClientType(clientType);
   }, [clientType]);
-  const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls, connectors, overrideDefaultConnectors });
+
+  const wagmiConfig = useMemo(
+    () => createWagmiConfig({ partnerId, rpcUrls, connectors, overrideDefaultConnectors }),
+    [partnerId, rpcUrls, connectors, overrideDefaultConnectors],
+  );
 
   return (
     <ThirdwebProvider>

package/src/global-account/react/components/SignInWithB3/SignIn.tsx

@@ -13,8 +13,7 @@ import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { cn, truncateAddress } from "@b3dotfun/sdk/shared/utils";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
 import { ReactNode, useEffect } from "react";
-import { useConnectedWallets, useSetActiveWallet } from "thirdweb/react";
-import { useAccountWalletImage } from "../../hooks/useAccountWallet";
+import { useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
 import { ManageAccountButton } from "../custom/ManageAccountButton";
 
 type SignInProps = {
@@ -40,9 +39,10 @@ export function SignIn(props: SignInWithB3Props) {
     isActiveSmartWallet,
     isActiveEOAWallet,
     smartWalletIcon,
-    eoaWalletIcon,
   } = useAccountWallet();
 
+  const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
+
   const isMobile = useIsMobile();
   const { logout } = useAuthentication(partnerId);
   const onDisconnect = async (): Promise<void> => {
@@ -72,8 +72,6 @@ export function SignIn(props: SignInWithB3Props) {
     }
   }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
 
-  const walletImage = useAccountWalletImage();
-
   // Desktop version - original dropdown menu
   return (
     <StyleRoot>
@@ -115,7 +113,7 @@ export function SignIn(props: SignInWithB3Props) {
                       <div className="flex items-center">
                         <img
                           className="bg-b3-react-primary h-16 w-16 rounded-full opacity-100"
-                          src={eoaWalletIcon}
+                          src={walletImage}
                           alt={connectedEOAWallet?.id}
                         />
                         <div className="ml-4 grow">

package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx

@@ -40,7 +40,7 @@ export function LoginStepContainer({ children, partnerId }: LoginStepContainerPr
   const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
 
   return (
-    <div className="flex flex-col items-center justify-center pt-6">
+    <div className="bg-b3-react-background flex flex-col items-center justify-center pt-6">
       {partnerLogo && (
         <img src={partnerLogo} alt="Partner Logo" className="partner-logo mb-6 h-12 w-auto object-contain" />
       )}

package/src/global-account/react/hooks/index.ts

@@ -6,7 +6,6 @@ export { useAnalytics } from "./useAnalytics";
 export { useAuthentication } from "./useAuthentication";
 export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
 export { useB3EnsName } from "./useB3EnsName";
-export { useBestTransactionPath } from "./useBestTransactionPath";
 export { useChainSwitchWithAction } from "./useChainSwitchWithAction";
 export * from "./useClaim";
 export { useClient } from "./useClient";