Kwun/banners (#504)

* update version and change log

* add banner support with remote settings

* update changelog

* remove console log

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog
 
-## [Unreleased]
+## v0.41.x-9
+* Added banner support. Banner settings are loading remotely from the url defined in settings.
+## v0.41.x-8
 
 * [#487] Fixed typo in the query which make validator power change tx lookup failed.
 * Fixed an issue on displaying individual transaction.

client/styles.scss

@@ -170,6 +170,17 @@ body {
     &#main, &#transaction, &#block {
       padding-top: 6rem;
       padding-bottom: 3.85rem;
+
+      .banner {
+        a {
+          display: block;
+          width: 100%;
+
+          img {
+            max-width: 100%
+          }
+        }
+      }
     }
 
     &#transaction .card.card-body {

default_settings.json

@@ -40,7 +40,9 @@
             "gov": true,
             "distribution": false
         },
-        "coingeckoId": "cosmos"
+        "coingeckoId": "cosmos",
+        "networks": "https://gist.githubusercontent.com/kwunyeung/8be4598c77c61e497dfc7220a678b3ee/raw/bd-networks.json",
+        "banners": false
     },
     "remote":{
         "rpc":"https://rpc.stargate.forbole.com:443",

imports/ui/App.jsx

@@ -18,6 +18,7 @@ import SearchBar from '/imports/ui/components/SearchBar.jsx';
 import moment from 'moment';
 import SentryBoundary from '/imports/ui/components/SentryBoundary.jsx';
 import NotFound from '/imports/ui/pages/NotFound.jsx';
+import Banners from '/imports/ui/components/Banners.jsx';
 
 import { ToastContainer, toast } from 'react-toastify';
 
@@ -78,6 +79,7 @@ class App extends Component {
                 {(Meteor.settings.public.gtm)?<GoogleTagManager gtmId={Meteor.settings.public.gtm} />:''}
                 <RouteHeader refreshApp={this.propagateStateChange}/>
                 <Container fluid id="main">
+                    {(Meteor.settings.public.banners)?<Banners url={Meteor.settings.public.banners}/>:''}
                     <ToastContainer />
                     <SentryBoundary>
                         <MobileSearchBar />

imports/ui/components/Banners.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { HTTP } from 'meteor/http'
+import { Container, Row, Col } from 'reactstrap';
+
+export default class Banners extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            banners: []
+        }
+    }
+    componentDidMount(){
+        const url = this.props.url;
+        HTTP.get(url, (error, result) => {
+            if (result.statusCode == 200){
+                let banners = JSON.parse(result.content);
+                if (banners.banners && (banners.banners.length > 0)){
+                    this.setState({
+                        banners: banners.banners
+                    })
+                }
+            }
+        })
+
+    }
+
+    render() {
+        if (this.state.banners.length>0){
+            const bannerIndex = Math.floor(Math.random()*this.state.banners.length);
+            const banner = this.state.banners[bannerIndex];
+            return (
+                <Container fluid className="banner mb-3 text-center">
+                    <Row>
+                        <Col className="d-none d-xl-block"><a href={banner.url} target="_blank"><img src={banner.images.lg} /></a></Col>
+                        <Col className="d-none d-md-block d-xl-none"><a href={banner.url} target="_blank"><img src={banner.images.md} /></a></Col>
+                        <Col className="d-block d-md-none"><a href={banner.url} target="_blank"><img src={banner.images.xs} /></a></Col>
+                    </Row>
+                </Container>
+            );
+
+        }
+        else{
+            return <div></div>
+        }
+    }
+}

private/version

@@ -1 +1 @@
-v0.41.x-7
+v0.41.x-8