Building dApps

Connect frontend applications to Selendra blockchain. Multiple integration approaches for EVM and WASM contracts.

SDK Options

Selendra SDK - TypeScript with React hooks. Best for Substrate features.

Web3.js / Ethers.js - Standard Ethereum libraries. For pure EVM contracts.

Polkadot.js API - Full Substrate control. More complex but complete access.

Comparison

Use cases:

• React + Substrate → Selendra SDK
• Pure EVM → web3.js/ethers
• Non-React + Substrate → polkadot.js
• Both EVM + Substrate → Use both libraries

Key Topics

Wallet Integration - MetaMask, Polkadot.js extension

Transactions - Send and monitor

Events - Subscribe to blockchain events

WASM Contracts

Polkadot.js API required for ink! contracts. Stronger type safety through Rust-generated metadata.

import { ApiPromise, WsProvider } from "@polkadot/api";
import { ContractPromise } from "@polkadot/api-contract";

const api = await ApiPromise.create({
  provider: new WsProvider("wss://rpc.selendra.org"),
});

const contract = new ContractPromise(api, metadata, contractAddress);
const result = await contract.query.methodName(sender, {}, ...args);

Wallet Strategies

MetaMask (EVM)

30M+ users globally. Familiar to Ethereum developers.

Pros: Large user base, standard implementation, mobile browser support.
Cons: EVM only, no Substrate features, requires Chrome/Firefox/Brave.

Polkadot.js Extension (Substrate)

Browser extension for Substrate chains. Required for WASM contracts.

Pros: Full Substrate access, WASM support, multi-chain.
Cons: Smaller user base, desktop only.

Custodial Wallets

Backend manages keys. Users authenticate via social login. Lower barrier for Cambodia market.

Pattern: Social login → auto-create wallet → server-side signing → simplified UI without seed phrases.

StadiumX example: Social login creates custodial wallet. Users receive NFT tickets without managing keys.

Security: Server compromise risks funds. Requires robust key management, insurance, or fund limits.

Frontend Frameworks

React Stack

Recommended:

• Next.js (framework + routing)
• ethers.js/Web3.js (blockchain)
• wagmi/web3-react (wallet hooks)
• Zustand/Redux (state)
• TailwindCSS (styling)

src/
  components/
    WalletConnect.tsx
    ContractInteraction.tsx
  hooks/
    useContract.ts
    useWallet.ts

Vue.js Stack

• Nuxt.js, vue-dapp, ethers.js, Pinia, Vite

Mobile-First (Cambodia)

Cambodia primarily mobile. Optimize for:

• MetaMask mobile browser
• Responsive design, touch interactions
• Minimal data usage
• Offline capability

StadiumX Implementation

Sports league ticketing on Selendra. NFT tickets prevent fraud. Free minting via gas sponsorship.

Architecture:

• Next.js frontend (Vercel)
• ethers.js for contracts
• MetaMask + custodial wallets
• PostgreSQL off-chain data
• IPFS for NFT metadata

Features:

• Social login creates custodial wallet
• Gas sponsorship = free minting
• QR codes from NFT ownership
• Ticket resale with royalties
• Mobile-first design

Lessons:

• Custodial wallets reduce friction significantly
• Gas sponsorship essential for mainstream adoption
• Hybrid on-chain/off-chain improves performance
• Mobile optimization > desktop
• Direct support critical during launch

Transaction Costs

Selendra fees extremely low (~$0.00025). Still worth optimizing for UX and sponsorship efficiency.

Batching: Multiple operations in single transaction.

Gas sponsorship: Backend pays fees. Free user experience.

// Backend relayer signs user transaction
const relayer = new ethers.Wallet(relayerPrivateKey, provider);
const tx = await contract.populateTransaction.mint(userAddress);
await relayer.sendTransaction(tx);

Cost tracking: Monitor sponsorship costs. Set daily limits. Prevent abuse with rate limiting.

Testing

Local: Run Selendra node locally or use public testnet. Testnet recommended for collaboration.

Testnet config:

{
  chainId: '0x1F7', // 503 decimal
  chainName: 'Selendra Testnet',
  rpcUrls: ['https://rpc-testnet.selendra.org'],
  blockExplorerUrls: ['https://explorer-testnet.selendra.org']
}

Strategy:

1. Unit test contract interaction functions
2. Integration test with testnet contracts
3. E2E test with Cypress/Playwright
4. User testing with Cambodia users

Debugging:

• MetaMask developer mode
• Browser console for Web3 errors
• Block explorer for transaction verification
• Network tab for RPC monitoring

Community

Telegram: t.me/selendranetwork | X: @selendranetwork | GitHub: github.com/selendra/selendra