Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
137 lines (107 loc) · 3.6 KB

CONTRIBUTING.md

File metadata and controls

137 lines (107 loc) · 3.6 KB

Contributing to Chain Derby

Thank you for your interest in contributing to Chain Derby! This tool demonstrates relative transaction latency across EVM-compatible blockchain networks.

Quick Start

  1. clone the repository

    git clone https://github.com/YourUsername/horse-race.git
cd horse-race/packages/app

  2. Install dependencies and start

    npm install
npm run dev

  3. Open http://localhost:3000

Adding a New Blockchain

If Chain is Already in Viem

If your chain is already supported by viem/chains, follow these steps:

Step 1: Import the chain in src/chain/networks.ts:

import { newChain } from "viem/chains";

Step 2: Create the chain configuration:

export const newChainConfig = {
  ...newChain,
  testnet: true, // or false for mainnet
  color: "#FF6B35", // Brand color for UI
  logo: "/logos/newchain.png",
  faucetUrl: "https://faucet.newchain.testnet", // For testnets only
} as const as ChainConfig;

Step 3: Add to raceChains array:

export const raceChains = [
  // ... existing chains
  newChainConfig,
];

Step 4: Add chain logo to public/logos/newchain.png (32x32px recommended)

If Chain is Missing from Viem

If your chain isn't in viem yet, define it manually:

Step 1: Define the full chain configuration in src/chain/networks.ts:

export const customChain = {
  id: 12345,
  name: "Custom Chain",
  nativeCurrency: { 
    name: "Custom Token", 
    symbol: "CUSTOM", 
    decimals: 18 
  },
  rpcUrls: {
    default: { http: ["https://rpc.customchain.network"] },
    public: { http: ["https://rpc.customchain.network"] },
  },
  blockExplorers: {
    default: { 
      name: "Custom Explorer", 
      url: "https://explorer.customchain.network" 
    },
  },
  // Chain Derby properties:
  testnet: true,
  color: "#FF6B35",
  logo: "/logos/custom.png",
  faucetUrl: "https://faucet.customchain.network",
} as const as ChainConfig;

Step 2: Add to raceChains array and add the logo as above.

Bonus: Consider contributing the chain definition to viem/chains to help the broader ecosystem!

Other Ways to Contribute

UI/UX Improvements

  • Better responsive design
  • Improved animations
  • Accessibility enhancements
  • Dark mode optimizations

Features

  • Export race results
  • Historical data tracking
  • Custom RPC endpoints
  • Performance analytics

Bug Fixes

  • Mobile layout issues
  • Performance optimizations
  • Color compatibility (OKLCH)
  • Cross-browser compatibility

Pull Request Guidelines

  1. Create a feature branch: git checkout -b feature/chain-name
  2. Test your changes: Ensure app builds and functions work
  3. Follow code style: TypeScript strict mode, Tailwind CSS
  4. Submit PR with clear description and screenshots

Requirements

  • App builds without errors (npm run build)
  • Responsive design maintained
  • Dark mode compatibility
  • Chain logo included (for new chains)

Development Notes

  • File structure: Main chain configs in src/chain/networks.ts
  • Styling: Tailwind CSS with dark mode support
  • Components: React functional components with TypeScript
  • Testing: Test locally with different chains and screen sizes

Important

  • Testnet first: Prioritize testnet implementations for safety
  • No private keys: Never commit sensitive data
  • Performance: Test with multiple chains to ensure smooth experience

For questions, open an issue or check existing discussions. Thanks for contributing!