Initial commit: Complete MetaMask integration for ChainID 138
This commit is contained in:
defiQUG
358
examples/metamask-price-feed.html
Normal file
358
examples/metamask-price-feed.html
Normal file
@@ -0,0 +1,358 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ETH/USD Price Feed - 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: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.price-display {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.price-info {
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 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-weight: 600;
|
||||
}
|
||||
|
||||
button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 15px 30px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status.info {
|
||||
background: #e7f3ff;
|
||||
color: #0066cc;
|
||||
border: 1px solid #b3d9ff;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
.oracle-address {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
word-break: break-all;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>ETH/USD Price Feed</h1>
|
||||
<p class="subtitle">ChainID 138 - Oracle Contract</p>
|
||||
|
||||
<div class="price-display">
|
||||
<div class="price-label">Current Price</div>
|
||||
<div class="price-value" id="priceValue">$0.00</div>
|
||||
<div class="price-label" id="priceStatus">Not loaded</div>
|
||||
</div>
|
||||
|
||||
<div class="price-info" id="priceInfo" style="display: none;">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Round ID</span>
|
||||
<span class="info-value" id="roundId">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Updated</span>
|
||||
<span class="info-value" id="updatedAt">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Started At</span>
|
||||
<span class="info-value" id="startedAt">-</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status" id="status"></div>
|
||||
|
||||
<button id="connectBtn">Connect MetaMask</button>
|
||||
<button id="fetchPriceBtn" disabled>Fetch Price</button>
|
||||
<button id="autoRefreshBtn" disabled>Auto Refresh (60s)</button>
|
||||
|
||||
<div class="oracle-address">
|
||||
Oracle: 0x3304b747e565a97ec8ac220b0b6a1f6ffdb837e6
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.ethers.io/lib/ethers-5.7.2.umd.min.js"></script>
|
||||
<script>
|
||||
const ORACLE_ADDRESS = '0x3304b747e565a97ec8ac220b0b6a1f6ffdb837e6';
|
||||
const RPC_URL = 'https://rpc-core.d-bis.org';
|
||||
const CHAIN_ID = 138;
|
||||
|
||||
const ORACLE_ABI = [
|
||||
"function latestRoundData() external view returns (uint80 roundId, int256 answer, uint256 startedAt, uint256 updatedAt, uint80 answeredInRound)",
|
||||
"function decimals() external view returns (uint8)",
|
||||
"function description() external view returns (string memory)"
|
||||
];
|
||||
|
||||
let provider = null;
|
||||
let signer = null;
|
||||
let oracle = null;
|
||||
let autoRefreshInterval = null;
|
||||
|
||||
const connectBtn = document.getElementById('connectBtn');
|
||||
const fetchPriceBtn = document.getElementById('fetchPriceBtn');
|
||||
const autoRefreshBtn = document.getElementById('autoRefreshBtn');
|
||||
const priceValue = document.getElementById('priceValue');
|
||||
const priceStatus = document.getElementById('priceStatus');
|
||||
const priceInfo = document.getElementById('priceInfo');
|
||||
const status = document.getElementById('status');
|
||||
|
||||
function showStatus(type, message) {
|
||||
status.className = `status ${type} show`;
|
||||
status.textContent = message;
|
||||
setTimeout(() => {
|
||||
status.classList.remove('show');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
async function connectWallet() {
|
||||
if (typeof window.ethereum === 'undefined') {
|
||||
showStatus('error', 'MetaMask is not installed. Please install MetaMask to continue.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
showStatus('info', 'Connecting to MetaMask...');
|
||||
|
||||
// Request account access
|
||||
await window.ethereum.request({ method: 'eth_requestAccounts' });
|
||||
|
||||
// Check if on correct network
|
||||
const chainId = await window.ethereum.request({ method: 'eth_chainId' });
|
||||
const chainIdDecimal = parseInt(chainId, 16);
|
||||
|
||||
if (chainIdDecimal !== CHAIN_ID) {
|
||||
showStatus('info', 'Switching to ChainID 138...');
|
||||
try {
|
||||
await window.ethereum.request({
|
||||
method: 'wallet_switchEthereumChain',
|
||||
params: [{ chainId: '0x8a' }] // 138 in hex
|
||||
});
|
||||
} catch (switchError) {
|
||||
if (switchError.code === 4902) {
|
||||
// Network doesn't exist, add it
|
||||
await window.ethereum.request({
|
||||
method: 'wallet_addEthereumChain',
|
||||
params: [{
|
||||
chainId: '0x8a',
|
||||
chainName: 'SMOM-DBIS-138',
|
||||
nativeCurrency: {
|
||||
name: 'Ether',
|
||||
symbol: 'ETH',
|
||||
decimals: 18
|
||||
},
|
||||
rpcUrls: [RPC_URL],
|
||||
blockExplorerUrls: ['https://explorer.d-bis.org']
|
||||
}]
|
||||
});
|
||||
} else {
|
||||
throw switchError;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create provider and signer
|
||||
provider = new ethers.providers.Web3Provider(window.ethereum);
|
||||
signer = provider.getSigner();
|
||||
oracle = new ethers.Contract(ORACLE_ADDRESS, ORACLE_ABI, provider);
|
||||
|
||||
connectBtn.disabled = true;
|
||||
fetchPriceBtn.disabled = false;
|
||||
autoRefreshBtn.disabled = false;
|
||||
|
||||
showStatus('success', 'Connected to MetaMask!');
|
||||
await fetchPrice();
|
||||
} catch (error) {
|
||||
console.error('Error connecting:', error);
|
||||
showStatus('error', `Connection failed: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchPrice() {
|
||||
if (!oracle) {
|
||||
showStatus('error', 'Please connect MetaMask first');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
showStatus('info', 'Fetching price...');
|
||||
priceStatus.textContent = 'Loading...';
|
||||
|
||||
const result = await oracle.latestRoundData();
|
||||
const price = result.answer.toNumber() / 1e8; // Convert from 8 decimals
|
||||
const roundId = result.roundId.toString();
|
||||
const startedAt = new Date(result.startedAt.toNumber() * 1000).toLocaleString();
|
||||
const updatedAt = new Date(result.updatedAt.toNumber() * 1000).toLocaleString();
|
||||
|
||||
priceValue.textContent = `$${price.toFixed(2)}`;
|
||||
priceStatus.textContent = `Updated ${updatedAt}`;
|
||||
|
||||
document.getElementById('roundId').textContent = roundId;
|
||||
document.getElementById('updatedAt').textContent = updatedAt;
|
||||
document.getElementById('startedAt').textContent = startedAt;
|
||||
priceInfo.style.display = 'block';
|
||||
|
||||
showStatus('success', 'Price fetched successfully!');
|
||||
} catch (error) {
|
||||
console.error('Error fetching price:', error);
|
||||
showStatus('error', `Failed to fetch price: ${error.message}`);
|
||||
priceStatus.textContent = 'Error loading price';
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAutoRefresh() {
|
||||
if (autoRefreshInterval) {
|
||||
clearInterval(autoRefreshInterval);
|
||||
autoRefreshInterval = null;
|
||||
autoRefreshBtn.textContent = 'Auto Refresh (60s)';
|
||||
showStatus('info', 'Auto refresh stopped');
|
||||
} else {
|
||||
autoRefreshInterval = setInterval(fetchPrice, 60000); // 60 seconds
|
||||
autoRefreshBtn.textContent = 'Stop Auto Refresh';
|
||||
showStatus('success', 'Auto refresh enabled (60s interval)');
|
||||
fetchPrice();
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
connectBtn.addEventListener('click', connectWallet);
|
||||
fetchPriceBtn.addEventListener('click', fetchPrice);
|
||||
autoRefreshBtn.addEventListener('click', toggleAutoRefresh);
|
||||
|
||||
// Listen for network changes
|
||||
if (window.ethereum) {
|
||||
window.ethereum.on('chainChanged', (chainId) => {
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
window.ethereum.on('accountsChanged', (accounts) => {
|
||||
if (accounts.length === 0) {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
}
|
||||
</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