Skip to content

Commit

Permalink
Clean up prod dapp (#44)
Browse files Browse the repository at this point in the history 
Co-authored-by: Alain Nicolas <[email protected]>
  • Loading branch information
@Montoya @alainncls
Montoya and alainncls authored Apr 15, 2024
1 parent daef4a5 commit 19a7d40
Show file tree
Hide file tree
Showing 7 changed files with 305 additions and 293 deletions.
5 changes: 1 addition & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,7 @@
],
"scripts": {
"build": "yarn workspaces foreach --parallel --topological --verbose run build",
"lint": "yarn lint:eslint && yarn lint:misc --check",
"lint:eslint": "eslint . --cache --ext js,jsx,ts,tsx",
"lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write",
"lint:misc": "prettier '**/*.html' '**/*.json' '**/*.md' '!**/CHANGELOG.md' '**/*.yml' --ignore-path .gitignore",
"lint": "yarn workspaces foreach --parallel run lint:eslint && yarn workspaces foreach --parallel run lint:misc --check",
"start": "yarn workspaces foreach --parallel --interlaced --verbose run start",
"test": "yarn workspace @consensys/linea-voyager run test"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/dev-site/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"lint": "yarn lint:eslint && yarn lint:misc --check",
"lint:eslint": "eslint . --cache --ext js,ts",
"lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write",
"lint:misc": "prettier '**/*.json' '**/*.md' '!CHANGELOG.md' --ignore-path .gitignore",
"lint:misc": "prettier '**/*.{json,md}' '**/*.md' '!CHANGELOG.md' --ignore-path ../../.gitignore",
"start": "GATSBY_TELEMETRY_DISABLED=1 gatsby develop"
},
"browserslist": {
Expand Down
5 changes: 5 additions & 0 deletions packages/site/.eslintrc.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
module.exports = {
extends: ['../../.eslintrc.js'],

env: {
browser: true,
node: false,
},

parserOptions: {
tsconfigRootDir: __dirname,
},
Expand Down
Binary file modified packages/site/src/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
303 changes: 15 additions & 288 deletions packages/site/src/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>LXP Snap</title>
<title>Linea Voyager Snap</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta property="og:title" content="LXP Snap" />
<meta property="og:title" content="Linea Voyager Snap" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
Expand All @@ -15,111 +15,7 @@
rel="stylesheet"
href="https://unpkg.com/spectre.css/dist/spectre.min.css"
/>
<style type="text/css">
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: rgb(18, 18, 18) url(src/overlay.png) top right no-repeat;
color: #fff;
font-family: 'DM Sans', sans-serif;
}

#page {
width: 760px;
}

#demo {
float: right;
margin-left: 36px;
}

#icon {
border-radius: 32px;
margin-right: 0.5rem;
}

a,
a:link,
a:visited,
a:focus,
a:hover,
a:active {
color: rgb(97, 223, 255) !important;
}

a:hover {
color: #fff !important;
}

button.btn,
button.btn-primary {
background-color: rgb(97, 223, 255) !important;
border-color: rgb(97, 223, 255) !important;
color: #000 !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
border-radius: 9999px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
}

button.btn:hover,
button.btn-primary:hover {
background-color: #fff !important;
border-color: #fff !important;
}

p.caption {
text-transform: uppercase;
font-size: 0.825rem;
margin-bottom: 0.125rem;
}

p.alt {
margin-top: 0.5rem;
}

p.alt a:hover {
cursor: pointer;
}

#demo video {
border-radius: 12px;
}

h1 {
font-size: 1.5rem;
line-height: 64px;
padding: 0;
margin-bottom: 64px;
}

h1 img {
vertical-align: top;
}

h2 {
font-size: 1.125rem;
font-weight: bold;
}

code {
background: #333;
color: #fff;
}

#footer {
position: fixed;
width: 860px;
bottom: 0;
left: 50%;
margin-left: -430px;
padding-bottom: 24px;
text-align: right;
}
</style>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="page">
Expand All @@ -129,7 +25,8 @@
</video>
</div>
<h1>
<img src="icon.png" width="64" height="64" alt="" id="icon" /> LXP Snap
<img src="icon.png" width="64" height="64" alt="" id="icon" /> Linea
Voyager Snap
</h1>
<h2>Follow your Linea Voyage</h2>
<p>
Expand All @@ -140,191 +37,21 @@ <h2>Follow your Linea Voyage</h2>
<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.
Linea Voyager to view your Linea XP balance, Proof of Humanity status,
and current activations.
</p>
<p id="mobileCallout">
<em>
Note: Snaps are only supported in the MetaMask extension. If you are
viewing this site on a mobile browser, please visit on a desktop with
MetaMask installed instead.
</em>
</p>
</div>
<div id="footer">
Powered by <a href="https://metamask.io/snaps/">MetaMask Snaps</a>
</div>

<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';

/*
* Use EIP-6963 to detect MetaMask
*/

const MetaMaskFound = async (providerDetail) => {
document.getElementById('loading').className = 'found';

const btn = document.createElement('button');
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) => {
event.preventDefault();
try {
const result = await provider.request({
method: 'wallet_requestSnaps',
params: {
[snapId]: {},
},
});

if (result) {
try {
const snaps = await provider.request({
method: 'wallet_getSnaps',
});
if (Object.keys(snaps).includes(snapId)) {
// snap installed, go to step 2
await snapInstalled(provider);
} else {
// the snap was not installed
}
} catch {}
}
} 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';

const alternate = document.createElement('p');
alternate.className = 'alt';
alternate.textContent = 'Or ';
const alternateLink = document.createElement('a');
alternateLink.textContent = 'watch an address';
alternate.appendChild(alternateLink);

alternateLink.onclick = async (event) => {
event.preventDefault();
const response = await provider.request({
method: 'wallet_invokeSnap',
params: {
snapId: snapId,
request: {
method: 'watchLxpAddress',
},
},
});
const message = document.createElement('p');
if (response !== null) {
// get the watched address
message.textContent = 'Watched address: ';
const address = document.createElement('code');
address.textContent = '' + response;
message.appendChild(address);
} else {
message.textContent = 'Failed to watch address';
}
document.getElementById('context').textContent = '';
document.getElementById('context').appendChild(message);
};

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

window.onload = function () {
window.addEventListener('eip6963:announceProvider', (event) => {
/* event.detail contains the discovered provider interface */
const providerDetail = event.detail;

/*
* You could take one of these cases and use it for your needs,
* or set up a conditional that takes any of these possibilities,
* or prompt the user to choose which MetaMask flavor they want to use
* in case they have multiple MetaMask extensions installed at the same time
*/
if (providerDetail.info.rdns == 'io.metamask') {
/* this is MetaMask */
MetaMaskFound(providerDetail);
} else if (providerDetail.info.rdns == 'io.metamask.flask') {
/* this is MetaMask Flask */
MetaMaskFound(providerDetail);
} else if (providerDetail.info.rdns == 'io.metamask.mmi') {
/* this is MetaMask Institutional */
MetaMaskFound(providerDetail);
}
});

window.dispatchEvent(new Event('eip6963:requestProvider'));

setTimeout(() => {
if ('found' !== document.getElementById('loading').className) {
/* Assume MetaMask was not detected */
document.getElementById('loading').textContent = '';
document
.getElementById('loading')
.insertAdjacentHTML(
'afterbegin',
"Please install <a href='https://metamask.io/'>MetaMask</a> first.",
);
}
}, 1000);
};
</script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Loading

0 comments on commit 19a7d40

Please sign in to comment.