RanchiMall/floscout
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.5

Browse Source
This commit is contained in:
sairaj mote 2020-05-16 12:55:19 +05:30
parent 94411bce1d
commit ecb9607160
4 changed files with 400 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
css/main.css
View File

@ -1,4 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
*,
::before,
::after {
@ -10,7 +11,7 @@
}
body {
--primary-color: #1E88E5;
--primary-color: #1565C0;
--text: 17, 17, 17;
--text-light: 100, 100, 100;
--foreground: 255, 255, 255;
@ -23,6 +24,7 @@ body {
}
body[data-theme='dark'] {
--primary-color: #2196F3;
--text: 218, 218, 218;
--text-light: 170, 170, 170;
--foreground: 20, 20, 20;
@ -72,7 +74,7 @@ button {
background: rgba(var(--text), 0.1);
cursor: pointer;
padding: 0.8rem 1.5rem;
color: rgba(var(--text), 1);
color: var(--primary-color);
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
@ -122,6 +124,11 @@ h3 {
letter-spacing: 0.06em;
}
.other-font {
font-family: 'Quicksand', sans-serif;
font-weight: 500;
}
.uppercase {
text-transform: uppercase !important;
}
@ -313,22 +320,31 @@ ul .balance:last-of-type {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
#main_search h1 {
text-align: left;
-ms-flex-item-align: start;
align-self: flex-start;
margin-top: 2rem;
font-weight: 500;
}
#main_search h3 {
line-height: 1.4em;
margin: 1rem 0 2rem 0;
font-weight: 400;
color: rgba(var(--text-light), 1);
}
#main_search .input {
border-radius: 0.5rem;
border: solid 1px rgba(var(--text), 0.12);
}
.input {
position: relative;
display: -ms-grid;
display: grid;
@ -336,17 +352,16 @@ ul .balance:last-of-type {
grid-template-columns: auto 1fr;
z-index: 1;
width: 100%;
margin: 1rem;
margin: 1.5rem 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 1rem;
gap: 1em;
border-radius: 2rem;
background: rgba(var(--text), 0.06);
background: rgba(var(--text), 0.1);
}
#main_search input {
.input input {
border: none;
width: 100%;
background: transparent;
@ -367,8 +382,30 @@ ul .balance:last-of-type {
opacity: 0.8;
}
.icon#back_btn {
margin-right: 1rem;
@-webkit-keyframes flyInLeft {
from {
opacity: 0;
-webkit-transform: translateX(-2rem);
transform: translateX(-2rem);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes flyInLeft {
from {
opacity: 0;
-webkit-transform: translateX(-2rem);
transform: translateX(-2rem);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#highlights {
@ -382,6 +419,7 @@ ul .balance:last-of-type {
}
#highlights .highlight-item {
opacity: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -390,8 +428,7 @@ ul .balance:last-of-type {
-ms-flex-direction: column;
flex-direction: column;
padding: 1.5rem;
border-radius: 0.5rem;
background: rgba(var(--text), 0.06);
border-left: 0.1rem solid rgba(var(--text), 0.2);
}
#highlights .highlight-item .label {
@ -419,18 +456,24 @@ ul .balance:last-of-type {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: token;
-webkit-animation: flyInLeft 0.4s 0.2s forwards;
animation: flyInLeft 0.4s 0.2s forwards;
}
#highlights .highlight-item:nth-of-type(2) {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: total;
-webkit-animation: flyInLeft 0.4s 0.4s forwards;
animation: flyInLeft 0.4s 0.4s forwards;
}
#highlights .highlight-item:nth-of-type(3) {
-ms-grid-row: 2;
-ms-grid-column: 2;
grid-area: wallet;
-webkit-animation: flyInLeft 0.4s 0.6s forwards;
animation: flyInLeft 0.4s 0.6s forwards;
}
#highlights .highlight-item:last-of-type {
@ -438,6 +481,8 @@ ul .balance:last-of-type {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: contract;
-webkit-animation: flyInLeft 0.4s 0.8s forwards;
animation: flyInLeft 0.4s 0.8s forwards;
}
#latest_transaction_section,
@ -464,6 +509,12 @@ ul .balance:last-of-type {
font-weight: 500;
}
#page_header .icon {
height: 2rem;
width: 2rem;
padding: 0.4rem 0 0.4rem 0.4rem;
}
.page {
padding: 1rem 0;
-webkit-animation: fade 0.3s;
@ -580,7 +631,7 @@ p {
grid-template-columns: 1fr auto;
}
.address, .token, .hash, .contract, .block {
.address, .token, .hash, .contract, .block-height {
cursor: pointer;
color: var(--primary-color);
}
@ -675,11 +726,65 @@ p {
}
.transaction h4 {
cursor: pointer;
margin-bottom: 1.5em;
font-weight: 500;
}
.transaction .block,
.transaction h4:first-of-type {
margin-bottom: 1.5rem;
}
#loader_page {
display: -ms-grid;
display: grid;
place-content: center;
height: 100vh;
width: 100vw;
text-align: center;
position: fixed;
z-index: 10;
background: rgba(var(--foreground), 1);
}
#loader_page h4 {
margin-top: 1.5rem;
}
#loader {
-ms-grid-column-align: center;
justify-self: center;
height: 2.5rem;
width: 2.5rem;
-webkit-transform-origin: center;
transform-origin: center;
stroke-dashoffset: 200;
stroke-dasharray: 200;
-webkit-animation: load 2s infinite linear;
animation: load 2s infinite linear;
}
@-webkit-keyframes load {
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -200;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load {
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -200;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@media only screen and (min-width: 640px) {
.margin, .page {
margin: 0 6vw;
@ -688,7 +793,7 @@ p {
margin: 0 4vw;
}
.input {
width: 80vw !important;
width: 60% !important;
}
section header h1 {
font-size: 2rem;
@ -734,15 +839,12 @@ p {
grid-template-columns: repeat(2, 1fr);
}
.transaction {
width: 100%;
display: -ms-grid;
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
-ms-grid-columns: auto 1fr;
grid-template-columns: auto 1fr;
-ms-grid-columns: min-content 1fr;
grid-template-columns: -webkit-min-content 1fr;
grid-template-columns: min-content 1fr;
-ms-grid-rows: auto 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: '. info ' '. info';
@ -769,7 +871,7 @@ p {
margin: 0 8vw;
}
.input {
width: 50vw !important;
width: 50% !important;
}
#highlights {
-ms-grid-columns: (auto)[4];
@ -813,7 +915,7 @@ p {
margin: 0 12vw;
}
.input {
width: 40vw !important;
width: 40% !important;
}
#top_transaction_container {
-ms-grid-columns: (1fr)[4];
@ -835,7 +937,7 @@ p {
min-height: auto;
}
.input {
width: 30vw !important;
width: 30% !important;
}
#top_transaction_container {
-ms-grid-columns: (1fr)[5];
@ -855,8 +957,8 @@ p {
transition: background-color 0.3s;
}
button:hover {
background: rgba(var(--text), 1);
color: var(--background);
background: var(--primary-color);
color: rgba(var(--foreground), 1);
}
.hover {
cursor: pointer;

2
css/main.css.map
View File

File diff suppressed because one or more lines are too long

133
css/main.scss
View File

@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
*,
::before,
::after{
@ -8,7 +9,7 @@
font-family: 'Roboto', sans-serif;
}
body{
--primary-color: #1E88E5;
--primary-color: #1565C0;
--text: 17, 17, 17;
--text-light: 100, 100, 100;
--foreground: 255, 255, 255;
@ -20,6 +21,7 @@ body{
background-size: cover;
}
body[data-theme='dark']{
--primary-color: #2196F3;
--text: 218, 218, 218;
--text-light: 170, 170, 170;
--foreground: 20, 20, 20;
@ -51,7 +53,7 @@ button{
background: rgba(var(--text), 0.1);
cursor: pointer;
padding: 0.8rem 1.5rem;
color: rgba(var(--text), 1);
color: var(--primary-color);
align-self: center;
}
h1{
@ -85,6 +87,10 @@ h3{
overflow-wrap: break-word;
letter-spacing: 0.06em;
}
.other-font{
font-family: 'Quicksand', sans-serif;
font-weight: 500;
}
.uppercase{
text-transform: uppercase !important;
}
@ -224,28 +230,35 @@ ul{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
//text-align: center;
h1{
text-align: left;
align-self: flex-start;
margin-top: 2rem;
font-weight: 500;
}
.input{
position: relative;
display: grid;
grid-template-columns: auto 1fr;
z-index: 1;
width: 100%;
margin: 1rem;
align-items: center;
padding: 1rem;
gap: 1em;
border-radius: 2rem;
background: rgba(var(--text), 0.06);
//border: solid 1px rgba(var(--text), 0.6);
h3{
line-height: 1.4em;
margin: 1rem 0 2rem 0;
font-weight: 400;
color: rgba(var(--text-light), 1);
}
.input{
border-radius: 0.5rem;
border: solid 1px rgba(var(--text), 0.12);
}
}
.input{
position: relative;
display: grid;
grid-template-columns: auto 1fr;
z-index: 1;
width: 100%;
margin: 1.5rem 0;
align-items: center;
padding: 1rem;
gap: 1em;
background: rgba(var(--text), 0.1);
input{
border: none;
width: 100%;
@ -265,8 +278,15 @@ ul{
stroke-linejoin: round;
stroke-width: 6;
opacity: 0.8;
&#back_btn{
margin-right: 1rem;
}
@keyframes flyInLeft{
from{
opacity: 0;
transform: translateX(-2rem);
}
to{
opacity: 1;
transform: none;
}
}
#highlights{
@ -278,12 +298,14 @@ ul{
'contract contract';
gap: 1.5rem;
.highlight-item{
opacity: 0;
display: flex;
flex-direction: column;
padding: 1.5rem;
border-radius: 0.5rem;
background: rgba(var(--text), 0.06);
//border-radius: 0.5rem;
//background: rgba(var(--text), 0.1);
//border: 1px solid rgba(var(--text), 0.2);
border-left: 0.1rem solid rgba(var(--text), 0.2);
.label{
margin-top: auto;
}
@ -302,15 +324,19 @@ ul{
}
&:first-of-type{
grid-area: token;
animation: flyInLeft 0.4s 0.2s forwards;
}
&:nth-of-type(2){
grid-area: total;
animation: flyInLeft 0.4s 0.4s forwards;
}
&:nth-of-type(3){
grid-area: wallet;
animation: flyInLeft 0.4s 0.6s forwards;
}
&:last-of-type{
grid-area: contract;
animation: flyInLeft 0.4s 0.8s forwards;
}
}
}
@ -329,6 +355,11 @@ ul{
h3{
font-weight: 500;
}
.icon{
height: 2rem;
width: 2rem;
padding: 0.4rem 0 0.4rem 0.4rem;
}
}
.page{
padding: 1rem 0;
@ -417,7 +448,7 @@ p{
grid-template-columns: 1fr auto;
}
}
.address, .token, .hash, .contract, .block{
.address, .token, .hash, .contract, .block-height{
cursor: pointer;
color: var(--primary-color);
}
@ -481,10 +512,44 @@ p{
//border: solid 1px rgba(var(--text), 0.1);
background: rgba(var(--text), 0.06);
h4{
cursor: pointer;
margin-bottom: 1.5em;
font-weight: 500;
}
.block,
h4:first-of-type{
margin-bottom: 1.5rem;
}
}
#loader_page{
display: grid;
place-content: center;
height: 100vh;
width: 100vw;
text-align: center;
position: fixed;
z-index: 10;
background: rgba(var(--foreground), 1);
h4{
margin-top: 1.5rem;
}
}
#loader{
justify-self: center;
height: 2.5rem;
width: 2.5rem;
transform-origin: center;
stroke-dashoffset: 200;
stroke-dasharray: 200;
animation: load 2s infinite linear;
}
@keyframes load{
50%{
stroke-dashoffset: 0;
}
100%{
stroke-dashoffset: -200;
transform: rotate(360deg);
}
}
@media only screen and (min-width: 640px){
.margin, .page{
@ -494,7 +559,7 @@ p{
margin: 0 4vw;
}
.input{
width: 80vw !important;
width: 60% !important;
}
section{
header{
@ -537,12 +602,10 @@ p{
#top_transaction_container{
grid-template-columns: repeat(2, 1fr);
}
.transaction{
width: 100%;
.transaction{
display: grid;
align-items: center;
gap: 1rem;
grid-template-columns: auto 1fr;
grid-template-columns: min-content 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: '. info '
'. info';
@ -564,7 +627,7 @@ p{
margin: 0 8vw;
}
.input{
width: 50vw !important;
width: 50% !important;
}
#highlights{
grid-template-columns: repeat(4, auto);
@ -599,7 +662,7 @@ p{
margin: 0 12vw;
}
.input{
width: 40vw !important;
width: 40% !important;
}
#top_transaction_container{
grid-template-columns: repeat(4, 1fr);
@ -619,7 +682,7 @@ p{
min-height: auto;
}
.input{
width: 30vw !important;
width: 30% !important;
}
#top_transaction_container{
grid-template-columns: repeat(5, 1fr);
@ -634,8 +697,8 @@ p{
button{
transition: background-color 0.3s;
&:hover{
background: rgba(var(--text), 1);
color: var(--background);
background: var(--primary-color);
color: rgba(var(--foreground), 1)
}
}
.hover{

231
index.html
View File

@ -7,27 +7,38 @@
<link rel="stylesheet" href="css/main.css">
</head>
<body data-theme='dark'>
<main>
<div id="page_container">
<header id="page_header" class="flex margin">
<svg class="icon hover" onclick="render('homepage')" id="back_btn" viewBox="0 0 32.5 64">
<title>Back Button</title>
<polyline points="32.15 0.35 0.7 31.8 32.15 63.72"/>
</svg>
<h3 id="page_title">Block</h3>
<svg class="icon margin-left-auto" viewBox="0 0 64 64">
<div id="loader_page" class="hide-completely">
<svg id="loader" class="icon" viewBox="0 0 64 64">
<title>Loading</title>
<circle cx="32" cy="32" r="32"/>
</svg>
<h4>Loading</h4>`
</div>
<header id="page_header" class="flex margin">
<h3 id="page_title">Block</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</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>
</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>
</header>
<input type="search" placeholder="Search block, transactions, address, token or contract">
</label>
</div>
<div id="all_transations" class="">
</div>
<div id="all_blocks" class="">
</div>
</div>
</div> -->
</main>
<script>
@ -71,15 +82,15 @@
</label>
</header>
<div id="main_search">
<h1>FLO SCOUT</h1>
<label class="input margin">
<h1 class="other-font">FLO SCOUT</h1>
<h3>Search for<br>block, transaction, address,<br>token and contract</h3>
<label id="primary_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">
<input type="search" placeholder="Search">
</label>
</div>
<div id="highlights">
@ -127,7 +138,7 @@
page.id = 'block_page'
page.innerHTML = `
<h5 class="label">Block Height</h5>
<h2 class="block">${blockHeight}</h2>
<h2 class="block-height">${blockHeight}</h2>
<div class="card">
<h4>1 Transaction</h4>
<h5 class="label">${size}</h5>
@ -145,8 +156,9 @@
</div>`
return page;
},
addressPage: function(balance, address){
let page = document.createElement('div')
addressPage: function(obj){
let {balance, address} = obj,
page = document.createElement('div')
page.classList.add('page')
page.id = 'address_page'
page.innerHTML = `
@ -194,8 +206,8 @@
</div>
</div>
<div class="card">
<h4>Block</h4>
<h5 class="label block">${blockHeight}}</h5>
<h5 class="label">Block</h5>
<h4 class="block-height">${blockHeight}</h4>
<h5 class="label">Amount</h5>
<h4>${amount}</h4>
<h5 class="label">Sender</h5>
@ -304,13 +316,13 @@
contractTransferCard: function(obj){
let {hash, blockHeight, token, sender, receiver, amount, contractName, userChoice} = obj,
card = document.createElement('div');
card.classList.add('transaction token-transfer')
card.classList.add('transaction', 'token-transfer')
card.id = hash;
card.innerHTML = `
<h5 class="label block">${blockHeight}</h5>
<h5 class="label block-height">${blockHeight}</h5>
<div class="contract-type">
<h5 class="label">Smart Contract Transfer</h5>
<h2 class="token uppercase">${token}</h2>
<h4 class="token uppercase">${token}</h4>
</div>
<div class="contract-info">
<h5 class="label">Sender</h5>
@ -318,7 +330,7 @@
<h5 class="label">receiver</h5>
<h4 class="address">${receiver}</h4>
<h5 class="label">amount</h5>
<h3>${amount} ${token}</h3>
<h4>${amount} ${token}</h4>
<h5 class="label">Contract name</h5>
<h4>${contractName}</h4>`
if(userChoice)
@ -332,13 +344,13 @@
tokenTransferCard: function(obj){
let {hash, blockHeight, token, sender, receiver, amount} = obj,
card = document.createElement('div');
card.classList.add('transaction token-transfer')
card.classList.add('transaction','token-transfer')
card.id = hash;
card.innerHTML = `
<h5 class="label block">${blockHeight}</h5>
<h5 class="label block-height">${blockHeight}</h5>
<div class="contract-type">
<h5 class="label">Token transfer</h5>
<h2 class="token uppercase">${token}</h2>
<h4 class="token uppercase">${token}</h4>
</div>
<div class="contract-info">
<h5 class="label">Sender</h5>
@ -346,20 +358,20 @@
<h5 class="label">receiver</h5>
<h4 class="address">${receiver}</h4>
<h5 class="label">amount</h5>
<h3>${amount} ${token}</h3>
<h4>${amount} ${token}</h4>
</div>`;
return card;
},
tokenCreationCard: function(obj){
let {hash, blockHeight, token, incAddress, supply} = obj,
card = document.createElement('div');
card.classList.add('transaction token-creation')
card.classList.add('transaction', 'token-creation')
card.id = hash;
card.innerHTML = `
<h5 class="label block">${blockHeight}</h5>
<h5 class="label block-height">${blockHeight}</h5>
<div class="contract-type">
<h5 class="label">token creation</h5>
<h2 class="token uppercase">${token}</h2>
<h4 class="token uppercase">${token}</h4>
</div>
<div class="contract-info">
<h5 class="label">Incorporation address</h5>
@ -374,12 +386,12 @@
contractTriggerCard: function(obj){
let {hash, blockHeight, contractName, contractAddress, winningChoice, committeeAddress} = obj,
card = document.createElement('div');
card.classList.add('transaction contract-trigger')
card.classList.add('transaction', 'contract-trigger')
card.id = hash;
card.innerHTML = `
<h5 class="label block">${blockHeight}</h5>
<h5 class="label block-height">${blockHeight}</h5>
<div class="contract-type">
<h2 class="token uppercase">smart contract trigger</h2>
<h4 class="token uppercase">smart contract trigger</h4>
</div>
<div class="contract-info">
<h5 class="label">Contract name</h5>
@ -396,13 +408,13 @@
contractCreationCard: function(obj){
let {hash, blockHeight, token, contractName, incAddress, contractType, expiration, participationFees, availableChoices} = obj,
card = document.createElement('div');
card.classList.add('transaction contract-creation')
card.classList.add('transaction', 'contract-creation')
card.id = hash;
card.innerHTML = `
<h5 class="label block">${blockHeight}</h5>
<h5 class="label block-height">${blockHeight}</h5>
<div class="contract-type">
<h2 class="token uppercase">${token}</h2>
<h5 class="label">Smart Contract creation</h5>
<h4 class="token uppercase">${token}</h4>
</div>
<div class="contract-info">
<h5 class="label">Contract name</h5>
@ -419,9 +431,10 @@
<h4>${participationFees} ${token}</h4>
<h5 class="label">user Choices</h5>
<div class="choices-container">`;
availableChoices.forEach(choice => {
card.innerHTML = `<div class="choice">${choice}</div>`
})
if(availableChoices )
availableChoices.forEach(choice => {
card.innerHTML = `<div class="choice">${choice}</div>`
})
card.innerHTML +=` </div>
</div>`;
return card;
@ -431,22 +444,42 @@
const pageTitle = document.getElementById('page_title'),
pageContainer = document.getElementById('page_container'),
pageHeader = document.getElementById('page_header');
let currentPage = 'homepage'
let currentPage = 'homepage',
prevField = '';
function removePage(page){
document.getElementById(page).remove()
function removePage(){
if(pageContainer.firstElementChild)
pageContainer.firstElementChild.remove()
}
function replaceDash(string){
return string.replace(/-/g," ")
}
function render(pageId){
if(currentPage !== pageId)
removePage(currentPage)
let appState = {
page: 'homepage',
thisField: null
}
window.onpopstate = e => {
if(e.state !== null){
let {page, thisField} = e.state
render(page, thisField)
}
}
async function render(pageId, field){
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
window.scrollTo(0,0);
removePage(currentPage)
if(pageId === 'address_page'){
pageContainer.append(create.addressPage('0.0001', 'F91a5151a651d1adv56151avdadlkn'))
let data = await getAddressInfo(field)
pageContainer.append(create.addressPage(data))
pageTitle.textContent = 'Address'
}
@ -485,11 +518,41 @@
pageTitle.textContent = 'Contract'
}
if(pageId === 'block_page'){
let obj = {
blockHeight: '4530254',
size: '5161351651 bytes',
transactions: '2',
reward: '1FLO',
amount: '0.1FLO',
nonce: '5161',
difficulty: '654564',
hash: '1ab70a9de6a8deeb0ba8f6c4ca015d60659c90953a7c8a1f3215276fe57b1fb2',
}
pageContainer.append(create.blockPage(obj))
pageTitle.textContent = 'block'
}
if(pageId === 'homepage'){
pageHeader.classList.add('hide-completely')
pageContainer.append(create.homepage({topToken: 'RMT', totalTransactions: '88', walletAddresses: '44', topContract: 'India Election 2019'}))
let data = await getData()
pageContainer.append(create.homepage(data))
let obj = {
type: 'Token Transfer',
name: 'RMT',
blockHeight: '4530254',
amount: '0.1FLO',
sender: 'F846EFefybwewe45avd5165adv16',
receiver: 'F846EFefybwewe45avd5165adv16',
floData: 'transfer 100 rupee# to FJyz51JTnPuB3AMRjyYe3rbuLmnq4qErcc for FCuFeAa3Haqk9oKQWEKVSt4pwQQEooDAEm.',
hash: '1ab70a9de6a8deeb0ba8f6c4ca015d60659c90953a7c8a1f3215276fe57b1fb2',
confirmations: '22458'
}
frag.append(create.contractTransferCard(obj))
frag.append(create.tokenTransferCard(obj))
frag.append(create.tokenCreationCard(obj))
document.getElementById('top_transaction_container').append(frag)
let themeToggler = document.getElementById('theme_toggle'),
body = document.querySelector('body');
if(localStorage.theme === 'dark'){
@ -520,6 +583,8 @@
else
pageHeader.classList.remove('hide-completely')
currentPage = pageId;
prevField = field;
loading()
}
function renderTransactions(){
@ -528,27 +593,42 @@
window.addEventListener('load', () => {
render('homepage')
history.pushState(appState, null, null)
document.querySelector('main').addEventListener('click', e => {
if(e.target.closest('.address')){
render("address_page")
if(e.target.closest('.address') && prevField !== e.target.textContent){
loading(true)
render("address_page", e.target.textContent)
appState = {page: 'address_page', thisField: e.target.textContent};
history.pushState(appState, null, `?address=${e.target.textContent}`)
}
if(e.target.closest('.token')){
render("token_page")
if(e.target.closest('.token') && prevField !== e.target.textContent){
render("token_page", e.target.textContent)
appState = {page: 'token_page', thisField: e.target.textContent};
history.pushState(appState, null, null)
}
if(e.target.closest('.hash')){
render("transaction_page")
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.closest('.block')){
render("block_page")
pageTitle.textContent = 'Block'
if(e.target.closest('.block-height') && prevField !== e.target.textContent){
render("block_page", e.target.textContent)
appState = {page: 'block_page', thisField: e.target.textContent};
history.pushState(appState, null, null)
}
if(e.target.closest('.contract')){
render("contract_page")
if(e.target.closest('.contract') && prevField !== e.target.textContent){
render("contract_page", e.target.textContent)
appState = {page: 'contract_page', thisField: e.target.textContent};
history.pushState(appState, null, null)
}
if(e.target.closest('.tab')){
showTab(e.target.closest('.tab'))
}
if(e.target.closest('#secondary_search')){
render('homepage')
document.getElementById('primary_search').click()
}
})
})
@ -567,6 +647,33 @@
})
tab.classList.add('active')
}
let loader = document.getElementById('loader_page')
function loading(status){
if(status)
loader.classList.remove('hide-completely')
else
loader.classList.add('hide-completely')
}
function getData(){
return new Promise(resolve => {
let obj = {topToken: 'RMT', totalTransactions: '88', walletAddresses: '44', topContract: 'India Election 2019'}
setTimeout(() => {
resolve(obj)
}, 100)
})
}
function getAddressInfo(thisAddress){
return new Promise(resolve => {
let obj = {balance: '0.0001', address: thisAddress}
setTimeout(() => {
resolve(obj)
}, 2000)
})
}
</script>
</body>
</html>