Saturn Cards

SaturnCards.jsx

import React from "react";

// reactstrap components
import {
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  CardColumns,
  Row,
  Col
} from "reactstrap";

import axios from 'axios';

class SaturnCards extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      saturn: false,
      blockchain: 'ETC'
    }
  }

  componentWillMount(){
    const apilink = 'https://ticker.saturn.network/api/v2'
    const { network } = this.props;
    var currentBlockchain = network || 'ETC';
    axios.get(apilink + '/saturn/exchange').then(saturn => {
      this.setState({
        blockchain: currentBlockchain,
        saturn: saturn.data[currentBlockchain]
      })
    }).catch(err => console.log);
  }

  render_error(){
    return (
      <>
      <div className="alert alert-warning alert-danger2">
        <Row>
          <Col md="1">
            <center>
              <span className="pull-left">
                <i className="fas fa-info-circle fa-4x"></i>
              </span>
            </center>
          </Col>
          <Col md="11">
            <b>
              ERROR GETTING DATA <br/>
              SATURN API NOT REACHABLE
            </b>
          </Col>
        </Row>
      </div>
      </>
    )
  }

  render() {
    const { saturn } = this.state
    const { blockchain } = this.state
    if (!this.state.saturn){
      this.render_error()
    }else{
      return (
        <>
          <CardColumns className="BCTStatCardP">
            <Card>
              <CardHeader>
                <CardTitle tag="h2">{blockchain}</CardTitle>
              </CardHeader>
              <CardBody style={{"padding":"1em"}}>
                <p>BLOCKCHAIN</p>
              </CardBody>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle tag="h2">{(Number(saturn.total_users) || 0).toLocaleString()}</CardTitle>
              </CardHeader>
              <CardBody style={{"padding":"1em"}}>
                <p>TOTAL USERS</p>
              </CardBody>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle tag="h2">{(Number(saturn.token_count) || 0).toLocaleString()}</CardTitle>
              </CardHeader>
              <CardBody style={{"padding":"1em"}}>
                <p>TOKENS LISTED</p>
              </CardBody>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle tag="h2">{(Number(saturn.total_orders) || 0).toLocaleString()}</CardTitle>
              </CardHeader>
              <CardBody style={{"padding":"1em"}}>
                <p>TOTAL ORDERS</p>
              </CardBody>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle tag="h2">{(Number(saturn.total_trades) || 0).toLocaleString()}</CardTitle>
              </CardHeader>
              <CardBody style={{"padding":"1em"}}>
                <p>TOTAL TRADES</p>
              </CardBody>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle tag="h2">{(Number(saturn.tokens_mined) || 0).toLocaleString()}</CardTitle>
              </CardHeader>
              <CardBody style={{"padding":"1em"}}>
                <p>SATURN MINED</p>
              </CardBody>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle tag="h2">{(Number(saturn.volume24hr) || 0).toLocaleString()} <small>{blockchain}</small></CardTitle>
              </CardHeader>
              <CardBody style={{"padding":"1em"}}>
                <p>VOLUME 24H</p>
              </CardBody>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle tag="h2">{(Number(saturn.volume7d )|| 0).toLocaleString()} <small>{blockchain}</small></CardTitle>
              </CardHeader>
              <CardBody style={{"padding":"1em"}}>
                <p>VOLUME 7D</p>
              </CardBody>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle tag="h2">{(Number(saturn.total_volume) || 0).toLocaleString()} <small>{blockchain}</small></CardTitle>
              </CardHeader>
              <CardBody style={{"padding":"1em"}}>
                <p>TOTAL VOLUME</p>
              </CardBody>
            </Card>
          </CardColumns>
        </>
      );
    }
  }
}

export default SaturnCards;