fix loading button

src/App.tsx

@@ -22,6 +22,7 @@ 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';
 
@@ -122,6 +123,7 @@ const providers = [
   wrapProvider(QueryClientProvider, { client: queryClient }),
   wrapProvider(GrazProvider),
   wrapProvider(WagmiConfig, { config }),
+  wrapProvider(TestFlagsProvider),
   wrapProvider(LocaleProvider),
   wrapProvider(RestrictionProvider),
   wrapProvider(DydxProvider),

src/components/Input.tsx

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

src/constants/markets.ts

@@ -46,9 +46,4 @@ 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 '@/lib/testFlags';
+import { testFlags } from '@/hooks/useTestFlags';
 
 import { getAssets } from '@/state/assetsSelectors';
 import { getPerpetualMarkets } from '@/state/perpetualsSelectors';

src/hooks/useTestFlags.tsx

@@ -0,0 +1,53 @@
+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,9 +64,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
 
   setNobleWallet(nobleWallet: LocalWallet) {
     this.nobleWallet = nobleWallet;
-    if (this.nobleClient) {
-      this.nobleClient.connect(nobleWallet);
-    }
+    this.nobleClient?.connect(nobleWallet);
   }
 
   async connectNetwork(
@@ -111,11 +109,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
       );
 
       this.compositeClient = compositeClient;
-
-      if (nobleValidatorUrl) {
-        this.nobleClient = new NobleClient(nobleValidatorUrl);
-        if (this.nobleWallet) await this.nobleClient.connect(this.nobleWallet);
-      }
+      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,8 +33,6 @@ 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';
@@ -84,8 +82,7 @@ class AbacusStateManager {
     );
 
     const appConfigs = AbacusAppConfig.Companion.forWeb;
-    if (!isMainnet || testFlags.withCCTP)
-      appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2DepositOnly;
+    if (!isMainnet) appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2DepositOnly;
 
     this.stateManager = new AsyncAbacusStateManager(
       '',
@@ -190,7 +187,7 @@ class AbacusStateManager {
     if (nobleWallet) {
       this.chainTransactions.setNobleWallet(nobleWallet);
     }
-  };
+  }
 
   setTransfersSourceAddress = (evmAddress: string) => {
     this.stateManager.sourceAddress = evmAddress;
@@ -235,6 +232,18 @@ 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 '@/lib/testFlags';
+import { testFlags } from '@/hooks/useTestFlags';
 
 import { subscriptionsByChannelId } from '@/lib/tradingView/dydxfeed/cache';
 import { mapCandle } from '@/lib/tradingView/utils';

src/lib/testFlags.ts

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