Use test flags instead

* add more markets 11/30

* add more markets 12/01

* add more markets 12/04

src/App.tsx

@@ -22,7 +22,6 @@ import { NotificationsProvider } from '@/hooks/useNotifications';
 import { LocalNotificationsProvider } from '@/hooks/useLocalNotifications';
 import { RestrictionProvider } from '@/hooks/useRestrictions';
 import { SubaccountProvider } from '@/hooks/useSubaccount';
-import { TestFlagsProvider } from '@/hooks/useTestFlags';
 
 import { GuardedMobileRoute } from '@/components/GuardedMobileRoute';
 
@@ -123,7 +122,6 @@ const providers = [
   wrapProvider(QueryClientProvider, { client: queryClient }),
   wrapProvider(GrazProvider),
   wrapProvider(WagmiConfig, { config }),
-  wrapProvider(TestFlagsProvider),
   wrapProvider(LocaleProvider),
   wrapProvider(RestrictionProvider),
   wrapProvider(DydxProvider),

src/components/Input.tsx

@@ -129,6 +129,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             placeholder={placeholder}
             value={value}
             // Other
+            data-1p-ignore // prevent 1Password fill
             {...otherProps}
           />
         ) : (
@@ -168,6 +169,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             value={formattedValue}
             autoComplete="off"
             autoCorrect="off"
+            data-1p-ignore // prevent 1Password fill
             {...otherProps}
           />
         )}

src/constants/markets.ts

@@ -46,4 +46,9 @@ export const MARKETS_TO_DISPLAY = [
   'SHIB-USD',
   'COMP-USD',
   'LDO-USD',
+  'NEAR-USD',
+  'APT-USD',
+  'SUI-USD',
+  'DOT-USD',
+  'ETC-USD',
 ];

src/hooks/useMarketsData.ts

@@ -8,7 +8,7 @@ import {
   MARKETS_TO_DISPLAY,
 } from '@/constants/markets';
 
-import { testFlags } from '@/hooks/useTestFlags';
+import { testFlags } from '@/lib/testFlags';
 
 import { getAssets } from '@/state/assetsSelectors';
 import { getPerpetualMarkets } from '@/state/perpetualsSelectors';

src/hooks/useTestFlags.tsx

@@ -1,53 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import queryString from 'query-string';
-
-class TestFlags {
-  public queryParams: queryString.ParsedQuery<string>;
-
-  constructor() {
-    this.queryParams = {};
-  }
-
-  setQueryParams(flags: queryString.ParsedQuery<string>) {
-    this.queryParams = flags;
-  }
-
-  get displayInitializingMarkets() {
-    return !!this.queryParams.displayInitializingMarkets;
-  }
-
-  /**
-   * @description We are temporarily displaying a subset of ACTIVE markets, this flag will allow you to see all ACTIVE markets
-   */
-  get displayAllMarkets() {
-    return !!this.queryParams.displayAllMarkets;
-  }
-}
-
-export const testFlags = new TestFlags();
-
-const useTestFlagsContext = () => {
-  const [queryParams, setQueryParams] = useState<queryString.ParsedQuery<string>>({});
-  const location = useLocation();
-
-  useEffect(() => {
-    const parsedQueryParams = queryString.parse(location.search.substring(-1));
-    testFlags.setQueryParams(parsedQueryParams);
-    setQueryParams(parsedQueryParams);
-  }, []);
-
-  return {
-    ...queryParams,
-  };
-};
-
-type TestFlagsContextType = ReturnType<typeof useTestFlagsContext>;
-const TestFlagsContext = createContext<TestFlagsContextType>({} as TestFlagsContextType);
-TestFlagsContext.displayName = 'TestFlags';
-
-export const TestFlagsProvider = ({ ...props }) => (
-  <TestFlagsContext.Provider value={useTestFlagsContext()} {...props} />
-);
-
-export const useTestFlags = () => useContext(TestFlagsContext);

src/lib/abacus/dydxChainTransactions.ts

@@ -64,7 +64,9 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
 
   setNobleWallet(nobleWallet: LocalWallet) {
     this.nobleWallet = nobleWallet;
-    this.nobleClient?.connect(nobleWallet);
+    if (this.nobleClient) {
+      this.nobleClient.connect(nobleWallet);
+    }
   }
 
   async connectNetwork(
@@ -109,8 +111,11 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
       );
 
       this.compositeClient = compositeClient;
-      this.nobleClient = new NobleClient(nobleValidatorUrl);
-      if (this.nobleWallet) await this.nobleClient.connect(this.nobleWallet);
+
+      if (nobleValidatorUrl) {
+        this.nobleClient = new NobleClient(nobleValidatorUrl);
+        if (this.nobleWallet) await this.nobleClient.connect(this.nobleWallet);
+      }
       // Dispatch custom event to notify other parts of the app that the network has been connected
       const customEvent = new CustomEvent('abacus:connectNetwork', {
         detail: parsedParams,

src/lib/abacus/index.ts

@@ -33,6 +33,8 @@ import type { RootStore } from '@/state/_store';
 import { setTradeFormInputs } from '@/state/inputs';
 import { getInputTradeOptions, getTransferInputs } from '@/state/inputsSelectors';
 
+import { testFlags } from '@/lib/testFlags';
+
 import AbacusRest from './rest';
 import AbacusAnalytics from './analytics';
 import AbacusWebsocket from './websocket';
@@ -82,7 +84,8 @@ class AbacusStateManager {
     );
 
     const appConfigs = AbacusAppConfig.Companion.forWeb;
-    if (!isMainnet) appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2DepositOnly;
+    if (!isMainnet || testFlags.withCCTP)
+      appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2DepositOnly;
 
     this.stateManager = new AsyncAbacusStateManager(
       '',
@@ -187,7 +190,7 @@ class AbacusStateManager {
     if (nobleWallet) {
       this.chainTransactions.setNobleWallet(nobleWallet);
     }
-  }
+  };
 
   setTransfersSourceAddress = (evmAddress: string) => {
     this.stateManager.sourceAddress = evmAddress;
@@ -232,18 +235,6 @@ class AbacusStateManager {
     this.abacusFormatter.setLocaleSeparators({ group, decimal });
   };
 
-  setTransferStatus = ({
-    hash,
-    fromChainId,
-    toChainId,
-  }: {
-    hash: string;
-    fromChainId?: string;
-    toChainId?: string;
-  }) => {
-    this.stateManager.transferStatus(hash, fromChainId, toChainId);
-  };
-
   // ------ Transactions ------ //
 
   placeOrder = (

src/lib/abacus/websocket.ts

@@ -10,7 +10,7 @@ import {
 } from '@/constants/websocket';
 
 import { lastSuccessfulWebsocketRequestByOrigin } from '@/hooks/useAnalytics';
-import { testFlags } from '@/hooks/useTestFlags';
+import { testFlags } from '@/lib/testFlags';
 
 import { subscriptionsByChannelId } from '@/lib/tradingView/dydxfeed/cache';
 import { mapCandle } from '@/lib/tradingView/utils';

src/lib/testFlags.ts

@@ -0,0 +1,31 @@
+class TestFlags {
+  public queryParams: { [key: string]: string };
+
+  constructor() {
+    this.queryParams = {};
+    const hash = window.location.hash;
+    const queryIndex = hash.indexOf('?');
+    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;
+    }
+  }
+
+  get displayInitializingMarkets() {
+    return !!this.queryParams.displayInitializingMarkets;
+  }
+
+  get displayAllMarkets() {
+    return !!this.queryParams.displayAllMarkets;
+  }
+
+  get withCCTP() {
+    return !!this.queryParams.withCCTP;
+  }
+}
+
+export const testFlags = new TestFlags();

src/views/ExchangeBillboards.tsx

@@ -4,7 +4,7 @@ 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 '@/hooks/useTestFlags';
+import { testFlags } from '@/lib/testFlags';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';