fix DeFi dropdown

toolkit/theme/recipes/button.recipe.ts

@@ -3,6 +3,7 @@ import { defineRecipe } from '@chakra-ui/react';
 export const recipe = defineRecipe({
   base: {
     display: 'flex',
+    gap: 0,
     borderRadius: 'base',
     fontWeight: 600,
     overflow: 'hidden',
@@ -13,6 +14,7 @@ export const recipe = defineRecipe({
   variants: {
     visual: {
       solid: {
+        gap: 0,
         bg: 'blue.600',
         color: 'white',
         _hover: {

ui/snippets/topBar/DeFiDropdown.tsx

-import { Button, Box, Flex, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, chakra } from '@chakra-ui/react';
+import { Box, Flex, Link, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { space } from 'lib/html-entities';
 import getPageType from 'lib/mixpanel/getPageType';
 import * as mixpanel from 'lib/mixpanel/index';
-import Popover from 'ui/shared/chakra/Popover';
+import { Button } from 'toolkit/chakra/button';
+import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import IconSvg from 'ui/shared/IconSvg';
 
 import DeFiDropdownItem from './DeFiDropdownItem';
@@ -17,7 +20,7 @@ const feature = config.features.deFiDropdown;
 const DeFiDropdown = () => {
   const router = useRouter();
   const source = getPageType(router.pathname);
-  const { isOpen, onToggle, onClose } = useDisclosure();
+  const { open, onToggle, onOpenChange } = useDisclosure();
 
   const handleClick = React.useCallback((content: string) => {
     mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: content, Source: source });
@@ -28,9 +31,9 @@ const DeFiDropdown = () => {
   }
 
   const buttonStyles = {
-    variant: 'solid',
-    size: 'xs',
+    visual: 'solid' as const,
     borderRadius: 'sm',
+    textStyle: 'xs',
     height: 5,
     px: 1.5,
     fontWeight: '500',
@@ -42,15 +45,15 @@ const DeFiDropdown = () => {
   }));
 
   return items.length > 1 ? (
-    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+    <PopoverRoot open={ open } onOpenChange={ onOpenChange } positioning={{ placement: 'bottom-start' }} lazyMount>
       <PopoverTrigger>
         <Button
           onClick={ onToggle }
-          isActive={ isOpen }
+          active={ open }
           { ...buttonStyles }
         >
-          <chakra.span display={{ base: 'none', lg: 'inline' }} mr={ 1 }>
-            Blockscout
+          <chakra.span display={{ base: 'none', lg: 'inline' }} whiteSpace="pre-wrap">
+            Blockscout{ space }
           </chakra.span>
           DeFi
           <IconSvg name="arrows/east-mini" boxSize={ 4 } ml={ 1 } transform="rotate(-90deg)"/>
@@ -65,19 +68,29 @@ const DeFiDropdown = () => {
           </Flex>
         </PopoverBody>
       </PopoverContent>
-    </Popover>
+    </PopoverRoot>
   ) : (
     <Button
-      as="a"
-      href={ items[0].dappId ? route({ pathname: '/apps/[id]', query: { id: items[0].dappId, action: 'connect' } }) : items[0].url }
-      target={ items[0].dappId ? '_self' : '_blank' }
+      asChild
       onClick={ items[0].onClick }
+      _hover={{
+        color: 'white',
+      }}
       { ...buttonStyles }
     >
-      <IconSvg name={ items[0].icon } boxSize={ 3 } mr={{ base: 0, sm: 1 }}/>
-      <Box display={{ base: 'none', sm: 'inline' }}>
-        { items[0].text }
-      </Box>
+      <Link
+        href={
+          items[0].dappId ?
+            route({ pathname: '/apps/[id]', query: { id: items[0].dappId, action: 'connect' } }) :
+            items[0].url
+        }
+        target={ items[0].dappId ? '_self' : '_blank' }
+      >
+        <IconSvg name={ items[0].icon } boxSize={ 3 } mr={{ base: 0, sm: 1 }}/>
+        <Box display={{ base: 'none', sm: 'inline' }}>
+          { items[0].text }
+        </Box>
+      </Link>
     </Button>
   );
 };

ui/snippets/topBar/DeFiDropdownItem.tsx

-import { Text, useColorModeValue } from '@chakra-ui/react';
+import { Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { DeFiDropdownItem as TDeFiDropdownItem } from 'types/client/deFiDropdown';
@@ -19,11 +19,11 @@ const DeFiDropdownItem = ({ item }: Props) => {
     height: '34px',
     display: 'inline-flex',
     alignItems: 'center',
-    color: useColorModeValue('blackAlpha.800', 'gray.400'),
+    color: { base: 'blackAlpha.800', _dark: 'gray.400' },
     _hover: {
       textDecoration: 'none',
       '& *': {
-        color: 'link_hovered',
+        color: 'link.primary.hover',
       },
     },
   };
@@ -35,19 +35,27 @@ const DeFiDropdownItem = ({ item }: Props) => {
     </>
   );
 
-  return item.dappId ? (
-    <LinkInternal
-      href={ route({ pathname: '/apps/[id]', query: { id: item.dappId, action: 'connect' } }) }
-      target="_self"
-      { ...styles }
-    >
-      { content }
-    </LinkInternal>
-  ) : (
-    <LinkExternal href={ item.url } { ...styles }>
-      { content }
-    </LinkExternal>
-  );
+  if (item.dappId) {
+    return (
+      <LinkInternal
+        href={ route({ pathname: '/apps/[id]', query: { id: item.dappId, action: 'connect' } }) }
+        target="_self"
+        { ...styles }
+      >
+        { content }
+      </LinkInternal>
+    );
+  }
+
+  if (item.url) {
+    return (
+      <LinkExternal href={ item.url } { ...styles }>
+        { content }
+      </LinkExternal>
+    );
+  }
+
+  return null;
 };
 
 export default React.memo(DeFiDropdownItem);

ui/snippets/topBar/NetworkMenu.tsx

@@ -22,7 +22,7 @@ const NetworkMenu = () => {
           color="link.primary"
           _hover={{ color: 'link.primary.hover' }}
           aria-label="Network menu"
-          borderRadius="none"
+          borderRadius="sm"
           onClick={ menu.onToggle }
         >
           <IconSvg name="networks" boxSize={ 4 } p="1px"/>

ui/snippets/topBar/TopBar.tsx

@@ -25,12 +25,12 @@ const TopBar = () => {
       >
         <TopBarStats/>
         <Flex alignItems="center">
-          { /* { config.features.deFiDropdown.isEnabled && (
+          { config.features.deFiDropdown.isEnabled && (
             <>
               <DeFiDropdown/>
               <Separator mr={ 3 } ml={{ base: 2, sm: 3 }} height={ 4 } orientation="vertical"/>
             </>
-          ) } */ }
+          ) }
           <Settings/>
           { config.UI.navigation.layout === 'horizontal' && Boolean(config.UI.navigation.featuredNetworks) && (
             <Box display={{ base: 'none', lg: 'flex' }}>

ui/snippets/topBar/settings/Settings.tsx

@@ -25,7 +25,7 @@ const Settings = () => {
           visual="plain"
           color="link.primary"
           _hover={{ color: 'link.primary.hover' }}
-          borderRadius="none"
+          borderRadius="sm"
           aria-label="User settings"
         >
           <IconSvg name="gear_slim" boxSize={ 5 } p="1px"/>