🚀 Polkadot Parachain Interface

A modern, responsive interface for interacting with blockchain

Live Demo • Features • Getting Started • Zombienet Setup • Development • Deployment

✨ Features

• 🌍 Flexible Network Connection - Connect to any chain, including local Zombienet and public nodes
• 🔍 Chain State Explorer - Query and visualize on-chain storage
• 📝 Extrinsics Submission - Submit transactions with proper parameter handling
• 💸 Token Transfers - User-friendly interface for sending tokens
• 🔐 Multiple Wallet Support - Compatible with Polkadot.js Extension and Sub Wallet Extension
• 📱 Responsive Design - Works on desktop and mobile devices

🚀 Getting Started

Prerequisites

• Node.js 16+
• npm or yarn
• Polkadot.js browser extension (for signing transactions)
• Zombienet (for local development)

Installation

1. Clone the repository:

   git clone https://github.com/mdprana/substrate-dev-template.git
   cd polkadot-parachain-interface

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm start
   # or
   yarn start

4. Open http://localhost:3000 in your browser.

🧪 Zombienet Setup

To test with a local network, you can use Zombienet to spawn a development chain.

Install Zombienet and Required Binaries

1. Download Zombienet from the official GitHub repository.

2. Make Zombienet executable and add it to your PATH:

   chmod +x zombienet-linux # or zombienet-macos, etc.
   sudo mv zombienet-linux /usr/local/bin/zombienet

3. Download the required binaries:

   zombienet setup polkadot polkadot-parachain

4. Make the binaries executable and add them to your PATH:

   sudo mv ./polkadot ./polkadot-execute-worker ./polkadot-parachain ./polkadot-prepare-worker /usr/local/bin

Create Network Configuration

Create a file named network.toml with the following content:

[settings]
timeout = 120

[relaychain]

[[relaychain.nodes]]
name = "alice"
validator = true

[[relaychain.nodes]]
name = "bob"
validator = true

[[parachains]]
id = 100

[parachains.collator]
name = "collator01"

Spawn the Network

Run the following command to start your local network:

zombienet -p native spawn network.toml

You should see output similar to this:

Network launched 🚀🚀
Namespace: zombie-75a01b93c92d571f6198a67bcb380fcd
Provider: native

Node Information
Name: alice
Direct Link: https://polkadot.js.org/apps/?rpc=ws://127.0.0.1:55308#explorer
Prometheus Link: http://127.0.0.1:55310/metrics
...

Connect to the Local Node

Note the WebSocket URL from the output (e.g., ws://127.0.0.1:55308). You'll use this to connect your interface to the local node.

💻 Development

Connecting to Different Networks

In the application, use the Network Selector in the Home page to:

1. Select from predefined networks (Polkadot, Kusama, Westend)
2. Enter a custom endpoint (like your local Zombienet node)

Note: The WebSocket port for local Zombienet changes each time you restart it. Update the endpoint accordingly.

Local Development with Zombienet

1. Start Zombienet using the command above
2. Copy the WebSocket URL from the output (e.g., ws://127.0.0.1:55308)
3. Run your React application locally (npm start)
4. Use the Network Selector to enter the WebSocket URL and connect

🚢 Deployment

The project is configured for easy deployment to Netlify. You can see a live demo at https://mdprana-polkadotjs-interface.netlify.app/.

Deploying to Netlify

1. Fork this repository
2. Sign up for Netlify and connect your GitHub account
3. Create a new site from the repository
4. Configure the build settings:
   • Build command: npm run build or yarn build
   • Publish directory: build
5. Add the environment variable: REACT_APP_WS_ENDPOINT=wss://westend-rpc.polkadot.io
6. Deploy!

Note: When deployed to Netlify, the application can't directly connect to your local Zombienet node due to browser security restrictions. Use public nodes (like Westend) for testing the deployed version.

🎨 Customizing

Interface Images

You can customize the interface by replacing the images in the public/images and src/assets directories:

• Logo: Update public/logo.png and public/logo192.png with your project logo
• Interface Screenshot: Replace docs/images/interface-screenshot.png with a screenshot of your interface
• Favicon: Replace public/favicon.ico with your own favicon

📖 Documentation

For more information on the Polkadot.js API and associated libraries, check out:

• Polkadot.js Documentation
• Polkadot Wiki

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Polkadot.js for the excellent API
• Zombienet for local development tools