Hyperliquid Staking

A standalone implementation of Hyperliquid staking functionality extracted from the Validao referral system. This provides wallet integration, staking/unstaking operations, and balance management for the Hyperliquid blockchain.

Features

• 🔗 Wallet Integration: Connect via MetaMask, WalletConnect, and other popular wallets using RainbowKit
• 💰 Staking Operations: Stake and unstake HYPE tokens with ValiDAO validators
• 📊 Balance Management: View wallet, staked, spot, and pending rewards balances
• 🔄 Transfer Support: Transfer HYPE from spot to staking balance
• 🌐 Network Support: Both mainnet and testnet configurations
• 🎯 Referral System: Optional referral code support for tracking delegations

Installation

npm install

Configuration

WalletConnect Project ID

To use WalletConnect, you'll need to get a project ID:

1. Go to https://cloud.walletconnect.com
2. Create a new project
3. Copy your project ID
4. Update src/lib/walletProvider.tsx:

const config = getDefaultConfig({
  appName: "Hyperliquid Staking",
  projectId: "YOUR_WALLETCONNECT_PROJECT_ID", // <-- Add your ID here
  // ...
});

Usage

Development

npm run dev

This will start the development server at http://localhost:5173

Build

npm run build

This creates a production build in the dist folder.

As a React Component

import { HyperliquidStaking, WalletProvider } from 'hyperliquid-staking';

function App() {
  return (
    <WalletProvider>
      <HyperliquidStaking 
        isTestnet={false}           // Use mainnet (default)
        referralCode="your-code"    // Optional referral tracking
      />
    </WalletProvider>
  );
}

Using the Hook

import { useHyperliquidStaking } from 'hyperliquid-staking';

function MyComponent() {
  const {
    chain,
    data,
    loading,
    stake,
    unstake,
    isConnected,
    address
  } = useHyperliquidStaking(false); // false for mainnet, true for testnet

  const handleStake = async () => {
    try {
      const result = await stake(10, "optional-referral-code");
      console.log("Staked successfully:", result.transactionHash);
    } catch (error) {
      console.error("Staking failed:", error);
    }
  };

  return (
    <div>
      <p>Wallet Balance: {data.balance} HYPE</p>
      <p>Staked Amount: {data.stakedAmount} HYPE</p>
      <button onClick={handleStake}>Stake 10 HYPE</button>
    </div>
  );
}

Architecture

Core Components

• HyperliquidStaking: Main UI component for staking interface
• WalletProvider: Wagmi and RainbowKit provider wrapper
• useHyperliquidStaking: React hook for staking operations

Chain Configuration

• Mainnet: Arbitrum One (Chain ID: 42161)
• Testnet: Arbitrum Sepolia (Chain ID: 421614)
• Token: HYPE with 8 decimals

Key Files

src/
├── components/
│   └── HyperliquidStaking.tsx    # Main staking UI component
├── hooks/
│   └── useHyperliquidStaking.ts  # Staking operations hook
├── lib/
│   ├── chains/
│   │   └── hyperliquid/
│   │       ├── adapter.ts        # Wallet adapter implementation
│   │       ├── api.ts            # Hyperliquid API client
│   │       ├── hyperliquid.ts    # Mainnet configuration
│   │       └── hyperliquid-testnet.ts # Testnet configuration
│   ├── utils.ts                  # Utility functions
│   └── walletProvider.tsx        # Wallet connection provider
└── index.ts                      # Library exports

Staking Operations

Stake HYPE

const result = await stake(amount, referralCode);
// Returns: { transactionHash: string, height: number }

Unstake HYPE

const result = await unstake(amount);
// Returns: { transactionHash: string }

Transfer from Spot to Staking

The Hyperliquid adapter includes a method to transfer HYPE from spot balance to staking balance:

const adapter = walletAdapter as HyperliquidWalletAdapter;
await adapter.transferFromSpotToPerp(amount);

Transaction Signing

Hyperliquid uses EIP-712 typed data signatures for staking operations:

• Domain: HyperliquidSignTransaction
• Types: HyperliquidTransaction:TokenDelegate
• Chain ID: Arbitrum chain IDs

Development

Type Checking

npm run typecheck

Customization

You can customize the UI by modifying the Tailwind CSS classes in HyperliquidStaking.tsx or create your own component using the useHyperliquidStaking hook.

Dependencies

• React 18+
• Wagmi 2.12+
• RainbowKit 2.2+
• Viem 2.21+
• Ethers 6.13+
• TailwindCSS 3.4+

License

Extracted from Validao Referral System