diff --git a/package.json b/package.json index 7708ed9..e419f53 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "@cosmjs/proto-signing": "^0.31.0", "@cosmjs/stargate": "^0.31.0", "@cosmjs/tendermint-rpc": "^0.31.0", - "@dydxprotocol/v4-abacus": "^0.5.12", + "@dydxprotocol/v4-abacus": "^0.6.3", "@dydxprotocol/v4-client-js": "^0.36.1", "@dydxprotocol/v4-localization": "^0.1.12", "@ethersproject/providers": "^5.7.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fb8fe2e..280c5ed 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27,8 +27,8 @@ dependencies: specifier: ^0.31.0 version: 0.31.0 '@dydxprotocol/v4-abacus': - specifier: ^0.5.12 - version: 0.5.12 + specifier: ^0.6.3 + version: 0.6.3 '@dydxprotocol/v4-client-js': specifier: ^0.36.1 version: 0.36.1 @@ -979,8 +979,8 @@ packages: resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==} dev: true - /@dydxprotocol/v4-abacus@0.5.12: - resolution: {integrity: sha512-OigoIjGtp0az1elkP84nc9qKYBVg5Fg4QEJFDn7J7oiUqVvwNggYNfnDsX77D8+K4DJ/rtbi2yZYsDE8OZMSoQ==} + /@dydxprotocol/v4-abacus@0.6.3: + resolution: {integrity: sha512-oYMbII7o7fXjNpl2PZpG6mwKQ49e8Qky5vA8Ua9boNs7nRUx3PC6azfoPtjHKMdYY33eHoXcZBpTynhneLXCVg==} dev: false /@dydxprotocol/v4-client-js@0.36.1: diff --git a/src/components/Table/MarketTableCell.tsx b/src/components/Table/MarketTableCell.tsx index e024670..4c6bd22 100644 --- a/src/components/Table/MarketTableCell.tsx +++ b/src/components/Table/MarketTableCell.tsx @@ -24,7 +24,7 @@ export const MarketTableCell = ({ slotLeft={ <> {showFavorite && } - + } > diff --git a/src/constants/abacus.ts b/src/constants/abacus.ts index c6a0fda..c75ab88 100644 --- a/src/constants/abacus.ts +++ b/src/constants/abacus.ts @@ -6,6 +6,7 @@ import { STRING_KEYS } from './localization'; export type Nullable = T | null | undefined; // ------ V4 Protocols ------ // +export const AbacusAppConfig = Abacus.exchange.dydx.abacus.state.manager.AppConfigs; export const IOImplementations = Abacus.exchange.dydx.abacus.utils.IOImplementations; export const UIImplementations = Abacus.exchange.dydx.abacus.utils.UIImplementations; export type AbacusDYDXChainTransactionsProtocol = Omit< diff --git a/src/constants/networks.ts b/src/constants/networks.ts new file mode 100644 index 0000000..b2c8b47 --- /dev/null +++ b/src/constants/networks.ts @@ -0,0 +1,12 @@ +import environments from '../../public/configs/env.json'; + +// TODO: Update for Mainnet deployment +export const AVAILABLE_ENVIRONMENTS = + import.meta.env.MODE === 'production' + ? environments.deployments.TESTNET + : environments.deployments.DEV; + +export const CURRENT_ABACUS_DEPLOYMENT = import.meta.env.MODE === 'production' ? 'TESTNET' : 'DEV'; +export const ENVIRONMENT_CONFIG_MAP = environments.environments; +export type DydxNetwork = keyof typeof ENVIRONMENT_CONFIG_MAP; +export const DEFAULT_APP_ENVIRONMENT = AVAILABLE_ENVIRONMENTS.default as DydxNetwork; diff --git a/src/constants/networks.tsx b/src/constants/networks.tsx deleted file mode 100644 index 7861da6..0000000 --- a/src/constants/networks.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ENDPOINTS, DEV_ENDPOINTS } from '@dydxprotocol/v4-localization'; - -export const NETWORK_ENDPOINTS = import.meta.env.MODE === 'production' ? ENDPOINTS : DEV_ENDPOINTS; - -export const CLIENT_NETWORK_CONFIGS: Record< - string, - (typeof NETWORK_ENDPOINTS.environments)[number] -> = Object.fromEntries( - NETWORK_ENDPOINTS.environments.map((environment) => [environment.environment, environment]) -); - -export const DEFAULT_APP_ENVIRONMENT = NETWORK_ENDPOINTS.defaultEnvironment; - -export enum DydxV4Network { - V4Mainnet = 'dydxprotocol-mainnet', - V4Staging = 'dydxprotocol-staging', - V4Testnet2 = 'dydxprotocol-testnet', - V4Local = 'dydxprotocol-dev', -} - -export type DydxNetwork = keyof typeof CLIENT_NETWORK_CONFIGS; - -export function isDydxV4Network(network: any): boolean { - return CLIENT_NETWORK_CONFIGS[network]?.version === 'v4'; -} - -export function isValidDydxNetwork(network: any): boolean { - return Object.keys(CLIENT_NETWORK_CONFIGS).includes(network); -} diff --git a/src/hooks/useAccountBalance.ts b/src/hooks/useAccountBalance.ts index 33a7041..88a6858 100644 --- a/src/hooks/useAccountBalance.ts +++ b/src/hooks/useAccountBalance.ts @@ -7,7 +7,7 @@ import { formatUnits } from 'viem'; import { USDC_DENOM, DYDX_DENOM } from '@dydxprotocol/v4-client-js'; -import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks'; +import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks'; import { QUANTUM_MULTIPLIER } from '@/constants/numbers'; import { EvmAddress } from '@/constants/wallets'; @@ -52,16 +52,14 @@ export const useAccountBalance = ({ const selectedNetwork = useSelector(getSelectedNetwork); const balances = useSelector(getBalances, shallowEqual); - const evmChainId = Number(CLIENT_NETWORK_CONFIGS[selectedNetwork].ethereumChainId); + const evmChainId = Number(ENVIRONMENT_CONFIG_MAP[selectedNetwork].ethereumChainId); const evmQuery = useBalance({ enabled: Boolean(!isCosmosChain && addressOrDenom?.startsWith('0x')), address: evmAddress, chainId: typeof chainId === 'number' ? chainId : Number(evmChainId), token: - addressOrDenom === CHAIN_DEFAULT_TOKEN_ADDRESS - ? undefined - : (addressOrDenom as EvmAddress), + addressOrDenom === CHAIN_DEFAULT_TOKEN_ADDRESS ? undefined : (addressOrDenom as EvmAddress), watch: true, }); @@ -98,7 +96,7 @@ export const useAccountBalance = ({ const nativeTokenBalance = MustBigNumber(nativeTokenCoinBalance?.amount) .div(QUANTUM_MULTIPLIER) .toNumber(); - + const usdcCoinBalance = balances?.[USDC_DENOM]; const usdcBalance = MustBigNumber(usdcCoinBalance?.amount).div(QUANTUM_MULTIPLIER).toNumber(); diff --git a/src/hooks/useDisplayedWallets.ts b/src/hooks/useDisplayedWallets.ts index 618ad45..2454a4f 100644 --- a/src/hooks/useDisplayedWallets.ts +++ b/src/hooks/useDisplayedWallets.ts @@ -1,4 +1,3 @@ -import { isDydxV4Network } from '@/constants/networks'; import { WalletType } from '@/constants/wallets'; import { isTruthy } from '@/lib/isTruthy'; @@ -11,7 +10,7 @@ export const useDisplayedWallets = () => { return [ WalletType.MetaMask, - import.meta.env.MODE !== 'production' && isDydxV4Network(selectedNetwork) && WalletType.Keplr, + import.meta.env.MODE !== 'production' && WalletType.Keplr, WalletType.WalletConnect2, WalletType.WalletConnect, diff --git a/src/hooks/useInitializePage.ts b/src/hooks/useInitializePage.ts index ad9e1a9..05568d8 100644 --- a/src/hooks/useInitializePage.ts +++ b/src/hooks/useInitializePage.ts @@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'; import { LocalStorageKey } from '@/constants/localStorage'; -import { DEFAULT_APP_ENVIRONMENT, DydxNetwork, isValidDydxNetwork } from '@/constants/networks'; +import { DEFAULT_APP_ENVIRONMENT, type DydxNetwork } from '@/constants/networks'; import { useLocalStorage } from '@/hooks'; @@ -18,7 +18,6 @@ export const useInitializePage = () => { const [localStorageNetwork] = useLocalStorage({ key: LocalStorageKey.SelectedNetwork, defaultValue: DEFAULT_APP_ENVIRONMENT, - validateFn: isValidDydxNetwork, // backwards compatibility }); useEffect(() => { diff --git a/src/hooks/useMarketsData.ts b/src/hooks/useMarketsData.ts index b961ea8..26ffaf9 100644 --- a/src/hooks/useMarketsData.ts +++ b/src/hooks/useMarketsData.ts @@ -28,15 +28,13 @@ export const useMarketsData = ( const allAssets = useSelector(getAssets, shallowEqual) || {}; const markets = useMemo(() => { - return Object.values(allPerpetualMarkets) - .filter((market) => allAssets[market?.assetId]) // Filter out markets with no asset information - .map((marketData) => ({ - asset: allAssets[marketData.assetId], - tickSizeDecimals: marketData.configs?.tickSizeDecimals, - ...marketData, - ...marketData.perpetual, - ...marketData.configs, - })) as MarketData[]; + return Object.values(allPerpetualMarkets).map((marketData) => ({ + asset: allAssets[marketData.assetId], + tickSizeDecimals: marketData.configs?.tickSizeDecimals, + ...marketData, + ...marketData.perpetual, + ...marketData.configs, + })) as MarketData[]; }, [allPerpetualMarkets, allAssets]); const filteredMarkets = useMemo(() => { @@ -45,8 +43,8 @@ export const useMarketsData = ( if (searchFilter) { return filtered.filter( ({ asset }) => - asset.name?.toLocaleLowerCase().includes(searchFilter.toLowerCase()) || - asset.symbol?.toLocaleLowerCase().includes(searchFilter.toLowerCase()) + asset?.name?.toLocaleLowerCase().includes(searchFilter.toLowerCase()) || + asset?.id?.toLocaleLowerCase().includes(searchFilter.toLowerCase()) ); } return filtered; diff --git a/src/hooks/useSquid.tsx b/src/hooks/useSquid.tsx index 2f33e2a..5b23b5e 100644 --- a/src/hooks/useSquid.tsx +++ b/src/hooks/useSquid.tsx @@ -2,11 +2,11 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react'; import { useSelector } from 'react-redux'; import { Squid } from '@0xsquid/sdk'; -import { CLIENT_NETWORK_CONFIGS, isDydxV4Network } from '@/constants/networks'; +import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks'; import { getSelectedNetwork } from '@/state/appSelectors'; -export const NATIVE_TOKEN_ADDRESS = "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE"; +export const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE'; export const STATUS_ERROR_GRACE_PERIOD = 120_000; @@ -22,10 +22,7 @@ const useSquidContext = () => { }; const squid = useMemo( - () => - isDydxV4Network(selectedNetwork) - ? new Squid({ baseUrl: CLIENT_NETWORK_CONFIGS[selectedNetwork]?.endpoints['0xsquid'] }) - : undefined, + () => new Squid({ baseUrl: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.endpoints['0xsquid'] }), [selectedNetwork] ); @@ -39,7 +36,7 @@ const useSquidContext = () => { }; type SquidContextType = ReturnType; -const SquidContext = createContext(undefined); +const SquidContext = createContext(undefined); SquidContext.displayName = '0xSquid'; export const SquidProvider = ({ ...props }) => ( diff --git a/src/lib/abacus/filesystem.ts b/src/lib/abacus/filesystem.ts index 08a6f56..32f6859 100644 --- a/src/lib/abacus/filesystem.ts +++ b/src/lib/abacus/filesystem.ts @@ -1,5 +1,4 @@ import type { AbacusFileSystemProtocol, FileLocation, Nullable } from '@/constants/abacus'; -import { NETWORK_ENDPOINTS } from '@/constants/networks'; export const ENDPOINTS_PATH = import.meta.env.MODE === 'production' @@ -8,10 +7,6 @@ export const ENDPOINTS_PATH = class AbacusFileSystem implements AbacusFileSystemProtocol { readTextFile(location: FileLocation, path: string): Nullable { - if (path === ENDPOINTS_PATH) { - return JSON.stringify(NETWORK_ENDPOINTS); - } - return null; } diff --git a/src/lib/abacus/index.ts b/src/lib/abacus/index.ts index f0d8b66..8faafce 100644 --- a/src/lib/abacus/index.ts +++ b/src/lib/abacus/index.ts @@ -22,10 +22,11 @@ import { UIImplementations, CoroutineTimer, TransferType, + AbacusAppConfig, } from '@/constants/abacus'; import { DEFAULT_MARKETID } from '@/constants/markets'; -import { type DydxNetwork } from '@/constants/networks'; +import { CURRENT_ABACUS_DEPLOYMENT, type DydxNetwork } from '@/constants/networks'; import type { RootStore } from '@/state/_store'; @@ -80,8 +81,9 @@ class AbacusStateManager { ); this.stateManager = new AsyncAbacusStateManager( - import.meta.env.SHARED_RESOURCES_URI, - ENDPOINTS_PATH, + '', + CURRENT_ABACUS_DEPLOYMENT, + AbacusAppConfig.Companion.forWeb, ioImplementations, uiImplementations, // @ts-ignore diff --git a/src/lib/abacus/stateNotification.ts b/src/lib/abacus/stateNotification.ts index 879dc09..573a9f2 100644 --- a/src/lib/abacus/stateNotification.ts +++ b/src/lib/abacus/stateNotification.ts @@ -76,7 +76,7 @@ class AbacusStateNotifier implements AbacusStateNotificationProtocol { if (changes.has(Changes.accountBalances)) { if (updatedState.account?.balances) { - const balances: Record = {} + const balances: Record = {}; for (const { k, v } of updatedState.account.balances.toArray()) { balances[k] = v; } diff --git a/src/pages/trade/MarketSelectorAndStats.tsx b/src/pages/trade/MarketSelectorAndStats.tsx index 73138d1..65a5e00 100644 --- a/src/pages/trade/MarketSelectorAndStats.tsx +++ b/src/pages/trade/MarketSelectorAndStats.tsx @@ -12,12 +12,12 @@ import { getCurrentMarketAssetData } from '@/state/assetsSelectors'; import { getCurrentMarketId } from '@/state/perpetualsSelectors'; export const MarketSelectorAndStats = ({ className }: { className?: string }) => { - const { symbol = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {}; + const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {}; const currentMarketId = useSelector(getCurrentMarketId); return ( - + diff --git a/src/state/accountCalculators.ts b/src/state/accountCalculators.ts index d068cde..cc1abad 100644 --- a/src/state/accountCalculators.ts +++ b/src/state/accountCalculators.ts @@ -2,7 +2,6 @@ import { createSelector } from 'reselect'; import { SubaccountPosition } from '@/constants/abacus'; import { OnboardingState, OnboardingSteps } from '@/constants/account'; -import { isDydxV4Network } from '@/constants/networks'; import { getExistingOpenPositions, @@ -12,8 +11,6 @@ import { getUncommittedOrderClientIds, } from '@/state/accountSelectors'; -import { getSelectedNetwork } from '@/state/appSelectors'; - export const calculateOnboardingStep = createSelector( [getOnboardingState, getOnboardingGuards], (onboardingState: OnboardingState, onboardingGuards: ReturnType) => { @@ -35,9 +32,9 @@ export const calculateOnboardingStep = createSelector( * @description calculate whether an account is in a state where they can trade */ export const calculateCanAccountTrade = createSelector( - [getOnboardingState, getSelectedNetwork], - (onboardingState: OnboardingState, selectedNetwork: string) => { - return onboardingState === OnboardingState.AccountConnected && isDydxV4Network(selectedNetwork); + [getOnboardingState], + (onboardingState: OnboardingState) => { + return onboardingState === OnboardingState.AccountConnected; } ); diff --git a/src/state/app.ts b/src/state/app.ts index f456442..61e5d65 100644 --- a/src/state/app.ts +++ b/src/state/app.ts @@ -3,11 +3,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { AbacusApiState } from '@/constants/abacus'; import { LocalStorageKey } from '@/constants/localStorage'; -import { - DEFAULT_APP_ENVIRONMENT, - isValidDydxNetwork, - type DydxNetwork, -} from '@/constants/networks'; +import { DEFAULT_APP_ENVIRONMENT, type DydxNetwork } from '@/constants/networks'; import { getLocalStorage } from '@/lib/localStorage'; @@ -23,7 +19,6 @@ const initialState: AppState = { selectedNetwork: getLocalStorage({ key: LocalStorageKey.SelectedNetwork, defaultValue: DEFAULT_APP_ENVIRONMENT, - validateFn: isValidDydxNetwork, }), }; diff --git a/src/views/MarketDetails.tsx b/src/views/MarketDetails.tsx index 86ca8d5..3296830 100644 --- a/src/views/MarketDetails.tsx +++ b/src/views/MarketDetails.tsx @@ -24,7 +24,7 @@ export const MarketDetails: React.FC = () => { const stringGetter = useStringGetter(); const { isTablet } = useBreakpoints(); const { configs, market } = useSelector(getCurrentMarketData, shallowEqual) || {}; - const { symbol, name, resources } = useSelector(getCurrentMarketAssetData, shallowEqual) || {}; + const { id, name, resources } = useSelector(getCurrentMarketAssetData, shallowEqual) || {}; if (!configs) return null; @@ -75,7 +75,7 @@ export const MarketDetails: React.FC = () => { useGrouping value={stepSize} type={OutputType.Asset} - tag={symbol} + tag={id} fractionDigits={stepSizeDecimals} /> ), @@ -88,7 +88,7 @@ export const MarketDetails: React.FC = () => { useGrouping value={minOrderSize} type={OutputType.Asset} - tag={symbol} + tag={id} fractionDigits={stepSizeDecimals} /> ), @@ -132,7 +132,7 @@ export const MarketDetails: React.FC = () => { - + {name} {isTablet && } diff --git a/src/views/MarketStatsDetails.tsx b/src/views/MarketStatsDetails.tsx index 9da712f..6ae5d3e 100644 --- a/src/views/MarketStatsDetails.tsx +++ b/src/views/MarketStatsDetails.tsx @@ -45,7 +45,7 @@ const defaultMarketStatistics = Object.values(MarketStats); export const MarketStatsDetails = ({ showMidMarketPrice = true }: ElementProps) => { const stringGetter = useStringGetter(); const { isTablet } = useBreakpoints(); - const { symbol = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {}; + const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {}; const { tickSizeDecimals } = useSelector(getCurrentMarketConfig, shallowEqual) ?? {}; const midMarketPrice = useSelector(getCurrentMarketMidMarketPrice); const lastMidMarketPrice = useRef(midMarketPrice); @@ -116,7 +116,7 @@ export const MarketStatsDetails = ({ showMidMarketPrice = true }: ElementProps) ); diff --git a/src/views/MarketsDropdown.tsx b/src/views/MarketsDropdown.tsx index 283b795..aaf8aee 100644 --- a/src/views/MarketsDropdown.tsx +++ b/src/views/MarketsDropdown.tsx @@ -60,12 +60,12 @@ const MarketsDropdownContent = ({ onRowAction }: { onRowAction?: (market: string columnKey: 'market', getCellValue: (row) => row.market, label: stringGetter({ key: STRING_KEYS.MARKET }), - renderCell: ({ asset }) => ( + renderCell: ({ assetId, id }) => ( {/* TRCL-1693 */} - -

{asset.name}

- {asset.symbol} + +

{id}

+ {assetId} ), }, diff --git a/src/views/PositionInfo.tsx b/src/views/PositionInfo.tsx index c3528f5..dca2d48 100644 --- a/src/views/PositionInfo.tsx +++ b/src/views/PositionInfo.tsx @@ -68,7 +68,7 @@ export const PositionInfo = ({ showNarrowVariation }: { showNarrowVariation?: bo const isLoading = useSelector(calculateIsAccountLoading); const { stepSizeDecimals, tickSizeDecimals } = currentMarketConfigs || {}; - const { symbol } = currentMarketAssetData || {}; + const { id } = currentMarketAssetData || {}; const { type: dialogType } = activeDialog || {}; const { type: tradeBoxDialogType } = activeTradeBoxDialog || {}; @@ -188,7 +188,7 @@ export const PositionInfo = ({ showNarrowVariation }: { showNarrowVariation?: bo label: STRING_KEYS.LIQUIDATION_PRICE, tooltip: 'liquidation-price', tooltipParams: { - SYMBOL: symbol || '', + SYMBOL: id || '', }, fractionDigits: tickSizeDecimals, hasInvalidNewValue: Boolean(newLeverageIsInvalid), @@ -326,7 +326,7 @@ export const PositionInfo = ({ showNarrowVariation }: { showNarrowVariation?: bo notionalTotal={notionalTotal?.current} postOrderSize={size?.postOrder} stepSizeDecimals={stepSizeDecimals} - symbol={symbol || undefined} + symbol={id || undefined} tickSizeDecimals={tickSizeDecimals} showNarrowVariation={showNarrowVariation} isLoading={isLoading} @@ -370,7 +370,7 @@ export const PositionInfo = ({ showNarrowVariation }: { showNarrowVariation?: bo notionalTotal={notionalTotal?.current} postOrderSize={size?.postOrder} stepSizeDecimals={stepSizeDecimals} - symbol={symbol || undefined} + symbol={id || undefined} tickSizeDecimals={tickSizeDecimals} isLoading={isLoading} /> diff --git a/src/views/charts/DepthChart.tsx b/src/views/charts/DepthChart.tsx index cd49893..673ccee 100644 --- a/src/views/charts/DepthChart.tsx +++ b/src/views/charts/DepthChart.tsx @@ -98,7 +98,7 @@ export const DepthChart = ({ // Chart data const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual); - const { symbol = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {}; + const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {}; const { stepSizeDecimals, tickSizeDecimals } = useSelector(getCurrentMarketConfig, shallowEqual) ?? {}; @@ -393,7 +393,7 @@ export const DepthChart = ({ ? chartPointAtPointer.size : tooltipData!.nearestDatum?.datum.depth } - tag={symbol} + tag={id} accentColor={ { [DepthChartSeries.Asks]: 'var(--color-negative)', @@ -476,7 +476,7 @@ export const DepthChart = ({ type={OutputType.Asset} value={chartPointAtPointer.size} fractionDigits={stepSizeDecimals} - tag={symbol} + tag={id} useGrouping={false} /> ), @@ -543,7 +543,7 @@ export const DepthChart = ({ type={OutputType.Asset} value={nearestDatum?.datum.depth} fractionDigits={stepSizeDecimals} - tag={symbol} + tag={id} useGrouping={false} /> ), diff --git a/src/views/dialogs/ClosePositionDialog.tsx b/src/views/dialogs/ClosePositionDialog.tsx index 9575189..f75a2d9 100644 --- a/src/views/dialogs/ClosePositionDialog.tsx +++ b/src/views/dialogs/ClosePositionDialog.tsx @@ -28,7 +28,7 @@ type ElementProps = { }; export const ClosePositionDialog = ({ setIsOpen }: ElementProps) => { - const { symbol } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {}; + const { id } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {}; const { isTablet } = useBreakpoints(); const stringGetter = useStringGetter(); @@ -46,7 +46,7 @@ export const ClosePositionDialog = ({ setIsOpen }: ElementProps) => { } = { [MobilePlaceOrderSteps.EditOrder]: { title: , - slotIcon: , + slotIcon: , }, [MobilePlaceOrderSteps.PreviewOrder]: { title: ( diff --git a/src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx b/src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx index 2fc1d96..ffdbe72 100644 --- a/src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx +++ b/src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx @@ -19,7 +19,7 @@ import { MustBigNumber } from '@/lib/numbers'; type ElementProps = { fillId: string; - setIsOpen?: (open: boolean) => void; + setIsOpen: (open: boolean) => void; }; export const FillDetailsDialog = ({ fillId, setIsOpen }: ElementProps) => { @@ -94,7 +94,7 @@ export const FillDetailsDialog = ({ fillId, setIsOpen }: ElementProps) => { return ( } + slotIcon={} title={resources.typeStringKey && stringGetter({ key: resources.typeStringKey })} items={detailItems} setIsOpen={setIsOpen} diff --git a/src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx b/src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx index 50b16a2..e0c0737 100644 --- a/src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx +++ b/src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx @@ -194,7 +194,7 @@ export const OrderDetailsDialog = ({ orderId, setIsOpen }: ElementProps) => { return ( } + slotIcon={} title={!resources.typeStringKey ? '' : stringGetter({ key: resources.typeStringKey })} slotFooter={ isAccountViewOnly ? null : isOrderStatusClearable(status) ? ( diff --git a/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx b/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx index 805fcb6..6669a4a 100644 --- a/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx +++ b/src/views/dialogs/OnboardingDialog/GenerateKeys.tsx @@ -9,7 +9,7 @@ import { AlertType } from '@/constants/alerts'; import { AnalyticsEvent } from '@/constants/analytics'; import { ButtonAction } from '@/constants/buttons'; import { STRING_KEYS } from '@/constants/localization'; -import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks'; +import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks'; import { DydxAddress, SIGN_TYPED_DATA } from '@/constants/wallets'; import { useAccounts, useBreakpoints, useDydxClient, useStringGetter } from '@/hooks'; @@ -55,7 +55,7 @@ export const GenerateKeys = ({ // 1. Switch network const selectedNetwork = useSelector(getSelectedNetwork); - const chainId = Number(CLIENT_NETWORK_CONFIGS[selectedNetwork].ethereumChainId); + const chainId = Number(ENVIRONMENT_CONFIG_MAP[selectedNetwork].ethereumChainId); const { isMatchingNetwork, matchNetwork, isSwitchingNetwork } = useMatchingEvmNetwork({ chainId, diff --git a/src/views/dialogs/TradeDialog.tsx b/src/views/dialogs/TradeDialog.tsx index 90e3c09..a4190fa 100644 --- a/src/views/dialogs/TradeDialog.tsx +++ b/src/views/dialogs/TradeDialog.tsx @@ -3,7 +3,7 @@ import { shallowEqual, useSelector } from 'react-redux'; import styled, { AnyStyledComponent, css } from 'styled-components'; import { TradeInputField } from '@/constants/abacus'; -import { STRING_KEYS } from '@/constants/localization'; +import { STRING_KEYS, StringKey } from '@/constants/localization'; import { TradeTypes, TRADE_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade'; import { useBreakpoints, useStringGetter } from '@/hooks'; @@ -31,7 +31,7 @@ type ElementProps = { export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: ElementProps) => { const { isMobile } = useBreakpoints(); const stringGetter = useStringGetter(); - const { symbol } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {}; + const { id } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {}; const currentTradeData = useSelector(getInputTradeData, shallowEqual); const { type } = currentTradeData || {}; const selectedTradeType = getSelectedTradeType(type); @@ -40,9 +40,9 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: ElementProps) => const allTradeTypeItems = typeOptions?.toArray()?.map(({ type, stringKey }) => ({ value: type, label: stringGetter({ - key: stringKey, + key: stringKey as StringKey, }), - slotBefore: , + slotBefore: , })); const [currentStep, setCurrentStep] = useState( diff --git a/src/views/forms/AccountManagementForms/TestnetDepositForm.tsx b/src/views/forms/AccountManagementForms/TestnetDepositForm.tsx index a11d610..6677528 100644 --- a/src/views/forms/AccountManagementForms/TestnetDepositForm.tsx +++ b/src/views/forms/AccountManagementForms/TestnetDepositForm.tsx @@ -4,7 +4,7 @@ import styled, { type AnyStyledComponent } from 'styled-components'; import { ButtonAction, ButtonType } from '@/constants/buttons'; import { STRING_KEYS } from '@/constants/localization'; -import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks'; +import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks'; import { useAccounts, useStringGetter, useSubaccount } from '@/hooks'; import { layoutMixins } from '@/styles/layoutMixins'; @@ -65,7 +65,7 @@ export const TestnetDepositForm = ({ onDeposit, onError }: DepositFormProps) => key: STRING_KEYS.CREDITED_WITH, params: { AMOUNT_USD: - CLIENT_NETWORK_CONFIGS[selectedNetwork].ethereumChainId === 'dydxprotocol-testnet' + ENVIRONMENT_CONFIG_MAP[selectedNetwork].ethereumChainId === 'dydxprotocol-testnet' ? 1000 : 100, }, diff --git a/src/views/forms/ClosePositionForm.tsx b/src/views/forms/ClosePositionForm.tsx index 262e82a..e507e5f 100644 --- a/src/views/forms/ClosePositionForm.tsx +++ b/src/views/forms/ClosePositionForm.tsx @@ -80,7 +80,7 @@ export const ClosePositionForm = ({ const { closePosition } = useSubaccount(); const market = useSelector(getCurrentMarketId); - const { symbol } = useSelector(getCurrentMarketAssetData, shallowEqual) || {}; + const { id } = useSelector(getCurrentMarketAssetData, shallowEqual) || {}; const { stepSizeDecimals } = useSelector(getCurrentMarketConfig, shallowEqual) || {}; const { size: sizeData, summary } = useSelector(getInputClosePositionData, shallowEqual) || {}; const { size, percent } = sizeData || {}; @@ -193,7 +193,7 @@ export const ClosePositionForm = ({ label={ <> {stringGetter({ key: STRING_KEYS.AMOUNT })} - {symbol && {symbol}} + {id && {id}} } decimals={stepSizeDecimals || TOKEN_DECIMALS} diff --git a/src/views/forms/TradeForm/PositionPreview.tsx b/src/views/forms/TradeForm/PositionPreview.tsx index d297db5..489fd8d 100644 --- a/src/views/forms/TradeForm/PositionPreview.tsx +++ b/src/views/forms/TradeForm/PositionPreview.tsx @@ -21,7 +21,7 @@ type ElementProps = { export const PositionPreview = ({ showNarrowVariation }: ElementProps) => { const stringGetter = useStringGetter(); - const { symbol } = useSelector(getCurrentMarketAssetData, shallowEqual) || {}; + const { id } = useSelector(getCurrentMarketAssetData, shallowEqual) || {}; const { configs, oraclePrice } = useSelector(getCurrentMarketData, shallowEqual) || {}; const { size: positionSize } = useSelector(getCurrentMarketPositionData, shallowEqual) || {}; const { stepSizeDecimals, tickSizeDecimals } = configs || {}; @@ -29,12 +29,12 @@ export const PositionPreview = ({ showNarrowVariation }: ElementProps) => { return ( - {!showNarrowVariation && } + {!showNarrowVariation && } {stringGetter({ key: STRING_KEYS.YOUR_MARKET_POSITION, params: { - MARKET: showNarrowVariation ? '' : {symbol ?? ''}, + MARKET: showNarrowVariation ? '' : {id ?? ''}, }, })} @@ -44,7 +44,7 @@ export const PositionPreview = ({ showNarrowVariation }: ElementProps) => { oraclePrice={oraclePrice} postOrderSize={positionSize?.postOrder} stepSizeDecimals={stepSizeDecimals} - symbol={symbol || undefined} + symbol={id || undefined} tickSizeDecimals={tickSizeDecimals} showNarrowVariation={showNarrowVariation} /> diff --git a/src/views/forms/TradeForm/TradeSizeInputs.tsx b/src/views/forms/TradeForm/TradeSizeInputs.tsx index ebe5e11..f2ae66a 100644 --- a/src/views/forms/TradeForm/TradeSizeInputs.tsx +++ b/src/views/forms/TradeForm/TradeSizeInputs.tsx @@ -40,7 +40,7 @@ export const TradeSizeInputs = () => { const stringGetter = useStringGetter(); const { isTablet } = useBreakpoints(); - const { symbol } = useSelector(getCurrentMarketAssetData, shallowEqual) || {}; + const { id } = useSelector(getCurrentMarketAssetData, shallowEqual) || {}; const inputTradeSizeData = useSelector(getInputTradeSizeData, shallowEqual); const currentTradeInputOptions = useSelector(getInputTradeOptions, shallowEqual); @@ -94,7 +94,7 @@ export const TradeSizeInputs = () => { shape={ButtonShape.Square} > - {showUSDCInputOnTablet ? 'USD' : symbol} + {showUSDCInputOnTablet ? 'USD' : id} ); @@ -105,10 +105,10 @@ export const TradeSizeInputs = () => { onInput={onSizeInput} label={ <> - + {stringGetter({ key: STRING_KEYS.AMOUNT })} - {symbol && {symbol}} + {id && {id}} } slotRight={isTablet && inputToggleButton} @@ -126,11 +126,7 @@ export const TradeSizeInputs = () => { decimals={tickSizeDecimals || USD_DECIMALS} label={ <> - + {stringGetter({ key: STRING_KEYS.AMOUNT })} USD diff --git a/src/views/forms/TransferForm.tsx b/src/views/forms/TransferForm.tsx index f314ef4..1b19036 100644 --- a/src/views/forms/TransferForm.tsx +++ b/src/views/forms/TransferForm.tsx @@ -11,9 +11,13 @@ import { TransferInputField, TransferType } from '@/constants/abacus'; import { AlertType } from '@/constants/alerts'; import { ButtonShape, ButtonSize } from '@/constants/buttons'; import { STRING_KEYS } from '@/constants/localization'; -import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks'; +import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks'; import { NumberSign, QUANTUM_MULTIPLIER } from '@/constants/numbers'; -import { DYDX_CHAIN_ASSET_COIN_DENOM, DYDX_CHAIN_ASSET_TAGS, DydxChainAsset } from '@/constants/wallets'; +import { + DYDX_CHAIN_ASSET_COIN_DENOM, + DYDX_CHAIN_ASSET_TAGS, + DydxChainAsset, +} from '@/constants/wallets'; import { useAccountBalance, @@ -60,7 +64,11 @@ export const TransferForm = ({ const stringGetter = useStringGetter(); const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {}; const { dydxAddress } = useAccounts(); - const { address: recipientAddress, size, fee } = useSelector(getTransferInputs, shallowEqual) || {}; + const { + address: recipientAddress, + size, + fee, + } = useSelector(getTransferInputs, shallowEqual) || {}; const { transfer } = useSubaccount(); const { nativeTokenBalance, usdcBalance } = useAccountBalance(); const { selectedNetwork } = useSelectedNetwork(); @@ -193,7 +201,7 @@ export const TransferForm = ({ const networkOptions = [ { - chainId: CLIENT_NETWORK_CONFIGS[selectedNetwork].dydxChainId, + chainId: ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId, label: ( {stringGetter({ key: STRING_KEYS.DYDX_CHAIN })} @@ -283,7 +291,7 @@ export const TransferForm = ({ /> {networkOptions.map(({ chainId, label }) => ( diff --git a/src/views/menus/useGlobalCommands.tsx b/src/views/menus/useGlobalCommands.tsx index b80e14e..396fcd1 100644 --- a/src/views/menus/useGlobalCommands.tsx +++ b/src/views/menus/useGlobalCommands.tsx @@ -129,15 +129,13 @@ export const useGlobalCommands = (): MenuConfig => { { value: NavItems.NavigateToMarket, label: 'Navigate to Market', - subitems: joinedPerpetualMarketsAndAssets.map( - ({ market = '', name = '', symbol = '' }) => ({ - value: market, // `${market}|${name}`, - slotBefore: , - label: name, - tag: symbol, // {symbol}, - onSelect: () => navigate(`/trade/${market}`), - }) - ), + subitems: joinedPerpetualMarketsAndAssets.map(({ market = '', name = '', id = '' }) => ({ + value: market, + slotBefore: , + label: name, + tag: id, + onSelect: () => navigate(`/trade/${market}`), + })), }, ], }, diff --git a/src/views/menus/useNetworks.tsx b/src/views/menus/useNetworks.tsx index 6fea12e..a15a249 100644 --- a/src/views/menus/useNetworks.tsx +++ b/src/views/menus/useNetworks.tsx @@ -1,13 +1,13 @@ import { type MenuItem } from '@/constants/menus'; -import { type DydxNetwork, NETWORK_ENDPOINTS } from '@/constants/networks'; -import { useStringGetter } from '@/hooks'; +import { + AVAILABLE_ENVIRONMENTS, + type DydxNetwork, + ENVIRONMENT_CONFIG_MAP, +} from '@/constants/networks'; -export const useNetworks = (): MenuItem[] => { - const stringGetter = useStringGetter(); - - return NETWORK_ENDPOINTS.environments.map(({ stringKey, environment }) => ({ - key: environment, - label: stringGetter({ key: stringKey }), - value: environment, +export const useNetworks = (): MenuItem[] => + (AVAILABLE_ENVIRONMENTS.environments as DydxNetwork[]).map((dydxNetwork) => ({ + key: dydxNetwork, + label: ENVIRONMENT_CONFIG_MAP[dydxNetwork].name, + value: dydxNetwork, })); -}; diff --git a/src/views/tables/FillsTable.tsx b/src/views/tables/FillsTable.tsx index 9fbfca6..576a85e 100644 --- a/src/views/tables/FillsTable.tsx +++ b/src/views/tables/FillsTable.tsx @@ -89,8 +89,8 @@ const getFillsTableColumnDef = ({ label: `${stringGetter({ key: STRING_KEYS.TYPE })} / ${stringGetter({ key: STRING_KEYS.AMOUNT, })}`, - renderCell: ({ resources, size, stepSizeDecimals, asset: { symbol } }) => ( - }> + renderCell: ({ resources, size, stepSizeDecimals, asset: { id } }) => ( + }> {resources.typeStringKey ? stringGetter({ key: resources.typeStringKey }) : null} @@ -161,7 +161,7 @@ const getFillsTableColumnDef = ({ }[orderSide], })} - + ), }, @@ -325,9 +325,7 @@ export const FillsTable = ({ if (hasUnseenFillUpdates) dispatch(viewedFills()); }, [hasUnseenFillUpdates]); - const symbol = currentMarket - ? allAssets[allPerpetualMarkets[currentMarket]?.assetId]?.symbol - : null; + const symbol = currentMarket ? allAssets[allPerpetualMarkets[currentMarket]?.assetId]?.id : null; const fillsData = fills.map((fill: SubaccountFill) => getHydratedTradingData({ diff --git a/src/views/tables/FundingPaymentsTable.tsx b/src/views/tables/FundingPaymentsTable.tsx index 48df6c6..5b5c37c 100644 --- a/src/views/tables/FundingPaymentsTable.tsx +++ b/src/views/tables/FundingPaymentsTable.tsx @@ -12,7 +12,10 @@ import { MarketTableCell } from '@/components/Table/MarketTableCell'; import { Output, OutputType } from '@/components/Output'; import { Table, TableCell, type ColumnDef } from '@/components/Table'; -import { getCurrentMarketFundingPayments, getSubaccountFundingPayments } from '@/state/accountSelectors'; +import { + getCurrentMarketFundingPayments, + getSubaccountFundingPayments, +} from '@/state/accountSelectors'; import { getAssets } from '@/state/assetsSelectors'; import { getPerpetualMarkets } from '@/state/perpetualsSelectors'; @@ -111,7 +114,7 @@ export const FundingPaymentsTable = ({ type={OutputType.Asset} value={Math.abs(positionSize)} fractionDigits={stepSizeDecimals} - tag={asset.symbol} + tag={asset.id} /> const currentMarketConfig = useSelector(getCurrentMarketConfig, shallowEqual); const currentMarketLiveTrades = useSelector(getCurrentMarketLiveTrades, shallowEqual) || []; - const { symbol = '' } = currentMarketAssetData ?? {}; + const { id = '' } = currentMarketAssetData ?? {}; const { stepSizeDecimals, tickSizeDecimals } = currentMarketConfig || {}; const rows = currentMarketLiveTrades.map( @@ -84,7 +84,7 @@ export const LiveTrades = ({ className, histogramSide = 'left' }: StyleProps) => columnKey: 'size', getCellValue: (row: RowData) => row.size, label: stringGetter({ key: STRING_KEYS.SIZE }), - tag: symbol, + tag: id, renderCell: (row: RowData) => ( }, !isTablet && timeColumn, ].filter(isTruthy); - }, [stepSizeDecimals, tickSizeDecimals, symbol, histogramSide, stringGetter]); + }, [stepSizeDecimals, tickSizeDecimals, id, histogramSide, stringGetter]); return ( { columnKey: 'market', getCellValue: (row) => row.market, label: stringGetter({ key: STRING_KEYS.MARKET }), - renderCell: ({ asset, id }) => ( - - ), + renderCell: ({ asset, id }) => , }, { columnKey: 'price', @@ -144,7 +142,7 @@ export const MarketsTable = ({ className }: { className?: string }) => { fractionDigits={LARGE_TOKEN_DECIMALS} type={OutputType.Number} value={row.openInterest} - tag={row.asset?.symbol} + tag={row.asset?.id} /> row.id, label: stringGetter({ key: STRING_KEYS.DETAILS }), renderCell: ({ id, asset, leverage, resources, size }) => ( - }> + }>