Skip to content

Latest commit

 

History

History
181 lines (166 loc) · 7.04 KB

connect-to-abstract.mdx

File metadata and controls

181 lines (166 loc) · 7.04 KB
title description
Connect to Abstract
Add Abstract to your wallet or development environment to get started.

Use the information below to connect and submit transactions to Abstract.

Property Mainnet Testnet
Name Abstract Abstract Testnet
Description The mainnet for Abstract. The public testnet for Abstract.
Chain ID 2741 11124
RPC URL https://api.mainnet.abs.xyz https://api.testnet.abs.xyz
RPC URL (Websocket) wss://api.mainnet.abs.xyz/ws wss://api.testnet.abs.xyz/ws
Explorer https://abscan.org/ https://sepolia.abscan.org/
Verify URL https://api.abscan.org/api https://api-sepolia.abscan.org/api
Currency Symbol ETH ETH
Click the button below to connect your wallet to the Abstract.

export const ConnectWallet = ({ title }) => { if (typeof document === "undefined") { return null; } else { setTimeout(() => { const connectWalletContainer = document.getElementById("connect-wallet-container"); if (connectWalletContainer) { connectWalletContainer.innerHTML = '

Connect WalletSwitch Network
';

    const style = document.createElement('style');
    style.textContent = `
      .connect-wallet-btn {
        background-color: var(--accent);
        color: var(--accent-inverse);
        border: 2px solid rgba(0, 0, 0, 0.1);
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        outline: none;
        margin-right: 10px;
      }
      .connect-wallet-btn:hover {
        background-color: var(--accent-dark);
        border-color: rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }
      .connect-wallet-btn:active {
        transform: translateY(1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      #walletStatus {
        margin-top: 10px;
        color: var(--text);
        font-size: 14px;
      }
      @media (prefers-color-scheme: dark) {
        .connect-wallet-btn {
          background-color: var(--accent-light);
          color: var(--accent-dark);
          border-color: rgba(255, 255, 255, 0.1);
        }
        .connect-wallet-btn:hover {
          background-color: var(--accent);
          color: var(--accent-inverse);
          border-color: rgba(255, 255, 255, 0.2);
        }
      }
    `;
    document.head.appendChild(style);

    const connectWalletBtn = document.getElementById('connectWalletBtn');
    const switchNetworkBtn = document.getElementById('switchNetworkBtn');
    const walletStatus = document.getElementById('walletStatus');

    const ABSTRACT_CHAIN_ID = '0xab5'; // 2741 in hexadecimal
    const ABSTRACT_RPC_URL = 'https://api.mainnet.abs.xyz';

    async function connectWallet() {
      if (typeof window.ethereum !== 'undefined') {
        try {
          await window.ethereum.request({ method: 'eth_requestAccounts' });
          connectWalletBtn.style.display = 'none';
          await checkNetwork();
        } catch (error) {
          console.error('Failed to connect wallet:', error);
        }
      } else {
        console.error('Please install MetaMask or another Ethereum wallet');
      }
    }

    async function checkNetwork() {
      if (typeof window.ethereum !== 'undefined') {
        const chainId = await window.ethereum.request({ method: 'eth_chainId' });
        if (chainId === ABSTRACT_CHAIN_ID) {
          switchNetworkBtn.style.display = 'none';
          walletStatus.textContent = 'Connected to Abstract.';
        } else {
          switchNetworkBtn.style.display = 'inline-block';
          walletStatus.textContent = '';
        }
      }
    }

    async function switchToAbstractChain() {
      if (typeof window.ethereum !== 'undefined') {
        try {
          await window.ethereum.request({
            method: 'wallet_switchEthereumChain',
            params: [{ chainId: ABSTRACT_CHAIN_ID }],
          });
          await checkNetwork();
        } catch (switchError) {
          if (switchError.code === 4902) {
            try {
              await window.ethereum.request({
                method: 'wallet_addEthereumChain',
                params: [{
                  chainId: ABSTRACT_CHAIN_ID,
                  chainName: 'Abstract',
                  nativeCurrency: {
                    name: 'Ethereum',
                    symbol: 'ETH',
                    decimals: 18
                  },
                  rpcUrls: [ABSTRACT_RPC_URL],
                  blockExplorerUrls: ['https://abscan.org']
                }],
              });
              await checkNetwork();
            } catch (addError) {
              console.error('Failed to add Abstract chain:', addError);
            }
          } else {
            console.error('Failed to switch to Abstract chain:', switchError);
          }
        }
      }
    }

    connectWalletBtn.addEventListener('click', connectWallet);
    switchNetworkBtn.addEventListener('click', switchToAbstractChain);

    // Listen for network changes
    if (typeof window.ethereum !== 'undefined') {
      window.ethereum.on('chainChanged', checkNetwork);
      window.ethereum.on('accountsChanged', (accounts) => {
        if (accounts.length === 0) {
          connectWalletBtn.style.display = 'inline-block';
          switchNetworkBtn.style.display = 'none';
          walletStatus.textContent = '';
        } else {
          checkNetwork();
        }
      });
    }

    // Initial check
    if (typeof window.ethereum !== 'undefined') {
      window.ethereum.request({ method: 'eth_accounts' }).then(accounts => {
        if (accounts.length > 0) {
          connectWalletBtn.style.display = 'none';
          checkNetwork();
        }
      });
    }
  }
}, 1);

return <div id="connect-wallet-container"></div>;

} };