Relaycode: Rethinking Extrinsics in Polkadot

Project Overview

Relaycode is an intuitive extrinsics builder designed to transform the way developers and users interact with extrinsics in the Polkadot ecosystem. By bridging the gap between complex pallet operations and user-friendly interfaces, Relaycode gives both regular users and developers the ability to harness the full potential of extrinsics the Polkadot ecosystem.

Key Features:

1. A New Extrinsic Builder: Our state-of-the-art builder allows users to construct extrinsics with ease, providing real-time encoding and decoding for immediate visual feedback.

2. Dual-Pane Interface: Relaycode lets you see the best of both worlds with our split-view design. Build extrinsics using human-readable inputs on one side, while simultaneously viewing the corresponding encoded data on the other.

3. Bi-Directional Editing: Seamlessly switch between editing human-readable values and raw encoded data. Changes in one pane are instantly reflected in the other, offering unparalleled flexibility.

4. Wallet Integration: Connect your Polkadot wallet directly within Relaycode to sign and submit extrinsics, eliminating the need for external tools or interfaces.

5. Customizable Snippets: Create, save, and share reusable extrinsic templates. Streamline complex processes by chaining multiple calls into a single, user-friendly form.

6. Educational Tools: Built-in guides and tooltips help users understand the intricacies of extrinsics, making Relaycode an excellent learning platform for Polkadot users.

Technical Architecture

• Frontend: Next.js 15 with App Router, React, TypeScript
• Styling: Tailwind CSS, shadcn/ui components
• State Management: React Hooks, Context API
• Polkadot Integration: Dedot
• Wallet: LunoKit (Polkadot.js, Talisman, SubWallet)
• Chains: Polkadot, Kusama, Westend (testnet)
• Theming: next-themes for dark/light mode support

Documentation

• API Reference - Core encoding, decoding, and validation APIs
• Component Reference - Input component documentation
• Getting Started Tutorial - Build your first extrinsic
• Advanced Usage - Bi-directional editing, batch calls, complex types
• Testing Guide - How to run and write tests

Milestones

For detailed project milestones and deliverables, see our Milestones documentation.

Implemented Input Components

The following input components have been implemented for the extrinsic builder:

• Account - Handles AccountId, Address, LookupSource, MultiAddress
• Amount - Handles i8, i16, i32, i64, i128, u8, u16, u32, u64, u128, Compact<uN>
• Balance - Handles Balance, BalanceOf, Compact<Balance>, Compact<BalanceOf>
• Bool - Handles bool
• BTreeMap - Handles BTreeMap<K, V> with typed key-value pair inputs
• BTreeSet - Handles BTreeSet<T> with duplicate detection
• Bytes - Handles Bytes, Vec<u8>
• Call - Handles Call, RuntimeCall
• Enum - Handles enum types from metadata
• Hash160 - Handles H160 (20-byte hash)
• Hash256 - Handles Hash, H256 (32-byte hash)
• Hash512 - Handles H512 (64-byte hash)
• KeyValue - Handles KeyValue
• Moment - Handles Moment, MomentOf
• Option - Handles Option<T>
• Text - Handles String, Text (and fallback for unknown types)
• Struct - Handles composite/struct types
• Tuple - Handles tuple types (T1, T2, ...)
• Vector - Handles Vec<T>, BoundedVec<T, S>
• VectorFixed - Handles fixed-length arrays [T; N]
• Vote - Handles Vote
• VoteThreshold - Handles VoteThreshold

M2 Features

• Chain Selector - Switch between Polkadot, Kusama, and Westend (testnet) from the navbar
• Type Badges - Builder displays Substrate type names alongside field labels
• Wallet Integration - LunoKit-based wallet connect (Polkadot.js, Talisman, SubWallet)
• Bi-Directional Editing - Edit via form or raw hex, with real-time sync
• Transaction Submission - Sign and submit extrinsics directly from the builder
• Input Validation - Pre-submission validation with descriptive error messages