🔒 ERC-20 Token Staking UI (React + TypeScript)

Production-ready, modular staking UI components for ERC-20 token staking flows. This is a focused UI module (not a full standalone dApp) designed to be embedded into an existing Web3 application.

Successfully used in production by Impermax Finance — reference integration: staking page source.

---

🚀 What you get

• Modern, responsive staking UI built with React, TypeScript, and TailwindCSS
• Wallet connectivity via web3-react and ethers.js
• Robust data fetching and caching with react-query
• Forms and validation via react-hook-form
• Resilient UX: error boundaries, loading states, optimistic updates
• Clean, composable components tailor-made for DeFi staking

---

🧭 Scope and assumptions

This repository contains the staking UI and related view logic only. It assumes your host app provides:

• Project-wide layout and design system (e.g. parts/Layout, components/Panel, components/Tabs)
• Web3 providers and configuration (e.g. @web3-react/core, ethers provider)
• Contract addresses and chain config (e.g. config/web3/...)
• Fetchers/hooks for The Graph or RPC (e.g. services/fetchers/..., services/hooks/...)

You can map these imports to your own equivalents or adapt the paths.

---

🧩 Key components

• index.tsx — Composes the staking page UI (Information + APY + Forms + Balances)
• Information/ — Explains how staking works with a link to docs
• APYCard/ — Displays Staking APY, Total Staked, Total Distributed (live via queries)
• FormCard/ — Tabs for Stake/Unstake flows
  • StakingForm/ — Approve + Stake IMX with validation, transactions, and cache invalidations
  • UnstakingForm/ — Unstake flow (structure mirrors staking)
  • TokenAmountField/, TokenAmountLabel/, SubmitButton/ — Form building blocks
• BalanceCard/ — Shows Staked, Unstaked, and Earned balances

These components are designed to be reused, themed, and composed within your app shell.

---

📦 Installation

Install peer dependencies in your host project:

yarn add react react-dom clsx tailwindcss @web3-react/core ethers react-query react-hook-form react-error-boundary

If you use npm:

npm i react react-dom clsx tailwindcss @web3-react/core ethers react-query react-hook-form react-error-boundary

---

⚙️ Integration guide

1. Provide Web3 context in your app root (simplified example):

import { Web3ReactProvider } from '@web3-react/core';
import { Web3Provider } from '@ethersproject/providers';

function getLibrary(provider: any) {
  return new Web3Provider(provider);
}

export function App() {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      {/* your routes/components */}
    </Web3ReactProvider>
  );
}

2. Ensure contract addresses and chain configs exist and are imported by the staking UI:

• config/web3/chains (e.g. CHAIN_IDS)
• config/web3/contracts/imxes, x-imxes, staking-routers (addresses/decimals per chain)

3. Ensure data fetchers and hooks are wired:

• services/fetchers/x-imx-data-fetcher, reserves-distributor-data-fetcher, staking-user-data-fetcher, generic-fetcher
• services/hooks/use-token-balance

4. Mount the staking UI where needed:

import Staking from './index';

export default function StakingRoute() {
  return <Staking />;
}

5. Tailwind setup: ensure Tailwind is configured in your host project and the impermax theme tokens used here exist or are mapped to your design system.

---

🔍 Features in detail

• Live APY and totals: auto-refreshed via react-query with error boundaries
• Wallet-aware forms: Approve/Stake logic based on allowance and balance
• Precise number handling: ethers formatUnits/parseUnits, fixed decimals, commas
• Transaction UX: pending states, error dialogs, and post-tx cache invalidation
• Accessibility & UX: clear labels, helper text, keyboard-friendly tabs

---

🛠️ Tech stack

• UI: React (TypeScript), TailwindCSS, clsx
• State & Data: react-query, react-hook-form, react-error-boundary
• Web3: @web3-react/core, ethers
• Indexing: The Graph (via custom fetchers)

---

📚 Example data dependencies (replace with your own)

• X_IMX_DATA_FETCHER: provides dailyAPR, exchangeRate, totalBalance
• RESERVES_DISTRIBUTOR_DATA_FETCHER: provides distributed
• STAKING_USER_DATA_FETCHER: provides ximxBalance, totalEarned, lastExchangeRate

---

❓ FAQ

• Is this a complete dApp?

  • No. It is a composable UI module meant to be integrated into an existing dApp with your providers, addresses, and fetchers.

• Can I adapt it to a different token?

  • Yes. Replace IMX/xIMX addresses, decimals, and fetchers. The UI is token-agnostic.

• Does it support multiple networks?

  • Yes, via CHAIN_IDS and per-chain address maps.

---

🧪 Local development

In your host app, install dependencies and run as usual:

yarn install
yarn start

Build:

yarn build

---

🔗 Credits & reference

Originally developed for Impermax Finance and integrated in production.

---

🏷️ SEO keywords

ERC-20 staking UI, React staking dApp, DeFi staking frontend, token staking components, web3-react staking, ethers staking UI, React TypeScript DeFi, staking APY component, staking form approve stake, xIMX staking, Impermax staking UI.

---

📄 License

MIT — feel free to use, adapt, and improve.