Dot Starter Kit

A modern full-stack dApp development boilerplate for building on Polkadot. This project combines Polkadot and EVM connectivity, enabling developers to interact with native Substrate pallets, precompiles, and deploy Solidity smart contracts.

Features

🔐 Multi-Wallet Connectivity

Wallet Type	Supported Wallets
Polkadot	Polkadot.js Extension, Talisman, SubWallet
EVM	MetaMask, Talisman, WalletConnect v2

Substrate Integration

• Interact with native Substrate pallets using connected polkadot wallet.
• Real-time chain state queries

EVM Smart Contract Support

• Integrated Hardhat environment with Polkadot plugin
• Automatic UI generation from contract ABIs
• Interact with EVM smart contracts using connected EVM wallet.

Developer Experience

• Modern React + TypeScript + Vite setup
• Styled with Tailwind CSS and shadcn/ui

Quick-Start

Prerequisites

Before you begin, make sure you have:

• Node.js (v18 or higher)
• npm or yarn
• A Polkadot wallet extension installed
• An EVM wallet (MetaMask recommended)

1. Clone the repository

git clone https://github.com/NevvDevvLabs/Dot-Starter-Kit
cd Dot-Starter-Kit
npm i

2. Get Test Tokens

Go to polkadot faucet and claim tokens to your dev wallet:

1. Select Passet Hub: smart contracts testnet
2. Enter your wallet address and request tokens

3. Smart Contracts Setup

# Navigate to hardhat directory
cd hardhat

# Set your deployment private key
npx hardhat vars set DEPLOYER_PK
# Enter your wallet private key when prompted

# Install specific Solidity version (if needed)
npm install --save-dev [email protected]

# Compile contracts
npx hardhat compile

# Deploy to Paseo Asset Hub testnet
npx hardhat ignition deploy ./ignition/modules/MyToken.ts --network passetHub

# Prepare contract data for frontend
node prepare-contracts.ts

4. Web App

# Navigate to webapp directory
cd ./webapp

# Setup Polkadot API chains
npx papi add paseo_asset_hub -n paseo_asset_hub
npx papi add paseo -n paseo
npx papi generate

# Create environment file
cp .env.example .env

Edit .env file:

VITE_WALLET_CONNECT=your_wallet_connect_project_id_here

# Start development server
npm run dev

Dynamic UI For Smart Contracts

How It Works:

1. The prepare-contracts.ts script should be executed before web app development or build processes after Solidity contracts were compiled and redeployed
2. It reads deployed_addresses.json from your Hardhat Ignition deployments
3. It matches these with the corresponding ABIs in the artifacts directory
4. It generates a single contracts-data.json file in your /webapp/src/data directory
5. The React components import this file directly, avoiding runtime loading issues

Usage

# Generate contract data for development chain
node prepareContracts.ts

# Generate contract data for a specific chain
node prepareContracts.ts chain-420420421

Adding New Deployments

When you deploy new contracts:

1. After deployment, your contract artifacts will be in hardhat/ignition/deployments/chain-[chainId]/
2. Run the prepare-contracts.ts script for your environment
3. The React app will automatically use the updated contract data

Network Configuration

The starter kit is configured for:

• Passet Hub: Smart Contracts (Testnet)

Testnet details:
* Network name: Passet Hub
* Chain ID: 420420421
* RPC URL: https://testnet-passet-hub-eth-rpc.polkadot.io
* Block Explorer URL: https://blockscout-passet-hub.parity-testnet.parity.io/

Environment Variables

Hardhat (hardhat/.env)

DEPLOYER_PK=your_private_key_here

Webapp (webapp/.env)

VITE_WALLET_CONNECT=your_wallet_connect_project_id

Troubleshooting

If you see "No deployed contracts found" in the UI:

1. Check that the prepareContracts.ts script ran successfully
2. Verify that your deployed_addresses.json file exists and is correct
3. Check that the contracts-data.json file was properly generated in the /webapp/src/data/ directory
4. Make sure the import path in your React component matches the location of the generated file

Contributing

We welcome contributions from all Web3 developers. Here's how you can help:

Ways to Contribute

• 🐛 Bug Reports
• 💡 Feature Requests
• 📝 Documentation
• 🧪 Testing

Contribution Process

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Add new feature: Test your code before moving to the next part of the process to make sure it works properly
4. Submit a pull request: In the description include overview of the changes that were made and new features that were added