HyperEVM

On HyperEVM you build your frontend against the Trading SDK, specifically @symmio/trading-react. It gives you a provider and typed hooks for wallet connection, sub-account state, deposits, session-key delegation, and trading, all wired to wagmi and TanStack Query. You do not hand-encode AccountLayer _call() payloads, and you keep full control of your own UI.

Your solver counterparty on HyperEVM is Enigma (0x76bc5889c0cfcC20960b0D81F541595d81a95122), which also serves as the price feed. The SDK talks to it for you.

Install

pnpm add @symmio/trading-react viem wagmi @tanstack/react-query

Set up the providers

"use client";
import { SymmioProvider, SymmioSupportedChainId } from "@symmio/trading-react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useState } from "react";
import { http } from "viem";
import { hyperEvm } from "viem/chains";
import { createConfig, WagmiProvider } from "wagmi";
import { injected } from "wagmi/connectors";

const wagmiConfig = createConfig({
  chains: [hyperEvm],
  transports: { [hyperEvm.id]: http("https://rpc.hyperliquid.xyz/evm") },
  connectors: [injected()],
});

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <SymmioProvider
          symmioConfig={{
            [SymmioSupportedChainId.HYPER_EVM]: {
              addresses: { affiliatesAddress: "0xYourRegisteredAffiliate" },
            },
          }}
        >
          {children}
        </SymmioProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Provider order matters: Wagmi outside QueryClient outside SymmioProvider. The SDK reads both wagmi and the QueryClient from context.

Build against the hooks

From there, build your UI against the documented hooks:

• Wallet: useConnectWallet, useWalletAccount, useSwitchToSymmioChain

• Accounts: useUserSubAccounts, useAccountBalanceOf, useAccountBalanceInfo

• Funding: useApproveCollateral, useDeposit, useAllocate, useDeallocate

• Session key / delegation: useGrantDelegation, useIsDelegationActive

• Markets and prices: useMarkets, plus useEnigmaPriceServicePrices, useEnigmaPriceServiceMetadata, useEnigmaPriceServiceSymbolsInfo, useEnigmaPriceServiceHealth

• Trading: useInstantOpenAuto, useInstantCloseAuto, useManagedQuotes

• TP/SL: useSetQuoteTpSl, useQuoteTpSl

Full hook reference: https://doc.trading-sdk.symm.io/react/

The underlying flow

The hooks wrap the same protocol steps a headless bot performs: create a SubAccount with the SDK's createSubAccounts, fund and allocate collateral, delegate a session key, then open, manage, and close positions against Enigma. Building a Trading Bot walks that flow call by call; the same sequence applies here, hook for hook. Three details worth internalizing before you wire up the UI:

• Approval and deposit amounts (useApproveCollateral, useDeposit) use collateral-token decimals (6 for USDC), while useAllocate takes an 18-decimal amount.

• Closes and TP/SL belong to the position's Virtual Account, not the SubAccount. Pass the VA where the API asks for partyA or virtualAccount.

• Delegation must be active before the first open, or the open fails silently. Grant the full INSTANT_TRADE_REQUIRED_SELECTORS set and gate the trade form until every selector checks active.

Only HyperEVM (999) is deployed today. For Base, Arbitrum, Mantle, BNB, and the other SYMMIO deployments, use frontend-sdk instead.