Hyperliquid SDK Integration

Hyperliquid is a high-performance decentralized exchange (DEX) built on Arbitrum that offers perpetual futures trading with deep liquidity and low fees. The Hyperliquid SDK provides a comprehensive TypeScript interface for interacting with the exchange programmatically. This guide shows you how to integrate the Hyperliquid SDK with the Dynamic JavaScript SDK so connected EVM wallets can sign HyperEVM actions.

HyperEVM vs HyperCore. This recipe targets HyperEVM (Chain ID 999): switch the wallet to that chain and pass a viem WalletClient into Hyperliquid’s ExchangeClient. For HyperCore (EIP-712 signed L1 actions with an embedded wallet, no chain switch), see HyperCore with embedded wallets.

This recipe uses the Dynamic JavaScript SDK (@dynamic-labs-sdk/client + @dynamic-labs-sdk/evm). The React tabs below also use @dynamic-labs-sdk/react-hooks. See the Quickstart for the base setup (or the React Quickstart, with QueryClientProvider outside DynamicProvider).

Prerequisites

Before integrating Hyperliquid with Dynamic, ensure you have:

The Dynamic JavaScript SDK wired up (@dynamic-labs-sdk/client + @dynamic-labs-sdk/evm) — for the React tabs, also @dynamic-labs-sdk/react-hooks with QueryClientProvider outside <DynamicProvider> at the root
Hyperliquid chain enabled in Dynamic dashboard — Enable the Hyperliquid chain (Chain ID: 999) in your Dynamic dashboard under the EVM chains section
Hyperliquid SDK installed — covered in the installation section below
For the smart wallet path only: the ZeroDev extension (@dynamic-labs-sdk/zerodev)

Installation

Install the Hyperliquid SDK in your project:

npm
yarn
pnpm
expo

npm install @nktkas/hyperliquid

yarn add @nktkas/hyperliquid

pnpm add @nktkas/hyperliquid

npx expo install @nktkas/hyperliquid

Creating the Hyperliquid Exchange Client

Hyperliquid’s ExchangeClient needs a viem WalletClient for signing. The JS SDK gives you one via createWalletClientForWalletAccount (and via getSignerForSmartWalletAccount for ZeroDev smart wallets). Switch the wallet’s active chain to Hyperliquid (networkId: '999') first so signatures target the right chain.

If switchActiveNetwork throws NetworkNotAddedError, call addNetwork first, then switch again. See Switch Active Network.

Standard EVM Wallet Integration

JavaScript
React

import * as hl from '@nktkas/hyperliquid';
import { getWalletAccounts, switchActiveNetwork } from '@dynamic-labs-sdk/client';
import { isEvmWalletAccount } from '@dynamic-labs-sdk/evm';
import { createWalletClientForWalletAccount } from '@dynamic-labs-sdk/evm/viem';

async function createHyperliquidExchangeClient() {
  const walletAccount = getWalletAccounts().find(isEvmWalletAccount);
  if (!walletAccount) throw new Error('No EVM wallet connected');

  await switchActiveNetwork({ walletAccount, networkId: '999' });
  const walletClient = await createWalletClientForWalletAccount({ walletAccount });

  return new hl.ExchangeClient({
    transport: new hl.HttpTransport(),
    wallet: walletClient,
  });
}

// Usage example
async function placeOrder() {
  const exchangeClient = await createHyperliquidExchangeClient();

  const orderResult = await exchangeClient.order({
    orders: [{
      a: 0,        // asset index (0 for ETH)
      b: true,     // is_buy (true for buy, false for sell)
      p: '30000',  // price
      s: '0.1',    // size
      r: false,    // reduce_only
      t: { limit: { tif: 'Gtc' } },
    }],
    grouping: 'na',
  });

  console.log('Order placed:', orderResult);
  return orderResult;
}

import { useCallback, useEffect, useState } from 'react';
import * as hl from '@nktkas/hyperliquid';
import { switchActiveNetwork } from '@dynamic-labs-sdk/client';
import { isEvmWalletAccount } from '@dynamic-labs-sdk/evm';
import { createWalletClientForWalletAccount } from '@dynamic-labs-sdk/evm/viem';
import { useGetWalletAccounts } from '@dynamic-labs-sdk/react-hooks';

function useHyperliquidExchangeClient() {
  const { data: walletAccounts = [] } = useGetWalletAccounts();
  const walletAccount = walletAccounts.find(isEvmWalletAccount);
  const [exchangeClient, setExchangeClient] = useState<hl.ExchangeClient | null>(null);

  useEffect(() => {
    let cancelled = false;
    if (!walletAccount) {
      setExchangeClient(null);
      return;
    }

    (async () => {
      await switchActiveNetwork({ walletAccount, networkId: '999' });
      const walletClient = await createWalletClientForWalletAccount({ walletAccount });
      if (cancelled) return;

      setExchangeClient(
        new hl.ExchangeClient({
          transport: new hl.HttpTransport(),
          wallet: walletClient,
        }),
      );
    })().catch((err) => console.error('Failed to create Hyperliquid client:', err));

    return () => {
      cancelled = true;
    };
  }, [walletAccount]);

  return exchangeClient;
}

// Usage example
function usePlaceOrder() {
  const exchangeClient = useHyperliquidExchangeClient();

  return useCallback(async () => {
    if (!exchangeClient) throw new Error('Client not loaded');

    const orderResult = await exchangeClient.order({
      orders: [{
        a: 0,        // asset index (0 for ETH)
        b: true,     // is_buy (true for buy, false for sell)
        p: '30000',  // price
        s: '0.1',    // size
        r: false,    // reduce_only
        t: { limit: { tif: 'Gtc' } },
      }],
      grouping: 'na',
    });

    console.log('Order placed:', orderResult);
    return orderResult;
  }, [exchangeClient]);
}

Smart Wallet Integration

For smart wallets using account abstraction, Hyperliquid still needs to sign with the underlying EOA. Use getSignerForSmartWalletAccount from @dynamic-labs-sdk/zerodev to get a viem WalletClient bound to the EOA:

JavaScript
React

import * as hl from '@nktkas/hyperliquid';
import { getWalletAccounts, switchActiveNetwork } from '@dynamic-labs-sdk/client';
import { isEvmWalletAccount } from '@dynamic-labs-sdk/evm';
import { getSignerForSmartWalletAccount } from '@dynamic-labs-sdk/zerodev';

async function createHyperliquidClientFromSmartWallet() {
  const walletAccount = getWalletAccounts().find(isEvmWalletAccount);
  if (!walletAccount) throw new Error('No EVM wallet connected');

  await switchActiveNetwork({ walletAccount, networkId: '999' });
  const eoaSigner = await getSignerForSmartWalletAccount({
    smartWalletAccount: walletAccount,
  });

  return new hl.ExchangeClient({
    transport: new hl.HttpTransport(),
    wallet: eoaSigner,
  });
}

// Usage example with smart wallet
async function getAccountInfo() {
  const exchangeClient = await createHyperliquidClientFromSmartWallet();
  return exchangeClient.getUserState();
}

import { useCallback, useEffect, useState } from 'react';
import * as hl from '@nktkas/hyperliquid';
import { switchActiveNetwork } from '@dynamic-labs-sdk/client';
import { isEvmWalletAccount } from '@dynamic-labs-sdk/evm';
import { useGetWalletAccounts } from '@dynamic-labs-sdk/react-hooks';
import { getSignerForSmartWalletAccount } from '@dynamic-labs-sdk/zerodev';

function useHyperliquidClientFromSmartWallet() {
  const { data: walletAccounts = [] } = useGetWalletAccounts();
  const walletAccount = walletAccounts.find(isEvmWalletAccount);
  const [exchangeClient, setExchangeClient] = useState<hl.ExchangeClient | null>(null);

  useEffect(() => {
    let cancelled = false;
    if (!walletAccount) {
      setExchangeClient(null);
      return;
    }

    (async () => {
      await switchActiveNetwork({ walletAccount, networkId: '999' });
      const eoaSigner = await getSignerForSmartWalletAccount({
        smartWalletAccount: walletAccount,
      });
      if (cancelled) return;

      setExchangeClient(
        new hl.ExchangeClient({
          transport: new hl.HttpTransport(),
          wallet: eoaSigner,
        }),
      );
    })().catch((err) => console.error('Failed to create Hyperliquid client:', err));

    return () => {
      cancelled = true;
    };
  }, [walletAccount]);

  return exchangeClient;
}

// Usage example with smart wallet
export function useGetAccountInfo() {
  const exchangeClient = useHyperliquidClientFromSmartWallet();

  return useCallback(async () => {
    if (!exchangeClient) throw new Error('Client not ready');
    return exchangeClient.getUserState();
  }, [exchangeClient]);
}

What You Can Do Next

Once you have created the Hyperliquid exchange client, you can access the full range of trading and account management features:

Trading Operations

Place Orders: Market orders, limit orders, and stop orders
Cancel Orders: Cancel individual or all orders
Modify Orders: Update existing order parameters

For comprehensive documentation on all available methods and parameters, visit the Hyperliquid SDK repository.

​Prerequisites

​Installation

​Creating the Hyperliquid Exchange Client

​Standard EVM Wallet Integration

​Smart Wallet Integration

​What You Can Do Next

​Trading Operations

​Related Documentation

Prerequisites

Installation

Creating the Hyperliquid Exchange Client

Standard EVM Wallet Integration

Smart Wallet Integration

What You Can Do Next

Trading Operations

Related Documentation