Skip to main content
Enable users to connect wallets to Pylon appchains and interact with applications. This page covers adding networks to wallets and integrating wallet connections in frontend applications.

Available Test Networks

These test networks demonstrate Pylon functionality. Add them to a wallet with one click to test cross-chain operations and explore Pylon’s features.
NetworkSettlement LayerRPC URLChain IDAdd to Wallet
Pylon Base SepoliaBase Sepoliahttps://pylon.base-sepolia.spire.dev/v1/chain/2137/rpc2137
Pylon Base Mainnet (Test)Base Mainnethttps://pylon.base-mainnet.spire.dev/v1/chain/7312/rpc7312
Pylon Optimism SepoliaOptimism Sepoliahttps://pylon.optimism-sepolia.spire.dev/v1/chain/2138/rpc2138
Pylon Celo Mainnet (Test)Celo Mainnethttps://pylon.celo-mainnet.spire.dev/v1/chain/2139/rpc2139

Add Your Custom Network

After setting up a Pylon appchain through chain setup, use the tool below to add it to a wallet or generate embeddable code for an application. The interactive form generates code snippets that update automatically as network details are entered.

Copy-Paste Code for Your Website

Enter network details in the form above to generate code for adding a network to user wallets. The code snippets below update automatically with entered values.
<button id="addNetworkBtn" onclick="addNetwork()">Add Network to Wallet</button>

<script>
async function addNetwork() {
    if (typeof window.ethereum !== 'undefined') {
        try {
            await window.ethereum.request({
                method: 'wallet_addEthereumChain',
                params: [{
                    chainId: '{CHAIN_ID_HEX}',
                    chainName: '{CHAIN_NAME}',
                    nativeCurrency: {
                        name: '{CURRENCY_NAME}',
                        symbol: '{CURRENCY_SYMBOL}',
                        decimals: 18
                    },
                    rpcUrls: ['{RPC_URL}'],
                    blockExplorerUrls: []
                }]
            });
            alert('Network added successfully!');
        } catch (error) {
            console.error('Error adding network:', error);
            alert('Error adding network: ' + error.message);
        }
    } else {
        alert('Wallet not detected. Please install MetaMask or another compatible wallet.');
    }
}
</script>

<style>
#addNetworkBtn {
    background-color: #0073b7;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

#addNetworkBtn:hover {
    background-color: #005a8f;
}

#addNetworkBtn:active {
    background-color: #004d7a;
}
</style>

Integrate Wallets in Your Application

For production applications, integrate wallet connections using established libraries and patterns. This provides better user experience, error handling, and support for multiple wallet types. wagmi is a React Hooks library for Ethereum that provides a simple, type-safe way to connect wallets and interact with chains. It supports MetaMask, WalletConnect, Coinbase Wallet, and other injected wallets. Key benefits:
  • Type-safe - Full TypeScript support
  • Multi-wallet support - Connect to multiple wallet providers
  • Auto-switching - Automatically switch networks when needed
  • React hooks - Simple, declarative API
  • Active maintenance - Regularly updated with latest wallet standards
Quick start:
  1. Review the wagmi Getting Started guide
  2. Configure your Pylon appchain as a custom chain in wagmi
  3. Use hooks like useConnect, useAccount, and useSwitchChain to manage wallet connections

Alternative Libraries

  • viem - TypeScript library for Ethereum, works well with wagmi or standalone
  • ethers.js - Popular Ethereum library with wallet connection utilities
  • web3.js - Ethereum JavaScript API
For wallet-specific implementations, refer to official documentation:

UX Best Practices

  • Automatic network switching - Detect when users need to switch networks and prompt them
  • Clear error messages - Handle network mismatches and connection failures gracefully
  • Loading states - Show connection status during wallet interactions
  • Mobile support - Consider WalletConnect for mobile wallet connections

Next Steps