Web3 Frontend Setup

🌉 Web3 Frontend Setup: Your Bridge to the Blockchain

Imagine you want to enter a magical castle (the blockchain). You need a special key (your wallet), a translator (Web3 libraries), and a trusted guide (provider). Let’s learn how to build this bridge!

🎯 What You’ll Learn

graph TD
    A["You"] -->|Connect| B["Wallet"]
    B -->|Through| C["Provider"]
    C -->|Using| D["Web3 Libraries"]
    D -->|Talk to| E["Blockchain"]

🔐 Web3 Authentication

The Bouncer at the Club

Think of Web3 authentication like showing your ID at a club entrance. But here’s the cool part: you own your ID card, not the club!

In traditional apps (like Facebook):

• They hold your password
• They can lock you out
• They know everything about you

In Web3:

• You hold your keys
• You prove who you are
• You control your data

How It Works

// Instead of username/password:
// "Hey, I'm user123, password: secret"

// Web3 says:
// "Sign this message to prove
// you own this wallet"
const message = "Login to CoolApp";
const signature = await wallet.sign(message);

Real Example: When you click “Connect Wallet” on OpenSea or Uniswap, they ask your wallet to sign a message. That signature proves you own the wallet!

👛 Wallet Connection

Your Digital Pocket

A wallet is like a magical keychain that:

• Holds your digital money (tokens)
• Proves your identity
• Signs permission slips (transactions)

Popular Wallets

Connecting a Wallet

// Check if wallet exists
if (window.ethereum) {
  // Ask permission to connect
  const accounts = await window
    .ethereum
    .request({
      method: 'eth_requestAccounts'
    });

  // You got the user's address!
  console.log(accounts[0]);
}

What Happens:

1. Your app asks: “Can I see your wallet?”
2. Wallet pops up: “Allow this app?”
3. User clicks “Connect”
4. App receives wallet address

🔗 WalletConnect Protocol

The Universal Remote

Remember when every TV needed its own remote? WalletConnect is like a universal remote for wallets!

The Problem It Solves

Without WalletConnect:

• Each wallet = different code
• Phone wallet + Desktop app = 😵
• So many integrations!

With WalletConnect:

• One protocol, all wallets
• Scan QR, instant connect
• Phone ↔ Desktop magic!

How It Works

graph TD
    A["Your dApp"] -->|Shows QR| B["WalletConnect"]
    B -->|User Scans| C["Phone Wallet"]
    C -->|Secure Bridge| A

// Initialize WalletConnect
import { WalletConnect } from
  "@walletconnect/client";

const connector = new WalletConnect({
  bridge: "https://bridge.wallet..."
});

// Generate QR code
if (!connector.connected) {
  await connector.createSession();
  // Show connector.uri as QR
}

Magic Moment: User scans QR with phone → Wallet connects to your desktop app instantly!

🧰 Wallet Connection Kits

The Easy Button

Building wallet connection from scratch is hard. Connection kits are like IKEA furniture – everything included!

Popular Kits

RainbowKit 🌈

import { ConnectButton } from
  '@rainbow-me/rainbowkit';

// That's it! Beautiful button ready
<ConnectButton />

Web3Modal 🎨

import { Web3Modal } from
  '@web3modal/html';

const modal = new Web3Modal({
  projectId: 'your-id'
});

modal.openModal();

ConnectKit ⚡

import { ConnectKitButton } from
  'connectkit';

<ConnectKitButton />

Why Use Kits?

📚 Web3 JavaScript Libraries

Your Translation Dictionary

The blockchain speaks a weird language. Libraries are translators that help your app talk to it!

The Big Three

Ethers.js – The Friendly One

import { ethers } from 'ethers';

// Get balance (easy!)
const balance = await provider
  .getBalance(address);

// Convert to readable
ethers.formatEther(balance);
// "1.5" ETH

Web3.js – The Original

import Web3 from 'web3';

const web3 = new Web3(provider);
const balance = await web3.eth
  .getBalance(address);

Viem – The New Kid

import { createPublicClient }
  from 'viem';

const client = createPublicClient({
  transport: http()
});

Comparison

🔌 Provider Pattern

The Power Outlet

A provider is like an electrical outlet for blockchain power. Your app plugs into it to get data!

Types of Providers

graph TD
    A["Your App"] -->|Plugs into| B{Provider}
    B -->|Browser| C["MetaMask"]
    B -->|API| D["Infura/Alchemy"]
    B -->|Direct| E["Your Node"]

Browser Provider (Free!)

// MetaMask injects this
const provider = window.ethereum;

API Provider (Reliable)

// Connect to Infura
const provider = new ethers
  .JsonRpcProvider(
    'https://mainnet.infura.io/v3/KEY'
  );

What Providers Do

Key Point: Providers are read-only. They’re like a window into the blockchain. To DO things, you need a signer!

✍️ Signer Abstraction

The Permission Slip

Remember signing permission slips for school trips? A signer does that for blockchain transactions!

Provider vs Signer

Getting a Signer

// From browser wallet
const provider = new ethers
  .BrowserProvider(window.ethereum);

// Request permission + get signer
const signer = await provider
  .getSigner();

// Now you can sign things!
const address = await signer
  .getAddress();

What Signers Do

// Send money
await signer.sendTransaction({
  to: "0xfriend...",
  value: ethers.parseEther("0.1")
});

// Sign a message (prove identity)
const signature = await signer
  .signMessage("Hello Web3!");

// Interact with contracts
const tx = await contract
  .connect(signer)
  .mint();

Signer Abstraction Magic

Modern tools hide the complexity:

// Old way (scary!)
const wallet = new Wallet(privateKey);
const tx = {
  nonce: await provider.getNonce(),
  gasLimit: 21000,
  gasPrice: await provider.getGasPrice(),
  // ... so much more
};

// New way (easy!)
await signer.sendTransaction({
  to: address,
  value: amount
});
// Library handles everything!

🎯 Putting It All Together

Here’s how all pieces connect:

graph TD
    A["User"] -->|Has| B["Wallet"]
    C["Your App"] -->|Uses| D["Connection Kit"]
    D -->|Via| E["WalletConnect"]
    E -->|Connects| B
    C -->|Uses| F["Web3 Library"]
    F -->|Creates| G["Provider"]
    G -->|Read Only| H["Blockchain"]
    B -->|Becomes| I["Signer"]
    I -->|Write Transactions| H

Complete Example

// 1. Setup (with RainbowKit)
import { ConnectButton } from
  '@rainbow-me/rainbowkit';

// 2. Get provider & signer
const provider = new ethers
  .BrowserProvider(window.ethereum);
const signer = await provider
  .getSigner();

// 3. Read (provider)
const balance = await provider
  .getBalance(address);

// 4. Write (signer)
await signer.sendTransaction({
  to: friend,
  value: ethers.parseEther("1.0")
});

🚀 Quick Summary

💡 Remember

1. Wallets hold your keys, not websites
2. WalletConnect = scan QR, connect anywhere
3. Connection kits save weeks of work
4. Providers read, Signers write
5. Libraries make blockchain easy to talk to

You now have the keys to build the bridge! 🌉

Next up: Try connecting a wallet in the Interactive Lab!