Skip to content

Commit

Permalink
Move CSS and JS to separate files
Browse files Browse the repository at this point in the history 
Also include a note for mobile devices
  • Loading branch information
@Montoya
Montoya committed Apr 14, 2024
1 parent 4f5fc39 commit a922480
Show file tree
Hide file tree
Showing 3 changed files with 302 additions and 282 deletions.
293 changes: 11 additions & 282 deletions packages/site/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,111 +15,10 @@
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 @@ -143,187 +42,17 @@ <h2>Follow your Linea Voyage</h2>
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';

/*
* 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 Snap';

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 a922480

Please sign in to comment.