Skip to content

Commit

Permalink
Add top platforms to dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@bone-house
bone-house committed Oct 2, 2023
1 parent 3385d34 commit a89c716
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 53 deletions.
108 changes: 60 additions & 48 deletions apps/explorer/src/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import { StarFilledIcon } from '@radix-ui/react-icons'
import { Badge, Box, Card, Container, Flex, Grid, Link, Table, Text } from '@radix-ui/themes'
import { LightningBoltIcon, StarFilledIcon } from '@radix-ui/react-icons'
import { Badge, Box, Card, Container, Flex, Grid, Table, Text } from '@radix-ui/themes'
import React from 'react'
import Marquee from 'react-fast-marquee'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'
import { Graph } from './Graph'
import { Money } from './Money'
import { END_TIME, TopBetResult, getCreators, getDailyVolume, getPlayers, getTopBets } from './api'
import { Loader } from './components/Loader'
import { PlatformText } from './components/PlatformText'
import { TableRowNavLink } from './components/TableRowLink'
import { DailyVolume, getCreatorMeta } from './data'
import styled from 'styled-components'
import { DocumentTitle } from './useDocumentTitle'

const TopPlayLink = styled(NavLink)`
text-decoration: none;
Expand Down Expand Up @@ -50,6 +49,7 @@ export function VolumeGraph({ creator }: {creator?: string}) {
function useDashboard() {
const [loading, setLoading] = React.useState(true)
const [creators, setCreators] = React.useState<{creator: string, volume: number}[]>([])
const [trendingCreators, setTrendingCreators] = React.useState<{creator: string, volume: number}[]>([])
const [uniquePlayers, setUniquePlayers] = React.useState(0)
const [topBets, setTopBets] = React.useState<TopBetResult>({ top_multiplier: [], top_profit: [] })

Expand All @@ -58,6 +58,7 @@ function useDashboard() {
try {
setLoading(true)
setCreators(await getCreators())
setTrendingCreators(await getCreators({days: 7}))
setUniquePlayers(await getPlayers({startTime: 0, endTime: END_TIME}))
setTopBets(await getTopBets())
} finally {
Expand All @@ -67,11 +68,55 @@ function useDashboard() {
fetch()
}, [])

return {loading, creators, uniquePlayers, topBets}
return {loading, creators, trendingCreators, uniquePlayers, topBets}
}

function CreatorList({creators}: {creators: {creator: string, volume: number}[]}) {
return (
<Table.Root className="CreatorsTable" variant="surface">
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>
#
</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>
Platform
</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell align="right">
Volume
</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>

<Table.Body>
{creators.map((creator, i) => {
const { creator: address, volume } = creator
const index = creators.indexOf(creator)
return (
<TableRowNavLink key={i} to={'/platform/' + address}>
<Table.Cell>
<Text>
{index + 1}
</Text>
</Table.Cell>
<Table.Cell>
<PlatformText address={address} />
</Table.Cell>
<Table.Cell align="right">
<Text>
<Money lamports={volume} />
</Text>
</Table.Cell>
</TableRowNavLink>
)
})}
</Table.Body>
</Table.Root>
)
}

export function Dashboard() {
const {loading, creators, topBets, uniquePlayers} = useDashboard()
const {loading, trendingCreators, creators, topBets, uniquePlayers} = useDashboard()

const totalVolume = React.useMemo(() => {
return creators.reduce((prev, creator) => prev + creator.volume, 0)
Expand Down Expand Up @@ -156,51 +201,18 @@ export function Dashboard() {
</Grid>
</Card>
</Box>
<Box>
<Flex gap="2" align="center">
<LightningBoltIcon />
<Text color="gray">Top Platforms this week</Text>
</Flex>
</Box>
<CreatorList creators={trendingCreators.slice(0, 5)} />

<Box>
<Grid gap="2">
<Table.Root className="CreatorsTable" variant="surface">
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>
#
</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>
Platform
</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell align="right">
Volume
</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>

<Table.Body>
{creators.map((creator, i) => {
const { creator: address, volume } = creator
const creatorMeta = getCreatorMeta(address)
const index = creators.indexOf(creator)
return (
<TableRowNavLink key={i} to={'/platform/' + address}>
<Table.Cell>
<Text>
{index + 1}
</Text>
</Table.Cell>
<Table.Cell>
<PlatformText address={address} />
</Table.Cell>
<Table.Cell align="right">
<Text>
<Money lamports={volume} />
</Text>
</Table.Cell>
</TableRowNavLink>
)
})}
</Table.Body>
</Table.Root>
</Grid>
<Text color="gray">All Platforms</Text>
</Box>
<CreatorList creators={creators} />
</Grid>
</Container>
)
Expand Down
11 changes: 6 additions & 5 deletions apps/explorer/src/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ const URL = 'https://209.38.229.113.nip.io:3001'
const ONE_DAY = 1000 * 60 * 60 * 24

const daysAgo = (daysAgo: number) => {
const now = new Date();
const then = new Date();
const now = new Date()
const then = new Date()
then.setDate(now.getDate() - daysAgo)
then.setHours(0, 0, 0, 0);
then.setHours(0, 0, 0, 0)
return then.getTime()
}

Expand All @@ -20,8 +20,9 @@ export const getDailyVolume = async (creator?: string) => {
return (await res.json()).daily_volumes as DailyVolume[]
}

export const getCreators = async () => {
const res = await window.fetch(URL + '/stats/creators?start=' + 0 + '&end=' + END_TIME / 1000 + '&creator=' + '')
export const getCreators = async (params?: {days?: number}) => {
const startTime = !params?.days ? 0 : daysAgo(params.days)
const res = await window.fetch(URL + `/stats/creators?start=${startTime/1000}&end=` + END_TIME / 1000 + '&creator=' + '')
const creators = (await res.json()).creators as {creator: string, volume: number}[]
return creators.sort((a, b) => b.volume - a.volume)
}
Expand Down

0 comments on commit a89c716

Please sign in to comment.