--- title: Zero to Hero Smart Contract DApp description: Learn how to build a decentralized application on Polkadot Hub using Viem and Next.js by creating a simple dApp that interacts with a smart contract. categories: - Smart Contracts - Tooling url: https://docs.polkadot.com/smart-contracts/cookbook/dapps/zero-to-hero/ word_count: 3357 token_estimate: 6414 version_hash: sha256:750ca67f09d91388004f000a6c9f2ebfa9c2dd9029acafd6857d663f5bbe1822 last_updated: '2026-06-04T16:08:37+00:00' --- # Zero to Hero Smart Contract DApp Decentralized applications (dApps) are a key component of the Web3 ecosystem, enabling developers to build applications that communicate directly with blockchain networks. Polkadot Hub, a blockchain with smart contract support, serves as a robust platform for deploying and interacting with dApps. This tutorial will guide you through building a fully functional dApp that interacts with a smart contract on Polkadot Hub. You'll create and deploy a smart contract with Hardhat, and then use [viem](https://viem.sh/) for blockchain interactions and [Next.js](https://nextjs.org/) for the frontend. By the end, you'll have a dApp that lets users connect their wallets, retrieve on-chain data, and execute transactions. ## Prerequisites Before getting started, ensure you have the following: - [Node.js](https://nodejs.org/en) v22.10.0 or later installed on your system. - A crypto wallet (such as MetaMask) funded with test tokens. Refer to the [Connect to Polkadot](/smart-contracts/connect) guide for more details. - A basic understanding of React and JavaScript. - Some familiarity with blockchain fundamentals and Solidity (helpful but not required). ## Project Overview This dApp will interact with a basic Storage contract that you will create and deploy with Hardhat. The contract will allow you to: - Store a number on the blockchain. - Retrieve the stored number from the blockchain. - Update the stored number with a new value. Your project directory will be organized as follows: ```bash polkadot-hub-tutorial/ ├── storage-contract/ # Hardhat project for smart contract │ ├── contracts/ │ │ └── Storage.sol │ ├── scripts/ │ │ └── deploy.ts │ ├── artifacts/ │ │ └── contracts/ │ │ └── Storage.sol/ │ │ └── Storage.json │ ├── hardhat.config.ts │ ├── .env │ └── package.json │ └── dapp/ # Next.js dApp project ├── abis/ │ └── Storage.json └── app/ ├── components/ │ ├── ReadContract.tsx │ ├── WalletConnect.tsx │ └── WriteContract.tsx ├── utils/ │ ├── contract.ts │ └── viem.ts ├── favicon.ico ├── globals.css ├── layout.tsx └── page.tsx ``` Create the main folder for the project: ```bash mkdir polkadot-hub-tutorial cd polkadot-hub-tutorial ``` ## Create and Deploy the Storage Contract Before building the dApp, you'll need to create and deploy the Storage smart contract. This section will guide you through using Hardhat to write, compile, and deploy the contract to Polkadot Hub TestNet. ### Set Up Hardhat Project First, create a new directory for your Hardhat project and initialize it: ```bash mkdir storage-contract cd storage-contract npm init -y ``` Install Hardhat and its dependencies: ```bash npm install --save-dev hardhat@3.0.9 ``` Initialize a new Hardhat project: ```bash npx hardhat --init ``` Select **Create a TypeScript project** and accept the default options. ### Create the Storage Contract In the `contracts` directory, create a new file called `Storage.sol` and add the following code: ```solidity title="Storage.sol" // SPDX-License-Identifier: MIT pragma solidity ^0.8.0; contract Storage { uint256 private storedNumber; event NumberStored(uint256 newNumber); function setNumber(uint256 _number) public { storedNumber = _number; emit NumberStored(_number); } } ``` This simple contract stores a single number and provides functions to read and update it. ### Configure Hardhat for Polkadot Hub Update your `hardhat.config.ts` file to include the Polkadot Hub TestNet configuration: ```typescript title="hardhat.config.ts" hl_lines="39-44" import type { HardhatUserConfig } from "hardhat/config"; import hardhatToolboxViemPlugin from "@nomicfoundation/hardhat-toolbox-viem"; import { configVariable } from "hardhat/config"; const config: HardhatUserConfig = { plugins: [hardhatToolboxViemPlugin], solidity: { profiles: { default: { version: "0.8.28", }, production: { version: "0.8.28", settings: { optimizer: { enabled: true, runs: 200, }, }, }, }, }, networks: { hardhatMainnet: { type: "edr-simulated", chainType: "l1", }, hardhatOp: { type: "edr-simulated", chainType: "op", }, sepolia: { type: "http", chainType: "l1", url: configVariable("SEPOLIA_RPC_URL"), accounts: [configVariable("SEPOLIA_PRIVATE_KEY")], }, polkadotTestNet: { type: "http", chainType: "l1", url: 'https://services.polkadothub-rpc.com/testnet', accounts: [process.env.PRIVATE_KEY || ''], }, }, }; export default config; ``` Create a `.env` file in the root of your Hardhat project: ```text title=".env" PRIVATE_KEY=INSERT_PRIVATE_KEY_HERE ``` Replace `INSERT_PRIVATE_KEY_HERE` with your actual private key. You can get this by exporting the private key from your wallet (e.g., MetaMask). !!! warning Never commit your private key to version control. Use environment variables or a `.env` file (and add it to `.gitignore`) to manage sensitive information. Keep your private key safe, and never share it with anyone. If it is compromised, your funds can be stolen. ### Compile the Contract Compile your Storage contract: ```bash npx hardhat compile ``` You should see output indicating successful compilation. ### Deploy the Contract Create a deployment script in the `ignition/modules` directory called `Storage.ts`: ```typescript title="Storage.ts" import { buildModule } from "@nomicfoundation/hardhat-ignition/modules"; export default buildModule("StorageModule", (m) => { const storage = m.contract("Storage"); return { storage }; }); ``` Deploy the contract to Polkadot Hub TestNet: ```bash npx hardhat ignition deploy ./ignition/modules/Storage.ts --network polkadotTestNet ``` You should see output similar to:
npx hardhat ignition deploy ./ignition/modules/Storage.ts --network polkadotTestNet WARNING: You are using Node.js 23.11.0 which is not supported by Hardhat. Please upgrade to 22.10.0 or a later LTS version (even major version number) ✔ Confirm deploy to network polkadotTestNet (420420417)? … yes Hardhat Ignition 🚀 Deploying [ StorageModule ] Batch #1 Executed StorageModule#Storage [ StorageModule ] successfully deployed 🚀 Deployed Addresses StorageModule#Storage - 0xc01Ee7f10EA4aF4673cFff62710E1D7792aBa8f3
!!! note Save the deployed contract address - you'll need it when building your dApp. In the following sections, we'll reference a pre-deployed contract at `0xc01Ee7f10EA4aF4673cFff62710E1D7792aBa8f3`, but you can use your own deployed contract address instead. ### Export the Contract ABI After deployment, you'll need the contract's Application Binary Interface (ABI) for your dApp. You can find it in the `artifacts/contracts/Storage.sol/Storage.json` file generated by Hardhat. You'll use this in the next section when setting up your dApp. Now that you have your contract deployed, you're ready to build the dApp that will interact with it! ## Set Up the DApp Project Navigate to the root of the project, and create a new Next.js project called `dapp`: ```bash npx create-next-app dapp --ts --eslint --tailwind --app --yes cd dapp ``` ## Install Dependencies Install viem and related packages: ```bash npm install viem@2.38.5 npm install --save-dev typescript@5.9.3 @types/node@22.19.24 ``` ## Connect to Polkadot Hub To interact with Polkadot Hub, you need to set up a [Public Client](https://viem.sh/docs/clients/public#public-client) that connects to the blockchain. In this example, you will interact with the Polkadot Hub TestNet, to experiment safely. Start by creating a new file called `utils/viem.ts` and add the following code: ```typescript title="viem.ts" import { createPublicClient, http, createWalletClient, custom } from 'viem' import 'viem/window'; const transport = http('https://services.polkadothub-rpc.com/testnet') // Configure the Polkadot Testnet Hub chain export const polkadotTestnet = { id: 420420417, name: 'Polkadot Hub TestNet', network: 'polkadot-testnet', nativeCurrency: { decimals: 18, name: 'PAS', symbol: 'PAS', }, rpcUrls: { default: { http: ['https://services.polkadothub-rpc.com/testnet'], }, }, } as const // Create a public client for reading data export const publicClient = createPublicClient({ chain: polkadotTestnet, transport }) // Create a wallet client for signing transactions export const getWalletClient = async () => { if (typeof window !== 'undefined' && window.ethereum)); return createWalletClient({ chain: polkadotTestnet, transport: custom(window.ethereum), account, }); } throw new Error('No Ethereum browser provider detected'); }; ``` This file initializes a viem client, providing helper functions for obtaining a Public Client and a [Wallet Client](https://viem.sh/docs/clients/wallet#wallet-client). The Public Client enables reading blockchain data, while the Wallet Client allows users to sign and send transactions. Also, note that by importing `viem/window` the global `window.ethereum` will be typed as an `EIP1193Provider`, check the [`window` Polyfill](https://viem.sh/docs/typescript#window-polyfill) reference for more information. ## Set Up the Smart Contract Interface For this dApp, you'll use a simple [Storage contract](/smart-contracts/cookbook/smart-contracts/deploy-basic/basic-hardhat/#create-the-contract) that's already deployed in the Polkadot Hub TestNet: `0xc01Ee7f10EA4aF4673cFff62710E1D7792aBa8f3`. To interact with it, you need to define the contract interface. Create a folder called `abis` at the root of your project, then create a file named `Storage.json` and paste the corresponding ABI of the Storage contract. You can copy and paste the following: ```bash cp ./storage-contract/artifacts/contracts/Storage.sol/Storage.json ./dapp/abis/Storage.json ``` Next, create a file called `utils/contract.ts`: ```typescript title="contract.ts" import { getContract } from 'viem'; import { publicClient, getWalletClient } from './viem'; import StorageABI from '../abis/Storage.json'; export const CONTRACT_ADDRESS = '0xc01Ee7f10EA4aF4673cFff62710E1D7792aBa8f3'; // TODO: change when the paseo asset hub RPC URL is available, and the contract is redeployed export const CONTRACT_ABI = StorageABI.abi; // Create a function to get a contract instance for reading export const getContractInstance = () => { return getContract({ address: CONTRACT_ADDRESS, abi: CONTRACT_ABI, client: publicClient, }); }; // Create a function to get a contract instance with a signer for writing export const getSignedContract = async () => { const walletClient = await getWalletClient(); return getContract({ address: CONTRACT_ADDRESS, abi: CONTRACT_ABI, client: walletClient, }); }; ``` This file defines the contract address, ABI, and functions to create a viem [contract instance](https://viem.sh/docs/contract/getContract#contract-instances) for reading and writing operations. viem's contract utilities enable more efficient, type-safe interaction with smart contracts. ## Create the Wallet Connection Component Now, you can create a component to handle wallet connections. Create a new file called `components/WalletConnect.tsx`: ```typescript title="WalletConnect.tsx" "use client"; import React, { useState, useEffect } from "react"; import { polkadotTestnet } from "../utils/viem"; interface WalletConnectProps { onConnect: (account: string) => void; } const WalletConnect: React.FC = ({ onConnect }) => { const [account, setAccount] = useState(null); const [chainId, setChainId] = useState(null); const [error, setError] = useState(null); useEffect(() => { // Check if user already has an authorized wallet connection const checkConnection = async () => { if (typeof window !== 'undefined' && window.ethereum)) as string[]; if (accounts.length > 0)) as string; setChainId(parseInt(chainIdHex, 16)); onConnect(accounts[0]); } } catch (err) } }; checkConnection(); if (typeof window !== 'undefined' && window.ethereum)); window.ethereum.on('chainChanged', (chainIdHex: string) => { setChainId(parseInt(chainIdHex, 16)); }); } return () => { // Cleanup event listeners if (typeof window !== 'undefined' && window.ethereum)); window.ethereum.removeListener('chainChanged', () => {}); } }; }, [onConnect]); const connectWallet = async () => { if (typeof window === 'undefined' || !window.ethereum) try { // eth_requestAccounts triggers the wallet popup const accounts = await window.ethereum.request({ method: 'eth_requestAccounts', }) as string[]; setAccount(accounts[0]); const chainIdHex = await window.ethereum.request({ method: 'eth_chainId', }) as string; const currentChainId = parseInt(chainIdHex, 16); setChainId(currentChainId); // Prompt user to switch networks if needed if (currentChainId !== polkadotTestnet.id) onConnect(accounts[0]); } catch (err) }; const switchNetwork = async () => { console.log('Switch network') try { await window.ethereum.request({ method: 'wallet_switchEthereumChain', params: [{ chainId: `0x${polkadotTestnet.id.toString(16)}` }], }); } catch (switchError: any)`, chainName: polkadotTestnet.name, rpcUrls: [polkadotTestnet.rpcUrls.default.http[0]], nativeCurrency: { name: polkadotTestnet.nativeCurrency.name, symbol: polkadotTestnet.nativeCurrency.symbol, decimals: polkadotTestnet.nativeCurrency.decimals, }, }, ], }); } catch (addError) } else { setError('Failed to switch network'); } } }; // UI-only disconnection - MetaMask doesn't support programmatic disconnection const disconnectWallet = () => { setAccount(null); }; return (
{error &&

{error}

} {!account ? ( ) : (
{`${account.substring(0, 6)}...${account.substring(38)}`} {chainId !== polkadotTestnet.id && ( )}
)}
); }; export default WalletConnect; ``` This component handles connecting to the wallet, switching networks if necessary, and keeping track of the connected account. It provides a button for users to connect their wallet and displays the connected account address once connected. ## Create the Read Contract Component Next, create a component to read data from the contract. Create a file called `components/ReadContract.tsx`: ```typescript title="ReadContract.tsx" 'use client'; import React, { useState, useEffect } from 'react'; import { publicClient } from '../utils/viem'; import { CONTRACT_ADDRESS, CONTRACT_ABI } from '../utils/contract'; const ReadContract: React.FC = () => { const [storedNumber, setStoredNumber] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { // Function to read data from the blockchain const fetchData = async () => { try { setLoading(true); // Call the smart contract's storedNumber function const number = await publicClient.readContract({ address: CONTRACT_ADDRESS, abi: CONTRACT_ABI, functionName: 'storedNumber', args: [], }) as bigint; setStoredNumber(number.toString()); setError(null); } catch (err) finally { setLoading(false); } }; fetchData(); // Poll for updates every 10 seconds to keep UI in sync with blockchain const interval = setInterval(fetchData, 10000); // Clean up interval on component unmount return () => clearInterval(interval); }, []); return (

Contract Data

{loading ? (
) : error ? (

{error}

) : (

Stored Number: {storedNumber}

)}
); }; export default ReadContract; ``` This component reads the `storedNumber` value from the contract and displays it to the user. It also sets up a polling interval to refresh the data periodically, ensuring that the UI stays in sync with the blockchain state. ## Create the Write Contract Component Finally, create a component that allows users to update the stored number. Create a file called `components/WriteContract.tsx`: ```typescript title="WriteContract.tsx" "use client"; import React, { useState, useEffect } from "react"; import { publicClient, getWalletClient } from '../utils/viem'; import { CONTRACT_ADDRESS, CONTRACT_ABI } from '../utils/contract'; interface WriteContractProps { account: string | null; } const WriteContract: React.FC = ({ account }) => { const [newNumber, setNewNumber] = useState(""); const [status, setStatus] = useState<{ type: string | null; message: string; }>({ type: null, message: "", }); const [isSubmitting, setIsSubmitting] = useState(false); const [isCorrectNetwork, setIsCorrectNetwork] = useState(true); // Check if the account is on the correct network useEffect(() => { const checkNetwork = async () => { if (!account) return; try { // Get the chainId from the public client const chainId = await publicClient.getChainId(); // Get the user's current chainId from their wallet const walletClient = await getWalletClient(); if (!walletClient) return; const walletChainId = await walletClient.getChainId(); // Check if they match setIsCorrectNetwork(chainId === walletChainId); } catch (err) }; checkNetwork(); }, [account]); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); // Validation checks if (!account)); return; } if (!isCorrectNetwork)); return; } if (!newNumber || isNaN(Number(newNumber)))); return; } try { setIsSubmitting(true); setStatus({ type: "info", message: "Initiating transaction..." }); // Get wallet client for transaction signing const walletClient = await getWalletClient(); if (!walletClient)); return; } // Check if account matches if ( walletClient.account?.address.toLowerCase() !== account.toLowerCase() )); return; } // Prepare transaction and wait for user confirmation in wallet setStatus({ type: "info", message: "Please confirm the transaction in your wallet...", }); // Simulate the contract call first console.log('newNumber', newNumber); const { request } = await publicClient.simulateContract({ address: CONTRACT_ADDRESS, abi: CONTRACT_ABI, functionName: "setNumber", args: [BigInt(newNumber)], account: walletClient.account, }); // Send the transaction with wallet client const hash = await walletClient.writeContract(request); // Wait for transaction to be mined setStatus({ type: "info", message: "Transaction submitted. Waiting for confirmation...", }); const receipt = await publicClient.waitForTransactionReceipt({ hash, }); setStatus({ type: "success", message: `Transaction confirmed! Transaction hash: ${receipt.transactionHash}`, }); setNewNumber(""); } catch (err: any)); } else if (err.message?.includes("Account not found"))); } else if (err.message?.includes("JSON is not a valid request object"))); } else { // Other errors setStatus({ type: "error", message: `Error: ${err.message || "Failed to send transaction"}`, }); } } finally { setIsSubmitting(false); } }; return (

Update Stored Number

{!isCorrectNetwork && account && (
⚠️ You are not connected to the correct network. Please switch networks in your wallet.
)} {status.message && (
{status.message}
)}
setNewNumber(e.target.value)} disabled={isSubmitting || !account} className="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-pink-400" />
{!account && (

Connect your wallet to update the stored number.

)}
); }; export default WriteContract; ``` This component allows users to input a new number and send a transaction to update the value stored in the contract. It provides appropriate feedback during each step of the transaction process and handles error scenarios. Update the `app/page.tsx` file to integrate all components: ```typescript title="page.tsx" "use client"; import { useState } from "react"; import WalletConnect from "./components/WalletConnect"; import ReadContract from "./components/ReadContract"; import WriteContract from "./components/WriteContract"; export default function Home(); return (

Polkadot Hub - Zero To Hero DApp

); } ``` Run the dApp: ```bash npm run dev ``` Navigate to `http://localhost:3000` in your browser, and you should see your dApp with the wallet connection button, the stored number displayed, and the form to update the number. You should see something like this: ## How It Works This dApp uses components to interact with the blockchain in several ways. ### Wallet Connection The `WalletConnect` component uses the browser's Ethereum provider (MetaMask) to connect to the user's wallet and handles network switching to ensure the user is connected to the Polkadot Hub TestNet. Once connected, it provides the user's account address to the parent component. ### Data Reads The `ReadContract` component uses viem's `readContract` function to call the `storedNumber` view function and periodically poll for updates to keep the UI in sync with the blockchain state. The component also displays a loading indicator while fetching data and handles error states. ### Data Writes The `WriteContract` component uses viem's `writeContract` function to send a transaction to the `setNumber` function and ensures the wallet is connected before allowing a transaction. The component shows detailed feedback during transaction submission and confirmation. After a successful transaction, the value displayed in the `ReadContract` component will update on the next poll. ## Conclusion Congratulations! You've successfully built a fully functional dApp that interacts with a smart contract on Polkadot Hub using viem and Next.js. Your application can now: - Create a smart contract with Hardhat and deploy it to Polkadot Hub TestNet. - Connect to a user's wallet and handle network switching. - Read data from a smart contract and keep it updated. - Write data to the blockchain through transactions. These fundamental skills provide the foundation for building more complex dApps on Polkadot Hub. With this knowledge, you can extend your application to interact with more sophisticated smart contracts and create advanced user interfaces. To get started right away with a working example, you can clone the repository and navigate to the implementation: ```bash git clone https://github.com/polkadot-developers/revm-hardhat-examples.git cd zero-to-hero-dapp ``` ## Where to Go Next
- Guide __Port Ethereum Projects to Polkadot Hub__ --- Learn how to port an Ethereum project to Polkadot Hub using Hardhat and viem. [:octicons-arrow-right-24: Get Started](/smart-contracts/cookbook/eth-dapps/uniswap-v2/) - Guide __Dive Deeper into Polkadot Precompiles__ --- Learn how to use the Polkadot precompiles to interact with the blockchain. [:octicons-arrow-right-24: Get Started](/smart-contracts/precompiles/)