# Trade on Hyperliquid

Openfort backend wallets implement viem's signing interface, so they plug directly into the [`@nktkas/hyperliquid`](https://github.com/nktkas/hyperliquid) SDK with no adapter needed.

## Architecture

```text
┌──────────────┐     ┌────────────────┐     ┌──────────────────┐
│  Your server │────▶│ Openfort API   │────▶│ Backend wallet   │
│              │     │ (account mgmt) │     │ (viem signer)    │
└──────────────┘     └────────────────┘     └────────┬─────────┘
                                                     │
                                                     ▼
                                            ┌──────────────────┐
                                            │ @nktkas/hyperliquid│
                                            │  ExchangeClient   │
                                            └────────┬─────────┘
                                                     │
                                                     ▼
                                            ┌──────────────────┐
                                            │   Hyperliquid    │
                                            │   Exchange API   │
                                            └──────────────────┘
```

## Prerequisites

* An Openfort account with API keys ([Sign up](https://dashboard.openfort.io))
* Node.js 18+
* `@openfort/openfort-node` and `@nktkas/hyperliquid` installed

```bash
npm install @openfort/openfort-node @nktkas/hyperliquid viem
```

## Quickstart

Create a backend wallet and place your first order.

::::steps

### Create a backend wallet

```ts
import Openfort from '@openfort/openfort-node'

const openfort = new Openfort(process.env.OPENFORT_SECRET_KEY!, {
  walletSecret: process.env.OPENFORT_WALLET_SECRET!,
})

const account = await openfort.accounts.evm.backend.create()

console.log('Wallet address:', account.address)
```

### Connect to Hyperliquid and place an order

```ts
import * as hl from '@nktkas/hyperliquid'

const transport = new hl.HttpTransport({ isTestnet: true })
const exchange = new hl.ExchangeClient({ wallet: account, transport })
const info = new hl.InfoClient({ transport })

// Fetch mid price for ETH
const allMids = await info.allMids()
const ethMid = Number.parseFloat(allMids['ETH'])

// Place a limit buy 5% below mid
await exchange.order({
  orders: [
    {
      a: 4, // ETH asset index
      b: true, // buy
      p: (ethMid * 0.95).toFixed(1),
      s: '0.01',
      r: false, // not reduce-only
      t: { limit: { tif: 'Gtc' } },
    },
  ],
  grouping: 'na',
})
```

::::

## Fund your wallet

Before trading, your backend wallet needs USDC on Hyperliquid's L1.

### Deposit from Arbitrum

Transfer USDC from Arbitrum One to Hyperliquid using `usdClassTransfer`:

```ts
await exchange.usdClassTransfer({
  amount: '100',
  destination: account.address,
  chain: 'Arbitrum',
})
```

### Withdraw to Arbitrum

```ts
await exchange.withdraw({
  destination: account.address,
  amount: '50',
  token: 'usdc:0x...',
})
```

### Testnet faucet

For testnet development, claim mock USDC from the [Hyperliquid testnet faucet](https://app.hyperliquid-testnet.xyz/drip).

## React Native demo

A complete mobile trading application built with Expo and Openfort embedded wallets.

<VideoSnippet title="Hyperliquid React Native demo" src="AHUlXc8lR_w" variant="full" />

<HoverCardLink
  title="View Sample Code"
  subtitle="GitHub Repository"
  description="Complete source code for the Hyperliquid trading application with React Native components and trading logic."
  href="https://github.com/openfort-xyz/recipes-hub/tree/main/hyperliquid"
  img={{
  src: '/img/icons/github-icon.svg',
  alt: 'GitHub Icon',
  className: 'rounded-none',
}}
  color="#333"
  external
/>

## Next steps

<HoverCardLayout>
  <HoverCardLink title="Agent wallets" description="Delegate trading to agent wallets with time-limited permissions." href="/recipes/hyperliquid/agent-wallets" icon={Bot} color="#FAD323" />

  <HoverCardLink title="Executing trades" description="Market, limit, stop-loss, TWAP orders, and leverage configuration." href="/recipes/hyperliquid/trading" icon={LineChart} color="#FAD323" />

  <HoverCardLink title="Policies" description="Restrict signing actions with Openfort's policy engine." href="/recipes/hyperliquid/policies" icon={ShieldCheck} color="#FAD323" />

  <HoverCardLink title="HyperEVM" description="Deploy contracts and send transactions on HyperEVM." href="/recipes/hyperliquid/hyperevm" icon={Cpu} color="#FAD323" />

  <HoverCardLink title="Client-side SDKs" description="Integrate Hyperliquid trading into React and React Native apps." href="/recipes/hyperliquid/client-side" icon={Smartphone} color="#FAD323" />

  <HoverCardLink title="Subaccounts" description="Isolate positions and risk with Hyperliquid vault subaccounts." href="/recipes/hyperliquid/subaccounts" icon={Users} color="#FAD323" />

  <HoverCardLink title="Builder codes" description="Attribute fees and earn revenue from trades." href="/recipes/hyperliquid/builder-codes" icon={Receipt} color="#FAD323" />
</HoverCardLayout>