multichain-wallet-connector
Version:
Universal EVM wallet connector supporting 50+ chains with complete transaction signing capabilities. Simplifies dApp development across multiple networks with a unified API.
141 lines (118 loc) • 4.09 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Multichain Wallet Connector Dev Tool</title>
<!-- ======================= Styles ======================= -->
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
background-color: #f9f9f9;
}
h1 {
color: #0371e9;
}
p {
margin-bottom: 10px;
}
.section {
margin-bottom: 40px;
}
button {
background-color: rgb(3, 130, 233);
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 8px;
color: white;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: rgb(2, 100, 180);
}
code {
background-color: #eaeaea;
padding: 2px 6px;
border-radius: 4px;
}
</style>
<!-- ======================= SDK Script ======================= -->
<!-- <script src="https://cdn.jsdelivr.net/gh/Nworah-Gabriel/Injector@v1.0.3/dist/connector.umd.min.js"></script> -->
<script src="../dist/connector.umd.min.js"></script>
<!-- ======================= Custom Scripts ======================= -->
<script src="../examples/example.js"></script>
<script>
console.log("WalletConnector is:", window.WalletConnector);
</script>
</head>
<body>
<!-- ======================= Title ======================= -->
<h1 style="text-align: center;">🔗DApp Interaction Interface</h1>
<!-- ======================= Setup Instructions ======================= -->
<div class="section">
<h2>🚀 Instructions</h2>
<p>1. Open this file using <strong>Live Server</strong> or any local server. (Right-click file in VSCode → <em>Open with Live Server</em>)</p>
<p>2. Make sure you're connected to a wallet like MetaMask.</p>
<p>3. Click the buttons below to interact with your wallet and smart contracts.</p>
</div>
<!-- ======================= Action Buttons ======================= -->
<div class="section">
<h2>🧪 Interactions</h2>
<button onclick="connect()">Connect Wallet</button>
<button onclick="GetBalance()">Get Balance</button>
<button onclick="SignTransaction()">Sign Transaction</button>
<button onclick="SignMessage()">Sign Message</button>
<button onclick="SignTypedData()">Sign Typed Data</button>
<button onclick="contractinteraction()">Interact with Contract</button>
</div>
<!-- ======================= Contract Logic ======================= -->
<script>
async function contractinteraction() {
// Contract ABI
const Abi = [
{
"inputs": [
{ "internalType": "int256", "name": "_value", "type": "int256" }
],
"name": "setValue",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "get",
"outputs": [
{ "internalType": "int256", "name": "", "type": "int256" }
],
"stateMutability": "view",
"type": "function"
}
];
// Step 1: Connect to wallet
const { provider, account } = await WalletConnector.connectWallet({ chainId: 11155111 });
// Step 2: Create contract instance
const tokenContract = WalletConnector.createContract(
provider,
'0x1A9CD84b055255E14848A691828B54Ef477a818d', // Replace with actual contract address
Abi
);
// Step 3: Read a value
const value = await tokenContract.read('get', []);
console.log('📥 Contract "get()" value:', value);
// Step 4: Estimate gas
const estimatedGas = await tokenContract.estimateGas('get', []);
console.log('⛽ Estimated gas:', estimatedGas);
// Step 5: Write new value
const txHash = await tokenContract.write('setValue', [500961], {
from: account,
gasLimit: '300000'
});
console.log('📤 Transaction sent. Hash:', txHash);
}
</script>
</body>
</html>