🚀 New features and improvements (#18)

components/Layout/Layout.tsx

@@ -1,7 +1,7 @@
 import { SnackbarProvider } from 'notistack'
 import React, { useMemo } from 'react'
 
-import { Box, GlobalStyles, NoSsr, darken, useMediaQuery, useTheme } from '@mui/material'
+import { Box, GlobalStyles, NoSsr, lighten, useMediaQuery, useTheme } from '@mui/material'
 
 import { ConsentBlock } from 'components/consent/ConsentBlock'
 
@@ -98,7 +98,7 @@ const Layout = ({ children, hasSearchBar = true, pageTitle }: LayoutProps) => {
         height: '8px',
       },
       '*::-webkit-scrollbar-thumb': {
-        backgroundColor: darken(`${theme.palette.border?.level2}55`, 0.3),
+        backgroundColor: lighten(`${theme.palette.border?.level3}55`, 0.4),
         borderRadius: '8px',
       },
       '*::-webkit-scrollbar-track': {

components/Layout/components/Sidebar/data.tsx

@@ -26,6 +26,7 @@ export enum PAGES {
   HOME = 'Home',
   EXPLORE = 'Explore',
   LEADERBOARD = 'Leaderboard',
+  CONTRACTS_LEADERBOARD = 'Contracts Leaderboard',
   RECENT_ACTIVITY = 'Recent Activity',
   DASHBOARD = 'Dashboard',
   MEMPOOL = 'Mempool',
@@ -40,6 +41,7 @@ export enum PAGES {
   TERMS_OF_SERVICE = 'Terms Of Service',
   CHANGELOG = 'Changelog',
   RESOURCES = 'Resources',
+  TOKENS = 'Tokens',
 }
 
 /**

components/Layout/components/TopBar/Buttons/WalletButton.tsx

@@ -17,34 +17,30 @@ interface WalletButtonProps {
 }
 
 /**
- * Buttons component.
+ * WalletButton component.
  *
- * This component provides the interface for the top bar buttons.
+ * This component renders a button in the top bar for wallet interactions.
  *
- * @param menuItems - The menu items.
- * @param setMenuItems - The function to set the menu items.
- *
- * @returns The JSX element of the Buttons component.
+ * @param {WalletButtonProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
  */
 const WalletButton: React.FC<WalletButtonProps> = ({ level = 'second' }) => {
   const { t } = useTranslation()
   const theme = useTheme()
   const { isConnected, provider, gatherData, openWallet, setOpenWallet, switchChain } = useWalletStore(s => s)
   const { filAddr, ethAddr, network: walletNetwork } = useWalletStore(s => s.walletInfo)
   const { network } = useAppSettingsStore(state => ({ network: state.network }))
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState<boolean>(false)
 
-  const address = useMemo(() => {
-    return filAddr ?? ethAddr
-  }, [filAddr, ethAddr])
+  const address = useMemo(() => filAddr ?? ethAddr, [filAddr, ethAddr])
 
   const handleClick = useCallback(() => {
     setOpen(prev => !prev)
-  }, [setOpen])
+  }, [])
 
   const handleClickAway = useCallback(() => {
     setOpen(false)
-  }, [setOpen])
+  }, [])
 
   useEffect(() => {
     if (isConnected && walletNetwork) {
@@ -53,20 +49,20 @@ const WalletButton: React.FC<WalletButtonProps> = ({ level = 'second' }) => {
         subscribeNatsSync(network, 'mempool')
       } else {
         switchChain(network)
-        handleClick()
+        setOpen(true)
       }
     }
   }, [walletNetwork, gatherData, isConnected, network, switchChain, handleClick])
 
   useEffect(() => {
     if (openWallet) {
-      handleClick()
+      setOpen(true)
       setOpenWallet(false)
     }
-  }, [handleClick, openWallet, setOpenWallet])
+  }, [openWallet, setOpenWallet])
 
-  return (
-    <ClickAwayListener onClickAway={handleClickAway}>
+  const renderWallet = useCallback(() => {
+    return (
       <Box>
         <Tooltip
           title={!isConnected ? t('Connect wallet') : t('Open wallet')}
@@ -120,8 +116,14 @@ const WalletButton: React.FC<WalletButtonProps> = ({ level = 'second' }) => {
           </Box>
         </Grow>
       </Box>
-    </ClickAwayListener>
-  )
+    )
+  }, [address, handleClick, isConnected, level, network, open, provider, t, theme])
+
+  if (open) {
+    return <ClickAwayListener onClickAway={handleClickAway}>{renderWallet()}</ClickAwayListener>
+  }
+
+  return renderWallet()
 }
 
 export default WalletButton

components/Layout/components/TopBar/Buttons/components/NotificationsPopup.tsx

@@ -91,7 +91,7 @@ const NotificationsPopup = () => {
               }}
             >
               {notifications.map(notification => (
-                <NotificationBody notification={notification} isFromStore key={notification.id} />
+                <NotificationBody notification={notification} isFromStore key={notification.id} shadow={false} />
               ))}
             </Box>
           </>