@b3dotfun/sdk 0.0.83 → 0.0.84-alpha.1

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

@@ -1,12 +1,32 @@
+import { lazy, Suspense } from "react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import PaymentOneClick from "./PaymentOneClick";
-import PaymentStripeWeb2 from "./PaymentStripeWeb2";
+
+// Lazy load Stripe component to prevent loadStripe() from running at module level
+// This prevents EIP-6963 wallet detection events when Stripe is not used
+const PaymentStripeWeb2 = lazy(() => import("./PaymentStripeWeb2"));
 
 interface PaymentVendorUIProps {
   order: components["schemas"]["Order"];
   dstTokenSymbol: string;
 }
 
+function StripeLoadingFallback() {
+  return (
+    <div className="relative my-8 flex w-full flex-1 flex-col items-center justify-center">
+      <div className="bg-as-on-surface-1 flex w-full flex-col items-center justify-center gap-4 rounded-2xl p-8">
+        <div className="bg-as-brand/20 flex h-16 w-16 items-center justify-center rounded-full">
+          <div className="text-as-brand h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" />
+        </div>
+        <div className="text-as-primary/70 text-center">
+          <div className="text-lg font-medium">Loading payment</div>
+          <div className="text-as-primary/50 mt-2 text-sm">Initializing secure payment form...</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function PaymentVendorUI({ order, dstTokenSymbol }: PaymentVendorUIProps) {
   const vendor = order.onrampMetadata?.vendor;
 
@@ -17,7 +37,11 @@ export default function PaymentVendorUI({ order, dstTokenSymbol }: PaymentVendor
 
   // Handle Stripe Web2 payment flow
   if (vendor === "stripe-web2" && order.stripePaymentIntentId) {
-    return <PaymentStripeWeb2 order={order} stripePaymentIntentId={order.stripePaymentIntentId} />;
+    return (
+      <Suspense fallback={<StripeLoadingFallback />}>
+        <PaymentStripeWeb2 order={order} stripePaymentIntentId={order.stripePaymentIntentId} />
+      </Suspense>
+    );
   }
 
   // Return null for unsupported vendors

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ALL_CHAINS, getChainName, getPaymentUrl, RELAY_ETH_ADDRESS } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, getChainName, getPaymentUrl, ZERO_ADDRESS } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { CopyToClipboard, ShinyButton, TextLoop, toast } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
@@ -206,7 +206,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
                   value={getPaymentUrl(
                     order.globalAddress,
                     BigInt(order.srcAmount),
-                    order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress,
+                    order.srcTokenAddress === ZERO_ADDRESS ? "ETH" : order.srcTokenAddress,
                     order.srcChain,
                     srcToken?.decimals,
                   )}

package/src/anyspend/react/components/webview/WebviewOnrampPayment.tsx

@@ -1,11 +1,11 @@
-import { getChainName, STRIPE_CONFIG } from "@b3dotfun/sdk/anyspend";
+import { getChainName } from "@b3dotfun/sdk/anyspend";
+import { getStripePromise } from "@b3dotfun/sdk/shared/utils/payment.utils";
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { toast } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
 import { Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
@@ -13,8 +13,6 @@ import { useEffect, useRef, useState } from "react";
 import { formatUnits } from "viem";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
 
-const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
-
 interface WebviewOnrampPaymentProps {
   srcAmountOnRamp: string;
   recipientAddress?: string;
@@ -309,7 +307,7 @@ function WebviewOnrampPaymentInner({
 
         {/* Stripe Elements */}
         <Elements
-          stripe={stripePromise}
+          stripe={getStripePromise()}
           options={{
             clientSecret,
             appearance: {

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

@@ -8,6 +8,7 @@ export * from "./useCoinbaseOnrampOptions";
 export * from "./useConnectedUserProfile";
 export * from "./useGeoOnrampOptions";
 export * from "./useGetGeo";
+export * from "./useHyperliquidTransfer";
 export * from "./useRecipientAddressState";
 export * from "./useSigMint";
 export * from "./useStripeClientSecret";

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

@@ -1,22 +1,19 @@
-import { useAccountWallet, useProfile } from "@b3dotfun/sdk/global-account/react";
-import { useConnectedWallets } from "thirdweb/react";
+import { useProfile } from "@b3dotfun/sdk/global-account/react";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay";
 
 /**
  * Hook that provides connected user's address, profile, and cleaned display name
  * Combines logic for getting connected address from either global account or thirdweb wallets
  */
-export function useConnectedUserProfile() {
-  const { address: globalAddress } = useAccountWallet();
-  const connectedWallets = useConnectedWallets();
-
-  // Get connected address from global account or first connected wallet
-  const connectedAddress = globalAddress || connectedWallets?.[0]?.getAccount()?.address;
+export function useConnectedUserProfile(selectedCryptoPaymentMethod?: CryptoPaymentMethodType) {
+  const { walletAddress } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
 
   // Fetch profile data for the connected address with cleaned name
-  const connectedProfile = useProfile({ address: connectedAddress });
+  const connectedProfile = useProfile({ address: walletAddress });
 
   return {
-    address: connectedAddress,
+    address: walletAddress,
     profile: connectedProfile,
     name: connectedProfile.data?.name,
     isLoading: connectedProfile.isLoading,

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,12 +1,19 @@
-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";
 
 export const HYPERLIQUID_CHAIN_ID = 1337;
 export const HYPEREVM_CHAIN_ID = 999;
 
+/**
+ * Hyperliquid uses a special 34-character USDC address format (0x + 32 hex digits)
+ * instead of the standard 42-character EVM address format.
+ * This is required by Relay SDK for Hyperliquid integration.
+ */
+export const HYPERLIQUID_USDC_ADDRESS = "0x00000000000000000000000000000000";
+
 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 +32,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 +45,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 +58,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 +71,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 +84,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 +93,16 @@ export function getHyperEVMNativeToken(): components["schemas"]["Token"] {
     },
   };
 }
+
+export function getHyperliquidUSDCToken(): components["schemas"]["Token"] {
+  return {
+    chainId: HYPERLIQUID_CHAIN_ID,
+    address: HYPERLIQUID_USDC_ADDRESS,
+    symbol: "USDC",
+    name: "USD Coin",
+    decimals: 8, // Hyperliquid USDC uses 8 decimals, not 6
+    metadata: {
+      logoURI: "https://ethereum-optimism.github.io/data/USDC/logo.png",
+    },
+  };
+}