1.1.10
This commit is contained in:
sairaj mote
parent
dc6f2d9719
commit
0536a2a64d
155
css/main.css
155
css/main.css
@ -119,8 +119,9 @@ h3 {
|
||||
}
|
||||
|
||||
.breakable {
|
||||
overflow-wrap: break-word;
|
||||
letter-spacing: 0.06em;
|
||||
word-break: break-word;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.06rem;
|
||||
}
|
||||
|
||||
.other-font {
|
||||
@ -322,6 +323,58 @@ ul .balance:last-of-type {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#search_page h1 {
|
||||
margin-top: 2rem;
|
||||
font-weight: 500;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#search_page .input {
|
||||
-webkit-animation: fade 0.4s;
|
||||
animation: fade 0.4s;
|
||||
}
|
||||
|
||||
#search_page .input input:valid ~ #suggestions {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#search_page #suggestions {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-webkit-transform: translateY(-0.5rem);
|
||||
transform: translateY(-0.5rem);
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
background: var(--background);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
max-height: 30vh;
|
||||
overflow-y: auto;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
#search_page #suggestions:empty {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#search_page .suggestion {
|
||||
padding: 0.6rem 1.5rem 0.6rem 3rem;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#search_page .suggestion:hover, #search_page .suggestion:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#main_search {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
@ -349,56 +402,12 @@ ul .balance:last-of-type {
|
||||
color: rgba(var(--text-light), 1);
|
||||
}
|
||||
|
||||
#main_search .input {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
#main_search .input input:valid ~ #suggestions {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#main_search label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main_search #suggestions {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-webkit-transform: translateY(-0.5rem);
|
||||
transform: translateY(-0.5rem);
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
background: var(--background);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
max-height: 30vh;
|
||||
overflow-y: auto;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
#main_search #suggestions:empty {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#main_search .suggestion {
|
||||
padding: 0.6rem 1.5rem 0.6rem 3rem;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#main_search .suggestion:hover, #main_search .suggestion:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input {
|
||||
border-radius: 0.2rem;
|
||||
position: relative;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
@ -425,15 +434,46 @@ ul .balance:last-of-type {
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
height: 1rem;
|
||||
overflow: visible;
|
||||
width: 1.2rem;
|
||||
width: 1rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text), 1);
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 6;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.copy-row {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: 1fr auto;
|
||||
grid-template-columns: 1fr auto;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.copy-row .icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#textCopied {
|
||||
padding: 1rem;
|
||||
border-radius: 2rem;
|
||||
background: rgba(var(--text), 0.2);
|
||||
color: rgba(var(--text), 1);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
margin: 2rem 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
-webkit-transition: 0.3s opacity ease;
|
||||
transition: 0.3s opacity ease;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
@-webkit-keyframes flyInLeft {
|
||||
@ -663,8 +703,17 @@ ul .balance:last-of-type {
|
||||
}
|
||||
|
||||
#page_header .icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#page_header .icon:first-of-type {
|
||||
margin-right: 1rem;
|
||||
padding: 0.4rem 0.4rem 0.4rem 0;
|
||||
}
|
||||
|
||||
#page_header .icon:nth-of-type(2) {
|
||||
padding: 0.4rem 0 0.4rem 0.4rem;
|
||||
}
|
||||
|
||||
@ -909,7 +958,7 @@ p {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.transaction .icon {
|
||||
.transaction > .icon:first-of-type {
|
||||
stroke-width: 4;
|
||||
-ms-grid-column-align: center;
|
||||
justify-self: center;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -83,8 +83,9 @@ h3{
|
||||
display: none !important;
|
||||
}
|
||||
.breakable{
|
||||
overflow-wrap: break-word;
|
||||
letter-spacing: 0.06em;
|
||||
word-break: break-word;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.06rem;
|
||||
}
|
||||
.other-font{
|
||||
font-family: 'Barlow', sans-serif;
|
||||
@ -232,34 +233,20 @@ ul{
|
||||
grid-template-rows: auto 1fr auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
#main_search{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h2{
|
||||
#search_page{
|
||||
h1{
|
||||
margin-top: 2rem;
|
||||
align-self: flex-start;
|
||||
font-size: 4rem;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 600;
|
||||
}
|
||||
h4{
|
||||
line-height: 1.4em;
|
||||
margin-top: 2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(var(--text-light), 1);
|
||||
font-weight: 500;
|
||||
font-size: 3rem;
|
||||
}
|
||||
.input{
|
||||
border-radius: 0.5rem;
|
||||
animation: fade 0.4s;
|
||||
input:valid ~ #suggestions{
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
label{
|
||||
position: relative;
|
||||
}
|
||||
#suggestions{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@ -287,7 +274,29 @@ ul{
|
||||
}
|
||||
}
|
||||
}
|
||||
#main_search{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h2{
|
||||
margin-top: 2rem;
|
||||
align-self: flex-start;
|
||||
font-size: 4rem;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 600;
|
||||
}
|
||||
h4{
|
||||
line-height: 1.4em;
|
||||
margin-top: 2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(var(--text-light), 1);
|
||||
}
|
||||
label{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.input{
|
||||
border-radius: 0.2rem;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
@ -308,15 +317,37 @@ ul{
|
||||
}
|
||||
}
|
||||
.icon{
|
||||
height: 1.2rem;
|
||||
height: 1rem;
|
||||
overflow: visible;
|
||||
width: 1.2rem;
|
||||
width: 1rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text), 1);
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 6;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.copy-row{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
.icon{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
#textCopied{
|
||||
padding: 1rem;
|
||||
border-radius: 2rem;
|
||||
background: rgba(var(--text), 0.2);
|
||||
color: rgba(var(--text), 1);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
margin: 2rem 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: 0.3s opacity ease;
|
||||
z-index: 20;
|
||||
}
|
||||
@keyframes flyInLeft{
|
||||
from{
|
||||
@ -435,8 +466,15 @@ ul{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.icon{
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon:first-of-type{
|
||||
margin-right: 1rem;
|
||||
padding: 0.4rem 0.4rem 0.4rem 0;
|
||||
}
|
||||
.icon:nth-of-type(2){
|
||||
padding: 0.4rem 0 0.4rem 0.4rem;
|
||||
}
|
||||
}
|
||||
@ -603,7 +641,7 @@ p{
|
||||
h4{
|
||||
font-weight: 500;
|
||||
}
|
||||
.icon{
|
||||
& > .icon:first-of-type{
|
||||
stroke-width: 4;
|
||||
justify-self: center;
|
||||
height: 3rem;
|
||||
|
||||
553
index.html
553
index.html
@ -9,6 +9,9 @@
|
||||
</head>
|
||||
|
||||
<body data-theme="dark">
|
||||
<h5 id="textCopied" class="hide">
|
||||
Copied
|
||||
</h5>
|
||||
<div id="loader_page" class="hide-completely">
|
||||
<svg id="loader" class="icon" viewBox="0 0 64 64">
|
||||
<title>Loading</title>
|
||||
@ -17,7 +20,12 @@
|
||||
<h4>Loading</h4>
|
||||
</div>
|
||||
<header id="page_header" class="flex margin">
|
||||
<h3 id="page_title">Block</h3>
|
||||
<svg class="icon" onclick="history.back()" viewBox="0 0 64 64">
|
||||
<title>back_arrow</title>
|
||||
<polyline points="25.97 6.24 0.5 32.06 25.92 57.83" />
|
||||
<line x1="20" y1="32" x2="64" y2="32" />
|
||||
</svg>
|
||||
<h3 id="page_title"></h3>
|
||||
<svg id="secondary_search_btn" class="icon margin-left-auto hover" viewBox="0 0 64 64">
|
||||
<title>
|
||||
search for block, transactions, address, token or contract
|
||||
@ -27,18 +35,14 @@
|
||||
</svg>
|
||||
</header>
|
||||
<main id="page_container">
|
||||
<!--<div id="search_page" class="page hide-completely">
|
||||
<label id="secondary_search" class="input">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>search icon</title>
|
||||
<circle cx="25.34" cy="25.34" r="24.84"/>
|
||||
<line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
|
||||
</svg>
|
||||
<input type="search" placeholder="Search block, transactions, address, token or contract">
|
||||
</label>
|
||||
</div> -->
|
||||
</main>
|
||||
|
||||
<!-- Set urls for token and flo Apis -->
|
||||
<script>
|
||||
window.tokenapiUrl = 'https://ranchimallflo.duckdns.org'
|
||||
window.floapiUrl = 'https://flosight.duckdns.org'
|
||||
</script>
|
||||
|
||||
<script>
|
||||
let frag = document.createDocumentFragment();
|
||||
|
||||
@ -91,14 +95,13 @@
|
||||
<div id="main_search">
|
||||
<h2 class="other-font">FLO SCOUT</h2>
|
||||
<h4>Search for<br>block, transaction, address,<br>token and contract</h4>
|
||||
<label id="primary_search" class="input">
|
||||
<label id="primary_search" class="input" onclick="render('search_page')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>search icon</title>
|
||||
<circle cx="25.34" cy="25.34" r="24.84"/>
|
||||
<line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
|
||||
</svg>
|
||||
<input id='main_search_field' autocomplete="off" type="search" placeholder="Search" required>
|
||||
<ul id="suggestions"></ul>
|
||||
<input id="homepage_search" autocomplete="off" type="search" placeholder="Search" disabled>
|
||||
</label>
|
||||
</div>
|
||||
<div id="highlights">
|
||||
@ -230,6 +233,14 @@
|
||||
<div class='head'>
|
||||
<h5 class="label">${type}</h5>
|
||||
<h2 class="token uppercase">${name}</h2>
|
||||
<h5 class="label">Hash</h5>
|
||||
<div class="copy-row">
|
||||
<h4 class="breakable copy">${hash}</h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
|
||||
<title>Copy</title>
|
||||
<path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h5 class="label">Block</h5>
|
||||
@ -244,21 +255,37 @@
|
||||
<div class="card">
|
||||
<h5 class="label">FLO Data</h5>
|
||||
<p>${floData}</p>
|
||||
<h5 class="label">Hash</h5>
|
||||
<h4 class="breakable">${hash}</h4>
|
||||
<h5 class="label">Block Confirmations</h5>
|
||||
<h4>${confirmations}</h4>
|
||||
</div>
|
||||
`;
|
||||
return page;
|
||||
},
|
||||
AlltransactionsPage() {
|
||||
searchPage() {
|
||||
let page = document.createElement("div");
|
||||
page.classList.add("page");
|
||||
page.id = "search_page";
|
||||
page.innerHTML = `
|
||||
<h1 class="other-font">Search</h1>
|
||||
<label id="secondary_search" class="input">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>search icon</title>
|
||||
<circle cx="25.34" cy="25.34" r="24.84"/>
|
||||
<line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
|
||||
</svg>
|
||||
<input id='main_search_field' autocomplete="off" type="search" placeholder="block, transactions, address, token or contract" required>
|
||||
<ul id="suggestions"></ul>
|
||||
</label>
|
||||
`
|
||||
return page;
|
||||
},
|
||||
alltransactionsPage() {
|
||||
let page = document.createElement("div");
|
||||
page.classList.add("page", "transaction-container");
|
||||
page.id = "all_transactions_page";
|
||||
return page;
|
||||
},
|
||||
AllBlocksPage() {
|
||||
allBlocksPage() {
|
||||
let page = document.createElement("div");
|
||||
page.classList.add("page");
|
||||
page.id = "all_blocks_page";
|
||||
@ -398,6 +425,14 @@
|
||||
<h4 class="token uppercase">${token}</h4>
|
||||
</div>`
|
||||
contractInfo.innerHTML = `
|
||||
<h5 class="label">Hash</h5>
|
||||
<div class="copy-row">
|
||||
<h4 class="breakable copy hash">${hash}</h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
|
||||
<title>Copy</title>
|
||||
<path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="label">Sender</h5>
|
||||
<h4 class="address">${sender}</h4>
|
||||
<h5 class="label">receiver</h5>
|
||||
@ -430,6 +465,14 @@
|
||||
<h4 class="token uppercase">${token}</h4>
|
||||
</div>
|
||||
<div class="contract-info">
|
||||
<h5 class="label">Hash</h5>
|
||||
<div class="copy-row">
|
||||
<h4 class="breakable copy hash">${hash}</h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
|
||||
<title>Copy</title>
|
||||
<path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="label">Sender</h5>
|
||||
<h4 class="address">${sender}</h4>
|
||||
<h5 class="label">receiver</h5>
|
||||
@ -462,6 +505,14 @@
|
||||
<h4 class="token uppercase">${token}</h4>
|
||||
</div>
|
||||
<div class="contract-info">
|
||||
<h5 class="label">Hash</h5>
|
||||
<div class="copy-row">
|
||||
<h4 class="breakable copy hash">${hash}</h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
|
||||
<title>Copy</title>
|
||||
<path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="label">Incorporation address</h5>
|
||||
<h4 class="address">${incAddress}</h4>
|
||||
<h5 class="label">token name</h5>
|
||||
@ -491,7 +542,15 @@
|
||||
<h5 class="label">smart contract </h5>
|
||||
<h4 class="uppercase">trigger</h4>
|
||||
</div>
|
||||
<h5 class="label">Hash</h5>
|
||||
<div class="contract-info">
|
||||
<div class="copy-row">
|
||||
<h4 class="breakable copy hash">${hash}</h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
|
||||
<title>Copy</title>
|
||||
<path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="label">Contract name</h5>
|
||||
<h4>${contractName}</h4>
|
||||
<h5 class="label">contract address</h5>
|
||||
@ -523,6 +582,14 @@
|
||||
<h4 class="token uppercase">${token}</h4>
|
||||
</div>
|
||||
<div class="contract-info">
|
||||
<h5 class="label">Hash</h5>
|
||||
<div class="copy-row">
|
||||
<h4 class="breakable copy hash">${hash}</h4>
|
||||
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
|
||||
<title>Copy</title>
|
||||
<path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="label">Contract name</h5>
|
||||
<h4>${contractName}</h4>
|
||||
<h5 class="label">Contract address</h5>
|
||||
@ -688,6 +755,17 @@
|
||||
pageTitle.textContent = "block";
|
||||
loading()
|
||||
}
|
||||
if (pageId === "search_page") {
|
||||
pageTitle.textContent = "";
|
||||
pageHeader.querySelector('#secondary_search_btn').classList.add("hide-completely");
|
||||
pageContainer.append(create.searchPage());
|
||||
document.getElementById("main_search_field").addEventListener("keydown", function (e) {
|
||||
if (e.key === 'Enter') {
|
||||
processNavbarSearch();
|
||||
}
|
||||
});
|
||||
loading()
|
||||
} else pageHeader.querySelector('#secondary_search_btn').classList.remove("hide-completely");
|
||||
|
||||
if (pageId === "homepage") {
|
||||
pageHeader.classList.add("hide-completely");
|
||||
@ -695,12 +773,6 @@
|
||||
pageContainer.append(create.homepage(data));
|
||||
loading();
|
||||
|
||||
document.getElementById("main_search_field").addEventListener("keydown", function (e) {
|
||||
if (e.key === 'Enter') {
|
||||
processNavbarSearch();
|
||||
}
|
||||
});
|
||||
|
||||
let themeToggler = document.getElementById("theme_toggle"),
|
||||
body = document.querySelector("body");
|
||||
if (localStorage.theme === "dark") {
|
||||
@ -728,7 +800,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
getAllSuggestions()
|
||||
// getAllSuggestions()
|
||||
|
||||
latestTxs.forEach(tx => {
|
||||
if (tx["type"] == "tokentransfer")
|
||||
@ -747,7 +819,7 @@
|
||||
|
||||
if (pageId === "all_blocks_page") {
|
||||
let allBlocks = await getAllBlocks(100);
|
||||
pageContainer.append(create.AllBlocksPage())
|
||||
pageContainer.append(create.allBlocksPage())
|
||||
pageTitle.textContent = "All Blocks";
|
||||
for (block in allBlocks) {
|
||||
frag.append(create.blockCard(allBlocks[block].height, allBlocks[block].tx.length))
|
||||
@ -759,7 +831,7 @@
|
||||
if (pageId === "all_transactions_page") {
|
||||
let allTxs = await getAllTxs();
|
||||
pageTitle.textContent = "All Transactions";
|
||||
pageContainer.append(create.AlltransactionsPage())
|
||||
pageContainer.append(create.alltransactionsPage())
|
||||
appendTransactions('all_transactions_page', allTxs)
|
||||
loading()
|
||||
}
|
||||
@ -778,11 +850,18 @@
|
||||
tabMounted = false;
|
||||
}
|
||||
|
||||
function renderTransactions() { }
|
||||
window.addEventListener("load", async () => {
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
var hashvalue = location.hash.slice(1);
|
||||
if (hashvalue == '') {
|
||||
render("homepage");
|
||||
history.pushState(appState, null, null);
|
||||
history.pushState(appState, null, '');
|
||||
getAllSuggestions();
|
||||
}
|
||||
else {
|
||||
await getAllSuggestions();
|
||||
categoriseText(hashvalue);
|
||||
}
|
||||
|
||||
this.addEventListener("click", (e) => {
|
||||
if (e.target.closest(".address") && prevField !== e.target.textContent) {
|
||||
@ -791,7 +870,7 @@
|
||||
page: "address_page",
|
||||
thisField: e.target.textContent,
|
||||
};
|
||||
history.pushState(appState, null, null)
|
||||
history.pushState(appState, null, `#${e.target.textContent}`)
|
||||
}
|
||||
if (e.target.closest(".token") && prevField !== e.target.textContent) {
|
||||
render("token_page", e.target.textContent.toLowerCase());
|
||||
@ -799,23 +878,15 @@
|
||||
page: "token_page",
|
||||
thisField: e.target.textContent
|
||||
};
|
||||
history.pushState(appState, null, null)
|
||||
history.pushState(appState, null, `#${e.target.textContent}`)
|
||||
}
|
||||
if (e.target.closest(".hash") && prevField !== e.target.textContent) {
|
||||
render("transaction_page", e.target.textContent);
|
||||
appState = {
|
||||
page: "transaction_page",
|
||||
thisField: e.target.textContent,
|
||||
};
|
||||
history.pushState(appState, null, null)
|
||||
}
|
||||
if (!e.target.classList.contains("token") && !e.target.classList.contains("address") && e.target.closest(".transaction") && prevField !== e.target.textContent) {
|
||||
render("transaction_page", e.target.closest(".transaction").id);
|
||||
appState = {
|
||||
page: "transaction_page",
|
||||
thisField: e.target.closest(".transaction").id,
|
||||
};
|
||||
history.pushState(appState, null, null)
|
||||
history.pushState(appState, null, `#${appState.thisField}`)
|
||||
}
|
||||
if (e.target.closest(".block-height") && prevField !== e.target.textContent) {
|
||||
render("block_page", e.target.textContent);
|
||||
@ -823,7 +894,7 @@
|
||||
page: "block_page",
|
||||
thisField: e.target.textContent
|
||||
};
|
||||
history.pushState(appState, null, null);
|
||||
history.pushState(appState, null, `#${e.target.textContent}`);
|
||||
}
|
||||
if (e.target.closest(".contract") && prevField !== e.target.textContent) {
|
||||
render("contract_page", { name: replaceSpace(e.target.textContent), address: e.target.dataset.contractAddress })
|
||||
@ -831,13 +902,18 @@
|
||||
page: "contract_page",
|
||||
thisField: { name: replaceSpace(e.target.textContent), address: e.target.dataset.contractAddress },
|
||||
}
|
||||
history.pushState(appState, null, null)
|
||||
history.pushState(appState, null, `#${e.target.textContent}`)
|
||||
}
|
||||
if (e.target.closest(".tab")) {
|
||||
showTab(e.target.closest(".tab"));
|
||||
}
|
||||
if (e.target.closest("#secondary_search_btn")) {
|
||||
render("homepage")
|
||||
render("search_page")
|
||||
appState = {
|
||||
page: "search_page",
|
||||
thisField: null,
|
||||
}
|
||||
history.pushState(appState, null, null)
|
||||
}
|
||||
if (e.target.closest('.suggestion')) {
|
||||
let searchBox = document.getElementById('main_search_field');
|
||||
@ -850,7 +926,7 @@
|
||||
page: "all_transactions_page",
|
||||
thisField: null,
|
||||
}
|
||||
history.pushState(appState, null, null)
|
||||
history.pushState(appState, null, `#viewalltx`)
|
||||
}
|
||||
if (e.target.closest('#all_blocks_btn')) {
|
||||
render('all_blocks_page')
|
||||
@ -858,7 +934,7 @@
|
||||
page: "all_blocks_page",
|
||||
thisField: null,
|
||||
}
|
||||
history.pushState(appState, null, null)
|
||||
history.pushState(appState, null, `#viewallblocks`)
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -935,6 +1011,23 @@
|
||||
else loader.classList.add("hide-completely");
|
||||
}
|
||||
|
||||
function copyToClipboard(parent) {
|
||||
let input = document.createElement('textarea'),
|
||||
toast = document.getElementById('textCopied'),
|
||||
textToCopy = parent.querySelector('.copy');
|
||||
input.setAttribute('readonly', '');
|
||||
input.setAttribute('style', 'position: absolute; left: -9999px');
|
||||
document.body.appendChild(input);
|
||||
input.value = textToCopy.textContent;
|
||||
input.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(input);
|
||||
toast.classList.remove('hide');
|
||||
setTimeout(() => {
|
||||
toast.classList.add('hide');
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
async function getBannerData() {
|
||||
const response = await fetch(`${tokenapiUrl}/api/v1.0/getSystemData`),
|
||||
data = await response.json(),
|
||||
@ -1505,13 +1598,165 @@
|
||||
confirmations: confirmations
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// THIS TAG CONTAINS CODE REQUIRED FOR THE NAVBAR TO FUNCTION
|
||||
function returnHexaNumber(s) {
|
||||
var regExp = /^[-+]?[0-9A-Fa-f]+\.?[0-9A-Fa-f]*?$/;
|
||||
return (typeof s === 'string' && regExp.test(s));
|
||||
}
|
||||
|
||||
function isInt(n) {
|
||||
return Number(n) === n && n % 1 === 0;
|
||||
}
|
||||
|
||||
function isFloat(n) {
|
||||
return Number(n) === n && n % 1 !== 0;
|
||||
}
|
||||
|
||||
function splitContractNameAddress(value, index) {
|
||||
var tempArray = [];
|
||||
tempArray[0] = value.substring(0, index);
|
||||
tempArray[1] = value.substring(index + 1);
|
||||
return tempArray
|
||||
}
|
||||
|
||||
function categoriseText(text) {
|
||||
|
||||
if (!isNaN(text) && isInt(Number(text))) {
|
||||
//console.log('this is a block number');
|
||||
render("block_page", text);
|
||||
appState = {
|
||||
page: "block_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, `#${text}`)
|
||||
} else if (typeof (text) == 'string') {
|
||||
if (text.length == 34 && text[0] == 'F') {
|
||||
//console.log('data entered is a FLO address');
|
||||
render("address_page", text)
|
||||
appState = {
|
||||
page: "address_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, `#${text}`)
|
||||
} else if (window.ranchimallflo.tokenlist.includes(text)) {
|
||||
//console.log('data entered is a token name');
|
||||
render("token_page", text)
|
||||
appState = {
|
||||
page: "token_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, `#${text}`)
|
||||
} else if (window.ranchimallflo.smartcontractnamelist.includes(text)) {
|
||||
//console.log('data entered is a smart contract name');
|
||||
for (var i = 0; i < window.ranchimallflo.smartcontractnameaddresslist.length; i++) {
|
||||
|
||||
var contractSplit = splitContractNameAddress(window.ranchimallflo.smartcontractnameaddresslist[i], window.ranchimallflo.smartcontractnameaddresslist[i].lastIndexOf('-'));
|
||||
|
||||
if (window.ranchimallflo.smartcontractnamelist.includes(text)) {
|
||||
render("contract_page", contract = {
|
||||
name: '',
|
||||
address: ''
|
||||
})
|
||||
appState = {
|
||||
page: "contract_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, `#${text}`)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
} else if (text.length == 64 && returnHexaNumber(text)) {
|
||||
|
||||
fetch(`${window.tokenapiUrl}/api/v1.0/categoriseString/` + text)
|
||||
.then(function (response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function (myJson) {
|
||||
if (myJson['type'] == 'transaction') {
|
||||
//console.log('data entered is a transaction hash');
|
||||
render("transaction_page", text);
|
||||
appState = {
|
||||
page: "transaction_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, `#${text}`)
|
||||
} else if (myJson['type'] == 'block') {
|
||||
//console.log('data entered is a block hash');
|
||||
render("block_page", text)
|
||||
appState = {
|
||||
page: "block_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, `#${text}`)
|
||||
} else {
|
||||
//console.log('data entered is noise');
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
//console.log('data entered is noise')
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function processNavbarSearch() {
|
||||
userinput = document.getElementById('main_search_field');
|
||||
if (userinput.value != '') {
|
||||
categoriseText(userinput.value, userinput);
|
||||
}
|
||||
}
|
||||
|
||||
async function getAllSuggestions() {
|
||||
window.data = [];
|
||||
window.ranchimallflo = {};
|
||||
let response = await fetch(`${window.tokenapiUrl}/api/v1.0/getTokenSmartContractList`);
|
||||
let myJson = await response.json();
|
||||
|
||||
//console.log('first line of the fetch result');
|
||||
ranchimallflo.tokenlist = myJson['tokens'];
|
||||
ranchimallflo.smartcontractlist = myJson['smartContracts'];
|
||||
ranchimallflo.smartcontractnamelist = [];
|
||||
ranchimallflo.smartcontractnameaddresslist = [];
|
||||
//console.log(ranchimallflo.smartcontractlist.length);
|
||||
for (var i = 0; i < ranchimallflo.smartcontractlist.length; i++) {
|
||||
//ranchimallflo.smartcontractnamelist.append(ranchimallflo.smartcontractlist[i]['contractName']);
|
||||
data.push(ranchimallflo.smartcontractlist[i]['contractName']);
|
||||
ranchimallflo.smartcontractnamelist.push(ranchimallflo.smartcontractlist[i]['contractName']);
|
||||
ranchimallflo.smartcontractnameaddresslist.push(ranchimallflo.smartcontractlist[i]['contractName'] + '-' + ranchimallflo.smartcontractlist[i]['contractAddress']);
|
||||
}
|
||||
|
||||
for (var i = 0; i < ranchimallflo.tokenlist.length; i++) {
|
||||
//ranchimallflo.smartcontractnamelist.append(ranchimallflo.smartcontractlist[i]['contractName']);
|
||||
data.push(ranchimallflo.tokenlist[i]);
|
||||
}
|
||||
|
||||
window.index = new FlexSearch({
|
||||
encode: "advanced",
|
||||
tokenize: "reverse",
|
||||
suggest: true
|
||||
});
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
index.add(i, data[i]);
|
||||
}
|
||||
|
||||
window.suggestion = function (str) {
|
||||
let li = document.createElement('li')
|
||||
li.textContent = str
|
||||
li.tabIndex = 0
|
||||
li.classList.add('suggestion')
|
||||
return li;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Set urls for token and flo Apis -->
|
||||
<script>
|
||||
window.tokenapiUrl = 'https://ranchimallflo.duckdns.org'
|
||||
window.floapiUrl = 'https://flosight.duckdns.org'
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Flex search content -->
|
||||
<script>
|
||||
@ -2536,213 +2781,7 @@
|
||||
}()), this);
|
||||
</script>
|
||||
|
||||
<!-- Navbar functionality -->
|
||||
<script>
|
||||
// THIS TAG CONTAINS CODE REQUIRED FOR THE NAVBAR TO FUNCTION
|
||||
function returnHexaNumber(s) {
|
||||
var regExp = /^[-+]?[0-9A-Fa-f]+\.?[0-9A-Fa-f]*?$/;
|
||||
return (typeof s === 'string' && regExp.test(s));
|
||||
}
|
||||
|
||||
function isInt(n) {
|
||||
return Number(n) === n && n % 1 === 0;
|
||||
}
|
||||
|
||||
function isFloat(n) {
|
||||
return Number(n) === n && n % 1 !== 0;
|
||||
}
|
||||
|
||||
function splitContractNameAddress(value, index) {
|
||||
var tempArray = [];
|
||||
tempArray[0] = value.substring(0, index);
|
||||
tempArray[1] = value.substring(index + 1);
|
||||
return tempArray
|
||||
}
|
||||
|
||||
function categoriseText(text, inputElement) {
|
||||
|
||||
if (!isNaN(text) && isInt(Number(text))) {
|
||||
//console.log('this is a block number');
|
||||
inputElement.value = '';
|
||||
render("block_page", text);
|
||||
appState = {
|
||||
page: "block_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, null)
|
||||
} else if (typeof (text) == 'string') {
|
||||
if (text.length == 34 && text[0] == 'F') {
|
||||
//console.log('data entered is a FLO address');
|
||||
inputElement.value = '';
|
||||
render("address_page", text)
|
||||
appState = {
|
||||
page: "address_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, null)
|
||||
} else if (window.ranchimallflo.tokenlist.includes(text)) {
|
||||
//console.log('data entered is a token name');
|
||||
inputElement.value = '';
|
||||
render("token_page", text)
|
||||
appState = {
|
||||
page: "token_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, null)
|
||||
} else if (window.ranchimallflo.smartcontractnamelist.includes(text)) {
|
||||
//console.log('data entered is a smart contract name');
|
||||
for (var i = 0; i < window.ranchimallflo.smartcontractnameaddresslist.length; i++) {
|
||||
|
||||
var contractSplit = splitContractNameAddress(window.ranchimallflo.smartcontractnameaddresslist[i], window.ranchimallflo.smartcontractnameaddresslist[i].lastIndexOf('-'));
|
||||
|
||||
if (window.ranchimallflo.smartcontractnamelist.includes(text)) {
|
||||
inputElement.value = '';
|
||||
render("contract_page", contract = {
|
||||
name: '',
|
||||
address: ''
|
||||
})
|
||||
appState = {
|
||||
page: "contract_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, null)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
} else if (text.length == 64 && returnHexaNumber(text)) {
|
||||
|
||||
fetch(`${window.tokenapiUrl}/api/v1.0/categoriseString/` + text)
|
||||
.then(function (response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function (myJson) {
|
||||
if (myJson['type'] == 'transaction') {
|
||||
//console.log('data entered is a transaction hash');
|
||||
inputElement.value = '';
|
||||
render("transaction_page", text);
|
||||
appState = {
|
||||
page: "transaction_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, null)
|
||||
} else if (myJson['type'] == 'block') {
|
||||
//console.log('data entered is a block hash');
|
||||
inputElement.value = '';
|
||||
render("block_page", text)
|
||||
appState = {
|
||||
page: "block_page",
|
||||
thisField: text,
|
||||
}
|
||||
history.pushState(appState, null, null)
|
||||
} else {
|
||||
//console.log('data entered is noise');
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
//console.log('data entered is noise')
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function processNavbarSearch() {
|
||||
userinput = document.getElementById('main_search_field');
|
||||
if (userinput.value != '') {
|
||||
categoriseText(userinput.value, userinput);
|
||||
}
|
||||
}
|
||||
|
||||
// function runScriptJs() {
|
||||
// var $cell = $('.card');
|
||||
|
||||
// //open and close card when clicked on card
|
||||
// $cell.find('.js-expander').click(function () {
|
||||
|
||||
// var $thisCell = $(this).closest('.card');
|
||||
|
||||
// if ($thisCell.hasClass('is-collapsed')) {
|
||||
// $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');
|
||||
// $thisCell.removeClass('is-collapsed').addClass('is-expanded');
|
||||
|
||||
// if ($cell.not($thisCell).hasClass('is-inactive')) {
|
||||
// //do nothing
|
||||
// } else {
|
||||
// $cell.not($thisCell).addClass('is-inactive');
|
||||
// }
|
||||
|
||||
// } else {
|
||||
// $thisCell.removeClass('is-expanded').addClass('is-collapsed');
|
||||
// $cell.not($thisCell).removeClass('is-inactive');
|
||||
// }
|
||||
// });
|
||||
|
||||
// //close card when click on cross
|
||||
// $cell.find('.js-collapser').click(function () {
|
||||
|
||||
// var $thisCell = $(this).closest('.card');
|
||||
|
||||
// $thisCell.removeClass('is-expanded').addClass('is-collapsed');
|
||||
// $cell.not($thisCell).removeClass('is-inactive');
|
||||
|
||||
// });
|
||||
// }
|
||||
|
||||
|
||||
// First load
|
||||
// console.log('Cursor right before the first fetch call');
|
||||
|
||||
// loading of global variables which contains name of all tokens and smart contracts
|
||||
|
||||
function getAllSuggestions() {
|
||||
window.data = [];
|
||||
fetch(`${window.tokenapiUrl}/api/v1.0/getTokenSmartContractList`)
|
||||
.then(function (response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function (myJson) {
|
||||
|
||||
//console.log('first line of the fetch result');
|
||||
|
||||
window.ranchimallflo = {};
|
||||
ranchimallflo.tokenlist = myJson['tokens'];
|
||||
ranchimallflo.smartcontractlist = myJson['smartContracts'];
|
||||
ranchimallflo.smartcontractnamelist = [];
|
||||
ranchimallflo.smartcontractnameaddresslist = [];
|
||||
//console.log(ranchimallflo.smartcontractlist.length);
|
||||
for (var i = 0; i < ranchimallflo.smartcontractlist.length; i++) {
|
||||
//ranchimallflo.smartcontractnamelist.append(ranchimallflo.smartcontractlist[i]['contractName']);
|
||||
data.push(ranchimallflo.smartcontractlist[i]['contractName']);
|
||||
ranchimallflo.smartcontractnamelist.push(ranchimallflo.smartcontractlist[i]['contractName']);
|
||||
ranchimallflo.smartcontractnameaddresslist.push(ranchimallflo.smartcontractlist[i]['contractName'] + '-' + ranchimallflo.smartcontractlist[i]['contractAddress']);
|
||||
}
|
||||
|
||||
for (var i = 0; i < ranchimallflo.tokenlist.length; i++) {
|
||||
//ranchimallflo.smartcontractnamelist.append(ranchimallflo.smartcontractlist[i]['contractName']);
|
||||
data.push(ranchimallflo.tokenlist[i]);
|
||||
}
|
||||
|
||||
window.index = new FlexSearch({
|
||||
encode: "advanced",
|
||||
tokenize: "reverse",
|
||||
suggest: true
|
||||
});
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
index.add(i, data[i]);
|
||||
}
|
||||
|
||||
window.suggestion = function (str) {
|
||||
let li = document.createElement('li')
|
||||
li.textContent = str
|
||||
li.tabIndex = 0
|
||||
li.classList.add('suggestion')
|
||||
return li;
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user