React Integration Guide

This comprehensive guide will walk you through integrating HumanWallet with your React application using Wagmi and TypeScript.

⚡ Already Using Wagmi? Integration Takes 2 Minutes!

Quick Integration for Existing Wagmi Users

If you already have Wagmi set up, just follow these 3 steps:

1. Install the connector:

   npm install @humanwallet/connector

2. Add to your connectors:

   import { humanWalletConnector } from '@humanwallet/connector'
    
   const config = createConfig({
     // your existing config...
     connectors: [
       ...yourExistingConnectors,
       humanWalletConnector({
         projectId: 'your-project-id',
       }),
     ],
   })

3. Use with your existing hooks:

   // Works with all your existing Wagmi hooks!
   const { connect, connectors } = useConnect()
   const humanWallet = connectors.find(c => c.id === 'humanWallet')

That's it! HumanWallet now works seamlessly with your existing Wagmi infrastructure. 🎉

Full Setup Guide

For new projects or those wanting the complete setup process, follow the detailed guide below.

Overview

HumanWallet provides a seamless way to connect your React application to Ethereum and EVM-compatible blockchains. This integration uses:

• HumanWallet Connector: Our custom connector for blockchain interactions
• Wagmi: React hooks for Ethereum
• Viem: TypeScript interface for Ethereum operations
• TanStack Query: State management for async operations

Prerequisites

Installation

Step 1: Configure Package Registry

First, create an .npmrc file in your project root to access the HumanWallet private package:

@humanwallet:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${HW_CONNECTOR_TOKEN}

Step 2: Set Environment Variables

Configure your environment with the HumanWallet package token:

export GITHUB_TOKEN=tu_token_aqui

setx GITHUB_TOKEN "tu_token_aqui"

Step 3: Install Core Packages

Install the HumanWallet connector:

npm install @humanwallet/connector

Install the required Wagmi ecosystem packages:

npm install wagmi viem@2.x @tanstack/react-query

Install Buffer for browser compatibility:

npm install buffer

Configuration

Step 1: Create Environment Configuration

Create a .env file in your project root with your HumanWallet Project ID:

VITE_HW_PROJECT_ID=your_project_id

Step 2: Set Up Wagmi Configuration

Create a basic Wagmi configuration file:

import { createConfig, http } from "wagmi"
import { mainnet, sepolia } from "wagmi/chains"
 
export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

Step 3: Add Environment Variables

Update your config to use the Project ID from environment variables:

import { createConfig, http } from "wagmi"
import { mainnet, sepolia } from "wagmi/chains"
 
const PROJECT_ID = import.meta.env.VITE_HW_PROJECT_ID
 
export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

Step 4: Initialize HumanWallet Connector

Add the HumanWallet connector to your Wagmi configuration:

import { createConfig, http } from "wagmi"
import { mainnet, sepolia } from "wagmi/chains"
import { humanWalletConnector } from "@humanwallet/connector"
 
const PROJECT_ID = import.meta.env.VITE_HW_PROJECT_ID
 
export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  connectors: [

    humanWalletConnector({

      projectId: PROJECT_ID, 
      appName: "My App Name", 
    }), 
  ], 
})

Step 5: Configure Buffer for Browser Compatibility

Create a polyfills file in your src directory:

import { Buffer } from "buffer"
 
// Make Buffer available globally for libraries that need it
// Reference: https://developers.binance.com/docs/binance-w3w/evm-compatible-provider#buffer-is-not-defined
window.Buffer = Buffer

Update your main entry file (typically src/main.tsx) to import the polyfills first:

import "./polyfills"
 
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { Providers } from "./providers.tsx"
import App from "./App.tsx"
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Providers>
      <App />
    </Providers>
  </StrictMode>,
)

Then add this script to your index.html in the <head> section:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My App</title>
  <script>
    var global = global || window
  </script> 
</head>

Application Setup

Step 6: Create Provider Components

Create the following files to structure your application:

import { createConfig, http } from "wagmi"
import { mainnet, sepolia } from "wagmi/chains"
import { humanWalletConnector } from "@humanwallet/connector"
 
const PROJECT_ID = import.meta.env.VITE_HW_PROJECT_ID
 
export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  connectors: [
    humanWalletConnector({
      projectId: PROJECT_ID,
      appName: "My App Name",
    }),
  ],
})

Next Steps

You can now:

• ✅ Use Wagmi hooks to interact with the blockchain
• ✅ Connect and disconnect wallets through the HumanWallet interface
• ✅ Access account information and perform transactions
• ✅ Leverage TanStack Query for efficient data management

Continue Learning