Trade on Hyperliquid

Overview

Expo React Native application showcasing how Openfort's embedded wallets integrate with Hyperliquid's testnet exchange.

Complete source code for the Hyperliquid trading application with React Native components and trading logic.

View Sample Code

GitHub Repository

Project Structure

hyperliquid/
├── app/
│   ├── _layout.tsx
│   └── index.tsx
├── components/
│   ├── LoginScreen.tsx
│   ├── MainAppScreen.tsx
│   ├── UserScreen.tsx
│   └── onboarding/
│       ├── CreateWalletScreen.tsx
│       └── FundHyperliquidScreen.tsx
├── constants/
│   ├── hyperliquid.ts
│   └── network.ts
├── services/
│   ├── HyperliquidClient.ts
│   └── walletRecovery.ts
├── utils/
│   ├── config.ts
│   └── transactions.ts
└── entrypoint.ts

Key Features

• Openfort embedded wallet authentication
• Hyperliquid price polling and balance display
• Guided trade flow
• Reusable onboarding screens

Setup

Before running this sample, you need to set up Hyperliquid testnet access:

1. Login to Hyperliquid: Create an account and login at Hyperliquid

2. Deposit USDC on Mainnet: You must deposit at least 5 USDC on the Hyperliquid mainnet to gain access to the testnet faucet

3. Get Testnet Funds: Once you have deposited 5 USDC on mainnet, claim 1000 mock USDC from the testnet faucet at: https://app.hyperliquid-testnet.xyz/drip

4. Note Your Wallet Address: Copy the address of your logged-in Hyperliquid wallet for the next step

5. Copy .env.example to .env.local

6. Populate environment variables

7. Install dependencies: npm install

8. Run: npm start

Prerequisites

• Node.js 18+
• npm or yarn
• Expo CLI
• Hyperliquid mainnet account
• Openfort dashboard project