菜单
React and Next.js project setup for GDEX — SDK initialization, context providers, environment variables, and TypeScript configuration
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
HyperLiquid perpetual futures — open/close positions, set leverage, place market and limit orders with TP/SL, and manage open orders
CSS theming system for GDEX trading UIs — dark/light modes, trading colors, responsive breakpoints, and Tailwind CSS configuration
Troubleshoot GDEX SDK errors — error codes, encryption debugging, chain-specific quirks, HL gotchas, and copy trade pitfalls
Start here — GDEX overview, architecture, supported chains, available skills, and quickstart for cross-chain DeFi trading via managed-custody wallets
HyperLiquid HIP-3 outcome / event markets — list markets, place outcome orders, and manage outcome positions
Deposit and withdraw USDC to/from HyperLiquid for perpetual futures trading — constraints, amounts, and managed-custody flow
| name | gdex-ui-install-setup |
| description | React and Next.js project setup for GDEX — SDK initialization, context providers, environment variables, and TypeScript configuration |
Set up a React or Next.js project to build trading UIs with the GDEX SDK. This skill covers project scaffolding, provider patterns, and SDK initialization.
npx create-next-app@latest my-gdex-app --typescript --tailwind --app
cd my-gdex-app
npm install @gdexsdk/gdex-skill ethers
npm create vite@latest my-gdex-app -- --template react-ts
cd my-gdex-app
npm install @gdexsdk/gdex-skill ethers
# .env.local (Next.js) or .env (Vite)
NEXT_PUBLIC_GDEX_API_KEY=9b4e1c73-6a2f-4d88-b5c9-3e7a2f1d6c54
# Or use the secondary key:
# NEXT_PUBLIC_GDEX_API_KEY=2c8f0a91-5d34-4e7b-9a62-f1c3d8e4b705
For Vite, use
VITE_GDEX_API_KEYprefix instead ofNEXT_PUBLIC_.
Create a React context that initializes and shares the GdexSkill instance across your app:
// src/providers/GdexProvider.tsx
'use client'; // Next.js App Router
import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
import { GdexSkill } from '@gdexsdk/gdex-skill';
interface GdexContextValue {
skill: GdexSkill;
isReady: boolean;
error: string | null;
}
const GdexContext = createContext<GdexContextValue | null>(null);
export function GdexProvider({ children, apiKey }: { children: React.ReactNode; apiKey: string }) {
const skillRef = useRef(new GdexSkill());
const [isReady, setIsReady] = useState(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
try {
skillRef.current.loginWithApiKey(apiKey);
setIsReady(true);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to initialize GDEX SDK');
}
}, [apiKey]);
return (
<GdexContext.Provider value={{ skill: skillRef.current, isReady, error }}>
{children}
</GdexContext.Provider>
);
}
export function useGdex(): GdexContextValue {
const ctx = useContext(GdexContext);
if (!ctx) throw new Error('useGdex must be used within <GdexProvider>');
return ctx;
}
// src/app/layout.tsx
import { GdexProvider } from '@/providers/GdexProvider';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<GdexProvider apiKey={process.env.NEXT_PUBLIC_GDEX_API_KEY!}>
{children}
</GdexProvider>
</body>
</html>
);
}
// src/main.tsx
import { GdexProvider } from './providers/GdexProvider';
ReactDOM.createRoot(document.getElementById('root')!).render(
<GdexProvider apiKey={import.meta.env.VITE_GDEX_API_KEY}>
<App />
</GdexProvider>
);
Build feature-specific hooks on top of useGdex():
// src/hooks/usePortfolio.ts
import { useState, useCallback } from 'react';
import { useGdex } from '@/providers/GdexProvider';
export function usePortfolio() {
const { skill, isReady } = useGdex();
const [portfolio, setPortfolio] = useState<any>(null);
const [loading, setLoading] = useState(false);
const refresh = useCallback(async () => {
if (!isReady) return;
setLoading(true);
try {
const data = await skill.getPortfolio();
setPortfolio(data);
} finally {
setLoading(false);
}
}, [skill, isReady]);
return { portfolio, loading, refresh };
}
// src/hooks/useTrade.ts
import { useState } from 'react';
import { useGdex } from '@/providers/GdexProvider';
export function useTrade() {
const { skill, isReady } = useGdex();
const [pending, setPending] = useState(false);
const [result, setResult] = useState<any>(null);
const buyToken = async (params: { chain: string; tokenAddress: string; amount: string; slippage?: number }) => {
if (!isReady) throw new Error('SDK not ready');
setPending(true);
try {
const res = await skill.buyToken(params);
setResult(res);
return res;
} finally {
setPending(false);
}
};
const sellToken = async (params: { chain: string; tokenAddress: string; amount: string; slippage?: number }) => {
if (!isReady) throw new Error('SDK not ready');
setPending(true);
try {
const res = await skill.sellToken(params);
setResult(res);
return res;
} finally {
setPending(false);
}
};
return { buyToken, sellToken, pending, result };
}
Ensure your tsconfig.json includes Node.js types for the SDK:
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"strict": true,
"jsx": "react-jsx",
"paths": {
"@/*": ["./src/*"]
}
}
}
For apps with wallet connection + GDEX + theming:
ThemeProvider ← dark/light mode (see gdex-ui-theming)
└─ WalletProvider ← wallet connection (see gdex-ui-wallet-connection)
└─ GdexProvider ← SDK instance + auth state
└─ App ← your trading UI