Skip to content

Commit

Permalink
Merge branch 'release/0.2.0' into master-cere
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrei Navoichyk committed Oct 22, 2021
2 parents e00f8a3 + fe74fe9 commit 0c859b9
Show file tree
Hide file tree
Showing 8 changed files with 249 additions and 22 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
## vNext
- ...

## v0.2.0
- Added UI to show EDP banner on homepage.

## v0.1.0
- Adapted for Cere Network.
- Added API to add and get EDP info.
13 changes: 7 additions & 6 deletions api/postman/Cerestats.postman_collection.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"info": {
"_postman_id": "b5772ee7-2479-4ffb-b10e-9f95134778b0",
"_postman_id": "a62d02bb-78f2-4c7f-9bad-0caa9dad730e",
"name": "Cerestats",
"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
},
"item": [
{
"name": "Add value",
"name": "Add/Update Banner data",
"request": {
"method": "POST",
"header": [
Expand All @@ -18,7 +18,7 @@
],
"body": {
"mode": "raw",
"raw": "{\n \"key\" : \"test1\",\n \"value\": {\n \"graduates-number\": \"10\"\n }\n}",
"raw": "{\n \"key\" : \"banner\",\n \"value\": {\n \"show\": true,\n \"feedbackPercentage\": 90,\n \"onClickLink\": \"http://cere.network\",\n \"cereBootcampGraduatesNumber\": 67,\n \"tokensRewarded\": 95000\n }\n}",
"options": {
"raw": {
"language": "json"
Expand All @@ -44,7 +44,7 @@
"response": []
},
{
"name": "Get data",
"name": "Get Banner data",
"request": {
"method": "GET",
"header": [
Expand All @@ -55,7 +55,7 @@
}
],
"url": {
"raw": "https://api.stats.cere.network/api/v1/edp",
"raw": "https://api.stats.cere.network/api/v1/edp/banner",
"protocol": "https",
"host": [
"api",
Expand All @@ -66,7 +66,8 @@
"path": [
"api",
"v1",
"edp"
"edp",
"banner"
]
}
},
Expand Down
205 changes: 205 additions & 0 deletions frontend/components/EDPBanner.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
<template>
<div>
<div v-if="loading" class="text-center py-4">
<Loading />
</div>
<div v-else>
<div v-if="showBanner" class="banner row">
<a :href="edpLink" target="_blank" rel="noopener noreferrer">
<div class="flex row banner">
<div class="flex child left column">
<div class="cere-logo">
<img
src="../static/img/cere_logo_edp.png"
alt="Cere Logo"
class="img"
height="60px"
/>
</div>
</div>
<div class="flex child middle column">
<div class="content">
<div class="rectangle first">
<span>Total tokens rewarded to EDP community members</span>
<span class="value">{{ formatNumber }} CERE tokens</span>
</div>
<div class="rectangle second">
<span>
Number of EDP community members who finished Cere Bootcamp
</span>
<span class="value">{{ graduates }}</span>
</div>
<div class="rectangle third">
<span>
Percentage of the EDP community members think the Cere
Bootcamp is 'interesting'
</span>
<span class="value"> {{ feedback }}%</span>
</div>
</div>
</div>
<div class="flex child right column">
<div class="button">
Click to find out more about Extended Developers Program (EDP)
community
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</template>

<script>
import { gql } from 'graphql-tag'
import { formatBalance } from '@polkadot/util'
import Loading from '@/components/Loading.vue'
export default {
components: {
Loading,
},
data() {
return {
loading: true,
graduates: 0,
tokenRewarded: 0,
feedback: 0,
showBanner: true,
edpLink: '',
formatBalance,
}
},
computed: {
formatNumber() {
const formatter = Intl.NumberFormat('en', { notation: 'compact' })
return formatter.format(this.tokenRewarded)
},
},
apollo: {
$subscribe: {
banner: {
query: gql`
subscription edp {
edp(where: { key: { _eq: "banner" } }) {
value
}
}
`,
result({ data }) {
if (data.edp.length === 0) {
this.loading = false
this.showBanner = false
} else {
this.metrics = data.edp[0].value
this.showBanner = data.edp[0].value.show
this.tokenRewarded = data.edp[0].value.tokensRewarded
this.graduates = data.edp[0].value.cereBootcampGraduatesNumber
this.feedback = data.edp[0].value.feedbackPercentage
this.edpLink = data.edp[0].value.onClickLink
this.loading = false
}
},
},
},
},
}
</script>

<style>
.banner {
background-image: url('../static/img/edp_banner_bg.png');
height: 200px;
margin-top: -5px;
margin-bottom: 30px;
border-radius: 10px;
display: none;
margin-right: -1px;
margin-left: -1px;
}
.child.left {
width: 8%;
display: flex;
}
.child.middle {
width: 67%;
display: flex;
justify-content: flex-start;
}
.child.right {
width: 25%;
display: flex;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.rectangle {
height: 30px;
background: linear-gradient(90deg, #c9529e 0%, #a04799 33.85%, #5e4186 100%);
box-shadow: 0 0 4px 4px rgba(121, 119, 119, 0.25);
border-radius: 90px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 0;
align-items: center;
color: white;
}
.value {
margin-left: 80px;
}
.banner span {
padding: 0 10px;
}
.rectangle.first {
width: 80%;
}
.rectangle.second {
width: 85%;
margin: 25px 0;
}
.content {
padding: 0 15px;
align-content: flex-start;
width: 100%;
}
.button {
width: 100%;
text-align: center;
padding: 10px 10px;
justify-content: flex-start;
margin-right: 25px;
}
a {
text-decoration: none !important;
width: 100% !important;
}
@media (min-width: 992px) {
.banner {
display: flex;
font-size: 0.6rem;
}
}
@media (min-width: 1200px) {
.banner {
font-size: 0.8rem;
}
}
</style>
32 changes: 23 additions & 9 deletions frontend/components/Footer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,21 @@
<div id="footer" class="container-fluid footer mt-2">
<footer class="text-muted">
<div class="container">
<div class="d-flex align-items-center justify-content-center mt-2 pt-1">
<div>
<a href="https://cere.network/">
<img src="/img/cere-logo.png" class="cere-logo" />
</a>
</div>
<a href="https://cere.network/" style="text-decoration: none">
<div class="cere-title">Cere Network</div>
<div class="mt-2 pt-1">
<a
href="https://cere.network/"
target="_blank"
rel="noopener noreferrer"
class="flex"
>
<span>
<img
src="/img/cere-logo.png"
alt="Cere Network"
class="cere-logo"
/>
</span>
<span class="cere-title"> Cere Network </span>
</a>
</div>
<div class="row pt-2">
Expand Down Expand Up @@ -51,7 +58,7 @@
class="col-xs-12 col-sm-12 col-md-4 mt-sm-2 text-center text-white"
data-testid="footer-polkadot"
>
<h3 class="mb-1" style="font-size: 16px">Cerestats</h3>
<h3 class="mb-1" style="font-size: 16px">Explore</h3>
<hr />
<ul class="list-unstyled text-center">
<li>
Expand Down Expand Up @@ -107,4 +114,11 @@ export default {}
.grant-badge {
max-width: 150px;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
flex-direction: columns;
}
</style>
3 changes: 3 additions & 0 deletions frontend/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<section>
<b-container class="main py-5 dashboard">
<Chain />
<EDPBanner />
<Search />
<div class="row">
<div class="col-md-6 mb-4">
Expand Down Expand Up @@ -67,6 +68,7 @@ import LastExtrinsics from '@/components/LastExtrinsics.vue'
import LastEvents from '@/components/LastEvents.vue'
import Chain from '@/components/Chain.vue'
import Search from '@/components/Search.vue'
import EDPBanner from '@/components/EDPBanner.vue'
// import Top10Rich from '@/components/Top10Rich.vue'
import { network } from '@/frontend.config.js'
Expand All @@ -78,6 +80,7 @@ export default {
LastEvents,
Chain,
Search,
EDPBanner,
// Top10Rich,
},
data: () => {
Expand Down
Binary file added frontend/static/img/cere_logo_edp.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/static/img/edp_banner_bg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 8 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
{
"private": true,
"name": "polkastats-ng",
"description": "PolkaStats Next Gen mono repo",
"name": "cerestats",
"version": "0.2.0",
"description": "Cerestats mono repo",
"repository": {
"type": "git",
"url": "git+https://github.com/Colm3na/polkastats-ng.git"
"url": "git+https://github.com/Cerebellum-Network/cerestats"
},
"keywords": [
"blockchain",
"cere",
"kusama",
"polkadot",
"substrate",
"PoS",
"validator"
],
"author": "Mario Pino Uceda",
"author": "Cere Team",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/Colm3na/polkastats-ng/issues"
"url": "https://github.com/Cerebellum-Network/cerestats/issues"
},
"homepage": "https://github.com/Colm3na/polkastats-ng#readme",
"homepage": "https://github.com/Cerebellum-Network/cerestats#readme",
"workspaces": ["frontend", "backend", "api"],
"scripts": {}
}

0 comments on commit 0c859b9

Please sign in to comment.