Track 6 · dApps & frontend · lesson 1

How a frontend talks to a chain

8 min

Your contract lives on a chain. Your webpage lives in a browser. Nothing about those two facts connects them. This track is the wire between.

A provider is your webpage's connection to a node. You send the node JSON-RPC requests — "what is the balance of this address?", "run this function", "send this transaction" — and it answers.

Everything a dApp does with the chain is JSON-RPC underneath. viem and wagmi, which you will use next, are polished layers over exactly these calls.

The two kinds of provider

A read provider talks to any node and can only read. No key, no signing, no permission needed — the chain is public. You get one from an RPC endpoint: Alchemy, Infura, your own node, or a public one.

A wallet provider is injected by MetaMask and its kind. It can read too, but it can also ask the user to sign. It holds no key you can touch — it brokers signing requests to the wallet, which keeps the key.

Predict

Your dApp needs to display a token balance to a visitor who has no wallet installed. Which provider?

A read-only RPC provider — no wallet required to read public dataA wallet provider — you always need one to talk to the chainNeither — you cannot read without an account

A raw RPC call, once

Before the nice libraries, this is what is actually happening:

const res = await fetch("https://rpc.example.com", {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({
    jsonrpc: "2.0",
    id: 1,
    method: "eth_getBalance",
    params: ["0xf39f…2266", "latest"],
  }),
});
const { result } = await res.json();   // balance in wei, as hex

You will never write this by hand again after this lesson. But when viem mysteriously fails, knowing there is a POST request and a JSON body underneath is what lets you debug it.

Check

Why can a read provider work with no private key?

Reading public chain state requires no authorisationThe provider holds a shared key for readsRead providers can only see your own data

Worth remembering

A provider is your page's JSON-RPC connection to a node; everything runs over it.
A read provider needs no key and can read anyone's public data.
A wallet provider brokers signing to the wallet, which keeps the key.
Read public data with a plain RPC provider so the page works without a wallet.
viem and wagmi are convenience layers over raw JSON-RPC.