Docs/Hyperkit SDK/Getting Started

Getting Started

Get up and running with Hyperkit SDK in minutes. This guide will help you install the SDK, set up the provider, and use your first component.

Prerequisites

Before you begin, ensure you have:

Node.js 18+

Required for React applications

React 18+

Hyperkit SDK is built for React

A Web3 Wallet

MetaMask, Coinbase Wallet, or any EIP-1193 compatible wallet

Installation

Install Hyperkit SDK using your preferred package manager:

npm install hyperkit

Peer Dependencies

Hyperkit SDK requires React 18+ and React DOM 18+ as peer dependencies. Make sure they are installed in your project.

Provider Setup

Wrap your application with HyperkitProvider and import the required styles:

App.tsx

import { HyperkitProvider } from 'hyperkit';
import 'hyperkit/dist/hyperkit.css';

function App() {
  return (
    <HyperkitProvider defaultNetwork="metis-hyperion-testnet">
      <YourAppContent />
    </HyperkitProvider>
  );
}

export default App;

Your First Component

Use the pre-built ConnectWallet component to handle wallet interactions:

Header.tsx

import { ConnectWallet } from 'hyperkit';

function Header() {
  return (
    <header>
      <ConnectWallet />
    </header>
  );
}

Access wallet state using the useWallet hook:

Profile.tsx

import { useWallet } from 'hyperkit';

function Profile() {
  const { wallet } = useWallet();
  
  if (!wallet.isConnected) return <p>Please connect your wallet</p>;
  
  return <p>Connected as: {wallet.account}</p>;
}

Next Steps

1. Explore Components

Learn about all available components: Swap, Bridge, Staking, and more

View Components

2. Learn About Hooks

Use hooks to access wallet state and manage alerts

View Hooks

3. Check Out Examples

See real-world usage examples and integration patterns

View Examples

Overview

Components