tx token transfers tab

eslint.config.mjs

@@ -36,7 +36,7 @@ const RESTRICTED_MODULES = {
         'Image', 'Popover', 'PopoverTrigger', 'PopoverContent', 'PopoverBody', 'PopoverFooter',
         'DrawerRoot', 'DrawerBody', 'DrawerContent', 'DrawerOverlay', 'DrawerBackdrop', 'DrawerTrigger', 'Drawer',
         'Alert', 'AlertIcon', 'AlertTitle', 'AlertDescription',
-        'Heading', 'Badge', 'Tabs', 'Show', 'Hide',
+        'Heading', 'Badge', 'Tabs', 'Show', 'Hide', 'Checkbox',
         'Table', 'TableRoot', 'TableBody', 'TableHeader', 'TableRow', 'TableCell',
         'Menu', 'MenuRoot', 'MenuTrigger', 'MenuContent', 'MenuItem', 'MenuTriggerItem', 'MenuRadioItemGroup', 'MenuContextTrigger',
       ],

toolkit/chakra/radio.tsx

@@ -21,4 +21,20 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
   },
 );
 
-export const RadioGroup = ChakraRadioGroup.Root;
+export interface RadioGroupProps extends ChakraRadioGroup.RootProps {}
+
+export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  function RadioGroup(props, ref) {
+    const { orientation = 'horizontal', ...rest } = props;
+    return (
+      <ChakraRadioGroup.Root
+        ref={ ref }
+        orientation={ orientation }
+        display="flex"
+        flexDirection={ orientation === 'horizontal' ? 'row' : 'column' }
+        gap={ orientation === 'horizontal' ? 4 : 2 }
+        { ...rest }
+      />
+    );
+  },
+);

toolkit/theme/foundations/colors.ts

@@ -126,16 +126,16 @@ const colors: ExcludeUndefined<ThemingConfig['tokens']>['colors'] = {
   black: { value: '#101112' },
   white: { value: '#ffffff' },
   whiteAlpha: {
-    '50': { value: 'RGBA(16, 17, 18, 0.04)' },
-    '100': { value: 'RGBA(16, 17, 18, 0.06)' },
-    '200': { value: 'RGBA(16, 17, 18, 0.08)' },
-    '300': { value: 'RGBA(16, 17, 18, 0.16)' },
-    '400': { value: 'RGBA(16, 17, 18, 0.24)' },
-    '500': { value: 'RGBA(16, 17, 18, 0.36)' },
-    '600': { value: 'RGBA(16, 17, 18, 0.48)' },
-    '700': { value: 'RGBA(16, 17, 18, 0.64)' },
-    '800': { value: 'RGBA(16, 17, 18, 0.80)' },
-    '900': { value: 'RGBA(16, 17, 18, 0.92)' },
+    '50': { value: 'RGBA(255, 255, 255, 0.04)' },
+    '100': { value: 'RGBA(255, 255, 255, 0.06)' },
+    '200': { value: 'RGBA(255, 255, 255, 0.08)' },
+    '300': { value: 'RGBA(255, 255, 255, 0.16)' },
+    '400': { value: 'RGBA(255, 255, 255, 0.24)' },
+    '500': { value: 'RGBA(255, 255, 255, 0.36)' },
+    '600': { value: 'RGBA(255, 255, 255, 0.48)' },
+    '700': { value: 'RGBA(255, 255, 255, 0.64)' },
+    '800': { value: 'RGBA(255, 255, 255, 0.80)' },
+    '900': { value: 'RGBA(255, 255, 255, 0.92)' },
   },
   blackAlpha: {
     '50': { value: 'RGBA(16, 17, 18, 0.04)' },

toolkit/theme/foundations/semanticTokens.ts

@@ -112,7 +112,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
           active: { value: { _light: '{colors.link.primary.hover}' } },
         },
         bg: {
-          DEFAULT: { value: 'transparent' },
+          DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
           selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
         },
         border: {
@@ -339,6 +339,22 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         fg: { value: { _light: '{colors.blackAlpha.700}', _dark: '{colors.whiteAlpha.700}' } },
       },
     },
+    checkbox: {
+      icon: {
+        bg: {
+          checked: { value: { _light: '{colors.blue.500}', _dark: '{colors.gray.300}' } },
+          hover: { value: { _light: '{colors.blue.600}', _dark: '{colors.gray.400}' } },
+        },
+      },
+    },
+    radio: {
+      icon: {
+        bg: {
+          checked: { value: { _light: '{colors.blue.500}', _dark: '{colors.gray.300}' } },
+          hover: { value: { _light: '{colors.blue.600}', _dark: '{colors.gray.400}' } },
+        },
+      },
+    },
     heading: {
       DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
     },

toolkit/theme/recipes/checkbox.recipe.ts

+import { defineSlotRecipe } from '@chakra-ui/react';
+
+import { recipe as checkmarkRecipe } from './checkmark.recipe';
+
+export const recipe = defineSlotRecipe({
+  slots: [ 'root', 'control', 'label' ],
+  className: 'chakra-checkbox',
+  base: {
+    root: {
+      display: 'inline-flex',
+      gap: '2',
+      alignItems: 'center',
+      verticalAlign: 'top',
+      position: 'relative',
+    },
+
+    control: checkmarkRecipe.base,
+
+    label: {
+      fontWeight: 'normal',
+      userSelect: 'none',
+      _disabled: {
+        opacity: '0.5',
+      },
+    },
+  },
+
+  variants: {
+    size: {
+      xs: {
+        root: { gap: '1' },
+        label: { textStyle: 'xs' },
+        control: checkmarkRecipe.variants?.size?.xs,
+      },
+      sm: {
+        root: { gap: '1' },
+        label: { textStyle: 'sm' },
+        control: checkmarkRecipe.variants?.size?.sm,
+      },
+      md: {
+        root: { gap: '2' },
+        label: { textStyle: 'md' },
+        control: checkmarkRecipe.variants?.size?.md,
+      },
+    },
+
+    variant: {
+      solid: {
+        control: checkmarkRecipe.variants?.variant?.solid,
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+});

toolkit/theme/recipes/checkmark.recipe.ts

+import { defineRecipe } from '@chakra-ui/react';
+
+// TODO @tom2drum dark mode + border color
+export const recipe = defineRecipe({
+  className: 'chakra-checkmark',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: '0',
+    color: 'white',
+    borderWidth: '2px',
+    borderColor: 'transparent',
+    focusVisibleRing: 'outside',
+    _icon: {
+      boxSize: 'full',
+    },
+    _disabled: {
+      opacity: '0.5',
+    },
+  },
+  variants: {
+    size: {
+      xs: {
+        boxSize: '3',
+        borderRadius: '2px',
+      },
+      sm: {
+        boxSize: '4',
+        borderRadius: '2px',
+      },
+      md: {
+        boxSize: '5',
+        borderRadius: 'sm',
+      },
+    },
+
+    variant: {
+      solid: {
+        borderColor: 'border',
+        '&:is([data-state=checked], [data-state=indeterminate])': {
+          bg: 'checkbox.icon.bg.checked',
+          color: 'white',
+          borderColor: 'checkbox.icon.bg.checked',
+          _hover: {
+            bg: 'checkbox.icon.bg.hover',
+            borderColor: 'checkbox.icon.bg.hover',
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+});

toolkit/theme/recipes/index.ts

@@ -2,6 +2,8 @@ import { recipe as accordion } from './accordion.recipe';
 import { recipe as alert } from './alert.recipe';
 import { recipe as badge } from './badge.recipe';
 import { recipe as button } from './button.recipe';
+import { recipe as checkbox } from './checkbox.recipe';
+import { recipe as checkmark } from './checkmark.recipe';
 import { recipe as closeButton } from './close-button.recipe';
 import { recipe as dialog } from './dialog.recipe';
 import { recipe as drawer } from './drawer.recipe';
@@ -13,6 +15,8 @@ import { recipe as nativeSelect } from './native-select.recipe';
 import { recipe as pinInput } from './pin-input.recipe';
 import { recipe as popover } from './popover.recipe';
 import { recipe as progressCircle } from './progress-circle.recipe';
+import { recipe as radioGroup } from './radio-group.recipe';
+import { recipe as radiomark } from './radiomark.recipe';
 import { recipe as select } from './select.recipe';
 import { recipe as skeleton } from './skeleton.recipe';
 import { recipe as spinner } from './spinner.recipe';
@@ -27,9 +31,11 @@ import { recipe as tooltip } from './tooltip.recipe';
 export const recipes = {
   badge,
   button,
+  checkmark,
   closeButton,
   input,
   link,
+  radiomark,
   skeleton,
   spinner,
   textarea,
@@ -38,6 +44,7 @@ export const recipes = {
 export const slotRecipes = {
   accordion,
   alert,
+  checkbox,
   dialog,
   drawer,
   field,
@@ -46,6 +53,7 @@ export const slotRecipes = {
   pinInput,
   popover,
   progressCircle,
+  radioGroup,
   select,
   'switch': switchRecipe,
   table,

toolkit/theme/recipes/radio-group.recipe.ts

+import { defineSlotRecipe } from '@chakra-ui/react';
+
+import { recipe as radiomarkRecipe } from './radiomark.recipe';
+
+export const recipe = defineSlotRecipe({
+  slots: [ 'item', 'itemControl', 'label' ],
+  base: {
+    item: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      position: 'relative',
+      fontWeight: 'normal',
+      _disabled: {
+        cursor: 'disabled',
+      },
+    },
+
+    itemControl: radiomarkRecipe.base,
+
+    label: {
+      userSelect: 'none',
+      textStyle: 'md',
+      _disabled: {
+        opacity: '0.5',
+      },
+    },
+  },
+  variants: {
+    variant: {
+      solid: {
+        itemControl: radiomarkRecipe.variants?.variant?.solid,
+      },
+    },
+
+    size: {
+      xs: {
+        item: { textStyle: 'xs', gap: '1' },
+        itemControl: radiomarkRecipe.variants?.size?.xs,
+      },
+
+      sm: {
+        item: { textStyle: 'sm', gap: '1' },
+        itemControl: radiomarkRecipe.variants?.size?.sm,
+      },
+
+      md: {
+        item: { textStyle: 'md', gap: '2' },
+        itemControl: radiomarkRecipe.variants?.size?.md,
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'solid',
+  },
+});

toolkit/theme/recipes/radiomark.recipe.ts

+import { defineRecipe } from '@chakra-ui/react';
+
+// TODO @tom2drum dark mode + border color
+export const recipe = defineRecipe({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    verticalAlign: 'top',
+    color: 'white',
+    borderWidth: '2px',
+    borderColor: 'transparent',
+    borderRadius: 'full',
+    cursor: 'radio',
+    _focusVisible: {
+      outline: '2px solid',
+      outlineColor: 'colorPalette.focusRing',
+      outlineOffset: '2px',
+    },
+    _disabled: {
+      opacity: '0.5',
+      cursor: 'disabled',
+    },
+
+    '& .dot': {
+      height: '100%',
+      width: '100%',
+      borderRadius: 'full',
+      bg: 'currentColor',
+      scale: '0.4',
+    },
+  },
+
+  variants: {
+    variant: {
+      solid: {
+        borderWidth: '2px',
+        borderColor: 'border',
+        _checked: {
+          bg: 'radio.icon.bg.checked',
+          color: 'white',
+          borderColor: 'radio.icon.bg.checked',
+          _hover: {
+            bg: 'radio.icon.bg.hover',
+            borderColor: 'radio.icon.bg.hover',
+          },
+        },
+      },
+    },
+
+    size: {
+      xs: {
+        boxSize: '3',
+      },
+
+      sm: {
+        boxSize: '4',
+      },
+
+      md: {
+        boxSize: '5',
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+});

ui/pages/Chakra.tsx

@@ -24,9 +24,11 @@ import AccordionsShowcase from 'ui/showcases/Accordion';
 import AlertsShowcase from 'ui/showcases/Alerts';
 import BadgesShowcase from 'ui/showcases/Badges';
 import ButtonShowcase from 'ui/showcases/Button';
+import CheckboxesShowcase from 'ui/showcases/Checkbox';
 import LinksShowcase from 'ui/showcases/Links';
 import MenusShowcase from 'ui/showcases/Menu';
 import PaginationShowcase from 'ui/showcases/Pagination';
+import RadiosShowcase from 'ui/showcases/Radio';
 import SelectsShowcase from 'ui/showcases/Select';
 import TabsShowcase from 'ui/showcases/Tabs';
 import TagsShowcase from 'ui/showcases/Tags';
@@ -50,9 +52,11 @@ const ChakraShowcases = () => {
           <TabsTrigger value="alerts">Alerts</TabsTrigger>
           <TabsTrigger value="badges">Badges</TabsTrigger>
           <TabsTrigger value="buttons">Buttons</TabsTrigger>
+          <TabsTrigger value="checkboxes">Checkboxes</TabsTrigger>
           <TabsTrigger value="links">Links</TabsTrigger>
           <TabsTrigger value="menus">Menus</TabsTrigger>
           <TabsTrigger value="pagination">Pagination</TabsTrigger>
+          <TabsTrigger value="radios">Radios</TabsTrigger>
           <TabsTrigger value="selects">Selects</TabsTrigger>
           <TabsTrigger value="tabs">Tabs</TabsTrigger>
           <TabsTrigger value="tags">Tags</TabsTrigger>
@@ -63,10 +67,12 @@ const ChakraShowcases = () => {
         <AlertsShowcase/>
         <BadgesShowcase/>
         <ButtonShowcase/>
+        <CheckboxesShowcase/>
         <LinksShowcase/>
         <MenusShowcase/>
         <TabsShowcase/>
         <PaginationShowcase/>
+        <RadiosShowcase/>
         <SelectsShowcase/>
         <TooltipsShowcase/>
         <TagsShowcase/>

ui/pages/Transaction.tsx

@@ -58,7 +58,7 @@ const TransactionPageContent = () => {
       // config.features.suave.isEnabled && data?.wrapped ?
       //   { id: 'wrapped', title: 'Regular tx details', component: <TxDetailsWrapped data={ data.wrapped }/> } :
       //   undefined,
-      // { id: 'token_transfers', title: 'Token transfers', component: <TxTokenTransfer txQuery={ txQuery }/> },
+      { id: 'token_transfers', title: 'Token transfers', component: <TxTokenTransfer txQuery={ txQuery }/> },
       // config.features.userOps.isEnabled ?
       //   { id: 'user_ops', title: 'User operations', component: <TxUserOps txQuery={ txQuery }/> } :
       //   undefined,
@@ -74,12 +74,12 @@ const TransactionPageContent = () => {
 
   const tabIndex = useTabIndexFromQuery(tabs);
 
-  // const tags = (
-  //   <EntityTags
-  //     isLoading={ isPlaceholderData }
-  //     tags={ data?.transaction_tag ? [ { slug: data.transaction_tag, name: data.transaction_tag, tagType: 'private_tag' as const, ordinal: 10 } ] : [] }
-  //   />
-  // );
+  const tags = (
+    <EntityTags
+      isLoading={ isPlaceholderData }
+      tags={ data?.transaction_tag ? [ { slug: data.transaction_tag, name: data.transaction_tag, tagType: 'private_tag' as const, ordinal: 10 } ] : [] }
+    />
+  );
 
   const backLink = React.useMemo(() => {
     const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/txs');
@@ -121,7 +121,7 @@ const TransactionPageContent = () => {
       <PageTitle
         title="Transaction details"
         backLink={ backLink }
-        // contentAfter={ tags }
+        contentAfter={ tags }
         secondRow={ titleSecondRow }
       />
       { content }

ui/shared/TokenTransfer/TokenTransferFilter.tsx

-import {
-  Text,
-  Radio,
-  RadioGroup,
-  Stack,
-} from '@chakra-ui/react';
+import { Text, Stack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressFromToFilter } from 'types/api/address';
 import type { TokenType } from 'types/api/token';
 
 import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
+import { Radio, RadioGroup } from 'toolkit/chakra/radio';
 import PopoverFilter from 'ui/shared/filters/PopoverFilter';
 import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
 
@@ -34,20 +30,24 @@ const TokenTransferFilter = ({
 }: Props) => {
   const isInitialLoading = useIsInitialLoading(isLoading);
 
+  const handleAddressFilterChange = React.useCallback(({ value }: { value: string }) => {
+    onAddressFilterChange?.(value);
+  }, [ onAddressFilterChange ]);
+
   return (
     <PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ w: '220px' }} isLoading={ isInitialLoading }>
       { withAddressFilter && (
         <>
-          <Text variant="secondary" fontWeight={ 600 }>Address</Text>
+          <Text color="text.secondary" fontWeight={ 600 }>Address</Text>
           <RadioGroup
             size="lg"
-            onChange={ onAddressFilterChange }
+            onValueChange={ handleAddressFilterChange }
             defaultValue={ defaultAddressFilter || 'all' }
             paddingBottom={ 4 }
             borderBottom="1px solid"
             borderColor="border.divider"
           >
-            <Stack spacing={ 4 }>
+            <Stack gap={ 4 }>
               <Radio value="all"><Text fontSize="md">All</Text></Radio>
               <Radio value="from"><Text fontSize="md">Outgoing transfers</Text></Radio>
               <Radio value="to"><Text fontSize="md">Incoming transfers</Text></Radio>

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -5,9 +5,9 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { getTokenTypeName } from 'lib/token/tokenTypes';
+import { Badge } from 'toolkit/chakra/badge';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import Skeleton from 'ui/shared/chakra/Skeleton';
-import Tag from 'ui/shared/chakra/Tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -46,7 +46,7 @@ const TokenTransferListItem = ({
   }) : { usd: null, valueStr: null };
 
   return (
-    <ListItemMobile rowGap={ 3 } isAnimated>
+    <ListItemMobile rowGap={ 3 }>
       <Flex w="100%" justifyContent="space-between">
         <Flex flexWrap="wrap" rowGap={ 1 } mr={ showTxInfo && txHash ? 2 : 0 } columnGap={ 2 } overflow="hidden">
           { token && (
@@ -58,10 +58,10 @@ const TokenTransferListItem = ({
                 noCopy
                 w="auto"
               />
-              <Tag flexShrink={ 0 } isLoading={ isLoading }>{ getTokenTypeName(token.type) }</Tag>
+              <Badge flexShrink={ 0 } loading={ isLoading }>{ getTokenTypeName(token.type) }</Badge>
             </>
           ) }
-          <Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
+          <Badge colorScheme="orange" loading={ isLoading }>{ getTokenTransferTypeText(type) }</Badge>
         </Flex>
         { showTxInfo && txHash && (
           <TxAdditionalInfo hash={ txHash } isMobile isLoading={ isLoading }/>
@@ -97,8 +97,8 @@ const TokenTransferListItem = ({
       />
       { valueStr && (
         <Flex columnGap={ 2 } w="100%">
-          <Skeleton isLoaded={ !isLoading } fontWeight={ 500 } flexShrink={ 0 }>Value</Skeleton>
-          <Skeleton isLoaded={ !isLoading } color="text_secondary">
+          <Skeleton loading={ isLoading } fontWeight={ 500 } flexShrink={ 0 }>Value</Skeleton>
+          <Skeleton loading={ isLoading } color="text.secondary">
             <span>{ valueStr }</span>
             { usd && <span> (${ usd })</span> }
           </Skeleton>

ui/shared/TokenTransfer/TokenTransferTable.tsx

-import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
-import { default as Thead } from 'ui/shared/TheadSticky';
 import TokenTransferTableItem from 'ui/shared/TokenTransfer/TokenTransferTableItem';
 
 interface Props {
@@ -34,18 +33,18 @@ const TokenTransferTable = ({
 
   return (
     <AddressHighlightProvider>
-      <Table minW="950px">
-        <Thead top={ top }>
-          <Tr>
-            { showTxInfo && <Th width="44px"></Th> }
-            <Th width="230px">Token</Th>
-            <Th width="160px">Token ID</Th>
-            { showTxInfo && <Th width="200px">Txn hash</Th> }
-            <Th width="60%">From/To</Th>
-            <Th width="40%" isNumeric>Value</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
+      <TableRoot minW="950px">
+        <TableHeaderSticky top={ top }>
+          <TableRow>
+            { showTxInfo && <TableColumnHeader width="44px"></TableColumnHeader> }
+            <TableColumnHeader width="230px">Token</TableColumnHeader>
+            <TableColumnHeader width="160px">Token ID</TableColumnHeader>
+            { showTxInfo && <TableColumnHeader width="200px">Txn hash</TableColumnHeader> }
+            <TableColumnHeader width="60%">From/To</TableColumnHeader>
+            <TableColumnHeader width="40%" isNumeric>Value</TableColumnHeader>
+          </TableRow>
+        </TableHeaderSticky>
+        <TableBody>
           { showSocketInfo && (
             <SocketNewItemsNotice.Desktop
               url={ window.location.href }
@@ -65,8 +64,8 @@ const TokenTransferTable = ({
               isLoading={ isLoading }
             />
           )) }
-        </Tbody>
-      </Table>
+        </TableBody>
+      </TableRoot>
     </AddressHighlightProvider>
   );
 };

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

-import { Tr, Td, Flex, Box } from '@chakra-ui/react';
+import { Flex, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { getTokenTypeName } from 'lib/token/tokenTypes';
+import { Badge } from 'toolkit/chakra/badge';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import Skeleton from 'ui/shared/chakra/Skeleton';
-import Tag from 'ui/shared/chakra/Tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -45,15 +46,15 @@ const TokenTransferTableItem = ({
   }) : { usd: null, valueStr: null };
 
   return (
-    <Tr alignItems="top">
+    <TableRow alignItems="top">
       { showTxInfo && txHash && (
-        <Td>
+        <TableCell>
           <Box my="3px">
             <TxAdditionalInfo hash={ txHash } isLoading={ isLoading }/>
           </Box>
-        </Td>
+        </TableCell>
       ) }
-      <Td>
+      <TableCell>
         { token ? (
           <>
             <TokenEntity
@@ -64,13 +65,13 @@ const TokenTransferTableItem = ({
               mt={ 1 }
             />
             <Flex columnGap={ 2 } rowGap={ 2 } mt={ 2 } flexWrap="wrap">
-              <Tag isLoading={ isLoading }>{ getTokenTypeName(token.type) }</Tag>
-              <Tag colorScheme="orange" isLoading={ isLoading }>{ getTokenTransferTypeText(type) }</Tag>
+              <Badge loading={ isLoading }>{ getTokenTypeName(token.type) }</Badge>
+              <Badge colorScheme="orange" loading={ isLoading }>{ getTokenTransferTypeText(type) }</Badge>
             </Flex>
           </>
         ) : 'N/A' }
-      </Td>
-      <Td>
+      </TableCell>
+      <TableCell>
         { total && 'token_id' in total && total.token_id !== null && token && (
           <NftEntity
             hash={ token.address }
@@ -78,9 +79,9 @@ const TokenTransferTableItem = ({
             isLoading={ isLoading }
           />
         ) }
-      </Td>
+      </TableCell>
       { showTxInfo && txHash && (
-        <Td>
+        <TableCell>
           <TxEntity
             hash={ txHash }
             isLoading={ isLoading }
@@ -98,9 +99,9 @@ const TokenTransferTableItem = ({
             mt="10px"
             display="inline-block"
           />
-        </Td>
+        </TableCell>
       ) }
-      <Td>
+      <TableCell>
         <AddressFromTo
           from={ from }
           to={ to }
@@ -109,20 +110,20 @@ const TokenTransferTableItem = ({
           mt={ 1 }
           mode={{ lg: 'compact', xl: 'long' }}
         />
-      </Td>
-      <Td isNumeric verticalAlign="top">
+      </TableCell>
+      <TableCell isNumeric verticalAlign="top">
         { valueStr && (
-          <Skeleton isLoaded={ !isLoading } display="inline-block" mt="7px" wordBreak="break-all">
+          <Skeleton loading={ isLoading } display="inline-block" mt="7px" wordBreak="break-all">
             { valueStr }
           </Skeleton>
         ) }
         { usd && (
-          <Skeleton isLoaded={ !isLoading } color="text_secondary" mt="10px" ml="auto" w="min-content">
+          <Skeleton loading={ isLoading } color="text.secondary" mt="10px" ml="auto" w="min-content">
             <span>${ usd }</span>
           </Skeleton>
         ) }
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/shared/filters/FilterButton.tsx

-import type { As } from '@chakra-ui/react';
-import { Box, Button, Circle, useColorModeValue } from '@chakra-ui/react';
+import { Box, Circle } from '@chakra-ui/react';
 import React from 'react';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import type { ButtonProps } from 'toolkit/chakra/button';
+import { Button } from 'toolkit/chakra/button';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import IconSvg from 'ui/shared/IconSvg';
 
-const FilterIcon = <IconSvg name="filter" boxSize={ 5 } mr={{ base: 0, lg: 2 }}/>;
-
-interface Props {
-  isActive?: boolean;
+interface Props extends ButtonProps {
   isLoading?: boolean;
   appliedFiltersNum?: number;
-  onClick: () => void;
-  as?: As;
 }
 
-const FilterButton = ({ isActive, isLoading, appliedFiltersNum, onClick, as }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
-  const badgeColor = useColorModeValue('white', 'black');
-  const badgeBgColor = useColorModeValue('blue.700', 'gray.50');
-
+const FilterButton = ({ isLoading, appliedFiltersNum, ...rest }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   if (isLoading) {
-    return <Skeleton w={{ base: 9, lg: '78px' }} h={ 8 } borderRadius="base" flexShrink={ 0 }/>;
+    return <Skeleton loading w={{ base: 9, lg: '78px' }} h={ 8 } borderRadius="base" flexShrink={ 0 }/>;
   }
 
-  const num = (
+  const numElement = appliedFiltersNum ? (
     <Circle
       className="AppliedFiltersNum"
-      bg={ isActive ? 'link_hovered' : badgeBgColor }
       size={ 5 }
-      color={ badgeColor }
+      bg={{ _light: 'blue.700', _dark: 'gray.50' }}
+      color={{ _light: 'white', _dark: 'black' }}
     >
       { appliedFiltersNum }
     </Circle>
-  );
+  ) : null;
 
   return (
     <Button
       ref={ ref }
-      rightIcon={ appliedFiltersNum ? num : undefined }
       size="sm"
-      fontWeight="500"
-      variant="outline"
-      colorScheme="gray"
-      onClick={ onClick }
-      isActive={ isActive }
+      fontWeight="medium"
+      gap={ 1 }
+      variant="dropdown"
       selected={ Boolean(appliedFiltersNum) }
-      px={ 1.5 }
       flexShrink={ 0 }
-      as={ as }
       pointerEvents="all"
-      _hover={ isActive ? {
-        color: 'link_hovered',
-        '.AppliedFiltersNum': {
-          bg: 'link_hovered',
-        },
-      } : undefined }
+      { ...rest }
     >
-      { FilterIcon }
+      <IconSvg name="filter" boxSize={ 5 }/>
       <Box display={{ base: 'none', lg: 'block' }}>Filter</Box>
+      { numElement }
     </Button>
   );
 };

ui/shared/filters/PopoverFilter.tsx

 import type { PopoverContentProps } from '@chakra-ui/react';
-import {
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  useDisclosure,
-} from '@chakra-ui/react';
 import React from 'react';
 
-import Popover from 'ui/shared/chakra/Popover';
+import { PopoverBody, PopoverContent, PopoverTrigger, PopoverRoot } from 'toolkit/chakra/popover';
 import FilterButton from 'ui/shared/filters/FilterButton';
 
 interface Props {
@@ -18,24 +12,20 @@ interface Props {
 }
 
 const PopoverFilter = ({ appliedFiltersNum, children, contentProps, isLoading }: Props) => {
-  const { isOpen, onToggle, onClose } = useDisclosure();
-
   return (
-    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+    <PopoverRoot>
       <PopoverTrigger>
         <FilterButton
-          isActive={ isOpen }
-          onClick={ onToggle }
           appliedFiltersNum={ appliedFiltersNum }
           isLoading={ isLoading }
         />
       </PopoverTrigger>
       <PopoverContent { ...contentProps }>
-        <PopoverBody px={ 4 } py={ 6 } display="flex" flexDir="column" rowGap={ 5 }>
+        <PopoverBody display="flex" flexDir="column" rowGap={ 5 }>
           { children }
         </PopoverBody>
       </PopoverContent>
-    </Popover>
+    </PopoverRoot>
   );
 };
 

ui/shared/filters/TokenTypeFilter.tsx

-import { CheckboxGroup, Checkbox, Text, Flex, Link, useCheckboxGroup } from '@chakra-ui/react';
+import { CheckboxGroup, Text, Flex, useCheckboxGroup, Fieldset } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NFTTokenType, TokenType } from 'types/api/token';
 
-import {
-  TOKEN_TYPES, TOKEN_TYPE_IDS, NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
+import { TOKEN_TYPES, TOKEN_TYPE_IDS, NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
+import { Checkbox } from 'toolkit/chakra/checkbox';
+import { Link } from 'toolkit/chakra/link';
 
 type Props<T extends TokenType | NFTTokenType> = {
   onChange: (nextValue: Array<T>) => void;
@@ -22,15 +23,15 @@ const TokenTypeFilter = <T extends TokenType | NFTTokenType>({ nftOnly, onChange
     onChange([]);
   }, [ onChange, setValue, value.length ]);
 
-  const handleChange = React.useCallback((nextValue: Array<T>) => {
-    setValue(nextValue);
-    onChange(nextValue);
+  const handleChange = React.useCallback((nextValue: Array<string>) => {
+    setValue(nextValue as Array<T>);
+    onChange(nextValue as Array<T>);
   }, [ onChange, setValue ]);
 
   return (
     <>
       <Flex justifyContent="space-between" fontSize="sm">
-        <Text fontWeight={ 600 } variant="secondary">Type</Text>
+        <Text fontWeight={ 600 } color="text.secondary">Type</Text>
         <Link
           onClick={ handleReset }
           cursor={ value.length > 0 ? 'pointer' : 'unset' }
@@ -42,13 +43,24 @@ const TokenTypeFilter = <T extends TokenType | NFTTokenType>({ nftOnly, onChange
           Reset
         </Link>
       </Flex>
-      <CheckboxGroup size="lg" onChange={ handleChange } value={ value }>
+      <Fieldset.Root>
+        <CheckboxGroup defaultValue={ defaultValue } onValueChange={ handleChange } value={ value } name="token_type">
+          <Fieldset.Content>
             { (nftOnly ? NFT_TOKEN_TYPE_IDS : TOKEN_TYPE_IDS).map((id) => (
               <Checkbox key={ id } value={ id }>
-            <Text fontSize="md">{ TOKEN_TYPES[id] }</Text>
+                { TOKEN_TYPES[id] }
               </Checkbox>
             )) }
+          </Fieldset.Content>
         </CheckboxGroup>
+      </Fieldset.Root>
+      { /* <CheckboxGroup size="lg" onChange={ handleChange } value={ value }>
+        { (nftOnly ? NFT_TOKEN_TYPE_IDS : TOKEN_TYPE_IDS).map((id) => (
+          <Checkbox key={ id } value={ id }>
+            <Text fontSize="md">{ TOKEN_TYPES[id] }</Text>
+          </Checkbox>
+        )) }
+      </CheckboxGroup> */ }
     </>
   );
 };

ui/showcases/Checkbox.tsx

+import React from 'react';
+
+import { Checkbox } from 'toolkit/chakra/checkbox';
+
+import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
+
+const CheckboxesShowcase = () => {
+
+  return (
+    <Container value="checkboxes">
+      <Section>
+        <SectionHeader>Variant</SectionHeader>
+        <SamplesStack>
+          <Sample label="variant: subtle">
+            <Checkbox>Option 1</Checkbox>
+            <Checkbox checked>Option 2</Checkbox>
+            <Checkbox disabled>Option 3</Checkbox>
+            <Checkbox checked disabled>Option 4</Checkbox>
+          </Sample>
+        </SamplesStack>
+      </Section>
+
+      <Section>
+        <SectionHeader>Size</SectionHeader>
+        <SamplesStack>
+          <Sample label="size: xs">
+            <Checkbox size="xs">Option 1</Checkbox>
+            <Checkbox size="xs">Option 2</Checkbox>
+          </Sample>
+          <Sample label="size: sm">
+            <Checkbox size="sm">Option 1</Checkbox>
+            <Checkbox size="sm">Option 2</Checkbox>
+          </Sample>
+          <Sample label="size: md">
+            <Checkbox size="md">Option 1</Checkbox>
+            <Checkbox size="md">Option 2</Checkbox>
+          </Sample>
+        </SamplesStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default React.memo(CheckboxesShowcase);

ui/showcases/Radio.tsx

+import React from 'react';
+
+import { Radio, RadioGroup } from 'toolkit/chakra/radio';
+
+import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
+
+const RadiosShowcase = () => {
+
+  return (
+    <Container value="radios">
+      <Section>
+        <SectionHeader>Variant</SectionHeader>
+        <SamplesStack>
+          <Sample label="variant: subtle">
+            <RadioGroup defaultValue="1">
+              <Radio value="1">Option 1</Radio>
+              <Radio value="2">Option 2</Radio>
+            </RadioGroup>
+          </Sample>
+        </SamplesStack>
+      </Section>
+
+      <Section>
+        <SectionHeader>Size</SectionHeader>
+        <SamplesStack>
+          <Sample label="size: xs">
+            <RadioGroup defaultValue="1" size="xs">
+              <Radio value="1">Option 1</Radio>
+              <Radio value="2">Option 2</Radio>
+            </RadioGroup>
+          </Sample>
+          <Sample label="size: sm">
+            <RadioGroup defaultValue="1" size="sm">
+              <Radio value="1">Option 1</Radio>
+              <Radio value="2">Option 2</Radio>
+            </RadioGroup>
+          </Sample>
+          <Sample label="size: md">
+            <RadioGroup defaultValue="1" size="md">
+              <Radio value="1">Option 1</Radio>
+              <Radio value="2">Option 2</Radio>
+            </RadioGroup>
+          </Sample>
+        </SamplesStack>
+      </Section>
+
+      <Section>
+        <SectionHeader>Orientation</SectionHeader>
+        <SamplesStack>
+          <Sample label="orientation: horizontal">
+            <RadioGroup defaultValue="1" orientation="horizontal">
+              <Radio value="1">Option 1</Radio>
+              <Radio value="2">Option 2</Radio>
+            </RadioGroup>
+          </Sample>
+          <Sample label="orientation: vertical">
+            <RadioGroup defaultValue="1" orientation="vertical">
+              <Radio value="1">Option 1</Radio>
+              <Radio value="2">Option 2</Radio>
+            </RadioGroup>
+          </Sample>
+        </SamplesStack>
+      </Section>
+
+      <Section>
+        <SectionHeader>Disabled</SectionHeader>
+        <SamplesStack>
+          <Sample label="disabled: true">
+            <RadioGroup defaultValue="1" disabled>
+              <Radio value="1">Option 1</Radio>
+              <Radio value="2">Option 2</Radio>
+            </RadioGroup>
+          </Sample>
+        </SamplesStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default React.memo(RadiosShowcase);

ui/showcases/Select.tsx

 import { createListCollection } from '@chakra-ui/react';
+import { noop } from 'es-toolkit';
 import React from 'react';
 
 import { SelectContent, SelectItem, SelectRoot, SelectControl, SelectValueText } from 'toolkit/chakra/select';
 import Sort from 'ui/shared/sort/Sort';
+import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 import { SORT_OPTIONS } from 'ui/txs/useTxsSort';
 
 import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
@@ -75,6 +77,15 @@ const SelectsShowcase = () => {
             />
           </Sample>
         </SamplesStack>
+
+        <SectionSubHeader>Token transfers filter</SectionSubHeader>
+        <SamplesStack>
+          <Sample>
+            <TokenTransferFilter defaultTypeFilters={ [ ] } onTypeFilterChange={ noop } withAddressFilter/>
+            <TokenTransferFilter defaultTypeFilters={ [ ] } onTypeFilterChange={ noop } appliedFiltersNum={ 2 }/>
+            <TokenTransferFilter defaultTypeFilters={ [ ] } onTypeFilterChange={ noop } appliedFiltersNum={ 2 } isLoading/>
+          </Sample>
+        </SamplesStack>
       </Section>
     </Container>
   );

ui/tx/TxTokenTransfer.tsx

-import { Hide, Show } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -72,12 +72,12 @@ const TxTokenTransfer = ({ txQuery, tokenTransferFilter }: Props) => {
 
   const content = tokenTransferQuery.data?.items ? (
     <>
-      <Hide below="lg" ssr={ false }>
+      <Box hideBelow="lg">
         <TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : ACTION_BAR_HEIGHT_DESKTOP } isLoading={ tokenTransferQuery.isPlaceholderData }/>
-      </Hide>
-      <Show below="lg" ssr={ false }>
+      </Box>
+      <Box hideFrom="lg">
         <TokenTransferList data={ items } isLoading={ tokenTransferQuery.isPlaceholderData }/>
-      </Show>
+      </Box>
     </>
   ) : null;
 
@@ -96,15 +96,16 @@ const TxTokenTransfer = ({ txQuery, tokenTransferFilter }: Props) => {
   return (
     <DataListDisplay
       isError={ txQuery.isError || tokenTransferQuery.isError }
-      items={ items }
+      itemsNum={ items.length }
       emptyText="There are no token transfers."
       filterProps={{
         emptyFilteredText: `Couldn${ apos }t find any token transfer that matches your query.`,
         hasActiveFilters: Boolean(numActiveFilters),
       }}
-      content={ content }
       actionBar={ actionBar }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };