address tokens tab

toolkit/chakra/button.tsx

@@ -82,11 +82,12 @@ export interface ButtonGroupRadioProps extends Omit<ChakraButtonGroupProps, 'chi
   onChange?: (value: string) => void;
   defaultValue?: string;
   loading?: boolean;
+  equalWidth?: boolean;
 }
 
 export const ButtonGroupRadio = React.forwardRef<HTMLDivElement, ButtonGroupRadioProps>(
   function ButtonGroupRadio(props, ref) {
-    const { children, onChange, variant = 'segmented', defaultValue, loading = false, ...rest } = props;
+    const { children, onChange, variant = 'segmented', defaultValue, loading = false, equalWidth = false, ...rest } = props;
 
     const firstChildValue = React.useMemo(() => {
       const firstChild = Array.isArray(children) ? children[0] : undefined;
@@ -109,11 +110,17 @@ export const ButtonGroupRadio = React.forwardRef<HTMLDivElement, ButtonGroupRadi
       });
     });
 
+    const childrenLength = React.Children.count(children);
+
     return (
       <Skeleton loading={ loading }>
         <ChakraButtonGroup
           ref={ ref }
           gap={ 0 }
+          { ...(equalWidth ? {
+            display: 'grid',
+            gridTemplateColumns: `repeat(${ childrenLength }, 1fr)`,
+          } : {}) }
           { ...rest }
         >
           { clonedChildren }

toolkit/chakra/image.tsx

@@ -10,19 +10,21 @@ export interface ImageProps extends ChakraImageProps {
 
 export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
   function Image(props, ref) {
-    const { fallback, src, ...rest } = props;
+    const { fallback, src, onLoad, onError, ...rest } = props;
 
     const [ loading, setLoading ] = React.useState(true);
     const [ error, setError ] = React.useState(false);
 
-    const handleLoadError = React.useCallback(() => {
+    const handleLoadError = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {
       setError(true);
       setLoading(false);
-    }, []);
+      onError?.(event);
+    }, [ onError ]);
 
-    const handleLoadSuccess = React.useCallback(() => {
+    const handleLoadSuccess = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {
       setLoading(false);
-    }, []);
+      onLoad?.(event);
+    }, [ onLoad ]);
 
     if (!src && fallback) {
       return fallback;

ui/address/AddressTokens.tsx

-import { Box, HStack } from '@chakra-ui/react';
+import { Box, chakra, HStack } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -15,12 +15,13 @@ import getQueryParamString from 'lib/router/getQueryParamString';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { ADDRESS_TOKEN_BALANCE_ERC_20, ADDRESS_NFT_1155, ADDRESS_COLLECTION } from 'stubs/address';
 import { generateListStub } from 'stubs/utils';
+import { Button, ButtonGroupRadio } from 'toolkit/chakra/button';
+import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
 import PopoverFilter from 'ui/shared/filters/PopoverFilter';
 import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
+import IconSvg from 'ui/shared/IconSvg';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import RadioButtonGroup from 'ui/shared/radioButtonGroup/RadioButtonGroup';
-import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 
 import AddressCollections from './tokens/AddressCollections';
 import AddressNFTs from './tokens/AddressNFTs';
@@ -96,9 +97,9 @@ const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) =>
     filters: { type: tokenTypes },
   });
 
-  const handleNFTsDisplayTypeChange = React.useCallback((val: TNftDisplayType) => {
+  const handleNFTsDisplayTypeChange = React.useCallback((val: string) => {
     cookies.set(cookies.NAMES.ADDRESS_NFT_DISPLAY_TYPE, val);
-    setNftDisplayType(val);
+    setNftDisplayType(val as TNftDisplayType);
   }, []);
 
   const handleTokenTypesChange = React.useCallback((value: Array<NFTTokenType>) => {
@@ -131,15 +132,20 @@ const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) =>
   ];
 
   const nftDisplayTypeRadio = (
-    <RadioButtonGroup<TNftDisplayType>
-      onChange={ handleNFTsDisplayTypeChange }
+    <ButtonGroupRadio
       defaultValue={ nftDisplayType }
-      name="type"
-      options={ [
-        { title: 'By collection', value: 'collection', icon: 'collection', onlyIcon: isMobile },
-        { title: 'List', value: 'list', icon: 'apps', onlyIcon: isMobile },
-      ] }
-    />
+      onChange={ handleNFTsDisplayTypeChange }
+      equalWidth
+    >
+      <Button value="collection" size="sm" px={ 3 }>
+        <IconSvg name="collection" boxSize={ 5 }/>
+        <chakra.span hideBelow="lg">By collection</chakra.span>
+      </Button>
+      <Button value="list" size="sm" px={ 3 }>
+        <IconSvg name="apps" boxSize={ 5 }/>
+        <chakra.span hideBelow="lg">List</chakra.span>
+      </Button>
+    </ButtonGroupRadio>
   );
 
   let pagination: PaginationParams | undefined;
@@ -158,7 +164,7 @@ const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) =>
 
   const rightSlot = (
     <>
-      <HStack spacing={ 3 }>
+      <HStack gap={ 3 }>
         { isNftTab && (hasNftData || hasActiveFilters) && nftDisplayTypeRadio }
         { isNftTab && (hasNftData || hasActiveFilters) && nftTypeFilter }
       </HStack>
@@ -173,10 +179,9 @@ const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) =>
       <Box ref={ scrollRef }></Box>
       <RoutedTabs
         tabs={ tabs }
-        variant="outline"
-        colorScheme="gray"
+        variant="secondary"
         size="sm"
-        tabListProps={ isMobile ? TAB_LIST_PROPS_MOBILE : TAB_LIST_PROPS }
+        listProps={ isMobile ? TAB_LIST_PROPS_MOBILE : TAB_LIST_PROPS }
         rightSlot={ rightSlot }
         rightSlotProps={ tab !== 'tokens_erc20' && !isMobile ? { flexGrow: 1, display: 'flex', justifyContent: 'space-between', ml: 8 } : {} }
         stickyEnabled={ !isMobile }

ui/address/tokens/AddressCollections.tsx

@@ -5,11 +5,11 @@ import { route } from 'nextjs-routes';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { apos } from 'lib/html-entities';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import ActionBar from 'ui/shared/ActionBar';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import NftFallback from 'ui/shared/nft/NftFallback';
 import Pagination from 'ui/shared/pagination/Pagination';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
@@ -56,12 +56,12 @@ const AddressCollections = ({ collectionsQuery, address, hasActiveFilters }: Pro
             noCopy
             fontWeight="600"
           />
-          <Skeleton isLoaded={ !isPlaceholderData } mr={ 3 }>
-            <Text variant="secondary" whiteSpace="pre">{ ` - ${ Number(item.amount).toLocaleString() } item${ Number(item.amount) > 1 ? 's' : '' }` }</Text>
+          <Skeleton loading={ isPlaceholderData } mr={ 3 }>
+            <Text color="text.secondary" whiteSpace="pre">{ ` - ${ Number(item.amount).toLocaleString() } item${ Number(item.amount) > 1 ? 's' : '' }` }</Text>
           </Skeleton>
-          <LinkInternal href={ collectionUrl } isLoading={ isPlaceholderData }>
-            <Skeleton isLoaded={ !isPlaceholderData }>View in collection</Skeleton>
-          </LinkInternal>
+          <Link href={ collectionUrl } loading={ isPlaceholderData }>
+            View in collection
+          </Link>
         </Flex>
         <Grid
           w="100%"
@@ -83,16 +83,16 @@ const AddressCollections = ({ collectionsQuery, address, hasActiveFilters }: Pro
             );
           }) }
           { hasOverload && (
-            <LinkInternal display="flex" href={ collectionUrl }>
+            <Link href={ collectionUrl }>
               <NFTItemContainer display="flex" alignItems="center" justifyContent="center" flexDirection="column" minH="248px">
                 <HStack gap={ 2 } mb={ 3 }>
-                  <NftFallback bgColor="unset" w="30px" h="30px" boxSize="30px" p={ 0 }/>
-                  <NftFallback bgColor="unset" w="30px" h="30px" boxSize="30px" p={ 0 }/>
-                  <NftFallback bgColor="unset" w="30px" h="30px" boxSize="30px" p={ 0 }/>
+                  <NftFallback bgColor={{ _light: 'unset', _dark: 'unset' }} w="30px" h="30px" boxSize="30px" p={ 0 }/>
+                  <NftFallback bgColor={{ _light: 'unset', _dark: 'unset' }} w="30px" h="30px" boxSize="30px" p={ 0 }/>
+                  <NftFallback bgColor={{ _light: 'unset', _dark: 'unset' }} w="30px" h="30px" boxSize="30px" p={ 0 }/>
                 </HStack>
                 View all NFTs
               </NFTItemContainer>
-            </LinkInternal>
+            </Link>
           ) }
         </Grid>
       </Box>
@@ -102,15 +102,16 @@ const AddressCollections = ({ collectionsQuery, address, hasActiveFilters }: Pro
   return (
     <DataListDisplay
       isError={ isError }
-      items={ data?.items }
+      itemsNum={ data?.items?.length }
       emptyText="There are no tokens of selected type."
-      content={ content }
       actionBar={ actionBar }
       filterProps={{
         emptyFilteredText: `Couldn${ apos }t find any token that matches your query.`,
         hasActiveFilters,
       }}
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/address/tokens/AddressNFTs.tsx

@@ -51,15 +51,16 @@ const AddressNFTs = ({ tokensQuery, hasActiveFilters }: Props) => {
   return (
     <DataListDisplay
       isError={ isError }
-      items={ data?.items }
+      itemsNum={ data?.items?.length }
       emptyText="There are no tokens of selected type."
-      content={ content }
       actionBar={ actionBar }
       filterProps={{
         emptyFilteredText: `Couldn${ apos }t find any token that matches your query.`,
         hasActiveFilters,
       }}
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/address/tokens/ERC20Tokens.tsx

-import { Show, Hide } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -27,24 +27,27 @@ const ERC20Tokens = ({ tokensQuery }: Props) => {
 
   const content = data?.items ? (
     <>
-      <Hide below="lg" ssr={ false }><ERC20TokensTable data={ data.items } top={ pagination.isVisible ? 72 : 0 } isLoading={ isPlaceholderData }/></Hide>
-      <Show below="lg" ssr={ false }>{ data.items.map((item, index) => (
+      <Box hideBelow="lg"><ERC20TokensTable data={ data.items } top={ pagination.isVisible ? 72 : 0 } isLoading={ isPlaceholderData }/></Box>
+      <Box hideFrom="lg">{ data.items.map((item, index) => (
         <ERC20TokensListItem
           key={ item.token.address + (isPlaceholderData ? index : '') }
           { ...item }
           isLoading={ isPlaceholderData }
         />
-      )) }</Show></>
+      )) }
+      </Box>
+    </>
   ) : null;
 
   return (
     <DataListDisplay
       isError={ isError }
-      items={ data?.items }
+      itemsNum={ data?.items.length }
       emptyText="There are no tokens of selected type."
-      content={ content }
       actionBar={ actionBar }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 
 };

ui/address/tokens/ERC20TokensListItem.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 import type { AddressTokenBalance } from 'types/api/address';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -40,23 +40,23 @@ const ERC20TokensListItem = ({ token, value, isLoading }: Props) => {
         <AddressAddToWallet token={ token } ml={ 2 } isLoading={ isLoading }/>
       </Flex>
       { token.exchange_rate !== undefined && token.exchange_rate !== null && (
-        <HStack spacing={ 3 }>
-          <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Price</Skeleton>
-          <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
+        <HStack gap={ 3 }>
+          <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Price</Skeleton>
+          <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary">
             <span>{ `$${ Number(token.exchange_rate).toLocaleString() }` }</span>
           </Skeleton>
         </HStack>
       ) }
-      <HStack spacing={ 3 } alignItems="baseline">
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Quantity</Skeleton>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" whiteSpace="pre-wrap" wordBreak="break-word">
+      <HStack gap={ 3 } alignItems="baseline">
+        <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Quantity</Skeleton>
+        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" whiteSpace="pre-wrap" wordBreak="break-word">
           <span>{ tokenQuantity }</span>
         </Skeleton>
       </HStack>
       { tokenValue !== undefined && (
-        <HStack spacing={ 3 } alignItems="baseline">
-          <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value</Skeleton>
-          <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" whiteSpace="pre-wrap" wordBreak="break-word">
+        <HStack gap={ 3 } alignItems="baseline">
+          <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Value</Skeleton>
+          <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" whiteSpace="pre-wrap" wordBreak="break-word">
             <span>${ tokenValue }</span>
           </Skeleton>
         </HStack>

ui/address/tokens/ERC20TokensTable.tsx

-import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressTokenBalance } from 'types/api/address';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import ERC20TokensTableItem from './ERC20TokensTableItem';
 
@@ -15,22 +14,22 @@ interface Props {
 
 const ERC20TokensTable = ({ data, top, isLoading }: Props) => {
   return (
-    <Table>
-      <Thead top={ top }>
-        <Tr>
-          <Th width="30%">Asset</Th>
-          <Th width="30%">Contract address</Th>
-          <Th width="10%" isNumeric>Price</Th>
-          <Th width="15%" isNumeric>Quantity</Th>
-          <Th width="15%" isNumeric>Value</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot>
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader width="30%">Asset</TableColumnHeader>
+          <TableColumnHeader width="30%">Contract address</TableColumnHeader>
+          <TableColumnHeader width="10%" isNumeric>Price</TableColumnHeader>
+          <TableColumnHeader width="15%" isNumeric>Quantity</TableColumnHeader>
+          <TableColumnHeader width="15%" isNumeric>Value</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { data.map((item, index) => (
           <ERC20TokensTableItem key={ item.token.address + (isLoading ? index : '') } { ...item } isLoading={ isLoading }/>
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/address/tokens/ERC20TokensTableItem.tsx

-import { Tr, Td, Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressTokenBalance } from 'types/api/address';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
@@ -23,10 +24,8 @@ const ERC20TokensTableItem = ({
   } = getCurrencyValue({ value: value, exchangeRate: token.exchange_rate, decimals: token.decimals, accuracy: 8, accuracyUsd: 2 });
 
   return (
-    <Tr
-      role="group"
-    >
-      <Td verticalAlign="middle">
+    <TableRow role="group" >
+      <TableCell verticalAlign="middle">
         <TokenEntity
           token={ token }
           isLoading={ isLoading }
@@ -34,8 +33,8 @@ const ERC20TokensTableItem = ({
           jointSymbol
           fontWeight="700"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <Flex alignItems="center" width="150px" justifyContent="space-between">
           <AddressEntity
             address={{ hash: token.address }}
@@ -45,23 +44,23 @@ const ERC20TokensTableItem = ({
           />
           <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading } opacity="0" _groupHover={{ opacity: 1 }}/>
         </Flex>
-      </Td>
-      <Td isNumeric verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+      </TableCell>
+      <TableCell isNumeric verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">
           { token.exchange_rate && `$${ Number(token.exchange_rate).toLocaleString() }` }
         </Skeleton>
-      </Td>
-      <Td isNumeric verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline">
+      </TableCell>
+      <TableCell isNumeric verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline">
           { tokenQuantity }
         </Skeleton>
-      </Td>
-      <Td isNumeric verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline">
+      </TableCell>
+      <TableCell isNumeric verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline">
           { tokenValue && `$${ tokenValue }` }
         </Skeleton>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/address/tokens/NFTItem.tsx

-import { Tag, Flex, Text, Link, LightMode } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressNFT } from 'types/api/address';
@@ -7,7 +7,9 @@ import { route } from 'nextjs-routes';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { getTokenTypeName } from 'lib/token/tokenTypes';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { Tag } from 'toolkit/chakra/tag';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import NftMedia from 'ui/shared/nft/NftMedia';
@@ -24,10 +26,10 @@ const NFTItem = ({ token, value, isLoading, withTokenLink, ...tokenInstance }: P
 
   return (
     <NFTItemContainer position="relative">
-      <Skeleton isLoaded={ !isLoading }>
-        <LightMode><Tag background="gray.50" zIndex={ 1 } position="absolute" top="18px" right="18px">{ getTokenTypeName(token.type) }</Tag></LightMode>
+      <Skeleton loading={ isLoading } className="light">
+        <Tag background="gray.50" zIndex={ 1 } position="absolute" top="18px" right="18px">{ getTokenTypeName(token.type) }</Tag>
       </Skeleton>
-      <Link href={ isLoading ? undefined : tokenInstanceLink }>
+      <Link href={ isLoading ? undefined : tokenInstanceLink } display="inline">
         <NftMedia
           mb="18px"
           data={ tokenInstance }
@@ -37,13 +39,13 @@ const NFTItem = ({ token, value, isLoading, withTokenLink, ...tokenInstance }: P
       </Link>
       <Flex justifyContent="space-between" w="100%" flexWrap="wrap">
         <Flex ml={ 1 } overflow="hidden">
-          <Text whiteSpace="pre" variant="secondary">ID# </Text>
+          <Text whiteSpace="pre" color="text.secondary">ID# </Text>
           <NftEntity hash={ token.address } id={ tokenInstance.id } isLoading={ isLoading } noIcon/>
         </Flex>
-        <Skeleton isLoaded={ !isLoading } overflow="hidden" ml={ 1 }>
+        <Skeleton loading={ isLoading } overflow="hidden" ml={ 1 }>
           { valueResult && (
             <Flex>
-              <Text variant="secondary" whiteSpace="pre">Qty </Text>
+              <Text color="text.secondary" whiteSpace="pre">Qty </Text>
               <Text overflow="hidden" wordBreak="break-all">{ valueResult }</Text>
             </Flex>
           ) }

ui/address/tokens/NFTItemContainer.tsx

-import { Box, useColorModeValue, chakra } from '@chakra-ui/react';
+import { Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 type Props = {
@@ -11,7 +11,7 @@ const NFTItemContainer = ({ children, className }: Props) => {
     <Box
       w={{ base: '100%', lg: '210px' }}
       border="1px solid"
-      borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
+      borderColor={{ _light: 'blackAlpha.100', _dark: 'whiteAlpha.200' }}
       borderRadius="12px"
       p="10px"
       fontSize="sm"

ui/address/tokens/TokenBalancesItem.tsx

-import { Box, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import React from 'react';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+
 type Props = {
   name: string;
   value: string;
@@ -12,16 +13,14 @@ type Props = {
 
 const TokenBalancesItem = ({ name, icon, value, valueSecondary, isLoading }: Props) => {
 
-  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-
   return (
-    <Box px="12px" py="10px" bgColor={ bgColor } borderRadius="base">
-      <Text variant="secondary" fontSize="xs" fontWeight={ 500 } mb={ 1 }>{ name }</Text>
+    <Box px="12px" py="10px" bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }} borderRadius="base">
+      <Text color="text.secondary" textStyle="xs" fontWeight={ 500 } mb={ 1 }>{ name }</Text>
       <Flex alignItems="center">
         { icon }
-        <Skeleton isLoaded={ !isLoading } fontWeight="500" whiteSpace="pre-wrap" wordBreak="break-word" display="flex" ml={ 2 }>
+        <Skeleton loading={ isLoading } fontWeight="500" whiteSpace="pre-wrap" wordBreak="break-word" display="flex" ml={ 2 }>
           { value }
-          { Boolean(valueSecondary) && <Text color="text_secondary"> ({ valueSecondary })</Text> }
+          { Boolean(valueSecondary) && <Text color="text.secondary"> ({ valueSecondary })</Text> }
         </Skeleton>
       </Flex>
     </Box>

ui/pages/Address.tsx

@@ -194,13 +194,13 @@ const AddressPageContent = () => {
         count: addressTabsCountersQuery.data?.token_transfers_count,
         component: <AddressTokenTransfers scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
-      // {
-      //   id: 'tokens',
-      //   title: 'Tokens',
-      //   count: addressTabsCountersQuery.data?.token_balances_count,
-      //   component: <AddressTokens shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
-      //   subTabs: TOKEN_TABS,
-      // },
+      {
+        id: 'tokens',
+        title: 'Tokens',
+        count: addressTabsCountersQuery.data?.token_balances_count,
+        component: <AddressTokens shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+        subTabs: TOKEN_TABS,
+      },
       // {
       //   id: 'internal_txns',
       //   title: 'Internal txns',

ui/shared/filters/TokenTypeFilter.tsx

@@ -54,13 +54,6 @@ const TokenTypeFilter = <T extends TokenType | NFTTokenType>({ nftOnly, onChange
           </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/shared/nft/NftFallback.tsx

-import { useColorModeValue, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import IconSvg from 'ui/shared/IconSvg';
@@ -9,8 +9,8 @@ const NftFallback = ({ className }: { className?: string }) => {
       className={ className }
       name="nft_shield"
       p="50px"
-      color={ useColorModeValue('blackAlpha.500', 'whiteAlpha.500') }
-      bgColor={ useColorModeValue('blackAlpha.50', 'whiteAlpha.50') }
+      color={{ _light: 'blackAlpha.500', _dark: 'whiteAlpha.500' }}
+      bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }}
     />
   );
 };

ui/shared/nft/NftHtml.tsx

@@ -14,6 +14,7 @@ const NftHtml = ({ src, onLoad, onError, onClick }: Props) => {
   return (
     <LinkOverlay
       onClick={ onClick }
+      h="100%"
       { ...mediaStyleProps }
     >
       <chakra.iframe

ui/shared/nft/NftHtmlFullscreen.tsx

@@ -5,13 +5,13 @@ import NftMediaFullscreenModal from './NftMediaFullscreenModal';
 
 interface Props {
   src: string;
-  isOpen: boolean;
-  onClose: () => void;
+  open: boolean;
+  onOpenChange: ({ open }: { open: boolean }) => void;
 }
 
-const NftHtmlFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftHtmlFullscreen = ({ src, open, onOpenChange }: Props) => {
   return (
-    <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
+    <NftMediaFullscreenModal open={ open } onOpenChange={ onOpenChange }>
       <chakra.iframe
         w="90vw"
         h="90vh"

ui/shared/nft/NftImage.tsx

-import { Image } from '@chakra-ui/react';
 import React from 'react';
 
+import { Image } from 'toolkit/chakra/image';
+
 import { mediaStyleProps } from './utils';
 
 interface Props {

ui/shared/nft/NftImageFullscreen.tsx

-import {
-  Image,
-} from '@chakra-ui/react';
 import React from 'react';
 
+import { Image } from 'toolkit/chakra/image';
+
 import NftMediaFullscreenModal from './NftMediaFullscreenModal';
 
 interface Props {
   src: string;
-  isOpen: boolean;
-  onClose: () => void;
+  open: boolean;
+  onOpenChange: ({ open }: { open: boolean }) => void;
 }
 
-const NftImageFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftImageFullscreen = ({ src, open, onOpenChange }: Props) => {
   const imgRef = React.useRef<HTMLImageElement>(null);
   const [ hasDimensions, setHasDimensions ] = React.useState<boolean>(true);
 
@@ -22,7 +21,7 @@ const NftImageFullscreen = ({ src, isOpen, onClose }: Props) => {
   }, [ ]);
 
   return (
-    <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
+    <NftMediaFullscreenModal open={ open } onOpenChange={ onOpenChange }>
       <Image
         src={ src }
         alt="Token instance image"

ui/shared/nft/NftMedia.tsx

-import { AspectRatio, chakra, useDisclosure } from '@chakra-ui/react';
+import { AspectRatio, Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 import { useInView } from 'react-intersection-observer';
 
 import type { TokenInstance } from 'types/api/token';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 
 import NftFallback from './NftFallback';
 import NftHtml from './NftHtml';
@@ -48,7 +49,7 @@ const NftMedia = ({ data, className, isLoading, withFullscreen, autoplayVideo }:
     setIsLoadingError(true);
   }, []);
 
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { open, onOpen, onOpenChange } = useDisclosure();
 
   const content = (() => {
     if (isLoading) {
@@ -94,8 +95,8 @@ const NftMedia = ({ data, className, isLoading, withFullscreen, autoplayVideo }:
     }
 
     const props = {
-      isOpen,
-      onClose,
+      open,
+      onOpenChange,
     };
 
     switch (mediaInfo.mediaType) {
@@ -119,18 +120,20 @@ const NftMedia = ({ data, className, isLoading, withFullscreen, autoplayVideo }:
       ratio={ 1 / 1 }
       overflow="hidden"
       borderRadius="md"
-      objectFit="contain"
       isolation="isolate"
-      sx={{
-        '&>img, &>video': {
-          objectFit: 'contain',
-        },
-      }}
     >
       <>
-        { content }
+        <Box
+          css={{
+            '& > img, & > video': {
+              objectFit: 'contain',
+            },
+          }}
+        >
+          { content }
+        </Box>
         { modal }
-        { isMediaLoading && <Skeleton position="absolute" left={ 0 } top={ 0 } w="100%" h="100%" zIndex="1"/> }
+        { isMediaLoading && <Skeleton loading position="absolute" left={ 0 } top={ 0 } w="100%" h="100%" zIndex="1"/> }
       </>
     </AspectRatio>
   );

ui/shared/nft/NftMediaFullscreenModal.tsx

-import {
-  Modal,
-  ModalContent,
-  ModalCloseButton,
-  ModalOverlay,
-} from '@chakra-ui/react';
 import React from 'react';
 
+import { DialogContent, DialogRoot } from 'toolkit/chakra/dialog';
+
 interface Props {
-  isOpen: boolean;
-  onClose: () => void;
+  open: boolean;
+  onOpenChange: ({ open }: { open: boolean }) => void;
   children: React.ReactNode;
 }
 
-const NftMediaFullscreenModal = ({ isOpen, onClose, children }: Props) => {
+const NftMediaFullscreenModal = ({ open, onOpenChange, children }: Props) => {
   return (
-    <Modal isOpen={ isOpen } onClose={ onClose } motionPreset="none">
-      <ModalOverlay/>
-      <ModalContent w="unset" maxW="100vw" p={ 0 } background="none" boxShadow="none">
-        <ModalCloseButton position="fixed" top={{ base: 2.5, lg: 8 }} right={{ base: 2.5, lg: 8 }} color="whiteAlpha.800"/>
+    <DialogRoot open={ open } onOpenChange={ onOpenChange } motionPreset="none">
+      <DialogContent w="unset" maxW="100vw" p={ 0 } background="none" boxShadow="none">
         { children }
-      </ModalContent>
-    </Modal>
+      </DialogContent>
+    </DialogRoot>
   );
 };
 

ui/shared/nft/NftVideoFullscreen.tsx

@@ -6,13 +6,13 @@ import { videoPlayProps } from './utils';
 
 interface Props {
   src: string;
-  isOpen: boolean;
-  onClose: () => void;
+  open: boolean;
+  onOpenChange: ({ open }: { open: boolean }) => void;
 }
 
-const NftVideoFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftVideoFullscreen = ({ src, open, onOpenChange }: Props) => {
   return (
-    <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
+    <NftMediaFullscreenModal open={ open } onOpenChange={ onOpenChange }>
       <chakra.video
         { ...videoPlayProps }
         src={ src }

ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx

-import { Box } from '@chakra-ui/react';
-import React from 'react';
-
-import { test, expect } from 'playwright/lib';
-
-import RadioButtonGroupTest from './specs/RadioButtonGroupTest';
-
-test('radio button group', async({ render }) => {
-  const component = await render(
-    <Box w="400px" p="10px">
-      <RadioButtonGroupTest/>
-    </Box>,
-  );
-  await expect(component).toHaveScreenshot();
-});

ui/shared/radioButtonGroup/RadioButtonGroup.tsx

-import { chakra, Flex, useRadioGroup } from '@chakra-ui/react';
-import type { ChakraProps, UseRadioProps } from '@chakra-ui/react';
-import React from 'react';
-
-import { Button, ButtonGroup } from 'toolkit/chakra/button';
-import { Skeleton } from 'toolkit/chakra/skeleton';
-import type { IconName } from 'ui/shared/IconSvg';
-import IconSvg from 'ui/shared/IconSvg';
-
-// TODO @tom2drum remove this component
-type RadioItemProps = {
-  title: string;
-  icon?: IconName;
-  onlyIcon?: false;
-  contentAfter?: React.ReactNode;
-} | {
-  title: string;
-  icon: IconName;
-  onlyIcon: true;
-};
-
-type RadioButtonProps = UseRadioProps & RadioItemProps;
-
-const RadioButton = (props: RadioButtonProps) => {
-  // const { getInputProps, getRadioProps } = useRadio(props);
-
-  // const input = getInputProps();
-  // const checkbox = getRadioProps();
-
-  if (props.onlyIcon) {
-    return (
-      <Button
-        as="label"
-        aria-label={ props.title }
-        variant="radio_group"
-        selected={ props.isChecked }
-      >
-        { /* <input { ...input }/> */ }
-        <Flex
-          // { ...checkbox }
-        >
-          <IconSvg name={ props.icon } boxSize={ 5 }/>
-        </Flex>
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      as="label"
-      leftIcon={ props.icon ? <IconSvg name={ props.icon } boxSize={ 5 } mr={ -1 }/> : undefined }
-      variant="radio_group"
-      selected={ props.isChecked }
-    >
-      { /* <input { ...input }/> */ }
-      <Flex
-        alignItems="center"
-        // { ...checkbox }
-      >
-        { props.title }
-        { props.contentAfter }
-      </Flex>
-    </Button>
-  );
-};
-
-type RadioButtonGroupProps<T extends string> = {
-  onChange: ({ value }: { value: T }) => void;
-  name: string;
-  defaultValue: string;
-  options: Array<{ value: T } & RadioItemProps>;
-  autoWidth?: boolean;
-  className?: string;
-  isLoading?: boolean;
-};
-
-const RadioButtonGroup = <T extends string>({ onChange, name, defaultValue, options, autoWidth = false, className, isLoading }: RadioButtonGroupProps<T>) => {
-  const { getRootProps } = useRadioGroup({ name, defaultValue, onValueChange: onChange });
-
-  const root = getRootProps();
-
-  return (
-    <Skeleton loading={ isLoading }>
-      <ButtonGroup
-        { ...root }
-        className={ className }
-        isAttached
-        size="sm"
-        display="grid"
-        gridTemplateColumns={ `repeat(${ options.length }, ${ autoWidth ? 'auto' : '1fr' })` }
-      >
-        { options.map((option) => {
-          // const props = getRadioProps({ value: option.value });
-          return <RadioButton key={ option.value } { ...option }/>;
-        }) }
-      </ButtonGroup>
-    </Skeleton>
-  );
-};
-
-const WrappedRadioButtonGroup = chakra(RadioButtonGroup);
-type WrappedComponent = <T extends string>(props: RadioButtonGroupProps<T> & ChakraProps) => React.JSX.Element;
-
-export default React.memo(WrappedRadioButtonGroup) as WrappedComponent;

ui/shared/radioButtonGroup/specs/RadioButtonGroupTest.tsx

-import React from 'react';
-
-import RadioButtonGroup from '../RadioButtonGroup';
-
-type Test = 'v1' | 'v2' | 'v3';
-
-const RadioButtonGroupTest = () => {
-  return (
-    <RadioButtonGroup<Test>
-      // eslint-disable-next-line react/jsx-no-bind
-      onChange={ () => {} }
-      defaultValue="v1"
-      name="test"
-      options={ [
-        { value: 'v1', title: 'test option 1', icon: 'clock', onlyIcon: false },
-        { value: 'v2', title: 'test 2', onlyIcon: false },
-        { value: 'v2', title: 'test 2', icon: 'clock', onlyIcon: true },
-      ] }
-    />
-  );
-};
-
-export default RadioButtonGroupTest;