Add Zero To Hero Dapp (new IA) #1156
Conversation
nhussein11
added
B0 - Needs Review
nhussein11
had a problem deploying
to
n8n-sending
GitHub Actions
Failure
There was a problem hiding this comment.
Pull Request Overview
This PR adds a comprehensive tutorial for building a smart contract dApp on Polkadot Hub, progressing from creating and deploying a smart contract with Hardhat to building a full frontend with Next.js and Viem. The tutorial provides a complete "zero to hero" learning experience for developers new to building on Polkadot Hub.
- Creates a complete tutorial covering smart contract deployment with Hardhat and dApp development with Next.js and Viem
- Includes practical code examples for wallet connection, contract interaction (read/write operations), and error handling
- Provides structured project setup with clear file organization and component architecture
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| Deploy the contract to Polkadot Hub TestNet: | ||
|
|
||
| ```bash | ||
| npx hardhat ignition deploy ./ignition/modules/Storage.ts --network polkadotHub |
There was a problem hiding this comment.
Network name inconsistency: the command uses polkadotHub but the configuration defines polkadotTestNet. This will cause deployment to fail.
| npx hardhat ignition deploy ./ignition/modules/Storage.ts --network polkadotHub | |
| npx hardhat ignition deploy ./ignition/modules/Storage.ts --network polkadotTestNet |
|
|
||
| ```typescript title="contract.ts" | ||
| import { getContract } from 'viem'; | ||
| import { publicClient, getWalletClient } from '../viem'; |
There was a problem hiding this comment.
Incorrect import path: should be '../utils/viem' since the viem.ts file is located in the utils directory according to the project structure.
| import { publicClient, getWalletClient } from '../viem'; | |
| import { publicClient, getWalletClient } from '../utils/viem'; |
| "use client"; | ||
|
|
||
| import React, { useState, useEffect } from "react"; | ||
| import { polkadotTestnet } from "../../viem"; |
There was a problem hiding this comment.
Incorrect import path: should be '../utils/viem' since the viem.ts file is in the utils directory, not two levels up.
| import { polkadotTestnet } from "../../viem"; | |
| import { polkadotTestnet } from "../utils/viem"; |
| 'use client'; | ||
|
|
||
| import React, { useState, useEffect } from 'react'; | ||
| import { publicClient } from '../../viem'; |
There was a problem hiding this comment.
Inconsistent import paths: line 544 imports from '../../viem' but should be '../utils/viem' to match the project structure and be consistent with line 545.
| import { publicClient } from '../../viem'; | |
| import { publicClient } from '../../utils/viem'; |
| "use client"; | ||
|
|
||
| import React, { useState, useEffect } from "react"; | ||
| import { publicClient, getWalletClient } from '../../viem'; |
There was a problem hiding this comment.
Inconsistent import paths: line 617 imports from '../../viem' but should be '../utils/viem' to match the project structure and be consistent with line 618.
| import { publicClient, getWalletClient } from '../../viem'; | |
| import { publicClient, getWalletClient } from '../../utils/viem'; |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Note: This page will require a final gif once we learn how to do that
Note: The snippets should ideally be fetched from https://github.com/polkadot-developers/revm-hardhat-examples, but I couldn't do that due to the gh issue I'm facing
📝 Description
Provide a clear and concise description of your changes.
🔍 Review Preference
Choose one:
🤖 AI-Ready Docs
If content changed, regenerate AI files:
python3 scripts/generate_llms.py✅ Checklist