replace old sort component

ui/marketplace/useMarketplaceApps.tsx

@@ -11,6 +11,7 @@ import useFetch from 'lib/hooks/useFetch';
 import { MARKETPLACE_APP } from 'stubs/marketplace';
 
 import useSecurityReports from './useSecurityReports';
+import type { SortValue } from './utils';
 
 const feature = config.features.marketplace;
 
@@ -88,7 +89,7 @@ export default function useMarketplaceApps(
     enabled: feature.isEnabled && Boolean(snapshotFavoriteApps),
   });
 
-  const [ sorting, setSorting ] = React.useState<'default' | 'security_score'>('default');
+  const [ sorting, setSorting ] = React.useState<SortValue>();
 
   const appsWithSecurityReports = React.useMemo(() =>
     data?.map((app) => ({ ...app, securityReport: securityReports?.[app.id] })),

ui/marketplace/utils.ts

@@ -2,6 +2,14 @@ import type { NextRouter } from 'next/router';
 
 import getQueryParamString from 'lib/router/getQueryParamString';
 import removeQueryParam from 'lib/router/removeQueryParam';
+import type { TOption } from 'ui/shared/sort/Option';
+
+export type SortValue = 'security_score';
+
+export const SORT_OPTIONS: Array<TOption<SortValue>> = [
+  { title: 'Default', id: undefined },
+  { title: 'Security score', id: 'security_score' },
+];
 
 export function getAppUrl(url: string | undefined, router: NextRouter) {
   if (!url) {

ui/nameDomains/NameDomainsActionBar.tsx

@@ -135,9 +135,10 @@ const NameDomainsActionBar = ({
 
   const sortButton = (
     <Sort
+      name="name_domains_sorting"
+      defaultValue={ sort }
       options={ SORT_OPTIONS }
-      sort={ sort }
-      setSort={ onSortChange }
+      onChange={ onSortChange }
       isLoading={ isInitialLoading }
     />
   );

ui/nameDomains/utils.ts

@@ -1,12 +1,12 @@
 import type { EnsLookupSorting } from 'types/api/ens';
 
 import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
-import type { Option } from 'ui/shared/sort/Sort';
+import type { TOption } from 'ui/shared/sort/Option';
 
 export type SortField = EnsLookupSorting['sort'];
 export type Sort = `${ EnsLookupSorting['sort'] }-${ EnsLookupSorting['order'] }`;
 
-export const SORT_OPTIONS: Array<Option<Sort>> = [
+export const SORT_OPTIONS: Array<TOption<Sort>> = [
   { title: 'Default', id: undefined },
   { title: 'Registered on descending', id: 'registration_date-DESC' },
   { title: 'Registered on ascending', id: 'registration_date-ASC' },

ui/pages/Marketplace.tsx

@@ -13,12 +13,13 @@ import ContractListModal from 'ui/marketplace/ContractListModal';
 import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
 import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
 import MarketplaceList from 'ui/marketplace/MarketplaceList';
-import SortMenu from 'ui/marketplace/SortMenu/Menu';
+import { SORT_OPTIONS } from 'ui/marketplace/utils';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import IconSvg from 'ui/shared/IconSvg';
 import type { IconName } from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import Sort from 'ui/shared/sort/Sort';
 import TabsWithScroll from 'ui/shared/Tabs/TabsWithScroll';
 
 import useMarketplace from '../marketplace/useMarketplace';
@@ -186,13 +187,9 @@ const Marketplace = () => {
 
       <Flex mb={{ base: 4, lg: 6 }} gap={{ base: 2, lg: 3 }}>
         { feature.securityReportsUrl && (
-          <SortMenu
+          <Sort
             name="dapps_sorting"
-            defaultValue="default"
-            options={ [
-              { value: 'default', label: 'Default' },
-              { value: 'security_score', label: 'Security score' },
-            ] }
+            options={ SORT_OPTIONS }
             onChange={ setSorting }
             isLoading={ isPlaceholderData }
           />

ui/pages/Validators.tsx

@@ -97,9 +97,10 @@ const Validators = () => {
 
   const sortButton = (
     <Sort
+      name="validators_sorting"
+      defaultValue={ sort }
       options={ SORT_OPTIONS }
-      sort={ sort }
-      setSort={ handleSortChange }
+      onChange={ handleSortChange }
     />
   );
 

ui/pages/VerifiedContracts.tsx

@@ -97,9 +97,11 @@ const VerifiedContracts = () => {
 
   const sortButton = (
     <Sort
+      name="verified_contracts_sorting"
+      defaultValue={ sort }
       options={ SORT_OPTIONS }
-      sort={ sort }
-      setSort={ handleSortChange }
+      onChange={ handleSortChange }
+      isLoading={ isPlaceholderData }
     />
   );
 

ui/shared/sort/ButtonDesktop.tsx

@@ -0,0 +1,57 @@
+import {
+  Box,
+  useColorModeValue,
+  Button,
+  Skeleton,
+  chakra,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+type ButtonProps = {
+  isMenuOpen: boolean;
+  onClick: () => void;
+  isLoading?: boolean;
+  children: React.ReactNode;
+  className?: string;
+};
+
+const ButtonDesktop = ({ children, isMenuOpen, onClick, isLoading, className }: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
+  const primaryColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
+  const secondaryColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
+
+  return (
+    <Skeleton isLoaded={ !isLoading }>
+      <Button
+        className={ className }
+        ref={ ref }
+        size="sm"
+        variant="outline"
+        onClick={ onClick }
+        color={ primaryColor }
+        fontWeight="600"
+        borderColor="transparent"
+        px={ 2 }
+        data-selected={ isMenuOpen }
+      >
+        <Box
+          as={ isMenuOpen ? 'div' : 'span' }
+          color={ isMenuOpen ? 'inherit' : secondaryColor }
+          fontWeight="400"
+          mr={ 1 }
+          transition={ isMenuOpen ? 'none' : 'inherit' }
+        >Sort by</Box>
+        { children }
+        <IconSvg
+          name="arrows/east-mini"
+          boxSize={ 5 }
+          ml={ 1 }
+          transform={ isMenuOpen ? 'rotate(90deg)' : 'rotate(-90deg)' }
+        />
+      </Button>
+    </Skeleton>
+  );
+};
+
+export default chakra(React.forwardRef(ButtonDesktop));

ui/shared/sort/SortButton.tsx → ui/shared/sort/ButtonMobile.tsx

@@ -10,7 +10,7 @@ type Props = {
   isLoading?: boolean;
 }
 
-const SortButton = ({ onClick, isActive, className, isLoading }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const ButtonMobile = ({ onClick, isActive, className, isLoading }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   if (isLoading) {
     return <Skeleton className={ className } w="36px" h="32px" borderRadius="base"/>;
   }
@@ -32,4 +32,4 @@ const SortButton = ({ onClick, isActive, className, isLoading }: Props, ref: Rea
   );
 };
 
-export default chakra(React.forwardRef(SortButton));
+export default chakra(React.forwardRef(ButtonMobile));

ui/marketplace/SortMenu/Option.tsx → ui/shared/sort/Option.tsx

@@ -8,9 +8,9 @@ import React from 'react';
 
 import IconSvg from 'ui/shared/IconSvg';
 
-export interface TOption {
-  value: string;
-  label: string;
+export interface TOption<Sort extends string> {
+  id: Sort | undefined;
+  title: string;
 }
 
 type OptionProps = ReturnType<ReturnType<typeof useRadioGroup>['getRadioProps']>;