LaconicNetwork/dydx-v4-web
6
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update Abacus v0.6.0 (#55)

Browse Source 
* Abacus 6: New init, deprecate asset.symbol

* deprecate asset.symbol

* Update networks constants

* filesystem

* Update networks.ts

* 0.6.0 -> 0.6.3

* Remove Market filter
This commit is contained in:
Jared Vu 2023-10-03 13:10:55 -07:00 committed by GitHub
parent 6508a8b857
commit 15bf8a1b34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
39 changed files with 138 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

8
pnpm-lock.yaml generated
View File

@ -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:

2
src/components/Table/MarketTableCell.tsx
View File

@ -24,7 +24,7 @@ export const MarketTableCell = ({
slotLeft={
<>
{showFavorite && <Icon iconName={IconName.Star} />}
<Styled.AssetIcon symbol={asset?.symbol} />
<Styled.AssetIcon symbol={asset?.id} />
</>
}
>

1
src/constants/abacus.ts
View File

@ -6,6 +6,7 @@ import { STRING_KEYS } from './localization';
export type Nullable<T> = 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<

12
src/constants/networks.ts Normal file
View File

@ -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;

29
src/constants/networks.tsx
View File

@ -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);
}

10
src/hooks/useAccountBalance.ts
View File

@ -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();

3
src/hooks/useDisplayedWallets.ts
View File

@ -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,

3
src/hooks/useInitializePage.ts
View File

@ -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<DydxNetwork>({
key: LocalStorageKey.SelectedNetwork,
defaultValue: DEFAULT_APP_ENVIRONMENT,
validateFn: isValidDydxNetwork, // backwards compatibility
});
useEffect(() => {

20
src/hooks/useMarketsData.ts
View File

@ -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;

11
src/hooks/useSquid.tsx
View File

@ -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<typeof useSquidContext>;
const SquidContext = createContext<SquidContextType>(undefined);
const SquidContext = createContext<SquidContextType | undefined>(undefined);
SquidContext.displayName = '0xSquid';
export const SquidProvider = ({ ...props }) => (

5
src/lib/abacus/filesystem.ts
View File

@ -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<string> {
if (path === ENDPOINTS_PATH) {
return JSON.stringify(NETWORK_ENDPOINTS);
}
return null;
}

8
src/lib/abacus/index.ts
View File

@ -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

2
src/lib/abacus/stateNotification.ts
View File

@ -76,7 +76,7 @@ class AbacusStateNotifier implements AbacusStateNotificationProtocol {
if (changes.has(Changes.accountBalances)) {
if (updatedState.account?.balances) {
const balances: Record<string, AccountBalance> = {}
const balances: Record<string, AccountBalance> = {};
for (const { k, v } of updatedState.account.balances.toArray()) {
balances[k] = v;
}

4
src/pages/trade/MarketSelectorAndStats.tsx
View File

@ -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 (
<Styled.Container className={className}>
<MarketsDropdown currentMarketId={currentMarketId} symbol={symbol} />
<MarketsDropdown currentMarketId={currentMarketId} symbol={id} />
<VerticalSeparator />

9
src/state/accountCalculators.ts
View File

@ -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<typeof getOnboardingGuards>) => {
@ -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;
}
);

7
src/state/app.ts
View File

@ -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,
}),
};

8
src/views/MarketDetails.tsx
View File

@ -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 = () => {
<Styled.Header>
<Styled.WrapRow>
<Styled.MarketTitle>
<AssetIcon symbol={symbol} />
<AssetIcon symbol={id} />
{name}
</Styled.MarketTitle>
{isTablet && <Styled.MarketLinks />}

4
src/views/MarketStatsDetails.tsx
View File

@ -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)
<Styled.Output
type={OutputType.Number}
value={value}
tag={symbol}
tag={id}
fractionDigits={LARGE_TOKEN_DECIMALS}
/>
);

8
src/views/MarketsDropdown.tsx
View File

@ -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 }) => (
<Styled.MarketName isFavorited={false}>
{/* TRCL-1693 <Icon iconName={IconName.Star} /> */}
<AssetIcon symbol={asset.symbol} />
<h2>{asset.name}</h2>
<Tag>{asset.symbol}</Tag>
<AssetIcon symbol={assetId} />
<h2>{id}</h2>
<Tag>{assetId}</Tag>
</Styled.MarketName>
),
},

8
src/views/PositionInfo.tsx
View File

@ -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}
/>

8
src/views/charts/DepthChart.tsx
View File

@ -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}
/>
),

4
src/views/dialogs/ClosePositionDialog.tsx
View File

@ -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: <CloseOrderHeader />,
slotIcon: <AssetIcon symbol={symbol} />,
slotIcon: <AssetIcon symbol={id} />,
},
[MobilePlaceOrderSteps.PreviewOrder]: {
title: (

4
src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx
View File

@ -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 (
<DetailsDialog
slotIcon={<Styled.AssetIcon symbol={asset.symbol} />}
slotIcon={<Styled.AssetIcon symbol={asset.id} />}
title={resources.typeStringKey && stringGetter({ key: resources.typeStringKey })}
items={detailItems}
setIsOpen={setIsOpen}

2
src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx
View File

@ -194,7 +194,7 @@ export const OrderDetailsDialog = ({ orderId, setIsOpen }: ElementProps) => {
return (
<DetailsDialog
slotIcon={<Styled.AssetIcon symbol={asset.symbol} />}
slotIcon={<Styled.AssetIcon symbol={asset.id} />}
title={!resources.typeStringKey ? '' : stringGetter({ key: resources.typeStringKey })}
slotFooter={
isAccountViewOnly ? null : isOrderStatusClearable(status) ? (

4
src/views/dialogs/OnboardingDialog/GenerateKeys.tsx
View File

@ -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,

8
src/views/dialogs/TradeDialog.tsx
View File

@ -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: <AssetIcon symbol={symbol} />,
slotBefore: <AssetIcon symbol={id} />,
}));
const [currentStep, setCurrentStep] = useState<MobilePlaceOrderSteps>(

4
src/views/forms/AccountManagementForms/TestnetDepositForm.tsx
View File

@ -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,
},

4
src/views/forms/ClosePositionForm.tsx
View File

@ -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 && <Tag>{symbol}</Tag>}
{id && <Tag>{id}</Tag>}
</>
}
decimals={stepSizeDecimals || TOKEN_DECIMALS}

8
src/views/forms/TradeForm/PositionPreview.tsx
View File

@ -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 (
<Styled.PositionPreviewContainer>
<Styled.YourPosition>
{!showNarrowVariation && <AssetIcon symbol={symbol} />}
{!showNarrowVariation && <AssetIcon symbol={id} />}
<span>
{stringGetter({
key: STRING_KEYS.YOUR_MARKET_POSITION,
params: {
MARKET: showNarrowVariation ? '' : <strong>{symbol ?? ''}</strong>,
MARKET: showNarrowVariation ? '' : <strong>{id ?? ''}</strong>,
},
})}
</span>
@ -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}
/>

14
src/views/forms/TradeForm/TradeSizeInputs.tsx
View File

@ -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}
>
<Icon iconName={IconName.Trade} />
{showUSDCInputOnTablet ? 'USD' : symbol}
{showUSDCInputOnTablet ? 'USD' : id}
</Styled.ToggleButton>
);
@ -105,10 +105,10 @@ export const TradeSizeInputs = () => {
onInput={onSizeInput}
label={
<>
<WithTooltip tooltip="order-amount" stringParams={{ SYMBOL: symbol ?? '' }} side="right">
<WithTooltip tooltip="order-amount" stringParams={{ SYMBOL: id ?? '' }} side="right">
{stringGetter({ key: STRING_KEYS.AMOUNT })}
</WithTooltip>
{symbol && <Tag>{symbol}</Tag>}
{id && <Tag>{id}</Tag>}
</>
}
slotRight={isTablet && inputToggleButton}
@ -126,11 +126,7 @@ export const TradeSizeInputs = () => {
decimals={tickSizeDecimals || USD_DECIMALS}
label={
<>
<WithTooltip
tooltip="order-amount-usd"
stringParams={{ SYMBOL: symbol ?? '' }}
side="right"
>
<WithTooltip tooltip="order-amount-usd" stringParams={{ SYMBOL: id ?? '' }} side="right">
{stringGetter({ key: STRING_KEYS.AMOUNT })}
</WithTooltip>
<Tag>USD</Tag>

18
src/views/forms/TransferForm.tsx
View File

@ -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: (
<Styled.InlineRow>
<AssetIcon symbol="DYDX" /> {stringGetter({ key: STRING_KEYS.DYDX_CHAIN })}
@ -283,7 +291,7 @@ export const TransferForm = ({
/>
<Styled.NetworkSelectMenu
label={stringGetter({ key: STRING_KEYS.NETWORK })}
value={CLIENT_NETWORK_CONFIGS[selectedNetwork].dydxChainId}
value={ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId}
slotTriggerAfter={null}
>
{networkOptions.map(({ chainId, label }) => (

16
src/views/menus/useGlobalCommands.tsx
View File

@ -129,15 +129,13 @@ export const useGlobalCommands = (): MenuConfig<string, string> => {
{
value: NavItems.NavigateToMarket,
label: 'Navigate to Market',
subitems: joinedPerpetualMarketsAndAssets.map(
({ market = '', name = '', symbol = '' }) => ({
value: market, // `${market}|${name}`,
slotBefore: <AssetIcon symbol={symbol} />,
label: name,
tag: symbol, // <abbr>{symbol}</abbr>,
onSelect: () => navigate(`/trade/${market}`),
})
),
subitems: joinedPerpetualMarketsAndAssets.map(({ market = '', name = '', id = '' }) => ({
value: market,
slotBefore: <AssetIcon symbol={id} />,
label: name,
tag: id,
onSelect: () => navigate(`/trade/${market}`),
})),
},
],
},

20
src/views/menus/useNetworks.tsx
View File

@ -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<DydxNetwork>[] => {
const stringGetter = useStringGetter();
return NETWORK_ENDPOINTS.environments.map(({ stringKey, environment }) => ({
key: environment,
label: stringGetter({ key: stringKey }),
value: environment,
export const useNetworks = (): MenuItem<DydxNetwork>[] =>
(AVAILABLE_ENVIRONMENTS.environments as DydxNetwork[]).map((dydxNetwork) => ({
key: dydxNetwork,
label: ENVIRONMENT_CONFIG_MAP[dydxNetwork].name,
value: dydxNetwork,
}));
};

10
src/views/tables/FillsTable.tsx
View File

@ -89,8 +89,8 @@ const getFillsTableColumnDef = ({
label: `${stringGetter({ key: STRING_KEYS.TYPE })} / ${stringGetter({
key: STRING_KEYS.AMOUNT,
})}`,
renderCell: ({ resources, size, stepSizeDecimals, asset: { symbol } }) => (
<TableCell stacked slotLeft={<Styled.AssetIcon symbol={symbol} />}>
renderCell: ({ resources, size, stepSizeDecimals, asset: { id } }) => (
<TableCell stacked slotLeft={<Styled.AssetIcon symbol={id} />}>
<span>
{resources.typeStringKey ? stringGetter({ key: resources.typeStringKey }) : null}
</span>
@ -161,7 +161,7 @@ const getFillsTableColumnDef = ({
}[orderSide],
})}
</Styled.Side>
<Output type={OutputType.Text} value={asset.symbol} />
<Output type={OutputType.Text} value={asset.id} />
</Styled.TableCell>
),
},
@ -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({

7
src/views/tables/FundingPaymentsTable.tsx
View File

@ -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}
/>
<Styled.Output
type={OutputType.Text}

6
src/views/tables/LiveTrades.tsx
View File

@ -43,7 +43,7 @@ export const LiveTrades = ({ className, histogramSide = 'left' }: StyleProps) =>
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) => (
<Styled.SizeOutput
type={OutputType.Asset}
@ -111,7 +111,7 @@ export const LiveTrades = ({ className, histogramSide = 'left' }: StyleProps) =>
},
!isTablet && timeColumn,
].filter(isTruthy);
}, [stepSizeDecimals, tickSizeDecimals, symbol, histogramSide, stringGetter]);
}, [stepSizeDecimals, tickSizeDecimals, id, histogramSide, stringGetter]);
return (
<Styled.LiveTradesTable

6
src/views/tables/MarketsTable.tsx
View File

@ -37,9 +37,7 @@ export const MarketsTable = ({ className }: { className?: string }) => {
columnKey: 'market',
getCellValue: (row) => row.market,
label: stringGetter({ key: STRING_KEYS.MARKET }),
renderCell: ({ asset, id }) => (
<Styled.MarketTableCell asset={asset} marketId={id} />
),
renderCell: ({ asset, id }) => <Styled.MarketTableCell asset={asset} marketId={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}
/>
<Output
type={OutputType.Fiat}

4
src/views/tables/PositionsTable.tsx
View File

@ -72,13 +72,13 @@ const getPositionsTableColumnDef = ({
getCellValue: (row) => row.id,
label: stringGetter({ key: STRING_KEYS.DETAILS }),
renderCell: ({ id, asset, leverage, resources, size }) => (
<TableCell stacked slotLeft={<Styled.AssetIcon symbol={asset?.symbol} />}>
<TableCell stacked slotLeft={<Styled.AssetIcon symbol={asset?.id} />}>
<Styled.HighlightOutput
type={OutputType.Asset}
value={size?.current}
fractionDigits={TOKEN_DECIMALS}
showSign={ShowSign.None}
tag={asset?.symbol}
tag={asset?.id}
/>
<Styled.InlineRow>
<Styled.PositionSide>