# Connect Wallet

### Supported Wallets

| Wallet          | Desktop | Mobile | Browser Extension | Hardware |
| --------------- | ------- | ------ | ----------------- | -------- |
| MetaMask        | ✅       | ✅      | ✅                 | ✅        |
| Trust Wallet    | ❌       | ✅      | ✅                 | ❌        |
| Coinbase Wallet | ✅       | ✅      | ✅                 | ❌        |
| Rainbow         | ❌       | ✅      | ✅                 | ❌        |
| Ledger          | ✅       | ❌      | ❌                 | ✅        |
| Trezor          | ✅       | ❌      | ❌                 | ✅        |
| WalletConnect   | ✅       | ✅      | ❌                 | ❌        |

### MetaMask Setup

MetaMask is the most popular and recommended wallet for OPN Chain.

#### Browser Extension

1. **Install MetaMask**
   * [Chrome/Brave](https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn)
   * [Firefox](https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/)
2. **Create or Import Wallet**
   * Follow MetaMask's setup wizard
   * Securely store your seed phrase
   * Never share your private key or seed phrase
3. **Add OPN Network**

   **Option A: Automatic (Recommended)**

   ```javascript
   // Add this to your website
   async function addOPNNetwork() {
     try {
       await window.ethereum.request({
         method: 'wallet_addEthereumChain',
         params: [{
           chainId: '0x3d8',
           chainName: 'OPN Testnet',
           nativeCurrency: {
             name: 'Test OPN',
             symbol: 'OPN',
             decimals: 18
           },
           rpcUrls: ['https://testnet-rpc.iopn.tech'],
           blockExplorerUrls: []
         }]
       });
     } catch (error) {
       console.error('Failed to add network:', error);
     }
   }
   ```

   **Option B: Manual**

   * Click the network dropdown
   * Select "Add Network"
   * Click "Add a network manually"
   * Enter:
     * **Network Name**: OPN Testnet
     * **RPC URL**: <https://testnet-rpc.iopn.tech>
     * **Chain ID**: 984
     * **Currency Symbol**: OPN

### Mobile Setup

1. **Download MetaMask Mobile**
   * [iOS App Store](https://apps.apple.com/us/app/metamask-blockchain-wallet/id1438144202)
   * [Android Play Store](https://play.google.com/store/apps/details?id=io.metamask)
2. **Import or Create Wallet**
   * Use same seed phrase as desktop for sync
   * Or create new mobile-only wallet
3. **Add OPN Network**
   * Go to Settings → Networks
   * Tap "Add Network"
   * Enter the network details above

### Connecting Hardware Wallets

MetaMask supports Ledger and Trezor hardware wallets:

1. **Connect Hardware Wallet**
   * Plug in your device
   * In MetaMask, go to Settings → Advanced
   * Enable "Use hardware wallets"
2. **Add Hardware Account**
   * Click account dropdown → Connect hardware wallet
   * Select your device type
   * Follow on-screen instructions
3. **Use with OPN Chain**
   * Ensure OPN network is selected
   * Hardware wallet will sign transactions

### Trust Wallet Setup

Trust Wallet is popular for mobile users.

### Mobile Setup

1. **Download Trust Wallet**
   * [iOS](https://apps.apple.com/app/trust-crypto-bitcoin-wallet/id1288339409)
   * [Android](https://play.google.com/store/apps/details?id=com.wallet.crypto.trustapp)
2. **Add Custom Network**

   * Go to Settings → Networks
   * Tap the + icon
   * Select "Custom Network"
   * Enter:

   ```
        Network: OPN Testnet
        RPC URL: https://testnet-rpc.iopn.tech
        Chain ID: 984
        Symbol: OPN
        Block Explorer: https://testnet.iopn.tech
   ```

#### Browser Extension

1. **Install Trust Wallet Extension**
   * Available for Chrome, Brave, Edge
2. **Configure Network**
   * Click settings icon
   * Select "Custom Networks"
   * Add OPN details

### Coinbase Wallet Setup

#### Browser Extension

1. **Install Extension**
   * [Chrome Web Store](https://chrome.google.com/webstore/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad)
2. **Add Network**
   * Click Settings → Networks
   * Add Custom Network
   * Enter OPN details

### Mobile Setup

1. **Download App**
   * [iOS](https://apps.apple.com/app/coinbase-wallet/id1278383455)
   * [Android](https://play.google.com/store/apps/details?id=org.toshi)
2. **Configure Network**
   * Settings → Networks → Add Network
   * Enter OPN configuration

### WalletConnect Integration

WalletConnect allows you to connect any compatible wallet to DApps.

#### For DApp Developers

```javascript
import WalletConnectProvider from "@walletconnect/web3-provider";
import Web3 from "web3";

// Initialize WalletConnect
const provider = new WalletConnectProvider({
  rpc: {
    984: "https://testnet-rpc.iopn.tech",
  },
  chainId: 984,
});

// Enable session
await provider.enable();

// Create Web3 instance
const web3 = new Web3(provider);

// Now you can use web3 as normal
const accounts = await web3.eth.getAccounts();
```

#### For Users

1. **Open DApp** that supports WalletConnect
2. **Click Connect Wallet** → WalletConnect
3. **Scan QR Code** with your mobile wallet
4. **Approve Connection** in your wallet

### Programmatic Wallet Connection

#### Detect Installed Wallets

```javascript
// Check for injected wallets
function getInstalledWallets() {
  const wallets = [];
  
  if (typeof window.ethereum !== 'undefined') {
    // MetaMask or compatible
    if (window.ethereum.isMetaMask) {
      wallets.push('MetaMask');
    }
    
    // Coinbase Wallet
    if (window.ethereum.isCoinbaseWallet) {
      wallets.push('Coinbase Wallet');
    }
    
    // Trust Wallet
    if (window.ethereum.isTrust) {
      wallets.push('Trust Wallet');
    }
  }
  
  return wallets;
}
```

#### Universal Connection Handler

```javascript
class WalletConnector {
  constructor() {
    this.provider = null;
    this.accounts = [];
    this.chainId = null;
  }
  
  async connect() {
    // Check if wallet is installed
    if (typeof window.ethereum === 'undefined') {
      throw new Error('No wallet detected. Please install MetaMask!');
    }
    
    try {
      // Request account access
      this.accounts = await window.ethereum.request({ 
        method: 'eth_requestAccounts' 
      });
      
      // Get chain ID
      this.chainId = await window.ethereum.request({ 
        method: 'eth_chainId' 
      });
      
      // Check if on OPN Chain
      if (parseInt(this.chainId, 16) !== 984) {
        await this.switchToOPN();
      }
      
      // Set provider
      this.provider = window.ethereum;
      
      // Setup event listeners
      this.setupEventListeners();
      
      return this.accounts[0];
      
    } catch (error) {
      console.error('Failed to connect:', error);
      throw error;
    }
  }
  
  async switchToOPN() {
    try {
      await window.ethereum.request({
        method: 'wallet_switchEthereumChain',
        params: [{ chainId: '0x3d8' }],
      });
    } catch (switchError) {
      // Chain not added yet
      if (switchError.code === 4902) {
        await this.addOPNNetwork();
      }
    }
  }
  
  async addOPNNetwork() {
    await window.ethereum.request({
      method: 'wallet_addEthereumChain',
      params: [{
        chainId: '0x3d8',
        chainName: 'OPN Testnet',
        nativeCurrency: {
          name: 'Test OPN',
          symbol: 'OPN',
          decimals: 18
        },
        rpcUrls: ['https://testnet-rpc.iopn.tech'],
        blockExplorerUrls: []
      }],
    });
  }
  
  setupEventListeners() {
    window.ethereum.on('accountsChanged', (accounts) => {
      this.accounts = accounts;
      console.log('Accounts changed:', accounts);
    });
    
    window.ethereum.on('chainChanged', (chainId) => {
      this.chainId = chainId;
      console.log('Chain changed:', chainId);
      // Reload page on chain change
      window.location.reload();
    });
  }
  
  async disconnect() {
    // Note: There's no real "disconnect" in injected wallets
    // This is more for cleaning up state
    this.provider = null;
    this.accounts = [];
    this.chainId = null;
  }
}

// Usage
const wallet = new WalletConnector();
const account = await wallet.connect();
console.log('Connected account:', account);
```

### Security Best Practices

#### For Users

1. **Verify Network Details**
   * Always double-check RPC URL
   * Confirm Chain ID is 984
   * Only use official URLs
2. **Protect Your Keys**
   * Never share private keys
   * Never enter seed phrase on websites
   * Use hardware wallets for large amounts
3. **Check Transaction Details**
   * Verify recipient address
   * Check gas fees
   * Understand what you're signing

### For Developers

1. **Always Request Permissions**

   ```javascript
   // Bad - assumes permission
   const accounts = await web3.eth.getAccounts();

   // Good - requests permission
   const accounts = await window.ethereum.request({ 
     method: 'eth_requestAccounts' 
   });
   ```
2. **Handle Network Changes**

   ```javascript
   window.ethereum.on('chainChanged', (chainId) => {
     if (parseInt(chainId, 16) !== 984) {
       alert('Please switch to OPN Network');
     }
   });
   ```
3. **Validate User Input**

   ```javascript
   function isValidAddress(address) {
     return /^0x[a-fA-F0-9]{40}$/.test(address);
   }
   ```

### Common Issues

#### MetaMask Not Detected

```javascript
// Wait for page load
if (document.readyState !== 'loading') {
  detectMetaMask();
} else {
  document.addEventListener('DOMContentLoaded', detectMetaMask);
}

function detectMetaMask() {
  if (typeof window.ethereum !== 'undefined') {
    console.log('MetaMask detected!');
  } else {
    console.log('Please install MetaMask!');
    window.open('https://metamask.io/download/', '_blank');
  }
}
```

#### Network Addition Failed

```javascript
async function forceAddNetwork() {
  try {
    // Try to switch first
    await window.ethereum.request({
      method: 'wallet_switchEthereumChain',
      params: [{ chainId: '0x3d8' }],
    });
  } catch (error) {
    if (error.code === 4902) {
      // Add network with retry
      let retries = 3;
      while (retries > 0) {
        try {
          await window.ethereum.request({
            method: 'wallet_addEthereumChain',
            params: [OPN_NETWORK_CONFIG],
          });
          break;
        } catch (addError) {
          retries--;
          if (retries === 0) throw addError;
          await new Promise(resolve => setTimeout(resolve, 1000));
        }
      }
    }
  }
}
```

#### Mobile Connection Issues

For mobile DApps, use deep linking:

```javascript
function connectMobileWallet() {
  const dappUrl = window.location.href;
  const metamaskAppUrl = `https://metamask.app.link/dapp/${dappUrl}`;
  
  // Detect mobile
  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
  
  if (isMobile && !window.ethereum) {
    window.location.href = metamaskAppUrl;
  }
}
```

***

**Need help?** Join our [Discord](https://discord.gg/iopn)
