feat: wp

hirosystems · Jan 29, 2025 · 603783f · 603783f
1 parent b706da4
commit 603783f
Show file tree

Hide file tree

Showing 13 changed files with 226 additions and 336 deletions.
diff --git a/src/app/_components/NewNavBar/FeePopover.tsx b/src/app/_components/NewNavBar/FeePopover.tsx
@@ -141,6 +141,9 @@ export const FeePopover = () => {
           borderBottomRadius={open ? 'none' : 'lg'}
           p={2}
           gap={3}
+          h={10}
+          alignItems="center"
+          justifyContent="center"
         >
           <Text fontSize="xs" fontFamily="var(--font-matter-mono)">
             Fees: 0.18 STX

diff --git a/src/app/_components/NewNavBar/Logo.tsx b/src/app/_components/NewNavBar/Logo.tsx
@@ -25,14 +25,6 @@ const StacksIcon = (iconProps: IconProps) => {
   );
 };
 
-// export function Logo({ ...iconProps }: IconProps) {
-//   return (
-//     <ExplorerLink href={'/'} title="Stacks Explorer">
-//       <StacksIcon h={13} w={13} />
-//     </ExplorerLink>
-//   );
-// }
-
 export function Logo({ size, ...iconProps }: IconProps & { size: number }) {
   const outerRingSize = size + 4;
   const innerRingSize = size + 2;
@@ -44,14 +36,14 @@ export function Logo({ size, ...iconProps }: IconProps & { size: number }) {
   const handleMouseEnter = () => {
     setInnerRingVisible(true);
     setTimeout(() => {
-      setOuterRingVisible(true);
-    }, 100); // Delay for the inner layer
+      setOuterRingVisible(true); // Delay the outer layer
+    }, 100);
   };
 
   const handleMouseLeave = () => {
     setOuterRingVisible(false);
     setTimeout(() => {
-      setInnerRingVisible(false);
+      setInnerRingVisible(false); // Delay the inner layer
     }, 100);
   };
 

diff --git a/src/app/_components/NewNavBar/NavBar.tsx b/src/app/_components/NewNavBar/NavBar.tsx
@@ -1,105 +1,16 @@
 'use client';
 
-import { Flex, Icon, useDisclosure } from '@chakra-ui/react';
-import { Plus } from '@phosphor-icons/react';
-import { useMemo } from 'react';
+import { Flex } from '@chakra-ui/react';
 
-import { openModal } from '../../../common/components/modals/modal-slice';
-import { MODALS } from '../../../common/constants/constants';
-import { useGlobalContext } from '../../../common/context/useGlobalContext';
-import { useAppDispatch } from '../../../common/state/hooks';
-import { Network } from '../../../common/types/network';
 import { TokenPrice } from '../../../common/types/tokenPrice';
-import { buildUrl } from '../../../common/utils/buildUrl';
-import { capitalize } from '../../../common/utils/utils';
 import { FeePopover } from './FeePopover';
 import { Logo } from './Logo';
-import { NavLabel } from './NavLabel';
-import { NetworkLabel } from './NetworkLabel';
 import PagesSlidingMenu from './PagesSlidingMenu';
 import { SettingsPopover } from './SettingsPopover';
-import { NavItem } from './types';
 
 export function NavBar({ tokenPrice }: { tokenPrice: TokenPrice }) {
-  const { open, onToggle } = useDisclosure();
-  const { networks, activeNetwork } = useGlobalContext();
-  const dispatch = useAppDispatch();
-
-  const navItems: NavItem[] = useMemo(
-    () => [
-      {
-        id: 'explore',
-        label: 'Explore',
-        children: [
-          {
-            id: 'blocks',
-            label: <NavLabel>Blocks</NavLabel>,
-            href: buildUrl('/blocks', activeNetwork),
-          },
-          {
-            id: 'tokens',
-            label: <NavLabel>Tokens</NavLabel>,
-            href: buildUrl('/tokens', activeNetwork),
-          },
-          {
-            id: 'transactions',
-            label: <NavLabel>Transactions</NavLabel>,
-            href: buildUrl('/transactions', activeNetwork),
-          },
-          {
-            id: 'signers',
-            label: <NavLabel>Signers</NavLabel>,
-            href: buildUrl('/signers', activeNetwork),
-          },
-        ],
-      },
-      {
-        id: 'sandbox',
-        label: 'Sandbox',
-        href: buildUrl('/sandbox/deploy', activeNetwork),
-      },
-      {
-        id: 'network',
-        label: capitalize(activeNetwork.mode ?? 'Custom network'),
-        children: [
-          ...Object.values<Network>(networks).map((network, key) => {
-            return {
-              id: network.url,
-              label: <NetworkLabel network={network} key={key} />,
-            };
-          }),
-          {
-            id: 'add-network',
-            label: (
-              <NavLabel
-                icon={
-                  <Icon h={4} w={4} color={'text'}>
-                    <Plus />
-                  </Icon>
-                }
-              >
-                Add a network
-              </NavLabel>
-            ),
-            onClick: () => {
-              dispatch(openModal(MODALS.ADD_NETWORK));
-            },
-          },
-        ],
-      },
-    ],
-    [activeNetwork, networks, dispatch]
-  );
-
   return (
-    <Flex
-      width="full"
-      h={20}
-      alignItems="center"
-      border="1px solid"
-      borderColor="surface"
-      justifyContent="space-between"
-    >
+    <Flex width="full" h={10} alignItems="center" justifyContent="space-between">
       <Flex alignItems="center" gap={6}>
         <Logo size={10} />
         <PagesSlidingMenu width={50} />

diff --git a/src/app/_components/NewNavBar/NetworkSetting.tsx b/src/app/_components/NewNavBar/NetworkSetting.tsx
@@ -1,4 +1,5 @@
-import { DEFAULT_DEVNET_SERVER } from '@/common/constants/constants';
+import { openModal } from '@/common/components/modals/modal-slice';
+import { DEFAULT_DEVNET_SERVER, MODALS } from '@/common/constants/constants';
 import { DEFAULT_MAINNET_SERVER, DEFAULT_TESTNET_SERVER } from '@/common/constants/env';
 import { useGlobalContext } from '@/common/context/useGlobalContext';
 import { useCustomNetworkApiInfo } from '@/common/queries/useCustomNetworkApiInfo';
@@ -24,7 +25,7 @@ const DeleteNetworkMessage = ({
     <Stack
       p={3}
       border="1px solid"
-      borderColor="var(--stacks-colors-status-red-400)"
+      borderColor="feedback.red-400"
       borderRadius="md"
       pointerEvents="auto"
       cursor="default"
@@ -43,7 +44,7 @@ const DeleteNetworkMessage = ({
             e.preventDefault();
             onDelete();
           }}
-          bg="var(--stacks-colors-status-red-500)"
+          bg="feedback.red-500"
         >
           <Text fontSize="xs" fontWeight="medium" color="var(--stacks-colors-neutral-sand-50)">
             Delete
@@ -191,6 +192,7 @@ const NetworkLabel = ({ network }: { network: Network }) => {
 export const NetworkSetting = () => {
   // const networks = useNetworks();
   // const activeNetwork = useActiveNetwork();
+  const dispatch = useAppDispatch();
 
   const { networks } = useGlobalContext();
   return (
@@ -209,6 +211,7 @@ export const NetworkSetting = () => {
         borderRadius="md"
         fontWeight="medium"
         w="fit-content"
+        onClick={() => dispatch(openModal(MODALS.ADD_NETWORK))}
       >
         Add a network
       </Button>

diff --git a/src/app/_components/NewNavBar/ReusableThemeSetting.tsx b/src/app/_components/NewNavBar/ReusableThemeSetting.tsx
diff --git a/src/app/_components/NewNavBar/SettingsPopover.tsx b/src/app/_components/NewNavBar/SettingsPopover.tsx
@@ -1,12 +1,11 @@
 import { PopoverContent, PopoverRoot, PopoverTrigger } from '@/components/ui/popover';
 import { Flex, Icon, Separator, Stack } from '@chakra-ui/react';
-import { GearFine } from '@phosphor-icons/react';
+import { GearFine, X } from '@phosphor-icons/react';
 import { useState } from 'react';
 
 import { CurrencySetting } from './CurrencySetting';
 import { NetworkSetting } from './NetworkSetting';
 import { ThemeSetting } from './ThemeSetting';
-import { ReusableThemeSetting } from './ReusableThemeSetting';
 
 export const SettingsPopover = () => {
   const [open, setOpen] = useState(false);
@@ -26,15 +25,14 @@ export const SettingsPopover = () => {
         <Flex
           alignItems="center"
           justifyContent="center"
-          gap={2}
-          py={3}
-          px={3}
           bg="surfacePrimary"
           borderRadius="lg"
           borderBottomRadius={open ? 'none' : 'lg'}
+          h={10}
+          w={10}
         >
-          <Icon h={4} w={4} color="iconSecondary">
-            <GearFine />
+          <Icon h={4} w={4} color="iconPrimary">
+            {open ? <X /> : <GearFine />}
           </Icon>
         </Flex>
       </PopoverTrigger>
@@ -47,8 +45,7 @@ export const SettingsPopover = () => {
         bg="surfacePrimary"
       >
         <Stack separator={<Separator my={3} borderColor="newBorderSecondary" />}>
-          {/* <ThemeSetting /> */}
-          <ReusableThemeSetting />
+          <ThemeSetting />
           <CurrencySetting />
           <NetworkSetting />
         </Stack>

diff --git a/src/app/_components/NewNavBar/ThemeSetting.tsx b/src/app/_components/NewNavBar/ThemeSetting.tsx
@@ -1,65 +1,51 @@
-'use client';
-
-import { capitalize } from '@/common/utils/utils';
 import { useColorMode } from '@/components/ui/color-mode';
 import { Text } from '@/ui/Text';
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, ClientOnly, Flex } from '@chakra-ui/react';
+import { Moon, SunDim } from '@phosphor-icons/react';
+
+import { OptionPicker } from './OptionPicker';
 
-import { UniversalColorModeButton } from './UniversalColorModeButton';
+const options = [
+  {
+    id: 'light',
+    label: 'Light',
+    value: 'light',
+    icon: <SunDim />,
+  },
+  {
+    id: 'dark',
+    label: 'Dark',
+    value: 'dark',
+    icon: <Moon />,
+  },
+];
+
+export const ThemeSettingBase = () => {
+  const { colorMode, setColorMode } = useColorMode();
 
-export const ThemeSetting = () => {
-  const { colorMode } = useColorMode();
   return (
-    <Flex justifyContent="space-between" gap={4}>
+    <Flex justifyContent="space-between" gap={8}>
       <Box>
         <Text color="textPrimary" fontSize="xs">
           Theme
         </Text>
         <Text color="textSecondary" fontSize="xs">
-          {capitalize(colorMode)}
+          {options.find(option => option.id === colorMode)?.label}
         </Text>
       </Box>
-      <Flex
-        border="1px solid"
-        borderColor="newBorderSecondary"
-        borderRadius="lg"
-        p={1}
-        gap={1}
-        alignItems="center"
-      >
-        <UniversalColorModeButton
-          colorMode="light"
-          aria-label={'Change color mode'}
-          color={colorMode === 'light' ? 'iconInvert' : 'iconSecondary'}
-          borderRadius="md"
-          iconSize={4}
-          h={6}
-          w={8}
-          py={1}
-          px={2}
-          bg={colorMode === 'light' ? 'surfaceInvert' : 'surfacePrimary'}
-          _hover={{
-            bg: colorMode === 'light' ? 'surfaceInvert' : 'surfaceTertiary',
-            color: colorMode === 'light' ? 'iconInvert' : 'surfaceInvert',
-          }}
-        />
-        <UniversalColorModeButton
-          colorMode="dark"
-          aria-label={'Change color mode'}
-          color={colorMode === 'dark' ? 'iconInvert' : 'iconSecondary'}
-          borderRadius="md"
-          iconSize={4}
-          h={6}
-          w={8}
-          py={1}
-          px={2}
-          bg={colorMode === 'dark' ? 'surfaceInvert' : 'surfacePrimary'}
-          _hover={{
-            bg: colorMode === 'dark' ? 'surfaceInvert' : 'surfaceTertiary',
-            color: colorMode === 'dark' ? 'iconInvert' : 'surfaceInvert',
-          }}
-        />
-      </Flex>
+      <OptionPicker
+        options={options}
+        controlledSelectedOptionId={colorMode}
+        onSelect={optionId => {
+          setColorMode(optionId as 'light' | 'dark');
+        }}
+      />
     </Flex>
   );
 };
+
+export const ThemeSetting = () => (
+  <ClientOnly>
+    <ThemeSettingBase />
+  </ClientOnly>
+);