Day 4 - Web3 and Frontend: Building Your First DApp

·

Today, we'll use React to build a simple decentralized application (DApp). Many blockchain applications rely solely on frontend technologies because they can use the blockchain itself as their backend—blockchains inherently support read/write operations.

Understanding Blockchain Node Services

For reading data, you can use blockchain node service providers to access real-time on-chain information. For writing data, you send transaction requests through a wallet. Users confirm transactions in their wallets, which then sends the transaction to a blockchain node to await inclusion in the blockchain. These requests follow the JSON RPC format, so nodes are often called RPC Nodes.

Both read and write operations rely on blockchain node service providers, making them essential to blockchain applications. As we've discussed before:

Blockchains are fundamentally ledgers that record asset ownership for each account (i.e., addresses). What makes them unique is that this data is public and replicated across countless computers (nodes), secured by cryptographic mechanisms to prevent tampering.

Developing a DApp becomes costly if you must host your own node and sync the entire blockchain history—for example, Bitcoin's historical data exceeds 500GB, and Ethereum's surpasses 1000GB. Instead, most projects use prebuilt node services like Alchemy (a leading provider alongside Infura and Quicknode). This guide assumes you’ve registered with Alchemy. For self-hosting nodes, refer to Ethereum’s Run a Node guide.

Today’s Objectives

Our goal is to replicate core functionalities seen in Uniswap:

Preparations

  1. Alchemy Setup

    • Create a new app in Alchemy’s Apps Dashboard.
    • Select Ethereum Sepolia (testnet) for Chain/Network.
    • Note your API Key under View Keys.

  2. Frontend Project

    • Initialize a project (e.g., pnpm create next-app).

WAGMI Implementation

We’ll use wagmi—a library offering hooks for wallet/Ethereum interactions—to avoid low-level JSON-RPC coding. Install it via:

pnpm i wagmi viem

👉 Why WAGMI? It stands for "We All Gonna Make It," a popular web3 meme during NFT’s early hype.

Code Walkthrough

1. Wallet Connection & Balance

"use client";
import { WagmiConfig, createConfig, useAccount, useConnect, useDisconnect } from "wagmi";
import { createPublicClient, http } from "viem";
import { InjectedConnector } from "wagmi/connectors/injected";

const config = createConfig({
  autoConnect: true,
  publicClient: createPublicClient({
    chain: mainnet,
    transport: http(),
  }),
});

function Profile() {
  const { address, isConnected } = useAccount();
  const { connect } = useConnect({ connector: new InjectedConnector() });
  const { disconnect } = useDisconnect();

  if (isConnected) return (
    <div>
      Connected to {address} 
      <button onClick={() => disconnect()}>Disconnect</button>
    </div>
  );
  return <button onClick={() => connect()}>Connect Wallet</button>;
}

export default function App() {
  return (
    <WagmiConfig config={config}>
      <Profile />
    </WagmiConfig>
  );
}

2. Chain Switching

Replace config with Alchemy-backed providers:

import { configureChains, mainnet, sepolia } from "wagmi";
import { alchemyProvider } from "wagmi/providers/alchemy";

const { chains, publicClient } = configureChains(
  [mainnet, sepolia],
  [alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY_KEY })]
);

👉 Advanced Chain Switching

const { chain } = useNetwork();
const { switchNetwork } = useSwitchNetwork();

return (
  <div>
    {chain && `Connected to ${chain.name}`}
    {chains.map((x) => (
      <button key={x.id} onClick={() => switchNetwork?.(x.id)}>
        {x.name} {x.id === chain?.id && "(current)"}
      </button>
    ))}
  </div>
);

FAQ

1. What’s the difference between a DApp and a traditional app?

DApps use blockchain for backend logic, enabling trustless operations without centralized servers.

2. Why use Alchemy over self-hosted nodes?

Alchemy reduces infrastructure costs and handles heavy node synchronization tasks.

3. How secure are wallet connections?

Connections are cryptographically signed in the user’s wallet, ensuring security.

Conclusion

We’ve built foundational DApp features: wallet linking, balance checks, and chain switching. The full code is available here. Stay tuned for more advanced integrations!