Connect Users

<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>

import { useState } from 'react';

function AddNetworkButton() {
    const [status, setStatus] = useState('');

    const addNetwork = async () => {
        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: []
                    }]
                });
                setStatus('Network added successfully!');
            } catch (error) {
                setStatus('Error: ' + error.message);
            }
        } else {
            setStatus('Please install a wallet');
        }
    };

    return (
        <div>
            <button 
                onClick={addNetwork}
                style={{
                    backgroundColor: '#0073b7',
                    color: 'white',
                    border: 'none',
                    padding: '12px 24px',
                    borderRadius: '6px',
                    fontSize: '16px',
                    fontWeight: 500,
                    cursor: 'pointer',
                    transition: 'background-color 0.2s ease',
                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif'
                }}
                onMouseEnter={(e) => e.target.style.backgroundColor = '#005a8f'}
                onMouseLeave={(e) => e.target.style.backgroundColor = '#0073b7'}
            >
                Add Network to Wallet
            </button>
            {status && <p style={{ marginTop: '12px', color: status.includes('Error') ? '#d32f2f' : '#2e7d32' }}>{status}</p>}
        </div>
    );
}