diff --git a/package.json b/package.json index 85178088..3fd9d032 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "url": "http://github.com/solana-labs/blockexplorer/issues" }, "dependencies": { + "@nivo/bar": "^0.59.2", "@nivo/line": "^0.59.2", "@solana/web3.js": "^0.16.10", "babel-plugin-transform-runtime": "^6.23.0", diff --git a/src/App.js b/src/App.js index a09d03a3..30ef1a61 100755 --- a/src/App.js +++ b/src/App.js @@ -29,6 +29,7 @@ import Bx2BlankComponent from './v2/Bx2BlankComponent'; import Bx2PanelValidatorsOverview from './v2/Bx2PanelValidatorsOverview'; import Bx2PanelValidators from './v2/Bx2PanelValidators'; import Bx2PanelValidatorDetail from './v2/Bx2PanelValidatorDetail'; +import Bx2PanelTourDeSolLeaderboard from './v2/Bx2PanelTourDeSolLeaderboard'; import {stylesV2, themeV2} from './v2/ThemeV2'; const history = createBrowserHistory(); @@ -43,6 +44,9 @@ const BxDataTableThemed = withStyles(stylesV1)(BxDataTable); const Bx2AppBarThemed = withStyles(stylesV2)(Bx2AppBar); const Bx2NavDrawerThemed = withStyles(stylesV2)(Bx2NavDrawer); +const Bx2PanelTourDeSolLeaderboardThemed = withStyles(stylesV2)( + Bx2PanelTourDeSolLeaderboard, +); const Bx2PanelValidatorsOverviewThemed = withStyles(stylesV2)( Bx2PanelValidatorsOverview, ); @@ -730,7 +734,11 @@ class App extends Component { path="/v2/tourdesol" exact render={() => ( - + )} /> { + if (n && n.voteAccount && n.voteAccount.stake) { + a += n.voteAccount.stake; + } + + return a; + }, + 0, + ); + + const stakedPercentage = ((stakedSupply / totalSupply) * 100.0).toFixed(2); + + const DEFAULT_STAGE_LENGTH_BLOCKS = (7 * 24 * 60 * 60) / 0.8; + const PROLOGUE_LENGTH_BLOCKS = DEFAULT_STAGE_LENGTH_BLOCKS / 3; + + let i = 0; + + let stages = _.map( + [ + {title: 'Prologue', is_prologue: true}, + {title: 'Stage 1', is_prologue: false}, + {title: 'Stage 2 (preamble)', is_prologue: true}, + {title: 'Stage 2', is_prologue: false}, + {title: 'Stage 3 (preamble)', is_prologue: true}, + {title: 'Stage 3', is_prologue: false}, + ], + v => { + v.start_height = i; + v.end_height = + i + + (v.is_prologue + ? PROLOGUE_LENGTH_BLOCKS + : DEFAULT_STAGE_LENGTH_BLOCKS) - + 1; + i = v.end_height + 1; + + return v; + }, + ); + + function getIndicator(x) { + if (x.start_height <= currentBlock && x.end_height > currentBlock) { + return 'LIVE!'; + } else if (x.start_height > currentBlock) { + return 'Coming Soon!'; + } else { + return 'Finished.'; + } + } + + return ( +
+
+ Current Block: {currentBlock} +
+
    + {_.map(_.filter(stages, x => !x.is_prologue), x => ( +
  • + +
    • + ))} +
+
+

+

+ {/* + * STYLING NOTE: this link appears to have custom BarComponent styling + * + * https://nivo.rocks/storybook/?path=/story/bar-race-chart--demo + * + */} + { + return { + id: x.pubkey, + value: (x.voteAccount && x.voteAccount.stake) || 0, + }; + })} + keys={['value']} + colors={{scheme: 'blue_green'}} + colorBy="indexValue" + /> +
+

+

+ + + + + + Stage Duration Blocks + + + + TODO + + + + + + + + + Days Left In Stage + + + + TODO + + + + + + + + + Total SOL in Circulation + + + + {totalSupplySOL} SOL + + + + + + + + + Total Bonded Tokens + + + + {stakedSupply + ' Lamports'} + + + + + + + + + Current Network Inflation Rate + + + + TODO + + + + + + + + + # Active Validators + + + + {this.props.nodes.length} + + + + + + + + + # Inactive Validators + + + + TODO + + + + + + + + + Circulating Supply Staked + + + + + {stakedPercentage}% + + + + + + +
+ + + Active Validators {this.props.nodes.length} + +
+ + See All + + + + + + +
+ Node Pubkey + +
+
+ Vote Pubkey + +
+ + + Stake + + + + Uptime + + + + + + {_.map(nodes, row => ( + + + +
+ + + + {(row.voteAccount && row.voteAccount.stake) || 0} Lamports + + TODO + + ))} + +
+ +
+ ); + } + + render() { + const {nodes} = this.props; + + if (nodes) { + return this.renderValidators(); + } + + return ( + + + (ERROR - No data.) + + + ); + } +} + +Bx2PanelTourDeSolLeaderboard.propTypes = { + nodes: PropTypes.array.isRequired, + supply: PropTypes.number.isRequired, + currentBlock: PropTypes.number.isRequired, +}; + +export default Bx2PanelTourDeSolLeaderboard; diff --git a/yarn.lock b/yarn.lock index 6269867e..383ee075 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1615,6 +1615,23 @@ lodash "^4.17.11" react-motion "^0.5.2" +"@nivo/bar@^0.59.2": + version "0.59.2" + resolved "https://registry.yarnpkg.com/@nivo/bar/-/bar-0.59.2.tgz#eed30bb20b8090119b36afd3c87cb8edf0726dc7" + integrity sha512-zIjDZ5ekXlC6G+spLHCv3yyW12fZt5HhDWtmgx0zH+3londrM2zKrfvvoJrME6jowJwyZhFZN6ym7aiJAggU9Q== + dependencies: + "@nivo/annotations" "0.59.1" + "@nivo/axes" "0.59.2" + "@nivo/colors" "0.59.0" + "@nivo/core" "0.59.1" + "@nivo/legends" "0.59.1" + "@nivo/tooltip" "0.59.1" + d3-scale "^3.0.0" + d3-shape "^1.2.2" + lodash "^4.17.11" + react-motion "^0.5.2" + recompose "^0.30.0" + "@nivo/colors@0.59.0": version "0.59.0" resolved "https://registry.yarnpkg.com/@nivo/colors/-/colors-0.59.0.tgz#326f7941de7387099732143063f657a461bd1dfb" @@ -5330,7 +5347,7 @@ d3-scale@^3.0.0: d3-time "1" d3-time-format "2" -d3-shape@^1.3.5: +d3-shape@^1.2.2, d3-shape@^1.3.5: version "1.3.5" resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.5.tgz#e81aea5940f59f0a79cfccac012232a8987c6033" integrity sha512-VKazVR3phgD+MUCldapHD7P9kcrvPcexeX/PkMJmkUov4JM8IxsSg1DvbYoYich9AtdTsa5nNk2++ImPiDiSxg==