Feature update
-- added Dapp download info popup -- added link verification feature
This commit is contained in:
sairaj mote
parent
829fd9e3cd
commit
2352960418
35
css/main.css
35
css/main.css
@ -805,6 +805,16 @@ theme-toggle {
|
||||
font-size: max(3vw, 1.5rem);
|
||||
}
|
||||
|
||||
#verification_section {
|
||||
gap: 1rem;
|
||||
padding: max(1rem, 2vw);
|
||||
border-radius: 1rem;
|
||||
border: solid 0.1rem rgba(var(--text-color), 0.1);
|
||||
}
|
||||
#verification_section sm-form::part(form) {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#dapp_search_input {
|
||||
width: 100%;
|
||||
--background: transparent;
|
||||
@ -898,6 +908,22 @@ theme-toggle {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
#download_info_popup ol {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
#download_info_popup ol li {
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#download_info_popup ol li:not(:last-of-type) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#download_info_popup input[type=checkbox] {
|
||||
height: 0.9rem;
|
||||
width: 0.9rem;
|
||||
accent-color: var(--accent-color);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-small {
|
||||
display: none;
|
||||
@ -961,6 +987,15 @@ theme-toggle {
|
||||
display: grid;
|
||||
grid-template-columns: 12rem 1fr;
|
||||
}
|
||||
#page_container[data-page=dapps] > :nth-child(2) {
|
||||
padding: 0 3vw;
|
||||
}
|
||||
#verification_section {
|
||||
gap: 1rem 0.5rem;
|
||||
}
|
||||
#verification_section sm-form::part(form) {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
#dapp_search_input {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -748,6 +748,17 @@ theme-toggle {
|
||||
font-size: max(3vw, 1.5rem);
|
||||
}
|
||||
}
|
||||
#verification_section {
|
||||
gap: 1rem;
|
||||
padding: max(1rem, 2vw);
|
||||
border-radius: 1rem;
|
||||
border: solid 0.1rem rgba(var(--text-color), 0.1);
|
||||
sm-form {
|
||||
&::part(form) {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#dapp_search_input {
|
||||
width: 100%;
|
||||
--background: transparent;
|
||||
@ -835,6 +846,23 @@ theme-toggle {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
}
|
||||
#download_info_popup {
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
li {
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
height: 0.9rem;
|
||||
width: 0.9rem;
|
||||
accent-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-small {
|
||||
display: none;
|
||||
@ -901,6 +929,17 @@ theme-toggle {
|
||||
&[data-page="dapps"] {
|
||||
display: grid;
|
||||
grid-template-columns: 12rem 1fr;
|
||||
& > :nth-child(2) {
|
||||
padding: 0 3vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
#verification_section {
|
||||
gap: 1rem 0.5rem;
|
||||
sm-form {
|
||||
&::part(form) {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
#dapp_search_input {
|
||||
|
||||
100
index.html
100
index.html
@ -11,6 +11,7 @@
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="hidden">
|
||||
@ -30,8 +31,41 @@
|
||||
<theme-toggle></theme-toggle>
|
||||
</header>
|
||||
<main id="page_container" class="grid"></main>
|
||||
<sm-popup id="download_info_popup">
|
||||
<div class="grid gap-1-5">
|
||||
<h2>
|
||||
Starting download...
|
||||
</h2>
|
||||
<div class="grid gap-1">
|
||||
<h4>
|
||||
What to do after you download the dapp?
|
||||
</h4>
|
||||
<ol>
|
||||
<li>
|
||||
Unzip the downloaded file
|
||||
</li>
|
||||
<li>
|
||||
Open the unzipped folder
|
||||
</li>
|
||||
<li>
|
||||
Open the<strong> index.html</strong> file in your browser
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="flex align-center gap-0-5 margin-left-auto">
|
||||
<button class="button button--colored" onclick="dontShowInfoAgain()">
|
||||
Don't show this again
|
||||
</button>
|
||||
<button class="button button--primary button--small" style="padding: 0.5rem 1rem;"
|
||||
onclick="closePopup()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</sm-popup>
|
||||
<script src="scripts/components.min.js"></script>
|
||||
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
|
||||
<script src="scripts/octokit.js" type="module"></script>
|
||||
<script>
|
||||
const { html, svg, render: renderElem } = uhtml;
|
||||
const uiGlobals = {}
|
||||
@ -93,7 +127,8 @@
|
||||
break;
|
||||
case 'error':
|
||||
icon = `<svg class="icon icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
|
||||
options.pinned = true
|
||||
if (typeof options.pinned === 'undefined')
|
||||
options.pinned = true
|
||||
break;
|
||||
}
|
||||
if (mode === 'error') {
|
||||
@ -290,11 +325,23 @@
|
||||
routingStart(state) {
|
||||
},
|
||||
routingEnd(state) {
|
||||
const { page } = state
|
||||
let { page } = state
|
||||
if (!page)
|
||||
page = 'home'
|
||||
const preventDownloadInfoPopup = localStorage.getItem('dontShowDownloadInfo')
|
||||
if (preventDownloadInfoPopup === null)
|
||||
document.querySelectorAll('.dapp-download-button').forEach(elem => {
|
||||
elem.onclick = (e) => openPopup('download_info_popup')
|
||||
})
|
||||
}
|
||||
})
|
||||
function dontShowInfoAgain() {
|
||||
localStorage.setItem('dontShowDownloadInfo', true);
|
||||
document.querySelectorAll('.dapp-download-button').forEach(elem => {
|
||||
elem.onclick = null
|
||||
})
|
||||
closePopup()
|
||||
}
|
||||
window.addEventListener('load', () => {
|
||||
router.routeTo(location.hash)
|
||||
document.body.classList.remove('hidden')
|
||||
@ -471,7 +518,7 @@
|
||||
<p class="dapp-card__description">${description}</p>
|
||||
</div>
|
||||
<div class="flex gap-0-5 align-center flex-wrap">
|
||||
<a href=${`https://github.com/ranchimall/${appLink.split('/').pop()}/archive/refs/heads/master.zip`} class="button dapp-card__link" title="Download dapp Zip">
|
||||
<a href=${`https://github.com/ranchimall/${appLink.split('/').pop()}/archive/refs/heads/master.zip`} class="button dapp-card__link dapp-download-button" title="Download dapp Zip">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
|
||||
</a>
|
||||
<a href=${appLink} class="button dapp-card__link dapp-card__link--primary" target="_blank">
|
||||
@ -495,7 +542,17 @@
|
||||
exciting new blockchain apps
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
<section id="verification_section" class="grid">
|
||||
<h4>
|
||||
Always verify links before entering your private keys
|
||||
</h4>
|
||||
<sm-form id="verification_form" oninvalid=${removeInvalidLinkResult} skip-submit>
|
||||
<sm-input id="link_verification__input" class="flex-1" placeholder="Enter a link to verify" style="min-width: 16rem" required></sm-input>
|
||||
<button class="button button--colored" onclick=${verifyLink} type="submit">
|
||||
Verify link
|
||||
</button>
|
||||
</sm-form>
|
||||
</section>
|
||||
</ul>
|
||||
<div class="flex align-center space-between gap-1 flex-wrap">
|
||||
<h4>Our offerings</h4>
|
||||
@ -542,6 +599,39 @@
|
||||
);
|
||||
})
|
||||
}
|
||||
function verifyLink() {
|
||||
const linkToVerify = getRef('link_verification__input').value.trim();
|
||||
if (linkToVerify === '')
|
||||
return notify('Please enter a link to verify', 'error', {
|
||||
timeout: 5000,
|
||||
pinned: false
|
||||
})
|
||||
const linkIsHostedCorrectly = linkToVerify.startsWith('https://ranchimall.github.io/')
|
||||
const linkIsAuthorized = dappsList.some(({ appLink }) => linkToVerify.includes(appLink))
|
||||
removeInvalidLinkResult()
|
||||
if (linkIsHostedCorrectly && linkIsAuthorized) {
|
||||
getRef('verification_form').after(html.node/*html*/`
|
||||
<div class="flex align-center gap-0-5">
|
||||
<svg class="icon" style="fill: var(--green)" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M23,11.99l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,11.99l2.44,2.79 l-0.34,3.7l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,11.99z M19.05,13.47l-0.56,0.65l0.08,0.85 l0.18,1.95l-1.9,0.43l-0.84,0.19l-0.44,0.74l-0.99,1.68l-1.78-0.77L12,18.85l-0.79,0.34l-1.78,0.77l-0.99-1.67l-0.44-0.74 l-0.84-0.19l-1.9-0.43l0.18-1.96l0.08-0.85l-0.56-0.65l-1.29-1.47l1.29-1.48l0.56-0.65L5.43,9.01L5.25,7.07l1.9-0.43l0.84-0.19 l0.44-0.74l0.99-1.68l1.78,0.77L12,5.14l0.79-0.34l1.78-0.77l0.99,1.68l0.44,0.74l0.84,0.19l1.9,0.43l-0.18,1.95l-0.08,0.85 l0.56,0.65l1.29,1.47L19.05,13.47z"/><polygon points="10.09,13.75 7.77,11.42 6.29,12.91 10.09,16.72 17.43,9.36 15.95,7.87"/></g></g></svg>
|
||||
<h4>Yay!</h4>
|
||||
<p>The link you provided is genuine</p>
|
||||
</div>
|
||||
`)
|
||||
} else {
|
||||
getRef('verification_form').after(html.node/*html*/`
|
||||
<div class="flex align-center gap-0-5">
|
||||
<svg class="icon" style="fill: var(--danger-color)" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M15.73,3H8.27L3,8.27v7.46L8.27,21h7.46L21,15.73V8.27L15.73,3z M19,14.9L14.9,19H9.1L5,14.9V9.1L9.1,5h5.8L19,9.1V14.9z M14.83,7.76L12,10.59L9.17,7.76L7.76,9.17L10.59,12l-2.83,2.83l1.41,1.41L12,13.41l2.83,2.83l1.41-1.41L13.41,12l2.83-2.83 L14.83,7.76z"/></g></svg>
|
||||
<h4>Danger!</h4>
|
||||
<p>Link you provided is not genuine</p>
|
||||
</div>
|
||||
`)
|
||||
}
|
||||
}
|
||||
function removeInvalidLinkResult() {
|
||||
if (getRef('verification_form').nextElementSibling) {
|
||||
getRef('verification_form').nextElementSibling.remove()
|
||||
}
|
||||
}
|
||||
function handleFilterCategory(e) {
|
||||
const query = getRef('dapp_search_input')?.value.trim().toLowerCase() || '';
|
||||
location.hash = `#/home?category=${e.target.value}${query ? `&query=${query}` : ''}`
|
||||
@ -605,7 +695,7 @@
|
||||
</div>
|
||||
<p>${description}</p>
|
||||
<div class="flex align-center gap-0-5">
|
||||
<a href=${`https://github.com/ranchimall/${appLink.split('/').pop()}/archive/refs/heads/master.zip`} class="button dapp-card__link" title="Download dapp Zip">
|
||||
<a href=${`https://github.com/ranchimall/${appLink.split('/').pop()}/archive/refs/heads/master.zip`} class="button dapp-card__link dapp-download-button" title="Download dapp Zip">
|
||||
Download
|
||||
<svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
|
||||
</a>
|
||||
|
||||
5
scripts/components.min.js
vendored
5
scripts/components.min.js
vendored
File diff suppressed because one or more lines are too long
20
scripts/octokit.js
Normal file
20
scripts/octokit.js
Normal file
@ -0,0 +1,20 @@
|
||||
import { Octokit, App } from "https://esm.sh/octokit";
|
||||
|
||||
async function some() {
|
||||
const octokit = new Octokit({
|
||||
auth: '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'
|
||||
})
|
||||
const owner = 'ranchimall';
|
||||
const repo = 'messenger';
|
||||
return await octokit.request('GET /repos/{owner}/{repo}', {
|
||||
owner,
|
||||
repo,
|
||||
headers: {
|
||||
'X-GitHub-Api-Version': '2022-11-28'
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log(new Octokit({
|
||||
auth: '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'
|
||||
}))
|
||||
// console.log(await some())
|
||||
1
scripts/octokit.min.js
vendored
Normal file
1
scripts/octokit.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
import{Octokit,App}from"https://esm.sh/octokit";async function some(){const octokit=new Octokit({auth:"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"});return await octokit.request("GET /repos/{owner}/{repo}",{owner:"ranchimall",repo:"messenger",headers:{"X-GitHub-Api-Version":"2022-11-28"}})}console.log(new Octokit({auth:"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"}));
|
||||
Loading…
Reference in New Issue
Block a user