ritual-dapp-frontend

Ritual dApp Frontend Skill

Version: 1.0.0

Build production-grade React/Next.js frontends for Ritual Chain dApps with async transaction state machines, on-chain event subscriptions, and wallet integration.

When to Use

Use this skill when:

• Building a frontend for a Ritual Chain dApp
• Implementing async transaction tracking UI
• Adding wallet connection for Ritual Chain
• Creating hooks for precompile interactions
• Displaying job status, fee estimates, or streaming results
• Styling transaction state indicators

Do NOT use when:

• Building backend services (use contract interaction patterns instead)
• Writing smart contracts (use Solidity tooling)
• Working with non-Ritual EVM chains (adapt chain config)

Tech Stack

Core dependencies:

{
  "next": "^14.2.0",
  "wagmi": "^2.12.0",
  "viem": "^2.21.0",
  "@tanstack/react-query": "^5.59.0",
  "zustand": "^4.5.0"
}

Quick Start Pattern

1. Setup Chain & Providers

File: lib/chain.ts

import { defineChain } from 'viem';

export const ritualChain = defineChain({
  id: 1979,
  name: 'Ritual',
  nativeCurrency: { name: 'RIT', symbol: 'RIT', decimals: 18 },
  rpcUrls: {
    default: { http: ['https://rpc.ritual.network'] },
  },
  blockExplorers: {
    default: { name: 'Ritual Explorer', url: 'https://explorer.ritual.network' },
  },
});

File: lib/wagmi.ts

import { createConfig, http } from 'wagmi';
import { injected, walletConnect } from 'wagmi/connectors';
import { ritualChain } from './chain';

export const wagmiConfig = createConfig({
  chains: [ritualChain],
  connectors: [
    injected(),
    walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID! }),
  ],
  transports: {
    [ritualChain.id]: http('https://rpc.ritual.network'),
  },
});