thunderhead-labs · Scalpweb · Jul 19, 2023 · Jul 19, 2023 · Jul 19, 2023 · Jul 19, 2023
diff --git a/.env b/.env
@@ -1,3 +1,3 @@
-NEXT_PUBLIC_API_URL = http://localhost:8000
+NEXT_PUBLIC_API_URL = https://stats-api.hyperliquid.xyz
 NEXT_PUBLIC_GOOGLE_ANALYTICS_CONFIG = G-8GN39Z428L
 
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
-    "typescript.enablePromptUseWorkspaceTsdk": true,
-    "editor.wordWrap": "wordWrapColumn",
-    "editor.wordWrapColumn": 140,
-    "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "editor.wordWrap": "wordWrapColumn",
+  "editor.wordWrapColumn": 140,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,31 +1,25 @@
 import { ChakraProvider } from '@chakra-ui/react';
-import theme from "../styles/theme";
-import { Providers } from "./providers";
+import theme from '../styles/theme';
+import { Providers } from './providers';
 
 export const metadata = {
-  title: 'Hyperliquid Stats',
-  description: 'Explore the Hyperliquid protocol’s statistics',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+  title: 'Hyperliquid stats',
+  description:
+    'Stats dashboard for Hyperliquid, a decentralized perpetual futures exchange on its own L1. Metrics include volume, users, open interest, funding rate, vault pnl, trader pnl, liquidations, inflows, outflows, and more.',
+};
 
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang='en'>
       <head>
-        <meta name="viewport" content="width=device-width" />
-        <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png" />
+        <meta name='viewport' content='width=device-width' />
+        <link rel='apple-touch-icon' sizes='180x180' href='/img/apple-touch-icon.png' />
+        <link rel='icon' type='image/png' sizes='32x32' href='/img/favicon-32x32.png' />
+        <link rel='icon' type='image/png' sizes='16x16' href='/img/favicon-16x16.png' />
       </head>
       <body>
-        <Providers>
-          {children}
-        </Providers>
+        <Providers>{children}</Providers>
       </body>
     </html>
-  )
+  );
 }
diff --git a/app/providers.tsx b/app/providers.tsx
@@ -1,33 +1,28 @@
-'use client'
+'use client';
 import { useEffect } from 'react';
-import { CacheProvider } from '@chakra-ui/next-js'
-import { ChakraProvider } from '@chakra-ui/react'
-import TagManager from 'react-gtm-module'
+import { CacheProvider } from '@chakra-ui/next-js';
+import { ChakraProvider } from '@chakra-ui/react';
+import TagManager from 'react-gtm-module';
 import { Global } from '@emotion/react';
-import theme from "../styles/theme";
+import theme from '../styles/theme';
 import { GlobalStyles } from '@/styles/global';
-import { DataContextProvider } from "../contexts/data";
+import { DataContextProvider } from '../contexts/data';
 
 const tagManagerArgs = { gtmId: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_CONFIG as string };
 
-export function Providers({
-    children
-}: {
-    children: React.ReactNode
-}) {
+export function Providers({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    TagManager.initialize(tagManagerArgs);
+  }, []);
 
-    useEffect(() => {
-        TagManager.initialize(tagManagerArgs)
-    }, []);
-
-    return (
-        <DataContextProvider>
-            <CacheProvider>
-                <ChakraProvider theme={theme}>
-                    <Global styles={GlobalStyles} />
-                    {children}
-                </ChakraProvider>
-            </CacheProvider>
-        </DataContextProvider>
-    )
-}
+  return (
+    <DataContextProvider>
+      <CacheProvider>
+        <ChakraProvider theme={theme}>
+          <Global styles={GlobalStyles} />
+          {children}
+        </ChakraProvider>
+      </CacheProvider>
+    </DataContextProvider>
+  );
+}
diff --git a/components/common/chartWrapper/index.tsx b/components/common/chartWrapper/index.tsx
@@ -1,67 +1,159 @@
-import { RiLoader5Fill } from 'react-icons/ri';
-import { Box, Button, ButtonGroup, Text, Spinner } from '@chakra-ui/react';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Text,
+  Spinner,
+  MenuButton,
+  Menu,
+  MenuList,
+  MenuItemOption,
+  MenuOptionGroup,
+  Grid,
+} from '@chakra-ui/react';
 
 interface Toggle {
-    text: string;
-    event: () => void;
-    active: boolean;
+  text: string;
+  event: () => void;
+  active: boolean;
 }
 
-const Loader = () => <Box w="100%" position="absolute" top="calc(50% - 10px)" display="flex" justifyContent="center"><Spinner display="flex" w="30px" h="30px" /></Box>
+export interface CoinSelector {
+  name: string;
+  event: () => void;
+  isChecked: boolean;
+}
+
+const Loader = () => (
+  <Box w='100%' position='absolute' top='calc(50% - 10px)' display='flex' justifyContent='center'>
+    <Spinner display='flex' w='30px' h='30px' />
+  </Box>
+);
+
+type Props = {
+  title: string;
+  loading: boolean;
+  controls?: {
+    toggles: Toggle[];
+  };
+  zIndex?: number;
+  coinSelectors?: CoinSelector[];
+  children?: React.ReactNode;
+};
+
+function ChartWrapper({ title, loading, controls, zIndex, coinSelectors, children }: Props) {
+  const isMobile = useIsMobile();
+  const controlButtons =
+    controls &&
+    controls.toggles &&
+    controls.toggles.length > 0 &&
+    controls.toggles.map((toggle: Toggle, index: number) => {
+      return (
+        <Button
+          key={`toggle-chart-${index}`}
+          onClick={() => toggle.event()}
+          variant={toggle.active ? 'primary' : 'faded'}
+          size='sm'
+        >
+          {toggle.text}
+        </Button>
+      );
+    });
+
+  const coinSelectorsMenu = coinSelectors && (
+    <Box>
+      <Menu closeOnSelect={false} preventOverflow={true}>
+        <MenuButton
+          as={Button}
+          rightIcon={<ChevronDownIcon />}
+          variant='primary'
+          fontSize={'14px'}
+          size='sm'
+        >
+          Select coins
+        </MenuButton>
+        <MenuList
+          minWidth='100px'
+          maxHeight='300px'
+          overflowY='auto'
+          css={{
+            '&::-webkit-scrollbar': {
+              width: '4px',
+            },
+            '&::-webkit-scrollbar-track': {
+              width: '6px',
+            },
+            '&::-webkit-scrollbar-thumb': {
+              background: '#FFF',
+              borderRadius: '24px',
+            },
+          }}
+        >
+          <MenuOptionGroup
+            type='checkbox'
+            value={coinSelectors
+              .filter((coinSelector: CoinSelector) => coinSelector.isChecked)
+              .map((coinSelector: CoinSelector) => coinSelector.name)}
+          >
+            {coinSelectors.map((coinSelector: CoinSelector, index: number) => {
+              return (
+                <MenuItemOption
+                  value={coinSelector.name}
+                  key={`toggle-chart-${index}`}
+                  onClick={() => coinSelector.event()}
+                  isChecked={coinSelector.isChecked}
+                >
+                  {coinSelector.name}
+                </MenuItemOption>
+              );
+            })}
+          </MenuOptionGroup>
+        </MenuList>
+      </Menu>
+    </Box>
+  );
 
-function ChartWrapper(props: any) {
-    const {
-        title,
-        loading,
-        csvFields,
-        data,
-        controls,
-        zIndex,
-    } = props;
+  const menu = (
+    <Box display='flex' padding='0'>
+      <Grid
+        mb='1rem'
+        templateColumns='1fr auto'
+        gap={controls ? '2' : '0'}
+        justifyContent='flex-start'
+      >
+        {isMobile && controls ? (
+          controlButtons
+        ) : (
+          <ButtonGroup isAttached={true}>{controlButtons}</ButtonGroup>
+        )}
+        {coinSelectorsMenu}
+      </Grid>
+    </Box>
+  );
 
-    return (
-        <Box display="grid" width={{ xs: '100%', md: '100%' }} mt="3" p={{ xs: '0', md: '0 5 0 0' }}>
-            <Box position="relative"
-                p={{ xs: '2', md: '4' }}
-                bg="#0f2e29"
-                boxShadow="0px 0px 7px rgb(0 0 0 / 20%)"
-                borderRadius={{ xs: '0', md: '2xl' }}
-                zIndex={zIndex}
-            >
-                <Box w="100%" mb="2">
-                    <Box w="100%" mb="2"
-                        display="flex"
-                        justifyContent="space-between"
-                        flexDirection={{ xs: "column", md: "row" }}
-                    >
-                        <Text display="flex" w={{ xs: "100%", md: "100%" }} fontSize="1.2rem" fontWeight="600">
-                            {title}
-                        </Text>
-                        <Box w={{ xs: "100%", md: "100%" }} display="flex" justifyContent={{ xs: "flex-start", md: "flex-end" }}
-                            mt={controls && controls.toggles && controls.toggles.length && "2"}
-                            mb="1rem">
-                            <ButtonGroup isAttached={true}>
-                                {controls && controls.toggles && controls.toggles.length > 0 && controls.toggles.map((toggle: Toggle, index: number) => {
-                                    return (
-                                        <Button
-                                            key={`toggle-chart-${index}`}
-                                            onClick={() => toggle.event()}
-                                            variant={toggle.active ? "primary" : "faded"}
-                                            size="sm"
-                                        >
-                                            {toggle.text}
-                                        </Button>
-                                    )
-                                })}
-                            </ButtonGroup>
-                        </Box>
-                    </Box>
-                </Box>
-                {loading && <Loader />}
-                {props.children}
-            </Box>
-        </Box>
-    );
+  return (
+    <Box display='grid' mt='3' p={{ xs: '0', md: '0 5 0 0' }}>
+      <Box
+        position='relative'
+        p={{ xs: '2', md: '4' }}
+        bg='#0f2e29'
+        boxShadow='0px 0px 7px rgb(0 0 0 / 20%)'
+        borderRadius={{ xs: '0', md: '2xl' }}
+        zIndex={zIndex}
+      >
+        <Grid gridTemplateColumns={{ xs: '1fr', xl: '1fr auto' }} gap={4}>
+          <Text fontSize='1.2rem' fontWeight='600' whiteSpace={'nowrap'}>
+            {title}
+          </Text>
+          {menu}
+        </Grid>
+        {loading && <Loader />}
+        {children}
+      </Box>
+    </Box>
+  );
 }
 
-export default ChartWrapper;
+export default ChartWrapper;