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.

Project structure

hyperliquid/
├── app/
│   ├── _layout.tsx
│   └── index.tsx
├── assets/
│   └── images/                # App images and icons
├── components/
│   ├── envValidation/         # Environment validation components
│   ├── onboarding/            # Wallet creation and funding screens
│   │   ├── CreateWalletScreen.tsx
│   │   └── FundHyperliquidScreen.tsx
│   └── ui/                    # Reusable UI components
├── constants/
│   ├── hyperliquid.ts         # Hyperliquid API configuration
│   └── network.ts             # Network constants
├── hooks/                     # Custom React hooks
├── services/
│   ├── HyperliquidClient.ts   # Hyperliquid API client
│   └── walletRecovery.ts      # Wallet recovery logic
├── types/                     # TypeScript type definitions
├── utils/
│   ├── config.ts              # App configuration
│   └── transactions.ts        # Transaction helpers
├── entrypoint.ts              # App entry point
├── polyfills.ts               # Crypto polyfills
└── README.md                  # Project documentation

Key features

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

Component	Technology
Frontend	React Native + Expo
Blockchain	Arbitrum Sepolia
Key Libraries	`@nktkas/hyperliquid`, `@openfort/react-native`
Navigation	Expo Router

Quick start

Clone the repository using gitpick:

pnpx gitpick openfort-xyz/recipes-hub/tree/main/hyperliquid openfort-hyperliquid
cd openfort-hyperliquid

Prerequisites

Node.js 18+
iOS Simulator (XCode) or Android Emulator (Android Studio)
Openfort account with Shield configuration (Sign up)
Hyperliquid testnet access (see next section)

Get Hyperliquid testnet access

Create account at Hyperliquid
Deposit at least 5 USDC on mainnet to unlock testnet access
Claim 1000 mock USDC from the testnet faucet
Copy your wallet address for the environment configuration

Backend setup

This app requires a backend for Shield authentication. Set up the Openfort Backend Quickstart:

git clone https://github.com/openfort-xyz/openfort-backend-quickstart.git
cd openfort-backend-quickstart
cp .env.example .env
# Add your Openfort credentials to .env
pnpm install
pnpm dev

The backend runs on http://localhost:3000 and exposes the /api/protected-create-encryption-session endpoint.

See the backend repository for detailed instructions.

Configure environment

cp .env.example .env.local

Update .env.local with your credentials:

OPENFORT_PROJECT_PUBLISHABLE_KEY=pk_test_your_publishable_key
OPENFORT_SHIELD_PUBLISHABLE_KEY=pk_test_your_shield_key
OPENFORT_SHIELD_ENCRYPTION_SHARE=your_shield_encryption_share
OPENFORT_SHIELD_RECOVERY_BASE_URL=http://localhost:3000
OPENFORT_ETHEREUM_PROVIDER_POLICY_ID=pol_your_policy_id
HYPERLIQUID_WALLET_ADDRESS=0x_your_hyperliquid_wallet_address

Install and run

pnpm install
pnpm start          # Start Expo dev server
pnpm run ios        # Launch on iOS simulator
pnpm run android    # Launch on Android emulator

Features

Embedded wallet authentication via Openfort Shield
Hyperliquid testnet integration with live price feeds
Trade flow for HYPE/USDC pairs
Real-time balance polling and order placement

Troubleshooting

Balance not loading – Verify Hyperliquid testnet funds and wallet address
Login fails – Ensure backend is running and OPENFORT_SHIELD_RECOVERY_BASE_URL is correct
Env not loading – Restart Metro after editing .env.local