Handle New Markets added by Gov (#201)

* Add celestia assets

* Handle symbol not yet added

src/components/AssetIcon.tsx

@@ -45,6 +45,7 @@ const assetIcons = {
   SOL: '/currencies/sol.png',
   SUI: '/currencies/sui.png',
   SUSHI: '/currencies/sushi.png',
+  TIA: '/currencies/tia.png',
   TRX: '/currencies/trx.png',
   UMA: '/currencies/uma.png',
   UNI: '/currencies/uni.png',
@@ -71,8 +72,13 @@ export const AssetIcon = ({
 }: {
   symbol?: Nullable<string>;
   className?: string;
-}) =>
-  isAssetSymbol(symbol) ? <Styled.Img src={assetIcons[symbol]} className={className} /> : null;
+}) => (
+  <Styled.Img
+    src={isAssetSymbol(symbol) ? assetIcons[symbol] : '/currencies/unavailable.png'}
+    className={className}
+    alt={symbol}
+  />
+);
 
 const Styled: Record<string, AnyStyledComponent> = {};
 

src/constants/markets.ts

@@ -26,39 +26,3 @@ export enum FundingDirection {
   ToShort = 'ToShort',
   ToLong = 'ToLong',
 }
-
-export const MARKETS_TO_DISPLAY = [
-  'BTC-USD',
-  'ETH-USD',
-  'LINK-USD',
-  'SOL-USD',
-  'MATIC-USD',
-  'ATOM-USD',
-  'AVAX-USD',
-  'APE-USD',
-  'XRP-USD',
-  'UNI-USD',
-  'ADA-USD',
-  'TRX-USD',
-  'OP-USD',
-  'MKR-USD',
-  'DOGE-USD',
-  'SHIB-USD',
-  'COMP-USD',
-  'LDO-USD',
-  'NEAR-USD',
-  'APT-USD',
-  'SUI-USD',
-  'DOT-USD',
-  'ETC-USD',
-  'ARB-USD',
-  'CRV-USD',
-  'BLUR-USD',
-  'FIL-USD',
-  'XLM-USD',
-  'PEPE-USD',
-  'WLD-USD',
-  'SEI-USD',
-  'LTC-USD',
-  'BCH-USD',
-];

src/hooks/useMarketsData.ts

@@ -1,14 +1,7 @@
 import { useMemo } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
 
-import {
-  MarketFilters,
-  MARKET_FILTER_LABELS,
-  type MarketData,
-  MARKETS_TO_DISPLAY,
-} from '@/constants/markets';
-
-import { testFlags } from '@/lib/testFlags';
+import { MarketFilters, MARKET_FILTER_LABELS, type MarketData } from '@/constants/markets';
 
 import { getAssets } from '@/state/assetsSelectors';
 import { getPerpetualMarkets } from '@/state/perpetualsSelectors';
@@ -49,9 +42,7 @@ export const useMarketsData = (
   }, [allPerpetualMarkets, allAssets]);
 
   const filteredMarkets = useMemo(() => {
-    const filtered = markets
-      .filter(filterFunctions[filter])
-      .filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id)));
+    const filtered = markets.filter(filterFunctions[filter]);
 
     if (searchFilter) {
       return filtered.filter(

src/lib/testFlags.ts

@@ -5,13 +5,13 @@ class TestFlags {
     this.queryParams = {};
     const hash = window.location.hash;
     const queryIndex = hash.indexOf('?');
-    if (queryIndex === -1) return
+    if (queryIndex === -1) return;
 
     const queryParamsString = hash.substring(queryIndex + 1);
     const params = new URLSearchParams(queryParamsString);
 
     for (const [key, value] of params) {
-        this.queryParams[key] = value;
+      this.queryParams[key] = value;
     }
   }
 
@@ -19,10 +19,6 @@ class TestFlags {
     return !!this.queryParams.displayInitializingMarkets;
   }
 
-  get displayAllMarkets() {
-    return !!this.queryParams.displayAllMarkets;
-  }
-
   get withCCTP() {
     return !!this.queryParams.withCCTP;
   }

src/views/ExchangeBillboards.tsx

@@ -2,9 +2,7 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { MARKETS_TO_DISPLAY } from '@/constants/markets';
 import { useBreakpoints, useStringGetter } from '@/hooks';
-import { testFlags } from '@/lib/testFlags';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -34,7 +32,6 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({
 
   Object.values(perpetualMarkets)
     .filter(Boolean)
-    .filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id)))
     .forEach(({ oraclePrice, perpetual }) => {
       const { volume24H, trades24H, openInterest = 0 } = perpetual || {};
       volume24HUSDC += volume24H ?? 0;

src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx

@@ -94,7 +94,7 @@ export const FillDetailsDialog = ({ fillId, setIsOpen }: ElementProps) => {
 
   return (
     <DetailsDialog
-      slotIcon={<Styled.AssetIcon symbol={asset.id} />}
+      slotIcon={<Styled.AssetIcon symbol={asset?.id} />}
       title={resources.typeStringKey && stringGetter({ key: resources.typeStringKey })}
       items={detailItems}
       setIsOpen={setIsOpen}

src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx

@@ -194,7 +194,7 @@ export const OrderDetailsDialog = ({ orderId, setIsOpen }: ElementProps) => {
 
   return (
     <DetailsDialog
-      slotIcon={<Styled.AssetIcon symbol={asset.id} />}
+      slotIcon={<Styled.AssetIcon symbol={asset?.id} />}
       title={!resources.typeStringKey ? '' : stringGetter({ key: resources.typeStringKey })}
       slotFooter={
         isAccountViewOnly ? null : isOrderStatusClearable(status) ? (