Skip to content

Commit

Permalink
Explorer: useSWR & Sweets
Browse files Browse the repository at this point in the history
  • Loading branch information
bone-house committed Oct 3, 2023
1 parent cac9af6 commit 4873297
Show file tree
Hide file tree
Showing 17 changed files with 349 additions and 562 deletions.
3 changes: 2 additions & 1 deletion apps/explorer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.6.1",
"react-router-dom": "^6.10.0",
"styled-components": "^6.0.8"
"styled-components": "^6.0.8",
"swr": "^2.2.4"
},
"devDependencies": {
"@types/react": "^18.2.0",
Expand Down
Binary file added apps/explorer/public/logos/sweetscoin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 19 additions & 56 deletions apps/explorer/src/AllPlatforms.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,10 @@
import { Box, Card, Container, Flex, Grid, Table, Text } from '@radix-ui/themes'
import { Box, Container, Flex, Grid, Table, Text } from '@radix-ui/themes'
import React from 'react'
import { Graph } from './Graph'
import { Money } from './Money'
import { getCreators, getDailyVolume } from './api'
import { Loader } from './components/Loader'
import { useApi } from './api'
import { PlatformAccountItem } from './components/AccountItem'
import { Loader } from './components/Loader'
import { TableRowNavLink } from './components/TableRowLink'
import { DailyVolume } from './data'

export function VolumeGraph({ creator }: {creator?: string}) {
const [dailyVolume, setDailyVolume] = React.useState<DailyVolume[]>([])
const [hovered, setHovered] = React.useState<DailyVolume | null>(null)

React.useEffect(() => {
getDailyVolume(creator).then(setDailyVolume).catch(console.error)
}, [])

const totalVolume = React.useMemo(() => {
return dailyVolume.reduce((prev, creator) => prev + creator.total_volume, 0)
}, [dailyVolume])

return (
<Card size="2">
<Grid gap="2">
<Text color="gray">
{hovered?.date ? new Date(hovered.date).toLocaleString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) : '30d Volume'}
</Text>
<Text size="7" weight="bold">
<Money lamports={hovered?.total_volume ?? totalVolume} />
</Text>
<Box style={{height: '200px'}}>
<Graph onHover={setHovered} dailyVolume={dailyVolume} />
</Box>
</Grid>
</Card>
)
}

function useDashboard() {
const [loading, setLoading] = React.useState(true)
const [creators, setCreators] = React.useState<{creator: string, volume: number}[]>([])

React.useEffect(() => {
const fetch = async () => {
try {
setLoading(true)
setCreators(await getCreators())
} finally {
setLoading(false)
}
}
fetch()
}, [])

return {loading, creators}
}

function CreatorList({creators}: {creators: {creator: string, volume: number}[]}) {
return (
Expand Down Expand Up @@ -101,9 +51,14 @@ function CreatorList({creators}: {creators: {creator: string, volume: number}[]}
}

export function AllPlatforms() {
const {loading, creators} = useDashboard()
const { data, isLoading, error } = useApi('/stats/creators')

if (loading) {
const sorted = React.useMemo(
() => data?.creators.sort((a, b) => b.volume - a.volume),
[data?.creators]
)

if (isLoading) {
return (
<Container>
<Flex align="center" justify="center" p="4">
Expand All @@ -113,13 +68,21 @@ export function AllPlatforms() {
)
}

if (error || !sorted) {
return (
<Container>
Failed to fetch all platforms
</Container>
)
}

return (
<Container>
<Grid gap="4">
<Box>
<Text color="gray">All Platforms</Text>
</Box>
<CreatorList creators={creators} />
<CreatorList creators={sorted} />
</Grid>
</Container>
)
Expand Down
24 changes: 8 additions & 16 deletions apps/explorer/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { Dashboard } from './Dashboard'
import { PlatformView } from './Platform'
import { PlayView } from './PlayView'
import { PlayerView } from './Player'
import { Search } from './Search'
import { AllPlatforms } from './AllPlatforms'
import { isPubkey, isSignature } from './utils'

export function App() {
const [search, setSearch] = React.useState('')
Expand All @@ -17,7 +17,13 @@ export function App() {
const submit = (e: React.FormEvent) => {
e.preventDefault()
const _search = search.trim()
navigate('/search/' + _search)
if (isSignature(_search)) {
navigate('/play/' + _search)
} else if (isPubkey(_search)) {
navigate('/creator/' + _search)
} else {
return alert('Invalid signature or address')
}
setSearch('')
}

Expand Down Expand Up @@ -60,25 +66,11 @@ export function App() {
</Container>
</Box>
<Container p="4">
{/* <Box mb="4">
<Callout.Root>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
The explorer is in Beta. Come back soon for more stats and filtering options!
</Callout.Text>
</Callout.Root>
</Box> */}
<Routes>
<Route
path="/"
element={<Dashboard />}
/>
<Route
path="/search/:signatureOrAddress"
element={<Search />}
/>
<Route
path="/platforms"
element={<AllPlatforms />}
Expand Down
Loading

0 comments on commit 4873297

Please sign in to comment.