Getting Started

The fastest path to a working React app that reads from SYMMIO.

1. Install


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

@symmio/trading-react is the umbrella package — it pulls in @symmio/trading-core, @symmio/utils, and zustand transitively. The other four are peer dependencies you control.

2. Mount providers

The React SDK assumes the host app mounts wagmi and @tanstack/react-query itself. That keeps the host in control of connectors, RPC URLs, and the shared QueryClient.


"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
          config={{
            chainId: SymmioSupportedChainId.HYPER_EVM,
            affiliateAddress: "0xYourAffiliateAddress",
          }}
        >
          {children}
        </SymmioProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

The order of providers matters. Wagmi outside QueryClient outside SymmioProvider — the SDK reads both wagmi and QueryClient from context.

3. Read on-chain data


"use client";
 
import { useUserSubAccounts, useWalletAccount } from "@symmio/trading-react";
 
export function Subaccounts() {
  const { address } = useWalletAccount();
  const { data, isLoading, error } = useUserSubAccounts({ user: address });
 
  if (!address) return <p>Connect a wallet first.</p>;
  if (isLoading) return <p>Loading…</p>;
  if (error) return <p>{error.message}</p>;
 
  return (
    <ul>
      {data?.map((sub) => (
        <li key={sub.accountAddress}>{sub.name}</li>
      ))}
    </ul>
  );
}

4. Send a transaction


"use client";
 
import { useEditAccountName } from "@symmio/trading-react";
 
export function RenameButton({ account }: { account: `0x${string}` }) {
  const { mutate, isPending, error } = useEditAccountName();
  return (
    <>
      <button onClick={() => mutate({ account, name: "Trading bot" })} disabled={isPending}>
        {isPending ? "Sending…" : "Rename"}
      </button>
      {error?.kind === "user-rejected" ? null : error && <p>{error.message}</p>}
    </>
  );
}

Next steps

Skim the library indexes to see what’s available: Core, React, Utils.
The Inspector app in apps/web (route /inspector/account-layer) is a live, working integration target.