Implement GMX_ACCOUNT_PSEUDO_CHAIN_ID and refactor related components to enhance multichain support. Update token handling in various components to utilize the new pseudo chain ID, improving balance management and user experience across the application.

Author: midas-myth

sdk/src/configs/chains.ts

@@ -48,6 +48,8 @@ export type ContractsChainId =
   | typeof BOTANIX
   | typeof ARBITRUM_SEPOLIA;
 export type ContractsChainIdProduction = Exclude<ContractsChainId, typeof AVALANCHE_FUJI | typeof ARBITRUM_SEPOLIA>;
+export const GMX_ACCOUNT_PSEUDO_CHAIN_ID = 0;
+export type GmxAccountPseudoChainId = typeof GMX_ACCOUNT_PSEUDO_CHAIN_ID;
 
 export type SettlementChainId = typeof ARBITRUM_SEPOLIA | typeof ARBITRUM | typeof AVALANCHE;
 export type SourceChainId =

sdk/src/configs/markets.ts

@@ -2,8 +2,12 @@
   This files is used to pre-build data during the build process.
   Avoid adding client-side code here, as it can break the build process.
 */
+import { zeroAddress } from "viem";
+
+import type { ERC20Address, NativeTokenSupportedAddress, Token } from "types/tokens";
+
 import { ARBITRUM, ARBITRUM_SEPOLIA, AVALANCHE, AVALANCHE_FUJI, BOTANIX, ContractsChainId } from "./chains";
-import { getTokenBySymbol } from "./tokens";
+import { convertTokenAddress, getToken, getTokenBySymbol } from "./tokens";
 
 export const SWAP_GRAPH_MAX_MARKETS_PER_TOKEN = 5;
 
@@ -1232,3 +1236,67 @@ export const fixTokenSymbolFromMarketLabel = (chainId: ContractsChainId, symbol:
   }
   return symbol;
 };
+
+export function isMarketTokenAddress(chainId: number, marketTokenAddress: string): boolean {
+  return Boolean(MARKETS[chainId]?.[marketTokenAddress]);
+}
+
+export function getTokenAddressByMarket(
+  chainId: number,
+  marketTokenAddress: string,
+  tokenType: "long" | "short" | "index"
+): ERC20Address | NativeTokenSupportedAddress {
+  const market = MARKETS[chainId as ContractsChainId][marketTokenAddress];
+
+  if (tokenType === "index") {
+    return convertTokenAddress(chainId, market.indexTokenAddress, "native")! as
+      | ERC20Address
+      | NativeTokenSupportedAddress;
+  }
+
+  if (tokenType === "long") {
+    return market.longTokenAddress as ERC20Address;
+  }
+
+  return market.shortTokenAddress as ERC20Address;
+}
+
+export function getMarketIndexToken(chainId: number, marketTokenAddress: string): Token {
+  const indexTokenAddress = getTokenAddressByMarket(chainId, marketTokenAddress, "index");
+
+  return getToken(chainId, indexTokenAddress);
+}
+
+export function getMarketIndexTokenSymbol(chainId: number, marketTokenAddress: string): string {
+  const indexToken = getMarketIndexToken(chainId, marketTokenAddress);
+  if (!indexToken) {
+    return "";
+  }
+
+  return indexToken.symbol;
+}
+
+export function getMarketLongTokenSymbol(chainId: number, marketTokenAddress: string): string {
+  const longTokenAddress = getTokenAddressByMarket(chainId, marketTokenAddress, "long");
+
+  return getToken(chainId, convertTokenAddress(chainId, longTokenAddress, "native")).symbol;
+}
+
+export function getMarketShortTokenSymbol(chainId: number, marketTokenAddress: string): string {
+  const shortTokenAddress = getTokenAddressByMarket(chainId, marketTokenAddress, "short");
+
+  return getToken(chainId, convertTokenAddress(chainId, shortTokenAddress, "native")).symbol;
+}
+
+export function getIsSpotOnlyMarket(chainId: number, marketTokenAddress: string): boolean {
+  return MARKETS[chainId as ContractsChainId]?.[marketTokenAddress]?.indexTokenAddress === zeroAddress;
+}
+
+export function getMarketIsSameCollaterals(chainId: number, marketTokenAddress: string): boolean {
+  const market = MARKETS[chainId]?.[marketTokenAddress];
+  if (!market) {
+    return false;
+  }
+
+  return market.longTokenAddress === market.shortTokenAddress;
+}

sdk/src/utils/markets.ts

@@ -1,11 +1,8 @@
-import { zeroAddress } from "viem";
-
-import { ContractsChainId } from "configs/chains";
 import { BASIS_POINTS_DIVISOR } from "configs/factors";
-import { MARKETS, MarketConfig } from "configs/markets";
-import { convertTokenAddress, getToken, getTokenVisualMultiplier, NATIVE_TOKEN_ADDRESS } from "configs/tokens";
-import { ContractMarketPrices, Market, MarketInfo } from "types/markets";
-import { NativeTokenSupportedAddress, Token, TokenPrices, TokensData } from "types/tokens";
+import type { MarketConfig } from "configs/markets";
+import { getTokenVisualMultiplier, NATIVE_TOKEN_ADDRESS } from "configs/tokens";
+import type { ContractMarketPrices, Market, MarketInfo } from "types/markets";
+import type { Token, TokenPrices, TokensData } from "types/tokens";
 
 import { applyFactor, PRECISION } from "./numbers";
 import { getByKey } from "./objects";
@@ -236,79 +233,3 @@ export function getIsMarketAvailableForExpressSwaps(marketInfo: MarketInfo) {
     (token) => token.hasPriceFeedProvider
   );
 }
-
-export function isMarketTokenAddress(chainId: number, marketTokenAddress: string): boolean {
-  return Boolean(MARKETS[chainId]?.[marketTokenAddress]);
-}
-
-export function getMarketIndexTokenAddress(
-  chainId: number,
-  marketTokenAddress: string
-): NativeTokenSupportedAddress | undefined {
-  return convertTokenAddress(chainId, MARKETS[chainId]?.[marketTokenAddress]?.indexTokenAddress, "native");
-}
-
-export function getMarketIndexToken(chainId: number, marketTokenAddress: string): Token | undefined {
-  const indexTokenAddress = getMarketIndexTokenAddress(chainId, marketTokenAddress);
-  if (!indexTokenAddress) {
-    return undefined;
-  }
-
-  return getToken(chainId, indexTokenAddress);
-}
-
-export function getMarketIndexTokenSymbol(chainId: number, marketTokenAddress: string): string {
-  const indexToken = getMarketIndexToken(chainId, marketTokenAddress);
-  if (!indexToken) {
-    return "";
-  }
-
-  return indexToken.symbol;
-}
-
-export function getMarketLongTokenAddress(chainId: number, marketTokenAddress: string): string {
-  return MARKETS[chainId][marketTokenAddress].longTokenAddress;
-}
-
-export function getMarketShortTokenAddress(chainId: number, marketTokenAddress: string): string {
-  return MARKETS[chainId][marketTokenAddress].shortTokenAddress;
-}
-
-export function getMarketLongToken(chainId: number, marketTokenAddress: string): Token {
-  return getToken(chainId, getMarketLongTokenAddress(chainId, marketTokenAddress))!;
-}
-
-export function getMarketShortToken(chainId: number, marketTokenAddress: string): Token {
-  return getToken(chainId, getMarketShortTokenAddress(chainId, marketTokenAddress))!;
-}
-
-export function getMarketLongTokenSymbol(chainId: number, marketTokenAddress: string): string {
-  const longTokenAddress = MARKETS[chainId]?.[marketTokenAddress]?.longTokenAddress;
-  if (!longTokenAddress) {
-    return "";
-  }
-
-  return getToken(chainId, convertTokenAddress(chainId, longTokenAddress, "native")).symbol;
-}
-
-export function getMarketShortTokenSymbol(chainId: number, marketTokenAddress: string): string {
-  const shortTokenAddress = MARKETS[chainId]?.[marketTokenAddress]?.shortTokenAddress;
-  if (!shortTokenAddress) {
-    return "";
-  }
-
-  return getToken(chainId, convertTokenAddress(chainId, shortTokenAddress, "native")).symbol;
-}
-
-export function getIsSpotOnlyMarket(chainId: number, marketTokenAddress: string): boolean {
-  return MARKETS[chainId as ContractsChainId]?.[marketTokenAddress]?.indexTokenAddress === zeroAddress;
-}
-
-export function getMarketIsSameCollaterals(chainId: number, marketTokenAddress: string): boolean {
-  const market = MARKETS[chainId]?.[marketTokenAddress];
-  if (!market) {
-    return false;
-  }
-
-  return market.longTokenAddress === market.shortTokenAddress;
-}

src/components/BridgeModal/BridgeInModal.tsx

@@ -1,10 +1,14 @@
 import { t } from "@lingui/macro";
-import mapValues from "lodash/mapValues";
-import pickBy from "lodash/pickBy";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import { useAccount } from "wagmi";
 
-import { AnyChainId, SettlementChainId, SourceChainId } from "config/chains";
+import {
+  type AnyChainId,
+  GMX_ACCOUNT_PSEUDO_CHAIN_ID,
+  type GmxAccountPseudoChainId,
+  type SettlementChainId,
+  type SourceChainId,
+} from "config/chains";
 import { isSourceChain } from "config/multichain";
 import { getSourceChainDecimalsMapped } from "config/multichain";
 import { useGmxAccountSettlementChainId } from "context/GmxAccountContext/hooks";
@@ -19,6 +23,7 @@ import { convertToUsd, getMidPrice, getTokenData, TokenBalanceType } from "domai
 import { useMaxAvailableAmount } from "domain/tokens/useMaxAvailableAmount";
 import { useChainId } from "lib/chains";
 import { helperToast } from "lib/helperToast";
+import { EMPTY_OBJECT } from "lib/objects";
 import { getMarketIndexName } from "sdk/utils/markets";
 import { adjustForDecimals, formatBalanceAmount, formatUsd, parseValue } from "sdk/utils/numbers";
 
@@ -84,23 +89,25 @@ export function BridgeInModal({
     ? multichainMarketTokenBalances?.balances[bridgeInChain]?.balance
     : undefined;
 
-  const sourceChainBalancesForSelector: Partial<Record<AnyChainId | 0, bigint>> =
+  const sourceChainBalancesForSelector: Partial<Record<AnyChainId | GmxAccountPseudoChainId, bigint>> =
     multichainMarketTokenBalances?.balances
-      ? mapValues(
-          pickBy(multichainMarketTokenBalances.balances, (data, chainIdStr) => {
-            const chainIdNum = Number(chainIdStr);
-            return data && chainIdNum !== chainId && chainIdNum !== 0;
-          }),
-          (data) => data.balance
+      ? Object.fromEntries(
+          Object.entries(multichainMarketTokenBalances.balances)
+            .filter(([chainIdStr, data]) => {
+              const chainIdNum = Number(chainIdStr);
+              return data && chainIdNum !== chainId && chainIdNum !== GMX_ACCOUNT_PSEUDO_CHAIN_ID;
+            })
+            .map(([chainIdStr, data]) => [chainIdStr, data.balance])
         )
-      : {};
+      : EMPTY_OBJECT;
 
   const sourceChainDecimals =
     bridgeInChain && glvOrMarketAddress
       ? getSourceChainDecimalsMapped(chainId, bridgeInChain, glvOrMarketAddress)
       : undefined;
 
-  const gmxAccountMarketTokenBalance: bigint | undefined = multichainMarketTokenBalances?.balances[0]?.balance;
+  const gmxAccountMarketTokenBalance: bigint | undefined =
+    multichainMarketTokenBalances?.balances[GMX_ACCOUNT_PSEUDO_CHAIN_ID]?.balance;
 
   const nextGmxAccountMarketTokenBalance: bigint | undefined =
     gmxAccountMarketTokenBalance !== undefined && bridgeInAmount !== undefined
@@ -125,7 +132,11 @@ export function BridgeInModal({
 
     const firstChainWithBalance = Object.entries(multichainMarketTokenBalances.balances).find(([chainIdStr, data]) => {
       const chainIdNum = Number(chainIdStr);
-      if (!isSourceChain(chainIdNum) || (chainIdNum as number) === chainId || (chainIdNum as number) === 0) {
+      if (
+        !isSourceChain(chainIdNum) ||
+        (chainIdNum as number) === chainId ||
+        (chainIdNum as number) === GMX_ACCOUNT_PSEUDO_CHAIN_ID
+      ) {
         return false;
       }
       return data?.balance !== undefined && data.balance > 0n;

src/components/BridgeModal/BridgeOutModal.tsx

@@ -4,15 +4,21 @@ import Skeleton from "react-loading-skeleton";
 import { Address, encodeAbiParameters } from "viem";
 import { useAccount } from "wagmi";
 
-import { getChainName, SettlementChainId, SourceChainId } from "config/chains";
+import {
+  ContractsChainId,
+  getChainName,
+  GMX_ACCOUNT_PSEUDO_CHAIN_ID,
+  SettlementChainId,
+  SourceChainId,
+} from "config/chains";
 import { getChainIcon } from "config/icons";
 import { getLayerZeroEndpointId, getStargatePoolAddress } from "config/multichain";
 import { useGmxAccountSettlementChainId } from "context/GmxAccountContext/hooks";
 import { selectMultichainMarketTokenBalances } from "context/PoolsDetailsContext/selectors/selectMultichainMarketTokenBalances";
 import { selectDepositMarketTokensData } from "context/SyntheticsStateContext/selectors/globalSelectors";
 import { useSelector } from "context/SyntheticsStateContext/utils";
 import { useArbitraryError, useArbitraryRelayParamsAndPayload } from "domain/multichain/arbitraryRelayParams";
-import { BridgeOutParams } from "domain/multichain/types";
+import type { BridgeOutParams } from "domain/multichain/types";
 import { buildAndSignBridgeOutTxn } from "domain/synthetics/express/expressOrderUtils";
 import { ExpressTransactionBuilder } from "domain/synthetics/express/types";
 import { getGlvOrMarketAddress, GlvOrMarketInfo } from "domain/synthetics/markets";
@@ -89,7 +95,8 @@ export function BridgeOutModal({
 
   const networks = useGmxAccountWithdrawNetworks();
 
-  const gmxAccountMarketTokenBalance: bigint | undefined = multichainMarketTokenBalances?.balances[0]?.balance;
+  const gmxAccountMarketTokenBalance: bigint | undefined =
+    multichainMarketTokenBalances?.balances[GMX_ACCOUNT_PSEUDO_CHAIN_ID]?.balance;
 
   const nextGmxAccountMarketTokenBalance: bigint | undefined =
     gmxAccountMarketTokenBalance !== undefined && bridgeOutAmount !== undefined
@@ -107,39 +114,12 @@ export function BridgeOutModal({
     tokenBalanceType: TokenBalanceType.GmxAccount,
   });
 
-  const bridgeOutParams: BridgeOutParams | undefined = useMemo(() => {
-    if (
-      bridgeOutChain === undefined ||
-      glvOrMarketAddress === undefined ||
-      bridgeOutAmount === undefined ||
-      bridgeOutAmount <= 0n
-    ) {
-      return;
-    }
-
-    const dstEid = getLayerZeroEndpointId(bridgeOutChain);
-    const stargateAddress = getStargatePoolAddress(chainId, glvOrMarketAddress);
-
-    if (dstEid === undefined || stargateAddress === undefined) {
-      return;
-    }
-
-    return {
-      token: glvOrMarketAddress as Address,
-      amount: bridgeOutAmount,
-      minAmountOut: 0n,
-      data: encodeAbiParameters(
-        [
-          {
-            type: "uint32",
-            name: "dstEid",
-          },
-        ],
-        [dstEid]
-      ),
-      provider: stargateAddress,
-    };
-  }, [bridgeOutChain, glvOrMarketAddress, bridgeOutAmount, chainId]);
+  const bridgeOutParams = useBridgeOutParams({
+    bridgeOutChain,
+    glvOrMarketAddress,
+    bridgeOutAmount,
+    chainId,
+  });
 
   const expressTransactionBuilder: ExpressTransactionBuilder | undefined = useMemo(() => {
     if (account === undefined || bridgeOutParams === undefined || bridgeOutChain === undefined) {
@@ -400,3 +380,49 @@ function NetworkItem({ option }: { option: { id: number; name: string } }) {
     </div>
   );
 }
+
+function useBridgeOutParams({
+  bridgeOutChain,
+  glvOrMarketAddress,
+  bridgeOutAmount,
+  chainId,
+}: {
+  bridgeOutChain: SourceChainId | undefined;
+  glvOrMarketAddress: string | undefined;
+  bridgeOutAmount: bigint | undefined;
+  chainId: ContractsChainId;
+}): BridgeOutParams | undefined {
+  return useMemo(() => {
+    if (
+      bridgeOutChain === undefined ||
+      glvOrMarketAddress === undefined ||
+      bridgeOutAmount === undefined ||
+      bridgeOutAmount <= 0n
+    ) {
+      return;
+    }
+
+    const dstEid = getLayerZeroEndpointId(bridgeOutChain);
+    const stargateAddress = getStargatePoolAddress(chainId, glvOrMarketAddress);
+
+    if (dstEid === undefined || stargateAddress === undefined) {
+      return;
+    }
+
+    return {
+      token: glvOrMarketAddress as Address,
+      amount: bridgeOutAmount,
+      minAmountOut: 0n,
+      data: encodeAbiParameters(
+        [
+          {
+            type: "uint32",
+            name: "dstEid",
+          },
+        ],
+        [dstEid]
+      ),
+      provider: stargateAddress,
+    };
+  }, [bridgeOutChain, glvOrMarketAddress, bridgeOutAmount, chainId]);
+}