update sha

.prettierignore

@@ -1 +1,2 @@
 node_modules/
+public/

package.json

@@ -40,7 +40,7 @@
     "@cosmjs/proto-signing": "^0.32.1",
     "@cosmjs/stargate": "^0.32.1",
     "@cosmjs/tendermint-rpc": "^0.32.1",
-    "@dydxprotocol/v4-abacus": "^1.4.5",
+    "@dydxprotocol/v4-abacus": "^1.4.2",
     "@dydxprotocol/v4-client-js": "^1.0.20",
     "@dydxprotocol/v4-localization": "^1.1.30",
     "@ethersproject/providers": "^5.7.2",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 overrides:
   follow-redirects: 1.15.3
 
@@ -26,8 +30,8 @@ dependencies:
     specifier: ^0.32.1
     version: 0.32.2
   '@dydxprotocol/v4-abacus':
-    specifier: ^1.4.5
+    specifier: ^1.4.2
-    version: 1.4.5
+    version: 1.4.2
   '@dydxprotocol/v4-client-js':
     specifier: ^1.0.20
     version: 1.0.20
@@ -1286,8 +1290,8 @@ packages:
     resolution: {integrity: sha512-Gg5t+eR7vPJMAmhkFt6CZrzPd0EKpAslWwk5rFVYZpJsM8JG5KT9XQ99hgNM3Ov6ScNoIWbXkpX27F6A9cXR4Q==}
     dev: false
 
-  /@dydxprotocol/v4-abacus@1.4.5:
+  /@dydxprotocol/v4-abacus@1.4.2:
-    resolution: {integrity: sha512-LhJmpIaUkHCsSiHx+jdk+59euvGp2E+gGFelpfmOYpH1+enZgEXDQvWsgHSFEQxYP3mRiGG4uo+ZYNGdvffg7g==}
+    resolution: {integrity: sha512-+hugk0RulMwMthR2xCMYXohcC3sEYqVW/lmiq0RUuHZ9yrjmgy48xl0aZUmXGUYXyoiHXPS4AULhRKHQ4OOLwg==}
     dev: false
 
   /@dydxprotocol/v4-client-js@1.0.20:
@@ -16049,7 +16053,3 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

public/configs/env.json

@@ -1329,4 +1329,4 @@
          }
       }
    }
-}
+}

scripts/inject-amplitude.js

@@ -14,7 +14,7 @@ if (AMPLITUDE_API_KEY) {
     const html = await fs.readFile(htmlFilePath, 'utf-8');
 
     const amplitudeCdnScript = `<script type="text/javascript">
-        !function(){"use strict";!function(e,t){var n=e.amplitude||{_q:[],_iq:{}};if(n.invoked)e.console&&console.error&&console.error("Amplitude snippet has been loaded.");else{var r=function(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}},s=function(e,t,n){return function(r){e._q.push({name:t,args:Array.prototype.slice.call(n,0),resolve:r})}},o=function(e,t,n){e[t]=function(){if(n)return{promise:new Promise(s(e,t,Array.prototype.slice.call(arguments)))}}},i=function(e){for(var t=0;t<m.length;t++)o(e,m[t],!1);for(var n=0;n<g.length;n++)o(e,g[n],!0)};n.invoked=!0;var u=t.createElement("script");u.type="text/javascript",u.integrity="sha384-x0ik2D45ZDEEEpYpEuDpmj05fY91P7EOZkgdKmq4dKL/ZAVcufJ+nULFtGn0HIZE",u.crossOrigin="anonymous",u.async=!0,u.src="https://cdn.amplitude.com/libs/analytics-browser-2.0.0-min.js.gz",u.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var a=t.getElementsByTagName("script")[0];a.parentNode.insertBefore(u,a);for(var c=function(){return this._q=[],this},p=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],l=0;l<p.length;l++)r(c,p[l]);n.Identify=c;for(var d=function(){return this._q=[],this},f=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],v=0;v<f.length;v++)r(d,f[v]);n.Revenue=d;var m=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset","extendSession"],g=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];i(n),n.createInstance=function(e){return n._iq[e]={_q:[]},i(n._iq[e]),n._iq[e]},e.amplitude=n}}(window,document)}();
+        !function(){"use strict";!function(e,t){var n=e.amplitude||{_q:[],_iq:{}};if(n.invoked)e.console&&console.error&&console.error("Amplitude snippet has been loaded.");else{var r=function(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}},s=function(e,t,n){return function(r){e._q.push({name:t,args:Array.prototype.slice.call(n,0),resolve:r})}},o=function(e,t,n){e[t]=function(){if(n)return{promise:new Promise(s(e,t,Array.prototype.slice.call(arguments)))}}},i=function(e){for(var t=0;t<m.length;t++)o(e,m[t],!1);for(var n=0;n<g.length;n++)o(e,g[n],!0)};n.invoked=!0;var u=t.createElement("script");u.type="text/javascript",u.integrity="sha384-BVo5ZjsjH373rWbcjz9Qjb2L6BgLwLADcZtZZPu3nMl8+7LPDhi1NcUEf0Ate41Y",u.crossOrigin="anonymous",u.async=!0,u.src="/libs/amplitude-analytics-browser-2.0.0-min.js",u.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var a=t.getElementsByTagName("script")[0];a.parentNode.insertBefore(u,a);for(var c=function(){return this._q=[],this},p=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],l=0;l<p.length;l++)r(c,p[l]);n.Identify=c;for(var d=function(){return this._q=[],this},f=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],v=0;v<f.length;v++)r(d,f[v]);n.Revenue=d;var m=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset","extendSession"],g=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];i(n),n.createInstance=function(e){return n._iq[e]={_q:[]},i(n._iq[e]),n._iq[e]},e.amplitude=n}}(window,document)}();
         </script>
         `;
 

src/components/Tag.stories.tsx

@@ -33,4 +33,9 @@ TagStory.argTypes = {
     control: { type: 'select' },
     defaultValue: undefined,
   },
+  isHighlighted: {
+    options: [true, false],
+    control: { type: 'select' },
+    defaultValue: false,
+  },
 };

src/components/Tag.tsx

@@ -76,5 +76,6 @@ export const Tag = styled.span<StyleProps>`
     isHighlighted &&
     css`
       background-color: var(--color-accent);
+      color: var(--color-text-button);
     `}
 `;

src/constants/networks.ts

@@ -1,4 +1,4 @@
-import environments from '../../public/configs/v1/env.json';
+import environments from '../../public/configs/env.json';
 
 const CURRENT_MODE = ({
   production: 'MAINNET',
@@ -14,10 +14,5 @@ export const isDev = CURRENT_MODE === 'DEV';
 export const AVAILABLE_ENVIRONMENTS = environments.deployments[CURRENT_MODE];
 export const CURRENT_ABACUS_DEPLOYMENT = CURRENT_MODE;
 export const ENVIRONMENT_CONFIG_MAP = environments.environments;
-export const TOKEN_CONFIG_MAP = environments.tokens;
-export const LINKS_CONFIG_MAP = environments.links;
-export const WALLETS_CONFIG_MAP = environments.wallets;
-export const GOVERNANCE_CONFIG_MAP = environments.governance;
 export type DydxNetwork = keyof typeof ENVIRONMENT_CONFIG_MAP;
-export type DydxChainId = keyof typeof TOKEN_CONFIG_MAP;
 export const DEFAULT_APP_ENVIRONMENT = AVAILABLE_ENVIRONMENTS.default as DydxNetwork;

src/constants/numbers.ts

@@ -22,4 +22,5 @@ export enum NumberSign {
 
 // Deposit/Withdraw
 export const MAX_CCTP_TRANSFER_AMOUNT = 1_000_000;
+export const MIN_CCTP_TRANSFER_AMOUNT = 10;
 export const MAX_PRICE_IMPACT = 0.02; // 2%

src/constants/wallets.ts

@@ -24,7 +24,7 @@ import {
 
 import { isMetaMask } from '@/lib/wallet/providers';
 
-import { DydxChainId, WALLETS_CONFIG_MAP } from './networks';
+import { DydxNetwork, ENVIRONMENT_CONFIG_MAP } from './networks';
 
 // Wallet connection types
 
@@ -291,17 +291,17 @@ export const COSMOS_DERIVATION_PATH = "m/44'/118'/0'/0/0";
 /**
  * @description typed data to sign for dYdX Chain onboarding
  */
-export const getSignTypedData = (selectedDydxChainId: DydxChainId) =>
+export const getSignTypedData = (selectedNetwork: DydxNetwork) =>
   ({
     primaryType: 'dYdX',
     domain: {
-      name: WALLETS_CONFIG_MAP[selectedDydxChainId].signTypedDataDomainName,
+      name: ENVIRONMENT_CONFIG_MAP[selectedNetwork].wallets.signTypedDataDomainName,
     },
     types: {
       dYdX: [{ name: 'action', type: 'string' }],
     },
     message: {
-      action: WALLETS_CONFIG_MAP[selectedDydxChainId].signTypedDataAction,
+      action: ENVIRONMENT_CONFIG_MAP[selectedNetwork].wallets.signTypedDataAction,
     },
   } as const);
 

src/hooks/tradingView/useChartMarketAndResolution.ts

@@ -27,19 +27,26 @@ export const useChartMarketAndResolution = ({
   const dispatch = useDispatch();
 
   const currentMarketId: string = useSelector(getCurrentMarketId) || DEFAULT_MARKETID;
+
   const selectedResolution: string =
     useSelector(getSelectedResolutionForMarket(currentMarketId)) || DEFAULT_RESOLUTION;
 
   const chart = isWidgetReady ? tvWidget?.chart() : undefined;
   const chartResolution = chart?.resolution?.();
 
+  /**
+   * @description Hook to handle changing markets - intentionally should avoid triggering on change of resolutions.
+   */
   useEffect(() => {
     if (currentMarketId && isWidgetReady) {
       const resolution = savedResolution || selectedResolution;
       tvWidget?.setSymbol(currentMarketId, resolution as ResolutionString, () => {});
     }
-  }, [currentMarketId, isWidgetReady, savedResolution, selectedResolution]);
+  }, [currentMarketId, isWidgetReady]);
 
+  /**
+   * @description Hook to handle changing chart resolution
+   */
   useEffect(() => {
     if (chartResolution) {
       if (chartResolution !== selectedResolution) {

src/hooks/useDydxClient.tsx

@@ -18,13 +18,14 @@ import type { ResolutionString } from 'public/tradingview/charting_library';
 import type { ConnectNetworkEvent, NetworkConfig } from '@/constants/abacus';
 import { DEFAULT_TRANSACTION_MEMO } from '@/constants/analytics';
 import { type Candle, RESOLUTION_MAP } from '@/constants/candles';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { DydxChainAsset } from '@/constants/wallets';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
 
 import { log } from '@/lib/telemetry';
 
 import { useRestrictions } from './useRestrictions';
-import { useTokenConfigs } from './useTokenConfigs';
 
 type DydxContextType = ReturnType<typeof useDydxClientContext>;
 const DydxContext = createContext<DydxContextType>({} as DydxContextType);
@@ -40,8 +41,7 @@ const useDydxClientContext = () => {
   // ------ Network ------ //
 
   const selectedNetwork = useSelector(getSelectedNetwork);
-  const { usdcDenom, usdcDecimals, usdcGasDenom, chainTokenDenom, chainTokenDecimals } =
+  const tokensConfigs = ENVIRONMENT_CONFIG_MAP[selectedNetwork].tokens;
-    useTokenConfigs();
 
   const [networkConfig, setNetworkConfig] = useState<NetworkConfig>();
 
@@ -75,11 +75,11 @@ const useDydxClientContext = () => {
                 networkConfig.validatorUrl,
                 networkConfig.chainId,
                 {
-                  USDC_DENOM: usdcDenom,
+                  USDC_DENOM: tokensConfigs[DydxChainAsset.USDC].denom,
-                  USDC_DECIMALS: usdcDecimals,
+                  USDC_DECIMALS: tokensConfigs[DydxChainAsset.USDC].decimals,
-                  USDC_GAS_DENOM: usdcGasDenom,
+                  USDC_GAS_DENOM: tokensConfigs[DydxChainAsset.USDC].gasDenom,
-                  CHAINTOKEN_DENOM: chainTokenDenom,
+                  CHAINTOKEN_DENOM: tokensConfigs[DydxChainAsset.CHAINTOKEN].denom,
-                  CHAINTOKEN_DECIMALS: chainTokenDecimals,
+                  CHAINTOKEN_DECIMALS: tokensConfigs[DydxChainAsset.CHAINTOKEN].decimals,
                 },
                 {
                   broadcastPollIntervalMs: 3_000,

src/hooks/useGovernanceVariables.ts

@@ -1,8 +1,5 @@
-import { useSelector } from 'react-redux';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-
+import { useSelectedNetwork } from '@/hooks';
-import { GOVERNANCE_CONFIG_MAP } from '@/constants/networks';
-
-import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 export interface GovernanceVariables {
   newMarketProposal: {
@@ -13,7 +10,7 @@ export interface GovernanceVariables {
 }
 
 export const useGovernanceVariables = (): GovernanceVariables => {
-  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const { selectedNetwork } = useSelectedNetwork();
-  const governanceVars = GOVERNANCE_CONFIG_MAP[selectedDydxChainId] as GovernanceVariables;
+  const governanceVars = ENVIRONMENT_CONFIG_MAP[selectedNetwork].governance as GovernanceVariables;
   return governanceVars;
 };

src/hooks/useNotificationTypes.tsx

@@ -5,6 +5,7 @@ import { isEqual, groupBy } from 'lodash';
 import { useNavigate } from 'react-router-dom';
 
 import { DialogTypes } from '@/constants/dialogs';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 import { AppRoute } from '@/constants/routes';
 import { DydxChainAsset } from '@/constants/wallets';
 
@@ -22,7 +23,7 @@ import {
   TransferNotificationTypes,
 } from '@/constants/notifications';
 
-import { useStringGetter } from '@/hooks';
+import { useSelectedNetwork, useStringGetter } from '@/hooks';
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
 
 import { AssetIcon } from '@/components/AssetIcon';
@@ -35,7 +36,6 @@ import { getSubaccountFills, getSubaccountOrders } from '@/state/accountSelector
 import { openDialog } from '@/state/dialogs';
 import { getAbacusNotifications } from '@/state/notificationsSelectors';
 import { getMarketIds } from '@/state/perpetualsSelectors';
-import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 import { formatSeconds } from '@/lib/timeUtils';
 
@@ -175,7 +175,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
     useTrigger: ({ trigger }) => {
       const stringGetter = useStringGetter();
       const { transferNotifications } = useLocalNotifications();
-      const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+      const { selectedNetwork } = useSelectedNetwork();
 
       useEffect(() => {
         for (const transfer of transferNotifications) {
@@ -184,7 +184,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
           const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;
 
           const transferType =
-            type ?? fromChainId === selectedDydxChainId
+            type ?? fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
               ? TransferNotificationTypes.Withdrawal
               : TransferNotificationTypes.Deposit;
 

src/hooks/useSelectedNetwork.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { LocalStorageKey } from '@/constants/localStorage';
-import { DEFAULT_APP_ENVIRONMENT, DydxNetwork } from '@/constants/networks';
+import { DEFAULT_APP_ENVIRONMENT, DydxNetwork, ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 
 import { useAccounts, useLocalStorage } from '@/hooks';
 

src/hooks/useSubaccount.tsx

@@ -28,7 +28,7 @@ import { setSubaccount, setHistoricalPnl, removeUncommittedOrderClientId } from
 import { getBalances } from '@/state/accountSelectors';
 
 import abacusStateManager from '@/lib/abacus';
-import { hashFromTx } from '@/lib/txUtils';
+import { hashFromTx } from '@/lib/hashfromTx';
 import { log } from '@/lib/telemetry';
 
 import { useAccounts } from './useAccounts';

src/hooks/useTokenConfigs.ts

@@ -1,9 +1,7 @@
-import { useSelector } from 'react-redux';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-
-import { TOKEN_CONFIG_MAP } from '@/constants/networks';
 import { DydxChainAsset } from '@/constants/wallets';
 
-import { getSelectedDydxChainId } from '@/state/appSelectors';
+import { useSelectedNetwork } from '@/hooks';
 
 export const useTokenConfigs = (): {
   tokensConfigs: {
@@ -12,33 +10,31 @@ export const useTokenConfigs = (): {
       name: string;
       decimals: number;
       gasDenom?: string;
-    };
+    },
     [DydxChainAsset.CHAINTOKEN]: {
       denom: string;
       name: string;
       decimals: number;
       gasDenom?: string;
-    };
+    },
   };
   usdcDenom: string;
   usdcDecimals: number;
-  usdcGasDenom: string;
   usdcLabel: string;
   chainTokenDenom: string;
   chainTokenDecimals: number;
   chainTokenLabel: string;
 } => {
-  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const { selectedNetwork } = useSelectedNetwork();
-  const tokensConfigs = TOKEN_CONFIG_MAP[selectedDydxChainId];
+  const tokensConfigs = ENVIRONMENT_CONFIG_MAP[selectedNetwork].tokens;
 
-  return {
+  return { 
     tokensConfigs,
-    usdcDenom: tokensConfigs[DydxChainAsset.USDC].denom,
+    usdcDenom: tokensConfigs[DydxChainAsset.USDC].denom, 
-    usdcDecimals: tokensConfigs[DydxChainAsset.USDC].decimals,
+    usdcDecimals: tokensConfigs[DydxChainAsset.USDC].decimals, 
-    usdcGasDenom: tokensConfigs[DydxChainAsset.USDC].gasDenom,
     usdcLabel: tokensConfigs[DydxChainAsset.USDC].name,
     chainTokenDenom: tokensConfigs[DydxChainAsset.CHAINTOKEN].denom,
-    chainTokenDecimals: tokensConfigs[DydxChainAsset.CHAINTOKEN].decimals,
+    chainTokenDecimals: tokensConfigs[DydxChainAsset.CHAINTOKEN].decimals, 
     chainTokenLabel: tokensConfigs[DydxChainAsset.CHAINTOKEN].name,
   };
 };

src/hooks/useURLConfigs.ts

@@ -1,15 +1,12 @@
-import { useSelector } from 'react-redux';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 
-import { LINKS_CONFIG_MAP } from '@/constants/networks';
+import { useSelectedNetwork } from '@/hooks';
-
-import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 const FALLBACK_URL = 'https://help.dydx.exchange/';
 
 export interface LinksConfigs {
   tos: string;
   privacy: string;
-  statusPage: string;
   mintscan: string;
   mintscanBase: string;
   feedback?: string;
@@ -30,13 +27,12 @@ export interface LinksConfigs {
 }
 
 export const useURLConfigs = (): LinksConfigs => {
-  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const { selectedNetwork } = useSelectedNetwork();
-  const linksConfigs = LINKS_CONFIG_MAP[selectedDydxChainId] as LinksConfigs;
+  const linksConfigs = ENVIRONMENT_CONFIG_MAP[selectedNetwork].links as LinksConfigs;
 
   return {
     tos: linksConfigs.tos,
     privacy: linksConfigs.privacy,
-    statusPage: linksConfigs.statusPage,
     mintscan: linksConfigs.mintscan,
     mintscanBase: linksConfigs.mintscanBase,
     feedback: linksConfigs.feedback || FALLBACK_URL,

src/hooks/useWalletConnection.ts

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { EvmDerivedAddresses } from '@/constants/account';
 import { STRING_KEYS } from '@/constants/localization';
 import { LocalStorageKey } from '@/constants/localStorage';
-import { ENVIRONMENT_CONFIG_MAP, WALLETS_CONFIG_MAP } from '@/constants/networks';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 
 import {
   type DydxAddress,
@@ -32,7 +32,7 @@ import {
   WalletType as CosmosWalletType,
 } from 'graz';
 
-import { getSelectedDydxChainId } from '@/state/appSelectors';
+import { getSelectedNetwork } from '@/state/appSelectors';
 
 import { resolveWagmiConnector } from '@/lib/wagmi';
 import { getWalletConnection, parseWalletError } from '@/lib/wallet';
@@ -91,8 +91,8 @@ export const useWalletConnection = () => {
 
   // Wallet connection
 
-  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const selectedNetwork = useSelector(getSelectedNetwork);
-  const walletConnectConfig = WALLETS_CONFIG_MAP[selectedDydxChainId].walletconnect;
+  const walletConnectConfig = ENVIRONMENT_CONFIG_MAP[selectedNetwork].wallets.walletconnect;
   const wagmiConnector = useMemo(
     () =>
       walletType && walletConnectionType

src/layout/Footer/FooterDesktop.tsx

@@ -3,9 +3,9 @@ import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { AbacusApiStatus } from '@/constants/abacus';
 import { ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { isDev } from '@/constants/networks';
+import { ENVIRONMENT_CONFIG_MAP, isDev } from '@/constants/networks';
 
-import { useApiState, useStringGetter, useURLConfigs } from '@/hooks';
+import { useApiState, useSelectedNetwork, useStringGetter } from '@/hooks';
 import { ChatIcon, LinkOutIcon } from '@/icons';
 
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -28,7 +28,8 @@ enum ExchangeStatus {
 export const FooterDesktop = () => {
   const stringGetter = useStringGetter();
   const { height, indexerHeight, status, statusErrorMessage } = useApiState();
-  const { statusPage } = useURLConfigs();
+  const { selectedNetwork } = useSelectedNetwork();
+  const { statusPage } = ENVIRONMENT_CONFIG_MAP[selectedNetwork].links;
 
   const { exchangeStatus, label } =
     !status || status === AbacusApiStatus.NORMAL

src/lib/abacus/dydxChainTransactions.ts

@@ -34,7 +34,7 @@ import {
 import { DEFAULT_TRANSACTION_MEMO } from '@/constants/analytics';
 import { DialogTypes } from '@/constants/dialogs';
 import { UNCOMMITTED_ORDER_TIMEOUT_MS } from '@/constants/trade';
-import { DydxNetwork, isTestnet } from '@/constants/networks';
+import { ENVIRONMENT_CONFIG_MAP, DydxNetwork, isTestnet } from '@/constants/networks';
 
 import { RootStore } from '@/state/_store';
 import { addUncommittedOrderClientId, removeUncommittedOrderClientId } from '@/state/account';
@@ -43,8 +43,7 @@ import { openDialog } from '@/state/dialogs';
 import { StatefulOrderError } from '../errors';
 import { bytesToBigInt } from '../numbers';
 import { log } from '../telemetry';
-import { hashFromTx, getMintscanTxLink } from '../txUtils';
+import { hashFromTx } from '../hashfromTx';
-import { getDydxChainIdFromNetwork } from '../network';
 
 class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
   private compositeClient: CompositeClient | undefined;
@@ -239,10 +238,9 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
 
       if (isTestnet) {
         console.log(
-          getMintscanTxLink(
+          `${ENVIRONMENT_CONFIG_MAP[
-            getDydxChainIdFromNetwork(this.compositeClient.network.getString() as DydxNetwork),
+            this.compositeClient.network.getString() as DydxNetwork
-            hash
+          ]?.links?.mintscan?.replace('{tx_hash}', hash.toString())}`
-          )
         );
       } else console.log(`txHash: ${hash}`);
 

src/lib/hashfromTx.ts

@@ -0,0 +1,3 @@
+export const hashFromTx = (
+  txHash: string | Uint8Array
+): string => `0x${Buffer.from(txHash).toString('hex')}`;

src/lib/network.ts

@@ -1,8 +1,4 @@
-import { type DydxNetwork, ENVIRONMENT_CONFIG_MAP, type DydxChainId } from '@/constants/networks';
+import { type DydxNetwork, ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 
 export const validateAgainstAvailableEnvironments = (value: DydxNetwork) =>
   Object.keys(ENVIRONMENT_CONFIG_MAP).includes(value);
-
-export const getDydxChainIdFromNetwork = (network: DydxNetwork) => {
-  return ENVIRONMENT_CONFIG_MAP[network].dydxChainId as DydxChainId;
-};

src/lib/txUtils.ts

@@ -1,7 +0,0 @@
-import { DydxChainId, LINKS_CONFIG_MAP } from '@/constants/networks';
-
-export const hashFromTx = (txHash: string | Uint8Array): string =>
-  `0x${Buffer.from(txHash).toString('hex')}`;
-
-export const getMintscanTxLink = (dydxChainId: DydxChainId, txHash: string): string =>
-  `${LINKS_CONFIG_MAP[dydxChainId]?.mintscan?.replace('{tx_hash}', txHash.toString())}`;

src/state/appSelectors.ts

@@ -1,8 +1,4 @@
-import { DydxChainId, ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 import type { RootState } from './_store';
 
 export const getApiState = (state: RootState) => state.app.apiState;
 export const getSelectedNetwork = (state: RootState) => state.app.selectedNetwork;
-
-export const getSelectedDydxChainId = (state: RootState) =>
-  ENVIRONMENT_CONFIG_MAP[state.app.selectedNetwork].dydxChainId as DydxChainId;

src/views/dialogs/OnboardingDialog/GenerateKeys.tsx

@@ -25,7 +25,7 @@ import { Switch } from '@/components/Switch';
 import { WithReceipt } from '@/components/WithReceipt';
 import { WithTooltip } from '@/components/WithTooltip';
 
-import { getSelectedNetwork, getSelectedDydxChainId } from '@/state/appSelectors';
+import { getSelectedNetwork } from '@/state/appSelectors';
 
 import { track } from '@/lib/analytics';
 import { isTruthy } from '@/lib/isTruthy';
@@ -98,8 +98,7 @@ export const GenerateKeys = ({
     EvmDerivedAccountStatus.Derived,
   ].includes(status);
 
-  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const signTypedData = getSignTypedData(selectedNetwork);
-  const signTypedData = getSignTypedData(selectedDydxChainId);
   const { signTypedDataAsync } = useSignTypedData({
     ...signTypedData,
     domain: {

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -10,7 +10,7 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
 import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { isMainnet } from '@/constants/networks';
+import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
 import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
 import type { EvmAddress } from '@/constants/wallets';
 
@@ -32,7 +32,6 @@ import { OutputType } from '@/components/Output';
 import { Tag } from '@/components/Tag';
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 
-import { getSelectedDydxChainId } from '@/state/appSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
@@ -57,7 +56,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
   const [error, setError] = useState<Error | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [requireUserActionInWallet, setRequireUserActionInWallet] = useState(false);
-  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const { selectedNetwork } = useSelectedNetwork();
 
   const { evmAddress, signerWagmi, publicClientWagmi, nobleAddress } = useAccounts();
 
@@ -263,7 +262,9 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         if (txHash) {
           addTransferNotification({
             txHash: txHash,
-            toChainId: !isCctp ? selectedDydxChainId : getNobleChainId(),
+            toChainId: !isCctp
+              ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
+              : getNobleChainId(),
             fromChainId: chainIdStr || undefined,
             toAmount: summary?.usdcSize || undefined,
             triggeredAt: Date.now(),

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -9,9 +9,14 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
 import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { isMainnet } from '@/constants/networks';
+import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
 import { TransferNotificationTypes } from '@/constants/notifications';
-import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
+import {
+  MAX_CCTP_TRANSFER_AMOUNT,
+  MAX_PRICE_IMPACT,
+  MIN_CCTP_TRANSFER_AMOUNT,
+  NumberSign,
+} from '@/constants/numbers';
 
 import {
   useAccounts,
@@ -40,7 +45,6 @@ import { Icon, IconName } from '@/components/Icon';
 
 import { SourceSelectMenu } from '@/views/forms/AccountManagementForms/SourceSelectMenu';
 
-import { getSelectedDydxChainId } from '@/state/appSelectors';
 import { getSubaccount } from '@/state/accountSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
 
@@ -55,7 +59,7 @@ export const WithdrawForm = () => {
   const stringGetter = useStringGetter();
   const [error, setError] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
-  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const { selectedNetwork } = useSelectedNetwork();
 
   const { sendSquidWithdraw } = useSubaccount();
   const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
@@ -178,7 +182,9 @@ export const WithdrawForm = () => {
             addTransferNotification({
               txHash: txHash,
               type: TransferNotificationTypes.Withdrawal,
-              fromChainId: !isCctp ? selectedDydxChainId : getNobleChainId(),
+              fromChainId: !isCctp
+                ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
+                : getNobleChainId(),
               toChainId: chainIdStr || undefined,
               toAmount: debouncedAmountBN.toNumber(),
               triggeredAt: Date.now(),
@@ -328,6 +334,12 @@ export const WithdrawForm = () => {
           },
         });
       }
+      if (
+        !debouncedAmountBN.isZero() &&
+        MustBigNumber(debouncedAmountBN).lte(MIN_CCTP_TRANSFER_AMOUNT)
+      ) {
+        return 'Amount must be greater than 10 USDC';
+      }
     }
 
     if (isMainnet && MustBigNumber(summary?.aggregatePriceImpact).gte(MAX_PRICE_IMPACT)) {

src/views/forms/TransferForm.tsx

@@ -9,6 +9,7 @@ import { TransferInputField, TransferType } from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 import { NumberSign } from '@/constants/numbers';
 import { DydxChainAsset } from '@/constants/wallets';
 
@@ -17,6 +18,7 @@ import {
   useAccounts,
   useDydxClient,
   useRestrictions,
+  useSelectedNetwork,
   useStringGetter,
   useSubaccount,
   useTokenConfigs,
@@ -39,7 +41,6 @@ import { TransferButtonAndReceipt } from '@/views/forms/TransferForm/TransferBut
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 
 import { getSubaccount } from '@/state/accountSelectors';
-import { getSelectedDydxChainId } from '@/state/appSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
@@ -62,7 +63,7 @@ export const TransferForm = ({
   const { dydxAddress } = useAccounts();
   const { transfer } = useSubaccount();
   const { nativeTokenBalance, usdcBalance } = useAccountBalance();
-  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const { selectedNetwork } = useSelectedNetwork();
   const { tokensConfigs, usdcLabel, chainTokenLabel } = useTokenConfigs();
 
   const {
@@ -238,7 +239,7 @@ export const TransferForm = ({
 
   const networkOptions = [
     {
-      chainId: selectedDydxChainId,
+      chainId: ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId,
       label: (
         <Styled.InlineRow>
           <AssetIcon symbol="DYDX" /> {stringGetter({ key: STRING_KEYS.DYDX_CHAIN })}
@@ -321,7 +322,7 @@ export const TransferForm = ({
         />
         <Styled.NetworkSelectMenu
           label={stringGetter({ key: STRING_KEYS.NETWORK })}
-          value={selectedDydxChainId}
+          value={ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId}
           slotTriggerAfter={null}
         >
           {networkOptions.map(({ chainId, label }) => (

src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx

@@ -1,21 +1,18 @@
 import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import styled, { css, type AnyStyledComponent } from 'styled-components';
 import { StatusResponse } from '@0xsquid/sdk';
 
-import { STRING_KEYS } from '@/constants/localization';
+import { useStringGetter, useSelectedNetwork, useURLConfigs } from '@/hooks';
-import { TransferNotificationTypes } from '@/constants/notifications';
-
-import { useStringGetter, useURLConfigs } from '@/hooks';
-
-import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Link } from '@/components/Link';
 import { Icon, IconName } from '@/components/Icon';
 import { LoadingDots } from '@/components/Loading/LoadingDots';
 import { LoadingSpinner } from '@/components/Loading/LoadingSpinner';
 
-import { getSelectedDydxChainId } from '@/state/appSelectors';
+import { layoutMixins } from '@/styles/layoutMixins';
+import { STRING_KEYS } from '@/constants/localization';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { TransferNotificationTypes } from '@/constants/notifications';
 
 type ElementProps = {
   status?: StatusResponse;
@@ -35,8 +32,9 @@ enum TransferStatusStep {
 
 export const TransferStatusSteps = ({ className, status, type }: ElementProps & StyleProps) => {
   const stringGetter = useStringGetter();
-  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const { selectedNetwork } = useSelectedNetwork();
   const { mintscan: mintscanTxUrl } = useURLConfigs();
+  const dydxChainId = ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId;
 
   const { currentStep, steps } = useMemo(() => {
     const routeStatus = status?.routeStatus;
@@ -57,7 +55,7 @@ export const TransferStatusSteps = ({ className, status, type }: ElementProps &
         link:
           type === TransferNotificationTypes.Deposit
             ? status?.fromChain?.transactionUrl
-            : routeStatus?.[0]?.chainId === selectedDydxChainId && routeStatus[0].txHash
+            : routeStatus?.[0]?.chainId === dydxChainId && routeStatus[0].txHash
             ? `${mintscanTxUrl?.replace('{tx_hash}', routeStatus[0].txHash.replace('0x', ''))}`
             : undefined,
       },
@@ -83,7 +81,7 @@ export const TransferStatusSteps = ({ className, status, type }: ElementProps &
         link:
           type === TransferNotificationTypes.Withdrawal
             ? status?.toChain?.transactionUrl
-            : currentStatus?.chainId === selectedDydxChainId && currentStatus?.txHash
+            : currentStatus?.chainId === dydxChainId && currentStatus?.txHash
             ? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash.replace('0x', ''))}`
             : undefined,
       },