HPP Portal

Interact with the HPP Mainnet network — migrate assets, bridge to the native network, stake HPP, discover and claim airdrops, and explore the ecosystem. Built for fast, secure, and cost‑effective transactions on AI‑native infrastructure.

Features

• Asset Bridging (to HPP Mainnet): Links to trusted bridges
  • Arbitrum Official Bridge → HPP Mainnet
  • Orbiter Bridge → fast L2 transfers
• Token Migration (AERGO → HPP on Ethereum): In‑app migration
• Staking (HPP on HPP chain): Stake / Unstake / Claim (+ wallet APR / dashboard)
• Ecosystem: Explore partners and integrations
• Airdrop: Discover, join, and claim HPP airdrop events (HPP / DApp / Collaboration). View eligibility, vesting overview, and claim tokens on the HPP chain.
• Web3 Integration: Reown AppKit + Wagmi + Viem

Supported Networks

• Ethereum Mainnet
• Dev for ETH uses Sepolia
• HPP Mainnet (Arbitrum Orbit; chain id 190415)
• Dev: HPP Sepolia (chain id 181228)

Routes

• / Home
• /migration AERGO/AQT (ETH) → HPP (ETH) in‑app migration
• /bridge Bridges to HPP Mainnet — external links to Arbitrum Official Bridge and Orbiter
• /staking HPP staking (stake / unstake / claim)
• /airdrop Airdrop event list (tabs: HPP, DApp, Collaboration)
• /airdrop/[id] Airdrop detail — eligibility, vesting, claim
• /ecosystem HPP ecosystem overview

External Links

• Governance: AIP proposals and voting
  • https://snapshot.box/%5C#/s:hpp.eth
• Build: Developer docs and tools
  • https://docs.hpp.io/
• Staking guide
  • https://docs.hpp.io/community/staking-guide
• Block Explorer: HPP Mainnet and HPP Sepolia
  • Mainnet: https://explorer.hpp.io
  • Sepolia: https://sepolia-explorer.hpp.io

Quick Start

1. Install dependencies

yarn install

2. Create .env.local (start from .env.example) and set the variables below

# Wallet modal chain selection (AppKit/Wagmi)
NEXT_PUBLIC_CHAIN=mainnet # or sepolia

# Reown/AppKit project id (https://dashboard.reown.com)
NEXT_PUBLIC_APP_KIT_PROJECT_ID=

# Public site URL used in metadata (OpenGraph/Twitter images, etc.)
NEXT_PUBLIC_SITE_URL=https://localhost:3000

# Ethereum contract addresses (use mainnet or sepolia addresses accordingly)
NEXT_PUBLIC_ETH_HPP_TOKEN_CONTRACT=0x...
NEXT_PUBLIC_ETH_AERGO_TOKEN_CONTRACT=0x...
NEXT_PUBLIC_ETH_AERGO_HPP_MIGRATION_CONTRACT=0x...
NEXT_PUBLIC_ETH_AQT_TOKEN_CONTRACT=0x...
NEXT_PUBLIC_ETH_AQT_HPP_MIGRATION_CONTRACT=0x...

# HPP chain config (used for staking reads/writes)
NEXT_PUBLIC_HPP_CHAIN_ID=190415
NEXT_PUBLIC_HPP_RPC_URL=https://...
NEXT_PUBLIC_HPP_TOKEN_CONTRACT=0x...
NEXT_PUBLIC_HPP_STAKING_CONTRACT=0x...

# Staking stats APIs (APR, pre-registration date, etc.)
NEXT_PUBLIC_HPP_STAKING_API_URL=https://...

# Blockscout API v2 proxy (used for activity/history)
NEXT_PUBLIC_HPP_BLOCKSCOUT_PROXY_URL=https://...

3. Run the app (HTTPS dev server enabled)

yarn dev

Open https://localhost:3000.

Scripts

• yarn dev — start dev server with HTTPS
• yarn build — build for static export
• yarn start — start production server (if applicable)
• yarn lint — lint

Build & Deploy

• next.config.ts is configured with output: 'export' and trailingSlash: true.
• Build output is a static site suitable for static hosting providers.

Tech Stack

• Next.js v15 (App Router), TypeScript
• Tailwind CSS v4 (utility‑first styling)
• Reown AppKit (wallet UX) + Wagmi + Viem

Migration to HPP Mainnet

1. AERGO (Mainnet) → HPP (ETH): Use the official Aergo Bridge
2. AERGO (ETH) → HPP (ETH): Use the in‑app migration page (/migration)
3. HPP (ETH) → HPP Mainnet: Use the Arbitrum Canonical Bridge

Airdrop

• List (/airdrop): Events by type (HPP / DApp / Collaboration); responsive layout (accordion + table on mobile/tablet, table on desktop). Data from NEXT_PUBLIC_HPP_STAKING_API_URL (e.g. /airdrop/type/{type}).
• Detail (/airdrop/[id]): Eligibility status, vesting overview (vested / not vested), claim-only flow (HPP chain), history when eligible. Dynamic metadata (OG/twitter) uses event name when available.
• Env: NEXT_PUBLIC_HPP_STAKING_API_URL and contract address from API/detail payload for vesting and claim.

Staking Details

• Claimable: derived from cooldowns; latest first; auto‑updates when ready.
• Countdown: 1s tick; local timezone; no refetch flicker.
• Precision: raw amounts; floored display via formatTokenBalance; clean percent inputs.
• Chain: useHppChain + useEnsureChain for switching; explorer links on success.
• Toasts: unified loading/success/error/info with optional link actions.

Architecture Notes

• src/app/airdrop/AirdropClient.tsx — airdrop list page (tabs, accordion/table)
• src/app/airdrop/[id]/AirdropDetailClient.tsx — airdrop detail (eligibility, vesting, claim, history)
• src/app/airdrop/abi.ts — vesting contract ABI (claimTokens, etc.)
• src/app/staking/StakingClient.tsx — staking UI and on‑chain interactions
• src/app/staking/abi.ts — minimal ABIs incl. cooldownDuration, getCooldownArrayInfo, getCooldown
• src/app/staking/hppClient.ts — useHppChain(), useHppPublicClient(); single source of HPP chain truth
• src/lib/wallet.ts — useEnsureChain() to reliably switch/add chains across desktop & mobile wallets
• src/lib/helpers.ts — formatTokenBalance, formatDisplayAmount, percent helpers using Big.js (no floating point drift)
• src/lib/dayjs.ts — dayjs init + duration plugin (single registration)
• src/hooks/useToast.tsx — unified toasts with link actions