diff --git a/src/components/HomeNetwork/HomeNetwork.js b/src/components/HomeNetwork/HomeNetwork.js index 831471ab..7ce3ea76 100644 --- a/src/components/HomeNetwork/HomeNetwork.js +++ b/src/components/HomeNetwork/HomeNetwork.js @@ -1,65 +1,62 @@ -import React, { Component } from "react"; +import React, { useState } from "react"; +import PropTypes from "prop-types"; import CountUp from "react-countup"; import VisibilitySensor from "react-visibility-sensor"; import Fade from "react-reveal/Fade"; +import useStats, { AVAILABLE_STATS } from "./useStats"; import "./HomeNetwork.scss"; import { CircleIcon, FAQ } from "../"; import { SmallOrb, LogoSolid, Deco6, Deco7, Deco8 } from "../../svg"; -const stats = [ - { name: "TB Used", value: 664 }, - { name: "TB Capacity", value: 2315 }, - { name: "Hosts", value: 335 }, - { name: "Storage/TB", value: 91, cent: true }, - { name: "Bandwidth/TB", value: 18, cent: true } +const STATS_MAP = [ + { name: "TB Used", key: AVAILABLE_STATS.STORAGE_USED_TB }, + { name: "TB Capacity", key: AVAILABLE_STATS.NETWORK_CAPACITY_TB }, + { name: "Hosts", key: AVAILABLE_STATS.ONLINE_HOSTS_COUNT }, + { name: "Storage/TB", key: AVAILABLE_STATS.STORAGE_COST_USD, currency: true }, + { name: "Bandwidth/TB", key: AVAILABLE_STATS.BANDWIDTH_DOWN_COST_USD, currency: true } ]; -export default class HomeNetwork extends Component { - state = { - visable: false - }; - - onChange = isVisible => { - if (isVisible && !this.state.visable) { - this.setState({ visable: true }); +export default function HomeNetwork() { + const [visible, setVisible] = useState(false); + const stats = useStats(); + const onChange = isVisible => { + if (isVisible && !visible) { + setVisible(true); } }; - render() { - return ( -
-
- -
- - - - -
-
-
- - -

- Sia -
- Network -

- -
- + return ( +
+
- +
+ + + + +
+
+
+ + +

+ Sia +
+ Network +

+ +
+ + + +
- {stats.map((stat, i) => ( + {STATS_MAP.map((stat, i) => (
-

- {this.state.visable ? : 0} - {stat.cent && "¢"} -

+ {visible && } {stat.name}
@@ -70,105 +67,133 @@ export default class HomeNetwork extends Component {
- - +
+ stats provided by{" "} + + siastats.info + +
+ + + -
-
- -

- Skynet Webportals are low cost servers that sit between Skynet and everyday users, - enabling them to access Skynet content without needing to operate any special software. As Skylinks are - generated, they can be shared with anyone to retrieve data from any Webportal. The original uploader - does not need to stay online in order for the file to remain available. The Sia network serves as the - backend storage layer for Skynet and handles all of the pinning, guaranteeing both high speeds and - excellent uptime. -

- +
+
+ +

+ Skynet Webportals are low cost servers that sit between Skynet and everyday users, + enabling them to access Skynet content without needing to operate any special software. As Skylinks are + generated, they can be shared with anyone to retrieve data from any Webportal. The original uploader does + not need to stay online in order for the file to remain available. The Sia network serves as the backend + storage layer for Skynet and handles all of the pinning, guaranteeing both high speeds and excellent + uptime. +

+ - -

- Sia is the leading decentralized cloud storage platform. No signups, no servers, no - trusted third parties. Sia leverages blockchain technology to create a data storage marketplace that is - more robust and more affordable than traditional cloud storage providers. -

+ +

+ Sia is the leading decentralized cloud storage platform. No signups, no servers, no + trusted third parties. Sia leverages blockchain technology to create a data storage marketplace that is + more robust and more affordable than traditional cloud storage providers. +

+

+ + Learn more about Sia + +

+ +
+ -
- - -

- Anyone can access files that have been uploaded to Skynet as long as they possess the corresponding - Skylinks. You can use any Webportal to download files! - - read more - -

- - + + - - -

- Applications can be deployed in under a minute and be immediately available globally. Skynet includes - an API and SDKs which integrate seamlessly with existing applications. - - read more - -

- - + + +

+ Applications can be deployed in under a minute and be immediately available globally. Skynet includes an + API and SDKs which integrate seamlessly with existing applications. + + read more + +

+ + - - -

- Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet - download starts in under 500 ms and can stream at rates as high as 1 Gbps! - - read more - -

- - + + +

+ Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet + download starts in under 500 ms and can stream at rates as high as 1 Gbps! + + read more + +

+ + - - -

- Storage costs 10x lower than centralized providers and bandwidth costs are 100x lower – without - sacrificing performance or reliability. -

- - + + +

+ Storage costs 10x lower than centralized providers and bandwidth costs are 100x lower – without + sacrificing performance or reliability. +

+ + - - - View more FAQ - - -
+ + + View more FAQ + +
- ); - } +
+ ); } + +function StatValue({ stat, value }) { + const displayDollars = stat.currency && value >= 1; + const displayCents = stat.currency && value < 1; + + return ( +

+ {displayDollars && "$"} + + {displayCents && "¢"} +

+ ); +} + +StatValue.propTypes = { + stat: PropTypes.shape({ + key: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + currency: PropTypes.bool + }).isRequired, + value: PropTypes.number.isRequired +}; diff --git a/src/components/HomeNetwork/HomeNetwork.scss b/src/components/HomeNetwork/HomeNetwork.scss index d570da35..a7ced868 100644 --- a/src/components/HomeNetwork/HomeNetwork.scss +++ b/src/components/HomeNetwork/HomeNetwork.scss @@ -65,6 +65,21 @@ } } +.home-network-stats-provider { + text-align: right; + color: $green; + font-size: 13px; + margin-right: 12px; // keep the same as the border radius of .home-network-stats + + a { + color: $green; + + &:hover { + color: $black; + } + } +} + .deco-6 { position: absolute; top: -185px; diff --git a/src/components/HomeNetwork/useStats.js b/src/components/HomeNetwork/useStats.js new file mode 100644 index 00000000..aaeea4d6 --- /dev/null +++ b/src/components/HomeNetwork/useStats.js @@ -0,0 +1,68 @@ +import { useEffect, useState } from "react"; + +export const AVAILABLE_STATS = { + ONLINE_HOSTS_COUNT: "onlineHostsCount", + STORAGE_USED_TB: "storageUsedTB", + NETWORK_CAPACITY_TB: "networkCapacityTB", + STORAGE_COST_USD: "storageCostUSD", + BANDWIDTH_DOWN_COST_USD: "bandwidthDownCostUSD" +}; + +export default function useStats() { + const [stats, setStats] = useState({ + [AVAILABLE_STATS.ONLINE_HOSTS_COUNT]: null, + [AVAILABLE_STATS.STORAGE_USED_TB]: null, + [AVAILABLE_STATS.NETWORK_CAPACITY_TB]: null, + [AVAILABLE_STATS.STORAGE_COST_USD]: null, + [AVAILABLE_STATS.BANDWIDTH_DOWN_COST_USD]: null + }); + + useEffect(() => { + async function fetchData() { + const [bandwidth, storage, price] = await Promise.all([getBandwidthStats(), getStorageStats(), getPriceStats()]); + + setStats({ ...bandwidth, ...storage, ...price }); + } + + fetchData(); + }, [setStats]); + + return stats; +} + +async function getBandwidthStats() { + // { up: 76.09, down: 102.66, upusd: 0.23, downusd: 0.32 } + const response = await fetch("https://siastats.info/dbs/bandwidthpricesdb.json"); + const data = await response.json(); + const current = data[data.length - 1]; + + return { + [AVAILABLE_STATS.BANDWIDTH_DOWN_COST_USD]: current.downusd + }; +} + +async function getPriceStats() { + // { price: 504.59, newcontractformation: 30.79, usd: 1.55, sfperfees: 8.98 } + const response = await fetch("https://siastats.info/dbs/storagepricesdb.json"); + const data = await response.json(); + const current = data[data.length - 1]; + + return { + [AVAILABLE_STATS.STORAGE_COST_USD]: current.usd + }; +} + +async function getStorageStats() { + // { block_height: 247816, block_timestamp: 1582285828, hashrate: 6212581269715416, + // difficulty: 3501953420754597000, coin_supply: 43638591164, coin_price_USD: 0.003, + // market_cap_USD: 130915773, used_storage_TB: 725.26, network_capacity_TB: 2270.96, + // online_hosts: 360, active_contracts: 62997 } + const response = await fetch("https://siastats.info/dbs/network_status.json"); + const data = await response.json(); + + return { + [AVAILABLE_STATS.ONLINE_HOSTS_COUNT]: data.online_hosts, + [AVAILABLE_STATS.STORAGE_USED_TB]: data.used_storage_TB, + [AVAILABLE_STATS.NETWORK_CAPACITY_TB]: data.network_capacity_TB + }; +}