import React, {useState, useEffect} from "react" import * as fcl from "@onflow/fcl" import styled from "styled-components" import {Navbar, Nav, NavDropdown, Form, FormControl, Button} from "react-bootstrap" const Red = styled.span` color: red; ` const Green = styled.span` color: green; ` const splitSets = (sets) => { return sets.reduce((acc, cur) => {(acc[cur.series] = acc[cur.series] || []).push(cur); return acc}, {}) } const getTopshotOverview = async () => { const resp = await fcl.send([ fcl.script` import TopShot from 0x${window.topshotAddress} pub struct Set { pub let id: UInt32 pub let setName: String pub var locked: Bool pub let series: UInt32 init(id: UInt32, setName: String, series: UInt32) { self.id = id self.setName = setName self.series = series self.locked = TopShot.isSetLocked(setID: id)! } } pub struct TopshotOverview { pub let totalSupply: UInt64 pub var sets: [Set] init() { self.totalSupply = TopShot.totalSupply var setID = UInt32(1) var sets: [Set] = [] self.sets = sets while setID < TopShot.nextSetID { var setName = TopShot.getSetName(setID: setID) if setName == nil { setID = setID + UInt32(1) continue } var series = TopShot.getSetSeries(setID: setID) sets.append(Set(id: setID, setName: setName!, series: series!)) setID = setID + UInt32(1) } self.sets = sets } } pub fun main(): TopshotOverview { return TopshotOverview() } `, ]) return fcl.decode(resp) } export function TopShotNav() { const [error, setError] = useState(null) const [accountAddress, setAccountAddress] = useState("") const [seriesSets, setSeriesSets] = useState(null) useEffect(() => { getTopshotOverview() .then((d) => { console.log(d) setSeriesSets(splitSets(d.sets)) }) .catch(setError) }, []) return ( <Navbar bg="dark" variant="dark" expand="md" sticky="top"> <Navbar.Brand href="/"> {error ? <Red>Topshot Explorer</Red> : "Topshot Explorer"} </Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> <Nav.Link href="/plays">Plays</Nav.Link> {seriesSets && Object.entries(seriesSets).map( ([series, sets],i) => { return ( <NavDropdown key={series} title={`s${series} sets`} id="basic-nav-dropdown"> {sets.map((s) => { return ( <NavDropdown.Item key={s.id} href={"/sets/" + s.id}> {s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>} </NavDropdown.Item> ) })} </NavDropdown> ) } ) } {/* <NavDropdown title="Sets" id="basic-nav-dropdown"> {topshotOverview && topshotOverview.sets.map((s) => { return ( <NavDropdown.Item key={s.id} href={"/sets/" + s.id}> {s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>} </NavDropdown.Item> ) })} </NavDropdown> */} </Nav> <Form inline> <FormControl type="text" placeholder="0xAccountID" onChange={(event) => { setAccountAddress(event.target.value) }} className="mr-sm-2" /> <Button variant="outline-success" href={"/account/" + accountAddress}> Get Account </Button> </Form> </Navbar.Collapse> </Navbar> ) }