Skip to main content

Polkadot.js Interface

Master the Polkadot.js Apps interface for interacting with Mandala Testnet. Learn to explore blocks, monitor transactions, and navigate the comprehensive blockchain explorer.

Overview​

Polkadot.js Apps is the primary web-based interface for interacting with Substrate-based blockchains. It provides a comprehensive dashboard for developers and users to explore chain state, submit transactions, and manage accounts.

Accessing Polkadot.js Apps​

Direct Mandala Link:

https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Frpc1.paseo.mandalachain.io#/explorer

Manual Connection:

  1. Visit https://polkadot.js.org/apps/

  2. Click the network selector (top-left)

  3. Choose "Development" → "Custom"

  4. Enter: wss://rpc1.paseo.mandalachain.io

  5. Click "Switch"

    polkadot.js-apps.png

    development-custom-network-setup.png

  6. When the Polkadot.js extension account connection request appears, click "Connect" to connect your account

    account-connection-request.png

Interface Overview​

The interface is organized into several main sections:

Explorer - Browse blocks, events, and chain activity
Accounts - Manage addresses and balances
Network - View validators, staking, and network stats
Developer - Advanced tools for developers
Settings - Configure the interface

Explorer Tab​

Recent Blocks​

The Explorer shows real-time blockchain activity:

Block Information:

  • Block number and hash

  • Block author (collator)

  • Number of extrinsics

  • Block time and finalization status

    explorer-recent-blocks.png

Key Features:

  • Recent blocks - Latest blocks with expandable details
  • Recent events - System events and user transactions
  • Block details - Click any block for detailed view

Block Details​

Click on any block number to view:

Block Header:

  • Parent hash and state root

  • Extrinsics root and digest

  • Block justification

    block-header.png

Extrinsics:

  • All transactions in the block

  • Success/failure status

  • Associated events

    extrinsics1.png

    extrinsics-associated-events.png

Events:

  • System events (fees, deposits)

  • Custom pallet events

  • Error messages

    events1.png

Accounts Tab​

Account Management​

The Accounts tab provides comprehensive account management:

Account List:

  • All configured accounts
  • Current balances
  • Account types (regular, multisig, proxy)

Account Actions:

  • Backup/restore accounts

    backup-accounts.png

    export-all-accounts.png

    export-all-accounts-done.png

Balance Information​

For each account, you can view:

Total Balance Breakdown:

  • Free - Available for transactions

  • Reserved - Locked for deposits/stakes

  • Frozen - Temporarily locked

    transaction-history.png

Transaction History:

  • Recent transfers and fees
  • Interaction with smart contracts
  • Staking activities

Sending Transactions​

To send a transaction:

  1. Click "Send" next to source account

    sending-transactions.png

  2. Enter recipient address

  3. Specify amount to transfer

  4. Review transaction details

    send-funds.png

  5. Sign and submit

    sign-and-submit-transaction.png

    transactions.png

    sending-transactions-done.png

Developer Tab​

Essential tools for blockchain developers:

Chain State​

Query any storage item on the blockchain:

Usage:

  1. Select "Chain state" from Developer tab

    chain-state.png

  2. Choose the pallet (e.g., "balances")

  3. Select storage item (e.g., "account")

  4. Enter parameters if required

  5. Submit query

    chain-state-tab.png

Extrinsics​

Submit transactions and function calls:

Process:

  1. Navigate to "Extrinsics" in Developer tab

    developer-extrinsics.png

  2. Select sending account

  3. Choose pallet and function

  4. Fill in parameters

    developer-extrinsics-tab.png

  5. Sign and submit

    developer-extrinsics-sign-and-submit.png

    extrinsics-sign-the-transaction.png

    extrinsics-done.png

RPC Calls​

Direct RPC calls to the node:

Common RPC Methods:

// Get latest block
chain.getBlock()

// Get account nonce
system.accountNextIndex(account)

// Get runtime version
state.getRuntimeVersion()

rpc-calls.png

rpc-calls-tab.png

rpc-calls-done.png

JavaScript Console​

Test API calls directly in the browser:

// Access the API
const api = await window.polkadotApi;

// Get latest block
const lastHeader = await api.rpc.chain.getHeader();
console.log('Latest block:', lastHeader.number.toNumber());

// Query account balance
const account = 'ACCOUNT_ADDRESS_HERE';
const balance = await api.query.system.account(account);
console.log('Balance:', balance.data.free.toString());

javascript.png

javaScript-console2.png

Next Steps​

Now that you're familiar with Polkadot.js Apps interface:

  1. Create a Polkadot.js Account - Set up your development wallet