const data = fetch( "https://front.near-staking.com/api/near/avg_block_time,tps,block_time_low,block_time_high,top_accounts,highest_tps?block_time_days=1&tps_days=3", { subscribe: true, method: "GET", headers: { Accept: "*/*", }, } ); const GridContainer = styled.div` display: grid; grid-template-columns: 1fr 1fr; gap: 20px; `; if (data !== null && data.ok === false) { return ( <div className="text-bg-light rounded-4 p-3 mb-3"> <p>houston we have a problem, wen mon ser?</p> </div> ); } else { return ( <div className="text-bg-light rounded-4 p-3 mb-3"> {data !== null ? ( <p> <div class="d-flex clearfix flex-wrap flex-column flex-sm-row"> <div class="p-2"> <div>TPS Now</div> <span class="text-success h3"> <b>{JSON.parse(data.body.tps).toFixed(0)}</b> </span> <small>in block: </small> <b>{JSON.parse(data.body.tps_block)}</b> </div> <div class="p-2"> <div> TPS <b>3 Days</b> Peak </div> <span class="text-success h3"> <b>{JSON.parse(data.body.highest_tps).toFixed(0)}</b> </span> <small>in block: </small> <a target="_blank" href={ "https://nearblocks.io/blocks/" + data.body.highest_tps_block_hash } > {JSON.parse(data.body.highest_tps_block)} </a> </div> <div class="p-2"> <div> Avg Block Time <b>Now</b> </div> <small>last 30 seconds</small> <span class="text-success h3"> <b>{JSON.parse(data.body.avg_block_time).toFixed(2)}</b> sec </span> <GridContainer> <div> <div>1 Day High</div> <span class="h5"> <b>{JSON.parse(data.body.block_time_high).toFixed(2)}</b>{" "} sec </span> </div> <div> <div>1 Day Low</div> <span class="h5"> <b>{JSON.parse(data.body.block_time_low).toFixed(2)}</b> sec </span> </div> </GridContainer> </div> </div> <div class="p-2"> <small> widget sponsored by{" "} <a target="_blank" style={{ color: "inherit" }} variant="caption" rel="nofollow" href="https://www.nearweek.com" > <b>NEARWEEK</b> </a> </small> </div> </p> ) : ( <div>Loading ...</div> )} </div> ); }