Skip to content
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

Better dapp #35

Merged
merged 3 commits into from
Apr 2, 2024
Merged

Better dapp #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ca49af
wip: dapp flow
Montoya Apr 1, 2024
c2b28ba
wip: almost signing
Montoya Apr 1, 2024
61f7bc6
Claim successful
Montoya Apr 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
Binary file added docs/demo.mp4
View file
Open in desktop
Binary file not shown.
150 changes: 136 additions & 14 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@
#page {
width:760px;
}
#screenshot {
float:left;
margin-right:36px;
#demo {
float:right;
margin-left:36px;
}
#icon {
border-radius:32px;
Expand All @@ -50,15 +50,19 @@
background-color:#fff !important;
border-color:#fff !important;
}
#screenshot img {
border:1px solid #777;
p.caption {
text-transform:uppercase;
font-size:0.825rem;
margin-bottom:0.125rem;
}
#demo video {
border-radius:12px;
}
h1 {
font-size:1.5rem;
line-height:64px;
padding:0;
margin-bottom:72px;
margin-bottom:64px;
}
h1 img {
vertical-align:top;
Expand All @@ -67,6 +71,10 @@
font-size:1.125rem;
font-weight:bold;
}
code {
background:#333;
color:#fff;
}
#footer {
position:fixed;
width:860px;
Expand All @@ -80,13 +88,16 @@
</head>
<body>
<div id="page">
<div id="screenshot">
<!-- img src="screenshot.jpg" width="338" height="594" alt="Screenshot of FarFeed" -->
<div id="demo">
<video width="300" height="500" autoplay loop muted>
<source src="demo.mp4" type="video/mp4" />
</video>
</div>
<h1><img src="icon.png" width="64" height="64" alt="" id="icon"> LXP Snap</h1>
<h2>Follow your LXP journey.</h2>
<p>View your Linea XP balance right inside of MetaMask!</p>
<h2>Follow your Linea Voyage</h2>
<p>View your Linea XP balance, POH status, and current activations inside of MetaMask!</p>
<p id="loading">Loading...</p>
<div id="context"></div>
<p>After installing the Snap, open the Snaps menu in MetaMask and click on LXP to view your Linea XP balance, Proof of Humanity status, and current activations.</p>
</div>
<div id="footer">
Expand All @@ -95,6 +106,14 @@ <h2>Follow your LXP journey.</h2>

<script type="text/javascript">

const stringToHex = (input) => {
let result = '';
for (let i = 0; i < input.length; i++) {
result += input.charCodeAt(i).toString(16).padStart(2, '0');
}
return result;
};

const snapId = 'npm:@consensys/lxp-snap';
const snapName = 'LXP Snap';

Expand All @@ -110,6 +129,10 @@ <h2>Follow your LXP journey.</h2>
btn.className = "btn btn-primary btn-lg";
btn.textContent = "Install "+snapName;

const caption = document.createElement("p");
caption.className = "caption";
caption.textContent = "Step 1";

const provider = providerDetail.provider;

btn.onclick = async (event) => {
Expand All @@ -129,10 +152,8 @@ <h2>Follow your LXP journey.</h2>
method: 'wallet_getSnaps',
});
if( Object.keys(snaps).includes(snapId) ) {
// the snap is installed and connected
btn.textContent = "Installed!";
btn.onclick = null;
btn.disabled = true;
// snap installed, go to step 2
await snapInstalled(provider);
}
else {
// the snap was not installed
Expand All @@ -144,10 +165,111 @@ <h2>Follow your LXP journey.</h2>
catch { }
};
document.getElementById('loading').textContent = "";
document.getElementById('loading').appendChild(caption);
document.getElementById('loading').appendChild(btn);

};

const snapInstalled = async (provider) => {
const btn = document.createElement("button");
btn.className = "btn btn-primary btn-lg";
btn.textContent = "Connect Account";

const caption = document.createElement("p");
caption.className = "caption";
caption.textContent = "Step 2";

btn.onclick = async (event) => {
event.preventDefault();
const accounts = await window.ethereum.request({
"method": "eth_requestAccounts",
"params": []
});
if(accounts.length > 0) {
const response = await ethereum.request({
method: 'wallet_invokeSnap',
params: {
snapId: snapId,
request: {
method: 'setLxpAddress',
params: {
lxpAddress: accounts[0]
}
}
}
});
if(response===accounts[0]) {
// get the first entry
const message = document.createElement("p");
message.textContent = "Connected address: ";
const address = document.createElement("code");
address.textContent = ''+accounts[0];
message.appendChild(address);
document.getElementById("context").appendChild(message);

await accountConnected(provider, accounts[0]);
}
}
};
document.getElementById('loading').textContent = "";
document.getElementById('loading').appendChild(caption);
document.getElementById('loading').appendChild(btn);
};

const accountConnected = async (provider, account) => {
const btn = document.createElement("button");
btn.className = "btn btn-primary btn-lg";
btn.textContent = "Sign Message";

const caption = document.createElement("p");
caption.className = "caption";
caption.textContent = "Step 3";

btn.onclick = async (event) => {
document.getElementById('loading').textContent = "Pending...";
try {
const payload = {
address: account,
signedOn: Date.now(),
subject: 'LXP Snap Activation',
};
const message = `0x${stringToHex(JSON.stringify(payload))}`;

const signature = await provider.request({
method: 'personal_sign',
params: [message, account],
});

const res = await provider.request({
method: 'wallet_invokeSnap',
params: {
snapId: snapId,
request: {
method: 'personalSign',
params: {
signature,
payload
},
},
},
});

if (res?.status === 'ok') {
document.getElementById('loading').textContent = "Claimed successfully 🎉";
} else {
document.getElementById('loading').textContent = "Something went wrong 😔 "+res?.message;
}
} catch (error) {
document.getElementById('loading').textContent = "Something went wrong 😔 ";
console.error(error);
}
}

document.getElementById('loading').textContent = "";
document.getElementById('loading').appendChild(caption);
document.getElementById('loading').appendChild(btn);
};

window.onload = function() {

window.addEventListener(
Expand Down
Loading