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

v1.0.4

Browse Source
This commit is contained in:
sairaj mote 2020-05-15 17:39:58 +05:30
parent d88557ca59
commit 94411bce1d
4 changed files with 453 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
css/main.css
View File

@ -12,17 +12,14 @@
body {
--primary-color: #1E88E5;
--text: 17, 17, 17;
--text-light: 85, 85, 85;
--text-light: 100, 100, 100;
--foreground: 255, 255, 255;
--background: #efefef;
--dark-shade: #dadada;
font-size: 16px;
color: rgba(var(--text), 1);
background: rgba(var(--foreground), 1);
}
body h5 {
font-weight: 500;
background-size: cover;
}
body[data-theme='dark'] {
@ -33,10 +30,6 @@ body[data-theme='dark'] {
--dark-shade: #1a1a1a;
}
body[data-theme='dark'] h5 {
font-weight: 400;
}
input[type=text]::-ms-clear {
display: none;
width: 0;
@ -91,6 +84,7 @@ h1 {
h2 {
font-size: 2rem;
font-weight: 500;
}
h3 {
@ -129,7 +123,7 @@ h3 {
}
.uppercase {
text-transform: uppercase;
text-transform: uppercase !important;
}
.toggle {
@ -248,23 +242,29 @@ ul .balance:last-of-type {
text-transform: capitalize;
}
.card h2 {
margin-bottom: 1.5rem;
}
.label {
text-transform: capitalize;
font-size: 0.8rem;
margin-bottom: 0.3rem;
line-height: 1.4em;
opacity: 0.7;
color: rgba(var(--text-light), 1);
margin-top: 1.5rem;
font-weight: 400;
}
.label:first-of-type {
margin-top: 0;
}
.label + h4:not(.address) {
text-transform: capitalize;
}
.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
@ -322,14 +322,7 @@ ul .balance:last-of-type {
text-align: center;
}
#main_search p {
opacity: 0.6;
text-align: left;
margin: 1rem 1.5rem 1.5rem 1.5rem;
}
#main_search h1 {
font-size: 4rem;
text-align: left;
margin-top: 2rem;
font-weight: 500;
@ -349,7 +342,7 @@ ul .balance:last-of-type {
align-items: center;
padding: 1rem;
gap: 1em;
border-radius: 0.5rem;
border-radius: 2rem;
background: rgba(var(--text), 0.06);
}
@ -370,12 +363,8 @@ ul .balance:last-of-type {
stroke: rgba(var(--text), 1);
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.5;
stroke-width: 6;
}
.icon.search line {
stroke-width: 8;
opacity: 0.8;
}
.icon#back_btn {
@ -417,10 +406,6 @@ ul .balance:last-of-type {
overflow-wrap: break-word;
}
#highlights .highlight-item:first-of-type, #highlights .highlight-item:last-of-type {
cursor: pointer;
}
#highlights .highlight-item:first-of-type {
text-transform: uppercase;
}
@ -455,100 +440,21 @@ ul .balance:last-of-type {
grid-area: contract;
}
#top_transaction_container {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(20rem, 1fr))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
gap: 1.5em;
padding-bottom: 2em;
padding-top: 2em;
}
.transaction {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 1.5rem;
border-radius: 0.5rem;
background: rgba(var(--text), 0.06);
}
.transaction .transaction-header {
margin-bottom: 2em;
-ms-grid-columns: auto 1fr;
grid-template-columns: auto 1fr;
}
.transaction .transaction-header h5 {
text-transform: capitalize;
}
.transaction .transaction-header h2 {
text-transform: uppercase;
margin-top: 0.2em;
letter-spacing: 0.06em;
}
.transaction .transaction-header .icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.transaction .transaction-header .icon svg {
height: 1.5em;
width: 1.5em;
opacity: 0.6;
margin-left: auto;
cursor: pointer;
fill: rgba(var(--text), 1);
}
.transaction .transaction-header .icon svg:hover {
opacity: 1;
}
.transaction h5 {
text-transform: uppercase;
margin-bottom: 0.4em;
opacity: 0.8;
font-size: 0.8em;
}
.transaction h4 {
cursor: pointer;
margin-bottom: 1.5em;
font-weight: 500;
}
.transaction h4:hover {
-webkit-filter: brightness(150%);
filter: brightness(150%);
}
.transaction h3 {
margin-top: 2em;
text-align: right;
}
#latest_transaction_section {
#latest_transaction_section,
#latest_blocks_section {
background: rgba(var(--foreground), 1);
}
#latest_transaction_section header {
#latest_transaction_section header,
#latest_blocks_section header {
-ms-grid-columns: 1fr auto;
grid-template-columns: 1fr auto;
position: -webkit-sticky;
position: sticky;
top: 0;
background: inherit;
z-index: 2;
}
#page_header {
padding: 1.5rem 0;
padding: 1rem 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
@ -559,10 +465,17 @@ ul .balance:last-of-type {
}
.page {
padding: 1.5rem 0;
padding: 1rem 0;
-webkit-animation: fade 0.3s;
animation: fade 0.3s;
}
.page h3.heading {
text-transform: capitalize;
font-weight: 500;
}
.page > h3.heading {
margin-top: 2rem;
}
@ -605,7 +518,12 @@ p {
letter-spacing: 0.1em;
}
.status {
.balance-card .label {
color: white;
opacity: 0.7;
}
.choice, .status {
padding: 0.5rem 0.8rem;
border-radius: 2rem;
display: -webkit-inline-box;
@ -614,10 +532,29 @@ p {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
.choice-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.choice {
border: solid 1px rgba(var(--text), 0.2);
}
.choice:last-of-type {
margin-bottom: 0;
}
.status {
font-size: 0.8rem;
}
.status.done {
background: #00C853;
-ms-flex-item-align: center;
@ -631,7 +568,6 @@ p {
height: 1em;
width: 1em;
stroke: white;
opacity: 1;
}
.status.closed {
@ -649,6 +585,11 @@ p {
color: var(--primary-color);
}
.address {
text-transform: none !important;
word-break: break-all;
}
.tabs {
position: relative;
margin-top: 2rem;
@ -695,6 +636,50 @@ p {
margin: 0 1.5rem;
}
@-webkit-keyframes fade {
from {
opacity: 0;
-webkit-transform: translateY(1rem);
transform: translateY(1rem);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fade {
from {
opacity: 0;
-webkit-transform: translateY(1rem);
transform: translateY(1rem);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#top_transaction_container {
display: -ms-grid;
display: grid;
gap: 1.5em;
}
.transaction {
padding: 1.5rem;
border-radius: 0.5rem;
background: rgba(var(--text), 0.06);
}
.transaction h4 {
cursor: pointer;
margin-bottom: 1.5em;
font-weight: 500;
}
@media only screen and (min-width: 640px) {
.margin, .page {
margin: 0 6vw;
@ -741,6 +726,39 @@ p {
-ms-grid-column: 2;
grid-area: contract;
}
#page_header {
padding: 1.5rem 0;
}
#top_transaction_container {
-ms-grid-columns: (1fr)[2];
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-rows: auto 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: '. info ' '. info';
}
.transaction .contract-type {
-ms-flex-item-align: start;
align-self: flex-start;
}
.transaction .contract-info {
padding-left: 1rem;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 2;
grid-area: info;
border-left: 1px solid rgba(var(--text), 0.2);
}
}
@media only screen and (min-width: 1280px) {
@ -778,6 +796,10 @@ p {
-ms-grid-column: 4;
grid-area: contract;
}
#top_transaction_container {
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (min-width: 1920px) {
@ -790,6 +812,13 @@ p {
#homepage {
margin: 0 12vw;
}
.input {
width: 40vw !important;
}
#top_transaction_container {
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
}
}
@media only screen and (min-width: 2048px) {
@ -805,6 +834,13 @@ p {
#first_section {
min-height: auto;
}
.input {
width: 30vw !important;
}
#top_transaction_container {
-ms-grid-columns: (1fr)[5];
grid-template-columns: repeat(5, 1fr);
}
}
@media only screen and (max-width: 320px) {
@ -822,8 +858,15 @@ p {
background: rgba(var(--text), 1);
color: var(--background);
}
#logo {
.hover {
cursor: pointer;
}
.tab {
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.tab:hover {
opacity: 1;
}
}
/*# sourceMappingURL=main.css.map */

2
css/main.css.map
View File

File diff suppressed because one or more lines are too long

209
css/main.scss
View File

@ -10,16 +10,14 @@
body{
--primary-color: #1E88E5;
--text: 17, 17, 17;
--text-light: 85, 85, 85;
--text-light: 100, 100, 100;
--foreground: 255, 255, 255;
--background: #efefef;
--dark-shade: #dadada;
font-size: 16px;
color: rgba(var(--text), 1);
background: rgba(var(--foreground), 1);
h5{
font-weight: 500;
}
background-size: cover;
}
body[data-theme='dark']{
--text: 218, 218, 218;
@ -27,9 +25,6 @@ body[data-theme='dark']{
--foreground: 20, 20, 20;
--background: #111;
--dark-shade: #1a1a1a;
h5{
font-weight: 400;
}
}
input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
@ -64,6 +59,7 @@ h1{
}
h2{
font-size: 2rem;
font-weight: 500;
}
h3{
font-size: 1.5rem;
@ -90,7 +86,7 @@ h3{
letter-spacing: 0.06em;
}
.uppercase{
text-transform: uppercase;
text-transform: uppercase !important;
}
.toggle{
position: relative;
@ -179,21 +175,26 @@ ul{
font-weight: 400;
text-transform: capitalize;
}
h2{
margin-bottom: 1.5rem;
}
}
.label{
text-transform: capitalize;
font-size: 0.8rem;
margin-bottom: 0.3rem;
line-height: 1.4em;
opacity: 0.7;
color: rgba(var(--text-light), 1);
margin-top: 1.5rem;
font-weight: 400;
&:first-of-type{
margin-top: 0;
}
&+h4:not(.address){
text-transform: capitalize;
}
}
.header{
display: flex;
align-items: center;
padding: 2em 0;
}
@ -226,13 +227,7 @@ ul{
align-items: center;
justify-content: center;
text-align: center;
p{
opacity: 0.6;
text-align: left;
margin: 1rem 1.5rem 1.5rem 1.5rem;
}
h1{
font-size: 4rem;
text-align: left;
margin-top: 2rem;
font-weight: 500;
@ -247,7 +242,7 @@ ul{
align-items: center;
padding: 1rem;
gap: 1em;
border-radius: 0.5rem;
border-radius: 2rem;
background: rgba(var(--text), 0.06);
//border: solid 1px rgba(var(--text), 0.6);
}
@ -268,11 +263,8 @@ ul{
stroke: rgba(var(--text), 1);
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.5;
stroke-width: 6;
&.search line{
stroke-width: 8;
}
opacity: 0.8;
&#back_btn{
margin-right: 1rem;
}
@ -302,9 +294,6 @@ ul{
text-transform: uppercase;
overflow-wrap: break-word;
}
&:first-of-type,&:last-of-type{
cursor: pointer;
}
&:first-of-type{
text-transform: uppercase;
}
@ -325,85 +314,30 @@ ul{
}
}
}
#top_transaction_container{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
gap: 1.5em;
padding-bottom: 2em;
padding-top: 2em;
}
.transaction{
flex-direction: column;
padding: 1.5rem;
border-radius: 0.5rem;
//border: solid 1px rgba(var(--text), 0.1);
background: rgba(var(--text), 0.06);
.transaction-header{
margin-bottom: 2em;
grid-template-columns: auto 1fr;
h5{
text-transform: capitalize;
}
h2{
text-transform: uppercase;
margin-top: 0.2em;
letter-spacing: 0.06em;
}
.icon{
display: flex;
svg{
height: 1.5em;
width: 1.5em;
opacity: 0.6;
margin-left: auto;
cursor: pointer;
fill: rgba(var(--text), 1);
&:hover{
opacity: 1;
}
}
}
}
h5{
text-transform: uppercase;
margin-bottom: 0.4em;
opacity: 0.8;
font-size: 0.8em;
}
h4{
cursor: pointer;
margin-bottom: 1.5em;
font-weight: 500;
&:hover{
filter: brightness(150%);
}
}
h3{
margin-top: 2em;
text-align: right;
}
}
#latest_transaction_section{
#latest_transaction_section,
#latest_blocks_section{
background: rgba(var(--foreground), 1);
header{
grid-template-columns: 1fr auto;
position: sticky;
top: 0;
background: inherit;
z-index: 2;
}
}
#page_header{
padding: 1.5rem 0;
padding: 1rem 0;
align-items: center;
h3{
font-weight: 500;
}
}
.page{
padding: 1.5rem 0;
padding: 1rem 0;
animation: fade 0.3s;
h3.heading{
text-transform: capitalize;
font-weight: 500;
}
& > h3.heading{
margin-top: 2rem;
}
}
@ -438,14 +372,30 @@ p{
opacity: 0.8;
letter-spacing: 0.1em;
}
.label{
color: white;
opacity: 0.7;
}
}
.status{
.choice,.status{
padding: 0.5rem 0.8rem;
border-radius: 2rem;
display: inline-flex;
align-items: center;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
.choice-container{
display: flex;
flex-wrap: wrap;
}
.choice{
border: solid 1px rgba(var(--text), 0.2);
&:last-of-type{
margin-bottom: 0;
}
}
.status{
font-size: 0.8rem;
&.done{
background: #00C853;
align-self: center;
@ -455,7 +405,6 @@ p{
height: 1em;
width: 1em;
stroke: white;
opacity: 1;
}
}
&.closed{
@ -472,6 +421,10 @@ p{
cursor: pointer;
color: var(--primary-color);
}
.address{
text-transform: none !important;
word-break: break-all;
}
.tabs{
position: relative;
margin-top: 2rem;
@ -508,6 +461,31 @@ p{
#homepage{
margin: 0 1.5rem;
}
@keyframes fade{
from{
opacity: 0;
transform: translateY(1rem);
}
to{
opacity: 1;
transform: none;
}
}
#top_transaction_container{
display: grid;
gap: 1.5em;
}
.transaction{
padding: 1.5rem;
border-radius: 0.5rem;
//border: solid 1px rgba(var(--text), 0.1);
background: rgba(var(--text), 0.06);
h4{
cursor: pointer;
margin-bottom: 1.5em;
font-weight: 500;
}
}
@media only screen and (min-width: 640px){
.margin, .page{
margin: 0 6vw;
@ -553,6 +531,30 @@ p{
}
}
}
#page_header{
padding: 1.5rem 0;
}
#top_transaction_container{
grid-template-columns: repeat(2, 1fr);
}
.transaction{
width: 100%;
display: grid;
align-items: center;
gap: 1rem;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: '. info '
'. info';
.contract-type{
align-self: flex-start;
}
.contract-info{
padding-left: 1rem;
grid-area: info;
border-left: 1px solid rgba(var(--text), 0.2);
}
}
}
@media only screen and (min-width: 1280px){
.margin, .page{
@ -582,6 +584,9 @@ p{
}
}
}
#top_transaction_container{
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (min-width: 1920px){
body{
@ -593,6 +598,12 @@ p{
#homepage{
margin: 0 12vw;
}
.input{
width: 40vw !important;
}
#top_transaction_container{
grid-template-columns: repeat(4, 1fr);
}
}
@media only screen and (min-width: 2048px){
body{
@ -607,6 +618,12 @@ p{
#first_section{
min-height: auto;
}
.input{
width: 30vw !important;
}
#top_transaction_container{
grid-template-columns: repeat(5, 1fr);
}
}
@media only screen and (max-width: 320px){
body{
@ -621,7 +638,13 @@ p{
color: var(--background);
}
}
#logo{
.hover{
cursor: pointer;
}
.tab{
transition: opacity 0.3s;
&:hover{
opacity: 1;
}
}
}

226
index.html
View File

@ -10,12 +10,12 @@
<main>
<div id="page_container">
<header id="page_header" class="flex margin">
<svg class="icon" onclick="render('homepage')" id="back_btn" viewBox="0 0 32.5 64">
<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 search margin-left-auto" viewBox="0 0 64 64">
<svg class="icon margin-left-auto" 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"/>
@ -40,7 +40,7 @@
page.id = 'homepage'
page.innerHTML = `
<section id="first_section">
<header class="header">
<header class="header flex">
<div id="logo">
<svg id="main_logo" viewBox="0 0 27.25 32">
<title>RanchiMall</title>
@ -76,10 +76,10 @@
<label class="input margin">
<svg class="icon" viewBox="0 0 64 64">
<title>search icon</title>
<path d="M24,1.58A22.15,22.15,0,0,1,39.68,39.39,22.15,22.15,0,0,1,8.36,8.07,22,22,0,0,1,24,1.58M24,0A23.73,23.73,0,1,0,40.8,7,23.65,23.65,0,0,0,24,0Z" transform="translate(-0.3 0)"/>
<line x1="63.35" y1="63.35" x2="39.86" y2="39.86"/>
<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">
<input type="search" placeholder="Search block, transactions, address, token or contract">
</label>
</div>
<div id="highlights">
@ -97,32 +97,24 @@
</div>
<div class="highlight-item">
<h4 class="label">top contract</h4>
<h2>${topContract}</h2>
<h2 class="contract">${topContract}</h2>
</div>
</div>
</section>
<section id="latest_transaction_section">
<header class="grid grid-2 header">
<h3>Latest transactions</h3>
<button class="margin-left-auto">all</button>
<h3 class="heading">Latest transactions</h3>
<button id='all_trans_btn' class="margin-left-auto">view all</button>
</header>
<div id="top_transaction_container">
<div class="transaction">
<div class="transaction-header grid grid-2">
<div>
<h5>Token transfer</h5>
<h2 class="token">Rupee</h2>
</div>
<svg class="icon" viewBox="0 0 64 64">
<title>More infomation icon</title>
<path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
</svg>
</div>
<h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h5>to</h5>
<h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
<h3>₹0.000000007</h3>
</div>
</div>
</section>
<section id="latest_blocks_section">
<header class="grid grid-2 header">
<h3 class="heading">Latest blocks</h3>
<button id='all_blocks_btn' class="margin-left-auto">view all</button>
</header>
<div id="top_blocks_container">
</div>
</section>
`
@ -183,7 +175,7 @@
return page;
},
transactionPage: function(obj){
let {type, name, blockHeight, amount, sender, reciever, floData, hash, confirmations} = obj,
let {type, name, blockHeight, amount, sender, receiver, floData, hash, confirmations} = obj,
page = document.createElement('div')
page.classList.add('page')
page.id = 'transaction_page'
@ -207,9 +199,9 @@
<h5 class="label">Amount</h5>
<h4>${amount}</h4>
<h5 class="label">Sender</h5>
<h4 class="breakable address">${sender}</h4>
<h4 class="address">${sender}</h4>
<h5 class="label">Reciever</h5>
<h4 class="breakable address">${reciever}</h4>
<h4 class="address">${receiver}</h4>
</div>
<div class="card">
<h5 class="label">FLO Data</h5>
@ -227,8 +219,8 @@
page.classList.add('page')
page.id = 'token_page'
page.innerHTML = `
<h2 class="uppercase">${token}</h2>
<div class="card">
<h2 class="uppercase">${token}</h2>
<h5 class="label">Supply</h5>
<h4>${supply}</h4>
<h5 class="label">Incorporation Address</h5>
@ -259,7 +251,7 @@
return page;
},
contractPage: function(obj){
let {contract, contractType, incAddress, expiration,token, participationFees} = obj,
let {status, contract, contractType, incAddress, expiration, token, participationFees} = obj,
page = document.createElement('div')
page.classList.add('page')
page.id = 'contract_page'
@ -270,11 +262,11 @@
<h5 class="label">Contract Type</h5>
<h4>${contractType}</h4>
<h5 class="label">Incorporation Address</h5>
<h4 class="breakable address">${incAddress}</h4>
<h4 class="address">${incAddress}</h4>
<h5 class="label">Expiration</h5>
<h4>${expiration}</h4>
<h5 class="label">Token Used</h5>
<h4>${token}</h4>
<h4 class="uppercase">${token}</h4>
<h5 class="label">Participation Amount</h5>
<h4>${participationFees}</h4>
</div>
@ -309,24 +301,129 @@
`
return page;
},
transactionCard: function(block, type, name, sender, reciever, amount){
let card = document.createElement('div');
card.classList.add('transaction')
card.id = block;
card.innerHTML = `<div class="transaction-header grid grid-2">
<div>
<h5>${type}</h5>
<h2 class="token">${name}</h2>
</div>
<svg class="icon margin-left-auto" viewBox="0 0 64 64">
<title>More infomation icon</title>
<path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
</svg>
contractTransferCard: function(obj){
let {hash, blockHeight, token, sender, receiver, amount, contractName, userChoice} = obj,
card = document.createElement('div');
card.classList.add('transaction token-transfer')
card.id = hash;
card.innerHTML = `
<h5 class="label block">${blockHeight}</h5>
<div class="contract-type">
<h5 class="label">Smart Contract Transfer</h5>
<h2 class="token uppercase">${token}</h2>
</div>
<h4 class="breakable address">${sender}</h4>
<h5>to</h5>
<h4 class="breakable address">${reciever}</h4>
<h3>₹${amount}</h3>`;
<div class="contract-info">
<h5 class="label">Sender</h5>
<h4 class="address">${sender}</h4>
<h5 class="label">receiver</h5>
<h4 class="address">${receiver}</h4>
<h5 class="label">amount</h5>
<h3>${amount} ${token}</h3>
<h5 class="label">Contract name</h5>
<h4>${contractName}</h4>`
if(userChoice)
card.innerHTML += `
<h5 class="label">User Choice</h5>
<h4>${userChoice}</h4>`
card.innerHTML += `</div>`;
return card;
},
tokenTransferCard: function(obj){
let {hash, blockHeight, token, sender, receiver, amount} = obj,
card = document.createElement('div');
card.classList.add('transaction token-transfer')
card.id = hash;
card.innerHTML = `
<h5 class="label block">${blockHeight}</h5>
<div class="contract-type">
<h5 class="label">Token transfer</h5>
<h2 class="token uppercase">${token}</h2>
</div>
<div class="contract-info">
<h5 class="label">Sender</h5>
<h4 class="address">${sender}</h4>
<h5 class="label">receiver</h5>
<h4 class="address">${receiver}</h4>
<h5 class="label">amount</h5>
<h3>${amount} ${token}</h3>
</div>`;
return card;
},
tokenCreationCard: function(obj){
let {hash, blockHeight, token, incAddress, supply} = obj,
card = document.createElement('div');
card.classList.add('transaction token-creation')
card.id = hash;
card.innerHTML = `
<h5 class="label block">${blockHeight}</h5>
<div class="contract-type">
<h5 class="label">token creation</h5>
<h2 class="token uppercase">${token}</h2>
</div>
<div class="contract-info">
<h5 class="label">Incorporation address</h5>
<h4>${incAddress}</h4>
<h5 class="label">token name</h5>
<h4 class="uppercase">${token}</h4>
<h5 class="label">supply</h5>
<h4>${supply}</h4>
</div>`;
return card;
},
contractTriggerCard: function(obj){
let {hash, blockHeight, contractName, contractAddress, winningChoice, committeeAddress} = obj,
card = document.createElement('div');
card.classList.add('transaction contract-trigger')
card.id = hash;
card.innerHTML = `
<h5 class="label block">${blockHeight}</h5>
<div class="contract-type">
<h2 class="token uppercase">smart contract trigger</h2>
</div>
<div class="contract-info">
<h5 class="label">Contract name</h5>
<h4>${contractName}</h4>
<h5 class="label">contract address</h5>
<h4 class="address">${contractAddress}</h4>
<h5 class="label">Winning Choice</h5>
<h4>${winningChoice}</h4>
<h5 class="label">committee address</h5>
<h4>${committeeAddress}</h4>
</div>`;
return card;
},
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.id = hash;
card.innerHTML = `
<h5 class="label block">${blockHeight}</h5>
<div class="contract-type">
<h2 class="token uppercase">${token}</h2>
</div>
<div class="contract-info">
<h5 class="label">Contract name</h5>
<h4>${contractName}</h4>
<h5 class="label">Incorporation address</h5>
<h4>${incAddress}</h4>
<h5 class="label">token used</h5>
<h4 class="uppercase">${token}</h4>
<h5 class="label">contract type</h5>
<h4>${contractType}</h4>
<h5 class="label">expiration</h5>
<h4 class="address">${expiration}</h4>
<h5 class="label">participation amount</h5>
<h4>${participationFees} ${token}</h4>
<h5 class="label">user Choices</h5>
<div class="choices-container">`;
availableChoices.forEach(choice => {
card.innerHTML = `<div class="choice">${choice}</div>`
})
card.innerHTML +=` </div>
</div>`;
return card;
}
}
@ -340,6 +437,10 @@
document.getElementById(page).remove()
}
function replaceDash(string){
return string.replace(/-/g," ")
}
function render(pageId){
if(currentPage !== pageId)
removePage(currentPage)
@ -356,8 +457,8 @@
blockHeight: '4530254',
amount: '0.1FLO',
sender: 'F846EFefybwewe45avd5165adv16',
reciever: 'F846EFefybwewe45avd5165adv16',
floData: 'ansfer 100 rupee# to FJyz51JTnPuB3AMRjyYe3rbuLmnq4qErcc for FCuFeAa3Haqk9oKQWEKVSt4pwQQEooDAEm.',
receiver: 'F846EFefybwewe45avd5165adv16',
floData: 'transfer 100 rupee# to FJyz51JTnPuB3AMRjyYe3rbuLmnq4qErcc for FCuFeAa3Haqk9oKQWEKVSt4pwQQEooDAEm.',
hash: '1ab70a9de6a8deeb0ba8f6c4ca015d60659c90953a7c8a1f3215276fe57b1fb2',
confirmations: '22458'
}
@ -370,6 +471,22 @@
pageTitle.textContent = 'Token'
}
if(pageId === 'contract_page'){
let obj = {
stauts: 'closed',
contract: 'india-elections-2019',
contractType: 'one-time-event',
incAddress: 'F7osBpjDDV1mSSnMNrLudEQQ3cwDJ2dPR1',
expiration: 'wed may 22 2019 21:00:00 gmt+0530',
token: 'rmt',
participationFees: '0.001 RMT',
}
pageContainer.append(create.contractPage(obj))
pageTitle.textContent = 'Contract'
}
if(pageId === 'homepage'){
pageHeader.classList.add('hide-completely')
pageContainer.append(create.homepage({topToken: 'RMT', totalTransactions: '88', walletAddresses: '44', topContract: 'India Election 2019'}))
@ -405,6 +522,10 @@
currentPage = pageId;
}
function renderTransactions(){
}
window.addEventListener('load', () => {
render('homepage')
@ -422,9 +543,8 @@
render("block_page")
pageTitle.textContent = 'Block'
}
if(e.target.closest('.block')){
if(e.target.closest('.contract')){
render("contract_page")
pageTitle.textContent = 'Contract '
}
if(e.target.closest('.tab')){
showTab(e.target.closest('.tab'))