Development of sponsors and moderators webpage

package.json

@@ -21,7 +21,8 @@
     "react-rte": "^0.16.1",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
-    "sc2-sdk": "^1.0.2"
+    "sc2-sdk": "^1.0.2",
+    "steem": "^0.7.2"
   },
   "scripts": {
     "start": "react-app-rewired start",

src/App.js

@@ -22,7 +22,8 @@ import Profile from './containers/Profile';
 import 'antd/dist/antd.min.css';
 import './assets/styles/index.css';
 import './assets/styles/ant-overrides.css';
-
+import Sponsors from './containers/Sponsors';
+import Moderators from './containers/Moderators';
 const App = () => {
   return (
     <Layout id="page-layout">
@@ -40,6 +41,8 @@ const App = () => {
         <Route exact path="/moderation/pending" component={Review} />
         <Route exact path="/moderation/reserved" component={Review} />
         <Route exact path="/users" component={Users} />
+        <Route exact path="/sponsors" component={Sponsors} />
+        <Route exact path="/moderators" component={Moderators} />
         <Route exact path="/callback" component={Callback} />
         <Route exact path="/mycontributions" component={Home} />
         <Route exact path="/new" component={NewContribution} />

src/assets/styles/index.css

@@ -1,10 +1,14 @@
+@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
 body {
   margin: 0;
   background-color: #efefef;
   font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
 }
 
-div, p, span, img {
+div,
+p,
+span,
+img {
   box-sizing: border-box;
 }
 

src/components/Common/FollowButton.css

@@ -0,0 +1,19 @@
+.follow-button {
+  box-sizing: border-box;
+  cursor: pointer;
+  width: 87px;
+  height: 38px;
+  color: #2a2a2a;
+  border: 1px solid #9c9d9f;
+  font-family: "Montserrat", sans-serif;
+  font-weight: bold;
+  font-size: 16px;
+  background: transparent;
+  border-radius: 4px;
+  outline: none;
+  transition: 0.2s;
+}
+.follow-button:hover {
+  color: #fff;
+  background-color: #22429d;
+}

src/components/Common/FollowButton.js

@@ -0,0 +1,6 @@
+import './FollowButton.css';
+import React from 'react';
+const FollowButton = () => (
+  <button className="follow-button">Follow</button>
+);
+export default FollowButton;

src/components/Moderator/index.css

@@ -0,0 +1,41 @@
+.moderator-container {
+  display: grid;
+  grid-template-columns: 46px auto 87px;
+  align-items: center;
+  grid-column-gap: 8px;
+  font-family: "Montserrat", sans-serif;
+  margin-bottom: 17.6px;
+}
+.moderator-avatar-container {
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.moderator-avatar {
+  width: 100%;
+  height: auto;
+}
+.moderator-username-container {
+  margin: 0;
+}
+.moderator-username {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0;
+  color: #2a2a2a;
+  transition: 0.2s;
+  padding: 0px !important;
+}
+.moderator-username:hover {
+  color: #22429d;
+}
+
+.moderator-steem-username {
+  font-size: 14px;
+  margin: 0;
+  color: #a0a0a0;
+  line-height: 24px;
+}

src/components/Moderator/index.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import FollowButton from '../Common/FollowButton';
+import { Link } from 'react-router-dom';
+import './index.css';
+
+export default class Moderator extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      steemPower: 0,
+      avatar: ''
+    };
+  }
+
+  render() {
+    return (
+      <div className="moderator-container" key={this.props.username}>
+        <div className="moderator-avatar-container" style={{backgroundImage: `url(https://steemitimages.com/u/${
+          this.props.username
+        }/avatar)`}}>
+        </div>
+        <div><p className="moderator-username-container"><Link className="moderator-username" to={'/@'+this.props.username}>{this.props.username}</Link></p>
+          <p className="moderator-steem-username">@{this.props.username}</p></div>
+        <FollowButton />
+      </div>
+    );
+  }
+}
+
+Moderator.propTypes = {
+  username: PropTypes.string
+};

src/components/Sponsor/index.css

@@ -0,0 +1,41 @@
+.sponsor-container {
+  display: grid;
+  grid-template-columns: 46px auto 87px;
+  align-items: center;
+  grid-column-gap: 8px;
+  font-family: "Montserrat", sans-serif;
+  margin-bottom: 17.6px;
+}
+.sponsor-avatar-container {
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.sponsor-avatar {
+  width: 100%;
+  height: auto;
+}
+.sponsor-username-container {
+  margin: 0;
+}
+.sponsor-username {
+  font-size: 16px;
+  padding: 0px !important;
+  font-weight: bold;
+  margin: 0;
+  color: #2a2a2a;
+  transition: 0.2s;
+}
+.sponsor-username:hover {
+  color: #22429d;
+}
+
+.sponsor-delegation {
+  font-size: 14px;
+  margin: 0;
+  color: #a0a0a0;
+  line-height: 24px;
+}

src/components/Sponsor/index.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import FollowButton from '../Common/FollowButton';
+import steem from 'steem';
+import { Link } from 'react-router-dom';
+import './index.css';
+
+export default class Sponsor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      steemPower: 0,
+      avatar: ''
+    };
+  }
+  async componentDidMount() {
+    const steemPower = steem.formatter.vestToSteem(
+      this.props.data.vesting_shares,
+      parseFloat(this.props.total_vesting_shares),
+      parseFloat(this.props.total_vesting_fund_steem)
+    );
+    this.setState({
+      steemPower
+    });
+  }
+  render() {
+    return (
+      <div className="sponsor-container" key={this.props.data.trx_id}>
+        <div className="sponsor-avatar-container" style={{backgroundImage: `url(https://steemitimages.com/u/${
+          this.props.data.delegator
+        }/avatar)`}}>
+        </div>
+        <div><p className="sponsor-username-container"><Link className="sponsor-username" to={'/@'+this.props.data.delegator}>{this.props.data.delegator}</Link></p>
+          <p className="sponsor-delegation">Delegated: {this.state.steemPower.toFixed(0) + ' STEEM'}</p></div>
+        <FollowButton />
+      </div>
+    );
+  }
+}
+
+Sponsor.propTypes = {
+  data: PropTypes.object,
+  total_vesting_shares: PropTypes.string,
+  total_vesting_fund_steem: PropTypes.string
+};

src/containers/Moderators/index.css

@@ -0,0 +1,32 @@
+.moderators-container {
+  font-family: "Montserrat", sans-serif;
+  width: 80%;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+}
+.moderators-flex-container {
+  min-height: 1080px;
+  width: 77%;
+  display: flex;
+  flex-direction: column;
+  align-content: flex-start;
+}
+.moderators-h1 {
+  color: #22429d;
+  font-size: 32px;
+  font-weight: bold;
+  line-height: 44.44pt;
+}
+
+.moderators-about {
+  color: #2a2a2a;
+  line-height: 20pt;
+  margin-bottom: 41.7px;
+}
+.moderators-data-container {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-column-gap: 130px;
+  grid-row-gap: 6.4px;
+}

src/containers/Moderators/index.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import './index.css';
+import Moderator from '../../components/Moderator/';
+import {apiGet} from '../../services/api';
+export default class Moderators extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      moderators: []
+    };
+  }
+  async componentDidMount() {
+    const apiCall = await apiGet('/stats/users');
+    const moderators = apiCall.data.results.filter(user => {
+      return user.roles.includes('moderator');
+    });
+    this.setState({
+      moderators
+    });
+  }
+  render() {
+    return (
+      <div className="moderators-container">
+        <div className="moderators-flex-container">
+          <h1 className="moderators-h1">Moderators</h1>
+          <p className="moderators-about">Meet KnackSteem moderators. They are a team of professionals who review/scrutinize all incoming contributions and make sure that they are up to standard. They also give valuable feedback to our contributors to help them improve.</p>
+
+          <div className="moderators-data-container">
+            {this.state.moderators.map(moderator => {
+
+              return <Moderator key={moderator.username} username={moderator.username}/>;
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/containers/Sponsors/index.css

@@ -0,0 +1,34 @@
+.sponsors-container {
+  box-sizing: border-box;
+  font-family: "Montserrat", sans-serif;
+
+  width: 80%;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+}
+.sponsors-flex-container {
+  min-height: 1080px;
+  width: 77%;
+  display: flex;
+  flex-direction: column;
+  align-content: flex-start;
+}
+.sponsors-h1 {
+  color: #22429d;
+  font-size: 32px;
+  font-weight: bold;
+  line-height: 44.44pt;
+}
+
+.sponsors-about {
+  color: #2a2a2a;
+  line-height: 20pt;
+  margin-bottom: 41.7px;
+}
+.sponsors-data-container {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-column-gap: 130px;
+  grid-row-gap: 6.4px;
+}