refactor AddressDetails

pages/address/[hash]/index.tsx

@@ -10,14 +10,14 @@ import fetchApi from 'nextjs/utils/fetchApi';
 
 import config from 'configs/app';
 import getQueryParamString from 'lib/router/getQueryParamString';
-// import Address from 'ui/pages/Address';
+import Address from 'ui/pages/Address';
 
 const pathname: Route['pathname'] = '/address/[hash]';
 
 const Page: NextPage<Props<typeof pathname>> = (props: Props<typeof pathname>) => {
   return (
     <PageNextJs pathname={ pathname } query={ props.query } apiData={ props.apiData }>
-      { /* <Address/> */ }
+      <Address/>
     </PageNextJs>
   );
 };

toolkit/theme/recipes/toast.recipe.ts

@@ -26,7 +26,7 @@ export const recipe = defineSlotRecipe({
         transition: 'translate 400ms, scale 400ms, opacity 200ms',
         transitionTimingFunction: 'cubic-bezier(0.06, 0.71, 0.55, 1)',
       },
-      bg: 'alert.bg.neutral',
+      bg: 'alert.bg.info',
       color: 'alert.fg',
       boxShadow: 'xl',
       '--toast-trigger-bg': 'colors.bg.muted',

ui/address/AddressDetails.tsx

-import { Box, Text, Grid } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -94,11 +94,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
   return (
     <>
       { addressQuery.isDegradedData && <ServiceDegradationWarning isLoading={ addressQuery.isPlaceholderData } mb={ 6 }/> }
-      <Grid
-        columnGap={ 8 }
-        rowGap={{ base: 1, lg: 3 }}
-        templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
-      >
+      <DetailedInfo.Container templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} >
         <AddressAlternativeFormat isLoading={ addressQuery.isPlaceholderData } addressHash={ addressHash }/>
 
         { data.filecoin?.id && (
@@ -318,7 +314,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
         ) }
 
         <DetailedInfoSponsoredItem isLoading={ addressQuery.isPlaceholderData }/>
-      </Grid>
+      </DetailedInfo.Container>
     </>
   );
 };

ui/address/AddressTxs.tsx

@@ -61,7 +61,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender =
 
   const [ socketAlert, setSocketAlert ] = React.useState('');
   const [ newItemsCount, setNewItemsCount ] = React.useState(0);
-  const [ sort, setSort ] = React.useState<TransactionsSortingValue | undefined>(getSortValueFromQuery<TransactionsSortingValue>(router.query, SORT_OPTIONS));
+  const [ sort, setSort ] = React.useState<TransactionsSortingValue>(getSortValueFromQuery<TransactionsSortingValue>(router.query, SORT_OPTIONS) || 'default');
 
   const isMobile = useIsMobile();
   const currentAddress = getQueryParamString(router.query.hash);
@@ -165,14 +165,15 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender =
     return null;
   }
 
-  const filter = (
-    <AddressTxsFilter
-      defaultFilter={ filterValue }
-      onFilterChange={ handleFilterChange }
-      hasActiveFilter={ Boolean(filterValue) }
-      isLoading={ addressTxsQuery.pagination.isLoading }
-    />
-  );
+  // const filter = (
+  //   <AddressTxsFilter
+  //     defaultFilter={ filterValue }
+  //     onFilterChange={ handleFilterChange }
+  //     hasActiveFilter={ Boolean(filterValue) }
+  //     isLoading={ addressTxsQuery.pagination.isLoading }
+  //   />
+  // );
+  const filter = null;
 
   const csvExportLink = (
     <AddressCsvExportLink

ui/address/contract/useContractTabs.tsx

@@ -74,34 +74,34 @@ export default function useContractTabs(data: Address | undefined, isPlaceholder
   return React.useMemo(() => {
     return {
       tabs: [
-        data?.hash && {
-          id: 'contract_code' as const,
-          title: 'Code',
-          component: <ContractDetails mainContractQuery={ contractQuery } channel={ channel } addressHash={ data.hash }/>,
-          subTabs: CONTRACT_DETAILS_TAB_IDS as unknown as Array<string>,
-        },
-        contractQuery.data?.abi && {
-          id: [ 'read_write_contract' as const, 'read_contract' as const, 'write_contract' as const ],
-          title: 'Read/Write contract',
-          component: <ContractMethodsRegular abi={ contractQuery.data.abi } isLoading={ contractQuery.isPlaceholderData }/>,
-        },
-        verifiedImplementations.length > 0 && {
-          id: [ 'read_write_proxy' as const, 'read_proxy' as const, 'write_proxy' as const ],
-          title: 'Read/Write proxy',
-          component: <ContractMethodsProxy implementations={ verifiedImplementations } isLoading={ contractQuery.isPlaceholderData }/>,
-        },
-        config.features.account.isEnabled && {
-          id: [ 'read_write_custom_methods' as const, 'read_custom_methods' as const, 'write_custom_methods' as const ],
-          title: 'Custom ABI',
-          component: <ContractMethodsCustom isLoading={ contractQuery.isPlaceholderData }/>,
-        },
-        hasMudTab && {
-          id: 'mud_system' as const,
-          title: 'MUD System',
-          component: mudSystemsQuery.isPlaceholderData ?
-            <ContentLoader/> :
-            <ContractMethodsMudSystem items={ mudSystemsQuery.data?.items ?? [] }/>,
-        },
+        // data?.hash && {
+        //   id: 'contract_code' as const,
+        //   title: 'Code',
+        //   component: <ContractDetails mainContractQuery={ contractQuery } channel={ channel } addressHash={ data.hash }/>,
+        //   subTabs: CONTRACT_DETAILS_TAB_IDS as unknown as Array<string>,
+        // },
+        // contractQuery.data?.abi && {
+        //   id: [ 'read_write_contract' as const, 'read_contract' as const, 'write_contract' as const ],
+        //   title: 'Read/Write contract',
+        //   component: <ContractMethodsRegular abi={ contractQuery.data.abi } isLoading={ contractQuery.isPlaceholderData }/>,
+        // },
+        // verifiedImplementations.length > 0 && {
+        //   id: [ 'read_write_proxy' as const, 'read_proxy' as const, 'write_proxy' as const ],
+        //   title: 'Read/Write proxy',
+        //   component: <ContractMethodsProxy implementations={ verifiedImplementations } isLoading={ contractQuery.isPlaceholderData }/>,
+        // },
+        // config.features.account.isEnabled && {
+        //   id: [ 'read_write_custom_methods' as const, 'read_custom_methods' as const, 'write_custom_methods' as const ],
+        //   title: 'Custom ABI',
+        //   component: <ContractMethodsCustom isLoading={ contractQuery.isPlaceholderData }/>,
+        // },
+        // hasMudTab && {
+        //   id: 'mud_system' as const,
+        //   title: 'MUD System',
+        //   component: mudSystemsQuery.isPlaceholderData ?
+        //     <ContentLoader/> :
+        //     <ContractMethodsMudSystem items={ mudSystemsQuery.data?.items ?? [] }/>,
+        // },
       ].filter(Boolean),
       isLoading: contractQuery.isPlaceholderData,
     };

ui/address/details/AddressCounterItem.tsx

@@ -7,8 +7,8 @@ import type { AddressCounters } from 'types/api/address';
 import { route } from 'nextjs-routes';
 
 import type { ResourceError } from 'lib/api/resources';
-import Skeleton from 'ui/shared/chakra/Skeleton';
-import LinkInternal from 'ui/shared/links/LinkInternal';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 
 interface Props {
   prop: keyof AddressCounters;
@@ -27,7 +27,7 @@ const PROP_TO_TAB = {
 
 const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoading, isDegradedData }: Props) => {
   if (query.isPlaceholderData || isAddressQueryLoading) {
-    return <Skeleton h={ 5 } w="80px" borderRadius="full"/>;
+    return <Skeleton loading h={ 5 } w="80px" borderRadius="full"/>;
   }
 
   const data = query.data?.[prop];
@@ -51,9 +51,9 @@ const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoadi
       }
 
       return (
-        <LinkInternal href={ route({ pathname: '/address/[hash]', query: { hash: address, tab: PROP_TO_TAB[prop] } }) } onClick={ onClick }>
+        <Link href={ route({ pathname: '/address/[hash]', query: { hash: address, tab: PROP_TO_TAB[prop] } }) } onClick={ onClick }>
           { Number(data).toLocaleString() }
-        </LinkInternal>
+        </Link>
       );
     }
   }

ui/address/details/AddressImplementations.tsx

@@ -23,7 +23,7 @@ const AddressImplementations = ({ data, isLoading }: Props) => {
       >
         { `Implementation${ hasManyItems ? 's' : '' }` }
       </DetailedInfo.ItemLabel>
-      <DetailsInfoItem.ValueWithScroll
+      <DetailedInfo.ItemValueWithScroll
         gradientHeight={ 48 }
         onScrollVisibilityChange={ setHasScroll }
         rowGap={ 2 }
@@ -42,7 +42,7 @@ const AddressImplementations = ({ data, isLoading }: Props) => {
             noIcon
           />
         )) }
-      </DetailsInfoItem.ValueWithScroll>
+      </DetailedInfo.ItemValueWithScroll>
     </>
   );
 };

ui/address/details/AddressMetadataAlert.tsx

-import { Alert, Flex, chakra } from '@chakra-ui/react';
+import { Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
 
+import { Alert } from 'toolkit/chakra/alert';
+
 interface Props {
   tags: Array<AddressMetadataTagFormatted> | undefined;
   className?: string;
@@ -25,11 +27,11 @@ const AddressMetadataAlert = ({ tags, className }: Props) => {
           color={ noteTag.meta?.alertTextColor }
           whiteSpace="pre-wrap"
           display="inline-block"
-          sx={{
+          css={{
             '& a': {
               color: 'link',
               _hover: {
-                color: 'link_hovered',
+                color: 'link.primary.hover',
               },
             },
           }}

ui/address/details/AddressMultichainButton.tsx

-import { Image, Tooltip } from '@chakra-ui/react';
 import { capitalize } from 'es-toolkit';
 import React from 'react';
 
@@ -6,8 +5,9 @@ import type { MultichainProviderConfigParsed } from 'types/client/multichainProv
 
 import { route } from 'nextjs-routes';
 
-import LinkExternal from 'ui/shared/links/LinkExternal';
-import LinkInternal from 'ui/shared/links/LinkInternal';
+import { Image } from 'toolkit/chakra/image';
+import { Link } from 'toolkit/chakra/link';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 
 const TEMPLATE_ADDRESS = '{address}';
 
@@ -28,39 +28,28 @@ const AddressMultichainButton = ({ item, addressHash, onClick, hasSingleProvider
       { capitalize(item.name) }
     </>
   ) : (
-    <Tooltip label={ capitalize(item.name) }>{ buttonIcon }</Tooltip>
+    <Tooltip content={ capitalize(item.name) }>{ buttonIcon }</Tooltip>
   );
 
-  const linkProps = {
-    variant: hasSingleProvider ? 'subtle' as const : undefined,
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: 'sm',
-    lineHeight: 5,
-    fontWeight: 500,
-    onClick,
-  };
-
   try {
     const portfolioUrlString = item.urlTemplate.replace(TEMPLATE_ADDRESS, addressHash);
     const portfolioUrl = new URL(portfolioUrlString);
     portfolioUrl.searchParams.append('utm_source', 'blockscout');
     portfolioUrl.searchParams.append('utm_medium', 'address');
     const dappId = item.dappId;
-    return typeof dappId === 'string' ? (
-      <LinkInternal
-        href={ route({ pathname: '/apps/[id]', query: { id: dappId, url: portfolioUrl.toString() } }) }
-        { ...linkProps }
-      >
-        { buttonContent }
-      </LinkInternal>
-    ) : (
-      <LinkExternal
-        href={ portfolioUrl.toString() }
-        { ...linkProps }
+    const isExternal = typeof dappId !== 'string';
+
+    return (
+      <Link
+        external={ isExternal }
+        href={ isExternal ? portfolioUrl.toString() : route({ pathname: '/apps/[id]', query: { id: dappId, url: portfolioUrl.toString() } }) }
+        variant={ hasSingleProvider ? 'underlaid' : undefined }
+        textStyle="sm"
+        fontWeight="medium"
+        onClick={ onClick }
       >
         { buttonContent }
-      </LinkExternal>
+      </Link>
     );
   } catch (error) {}
 

ui/address/details/AddressNameInfo.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { Address } from 'types/api/address';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
@@ -43,7 +43,7 @@ const AddressNameInfo = ({ data, isLoading }: Props) => {
           Contract name
         </DetailedInfo.ItemLabel>
         <DetailedInfo.ItemValue>
-          <Skeleton isLoaded={ !isLoading }>
+          <Skeleton loading={ isLoading }>
             { data.name }
           </Skeleton>
         </DetailedInfo.ItemValue>
@@ -61,7 +61,7 @@ const AddressNameInfo = ({ data, isLoading }: Props) => {
           Validator name
         </DetailedInfo.ItemLabel>
         <DetailedInfo.ItemValue>
-          <Skeleton isLoaded={ !isLoading }>
+          <Skeleton loading={ isLoading }>
             { data.name }
           </Skeleton>
         </DetailedInfo.ItemValue>

ui/address/details/AddressNetWorth.tsx

@@ -6,7 +6,7 @@ import type { Address } from 'types/api/address';
 import config from 'configs/app';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import * as mixpanel from 'lib/mixpanel/index';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import TextSeparator from 'ui/shared/TextSeparator';
 
 import { getTokensTotalInfo } from '../utils/tokenUtils';
@@ -68,7 +68,7 @@ const AddressNetWorth = ({ addressData, isLoading, addressHash }: Props) => {
   }
 
   return (
-    <Skeleton display="flex" alignItems="center" flexWrap="wrap" isLoaded={ !isLoading && !(addressData?.has_tokens && isPending) } gap={ 2 }>
+    <Skeleton display="flex" alignItems="center" flexWrap="wrap" loading={ isLoading && !(addressData?.has_tokens && isPending) } gap={ 2 }>
       <Text>
         { (isError || !addressData?.exchange_rate) ? 'N/A' : `${ prefix }$${ totalUsd.toFormat(2) }` }
       </Text>

ui/address/details/AddressSaveOnGas.tsx

-import { Image } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 import * as v from 'valibot';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
-import LinkExternal from 'ui/shared/links/LinkExternal';
+import { Image } from 'toolkit/chakra/image';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import TextSeparator from 'ui/shared/TextSeparator';
 
 const feature = config.features.saveOnGas;
@@ -76,11 +76,11 @@ const AddressSaveOnGas = ({ gasUsed, address }: Props) => {
   return (
     <>
       <TextSeparator color="border.divider"/>
-      <Skeleton isLoaded={ !query.isPlaceholderData } display="flex" alignItems="center" columnGap={ 2 }>
+      <Skeleton loading={ query.isPlaceholderData } display="flex" alignItems="center" columnGap={ 2 }>
         <Image src="/static/gas_hawk_logo.svg" w="15px" h="20px" alt="GasHawk logo"/>
-        <LinkExternal href="https://www.gashawk.io?utm_source=blockscout&utm_medium=address" fontSize="sm">
+        <Link href="https://www.gashawk.io?utm_source=blockscout&utm_medium=address" fontSize="sm" external>
           Save { percent.toLocaleString(undefined, { maximumFractionDigits: 0 }) }% with GasHawk
-        </LinkExternal>
+        </Link>
       </Skeleton>
     </>
   );

ui/address/filecoin/FilecoinActorTag.tsx

-import { Tag } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FilecoinActorType } from 'types/api/addressParams';
 
+import { Badge } from 'toolkit/chakra/badge';
+
 const ACTOR_TYPES: Record<FilecoinActorType, string> = {
   account: 'Account',
   cron: 'Scheduled Tasks',
@@ -33,7 +34,7 @@ const FilecoinActorTag = ({ actorType }: Props) => {
     return null;
   }
 
-  return <Tag colorScheme="gray">{ text }</Tag>;
+  return <Badge colorPalette="gray">{ text }</Badge>;
 };
 
 export default FilecoinActorTag;

ui/address/tokenSelect/TokenSelect.tsx

-import { Box, Flex, IconButton, Tooltip } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useQueryClient, useIsFetching } from '@tanstack/react-query';
 import { sumBy } from 'es-toolkit';
 import NextLink from 'next/link';
@@ -11,7 +11,9 @@ import { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { IconButton } from 'toolkit/chakra/icon-button';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 import IconSvg from 'ui/shared/IconSvg';
 
 import useFetchTokens from '../utils/useFetchTokens';
@@ -44,8 +46,8 @@ const TokenSelect = ({ onClick }: Props) => {
   if (isPending) {
     return (
       <Flex columnGap={ 3 }>
-        <Skeleton h={ 8 } w="150px" borderRadius="base"/>
-        <Skeleton h={ 8 } w={ 9 } borderRadius="base"/>
+        <Skeleton loading h={ 8 } w="150px" borderRadius="base"/>
+        <Skeleton loading h={ 8 } w={ 9 } borderRadius="base"/>
       </Flex>
     );
   }
@@ -61,8 +63,9 @@ const TokenSelect = ({ onClick }: Props) => {
         <TokenSelectMobile data={ data } isLoading={ tokensIsFetching === 1 }/> :
         <TokenSelectDesktop data={ data } isLoading={ tokensIsFetching === 1 }/>
       }
-      <Tooltip label="Show all tokens">
+      <Tooltip content="Show all tokens">
         <Box>
+          { /* TODO @tom2drum: replace with Link */ }
           <NextLink href={{ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'tokens' } }} passHref legacyBehavior>
             <IconButton
               aria-label="Show all tokens"
@@ -70,10 +73,11 @@ const TokenSelect = ({ onClick }: Props) => {
               size="sm"
               pl="6px"
               pr="6px"
-              icon={ <IconSvg name="wallet" boxSize={ 5 }/> }
               as="a"
               onClick={ handleIconButtonClick }
-            />
+            >
+              <IconSvg name="wallet" boxSize={ 5 }/>
+            </IconButton>
           </NextLink>
         </Box>
       </Tooltip>

ui/address/tokenSelect/TokenSelectButton.tsx

-import { Box, Button, chakra, useColorModeValue } from '@chakra-ui/react';
+import { Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FormattedData } from './types';
 
 import { space } from 'lib/html-entities';
 import * as mixpanel from 'lib/mixpanel/index';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Button } from 'toolkit/chakra/button';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import IconSvg from 'ui/shared/IconSvg';
 
 import { getTokensTotalInfo } from '../utils/tokenUtils';
@@ -13,13 +14,11 @@ import { getTokensTotalInfo } from '../utils/tokenUtils';
 interface Props {
   isOpen: boolean;
   isLoading: boolean;
-  onClick: () => void;
   data: FormattedData;
 }
 
-const TokenSelectButton = ({ isOpen, isLoading, onClick, data }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const TokenSelectButton = ({ isOpen, isLoading, data, ...rest }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   const { usd, num, isOverflow } = getTokensTotalInfo(data);
-  const skeletonBgColor = useColorModeValue('white', 'black');
 
   const prefix = isOverflow ? '>' : '';
 
@@ -29,27 +28,27 @@ const TokenSelectButton = ({ isOpen, isLoading, onClick, data }: Props, ref: Rea
     }
 
     mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Tokens dropdown' });
-    onClick();
-  }, [ isLoading, isOpen, onClick ]);
+  }, [ isLoading, isOpen ]);
 
   return (
-    <Box position="relative">
+    <Box position="relative" className="group">
       <Button
         ref={ ref }
         size="sm"
-        variant="outline"
-        colorScheme="gray"
+        variant="dropdown"
         onClick={ handleClick }
-        isActive={ isOpen }
+        gap={ 0 }
         aria-label="Token select"
+        { ...rest }
       >
         <IconSvg name="tokens" boxSize={ 4 } mr={ 2 }/>
         <chakra.span fontWeight={ 600 }>{ prefix }{ num }</chakra.span>
         <chakra.span
           whiteSpace="pre"
-          color="text_secondary"
+          color={ isOpen ? 'inherit' : 'text.secondary' }
           fontWeight={ 400 }
           maxW={{ base: 'calc(100vw - 230px)', lg: '500px' }}
+          _groupHover={{ color: 'inherit' }}
           overflow="hidden"
           textOverflow="ellipsis"
         >
@@ -57,7 +56,18 @@ const TokenSelectButton = ({ isOpen, isLoading, onClick, data }: Props, ref: Rea
         </chakra.span>
         <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 } ml={ 3 }/>
       </Button>
-      { isLoading && !isOpen && <Skeleton h="100%" w="100%" position="absolute" top={ 0 } left={ 0 } bgColor={ skeletonBgColor } borderRadius="base"/> }
+      { isLoading && !isOpen && (
+        <Skeleton
+          loading
+          h="100%"
+          w="100%"
+          position="absolute"
+          top={ 0 }
+          left={ 0 }
+          bgColor={{ _light: 'white', _dark: 'black' }}
+          borderRadius="base"
+        />
+      ) }
     </Box>
   );
 };

ui/address/tokenSelect/TokenSelectDesktop.tsx

-import { PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FormattedData } from './types';
 
-import Popover from 'ui/shared/chakra/Popover';
+import { PopoverRoot, PopoverTrigger, PopoverContent, PopoverBody } from 'toolkit/chakra/popover';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 
 import TokenSelectButton from './TokenSelectButton';
 import TokenSelectMenu from './TokenSelectMenu';
@@ -15,21 +15,21 @@ interface Props {
 }
 
 const TokenSelectDesktop = ({ data, isLoading }: Props) => {
-  const { isOpen, onToggle, onClose } = useDisclosure();
+  const { open, onOpenChange } = useDisclosure();
 
   const result = useTokenSelect(data);
 
   return (
-    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+    <PopoverRoot open={ open } onOpenChange={ onOpenChange }>
       <PopoverTrigger>
-        <TokenSelectButton isOpen={ isOpen } onClick={ onToggle } data={ result.data } isLoading={ isLoading }/>
+        <TokenSelectButton data={ result.data } isLoading={ isLoading } isOpen={ open }/>
       </PopoverTrigger>
       <PopoverContent w="355px" maxH="450px" overflowY="scroll">
-        <PopoverBody px={ 4 } py={ 6 } boxShadow="2xl" >
+        <PopoverBody>
           <TokenSelectMenu { ...result }/>
         </PopoverBody>
       </PopoverContent>
-    </Popover>
+    </PopoverRoot>
   );
 };
 

ui/address/tokenSelect/TokenSelectItem.tsx

-import { chakra, Flex, useColorModeValue } from '@chakra-ui/react';
+import { chakra, Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
+import { Link } from 'toolkit/chakra/link';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 import type { TokenEnhancedData } from '../utils/tokenUtils';
@@ -71,7 +71,7 @@ const TokenSelectItem = ({ data }: Props) => {
   const url = route({ pathname: '/token/[hash]', query: { hash: data.token.address } });
 
   return (
-    <LinkInternal
+    <Link
       px={ 1 }
       py="10px"
       display="flex"
@@ -80,7 +80,7 @@ const TokenSelectItem = ({ data }: Props) => {
       borderColor="border.divider"
       borderBottomWidth="1px"
       _hover={{
-        bgColor: useColorModeValue('blue.50', 'gray.800'),
+        bgColor: { _light: 'blue.50', _dark: 'gray.800' },
       }}
       color="unset"
       fontSize="sm"
@@ -102,7 +102,7 @@ const TokenSelectItem = ({ data }: Props) => {
       <Flex alignItems="center" justifyContent="space-between" w="100%" whiteSpace="nowrap">
         { secondRow }
       </Flex>
-    </LinkInternal>
+    </Link>
   );
 };
 

ui/address/tokenSelect/TokenSelectMenu.tsx

-import { Text, Box, Input, InputGroup, InputLeftElement, useColorModeValue, Flex, Link } from '@chakra-ui/react';
+import { Text, Box, Input, Flex } from '@chakra-ui/react';
 import { sumBy } from 'es-toolkit';
 import type { ChangeEvent } from 'react';
 import React from 'react';
@@ -7,6 +7,8 @@ import type { FormattedData } from './types';
 import type { TokenType } from 'types/api/token';
 
 import { getTokenTypeName } from 'lib/token/tokenTypes';
+import { InputGroup } from 'toolkit/chakra/input-group';
+import { Link } from 'toolkit/chakra/link';
 import IconSvg from 'ui/shared/IconSvg';
 
 import type { Sort } from '../utils/tokenUtils';
@@ -24,23 +26,16 @@ interface Props {
 }
 
 const TokenSelectMenu = ({ erc20sort, erc1155sort, erc404sort, filteredData, onInputChange, onSortClick, searchTerm }: Props) => {
-  const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
-
   const hasFilteredResult = sumBy(Object.values(filteredData), ({ items }) => items.length) > 0;
 
   return (
     <>
-      <InputGroup size="xs" mb={ 5 }>
-        <InputLeftElement >
-          <IconSvg name="search" boxSize={ 4 } color={ searchIconColor }/>
-        </InputLeftElement>
-        <Input
-          paddingInlineStart="38px"
-          placeholder="Search by token name"
-          ml="1px"
-          onChange={ onInputChange }
-          bgColor="dialog.bg"
-        />
+      <InputGroup
+        startElement={ <IconSvg name="search" boxSize={ 4 } color={{ _light: 'blackAlpha.600', _dark: 'whiteAlpha.600' }}/> }
+        startOffset="38px"
+        mb={ 5 }
+      >
+        <Input placeholder="Search by token name" onChange={ onInputChange } size="sm" bgColor="dialog.bg"/>
       </InputGroup>
       <Flex flexDir="column" rowGap={ 6 }>
         { Object.entries(filteredData).sort(sortTokenGroups).map(([ tokenType, tokenInfo ]) => {

ui/address/tokenSelect/TokenSelectMobile.tsx

-import { useDisclosure, Modal, ModalContent, ModalCloseButton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FormattedData } from './types';
 
+import { DialogContent, DialogRoot } from 'toolkit/chakra/dialog';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
+
 import TokenSelectButton from './TokenSelectButton';
 import TokenSelectMenu from './TokenSelectMenu';
 import useTokenSelect from './useTokenSelect';
@@ -13,18 +15,17 @@ interface Props {
 }
 
 const TokenSelectMobile = ({ data, isLoading }: Props) => {
-  const { isOpen, onToggle, onClose } = useDisclosure();
+  const { open, onOpenChange } = useDisclosure();
   const result = useTokenSelect(data);
 
   return (
     <>
-      <TokenSelectButton isOpen={ isOpen } onClick={ onToggle } data={ result.data } isLoading={ isLoading }/>
-      <Modal isOpen={ isOpen } onClose={ onClose } size="full">
-        <ModalContent>
-          <ModalCloseButton/>
+      <TokenSelectButton isOpen={ open } data={ result.data } isLoading={ isLoading }/>
+      <DialogRoot open={ open } onOpenChange={ onOpenChange } size="full">
+        <DialogContent>
           <TokenSelectMenu { ...result }/>
-        </ModalContent>
-      </Modal>
+        </DialogContent>
+      </DialogRoot>
     </>
   );
 };

ui/shared/alerts/ServiceDegradationWarning.tsx

@@ -12,7 +12,7 @@ const ServiceDegradationWarning = ({ isLoading, className }: Props) => {
   return (
     <Alert
       loading={ isLoading }
-      status="neutral"
+      status="info"
       className={ className }
       startElement={ <Spinner size="sm" my="3px" flexShrink={ 0 }/> }
     >

ui/shared/entities/address/AddressEntity.tsx

@@ -172,7 +172,6 @@ const AddressEntry = (props: EntityProps) => {
       onMouseLeave={ highlightContext?.onMouseLeave }
       position="relative"
       zIndex={ 0 }
-      fontWeight="medium"
     >
       <Icon { ...partsProps.icon }/>
       { props.noLink ? content : <Link { ...partsProps.link }>{ content }</Link> }

ui/snippets/header/alerts/MaintenanceAlert.tsx

@@ -10,7 +10,7 @@ const MaintenanceAlert = () => {
   }
 
   return (
-    <Alert status="neutral" showIcon>
+    <Alert status="info" showIcon>
       <Box
         dangerouslySetInnerHTML={{ __html: config.UI.maintenanceAlert.message }}
         css={{

ui/txs/TxsWithAPISorting.tsx

@@ -20,8 +20,8 @@ type Props = {
   filterValue?: AddressFromToFilter;
   enableTimeIncrement?: boolean;
   top?: number;
-  sorting: TransactionsSortingValue | undefined;
-  setSort: (value?: TransactionsSortingValue) => void;
+  sorting: TransactionsSortingValue;
+  setSort: (value: TransactionsSortingValue) => void;
 };
 
 const TxsWithAPISorting = ({
@@ -39,7 +39,7 @@ const TxsWithAPISorting = ({
   setSort,
 }: Props) => {
 
-  const handleSortChange = React.useCallback((value?: TransactionsSortingValue) => {
+  const handleSortChange = React.useCallback((value: TransactionsSortingValue) => {
     setSort(value);
     query.onSortingChange(getSortParamsFromValue(value));
   }, [ setSort, query ]);