@b3dotfun/sdk 0.0.83-test.0 → 0.0.84-alpha.0

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/useAnyspendFlow.ts

@@ -24,7 +24,6 @@ import { components } from "../../types/api";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod";
 import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMethod";
-import { useAutoSetActiveWalletFromWagmi } from "./useAutoSetActiveWalletFromWagmi";
 import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay";
 import { useCryptoPaymentMethodState } from "./useCryptoPaymentMethodState";
 import { useRecipientAddressState } from "./useRecipientAddressState";
@@ -111,9 +110,6 @@ export function useAnyspendFlow({
   const { address: globalAddress } = useAccountWallet();
   const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
 
-  // Auto-set active wallet from wagmi
-  useAutoSetActiveWalletFromWagmi();
-
   // Recipient address state - hook automatically manages priority: props > user selection > wallet/global
   const { setSelectedRecipientAddress, effectiveRecipientAddress } = useRecipientAddressState({
     recipientAddressFromProps: recipientAddress,

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,13 +14,31 @@ 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 { getAvaxToken, getBnbToken, getEthToken, getPolToken, getSolanaToken } from "./token";
+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 {
   return defineChain({ ...chain, rpcUrls: { default: { http: [rpcUrl] } } });
 }
 
+export const hyperEVM = defineChain({
+  id: HYPEREVM_CHAIN_ID,
+  name: "HyperEVM",
+  nativeCurrency: { name: "HyperEVM", symbol: "HYPE", decimals: 18 },
+  rpcUrls: { default: { http: ["https://rpc.hyperliquid.xyz/evm"] } },
+  blockExplorers: { default: { name: "HyperEVM Explorer", url: "https://hyperevmscan.io/" } },
+});
+
 // export const b4testnet = defineChain({
 //   id: 19934,
 //   name: "B4 Testnet",
@@ -189,6 +207,20 @@ export const EVM_MAINNET: Record<number, IEVMChain> = {
     coingeckoName: "abstract",
     wethAddress: "0x3439153eb7af838ad19d56e1571fbd09333c2809",
   },
+  [hyperEVM.id]: {
+    id: hyperEVM.id,
+    name: hyperEVM.name,
+    logoUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/32196.png",
+    type: ChainType.EVM,
+    nativeRequired: parseEther("0.01"),
+    canDepositNative: true,
+    defaultToken: getHyperEVMNativeToken(),
+    nativeToken: getHyperEVMNativeToken(),
+    viem: hyperEVM,
+    pollingInterval: 1000, // 1 second for Hyperliquid
+    coingeckoName: "hyperevm",
+    wethAddress: "0x5555555555555555555555555555555555555555",
+  },
 };
 
 export const EVM_TESTNET: Record<number, IEVMChain> = {
@@ -253,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");
@@ -305,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 {
@@ -319,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 {
@@ -481,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;
@@ -494,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;
 }
 
@@ -501,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;
 }
 
@@ -520,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;
+}