radio group button

lib/cookies.ts

@@ -12,6 +12,7 @@ export enum NAMES {
   INDEXING_ALERT='indexing_alert',
   ADBLOCK_DETECTED='adblock_detected',
   MIXPANEL_DEBUG='_mixpanel_debug',
+  ADDRESS_NFT_DISPLAY_TYPE='address_nft_display_type'
 }
 
 export function get(name?: NAMES | undefined | null, serverCookie?: string) {

types/api/address.ts

@@ -84,11 +84,8 @@ export interface AddressNFTsResponse {
 export interface AddressCollectionsResponse {
   items: Array<AddressCollection>;
   next_page_params: {
-    items_count: number;
-    token_name: string | null;
+    token_contract_address_hash: string;
     token_type: TokenType;
-    value: number;
-    fiat_value: string | null;
   } | null;
 }
 

ui/address/AddressTokens.tsx

-import { Box, Radio, RadioGroup } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -9,6 +9,8 @@ import type { TokenType } from 'types/api/token';
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/contexts/app';
+import * as cookies from 'lib/cookies';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
@@ -17,6 +19,7 @@ import { ADDRESS_TOKEN_BALANCE_ERC_20, ADDRESS_NFT_1155, ADDRESS_COLLECTION } fr
 import { generateListStub } from 'stubs/utils';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import RadioButtonGroup from 'ui/shared/RadioButtonGroup';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 
 import AddressCollections from './tokens/AddressCollections';
@@ -24,7 +27,7 @@ import AddressNFTs from './tokens/AddressNFTs';
 import ERC20Tokens from './tokens/ERC20Tokens';
 import TokenBalances from './tokens/TokenBalances';
 
-type TNftDisplayType = 'collection' | 'list';
+type TNftDisplayType = 'collections' | 'list';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
@@ -50,7 +53,8 @@ const AddressTokens = () => {
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
-  const [ nftDisplayType, setNftDisplayType ] = React.useState<TNftDisplayType>('collection');
+  const displayTypeCookie = cookies.get(cookies.NAMES.ADDRESS_NFT_DISPLAY_TYPE, useAppContext().cookies);
+  const [ nftDisplayType, setNftDisplayType ] = React.useState<TNftDisplayType>(displayTypeCookie === 'list' ? 'list' : 'collections');
 
   const tab = getQueryParamString(router.query.tab);
   const hash = getQueryParamString(router.query.hash);
@@ -72,7 +76,7 @@ const AddressTokens = () => {
     pathParams: { hash },
     scrollRef,
     options: {
-      enabled: tab === 'tokens_nfts' && nftDisplayType === 'collection',
+      enabled: tab === 'tokens_nfts' && nftDisplayType === 'collections',
       refetchOnMount: false,
       placeholderData: generateListStub<'address_collections'>(ADDRESS_COLLECTION, 10, { next_page_params: null }),
     },
@@ -153,6 +157,7 @@ const AddressTokens = () => {
   });
 
   const handleNFTsDisplayTypeChange = React.useCallback((val: TNftDisplayType) => {
+    cookies.set(cookies.NAMES.ADDRESS_NFT_DISPLAY_TYPE, val);
     setNftDisplayType(val);
   }, []);
 
@@ -168,10 +173,12 @@ const AddressTokens = () => {
   ];
 
   const nftDisplayTypeRadio = (
-    <RadioGroup onChange={ handleNFTsDisplayTypeChange } value={ nftDisplayType }>
-      <Radio value="collection">Collection</Radio>
-      <Radio value="list">List</Radio>
-    </RadioGroup>
+    <RadioButtonGroup<TNftDisplayType>
+      onChange={ handleNFTsDisplayTypeChange }
+      defaultValue={ nftDisplayType }
+      name="type"
+      options={ [ { title: 'By collections', value: 'collections' }, { title: 'List', value: 'list' } ] }
+    />
   );
 
   let pagination: PaginationParams | undefined;
@@ -201,6 +208,7 @@ const AddressTokens = () => {
         size="sm"
         tabListProps={ 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/shared/RadioButtonGroup.tsx

+import { ButtonGroup, Button, Box, useRadio, useRadioGroup, useColorModeValue } from '@chakra-ui/react';
+import type { UseRadioProps } from '@chakra-ui/react';
+import React from 'react';
+
+type RadioButtonProps = UseRadioProps & {
+  children: React.ReactNode;
+}
+
+const RadioButton = (props: RadioButtonProps) => {
+  const { getInputProps, getRadioProps } = useRadio(props);
+  const buttonColor = useColorModeValue('blue.50', 'gray.800');
+
+  const input = getInputProps();
+  const checkbox = getRadioProps();
+
+  return (
+    <Button
+      as="label"
+      variant="outline"
+      fontWeight={ 500 }
+      cursor={ props.isChecked ? 'initial' : 'pointer' }
+      borderColor={ buttonColor }
+      _hover={{
+        borderColor: buttonColor,
+        ...(props.isChecked ? {} : { color: 'link_hovered' }),
+
+      }}
+      _active={{
+        backgroundColor: 'none',
+      }}
+      backgroundColor={ props.isChecked ? buttonColor : 'none' }
+      { ...(props.isChecked ? { color: 'text' } : {}) }
+    >
+      <input { ...input }/>
+      <Box
+        { ...checkbox }
+      >
+        { props.children }
+      </Box>
+    </Button>
+  );
+};
+
+type RadioButtonGroupProps<T extends string> = {
+  onChange: (value: T) => void;
+  name: string;
+  defaultValue: string;
+  options: Array<{title: string; value: T}>;
+}
+
+const RadioButtonGroup = <T extends string>({ onChange, name, defaultValue, options }: RadioButtonGroupProps<T>) => {
+  const { getRootProps, getRadioProps } = useRadioGroup({ name, defaultValue, onChange });
+
+  const group = getRootProps();
+
+  return (
+    <ButtonGroup { ...group } isAttached size="sm">
+      { options.map((option) => {
+        const props = getRadioProps({ value: option.value });
+        return <RadioButton { ...props } key={ option.value }>{ option.title }</RadioButton>;
+      }) }
+    </ButtonGroup>
+  );
+};
+
+export default RadioButtonGroup;