feat(forex): add forex filter (#1028)

package.json

@@ -56,7 +56,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.11.5",
     "@dydxprotocol/v4-client-js": "^1.1.27",
-    "@dydxprotocol/v4-localization": "^1.1.198",
+    "@dydxprotocol/v4-localization": "^1.1.199",
     "@emotion/is-prop-valid": "^1.3.0",
     "@ethersproject/providers": "^5.7.2",
     "@hugocxl/react-to-image": "^0.0.9",

public/configs/markets.json

@@ -1009,6 +1009,7 @@
         "coinMarketCapsLink": "https://www.google.com/finance/quote/BRL-USD?hl=en",
         "name": "Brazilian Real",
         "tags": [
+            "FX"
         ]
     },
     "BRISE-USD": {
@@ -1591,7 +1592,8 @@
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/multi-collateral-dai/",
         "name": "Dai",
         "tags": [
-            "Defi"
+            "Defi",
+            "FX"
         ],
         "websiteLink": "https://makerdao.com/",
         "whitepaperLink": null
@@ -2165,12 +2167,16 @@
     "EUR-USD": {
         "coinMarketCapsLink": "https://www.google.com/finance/quote/EUR-USD?hl=en",
         "name": "Euro",
-        "tags": []
+        "tags": [
+            "FX"
+        ]
     },
     "EURC-USD": {
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/euro-coin/",
         "name": "EURC",
-        "tags": [],
+        "tags": [
+            "FX"
+        ],
         "websiteLink": "https://www.circle.com",
         "whitepaperLink": null
     },
@@ -6608,6 +6614,7 @@
         "coinMarketCapsLink": "https://www.google.com/finance/quote/TRY-USD?hl=en",
         "name": "Turkish lira",
         "tags": [
+            "FX"
         ]
     },
     "TT-USD": {
@@ -8176,4 +8183,4 @@
         "websiteLink": "https://bubcat.onl/",
         "coinMarketCapsLink": "https://coinmarketcap.com/currencies/goodjobbub/"
     }
-}
+}

src/constants/markets.ts

@@ -39,6 +39,7 @@ export enum MarketFilters {
   ALL = 'all',
   NEW = 'new',
   PREDICTION_MARKET = 'Prediction Market',
+  FX = 'FX',
   LAYER_1 = 'Layer 1',
   LAYER_2 = 'Layer 2',
   DEFI = 'Defi',
@@ -67,6 +68,10 @@ export const MARKET_FILTER_OPTIONS: Record<
     label: STRING_KEYS.PREDICTION_MARKET,
     isNew: true,
   },
+  [MarketFilters.FX]: {
+    label: STRING_KEYS.FOREX,
+    isNew: true,
+  },
   [MarketFilters.LAYER_1]: {
     label: STRING_KEYS.LAYER_1,
   },

src/hooks/useMarketsData.ts

@@ -29,6 +29,9 @@ const filterFunctions = {
   [MarketFilters.ENT]: (market: MarketData) => {
     return market.tags?.includes('ENT');
   },
+  [MarketFilters.FX]: (market: MarketData) => {
+    return market.tags?.includes('FX');
+  },
   [MarketFilters.GAMING]: (market: MarketData) => {
     return market.tags?.includes('Gaming');
   },

src/views/MarketsDropdown.tsx

@@ -148,9 +148,9 @@ const MarketsDropdownContent = ({
     defaultValue: false,
   });
 
-  const currentDate = new Date();
-
   const slotTop = useMemo(() => {
+    const currentDate = new Date();
+
     if (
       !hasSeenElectionBannerTrumpWin &&
       featureFlags?.[StatsigFlags.ffShowPredictionMarketsUi] &&
@@ -177,7 +177,6 @@ const MarketsDropdownContent = ({
 
     return null;
   }, [
-    currentDate,
     setHasSeenElectionBannerTrupmWin,
     hasSeenElectionBannerTrumpWin,
     stringGetter,
@@ -297,7 +296,9 @@ export const MarketsDropdown = memo(
                   <AssetIcon symbol={symbol} />
                   {isViewingUnlaunchedMarket ? (
                     <div tw="flex flex-col text-start">
-                      <span tw="font-mini-book">Not Launched</span>
+                      <span tw="font-mini-book">
+                        {stringGetter({ key: STRING_KEYS.NOT_LAUNCHED })}
+                      </span>
                       <h2 tw="mt-[-0.25rem] text-color-text-2 font-medium-medium">
                         {currentMarketId}
                       </h2>