Web3 Wallet Integration Guide for Tetreum Applications

Integrating a Web3 wallet into your Tetreum application is the gateway to user authentication, transaction signing, and on-chain interaction. This guide covers the complete integration path from zero to a working connected wallet.

Choosing a Wallet Integration Library

Two libraries dominate modern Web3 wallet integration: wagmi (React hooks library) and ethers.js (low-level provider library). For new React applications, wagmi v2 is recommended as it handles connection state, account management, and chain switching automatically.

Option A: wagmi (Recommended for React)

// Install dependencies
npm install wagmi viem @tanstack/react-query

// Configure wagmi with Tetreum
import { createConfig, http } from "wagmi";
import { defineChain } from "viem";

const tetreumTestnet = defineChain({
  id: 793788,
  name: "Tetreum Testnet",
  nativeCurrency: { name: "TET", symbol: "TET", decimals: 18 },
  rpcUrls: { default: { http: ["https://testrpc.tetreum.com"] } },
});

export const config = createConfig({
  chains: [tetreumTestnet],
  transports: { [tetreumTestnet.id]: http() },
});

Option B: MetaMask Direct Integration

async function connectMetaMask() {
  if (!window.ethereum) throw new Error("MetaMask not installed");
  const accounts = await window.ethereum.request({
    method: "eth_requestAccounts",
  });
  await window.ethereum.request({
    method: "wallet_addEthereumChain",
    params: [{
      chainId: "0xC1E4C",
      chainName: "Tetreum Testnet",
      rpcUrls: ["https://testrpc.tetreum.com"],
      nativeCurrency: { name: "TET", symbol: "TET", decimals: 18 },
      blockExplorerUrls: ["https://testnet.tetscan.com"],
    }],
  });
  return accounts[0];
}

"Wallet UX makes or breaks a dApp. If users see a confusing network error on first connection, most of them won't come back. Handle network switching gracefully and proactively." — Tetreum DevRel