|
|
@ -3,7 +3,7 @@ |
|
|
|
<div class="blockchain-container"> |
|
|
|
<div v-if="blocks.length"> |
|
|
|
<!-- transitions for blocks --> |
|
|
|
<transition-group name="blockchain" mode="out-in" tag="ul"> |
|
|
|
<transition-group name="blockchain" mode="out-in" tag="ul" :duration="5000"> |
|
|
|
<li |
|
|
|
href="#" |
|
|
|
class="flex-column align-items-start px-3 px-lg-4 blockchain-block" |
|
|
@ -13,45 +13,25 @@ |
|
|
|
<div class="d-flex w-100 justify-content-between"> |
|
|
|
<div class="d-flex"> |
|
|
|
<div class="blockchain-block-icon"> |
|
|
|
<!-- <svg |
|
|
|
width="28" |
|
|
|
height="30" |
|
|
|
viewBox="0 0 28 30" |
|
|
|
fill="none" |
|
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
|
> |
|
|
|
<path |
|
|
|
d="M23.3472 8.84298C24.6806 8.07317 24.6806 6.14865 23.3472 5.37886L15.0304 0.577324C14.4116 0.220073 13.6493 0.220077 13.0305 0.577333L4.71387 5.37887C3.38053 6.14866 3.38052 8.07316 4.71384 8.84297L13.0304 13.6447C13.6493 14.0019 14.4117 14.0019 15.0305 13.6447L23.3472 8.84298Z" |
|
|
|
fill="#5351FB" |
|
|
|
/> |
|
|
|
<path |
|
|
|
d="M14.9243 26.5359C14.9243 28.0755 16.591 29.0378 17.9243 28.268L26.2443 23.4644C26.8631 23.1072 27.2443 22.4469 27.2443 21.7324V12.1218C27.2443 10.5822 25.5777 9.61992 24.2444 10.3897L15.9243 15.1931C15.3055 15.5504 14.9243 16.2106 14.9243 16.9252V26.5359Z" |
|
|
|
fill="#5351FB" |
|
|
|
/> |
|
|
|
<path |
|
|
|
d="M3.8164 10.3897C2.48306 9.61995 0.816406 10.5822 0.816406 12.1218V21.7324C0.816406 22.4469 1.1976 23.1072 1.81639 23.4644L10.1362 28.268C11.4695 29.0378 13.1362 28.0755 13.1362 26.5359V16.9252C13.1362 16.2106 12.755 15.5504 12.1362 15.1931L3.8164 10.3897Z" |
|
|
|
fill="#5351FB" |
|
|
|
/> |
|
|
|
</svg>--> |
|
|
|
<div class="cube spin"> |
|
|
|
<div class="edge top"> |
|
|
|
<div class="inside"></div> |
|
|
|
</div> |
|
|
|
<div class="edge right"> |
|
|
|
<div class="inside"></div> |
|
|
|
</div> |
|
|
|
<div class="edge bottom"> |
|
|
|
<div class="inside"></div> |
|
|
|
</div> |
|
|
|
<div class="edge left"> |
|
|
|
<div class="inside"></div> |
|
|
|
</div> |
|
|
|
<div class="edge front"> |
|
|
|
<div class="inside"></div> |
|
|
|
</div> |
|
|
|
<div class="edge back"> |
|
|
|
<div class="inside"></div> |
|
|
|
</div> |
|
|
|
<div class="blockchain-block-icon-cube"> |
|
|
|
<span class="edge top"> |
|
|
|
<span class="inside"></span> |
|
|
|
</span> |
|
|
|
<span class="edge right"> |
|
|
|
<span class="inside"></span> |
|
|
|
</span> |
|
|
|
<span class="edge bottom"> |
|
|
|
<span class="inside"></span> |
|
|
|
</span> |
|
|
|
<span class="edge left"> |
|
|
|
<span class="inside"></span> |
|
|
|
</span> |
|
|
|
<span class="edge front"> |
|
|
|
<span class="inside"></span> |
|
|
|
</span> |
|
|
|
<span class="edge back"> |
|
|
|
<span class="inside"></span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="blockchain-block-icon-chainlink"></div> |
|
|
@ -63,11 +43,9 @@ |
|
|
|
class="text-muted" |
|
|
|
v-if="block.numTransactions" |
|
|
|
>{{ block.numTransactions.toLocaleString() }} transactions</small> |
|
|
|
<!-- <small class="text-muted" v-if="block.txs"> --> |
|
|
|
<!-- <status variant="muted" blink>Validating</status> --> |
|
|
|
<!-- <status variant="success">Valid</status> --> |
|
|
|
<!-- <span>• {{ Math.round(block.size / 1000) }} KB</span> --> |
|
|
|
<!-- </small> --> |
|
|
|
<!-- <small class="text-muted" v-if="block.size"> |
|
|
|
<span>• {{ Math.round(block.size / 1000) }} KB</span> |
|
|
|
</small>--> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<status variant="success" v-if="false">Valid</status> |
|
|
@ -166,12 +144,12 @@ export default { |
|
|
|
}, |
|
|
|
poller(syncPercent) { |
|
|
|
window.clearInterval(this.polling); |
|
|
|
//if syncing or first load, fetch blocks every second |
|
|
|
if (Number(syncPercent) !== 100 || this.blocks.length === 0) { |
|
|
|
//if syncing, fetch blocks every second |
|
|
|
if (Number(syncPercent) !== 100) { |
|
|
|
this.polling = window.setInterval(this.fetchBlocks, 1000); |
|
|
|
} else { |
|
|
|
//else, slow down and fetch blocks every minute |
|
|
|
this.polling = window.setInterval(this.fetchBlocks, 1000); |
|
|
|
this.polling = window.setInterval(this.fetchBlocks, 60 * 1000); |
|
|
|
} |
|
|
|
}, |
|
|
|
blockTime(timestamp) { |
|
|
@ -272,14 +250,6 @@ export default { |
|
|
|
height: 4rem; |
|
|
|
width: 4rem; |
|
|
|
|
|
|
|
svg { |
|
|
|
z-index: 1; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
} |
|
|
|
|
|
|
|
.blockchain-block-icon-chainlink { |
|
|
|
position: absolute; |
|
|
|
height: 4rem; |
|
|
@ -314,64 +284,12 @@ export default { |
|
|
|
transition: all 0.6s ease-in-out; |
|
|
|
} |
|
|
|
.blockchain-block-icon { |
|
|
|
svg { |
|
|
|
transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); |
|
|
|
transition-delay: 0.1s; |
|
|
|
} |
|
|
|
.blockchain-block-icon-bg { |
|
|
|
transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); |
|
|
|
} |
|
|
|
} |
|
|
|
.blockchain-enter { |
|
|
|
opacity: 0; |
|
|
|
transform: translateY(2rem); |
|
|
|
.blockchain-block-icon { |
|
|
|
svg { |
|
|
|
transform: translate(-50%, -50%) scale(0); |
|
|
|
} |
|
|
|
.blockchain-block-icon-bg { |
|
|
|
transform: scale(0); |
|
|
|
background: #5351fb; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.blockchain-enter-to { |
|
|
|
opacity: 1; |
|
|
|
|
|
|
|
.blockchain-block-icon { |
|
|
|
svg { |
|
|
|
transform: translate(-50%, -50%) scale(1); |
|
|
|
} |
|
|
|
.blockchain-block-icon-bg { |
|
|
|
transform: scale(1); |
|
|
|
background: #eeeeff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.blockchain-leave { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
.blockchain-leave-to { |
|
|
|
opacity: 0; |
|
|
|
transform: translateY(2rem); |
|
|
|
} |
|
|
|
|
|
|
|
.blockchain-leave-active { |
|
|
|
// position: absolute; |
|
|
|
} |
|
|
|
|
|
|
|
* { |
|
|
|
margin: 0px; |
|
|
|
padding: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
html, |
|
|
|
body { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.cube { |
|
|
|
.blockchain-block-icon-cube { |
|
|
|
$cube-size: 22px; |
|
|
|
|
|
|
|
transform-style: preserve-3d; |
|
|
@ -386,19 +304,13 @@ body { |
|
|
|
|
|
|
|
transform: rotateX(-40deg) rotateY(45deg) rotateZ(0deg); |
|
|
|
|
|
|
|
&.spin { |
|
|
|
animation: spin 5s forwards ease; |
|
|
|
} |
|
|
|
|
|
|
|
.edge { |
|
|
|
width: $cube-size; |
|
|
|
height: $cube-size; |
|
|
|
line-height: $cube-size; |
|
|
|
text-align: center; |
|
|
|
box-shadow: inset 0px 0px 0px 1px #eeeeff; |
|
|
|
// box-shadow: inset 0px 0px 0px 1px #fff; |
|
|
|
background: #eeeeff; |
|
|
|
// background: #fff; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
.inside { |
|
|
@ -408,7 +320,6 @@ body { |
|
|
|
width: $cube-size * 0.8; |
|
|
|
height: $cube-size * 0.8; |
|
|
|
background: #5351fb; |
|
|
|
// background: #d3d5dc; |
|
|
|
border-radius: $cube-size * 0.2; |
|
|
|
} |
|
|
|
&.top { |
|
|
@ -436,42 +347,86 @@ body { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes spin { |
|
|
|
0% { |
|
|
|
transform: rotateX(-40deg) rotateY(45deg) rotateZ(0deg); |
|
|
|
} |
|
|
|
100% { |
|
|
|
transform: rotateX(-40deg) rotateY(945deg) rotateZ(540deg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.blockchain-block-timestamp { |
|
|
|
position: relative; |
|
|
|
&:before, |
|
|
|
&:after { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
content: "Validating..."; |
|
|
|
color: #b1b5b9; |
|
|
|
background: #fff; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
transform: translateY(0); |
|
|
|
animation: slide-up 0.4s forwards ease; |
|
|
|
animation-delay: 3s; |
|
|
|
background: #fff; |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
&:before { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
content: "● Validated"; |
|
|
|
color: #00cd98; |
|
|
|
background: #fff; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
transform: translateY(0); |
|
|
|
animation: slide-up 0.4s forwards ease; |
|
|
|
animation-delay: 4.6s; |
|
|
|
} |
|
|
|
&:after { |
|
|
|
content: "Validating..."; |
|
|
|
color: #b1b5b9; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
//animations |
|
|
|
|
|
|
|
.blockchain-enter { |
|
|
|
opacity: 0; |
|
|
|
transform: translateY(2rem); |
|
|
|
.blockchain-block-icon { |
|
|
|
.blockchain-block-icon-bg { |
|
|
|
transform: scale(0); |
|
|
|
background: #5351fb; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.blockchain-enter-active { |
|
|
|
.blockchain-block-icon-cube { |
|
|
|
animation: spin-cube 5s forwards ease; |
|
|
|
} |
|
|
|
.blockchain-block-timestamp { |
|
|
|
&:after { |
|
|
|
opacity: 1; |
|
|
|
animation: slide-up 0.4s forwards ease; |
|
|
|
animation-delay: 3s; |
|
|
|
} |
|
|
|
&:before { |
|
|
|
opacity: 1; |
|
|
|
animation: slide-up 0.4s forwards ease; |
|
|
|
animation-delay: 4.6s; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.blockchain-enter-to { |
|
|
|
opacity: 1; |
|
|
|
.blockchain-block-icon { |
|
|
|
.blockchain-block-icon-bg { |
|
|
|
transform: scale(1); |
|
|
|
background: #eeeeff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.blockchain-leave { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
.blockchain-leave-to { |
|
|
|
opacity: 0; |
|
|
|
transform: translateY(2rem); |
|
|
|
} |
|
|
|
|
|
|
|
.blockchain-leave-active { |
|
|
|
// position: absolute; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes spin-cube { |
|
|
|
0% { |
|
|
|
transform: rotateX(-40deg) rotateY(45deg) rotateZ(0deg); |
|
|
|
} |
|
|
|
100% { |
|
|
|
transform: rotateX(-40deg) rotateY(945deg) rotateZ(540deg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|