Explorer: useSWR & Sweets

gamba-labs · Oct 3, 2023 · 4873297 · 4873297
1 parent cac9af6
commit 4873297
Show file tree

Hide file tree

Showing 17 changed files with 349 additions and 562 deletions.
diff --git a/apps/explorer/package.json b/apps/explorer/package.json
@@ -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",

diff --git a/apps/explorer/public/logos/sweetscoin.png b/apps/explorer/public/logos/sweetscoin.png
diff --git a/apps/explorer/src/AllPlatforms.tsx b/apps/explorer/src/AllPlatforms.tsx
@@ -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 (
@@ -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">
@@ -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>
   )

diff --git a/apps/explorer/src/App.tsx b/apps/explorer/src/App.tsx
@@ -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('')
@@ -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('')
   }
 
@@ -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 />}