903 lines
32 KiB
HTML
903 lines
32 KiB
HTML
|
<!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>
|
|||
|
|
|