fix: fix markets filter ordering and typo and overflow (#1051)

dydxprotocol · Sep 20, 2024 · 5eb2084 · 5eb2084
1 parent add11be
commit 5eb2084
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 33 deletions.
diff --git a/public/configs/markets.json b/public/configs/markets.json
@@ -72,7 +72,6 @@
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/ac-milan-fan-token/",
         "name": "AC Milan Fan Token",
         "tags": [
-            "Entertainment",
             "Entertainment"
         ],
         "websiteLink": "https://www.socios.com/",
@@ -456,7 +455,6 @@
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/argentinefootballassociationfantoken/",
         "name": "Argentine Football Association Fan Token",
         "tags": [
-            "Entertainment",
             "Entertainment"
         ],
         "websiteLink": "https://socios.com",
@@ -561,7 +559,6 @@
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/atletico-de-madrid-fan-token/",
         "name": "Atletico De Madrid Fan Token",
         "tags": [
-            "Entertainment",
             "Entertainment"
         ],
         "websiteLink": "https://www.socios.com/atletico-de-madrid/",
@@ -712,7 +709,6 @@
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/fc-barcelona-fan-token/",
         "name": "FC Barcelona Fan Token",
         "tags": [
-            "Entertainment",
             "Entertainment"
         ],
         "websiteLink": "https://chiliz.com",
@@ -1289,7 +1285,6 @@
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/manchester-city-fan-token/",
         "name": "Manchester City Fan Token",
         "tags": [
-            "Entertainment",
             "Entertainment"
         ],
         "websiteLink": "https://www.socios.com",
@@ -2695,7 +2690,6 @@
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/topgoal/",
         "name": "TopGoal",
         "tags": [
-            "Entertainment",
             "NFT",
             "Entertainment"
         ],
@@ -3287,7 +3281,6 @@
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/juventus-fan-token/",
         "name": "Juventus Fan Token",
         "tags": [
-            "Entertainment",
             "Entertainment"
         ],
         "websiteLink": "https://www.socios.com/juventus/",
@@ -4645,7 +4638,6 @@
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/og-fan-token/",
         "name": "OG Fan Token",
         "tags": [
-            "Entertainment",
             "Entertainment"
         ],
         "websiteLink": "https://www.socios.com/og/",
@@ -5218,7 +5210,6 @@
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/paris-saint-germain-fan-token/",
         "name": "Paris Saint-Germain Fan Token",
         "tags": [
-            "Entertainment",
             "Entertainment"
         ],
         "websiteLink": "https://www.socios.com/paris-saint-germain/",

diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
@@ -10,16 +10,17 @@ import { Input, InputType, type InputProps } from '@/components/Input';
 
 type ElementProps = {
   onTextChange?: (value: string) => void;
+  className?: string;
 };
 
 export type SearchInputProps = ElementProps & InputProps;
 
-export const SearchInput = ({ placeholder, onTextChange }: SearchInputProps) => {
+export const SearchInput = ({ placeholder, onTextChange, className }: SearchInputProps) => {
   const [value, setValue] = useState('');
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   return (
-    <$Search>
+    <$Search className={className}>
       <$Icon iconName={IconName.Search} />
       <Input
         autoFocus

diff --git a/src/constants/markets.ts b/src/constants/markets.ts
@@ -51,6 +51,7 @@ export enum MarketFilters {
   ENT = 'Entertainment',
 }
 
+// ORDER IS INTENTIONAL
 export const MARKET_FILTER_OPTIONS: Record<
   MarketFilters,
   {
@@ -64,41 +65,41 @@ export const MARKET_FILTER_OPTIONS: Record<
   [MarketFilters.NEW]: {
     label: STRING_KEYS.RECENTLY_LISTED,
   },
-  [MarketFilters.PREDICTION_MARKET]: {
-    label: STRING_KEYS.PREDICTION_MARKET,
-    isNew: true,
+  [MarketFilters.MEME]: {
+    label: STRING_KEYS.MEME,
   },
-  [MarketFilters.FX]: {
-    label: STRING_KEYS.FOREX,
-    isNew: true,
+  [MarketFilters.AI]: {
+    label: STRING_KEYS.AI,
+  },
+  [MarketFilters.DEFI]: {
+    label: STRING_KEYS.DEFI,
   },
   [MarketFilters.LAYER_1]: {
     label: STRING_KEYS.LAYER_1,
   },
   [MarketFilters.LAYER_2]: {
     label: STRING_KEYS.LAYER_2,
   },
-  [MarketFilters.DEFI]: {
-    label: STRING_KEYS.DEFI,
-  },
-  [MarketFilters.AI]: {
-    label: STRING_KEYS.AI,
-  },
-  [MarketFilters.NFT]: {
-    label: STRING_KEYS.NFT,
+  [MarketFilters.RWA]: {
+    label: STRING_KEYS.REAL_WORLD_ASSET_SHORT,
   },
   [MarketFilters.GAMING]: {
     label: STRING_KEYS.GAMING,
   },
-  [MarketFilters.MEME]: {
-    label: STRING_KEYS.MEME,
+  [MarketFilters.FX]: {
+    label: STRING_KEYS.FOREX,
+    isNew: true,
   },
-  [MarketFilters.RWA]: {
-    label: STRING_KEYS.REAL_WORLD_ASSET_SHORT,
+  [MarketFilters.NFT]: {
+    label: STRING_KEYS.NFT,
   },
   [MarketFilters.ENT]: {
     label: STRING_KEYS.ENTERTAINMENT,
   },
+  [MarketFilters.PREDICTION_MARKET]: {
+    label: STRING_KEYS.PREDICTION_MARKET,
+    isNew: true,
+  },
 };
 
 export const DEFAULT_MARKETID = 'ETH-USD';

diff --git a/src/hooks/useMarketsData.ts b/src/hooks/useMarketsData.ts
@@ -27,7 +27,7 @@ const filterFunctions = {
     return market.tags?.includes('Defi');
   },
   [MarketFilters.ENT]: (market: MarketData) => {
-    return market.tags?.includes('ENT');
+    return market.tags?.includes('Entertainment');
   },
   [MarketFilters.FX]: (market: MarketData) => {
     return market.tags?.includes('FX');

diff --git a/src/views/MarketFilter.tsx b/src/views/MarketFilter.tsx
@@ -37,15 +37,16 @@ export const MarketFilter = ({
   const stringGetter = useStringGetter();
   const navigate = useNavigate();
   const { hasPotentialMarketsData } = usePotentialMarkets();
+  const showProposeButton = hasPotentialMarketsData && !hideNewMarketButton;
 
   return (
     <$MarketFilter $compactLayout={compactLayout}>
-      <SearchInput
+      <$SearchInput
         placeholder={stringGetter({ key: searchPlaceholderKey })}
         onTextChange={onSearchTextChange}
       />
 
-      <div tw="row">
+      <div tw="row overflow-x-scroll">
         <$ToggleGroupContainer $compactLayout={compactLayout}>
           <$ToggleGroup
             items={Object.values(filters).map((value) => ({
@@ -60,7 +61,7 @@ export const MarketFilter = ({
           />
         </$ToggleGroupContainer>
 
-        {hasPotentialMarketsData && !hideNewMarketButton && (
+        {showProposeButton && (
           <Button
             onClick={() => navigate(`${AppRoute.Markets}/${MarketsRoute.New}`)}
             size={ButtonSize.Small}
@@ -124,3 +125,7 @@ const $ToggleGroup = styled(ToggleGroup)`
   overflow-x: auto;
   padding-right: var(--toggle-group-paddingRight);
 ` as typeof ToggleGroup;
+
+const $SearchInput = styled(SearchInput)`
+  min-width: 12rem;
+`;