HedgeCoreHedgeCore
Docs
Github
Frontend

HedgeCore protocol user interface repository

Frontend

The HedgeCore frontend provides an intuitive interface for interacting with the protocol's smart contracts.

Repository

🔗 GitHub: github.com/xia-zhang-web3/hedgecore/frontend

Technology Stack

  • Framework: Next.js 15
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Blockchain: ethers.js / wagmi
  • State Management: React Context
  • UI Components: Headless UI

Features

Core Functionality

  • Wallet Connection: MetaMask, WalletConnect support
  • Deposit USDC: Mint soul-bound sUSD tokens
  • View Positions: Real-time balance and lock status
  • Unlock Tokens: Transition from locked to transferable state
  • Wrap/Unwrap: Convert between sUSD and hUSDC
  • Analytics Dashboard: Protocol statistics and APY tracking

User Experience

  • Responsive mobile design
  • Real-time transaction status
  • Gas estimation
  • Error handling and user feedback
  • Lock timer countdown
  • Yield calculations

Repository Structure

frontend/
├── app/
│   ├── dashboard/           # Main dashboard
│   ├── wrap/               # Wrapper interface
│   └── analytics/          # Protocol stats
├── components/
│   ├── wallet/             # Wallet connection
│   ├── forms/              # Input components
│   └── ui/                 # Shared UI
├── hooks/
│   ├── useContract.ts      # Contract interactions
│   ├── useWallet.ts        # Wallet management
│   └── useBalance.ts       # Balance queries
├── lib/
│   ├── contracts/          # Contract ABIs
│   └── utils/              # Helper functions
└── public/                 # Static assets

Development Setup

Prerequisites

  • Node.js 18+
  • npm or yarn
  • MetaMask wallet

Installation

git clone https://github.com/xia-zhang-web3/hedgecore.git
cd hedgecore/frontend
npm install

Environment Variables

Create .env.local:

NEXT_PUBLIC_CHAIN_ID=56
NEXT_PUBLIC_RPC_URL=https://bsc-dataseed.binance.org
NEXT_PUBLIC_SUSDC_ADDRESS=0x...
NEXT_PUBLIC_HUSDC_ADDRESS=0x...
NEXT_PUBLIC_WRAPPER_ADDRESS=0x...

Run Development Server

npm run dev

Open http://localhost:3000

Build for Production

npm run build
npm start

Key Components

WalletConnect Component

// components/wallet/WalletConnect.tsx
export function WalletConnect() {
  const { connect, disconnect, address } = useWallet()

  return (
    <button onClick={address ? disconnect : connect}>
      {address ? `${address.slice(0, 6)}...` : 'Connect Wallet'}
    </button>
  )
}

Deposit Form

// components/forms/DepositForm.tsx
export function DepositForm() {
  const { deposit, isLoading } = useContract()

  const handleDeposit = async (amount: string) => {
    await deposit(parseUnits(amount, 18))
  }

  return <form onSubmit={handleDeposit}>...</form>
}

Balance Display

// components/dashboard/Balance.tsx
export function Balance() {
  const { sUSDBalance, hUSDCBalance } = useBalance()

  return (
    <div>
      <p>sUSD: {formatUnits(sUSDBalance, 18)}</p>
      <p>hUSDC: {formatUnits(hUSDCBalance, 18)}</p>
    </div>
  )
}

Deployment

Vercel (Recommended)

  1. Push to GitHub
  2. Import project in Vercel
  3. Configure environment variables
  4. Deploy

Alternative Hosting

Compatible with:

  • Netlify
  • AWS Amplify
  • Cloudflare Pages
  • Self-hosted

Contributing

We welcome frontend contributions:

  1. Fork the repository
  2. Create a feature branch
  3. Implement your changes
  4. Test thoroughly
  5. Submit a pull request

Development Guidelines

  • Follow TypeScript best practices
  • Maintain responsive design
  • Add proper error handling
  • Write clear component documentation
  • Test on multiple devices/browsers

License

MIT License - see LICENSE file for details

PreviousNext