A production-ready multi-chain Web3 application enabling seamless interactions across 117+ blockchain networks with embedded widget support and referral system

Live Demo | Documentation | Embed Widget

• Overview
• Key Features
• Quick Start
• Embed Widget & Referral System
• Supported Networks
• Tech Stack
• Project Structure
• Multi-Language Support
• Usage Guide
• Security
• Contributing
• Roadmap

OnChainGM is a comprehensive Web3 application that makes blockchain interactions simple and accessible. Whether you're sending daily GM transactions, bridging tokens across chains, or deploying smart contracts, OnChainGM provides a seamless, user-friendly experience across 117+ blockchain networks.

• 117+ Networks: The largest multi-chain support in a single interface
• Smart Bridge: Auto-selects the best routes with lowest fees and fastest execution
• Embeddable Widget: Add GM buttons to any website with referral earnings
• Daily GM Ritual: Build your on-chain presence with daily transactions
• One-Click Deploy: Launch smart contracts across any supported network
• Social Integration: Native Farcaster support for Web3 social features
• 9 Languages: Full internationalization support
• Zero Config: Works perfectly without any API keys or configuration

• Web3 Enthusiasts: Daily GM ritual and cross-chain presence
• Website Owners: Earn 10% commission with embedded GM buttons
• DeFi Users: Multi-chain bridge with best rates
• Developers: Quick contract deployment and testing
• Crypto Traders: Efficient token bridging across chains
• Community Members: Social features and referral system

The most intelligent bridging experience in Web3:

• Dual Provider System: LiFi SDK + Relay Protocol for maximum coverage
• Auto-Select Best Route: Automatically chooses optimal route based on:
  • Highest destination token amount
  • Lowest total fees
  • Fastest execution time
• Smart Route Refresh: Routes update every 30 seconds with auto-selection
• Manual Override: Power users can select preferred routes
• Gas Optimization: Smart MAX button reserves gas for native tokens
• Real-Time Quotes: Live price impact and slippage calculations
• Token Search: Find any token by symbol, name, or contract address
• Balance Tracking: Real-time balance updates across all chains

Monetize your website with embedded GM buttons:

• Easy Integration: Simple copy-paste HTML code
• Customizable: Choose network, colors, and styling
• Referral Earnings: Earn 10% commission on all transactions
• Instant Payouts: Automatic payments directly to your wallet
• Multi-Network: Support for all 117+ networks
• Mobile Responsive: Works perfectly on all devices
• Zero Maintenance: Set it and forget it

Quick Embed Example:

<script src="https://onchaingm.com/embed.js"></script>
<div
  class="gm-button"
  data-network="8453"
  data-referral="YOUR_WALLET_ADDRESS"
></div>

Build your on-chain presence across 117+ networks:

• Daily GM Transactions: Send GM to any supported blockchain
• GM Streak Tracking: Monitor your consistency across chains
• Network Analytics: View GM statistics per network
• Social Sharing: Share your GM on Farcaster
• Cross-Chain History: Track all your GM transactions in one place

Deploy contracts with a single click:

• Multiple Templates: Pre-built contract templates
• Network-Specific Optimization: Gas-optimized for each chain
• Deployment Tracking: Monitor all your deployments
• Verification Support: Automatic contract verification
• Analytics Dashboard: View deployment statistics

Seamless wallet connectivity:

• Multi-Wallet Support: MetaMask, Coinbase Wallet, WalletConnect, and more
• RainbowKit Powered: Beautiful, accessible wallet connection UI
• Balance Management: Track balances across all connected chains
• Transaction History: Complete transaction timeline
• Network Switching: Automatic network switching when needed

Native Web3 social features:

• Mini-App Support: Works as a Farcaster mini-app
• Social Sharing: Share transactions directly to Farcaster
• Frame Support: Render Farcaster frames
• Community Features: Connect with other Web3 users

Comprehensive analytics powered by Supabase:

• Transaction Monitoring: Track all bridge and GM transactions
• User Statistics: Personal activity metrics
• Network Performance: See which networks are most active
• GM Streaks: Track your daily ritual consistency
• Referral Analytics: Monitor referral performance

• Node.js 18+ installed
• npm or yarn package manager
• Git for version control
• Web3 Wallet (MetaMask, Coinbase Wallet, etc.)

# Clone the repository
git clone https://github.com/your-org/onchaingm.git

# Navigate to project directory
cd onchaingm

# Install dependencies
npm install

# Start development server
npm run dev

# Application runs at http://localhost:5173

The application works perfectly without any configuration! However, for full features:

# Copy environment template
cp .env.example .env

Environment Variables:

Important Notes:

• Without Supabase: App works normally, analytics features are disabled
• Bridge functionality: Works without any configuration
• Wallet connection: No API keys required
• All core features work out of the box!

# Build for production
npm run build

# Preview production build
npm run preview

Build output will be in the dist/ directory.

1. Go to: https://onchaingm.com/embed
2. Select your network (e.g., Base, Optimism, Arbitrum)
3. Enter your wallet address in the "Referral Address" field
4. Copy the generated embed code

Paste the code anywhere in your HTML:

<script src="https://onchaingm.com/embed.js"></script>
<div
  class="gm-button"
  data-network="8453"
  data-color="blue"
  data-name="Base"
  data-icon="https://onchaingm.com/chains/base.jpg"
  data-referral="YOUR_WALLET_ADDRESS"
></div>

That's it! You now earn 10% commission on every GM transaction made through your button.

Standard GM Fee:       0.000029 ETH
User Discount (15%):   0.0000045 ETH
Discounted Fee:        0.00002465 ETH
Your Commission (10%): 0.000002465 ETH per GM

10 users × 1 GM/day:    $0.085/day  →  $2.55/month
100 users × 1 GM/day:   $0.85/day   →  $25/month
1000 users × 1 GM/day:  $8.50/day   →  $255/month

(Calculated at $3,500/ETH. Actual earnings depend on ETH price and network fees)

• Blog Posts - Add GM buttons to Web3 tutorials
• Documentation - Integrate into developer docs
• Gaming Sites - Reward community for daily check-ins
• NFT Projects - Add to minting pages
• Portfolio Sites - Monetize Web3 portfolio
• Social Profiles - Link in bio tools
• YouTube - Add to video descriptions
• Newsletters - Include in Web3 newsletters

• ✅ 10% commission on every transaction
• ✅ Instant, automatic payouts
• ✅ No claiming or maintenance
• ✅ Works across 117+ networks
• ✅ Easy integration (copy/paste HTML)
• ✅ Win-win for users and referrers
• ✅ Scales infinitely

The website owner visits onchaingm.com/embed and:

1. Selects a network (e.g., Base)
2. Enters their wallet address
3. Sees referral enabled confirmation with commission details
4. Copies the generated embed code with their referral address included:

<script src="https://onchaingm.com/embed.js"></script>
<div class="gm-button"
  data-network="8453"
  data-color="blue"
  data-name="Base"
  data-icon="..."
  data-referral="0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb">
</div>

5. Pastes the code on their website

When a user visits the website with the embedded button:

1. They see the GM button for the selected network
2. Clicking the button triggers the embed.js script
3. The script reads the data-referral attribute
4. Creates a modal with an iframe pointing to:

   https://onchaingm.com/embed/network-card
     ?network=8453
     &name=Base
     &ref=0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb
   

5. The modal opens with the embedded network card

The embedded page (embedded-network-card.tsx):

1. Reads the ref URL parameter using searchParams.get('ref')
2. Validates the referral address:
   • Checks if it's a valid Ethereum address
   • Ensures it's not the zero address
   • Confirms it's not a self-referral
3. Stores the referral in localStorage:
   • localStorage.setItem('referrer', ref)
   • localStorage.setItem('referrer_timestamp', Date.now())
4. Displays a UI indicator showing the referral is active

The user completes the transaction:

1. Clicks "Connect Wallet" and connects via MetaMask/WalletConnect
2. Clicks the "GM" button
3. The use-gm hook:
   • Reads the referrer from localStorage
   • Validates the timestamp (must be within 24 hours)
   • Validates the referrer address
   • Calls the smart contract: contract.onChainGMWithReferral(referrer)
4. User confirms the transaction

The smart contract on the selected network:

1. Receives onChainGMWithReferral(referrerAddress)
2. Calculates fees:
   • Standard fee: 0.000029 ETH
   • User discount (15%): -0.0000045 ETH
   • Discounted fee: 0.00002465 ETH
   • Commission (10% of discounted): 0.000002465 ETH
3. User pays: 0.00002465 ETH (saves 15%)
4. Distributes funds:
   • 0.000002465 ETH → Referrer (instant payout)
   • 0.000022185 ETH → Protocol
5. Transaction completes and emits event

Final state after transaction:

• End User: GM sent successfully, saved 15% on fees
• Website Owner: Earned commission instantly (no claiming needed)
• Both parties: Win-win outcome with automatic, trustless payments

The referral system includes multiple security layers:

• Address Validation: Using ethers.js to validate all addresses
• Zero Address Rejection: Prevents invalid referrals
• Self-Referral Prevention: Users cannot refer themselves
• 24-Hour Expiry: Referral links expire after 24 hours
• Timestamp Tracking: Prevents stale referrals
• Case-Insensitive Comparison: Handles address variations
• Smart Contract Validation: On-chain verification of all parameters

End User Benefits:

• Saves 15% on every GM transaction
• Supports favorite content creators
• Same great user experience

Website Owner Benefits:

• Earns 10% passive commission
• Instant automatic payouts
• No maintenance required
• Easy copy/paste integration

OnChainGM Benefits:

• Viral growth mechanism
• Decentralized marketing
• Increased adoption
• Strong network effects

OnChainGM supports the largest collection of blockchain networks:

Ethereum, Bitcoin (via Merlin), Solana

Base, Arbitrum, Arbitrum Nova, Optimism, zkSync Era, Scroll, Linea, Blast, Mode, Zora, Polygon zkEVM, Manta Pacific, Mantle, Metis, Boba Network

Avalanche, BNB Chain, Polygon, Fantom, Gnosis Chain, Moonbeam, Moonriver, Celo, Harmony, Cronos, Aurora, Evmos, Kava, Fuse

Soneium, Ink, UniChain, Plume, Superposition, World Chain, Cyber, Polynomial, Sanko, Mint, Redstone, Taiko, Kroma

Immutable X, Immutable zkEVM, Ronin, Beam, Treasure, Ancient8, Oasys, Astar zkEVM, StratoVM

Fraxtal, BOB, Merlin Chain, RARI Chain

Merlin Chain, B² Network, BEVM, Bitlayer

Arbitrum Sepolia, Base Sepolia, Optimism Sepolia, Ethereum Sepolia (testnets available)

View Full Network List →

• React 18.2 - Modern UI library
• TypeScript 5.2 - Type-safe development
• Vite 5.4 - Lightning-fast build tool
• Tailwind CSS 3.4 - Utility-first styling

• Wagmi 2.5 - React hooks for Ethereum
• Viem 2.7 - TypeScript interface for Ethereum
• @lifi/sdk 3.8 - Bridge aggregation
• RainbowKit 2.0 - Wallet connection UI
• Ethers.js 6.11 - Ethereum library
• zkSync Web3 0.15 - zkSync-specific features

• Lucide React - Beautiful icon system
• React Hot Toast - Toast notifications
• Recharts 3.1 - Analytics visualization
• React Confetti - Celebration animations
• React Router DOM 6.22 - Client-side routing

• Supabase 2.53 - Backend-as-a-Service
• @tanstack/react-query 5.24 - Data fetching and caching
• Fuse.js 7.0 - Fuzzy search functionality
• date-fns 4.1 - Date utilities

• @farcaster/miniapp-sdk 0.2 - Farcaster mini-app support
• @neynar/react 1.2 - Farcaster API integration

OnChainGM supports 9 languages with full internationalization:

All features including the embed widget and referral system are fully translated.

1. Connect Wallet - Click "Connect Wallet" and choose your wallet
2. Select Networks - Choose source and destination networks
3. Select Tokens - Pick tokens on both chains
4. Enter Amount - Type amount or click MAX
5. Review Route - Best route is auto-selected
6. Execute Bridge - Confirm transaction and track progress

1. Connect Wallet - Connect to any supported network
2. Select Network - Browse 117+ networks or use search
3. Send GM - Click "GM" button and confirm transaction
4. Share - Optionally share on Farcaster

1. Click Button - On any website with embedded GM button
2. Connect Wallet - Modal opens with wallet connection
3. Send GM - Complete transaction with 15% discount
4. Website Owner Earns - Automatic 10% commission

• No private keys stored
• Client-side wallet integration
• User controls all transactions

• Slippage protection
• Price impact warnings
• Transaction simulation
• Gas estimation
• Approval management

• Supabase Row Level Security (RLS)
• Encrypted data transmission
• CORS policy enforcement
• XSS protection
• SQL injection prevention

• Address validation (ethers.js)
• 24-hour expiry system
• Self-referral prevention
• On-chain validation

Q: Is OnChainGM open source? A: Yes! The codebase is available for review and contributions.

Q: Do I need API keys to use the app? A: No! The app works perfectly without any API keys.

Q: How many networks are supported? A: 117 blockchain networks and growing!

Q: What wallets can I use? A: Any wallet supported by RainbowKit: MetaMask, Coinbase Wallet, WalletConnect, and more.

Q: How does the referral system work? A: Generate embed code with your wallet address, place it on your website, and earn 10% commission on all GM transactions made through your button.

Q: When do I get paid? A: Instantly! Commissions are sent directly to your wallet on every transaction.

Q: Can I cancel a bridge transaction? A: Once confirmed on-chain, transactions cannot be cancelled. Always verify details before confirming.

We welcome contributions from the community!

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Commit (git commit -m 'Add amazing feature')
5. Push (git push origin feature/amazing-feature)
6. Open a Pull Request

• Add new network support
• Improve UI/UX
• Fix bugs
• Add translations
• Write documentation
• Optimize performance

• Documentation: onchaingm.com/documentation
• Support Page: onchaingm.com/support
• Embed Widget: onchaingm.com/embed

• Website: onchaingm.com
• Twitter: @onchaingm
• Farcaster: @onchaingm

Built with amazing open-source technologies:

• LiFi Protocol - Bridge aggregation
• Relay Protocol - Fast bridging
• RainbowKit - Wallet UI
• Wagmi - React hooks for Ethereum
• Supabase - Backend infrastructure
• Farcaster - Web3 social protocol
• Tailwind CSS - CSS framework
• Vite - Build tool

This project is licensed under the MIT License.

OnChainGM is provided "as is" without warranty of any kind. Use at your own risk. Always verify transaction details before confirming. Never share your private keys or seed phrase.