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; `; const StyledTable = styled.table` width: 100%; border-collapse: collapse; margin-top: 2px; `; const StyledThead = styled.thead` background-color: #f1f1f1; `; const StyledTh = styled.th` border: 1px solid #ddd; padding: 8px; text-align: left; `; const StyledTr = styled.tr` &:nth-child(even) { background-color: #f2f2f2; } `; const StyledTd = styled.td` border: 1px solid #ddd; padding: 4px; text-align: left; `; const StyledHr = styled.hr` height: 1px; border: none; color: #000; background-color: #000; width: 100%; text-align: left; margin: 0 auto 0 0; `; 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> <StyledHr /> <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> <StyledHr /> <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> <StyledHr /> <small>last 30 seconds</small> <span class="text-success h3"> <b>{JSON.parse(data.body.avg_block_time).toFixed(2)}</b> sec </span> <StyledHr /> <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> <StyledHr /> </div> </div> <div class="p-2"> Top 5 Accounts <StyledTable> <StyledThead> <StyledTr> <StyledTh>account</StyledTh> <StyledTh> TX <small>last 30 mins </small> </StyledTh> </StyledTr> </StyledThead> <tbody> {data.body.topAccounts.map((account, index) => ( <StyledTr key={index}> <StyledTd>{account.receiver_account_id}</StyledTd> <StyledTd>{account.number_of_transactions}</StyledTd> </StyledTr> ))} </tbody> </StyledTable> </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> ); }