Organize docs directory: move 25 files to appropriate locations
- Created docs/00-meta/ for documentation meta files (11 files) - Created docs/archive/reports/ for reports (5 files) - Created docs/archive/issues/ for issue tracking (2 files) - Created docs/bridge/contracts/ for Solidity contracts (3 files) - Created docs/04-configuration/metamask/ for Metamask configs (3 files) - Created docs/scripts/ for documentation scripts (2 files) - Root directory now contains only 3 essential files (89.3% reduction) All recommended actions from docs directory review complete.
This commit is contained in:
defiQUG
902
examples/add-rpc-network.html
Normal file
902
examples/add-rpc-network.html
Normal file
@@ -0,0 +1,902 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Add Defi Oracle Meta Mainnet - MetaMask & Exodus</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.network-info {
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.network-info h3 {
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #333;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.wallet-section {
|
||||
margin-bottom: 30px;
|
||||
padding: 25px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.wallet-section.metamask {
|
||||
border-color: #f6851b;
|
||||
background: #fff9f0;
|
||||
}
|
||||
|
||||
.wallet-section.exodus {
|
||||
border-color: #7c3aed;
|
||||
background: #faf5ff;
|
||||
}
|
||||
|
||||
.wallet-section.web3 {
|
||||
border-color: #f59e0b;
|
||||
background: #fffbeb;
|
||||
}
|
||||
|
||||
.wallet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wallet-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.wallet-title {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.metamask-button {
|
||||
background: linear-gradient(135deg, #f6851b 0%, #e2761b 100%);
|
||||
box-shadow: 0 4px 15px rgba(246, 133, 27, 0.4);
|
||||
}
|
||||
|
||||
.metamask-button:hover {
|
||||
box-shadow: 0 6px 20px rgba(246, 133, 27, 0.6);
|
||||
}
|
||||
|
||||
.exodus-button {
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
|
||||
box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
|
||||
}
|
||||
|
||||
.exodus-button:hover {
|
||||
box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6);
|
||||
}
|
||||
|
||||
.web3-button {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
|
||||
}
|
||||
|
||||
.web3-button:hover {
|
||||
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status.info {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
border: 1px solid #bee5eb;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
background: #fff3cd;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #ffc107;
|
||||
}
|
||||
|
||||
.instructions h4 {
|
||||
color: #856404;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.instructions ol {
|
||||
color: #856404;
|
||||
margin-left: 20px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.instructions li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.instructions code {
|
||||
background: #fff;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
background: #6c757d;
|
||||
padding: 8px 15px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.rpc-config {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #e7f3ff;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #0d6efd;
|
||||
}
|
||||
|
||||
.rpc-config h4 {
|
||||
color: #084298;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.rpc-config select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.rpc-config label {
|
||||
color: #084298;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.metamask-install {
|
||||
background: #fff3cd;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 2px solid #ffc107;
|
||||
}
|
||||
|
||||
.metamask-install h3 {
|
||||
color: #856404;
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.metamask-install p {
|
||||
color: #856404;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.metamask-install a {
|
||||
color: #f6851b;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.metamask-install a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Sidebar styles */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -400px;
|
||||
width: 400px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
|
||||
transition: right 0.3s ease;
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-close:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-overlay.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.instructions-link {
|
||||
color: #0d6efd;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px dashed #0d6efd;
|
||||
}
|
||||
|
||||
.instructions-link:hover {
|
||||
color: #0a58ca;
|
||||
border-bottom-color: #0a58ca;
|
||||
}
|
||||
|
||||
.wallet-address-display {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 5px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🌐 Add Defi Oracle Meta Mainnet</h1>
|
||||
<p class="subtitle">Add the public RPC endpoint to MetaMask and Exodus wallets</p>
|
||||
|
||||
<div class="network-info">
|
||||
<h3>Network Configuration</h3>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Network Name:</span>
|
||||
<span class="info-value">Defi Oracle Meta Mainnet</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Chain ID:</span>
|
||||
<span class="info-value">138 (0x8a)</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Currency Symbol:</span>
|
||||
<span class="info-value">ETH</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">RPC URL:</span>
|
||||
<span class="info-value" id="rpcUrlDisplay">https://rpc-http-pub.d-bis.org</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Block Explorer:</span>
|
||||
<span class="info-value">(Optional)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rpc-config">
|
||||
<h4>⚙️ RPC Endpoint</h4>
|
||||
<label for="rpcEndpoint">RPC Endpoint:</label>
|
||||
<select id="rpcEndpoint">
|
||||
<option value="https://rpc-http-pub.d-bis.org">Public HTTPS (rpc-http-pub.d-bis.org)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- MetaMask Section -->
|
||||
<div class="wallet-section metamask">
|
||||
<div class="wallet-header">
|
||||
<span class="wallet-icon">🦊</span>
|
||||
<h2 class="wallet-title">MetaMask</h2>
|
||||
</div>
|
||||
|
||||
<div id="metamaskInstall" class="metamask-install" style="display: none;">
|
||||
<h3>MetaMask Required</h3>
|
||||
<p><strong>MetaMask is not installed in your browser.</strong> To add this network, you need to install MetaMask first.</p>
|
||||
<p>Download MetaMask: <a href="https://metamask.io/download/" target="_blank">https://metamask.io/download/</a></p>
|
||||
</div>
|
||||
|
||||
<p style="margin-bottom: 15px; color: #666;">
|
||||
<a href="#" class="instructions-link" onclick="openSidebar('metamaskInstructions'); return false;">View MetaMask Setup Instructions</a>
|
||||
</p>
|
||||
|
||||
<div class="button-group">
|
||||
<button id="addMetaMaskNetwork" class="metamask-button">Add Network to MetaMask</button>
|
||||
</div>
|
||||
|
||||
<div id="metamaskStatus" class="status"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exodus Section -->
|
||||
<div class="wallet-section exodus">
|
||||
<div class="wallet-header">
|
||||
<span class="wallet-icon">📱</span>
|
||||
<h2 class="wallet-title">Exodus</h2>
|
||||
</div>
|
||||
|
||||
<p style="margin-bottom: 15px; color: #666;">
|
||||
<a href="#" class="instructions-link" onclick="openSidebar('exodusInstructions'); return false;">View Exodus Setup Instructions</a>
|
||||
</p>
|
||||
|
||||
<div class="button-group">
|
||||
<button id="copyExodusConfig" class="exodus-button">Copy All Exodus Config</button>
|
||||
</div>
|
||||
|
||||
<div id="exodusStatus" class="status"></div>
|
||||
</div>
|
||||
|
||||
<!-- Web3 Provider Section -->
|
||||
<div class="wallet-section web3">
|
||||
<div class="wallet-header">
|
||||
<span class="wallet-icon">⚡</span>
|
||||
<h2 class="wallet-title">Web3 Provider</h2>
|
||||
</div>
|
||||
|
||||
<p style="margin-bottom: 15px; color: #666;">
|
||||
<a href="#" class="instructions-link" onclick="openSidebar('web3Instructions'); return false;">View Web3.js Connection Instructions</a>
|
||||
</p>
|
||||
|
||||
<div class="button-group">
|
||||
<button id="web3ConnectBtn" class="web3-button">Connect Wallet</button>
|
||||
</div>
|
||||
|
||||
<div id="web3WalletAddress" class="wallet-address-display" style="display: none;"></div>
|
||||
<div id="web3Status" class="status"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Overlay -->
|
||||
<div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h3 id="sidebarTitle">Instructions</h3>
|
||||
<button class="sidebar-close" onclick="closeSidebar()">×</button>
|
||||
</div>
|
||||
<div id="sidebarContent"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Network configuration
|
||||
const networkConfig = {
|
||||
chainId: '0x8a', // 138 in hex
|
||||
chainName: 'Defi Oracle Meta Mainnet',
|
||||
nativeCurrency: {
|
||||
name: 'Ether',
|
||||
symbol: 'ETH',
|
||||
decimals: 18
|
||||
},
|
||||
rpcUrls: ['https://rpc-http-pub.d-bis.org'],
|
||||
blockExplorerUrls: []
|
||||
};
|
||||
|
||||
// DOM elements
|
||||
const addMetaMaskBtn = document.getElementById('addMetaMaskNetwork');
|
||||
const metamaskStatusDiv = document.getElementById('metamaskStatus');
|
||||
const metamaskInstallDiv = document.getElementById('metamaskInstall');
|
||||
const rpcEndpointSelect = document.getElementById('rpcEndpoint');
|
||||
const rpcUrlDisplay = document.getElementById('rpcUrlDisplay');
|
||||
const copyExodusConfigBtn = document.getElementById('copyExodusConfig');
|
||||
const exodusStatusDiv = document.getElementById('exodusStatus');
|
||||
const web3ConnectBtn = document.getElementById('web3ConnectBtn');
|
||||
const web3StatusDiv = document.getElementById('web3Status');
|
||||
const web3WalletAddressDiv = document.getElementById('web3WalletAddress');
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const sidebarOverlay = document.getElementById('sidebarOverlay');
|
||||
const sidebarTitle = document.getElementById('sidebarTitle');
|
||||
const sidebarContent = document.getElementById('sidebarContent');
|
||||
|
||||
// Track wallet connection state
|
||||
let isWalletConnected = false;
|
||||
let connectedAddress = null;
|
||||
|
||||
// Update RPC URL display and config when selection changes
|
||||
rpcEndpointSelect.addEventListener('change', function() {
|
||||
const selectedRpc = rpcEndpointSelect.value;
|
||||
rpcUrlDisplay.textContent = selectedRpc;
|
||||
networkConfig.rpcUrls = [selectedRpc];
|
||||
|
||||
// Update Exodus RPC URL display
|
||||
document.getElementById('exodusRpcUrl').textContent = selectedRpc;
|
||||
});
|
||||
|
||||
// Check if MetaMask is installed
|
||||
function checkMetaMask() {
|
||||
if (typeof window.ethereum === 'undefined') {
|
||||
metamaskInstallDiv.style.display = 'block';
|
||||
addMetaMaskBtn.disabled = true;
|
||||
return false;
|
||||
} else {
|
||||
metamaskInstallDiv.style.display = 'none';
|
||||
addMetaMaskBtn.disabled = false;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Show status message
|
||||
function showStatus(element, type, message) {
|
||||
element.className = `status ${type}`;
|
||||
element.textContent = message;
|
||||
element.style.display = 'block';
|
||||
}
|
||||
|
||||
// Clear status
|
||||
function clearStatus(element) {
|
||||
element.style.display = 'none';
|
||||
element.className = 'status';
|
||||
}
|
||||
|
||||
// Add network to MetaMask
|
||||
async function addMetaMaskNetwork() {
|
||||
clearStatus(metamaskStatusDiv);
|
||||
|
||||
if (!checkMetaMask()) {
|
||||
showStatus(metamaskStatusDiv, 'error', 'MetaMask is not installed. Please install MetaMask first.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
showStatus(metamaskStatusDiv, 'info', 'Adding network to MetaMask...');
|
||||
|
||||
// Try to switch to the network first
|
||||
try {
|
||||
await window.ethereum.request({
|
||||
method: 'wallet_switchEthereumChain',
|
||||
params: [{ chainId: networkConfig.chainId }]
|
||||
});
|
||||
showStatus(metamaskStatusDiv, 'success', 'Network already exists and has been switched to!');
|
||||
return;
|
||||
} catch (switchError) {
|
||||
// If network doesn't exist (error code 4902), add it
|
||||
if (switchError.code === 4902) {
|
||||
await window.ethereum.request({
|
||||
method: 'wallet_addEthereumChain',
|
||||
params: [networkConfig]
|
||||
});
|
||||
showStatus(metamaskStatusDiv, 'success', 'Network added successfully! MetaMask should now be connected to Defi Oracle Meta Mainnet.');
|
||||
} else {
|
||||
throw switchError;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error adding network:', error);
|
||||
|
||||
if (error.code === 4001) {
|
||||
showStatus(metamaskStatusDiv, 'error', 'User rejected the network addition request.');
|
||||
} else if (error.code === -32602) {
|
||||
showStatus(metamaskStatusDiv, 'error', 'Invalid network parameters. Please check your RPC URL.');
|
||||
} else {
|
||||
showStatus(metamaskStatusDiv, 'error', `Error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Copy to clipboard helper
|
||||
function copyToClipboard(elementId) {
|
||||
const element = document.getElementById(elementId);
|
||||
let text;
|
||||
|
||||
// Handle pre elements differently
|
||||
if (element.tagName === 'PRE') {
|
||||
text = element.textContent || element.innerText;
|
||||
} else {
|
||||
text = element.textContent;
|
||||
}
|
||||
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
// Show temporary success feedback
|
||||
const originalText = element.textContent || element.innerText;
|
||||
if (element.tagName === 'PRE') {
|
||||
element.textContent = '✓ Copied!';
|
||||
element.style.color = '#28a745';
|
||||
} else {
|
||||
element.textContent = '✓ Copied!';
|
||||
element.style.color = '#28a745';
|
||||
}
|
||||
setTimeout(() => {
|
||||
element.textContent = originalText;
|
||||
element.style.color = '';
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('Failed to copy:', err);
|
||||
});
|
||||
}
|
||||
|
||||
// Copy all Exodus configuration
|
||||
function copyExodusConfig() {
|
||||
const config = {
|
||||
networkName: 'Defi Oracle Meta Mainnet',
|
||||
rpcUrl: networkConfig.rpcUrls[0],
|
||||
chainId: '138',
|
||||
currencySymbol: 'ETH'
|
||||
};
|
||||
|
||||
const configText = `Network Name: ${config.networkName}
|
||||
RPC URL: ${config.rpcUrl}
|
||||
Chain ID: ${config.chainId}
|
||||
Currency Symbol: ${config.currencySymbol}`;
|
||||
|
||||
navigator.clipboard.writeText(configText).then(() => {
|
||||
showStatus(exodusStatusDiv, 'success', 'Exodus configuration copied to clipboard! Paste it into Exodus when adding the custom network.');
|
||||
}).catch(err => {
|
||||
console.error('Failed to copy:', err);
|
||||
showStatus(exodusStatusDiv, 'error', 'Failed to copy configuration. Please copy the values manually.');
|
||||
});
|
||||
}
|
||||
|
||||
// Connect wallet or add chain
|
||||
async function web3ConnectOrAddChain() {
|
||||
clearStatus(web3StatusDiv);
|
||||
|
||||
if (typeof window.ethereum === 'undefined') {
|
||||
showStatus(web3StatusDiv, 'error', 'No Web3 provider found. Please install MetaMask or another Web3 wallet.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (!isWalletConnected) {
|
||||
// Connect wallet
|
||||
showStatus(web3StatusDiv, 'info', 'Requesting account access...');
|
||||
const accounts = await window.ethereum.request({
|
||||
method: 'eth_requestAccounts'
|
||||
});
|
||||
|
||||
if (accounts.length > 0) {
|
||||
connectedAddress = accounts[0];
|
||||
isWalletConnected = true;
|
||||
web3ConnectBtn.textContent = 'Add Chain';
|
||||
web3WalletAddressDiv.textContent = `Connected: ${connectedAddress}`;
|
||||
web3WalletAddressDiv.style.display = 'block';
|
||||
showStatus(web3StatusDiv, 'success', 'Wallet connected successfully!');
|
||||
}
|
||||
} else {
|
||||
// Add chain
|
||||
showStatus(web3StatusDiv, 'info', 'Adding network to wallet...');
|
||||
|
||||
try {
|
||||
// Try to switch to the network first
|
||||
await window.ethereum.request({
|
||||
method: 'wallet_switchEthereumChain',
|
||||
params: [{ chainId: networkConfig.chainId }]
|
||||
});
|
||||
showStatus(web3StatusDiv, 'success', 'Network already exists and has been switched to!');
|
||||
} catch (switchError) {
|
||||
// If network doesn't exist (error code 4902), add it
|
||||
if (switchError.code === 4902) {
|
||||
await window.ethereum.request({
|
||||
method: 'wallet_addEthereumChain',
|
||||
params: [networkConfig]
|
||||
});
|
||||
showStatus(web3StatusDiv, 'success', 'Network added successfully!');
|
||||
} else {
|
||||
throw switchError;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
|
||||
if (error.code === 4001) {
|
||||
showStatus(web3StatusDiv, 'error', 'User rejected the request.');
|
||||
} else if (error.code === -32602) {
|
||||
showStatus(web3StatusDiv, 'error', 'Invalid network parameters. Please check your RPC URL.');
|
||||
} else {
|
||||
showStatus(web3StatusDiv, 'error', `Error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar functions
|
||||
function openSidebar(type) {
|
||||
sidebarOverlay.classList.add('show');
|
||||
sidebar.classList.add('open');
|
||||
|
||||
if (type === 'metamaskInstructions') {
|
||||
sidebarTitle.textContent = 'MetaMask Setup Instructions';
|
||||
sidebarContent.innerHTML = `
|
||||
<div class="instructions">
|
||||
<h4>How to Add Network to MetaMask</h4>
|
||||
<ol>
|
||||
<li>Click the <strong>"Add Network to MetaMask"</strong> button above</li>
|
||||
<li>MetaMask will prompt you to add the network</li>
|
||||
<li>Review the network details and click <strong>"Approve"</strong></li>
|
||||
<li>The network will be added and you'll be switched to it automatically</li>
|
||||
</ol>
|
||||
<h4 style="margin-top: 20px;">Manual Setup (Alternative)</h4>
|
||||
<ol>
|
||||
<li>Open MetaMask extension</li>
|
||||
<li>Click the network dropdown at the top</li>
|
||||
<li>Select <strong>"Add Network"</strong> or <strong>"Add a network manually"</strong></li>
|
||||
<li>Enter the following details:
|
||||
<ul style="margin-top: 10px; margin-left: 20px;">
|
||||
<li><strong>Network Name:</strong> <code>Defi Oracle Meta Mainnet</code></li>
|
||||
<li><strong>RPC URL:</strong> <code>https://rpc-http-pub.d-bis.org</code></li>
|
||||
<li><strong>Chain ID:</strong> <code>138</code></li>
|
||||
<li><strong>Currency Symbol:</strong> <code>ETH</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click <strong>"Save"</strong></li>
|
||||
</ol>
|
||||
</div>
|
||||
`;
|
||||
} else if (type === 'exodusInstructions') {
|
||||
sidebarTitle.textContent = 'Exodus Setup Instructions';
|
||||
sidebarContent.innerHTML = `
|
||||
<div class="instructions">
|
||||
<h4>How to Add Custom Network to Exodus</h4>
|
||||
<ol>
|
||||
<li>Open the Exodus wallet application</li>
|
||||
<li>Go to <strong>Settings</strong> → <strong>Developer Mode</strong></li>
|
||||
<li>Enable <strong>Developer Mode</strong> if not already enabled</li>
|
||||
<li>Go to <strong>Settings</strong> → <strong>Developer</strong> → <strong>Custom Networks</strong></li>
|
||||
<li>Click <strong>Add Custom Network</strong></li>
|
||||
<li>Enter the following details:
|
||||
<ul style="margin-top: 10px; margin-left: 20px;">
|
||||
<li><strong>Network Name:</strong> <code id="exodusNetworkName">Defi Oracle Meta Mainnet</code> <button class="copy-button" onclick="copyToClipboard('exodusNetworkName')">Copy</button></li>
|
||||
<li><strong>RPC URL:</strong> <code id="exodusRpcUrl">https://rpc-http-pub.d-bis.org</code> <button class="copy-button" onclick="copyToClipboard('exodusRpcUrl')">Copy</button></li>
|
||||
<li><strong>Chain ID:</strong> <code id="exodusChainId">138</code> <button class="copy-button" onclick="copyToClipboard('exodusChainId')">Copy</button></li>
|
||||
<li><strong>Currency Symbol:</strong> <code id="exodusSymbol">ETH</code> <button class="copy-button" onclick="copyToClipboard('exodusSymbol')">Copy</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click <strong>Save</strong> to add the network</li>
|
||||
</ol>
|
||||
</div>
|
||||
`;
|
||||
} else if (type === 'web3Instructions') {
|
||||
sidebarTitle.textContent = 'Web3.js Connection Instructions';
|
||||
sidebarContent.innerHTML = `
|
||||
<div class="instructions">
|
||||
<h4>Connect Using Web3.js</h4>
|
||||
<p>Use the Web3.js library to connect to the network programmatically:</p>
|
||||
<ol>
|
||||
<li>Install Web3.js: <code>npm install web3</code> or include via CDN</li>
|
||||
<li>Use the following code to connect:</li>
|
||||
</ol>
|
||||
<div style="background: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 8px; margin-top: 15px; font-family: 'Courier New', monospace; font-size: 12px; overflow-x: auto;">
|
||||
<pre id="web3Code">const Web3 = require('web3');
|
||||
|
||||
// Connect to the network
|
||||
const web3 = new Web3('https://rpc-http-pub.d-bis.org');
|
||||
|
||||
// Check connection
|
||||
web3.eth.getBlockNumber().then(console.log);
|
||||
|
||||
// Get network ID
|
||||
web3.eth.net.getId().then(console.log);</pre>
|
||||
<button class="copy-button" onclick="copyToClipboard('web3Code')" style="margin-top: 10px;">Copy Code</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function closeSidebar() {
|
||||
sidebar.classList.remove('open');
|
||||
sidebarOverlay.classList.remove('show');
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
addMetaMaskBtn.addEventListener('click', addMetaMaskNetwork);
|
||||
copyExodusConfigBtn.addEventListener('click', copyExodusConfig);
|
||||
web3ConnectBtn.addEventListener('click', web3ConnectOrAddChain);
|
||||
|
||||
// Check MetaMask on load
|
||||
checkMetaMask();
|
||||
|
||||
// Listen for MetaMask installation
|
||||
let checkInterval = setInterval(() => {
|
||||
if (typeof window.ethereum !== 'undefined') {
|
||||
const wasDisabled = addMetaMaskBtn.disabled;
|
||||
if (checkMetaMask() && wasDisabled) {
|
||||
clearInterval(checkInterval);
|
||||
showStatus(metamaskStatusDiv, 'success', 'MetaMask detected! You can now add the network.');
|
||||
}
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// Listen for chain changes
|
||||
if (typeof window.ethereum !== 'undefined') {
|
||||
window.ethereum.on('chainChanged', (chainId) => {
|
||||
if (chainId === networkConfig.chainId) {
|
||||
showStatus(metamaskStatusDiv, 'success', 'Switched to Defi Oracle Meta Mainnet!');
|
||||
if (isWalletConnected) {
|
||||
showStatus(web3StatusDiv, 'success', 'Switched to Defi Oracle Meta Mainnet!');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.ethereum.on('accountsChanged', (accounts) => {
|
||||
if (accounts.length > 0) {
|
||||
connectedAddress = accounts[0];
|
||||
isWalletConnected = true;
|
||||
web3ConnectBtn.textContent = 'Add Chain';
|
||||
web3WalletAddressDiv.textContent = `Connected: ${connectedAddress}`;
|
||||
web3WalletAddressDiv.style.display = 'block';
|
||||
} else {
|
||||
isWalletConnected = false;
|
||||
connectedAddress = null;
|
||||
web3ConnectBtn.textContent = 'Connect Wallet';
|
||||
web3WalletAddressDiv.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Check if already connected on load
|
||||
window.ethereum.request({ method: 'eth_accounts' }).then(accounts => {
|
||||
if (accounts.length > 0) {
|
||||
connectedAddress = accounts[0];
|
||||
isWalletConnected = true;
|
||||
web3ConnectBtn.textContent = 'Add Chain';
|
||||
web3WalletAddressDiv.textContent = `Connected: ${connectedAddress}`;
|
||||
web3WalletAddressDiv.style.display = 'block';
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
560
examples/wallet-connect.html
Normal file
560
examples/wallet-connect.html
Normal file
@@ -0,0 +1,560 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Connect Wallet - ChainID 138</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 40px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.network-info {
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.network-info h3 {
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #333;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status.info {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
border: 1px solid #bee5eb;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wallet-address {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wallet-address.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rpc-config {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #fff3cd;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ffc107;
|
||||
}
|
||||
|
||||
.rpc-config h4 {
|
||||
color: #856404;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.rpc-config input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.rpc-config label {
|
||||
color: #856404;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.metamask-install {
|
||||
background: #fff3cd;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 2px solid #ffc107;
|
||||
}
|
||||
|
||||
.metamask-install h3 {
|
||||
color: #856404;
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.metamask-install p {
|
||||
color: #856404;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.metamask-install ol {
|
||||
color: #856404;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.metamask-install li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.install-button {
|
||||
background: #f57c00;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(245, 124, 0, 0.4);
|
||||
}
|
||||
|
||||
.install-button:hover {
|
||||
background: #e65100;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(245, 124, 0, 0.6);
|
||||
}
|
||||
|
||||
.install-links {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.install-button.secondary {
|
||||
background: #6c757d;
|
||||
box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
|
||||
}
|
||||
|
||||
.install-button.secondary:hover {
|
||||
background: #5a6268;
|
||||
box-shadow: 0 6px 20px rgba(108, 117, 125, 0.6);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🔗 Connect Wallet</h1>
|
||||
<p class="subtitle">Connect your wallet and add ChainID 138 network</p>
|
||||
|
||||
<div class="network-info">
|
||||
<h3>Network Details</h3>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Chain ID:</span>
|
||||
<span class="info-value">138</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Network Name:</span>
|
||||
<span class="info-value">SMOM-DBIS-138</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Currency Symbol:</span>
|
||||
<span class="info-value">ETH</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="metamaskInstall" class="metamask-install" style="display: none;">
|
||||
<h3>🦊 MetaMask Required</h3>
|
||||
<p><strong>MetaMask is not installed in your browser.</strong> To connect your wallet and add this network, you need to install MetaMask first.</p>
|
||||
<ol>
|
||||
<li>Click the "Install MetaMask" button below</li>
|
||||
<li>Choose your browser (Chrome, Firefox, Edge, or Brave)</li>
|
||||
<li>Click "Add to [Browser]" on the MetaMask website</li>
|
||||
<li>Follow the setup instructions to create or import a wallet</li>
|
||||
<li>Refresh this page after installation</li>
|
||||
</ol>
|
||||
<div class="install-links">
|
||||
<a href="https://metamask.io/download/" target="_blank" class="install-button">Install MetaMask</a>
|
||||
<a href="https://metamask.io/" target="_blank" class="install-button secondary">Visit MetaMask Website</a>
|
||||
<button onclick="window.refreshDetection ? window.refreshDetection() : location.reload()" class="install-button secondary" style="margin-top: 10px;">🔄 Check Again / Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rpc-config">
|
||||
<h4>⚠️ RPC Configuration</h4>
|
||||
<label for="rpcUrl">RPC URL:</label>
|
||||
<input type="text" id="rpcUrl" placeholder="http://your-rpc-endpoint:8545" value="http://192.168.11.250:8545">
|
||||
<label for="blockExplorer">Block Explorer (optional):</label>
|
||||
<input type="text" id="blockExplorer" placeholder="https://explorer.example.com">
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button id="connectWallet">Connect Wallet</button>
|
||||
<button id="addNetwork">Add Network to Wallet</button>
|
||||
</div>
|
||||
|
||||
<div id="status" class="status"></div>
|
||||
<div id="walletAddress" class="wallet-address"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Network configuration
|
||||
const networkConfig = {
|
||||
chainId: '0x8a', // 138 in hex
|
||||
chainName: 'SMOM-DBIS-138',
|
||||
nativeCurrency: {
|
||||
name: 'Ether',
|
||||
symbol: 'ETH',
|
||||
decimals: 18
|
||||
},
|
||||
rpcUrls: [],
|
||||
blockExplorerUrls: []
|
||||
};
|
||||
|
||||
// DOM elements
|
||||
const connectBtn = document.getElementById('connectWallet');
|
||||
const addNetworkBtn = document.getElementById('addNetwork');
|
||||
const statusDiv = document.getElementById('status');
|
||||
const walletAddressDiv = document.getElementById('walletAddress');
|
||||
const rpcUrlInput = document.getElementById('rpcUrl');
|
||||
const blockExplorerInput = document.getElementById('blockExplorer');
|
||||
const metamaskInstallDiv = document.getElementById('metamaskInstall');
|
||||
|
||||
// Check if MetaMask is installed
|
||||
function checkMetaMask() {
|
||||
// Check for window.ethereum (EIP-1193 provider)
|
||||
if (typeof window.ethereum === 'undefined') {
|
||||
// Show installation instructions
|
||||
metamaskInstallDiv.style.display = 'block';
|
||||
connectBtn.disabled = true;
|
||||
addNetworkBtn.disabled = true;
|
||||
showStatus('error', 'MetaMask is not installed. Please install MetaMask to continue.');
|
||||
return false;
|
||||
} else {
|
||||
// Check if it's specifically MetaMask (has isMetaMask property)
|
||||
const isMetaMask = window.ethereum.isMetaMask === true ||
|
||||
(window.ethereum.providers &&
|
||||
window.ethereum.providers.some(p => p.isMetaMask === true));
|
||||
|
||||
// Hide installation instructions if MetaMask is available
|
||||
metamaskInstallDiv.style.display = 'none';
|
||||
connectBtn.disabled = false;
|
||||
addNetworkBtn.disabled = false;
|
||||
|
||||
// Clear any error messages if MetaMask is now detected
|
||||
if (statusDiv.classList.contains('error') &&
|
||||
statusDiv.textContent.includes('MetaMask is not installed')) {
|
||||
clearStatus();
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Show status message
|
||||
function showStatus(type, message) {
|
||||
statusDiv.className = `status ${type}`;
|
||||
statusDiv.textContent = message;
|
||||
statusDiv.style.display = 'block';
|
||||
}
|
||||
|
||||
// Clear status
|
||||
function clearStatus() {
|
||||
statusDiv.style.display = 'none';
|
||||
statusDiv.className = 'status';
|
||||
}
|
||||
|
||||
// Update network config with user input
|
||||
function updateNetworkConfig() {
|
||||
const rpcUrl = rpcUrlInput.value.trim();
|
||||
const blockExplorer = blockExplorerInput.value.trim();
|
||||
|
||||
if (!rpcUrl) {
|
||||
showStatus('error', 'Please enter an RPC URL');
|
||||
return false;
|
||||
}
|
||||
|
||||
networkConfig.rpcUrls = [rpcUrl];
|
||||
if (blockExplorer) {
|
||||
networkConfig.blockExplorerUrls = [blockExplorer];
|
||||
} else {
|
||||
networkConfig.blockExplorerUrls = [];
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Connect wallet
|
||||
async function connectWallet() {
|
||||
clearStatus();
|
||||
|
||||
if (!checkMetaMask()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!updateNetworkConfig()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
showStatus('info', 'Requesting account access...');
|
||||
|
||||
// Request account access
|
||||
const accounts = await window.ethereum.request({
|
||||
method: 'eth_requestAccounts'
|
||||
});
|
||||
|
||||
if (accounts.length > 0) {
|
||||
const address = accounts[0];
|
||||
walletAddressDiv.textContent = `Connected: ${address}`;
|
||||
walletAddressDiv.classList.add('show');
|
||||
showStatus('success', 'Wallet connected successfully!');
|
||||
|
||||
// Check current chain
|
||||
const currentChainId = await window.ethereum.request({
|
||||
method: 'eth_chainId'
|
||||
});
|
||||
|
||||
if (currentChainId === networkConfig.chainId) {
|
||||
showStatus('info', 'You are already connected to ChainID 138');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error connecting wallet:', error);
|
||||
if (error.code === 4001) {
|
||||
showStatus('error', 'User rejected the connection request.');
|
||||
} else {
|
||||
showStatus('error', `Error connecting wallet: ${error.message}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add network to wallet
|
||||
async function addNetwork() {
|
||||
clearStatus();
|
||||
|
||||
if (!checkMetaMask()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!updateNetworkConfig()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
showStatus('info', 'Adding network to wallet...');
|
||||
|
||||
// Try to add the network
|
||||
await window.ethereum.request({
|
||||
method: 'wallet_addEthereumChain',
|
||||
params: [networkConfig]
|
||||
});
|
||||
|
||||
showStatus('success', 'Network added successfully! You can now switch to it in MetaMask.');
|
||||
} catch (error) {
|
||||
console.error('Error adding network:', error);
|
||||
|
||||
if (error.code === 4902) {
|
||||
// Network doesn't exist, try to add it
|
||||
try {
|
||||
await window.ethereum.request({
|
||||
method: 'wallet_addEthereumChain',
|
||||
params: [networkConfig]
|
||||
});
|
||||
showStatus('success', 'Network added successfully!');
|
||||
} catch (addError) {
|
||||
showStatus('error', `Error adding network: ${addError.message}`);
|
||||
}
|
||||
} else if (error.code === -32602) {
|
||||
showStatus('error', 'Invalid network parameters. Please check your RPC URL.');
|
||||
} else if (error.code === 4001) {
|
||||
showStatus('error', 'User rejected the network addition request.');
|
||||
} else {
|
||||
showStatus('error', `Error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
connectBtn.addEventListener('click', connectWallet);
|
||||
addNetworkBtn.addEventListener('click', addNetwork);
|
||||
|
||||
// Check MetaMask on load
|
||||
const hasMetaMask = checkMetaMask();
|
||||
|
||||
if (hasMetaMask) {
|
||||
// Listen for account changes
|
||||
window.ethereum.on('accountsChanged', (accounts) => {
|
||||
if (accounts.length > 0) {
|
||||
walletAddressDiv.textContent = `Connected: ${accounts[0]}`;
|
||||
walletAddressDiv.classList.add('show');
|
||||
showStatus('success', 'Wallet account changed');
|
||||
} else {
|
||||
walletAddressDiv.classList.remove('show');
|
||||
showStatus('info', 'Wallet disconnected');
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for chain changes
|
||||
window.ethereum.on('chainChanged', (chainId) => {
|
||||
if (chainId === networkConfig.chainId) {
|
||||
showStatus('success', 'Switched to ChainID 138 network!');
|
||||
} else {
|
||||
showStatus('info', `Switched to chain: ${chainId}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-connect if already connected
|
||||
if (window.ethereum.selectedAddress) {
|
||||
walletAddressDiv.textContent = `Connected: ${window.ethereum.selectedAddress}`;
|
||||
walletAddressDiv.classList.add('show');
|
||||
}
|
||||
}
|
||||
|
||||
// Check for MetaMask installation periodically (in case user installs it)
|
||||
let checkInterval = setInterval(() => {
|
||||
if (typeof window.ethereum !== 'undefined') {
|
||||
const wasDisabled = connectBtn.disabled;
|
||||
const wasShowingInstall = metamaskInstallDiv.style.display !== 'none';
|
||||
|
||||
if (checkMetaMask() && (wasDisabled || wasShowingInstall)) {
|
||||
clearInterval(checkInterval);
|
||||
showStatus('success', 'MetaMask detected! You can now connect your wallet.');
|
||||
}
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// Add manual refresh button functionality
|
||||
function refreshDetection() {
|
||||
clearStatus();
|
||||
const detected = checkMetaMask();
|
||||
if (detected) {
|
||||
showStatus('success', 'MetaMask is detected and ready to use!');
|
||||
} else {
|
||||
showStatus('info', 'Please make sure MetaMask is installed and enabled, then refresh this page.');
|
||||
}
|
||||
}
|
||||
|
||||
// Make refreshDetection available globally for the button
|
||||
window.refreshDetection = refreshDetection;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user