Skip to content

DRAFT: Jl/1193 multichain example dapp #372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
jiexi wants to merge 20 commits into
base: main
Choose a base branch
from
Draft

DRAFT: Jl/1193 multichain example dapp #372

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
a2640a4
WIP
jiexi Oct 30, 2024
e613778
Merge branch 'main' into jl/1193-multichain-example-dapp
jiexi Oct 30, 2024
b0dad25
Add 1193 block head red color
jiexi Oct 31, 2024
a9be168
Add multichain connection request textarea
jiexi Oct 31, 2024
2571c62
prettify
jiexi Oct 31, 2024
ea48815
reorg multichain
jiexi Oct 31, 2024
d45773d
cleanup reorg
jiexi Oct 31, 2024
8a4f007
one line alert
jiexi Oct 31, 2024
d53fcf8
add button states to multichain
jiexi Oct 31, 2024
321e932
Multichain demo wip
jiexi Oct 31, 2024
fa9ce96
WIP add connection
jiexi Oct 31, 2024
3d5faf4
balance loop + bridge constants
jiexi Oct 31, 2024
868715a
Fix contract
jiexi Nov 1, 2024
cc9d529
Account and contract updating fully working. Contract Addresses all i…
jiexi Nov 1, 2024
45ca0f4
add d3 and web3js. Migrate multichain demo page js into multichain_de…
jiexi Nov 1, 2024
63a9b23
add subscription and staggering
jiexi Nov 1, 2024
4e0e504
make node modal addresses link to block explorer
jiexi Nov 1, 2024
e8efba9
Add edge modal
jiexi Nov 1, 2024
fa36343
holy moly it works
jiexi Nov 1, 2024
d12271a
"polish" haha. I'm out of time, but I'm happy with this
jiexi Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 209 additions & 0 deletions src/eip1193_index.html
View file
Open in desktop
Copy link
Copy Markdown
Member Author

@jiexi jiexi Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-11-01 at 2 04 28 PM

simple example eip1193 dapp to illustrate chain switching friction

Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ethereum EIP-1193 API Dapp</title>
</head>
<body>
<h1>Ethereum EIP-1193 API Dapp</h1>
<button id="connectButton">Connect Wallet</button>
<br>
<div id="connectedAccounts">Connected Accounts: Not available</div>
<br><br>
<label for="chainSelect">Select Chain:</label>
<select id="chainSelect">
<option value="0x1">Ethereum Mainnet</option>
<option value="0xe708">Linea Mainnet</option>
<option value="0xaa36a7">Sepolia Testnet</option>
<option value="0xe705">Linea Sepolia</option>
</select>
<br><br>
<button id="sendTxButton">Send 0 Ether to Null Address</button>
<br><br>
<div id="currentChain">Current Chain: Not available</div>
<div id="blockHead">Current Block Head: Not available</div>
<script>
let accounts = [];

// Dapp <-> Wallet Connection Initialization
console.log(window.ethereum); // this is handled for us already

// Dapp Initialization
checkWalletConnection();

// Subscription Events
window.ethereum.on("message", (message) => {
if (message.type === "eth_subscription") {
handleEthSubscriptionDisplay(message.data.result.number);
}
console.log(message.data);
});

// Permission Events/Handling
window.ethereum.on("chainChanged", async (chainId) => {
const selectedChainId = document.getElementById("chainSelect").value;
if (chainId !== selectedChainId) {
alert(`Wallet has changed the current chain to ${chainId}. Will try to change it back to ${selectedChainId} now.`);
await switchChain(selectedChainId);
}
document.getElementById("blockHead").innerText = "Current Block Head: Not available";
await updateCurrentChainDisplay();
await subscribeToBlockHeaders();
});

window.ethereum.on("accountsChanged", async (newAccounts) => {
accounts = newAccounts;
updateConnectedAccountsDisplay();
});

// Permission Initialization
async function connectWallet() {
try {
accounts = await window.ethereum.request({
method: "eth_requestAccounts",
});

updateConnectedAccountsDisplay();

const selectedChainId = document.getElementById("chainSelect").value;
await switchChain(selectedChainId);
await updateCurrentChainDisplay();
await subscribeToBlockHeaders();
} catch (error) {
console.error(error);
alert("Failed to connect wallet!");
}
}

async function checkWalletConnection() {
try {
accounts = await window.ethereum.request({
method: "eth_accounts",
});
if (accounts.length > 0) {
updateConnectedAccountsDisplay();
await updateCurrentChainDisplay();
await subscribeToBlockHeaders();
}
} catch (error) {
console.error("Failed to check wallet connection:", error);
alert("Failed to check wallet connection");
}
}

//
// Example Usage
//

// Transaction
async function sendTransaction() {
if (accounts.length === 0) {
alert("Please connect your wallet first!");
return;
}

const selectedChainId = document.getElementById("chainSelect").value;
const currentChainId = await getCurrentChainId();

// Switch to the selected chain if not already on it
if (currentChainId !== selectedChainId) {
alert(
`The wallet's current chain ${currentChainId} does not match the dapp expectations. Will try to change to the expected chain ${selectedChainId} now.`,
);
await switchChain(selectedChainId);
}

const transactionParameters = {
to: "0x0000000000000000000000000000000000000000",
from: accounts[0],
value: "0x0",
};

try {
alert(
`Will make eth_sendTransaction request intended for ${selectedChainId} after this alert is dismissed.`,
);
await window.ethereum.request({
method: "eth_sendTransaction",
params: [transactionParameters],
});
alert("Transaction sent!");
} catch (error) {
console.error(error);
alert("Transaction failed!");
}
}

// Subscription
async function subscribeToBlockHeaders() {
try {
await window.ethereum.request({
method: "eth_subscribe",
params: ["newHeads"],
});
} catch (error) {
console.error("Failed to subscribe to new block headers:", error);
alert("Failed to subscribe to new block headers");
}
}

//
// EIP-1193 specific chain helpers
//

async function switchChain(chainId) {
try {
await window.ethereum.request({
method: "wallet_switchEthereumChain",
params: [
{
chainId: chainId,
},
],
});
} catch (switchError) {
console.error(switchError);
}
}

async function getCurrentChainId() {
return await window.ethereum.request({
method: "eth_chainId",
});
}

//
// Everything below is ignorable boilerplate
//

// DOM
document.getElementById("connectButton").addEventListener("click", connectWallet);
document.getElementById("chainSelect").addEventListener("change", async (event) => {
const chainId = event.target.value;
await switchChain(chainId);
await subscribeToBlockHeaders();
await updateCurrentChainDisplay();
});
document.getElementById("sendTxButton").addEventListener("click", sendTransaction);

async function updateCurrentChainDisplay() {
const currentChainId = await getCurrentChainId();
document.getElementById("currentChain").innerText = `Current Chain: ${currentChainId}`;
}

function updateConnectedAccountsDisplay() {
document.getElementById("connectedAccounts").innerText = `Connected Accounts: ${accounts.join(", ")}`;
}

async function handleEthSubscriptionDisplay(value = "Not available") {
const blockHeadDisplay = document.getElementById("blockHead");
blockHeadDisplay.innerText = `Current Block Head: ${value}`;
blockHeadDisplay.style.color = "red";
setTimeout(() => {
blockHeadDisplay.style.color = "black";
}, 1500);
}
</script>
</body>
</html>
Loading