bump v4-client and abacus

package.json

@@ -37,9 +37,9 @@
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^0.5.4",
+    "@dydxprotocol/v4-abacus": "^0.4.28",
-    "@dydxprotocol/v4-client-js": "^0.36.1",
+    "@dydxprotocol/v4-client-js": "^0.35.0",
-    "@dydxprotocol/v4-localization": "^0.1.11",
+    "@dydxprotocol/v4-localization": "^0.1.5",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-collapsible": "^1.0.3",

pnpm-lock.yaml

@@ -27,14 +27,14 @@ dependencies:
     specifier: ^0.31.0
     version: 0.31.0
   '@dydxprotocol/v4-abacus':
-    specifier: ^0.5.4
+    specifier: ^0.4.28
-    version: 0.5.4
+    version: 0.4.28
   '@dydxprotocol/v4-client-js':
-    specifier: ^0.36.1
+    specifier: ^0.35.0
-    version: 0.36.1
+    version: 0.35.0
   '@dydxprotocol/v4-localization':
-    specifier: ^0.1.11
+    specifier: ^0.1.5
-    version: 0.1.11
+    version: 0.1.5
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -979,12 +979,12 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/v4-abacus@0.5.4:
+  /@dydxprotocol/v4-abacus@0.4.28:
-    resolution: {integrity: sha512-LMwmyXCih2bBdLX3vO5OwbdGWg3oZ8WSGj+4nqr8tn/bn1qCSKdYdZZ9/U20Yir2rMAcoC0jmznMcBwthlSp/w==}
+    resolution: {integrity: sha512-RQGTXI7q4HAXDmlUpDhpJDLN8C0dFMgKHzFITK1Sz3KnLb3mkkpqEU1D8VIn/hB7ngt+equMsLFSkUwzXCzgdA==}
     dev: false
 
-  /@dydxprotocol/v4-client-js@0.36.1:
+  /@dydxprotocol/v4-client-js@0.35.0:
-    resolution: {integrity: sha512-KJ3MtWI61wmm+xZtXQd7/hYKIoVFG32TRdyyVaXXO8vpW9Oqd0JD8QSM/wuegkciAh5YmP/BrDzYuu77zHO6yg==}
+    resolution: {integrity: sha512-H+0/tOBVqyWx2JQ4jUFdJOlFof0NqN1u9vzKJ2h3Nv5KNteSPd59eiywoz+3J0jlmkREw0Jzg9CS0bLwzYVLvA==}
     dependencies:
       '@cosmjs/amino': 0.30.1
       '@cosmjs/encoding': 0.31.1
@@ -1010,8 +1010,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@0.1.11:
+  /@dydxprotocol/v4-localization@0.1.5:
-    resolution: {integrity: sha512-eW88t8KJuDT0fNEgaw615+n3gEYxDZYPeHhdBYquVDXjnkhLNznaH8ftmlLPVPyfu7o5aFeU/cw8ZiqRrf/Stw==}
+    resolution: {integrity: sha512-fiSHWrG8E2HuXkCzWsqyekntlI13hBRACrP0vaYudeSulw+ScGeAqZ5xp9/cANF6PP+H3z1yciNCZOH3OwSDwA==}
     dev: false
 
   /@dydxprotocol/v4-proto@0.2.1:

src/constants/abacus.ts

@@ -40,10 +40,6 @@ export type AbacusFileSystemProtocol = Omit<
   Abacus.exchange.dydx.abacus.protocols.FileSystemProtocol,
   '__doNotUseOrImplementIt'
 >;
-export type AbacusTrackingProtocol = Omit<
-  Abacus.exchange.dydx.abacus.protocols.TrackingProtocol,
-  '__doNotUseOrImplementIt'
->;
 
 export type FileLocation = Abacus.exchange.dydx.abacus.protocols.FileLocation;
 export type ThreadingType = Abacus.exchange.dydx.abacus.protocols.ThreadingType;
@@ -122,7 +118,6 @@ export const InputSelectionOption = Abacus.exchange.dydx.abacus.output.input.Sel
 
 // ------ Wallet ------ //
 export type Wallet = Abacus.exchange.dydx.abacus.output.Wallet;
-export type AccountBalance = Abacus.exchange.dydx.abacus.output.AccountBalance;
 export type Subaccount = Abacus.exchange.dydx.abacus.output.Subaccount;
 export type SubaccountPosition = Abacus.exchange.dydx.abacus.output.SubaccountPosition;
 export type SubaccountOrder = Abacus.exchange.dydx.abacus.output.SubaccountOrder;
@@ -189,10 +184,6 @@ export type HumanReadablePlaceOrderPayload =
   Abacus.exchange.dydx.abacus.state.manager.HumanReadablePlaceOrderPayload;
 export type HumanReadableCancelOrderPayload =
   Abacus.exchange.dydx.abacus.state.manager.HumanReadableCancelOrderPayload;
-export type HumanReadableWithdrawPayload =
-  Abacus.exchange.dydx.abacus.state.manager.HumanReadableWithdrawPayload;
-export type HumanReadableTransferPayload =
-  Abacus.exchange.dydx.abacus.state.manager.HumanReadableTransferPayload;
 
 // ------ Helpers ------ //
 export const AbacusHelper = Abacus.exchange.dydx.abacus.utils.AbacusHelper;

src/constants/analytics.ts

@@ -71,7 +71,6 @@ export enum AnalyticsEvent {
 
   // Transfers
   TransferFaucet = 'TransferFaucet',
-  TransferFaucetConfirmed = 'TransferFaucetConfirmed',
   TransferDeposit = 'TransferDeposit',
   TransferWithdraw = 'TransferWithdraw',
 
@@ -79,7 +78,6 @@ export enum AnalyticsEvent {
   TradeOrderTypeSelected = 'TradeOrderTypeSelected',
   TradePlaceOrder = 'TradePlaceOrder',
   TradePlaceOrderConfirmed = 'TradePlaceOrderConfirmed',
-  TradeCancelOrder = 'TradeCancelOrder',
   TradeCancelOrderConfirmed = 'TradeCancelOrderConfirmed',
 }
 
@@ -135,13 +133,6 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
     : // Transfers
     T extends AnalyticsEvent.TransferFaucet
     ? {}
-    : T extends AnalyticsEvent.TransferFaucetConfirmed
-    ? {
-        /** roundtrip time between user placing an order and confirmation from indexer (client → validator → indexer → client) */
-        roundtripMs: number;
-        /** URL/IP of node the order was sent to */
-        validatorUrl: string;
-      }
     : T extends AnalyticsEvent.TransferDeposit
     ? {}
     : T extends AnalyticsEvent.TransferWithdraw
@@ -160,15 +151,13 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
         /** roundtrip time between user placing an order and confirmation from indexer (client → validator → indexer → client) */
         roundtripMs: number;
         /** URL/IP of node the order was sent to */
-        validatorUrl: string;
+        validator: string;
       }
-    : T extends AnalyticsEvent.TradeCancelOrder
-    ? {}
     : T extends AnalyticsEvent.TradeCancelOrderConfirmed
     ? {
         /** roundtrip time between user canceling an order and confirmation from indexer (client → validator → indexer → client) */
         roundtripMs: number;
         /** URL/IP of node the order was sent to */
-        validatorUrl: string;
+        validator: string;
       }
     : never;

src/constants/localization.ts

@@ -88,3 +88,19 @@ export type TooltipStrings = {
     learnMoreLink?: string;
   };
 };
+
+export const ORDER_ERROR_CODE_MAP: { [key: number]: string } = {
+  2000: STRING_KEYS['2000_FILL_OR_KILL_ORDER_COULD_NOT_BE_FULLY_FILLED'],
+  2001: STRING_KEYS['2001_REDUCE_ONLY_WOULD_INCREASE_POSITION_SIZE'],
+  2002: STRING_KEYS['2002_REDUCE_ONLY_WOULD_CHANGE_POSITION_SIDE'],
+  2003: STRING_KEYS['2003_POST_ONLY_WOULD_CROSS_MAKER_ORDER'],
+  3000: STRING_KEYS['3000_INVALID_ORDER_FLAGS'],
+  3001: STRING_KEYS['3001_INVALID_STATEFUL_ORDER_GOOD_TIL_BLOCK_TIME'],
+  3002: STRING_KEYS['3002_STATEFUL_ORDERS_CANNOT_REQUIRE_IMMEDIATE_EXECUTION'],
+  3003: STRING_KEYS['3003_TIME_EXCEEDS_GOOD_TIL_BLOCK_TIME'],
+  3004: STRING_KEYS['3004_GOOD_TIL_BLOCK_TIME_EXCEEDS_STATEFUL_ORDER_TIME_WINDOW'],
+  3005: STRING_KEYS['3005_STATEFUL_ORDER_ALREADY_EXISTS'],
+  3006: STRING_KEYS['3006_STATEFUL_ORDER_DOES_NOT_EXIST'],
+  3007: STRING_KEYS['3007_STATEFUL_ORDER_COLLATERALIZATION_CHECK_FAILED'],
+  3008: STRING_KEYS['3008_STATEFUL_ORDER_PREVIOUSLY_CANCELLED'],
+};

src/constants/trade.ts

@@ -27,7 +27,7 @@ export enum PositionSide {
   Short = 'SHORT',
 }
 
-export const UNCOMMITTED_ORDER_TIMEOUT_MS = 10_000;
+export const UNCOMMITTED_ORDER_TIMEOUT = 10_000;
 
 export const ORDER_SIDE_STRINGS = {
   [OrderSide.BUY]: STRING_KEYS.BUY,

src/constants/wallets.ts

@@ -339,12 +339,12 @@ export type EvmAddress = `0x${string}`;
 export type DydxAddress = `dydx${string}`;
 
 export const DYDX_CHAIN_INFO: Parameters<typeof suggestChain>[0] = {
-  rpc: 'https://dydx-testnet-archive.allthatnode.com:26657',
+  rpc: '13.59.4.93:26657',
-  rest: 'https://dydx-testnet-archive.allthatnode.com:1317',
+  rest: '13.59.4.93:1317',
-  chainId: 'dydx-testnet-3',
+  chainId: 'dydx-testnet-2',
   chainName: 'dYdX Public Testnet',
   chainSymbolImageUrl:
-    'https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/dydx-testnet-3/chain.png',
+    'https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/dydx-testnet-2/chain.png',
   bech32Config: {
     bech32PrefixAccPub: 'dydxpub',
     bech32PrefixValPub: 'dydxvaloperpub',
@@ -383,18 +383,12 @@ export const DYDX_CHAIN_INFO: Parameters<typeof suggestChain>[0] = {
   features: [],
 };
 
-// TODO: export this type from abacus instead
 export enum DydxChainAsset {
-  USDC = 'usdc',
+  USDC = 'USDC',
-  DYDX = 'dydx',
+  DYDX = 'Dv4TNT',
 }
 
 export const DYDX_CHAIN_ASSET_COIN_DENOM: Record<DydxChainAsset, string> = {
   [DydxChainAsset.USDC]: USDC_DENOM,
   [DydxChainAsset.DYDX]: DYDX_DENOM,
 };
-
-export const DYDX_CHAIN_ASSET_TAGS: Record<DydxChainAsset, string> = {
-  [DydxChainAsset.USDC]: 'USDC',
-  [DydxChainAsset.DYDX]: 'Dv4TNT',
-};

src/hooks/useAccountBalance.ts

@@ -1,12 +1,10 @@
 import { useCallback } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { useBalance } from 'wagmi';
 import { StargateClient } from '@cosmjs/stargate';
 import { useQuery } from 'react-query';
 import { formatUnits } from 'viem';
 
-import { USDC_DENOM, DYDX_DENOM } from '@dydxprotocol/v4-client-js';
-
 import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks';
 import { QUANTUM_MULTIPLIER } from '@/constants/numbers';
 import { EvmAddress } from '@/constants/wallets';
@@ -14,10 +12,11 @@ import { EvmAddress } from '@/constants/wallets';
 import { convertBech32Address } from '@/lib/addressUtils';
 import { MustBigNumber } from '@/lib/numbers';
 
-import { getBalances } from '@/state/accountSelectors';
 import { getSelectedNetwork } from '@/state/appSelectors';
 
 import { useAccounts } from './useAccounts';
+import { usePollNativeTokenBalance } from './usePollNativeTokenBalance';
+import { usePollUSDCBalance } from './usePollUSDCBalance';
 
 type UseAccountBalanceProps = {
   // Token Items
@@ -51,7 +50,6 @@ export const useAccountBalance = ({
   const { evmAddress, dydxAddress } = useAccounts();
 
   const selectedNetwork = useSelector(getSelectedNetwork);
-  const balances = useSelector(getBalances, shallowEqual);
   const evmChainId = Number(CLIENT_NETWORK_CONFIGS[selectedNetwork].ethereumChainId);
 
   const evmQuery = useBalance({
@@ -94,12 +92,12 @@ export const useAccountBalance = ({
   const { formatted: evmBalance } = evmQuery.data || {};
   const balance = !assetSymbol ? '0' : isCosmosChain ? cosmosQuery.data : evmBalance;
 
-  const nativeTokenCoinBalance = balances?.[DYDX_DENOM];
+  const nativeTokenCoinBalance = usePollNativeTokenBalance({ dydxAddress });
   const nativeTokenBalance = MustBigNumber(nativeTokenCoinBalance?.amount)
     .div(QUANTUM_MULTIPLIER)
     .toNumber();
-  
+
-  const usdcCoinBalance = balances?.[USDC_DENOM];
+  const usdcCoinBalance = usePollUSDCBalance({ dydxAddress });
   const usdcBalance = MustBigNumber(usdcCoinBalance?.amount).div(QUANTUM_MULTIPLIER).toNumber();
 
   return {

src/hooks/useAccounts.tsx

@@ -8,7 +8,10 @@ import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/co
 import { LocalStorageKey, LOCAL_STORAGE_VERSIONS } from '@/constants/localStorage';
 import { DydxAddress, EvmAddress, PrivateInformation } from '@/constants/wallets';
 
-import { setOnboardingState, setOnboardingGuard } from '@/state/account';
+import {
+  setOnboardingState,
+  setOnboardingGuard,
+} from '@/state/account';
 
 import abacusStateManager from '@/lib/abacus';
 import { log } from '@/lib/telemetry';
@@ -219,9 +222,9 @@ const useAccountsContext = () => {
   // abacus
   // TODO: useAbacus({ dydxAddress })
   useEffect(() => {
-    if (dydxAddress) abacusStateManager.setAccount(localDydxWallet);
+    if (dydxAddress) abacusStateManager.setAccount(dydxAddress);
     else abacusStateManager.attemptDisconnectAccount();
-  }, [localDydxWallet]);
+  }, [dydxAddress]);
 
   // clear subaccounts when no dydxAddress is set
   useEffect(() => {

src/hooks/useLocalNotifications.tsx

@@ -6,7 +6,7 @@ import { LocalStorageKey } from '@/constants/localStorage';
 import { type TransferNotifcation } from '@/constants/notifications';
 
 import { useAccounts } from '@/hooks/useAccounts';
-import { SQUID_ERROR_TYPES, useSquid } from '@/hooks/useSquid';
+import { useSquid } from '@/hooks/useSquid';
 import { useLocalStorage } from './useLocalStorage';
 
 const LocalNotificationsContext = createContext<
@@ -66,14 +66,11 @@ const useLocalNotificationsContext = () => {
       } of transferNotifications) {
         try {
           if (currentStatus && currentStatus?.squidTransactionStatus !== 'ongoing') continue;
-
+  
           const status = await squid?.getStatus({ transactionId: txHash, toChainId, fromChainId });
           if (status) statuses[txHash] = status;
         } catch (error) {
-          // ignore not found errors since the route might not be available yet
+          console.error(error);
-          if (error?.errors?.length && error.errors[0].errorType !== SQUID_ERROR_TYPES.NotFoundError) {
-            statuses[txHash] = error;
-          }
         }
       }
       return statuses;

src/hooks/useMarketsData.ts

@@ -29,7 +29,7 @@ export const useMarketsData = (
 
   const markets = useMemo(() => {
     return Object.values(allPerpetualMarkets)
-      .filter((market) => allAssets[market?.assetId]) // Filter out markets with no asset information
+      .filter(({ assetId }) => allAssets[assetId]) // Filter out markets with no asset information
       .map((marketData) => ({
         asset: allAssets[marketData.assetId],
         tickSizeDecimals: marketData.configs?.tickSizeDecimals,

src/hooks/useNotificationTypes.tsx

@@ -1,9 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import styled, { type AnyStyledComponent } from 'styled-components';
 import { useSelector, shallowEqual, useDispatch } from 'react-redux';
 import { groupBy } from 'lodash';
 
-import { AlertType } from '@/constants/alerts';
 import { AbacusOrderStatus, ORDER_SIDES, ORDER_STATUS_STRINGS } from '@/constants/abacus';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
@@ -12,7 +10,6 @@ import { ORDER_SIDE_STRINGS, TRADE_TYPE_STRINGS, TradeTypes } from '@/constants/
 
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
 
-import { AlertMessage } from '@/components/AlertMessage';
 import { Icon, IconName } from '@/components/Icon';
 import { Output, OutputType } from '@/components/Output';
 import { TransferStatusToast } from '@/views/TransferStatus';
@@ -122,36 +119,19 @@ export const notificationTypes = [
           const { toChainId, status, txHash, toAmount } = transfer;
           const finished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
           const type = toChainId === TESTNET_CHAIN_ID ? 'deposit' : 'withdraw';
-          // @ts-ignore status.errors is not in the type definition but can be returned
-          const error = status?.errors?.length ? status?.errors[0] : status?.error;
-
-          // TODO: confirm with design what the description should be
-          const description = (
-            <div>
-              <Styled.TransferText>
-                {type === 'deposit' ? 'Deposit of ' : 'Withdraw of '}
-                <Output type={OutputType.Fiat} value={toAmount} />
-              </Styled.TransferText>
-
-              {error && (
-                <Styled.ErrorMessage type={AlertType.Error}>
-                  {stringGetter({
-                    key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
-                    params: {
-                      ERROR_MESSAGE: error.message || stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }),
-                    },
-                  })}
-                </Styled.ErrorMessage>
-              )}
-            </div>
-          );
 
           trigger(
             txHash,
             {
               icon: <Icon iconName={finished ? IconName.Transfer : IconName.Clock} />,
               title: stringGetter({ key: getTitleStringKey(type, finished) }),
-              description: description,
+              // TODO: confirm with design what the description should be
+              description: (
+                <>
+                  <span>{type === 'deposit' ? 'Deposit of ' : 'Withdraw of'}</span>
+                  <Output type={OutputType.Fiat} value={toAmount} />
+                </>
+              ),
               customContent: (
                 <TransferStatusToast
                   toAmount={transfer.toAmount}
@@ -159,12 +139,7 @@ export const notificationTypes = [
                   status={transfer.status}
                 />
               ),
-              customMenuContent: !finished && (
+              customMenuContent: !finished && <TransferStatusSteps status={transfer.status} />,
-                <div>
-                  {description}
-                  <TransferStatusSteps status={transfer.status} />
-                </div>
-              ),
               toastSensitivity: 'foreground',
             },
             []
@@ -174,15 +149,3 @@ export const notificationTypes = [
     },
   },
 ] satisfies NotificationTypeConfig[];
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.TransferText = styled.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5ch;
-`
-
-Styled.ErrorMessage = styled.div`
-  max-width: 13rem;
-`;

src/hooks/useOnLastOrderIndexed.ts

@@ -1,26 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-
-import { getLatestOrderClientId } from '@/state/accountSelectors';
-
-/**
- * @description This hook will fire a callback when the latest order has been updated to a non-pending state from the Indexer.
- * @param { callback: () => void }
- */
-export const useOnLastOrderIndexed = ({ callback }: { callback: () => void }) => {
-  const [unIndexedClientId, setUnIndexedClientId] = useState<number | undefined>();
-  const latestOrderClientId = useSelector(getLatestOrderClientId);
-
-  useEffect(() => {
-    if (unIndexedClientId) {
-      if (unIndexedClientId === latestOrderClientId) {
-        callback();
-        setUnIndexedClientId(undefined);
-      }
-    }
-  }, [callback, latestOrderClientId, unIndexedClientId]);
-
-  return {
-    setUnIndexedClientId,
-  };
-};

src/hooks/usePollNativeTokenBalance.ts

@@ -0,0 +1,31 @@
+import { useQuery } from 'react-query';
+
+import { useAccounts } from '@/hooks';
+
+import { DydxAddress } from '@/constants/wallets';
+import { DYDX_DENOM } from '@dydxprotocol/v4-client-js';
+
+const ACCOUNT_BALANCE_POLLING_INTERVAL = 60_000;
+
+export const usePollNativeTokenBalance = ({
+  dydxAddress,
+  interval = ACCOUNT_BALANCE_POLLING_INTERVAL,
+}: {
+  dydxAddress?: DydxAddress;
+  interval?: number;
+}) => {
+  const { getAccountBalance } = useAccounts();
+
+  const { data } = useQuery({
+    enabled: dydxAddress !== undefined,
+    queryKey: ['usePollNativeTokenBalance', { dydxAddress }],
+    queryFn: async () => {
+      if (!dydxAddress) return;
+      return await getAccountBalance({ dydxAddress, denom: DYDX_DENOM });
+    },
+    refetchInterval: interval,
+    staleTime: interval,
+  });
+
+  return data;
+};

src/hooks/usePollUSDCBalance.ts

@@ -0,0 +1,30 @@
+import { useQuery } from 'react-query';
+
+import { useAccounts } from '@/hooks';
+
+import { DydxAddress } from '@/constants/wallets';
+
+const ACCOUNT_BALANCE_POLLING_INTERVAL = 60_000;
+
+export const usePollUSDCBalance = ({
+  dydxAddress,
+  interval = ACCOUNT_BALANCE_POLLING_INTERVAL,
+}: {
+  dydxAddress?: DydxAddress;
+  interval?: number;
+}) => {
+  const { getAccountBalance } = useAccounts();
+
+  const { data } = useQuery({
+    enabled: dydxAddress !== undefined,
+    queryKey: ['usePollUSDCBalance', { dydxAddress }],
+    queryFn: async () => {
+      if (!dydxAddress) return;
+      return await getAccountBalance({ dydxAddress });
+    },
+    refetchInterval: interval,
+    staleTime: interval,
+  });
+
+  return data;
+};

src/hooks/useSelectedNetwork.ts

@@ -1,13 +1,15 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { DialogTypes } from '@/constants/dialogs';
 import { LocalStorageKey } from '@/constants/localStorage';
-import { DEFAULT_APP_ENVIRONMENT, DydxNetwork } from '@/constants/networks';
+import { CLIENT_NETWORK_CONFIGS, DEFAULT_APP_ENVIRONMENT, DydxNetwork } from '@/constants/networks';
 
 import { useAccounts, useLocalStorage } from '@/hooks';
 
 import { setSelectedNetwork } from '@/state/app';
 import { getSelectedNetwork } from '@/state/appSelectors';
+import { openDialog } from '@/state/dialogs';
 
 export const useSelectedNetwork = (): {
   switchNetwork: (network: DydxNetwork) => void;
@@ -22,6 +24,17 @@ export const useSelectedNetwork = (): {
     defaultValue: DEFAULT_APP_ENVIRONMENT,
   });
 
+  useEffect(() => {
+    if (
+      import.meta.env.MODE === 'production' &&
+      CLIENT_NETWORK_CONFIGS[selectedNetwork].dydxChainId === 'dydx-testnet-3'
+    ) {
+      dispatch(
+        openDialog({ type: DialogTypes.ExchangeOffline, dialogProps: { preventClose: true } })
+      );
+    }
+  }, [selectedNetwork]);
+
   const switchNetwork = useCallback(
     (network: DydxNetwork) => {
       disconnect();

src/hooks/useSquid.tsx

@@ -1,17 +1,14 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client-js';
 import { Squid } from '@0xsquid/sdk';
 
-import { CLIENT_NETWORK_CONFIGS, isDydxV4Network } from '@/constants/networks';
+import { CLIENT_NETWORK_CONFIGS, DydxV4Network, isDydxV4Network } from '@/constants/networks';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
 
 export const NATIVE_TOKEN_ADDRESS = "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE";
 
-export enum SQUID_ERROR_TYPES {
-  NotFoundError = 'NotFoundError',
-}
-
 const useSquidContext = () => {
   const selectedNetwork = useSelector(getSelectedNetwork);
   const [_, setInitialized] = useState(false);

src/hooks/useSubaccount.tsx

@@ -1,5 +1,5 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { shallowEqual, useSelector, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import type { Nullable } from '@dydxprotocol/v4-abacus';
 import Long from 'long';
 import type { IndexedTx } from '@cosmjs/stargate';
@@ -7,35 +7,47 @@ import type { EncodeObject, Coin } from '@cosmjs/proto-signing';
 import { Method } from '@cosmjs/tendermint-rpc';
 
 import {
-  type LocalWallet,
+  LocalWallet,
+  OrderExecution,
+  OrderFlags,
+  OrderSide,
+  OrderTimeInForce,
+  OrderType,
   SubaccountClient,
   DYDX_DENOM,
   USDC_DENOM,
+  GAS_PRICE_DYDX_DENOM,
 } from '@dydxprotocol/v4-client-js';
 
 import type {
-  AccountBalance,
+  HumanReadableCancelOrderPayload,
   HumanReadablePlaceOrderPayload,
-  ParsingError,
   SubAccountHistoricalPNLs,
 } from '@/constants/abacus';
 
 import { AMOUNT_RESERVED_FOR_GAS_USDC } from '@/constants/account';
 import { AnalyticsEvent } from '@/constants/analytics';
+import { ORDER_ERROR_CODE_MAP } from '@/constants/localization';
 import { QUANTUM_MULTIPLIER } from '@/constants/numbers';
+import { UNCOMMITTED_ORDER_TIMEOUT } from '@/constants/trade';
 import { DydxAddress } from '@/constants/wallets';
 
-import { setSubaccount, setHistoricalPnl, removeUncommittedOrderClientId } from '@/state/account';
+import {
-import { getBalances } from '@/state/accountSelectors';
+  addUncommittedOrderClientId,
+  removeUncommittedOrderClientId,
+  setSubaccount,
+  setHistoricalPnl,
+} from '@/state/account';
 
 import abacusStateManager from '@/lib/abacus';
 import { track } from '@/lib/analytics';
+import { StatefulOrderError } from '@/lib/errors';
 import { MustBigNumber } from '@/lib/numbers';
 import { log } from '@/lib/telemetry';
 
 import { useAccounts } from './useAccounts';
 import { useDydxClient } from './useDydxClient';
-
+import { usePollUSDCBalance } from './usePollUSDCBalance';
 
 type SubaccountContextType = ReturnType<typeof useSubaccountContext>;
 const SubaccountContext = createContext<SubaccountContextType>({} as SubaccountContextType);
@@ -71,8 +83,12 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
   const {
     depositToSubaccount,
     withdrawFromSubaccount,
+    simulateWithdrawFromSubaccount,
     transferFromSubaccountToAddress,
     transferNativeToken,
+    simulateTransferNativeToken,
+    placeOrderForSubaccount,
+    cancelOrderForSubaccount,
     sendSquidWithdrawFromSubaccount,
   } = useMemo(
     () => ({
@@ -94,6 +110,31 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
         amount: number;
       }) => await compositeClient?.withdrawFromSubaccount(subaccountClient, amount),
 
+      simulateWithdrawFromSubaccount: async ({
+        subaccountClient,
+        amount,
+        recipient,
+      }: {
+        subaccountClient: SubaccountClient;
+        amount: number;
+        recipient?: string;
+      }) => {
+        return await compositeClient?.simulate(
+          subaccountClient?.wallet,
+          () =>
+            new Promise((resolve) => {
+              const msg = compositeClient?.withdrawFromSubaccountMessage(
+                subaccountClient,
+                amount,
+                recipient
+              );
+
+              resolve([msg]);
+            }),
+          undefined
+        );
+      },
+
       transferFromSubaccountToAddress: async ({
         subaccountClient,
         assetId = 0,
@@ -144,6 +185,125 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
           Method.BroadcastTxCommit
         ),
 
+      simulateTransferNativeToken: async ({
+        subaccountClient,
+        amount,
+        recipient,
+      }: {
+        subaccountClient: SubaccountClient;
+        amount: number;
+        recipient: string;
+      }) =>
+        await compositeClient?.simulate(
+          subaccountClient?.wallet,
+          () =>
+            new Promise((resolve) => {
+              const msg = compositeClient?.validatorClient.post.composer.composeMsgSendToken(
+                subaccountClient.address,
+                recipient,
+                DYDX_DENOM,
+                Long.fromNumber(amount * QUANTUM_MULTIPLIER)
+              );
+
+              resolve([msg]);
+            }),
+          GAS_PRICE_DYDX_DENOM,
+          undefined
+        ),
+
+      placeOrderForSubaccount: async ({
+        subaccount,
+        marketId,
+        type,
+        side,
+        price,
+        triggerPrice,
+        size,
+        clientId,
+        timeInForce,
+        goodTilTimeInSeconds,
+        execution,
+        postOnly,
+        reduceOnly,
+      }: {
+        subaccount: SubaccountClient;
+        marketId: string;
+        type: OrderType;
+        side: OrderSide;
+        price: number;
+        triggerPrice: Nullable<number>;
+        size: number;
+        clientId: number;
+        timeInForce: OrderTimeInForce;
+        goodTilTimeInSeconds: number;
+        execution: OrderExecution;
+        postOnly: boolean;
+        reduceOnly: boolean;
+      }) => {
+        const startTimestamp = performance.now();
+
+        const result = await compositeClient?.placeOrder(
+          subaccount,
+          marketId,
+          type,
+          side,
+          price,
+          size,
+          clientId,
+          timeInForce,
+          goodTilTimeInSeconds,
+          execution,
+          postOnly,
+          reduceOnly,
+          triggerPrice ?? undefined
+        );
+
+        const endTimestamp = performance.now();
+
+        track(AnalyticsEvent.TradePlaceOrderConfirmed, {
+          roundtripMs: endTimestamp - startTimestamp,
+          validator: compositeClient!.validatorClient.config.restEndpoint,
+        });
+
+        return result;
+      },
+
+      cancelOrderForSubaccount: async ({
+        subaccount,
+        clientId,
+        clobPairId,
+        orderFlags,
+        goodTilBlock,
+        goodTilBlockTime,
+      }: {
+        subaccount: SubaccountClient;
+        clientId: number;
+        orderFlags: OrderFlags;
+        clobPairId: number;
+        goodTilBlock?: number;
+        goodTilBlockTime?: number;
+      }) => {
+        const startTimestamp = performance.now();
+
+        const result = await compositeClient?.cancelOrder(
+          subaccount,
+          clientId,
+          orderFlags,
+          clobPairId,
+          goodTilBlock,
+          goodTilBlockTime
+        );
+
+        const endTimestamp = performance.now();
+
+        track(AnalyticsEvent.TradeCancelOrderConfirmed, {
+          roundtripMs: endTimestamp - startTimestamp,
+          validator: compositeClient!.validatorClient.config.restEndpoint,
+        });
+
+        return result;
+      },
+
       sendSquidWithdrawFromSubaccount: async ({
         subaccountClient,
         amount,
@@ -193,10 +353,10 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
 
   // ------ Deposit/Withdraw Methods ------ //
   const depositFunds = useCallback(
-    async (balance: AccountBalance) => {
+    async (balance?: Coin) => {
       if (!localDydxWallet) return;
 
-      const amountAfterDust = MustBigNumber(balance.amount)
+      const amountAfterDust = MustBigNumber(balance?.amount)
         .minus(AMOUNT_RESERVED_FOR_GAS_USDC) // keep 0.1 USDC in user's wallet for gas
         .toString();
 
@@ -210,14 +370,11 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
     [localDydxWallet, depositToSubaccount]
   );
 
-  const balances = useSelector(getBalances, shallowEqual);
+  const balance = usePollUSDCBalance({ dydxAddress });
-  const usdcCoinBalance = balances?.[USDC_DENOM];
 
   useEffect(() => {
-    if (usdcCoinBalance) {
+    depositFunds(balance);
-      depositFunds(usdcCoinBalance);
+  }, [balance]);
-    }
-  }, [usdcCoinBalance]);
 
   const deposit = useCallback(
     async (amount: Long) => {
@@ -256,6 +413,30 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
     [subaccountClient, transferFromSubaccountToAddress, transferNativeToken]
   );
 
+  const simulateTransfer = useCallback(
+    async (amount: number, recipient: string, coinDenom: string) => {
+      if (!subaccountClient) {
+        return;
+      }
+
+      return await (coinDenom === USDC_DENOM
+        ? simulateWithdrawFromSubaccount
+        : simulateTransferNativeToken)({ subaccountClient, amount, recipient });
+    },
+    [subaccountClient, simulateWithdrawFromSubaccount, simulateTransferNativeToken]
+  );
+
+  const simulateWithdraw = useCallback(
+    async (amount: number) => {
+      if (!subaccountClient) {
+        return;
+      }
+
+      return await simulateWithdrawFromSubaccount({ subaccountClient, amount });
+    },
+    [subaccountClient, simulateWithdrawFromSubaccount]
+  );
+
   const sendSquidWithdraw = useCallback(
     async (amount: number, payload: string) => {
       if (!subaccountClient) {
@@ -286,41 +467,101 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
       onSuccess,
     }: {
       isClosePosition?: boolean;
-      onError?: (onErrorParams?: { errorStringKey?: Nullable<string> }) => void;
+      onError?: (onErrorParams?: { errorStringKey?: string }) => void;
-      onSuccess?: (placeOrderPayload: Nullable<HumanReadablePlaceOrderPayload>) => void;
+      onSuccess?: () => void;
     }) => {
-      const callback = (
+      let orderParams: Nullable<HumanReadablePlaceOrderPayload>;
-        success: boolean,
-        parsingError?: Nullable<ParsingError>,
-        data?: Nullable<HumanReadablePlaceOrderPayload>
-      ) => {
-        if (success) {
-          onSuccess?.(data);
-        } else {
-          onError?.({ errorStringKey: parsingError?.stringKey });
 
-          if (data?.clientId !== undefined) {
+      if (!subaccountClient) return;
-            dispatch(removeUncommittedOrderClientId(data.clientId));
+
-          }
+      try {
+        orderParams = isClosePosition
+          ? abacusStateManager.closePositionPayload()
+          : abacusStateManager.placeOrderPayload();
+
+        if (!orderParams) {
+          throw new Error('Missing order params');
         }
-      };
 
-      let placeOrderParams;
+        const {
+          marketId,
+          type,
+          side,
+          price,
+          triggerPrice,
+          size,
+          clientId,
+          timeInForce,
+          goodTilTimeInSeconds,
+          execution,
+          postOnly,
+          reduceOnly,
+        } = orderParams;
 
-      if (isClosePosition) {
+        dispatch(addUncommittedOrderClientId(clientId));
-        placeOrderParams = abacusStateManager.closePosition(callback);
+
-      } else {
+        // Remove uncommitted order after timeout if it hasn't already been removed
-        placeOrderParams = abacusStateManager.placeOrder(callback);
+        setTimeout(() => {
+          dispatch(removeUncommittedOrderClientId(clientId));
+        }, UNCOMMITTED_ORDER_TIMEOUT);
+
+        console.log('useSubaccount/placeOrder', {
+          ...orderParams,
+        });
+
+        const response = await placeOrderForSubaccount({
+          subaccount: subaccountClient,
+          marketId,
+          type: type as OrderType,
+          side: side as OrderSide,
+          price,
+          triggerPrice,
+          size,
+          clientId,
+          timeInForce: timeInForce as OrderTimeInForce,
+          goodTilTimeInSeconds: goodTilTimeInSeconds ?? 0,
+          execution: execution as OrderExecution,
+          postOnly,
+          reduceOnly,
+        });
+
+        // Handle Stateful orders
+        if ((response as IndexedTx)?.code !== 0) {
+          throw new StatefulOrderError('Stateful order has failed to commit.', response);
+        }
+
+        if (orderParams?.clientId) {
+          dispatch(removeUncommittedOrderClientId(orderParams.clientId));
+        }
+
+        if (response?.hash) {
+          console.log(
+            isClosePosition
+              ? 'useSubaccount/closePosition'
+              : 'useSubaccount/placeOrderForSubaccount',
+            {
+              txHash: Buffer.from(response.hash).toString('hex').toUpperCase(),
+            }
+          );
+        }
+
+        track(AnalyticsEvent.TradePlaceOrder, {
+          ...orderParams,
+          isClosePosition,
+        } as HumanReadablePlaceOrderPayload & { isClosePosition: boolean });
+        onSuccess?.();
+      } catch (error) {
+        const errorCode: number | undefined = error?.code;
+        const errorStringKey = errorCode ? ORDER_ERROR_CODE_MAP[errorCode] : undefined;
+        onError?.({ errorStringKey });
+
+        log('useSubaccount/placeOrder', error, {
+          orderParams,
+          isClosePosition,
+        });
       }
-
-      track(AnalyticsEvent.TradePlaceOrder, {
-        ...placeOrderParams,
-        isClosePosition,
-      } as HumanReadablePlaceOrderPayload & { isClosePosition: boolean });
-
-      return placeOrderParams;
     },
-    [subaccountClient]
+    [subaccountClient, placeOrderForSubaccount]
   );
 
   const closePosition = useCallback(
@@ -328,8 +569,8 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
       onError,
       onSuccess,
     }: {
-      onError: (onErrorParams?: { errorStringKey?: Nullable<string> }) => void;
+      onError: (onErrorParams?: { errorStringKey?: string }) => void;
-      onSuccess?: (placeOrderPayload: Nullable<HumanReadablePlaceOrderPayload>) => void;
+      onSuccess?: () => void;
     }) => await placeOrder({ isClosePosition: true, onError, onSuccess }),
     [placeOrder]
   );
@@ -341,21 +582,53 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
       onSuccess,
     }: {
       orderId: string;
-      onError?: ({ errorStringKey }?: { errorStringKey?: Nullable<string> }) => void;
+      onError?: ({ errorMsg }?: { errorMsg?: string }) => void;
       onSuccess?: () => void;
     }) => {
-      const callback = (success: boolean, parsingError?: Nullable<ParsingError>) => {
+      let cancelOrderParams: Nullable<HumanReadableCancelOrderPayload>;
-        if (success) {
-          track(AnalyticsEvent.TradeCancelOrder);
-          onSuccess?.();
-        } else {
-          onError?.({ errorStringKey: parsingError?.stringKey });
-        }
-      };
 
-      abacusStateManager.cancelOrder(orderId, callback);
+      if (!subaccountClient) return;
+
+      try {
+        cancelOrderParams = abacusStateManager.cancelOrderPayload(orderId);
+
+        if (!cancelOrderParams) {
+          throw new Error('Missing cancel order params');
+        }
+
+        const { clientId, clobPairId, goodTilBlock, goodTilBlockTime, orderFlags } =
+          cancelOrderParams;
+
+        // Keep for debugging
+        console.log('useSubaccount/cancelOrder', cancelOrderParams);
+
+        const response = await cancelOrderForSubaccount({
+          subaccount: subaccountClient,
+          clientId,
+          orderFlags,
+          clobPairId,
+          goodTilBlock: goodTilBlock || undefined,
+          goodTilBlockTime: goodTilBlockTime || undefined,
+        });
+
+        // Handle Stateful orders
+        if ((response as IndexedTx)?.code !== 0) {
+          throw new StatefulOrderError('Stateful cancel has failed to commit.', response);
+        }
+
+        if (response?.hash) {
+          console.log('useSubaccount/cancelOrderForSubaccount', {
+            txHash: Buffer.from(response.hash).toString('hex').toUpperCase(),
+          });
+        }
+
+        onSuccess?.();
+      } catch (error) {
+        onError?.();
+        log('useSubaccount/cancelOrder', error, cancelOrderParams);
+      }
     },
-    [subaccountClient]
+    [subaccountClient, cancelOrderForSubaccount]
   );
 
   return {
@@ -365,7 +638,9 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
     requestFaucetFunds,
 
     // Transfer Methods
+    simulateTransfer,
     transfer,
+    simulateWithdraw,
     sendSquidWithdraw,
 
     // Trading Methods

src/lib/abacus/analytics.ts

@@ -1,18 +0,0 @@
-import type { AbacusTrackingProtocol, Nullable } from '@/constants/abacus';
-import type { AnalyticsEvent } from '@/constants/analytics';
-
-import { track } from '../analytics';
-import { log as telemetryLog } from '../telemetry';
-
-class AbacusAnalytics implements AbacusTrackingProtocol {
-  log(event: string, data: Nullable<string>) {
-    try {
-      const parsedData = data ? JSON.parse(data) : {};
-      track(event as AnalyticsEvent, parsedData);
-    } catch (error) {
-      telemetryLog('AbacusAnalytics/log', error);
-    }
-  }
-}
-
-export default AbacusAnalytics;

src/lib/abacus/dydxChainTransactions.ts

@@ -1,51 +1,30 @@
-import Abacus, { type Nullable } from '@dydxprotocol/v4-abacus';
+import Abacus, { Nullable } from '@dydxprotocol/v4-abacus';
 import Long from 'long';
-import type { IndexedTx } from '@cosmjs/stargate';
 
 import {
   CompositeClient,
   IndexerConfig,
-  type LocalWallet,
   Network,
   NetworkOptimizer,
-  SubaccountClient,
   ValidatorConfig,
-  OrderType,
-  OrderSide,
-  OrderTimeInForce,
-  OrderExecution,
-  DYDX_DENOM,
-  GAS_PRICE_DYDX_DENOM,
 } from '@dydxprotocol/v4-client-js';
 
 import {
   type AbacusDYDXChainTransactionsProtocol,
   QueryType,
   type QueryTypes,
-  TransactionType,
   type TransactionTypes,
-  type HumanReadablePlaceOrderPayload,
-  type HumanReadableCancelOrderPayload,
-  type HumanReadableWithdrawPayload,
-  type HumanReadableTransferPayload,
 } from '@/constants/abacus';
-
 import { DialogTypes } from '@/constants/dialogs';
-import { UNCOMMITTED_ORDER_TIMEOUT_MS } from '@/constants/trade';
-import { QUANTUM_MULTIPLIER } from '@/constants/numbers';
 
 import { RootStore } from '@/state/_store';
-import { addUncommittedOrderClientId, removeUncommittedOrderClientId } from '@/state/account';
 import { openDialog } from '@/state/dialogs';
 
-import { StatefulOrderError } from '../errors';
-import { bytesToBigInt } from '../numbers';
 import { log } from '../telemetry';
 
 class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
   private compositeClient: CompositeClient | undefined;
   private store: RootStore | undefined;
-  private localWallet: LocalWallet | undefined;
 
   constructor() {
     this.compositeClient = undefined;
@@ -56,10 +35,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     this.store = store;
   }
 
-  setLocalWallet(localWallet: LocalWallet) {
-    this.localWallet = localWallet;
-  }
-
   async connectNetwork(
     indexerUrl: string,
     indexerSocketUrl: string,
@@ -118,10 +93,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
       return x.toString() as T;
     }
 
-    if (x instanceof Uint8Array) {
-      return bytesToBigInt(x).toString() as T;
-    }
-
     if (typeof x === 'object') {
       const parsedObj: { [key: string]: any } = {};
       for (const key in x) {
@@ -135,218 +106,13 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     throw new Error(`Unsupported data type: ${typeof x}`);
   }
 
-  async placeOrderTransaction(params: HumanReadablePlaceOrderPayload): Promise<string> {
-    if (!this.compositeClient || !this.localWallet)
-      throw new Error('Missing compositeClient or localWallet');
-
-    try {
-      const {
-        subaccountNumber,
-        marketId,
-        type,
-        side,
-        price,
-        size,
-        clientId,
-        timeInForce,
-        goodTilTimeInSeconds,
-        execution,
-        postOnly,
-        reduceOnly,
-        triggerPrice,
-      } = params || {};
-
-      // Observe uncommitted order
-      this.store?.dispatch(addUncommittedOrderClientId(clientId));
-
-      setTimeout(() => {
-        this.store?.dispatch(removeUncommittedOrderClientId(clientId));
-      }, UNCOMMITTED_ORDER_TIMEOUT_MS);
-
-      // Place order
-      const tx = await this.compositeClient?.placeOrder(
-        new SubaccountClient(this.localWallet, subaccountNumber),
-        marketId,
-        type as OrderType,
-        side as OrderSide,
-        price,
-        size,
-        clientId,
-        timeInForce as OrderTimeInForce,
-        goodTilTimeInSeconds ?? 0,
-        execution as OrderExecution,
-        postOnly,
-        reduceOnly,
-        triggerPrice ?? undefined
-      );
-
-      // Handle stateful orders
-      if ((tx as IndexedTx)?.code !== 0) {
-        throw new StatefulOrderError('Stateful order has failed to commit.', tx);
-      }
-
-      const parsedTx = this.parseToPrimitives(tx);
-      const hash = parsedTx?.hash;
-
-      if (import.meta.env.MODE === 'production') {
-        console.log(`https://testnet.mintscan.io/dydx-testnet/txs/${hash}`);
-      } else console.log(`txHash: ${hash}`);
-
-      return JSON.stringify(parsedTx);
-    } catch (error) {
-      if (error?.name !== 'BroadcastError') {
-        log('DydxChainTransactions/placeOrderTransaction', error);
-      }
-
-      return JSON.stringify({
-        error,
-      });
-    }
-  }
-
-  async cancelOrderTransaction(params: HumanReadableCancelOrderPayload): Promise<string> {
-    if (!this.compositeClient || !this.localWallet) {
-      throw new Error('Missing compositeClient or localWallet');
-    }
-
-    const { subaccountNumber, clientId, orderFlags, clobPairId, goodTilBlock, goodTilBlockTime } =
-      params ?? {};
-
-    try {
-      const tx = await this.compositeClient?.cancelOrder(
-        new SubaccountClient(this.localWallet, subaccountNumber),
-        clientId,
-        orderFlags,
-        clobPairId,
-        goodTilBlock ?? undefined,
-        goodTilBlockTime ?? undefined
-      );
-
-      const parsedTx = this.parseToPrimitives(tx);
-
-      return JSON.stringify(parsedTx);
-    } catch (error) {
-      log('DydxChainTransactions/cancelOrderTransaction', error);
-
-      return JSON.stringify({
-        error,
-      });
-    }
-  }
-
-  async simulateWithdrawTransaction(params: HumanReadableWithdrawPayload): Promise<string> {
-    if (!this.compositeClient || !this.localWallet) {
-      throw new Error('Missing compositeClient or localWallet');
-    }
-
-    const { subaccountNumber, amount } = params ?? {};
-    const compositeClient = this.compositeClient;
-    const subaccountClient = new SubaccountClient(this.localWallet, subaccountNumber);
-
-    try {
-      const tx = await compositeClient.simulate(
-        this.localWallet,
-        () =>
-          new Promise((resolve) => {
-            const msg = compositeClient.withdrawFromSubaccountMessage(subaccountClient, amount);
-
-            resolve([msg]);
-          }),
-      );
-
-      const parsedTx = this.parseToPrimitives(tx);
-
-      return JSON.stringify(parsedTx);
-    } catch (error) {
-      log('DydxChainTransactions/simulateWithdrawTransaction', error);
-
-      return JSON.stringify({
-        error,
-      });
-    }
-  }
-
-  async simulateTransferNativeTokenTransaction(params: HumanReadableTransferPayload): Promise<string> {
-    if (!this.compositeClient || !this.localWallet) {
-      throw new Error('Missing compositeClient or localWallet');
-    }
-
-    const { subaccountNumber, amount, recipient } = params ?? {};
-    const compositeClient = this.compositeClient;
-    const subaccountClient = new SubaccountClient(this.localWallet, subaccountNumber);
-
-    try {
-      const tx = await compositeClient.simulate(
-        this.localWallet,
-        () =>
-          new Promise((resolve) => {
-            const msg = compositeClient?.validatorClient.post.composer.composeMsgSendToken(
-              subaccountClient.address,
-              recipient,
-              DYDX_DENOM,
-              Long.fromNumber(amount * QUANTUM_MULTIPLIER)
-            );
-
-            resolve([msg]);
-          }),
-        GAS_PRICE_DYDX_DENOM,
-      );
-
-      const parsedTx = this.parseToPrimitives(tx);
-
-      return JSON.stringify(parsedTx);
-    } catch (error) {
-      log('DydxChainTransactions/simulateTransferNativeTokenTransaction', error);
-
-      return JSON.stringify({
-        error,
-      });
-    }
-  }
-
   async transaction(
     type: TransactionTypes,
     paramsInJson: Abacus.Nullable<string>,
     callback: (p0: Abacus.Nullable<string>) => void
   ): Promise<void> {
-    try {
+    // To be implemented
-      const params = paramsInJson ? JSON.parse(paramsInJson) : undefined;
+    return;
-
-      switch (type) {
-        case TransactionType.PlaceOrder: {
-          const result = await this.placeOrderTransaction(params);
-          callback(result);
-          break;
-        }
-        case TransactionType.CancelOrder: {
-          const result = await this.cancelOrderTransaction(params);
-          callback(result);
-          break;
-        }
-        case TransactionType.simulateWithdraw: {
-          const result = await this.simulateWithdrawTransaction(params);
-          callback(result);
-          break;
-        }
-        case TransactionType.simulateTransferNativeToken: {
-          const result = await this.simulateTransferNativeTokenTransaction(params);
-          callback(result);
-          break;
-        }
-        default: {
-          break;
-        }
-      }
-    } catch (error) {
-      try {
-        const serializedError = JSON.stringify(error);
-        callback(serializedError);
-      } catch (parseError) {
-        log('DydxChainTransactions/transaction', parseError);
-      }
-
-      log('DydxChainTransactions/transaction', error);
-    }
   }
 
   async get(
@@ -370,12 +136,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
           );
           callback(JSON.stringify({ url: optimalNode }));
           break;
-        case QueryType.EquityTiers:
-          const equityTiers =
-            await this.compositeClient?.validatorClient.get.getEquityTierLimitConfiguration();
-          const parsedEquityTiers = this.parseToPrimitives(equityTiers);
-          callback(JSON.stringify(parsedEquityTiers));
-          break;
         case QueryType.FeeTiers:
           const feeTiers = await this.compositeClient?.validatorClient.get.getFeeTiers();
           const parsedFeeTiers = this.parseToPrimitives(feeTiers);
@@ -395,14 +155,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
           const parsedUserStats = this.parseToPrimitives(userStats);
           callback(JSON.stringify(parsedUserStats));
           break;
-        case QueryType.GetAccountBalances:
-          if (!this.localWallet?.address) throw new Error('Missing localWallet');
-          const accountBalances = await this.compositeClient?.validatorClient.get.getAccountBalances(
-            this.localWallet.address
-          );
-          const parsedAccountBalances = this.parseToPrimitives(accountBalances);
-          callback(JSON.stringify(parsedAccountBalances));
-          break;
         // Do not implement Transfers (yet)
         case QueryType.Transfers:
         default:

src/lib/abacus/index.ts

@@ -1,5 +1,3 @@
-import type { LocalWallet } from '@dydxprotocol/v4-client-js';
-
 import type {
   ClosePositionInputFields,
   Nullable,
@@ -8,7 +6,6 @@ import type {
   TradeInputFields,
   TransferInputFields,
   HistoricalPnlPeriods,
-  ParsingError,
 } from '@/constants/abacus';
 
 import {
@@ -33,7 +30,6 @@ import { getInputTradeOptions } from '@/state/inputsSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
 
 import AbacusRest from './rest';
-import AbacusAnalytics from './analytics';
 import AbacusWebsocket from './websocket';
 import AbacusChainTransaction from './dydxChainTransactions';
 import AbacusStateNotifier from './stateNotification';
@@ -49,25 +45,23 @@ class AbacusStateManager {
   stateManager: InstanceType<typeof AsyncAbacusStateManager>;
   websocket: AbacusWebsocket;
   stateNotifier: AbacusStateNotifier;
-  analytics: AbacusAnalytics;
   abacusFormatter: AbacusFormatter;
-  chainTransactions: AbacusChainTransaction;
+  chainTransactionClient: AbacusChainTransaction;
 
   constructor() {
     this.store = undefined;
     this.currentMarket = undefined;
     this.stateNotifier = new AbacusStateNotifier();
-    this.analytics = new AbacusAnalytics();
     this.websocket = new AbacusWebsocket();
     this.abacusFormatter = new AbacusFormatter();
-    this.chainTransactions = new AbacusChainTransaction();
+    this.chainTransactionClient = new AbacusChainTransaction();
 
     const ioImplementations = new IOImplementations(
       // @ts-ignore
       new AbacusRest(),
       this.websocket,
-      this.chainTransactions,
+      this.chainTransactionClient,
-      this.analytics,
+      null,
       new AbacusThreading(),
       new CoroutineTimer(),
       new AbacusFileSystem()
@@ -163,14 +157,11 @@ class AbacusStateManager {
   setStore = (store: RootStore) => {
     this.store = store;
     this.stateNotifier.setStore(store);
-    this.chainTransactions.setStore(store);
+    this.chainTransactionClient.setStore(store);
   };
 
-  setAccount = (localWallet?: LocalWallet) => {
+  setAccount = (walletAddress: string) => {
-    if (localWallet) {
+    this.stateManager.accountAddress = walletAddress;
-      this.stateManager.accountAddress = localWallet.address;
-      this.chainTransactions.setLocalWallet(localWallet);
-    }
   };
 
   setTransfersSourceAddress = (evmAddress: string) => {
@@ -228,34 +219,16 @@ class AbacusStateManager {
     this.stateManager.transferStatus(hash, fromChainId, toChainId);
   };
 
-  // ------ Transactions ------ //
-
-  placeOrder = (
-    callback: (
-      success: boolean,
-      parsingError: Nullable<ParsingError>,
-      data: Nullable<HumanReadablePlaceOrderPayload>
-    ) => void
-  ): Nullable<HumanReadablePlaceOrderPayload> => this.stateManager.commitPlaceOrder(callback);
-
-  closePosition = (
-    callback: (
-      success: boolean,
-      parsingError: Nullable<ParsingError>,
-      data: Nullable<HumanReadablePlaceOrderPayload>
-    ) => void
-  ): Nullable<HumanReadablePlaceOrderPayload> => this.stateManager.commitClosePosition(callback);
-
-  cancelOrder = (
-    orderId: string,
-    callback: (
-      success: boolean,
-      parsingError: Nullable<ParsingError>,
-      data: Nullable<HumanReadableCancelOrderPayload>
-    ) => void
-  ) => this.stateManager.cancelOrder(orderId, callback);
-
   // ------ Utils ------ //
+  placeOrderPayload = (): Nullable<HumanReadablePlaceOrderPayload> =>
+    this.stateManager.placeOrderPayload();
+
+  closePositionPayload = (): Nullable<HumanReadablePlaceOrderPayload> =>
+    this.stateManager.closePositionPayload();
+
+  cancelOrderPayload = (orderId: string): Nullable<HumanReadableCancelOrderPayload> =>
+    this.stateManager.cancelOrderPayload(orderId);
+
   getHistoricalPnlPeriod = (): Nullable<HistoricalPnlPeriods> =>
     this.stateManager.historicalPnlPeriod;
 

src/lib/abacus/stateNotification.ts

@@ -1,7 +1,6 @@
 import { kollections } from '@dydxprotocol/v4-abacus';
 
 import type {
-  AccountBalance,
   AbacusApiState,
   AbacusNotification,
   AbacusStateNotificationProtocol,
@@ -19,11 +18,9 @@ import { Changes } from '@/constants/abacus';
 import type { RootStore } from '@/state/_store';
 
 import {
-  setBalances,
   setFills,
   setFundingPayments,
   setHistoricalPnl,
-  setLatestOrder,
   setSubaccount,
   setTransfers,
   setWallet,
@@ -74,16 +71,6 @@ class AbacusStateNotifier implements AbacusStateNotificationProtocol {
         );
       }
 
-      if (changes.has(Changes.accountBalances)) {
-        if (updatedState.account?.balances) {
-          const balances: Record<string, AccountBalance> = {}
-          for (const { k, v } of updatedState.account.balances.toArray()) {
-            balances[k] = v;
-          }
-          dispatch(setBalances(balances));
-        }
-      }
-
       if (changes.has(Changes.configs)) {
         dispatch(setConfigs(updatedState.configs));
       }
@@ -168,9 +155,7 @@ class AbacusStateNotifier implements AbacusStateNotificationProtocol {
     }
   }
 
-  lastOrderChanged(order: SubaccountOrder) {
+  lastOrderChanged(order: SubaccountOrder) {}
-    this.store?.dispatch(setLatestOrder(order));
-  }
 
   errorsEmitted(errors: ParsingErrors) {
     console.error('parse errors', errors.toArray());

src/lib/analytics.ts

@@ -5,15 +5,10 @@ import type {
   AnalyticsEventData,
 } from '@/constants/analytics';
 
-const DEBUG_ANALYTICS = false;
-
 export const identify = <T extends AnalyticsUserProperty>(
   property: T,
   propertyValue: AnalyticsUserPropertyValue<T>
 ) => {
-  if (DEBUG_ANALYTICS) {
-    console.log(`[Analytics:Identify] ${property}`, propertyValue);
-  }
   const customEvent = new CustomEvent('dydx:identify', {
     detail: { property, propertyValue },
   });
@@ -25,9 +20,6 @@ export const track = <T extends AnalyticsEvent>(
   eventType: T,
   eventData?: AnalyticsEventData<T>
 ) => {
-  if (DEBUG_ANALYTICS) {
-    console.log(`[Analytics] ${eventType}`, eventData);
-  }
   const customEvent = new CustomEvent('dydx:track', {
     detail: { eventType, eventData },
   });

src/lib/numbers.ts

@@ -66,17 +66,3 @@ export const getSeparator = ({
   Intl.NumberFormat(browserLanguage)
     .formatToParts(1000.1)
     .find?.((part) => part.type === separatorType)?.value;
-
-/**
- * Converts a byte array (representing an arbitrary-size signed integer) into a bigint.
- * @param u Array of bytes represented as a Uint8Array.
- */
-export function bytesToBigInt(u: Uint8Array): bigint {
-  if (u.length <= 1) {
-    return BigInt(0);
-  }
-  const negated: boolean = (u[0] & 1) === 1;
-  const hex: string = Buffer.from(u.slice(1)).toString('hex');
-  const abs: bigint = BigInt(`0x${hex}`);
-  return negated ? -abs : abs;
-}

src/lib/orders.ts

@@ -58,12 +58,6 @@ export const getStatusIconInfo = ({
         statusIconColor: `var(--color-negative)`,
       };
     }
-    case AbacusOrderStatus.untriggered: {
-      return {
-        statusIcon: IconName.OrderUntriggered,
-        statusIconColor: `var(--color-text-2)`,
-      };
-    }
     case AbacusOrderStatus.pending:
     default: {
       return {

src/pages/trade/HorizontalPanel.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';
 
-import { AbacusOrderStatus } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
 
 import { useBreakpoints, useStringGetter } from '@/hooks';
@@ -19,16 +18,13 @@ import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
 import { OrdersTable, OrdersTableColumnKey } from '@/views/tables/OrdersTable';
 import { PositionsTable, PositionsTableColumnKey } from '@/views/tables/PositionsTable';
 
-import {
+import { calculateIsAccountViewOnly } from '@/state/accountCalculators';
-  calculateHasUncommittedOrders,
-  calculateIsAccountViewOnly,
-} from '@/state/accountCalculators';
 
 import {
+  calculateHasUncommittedOrders,
   getCurrentMarketTradeInfoNumbers,
   getHasUnseenFillUpdates,
   getHasUnseenOrderUpdates,
-  getLatestOrderStatus,
   getTradeInfoNumbers,
 } from '@/state/accountSelectors';
 
@@ -73,7 +69,8 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
   const hasUnseenOrderUpdates = useSelector(getHasUnseenOrderUpdates);
   const hasUnseenFillUpdates = useSelector(getHasUnseenFillUpdates);
   const isAccountViewOnly = useSelector(calculateIsAccountViewOnly);
-  const isWaitingForOrderToIndex = useSelector(calculateHasUncommittedOrders);
+  const hasUncommittedOrders = useSelector(calculateHasUncommittedOrders);
+
   const showCurrentMarket = isTablet || view === PanelView.CurrentMarket;
 
   const fillsTagNumber = shortenNumberForDisplay(showCurrentMarket ? numFills : numTotalFills);
@@ -121,7 +118,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
       value: InfoSection.Orders,
       label: stringGetter({ key: STRING_KEYS.ORDERS }),
 
-      slotRight: isWaitingForOrderToIndex ? (
+      slotRight: hasUncommittedOrders ? (
         <Styled.LoadingSpinner />
       ) : (
         ordersTagNumber && (

src/state/_store.ts

@@ -4,6 +4,7 @@ import abacusStateManager from '@/lib/abacus';
 import appMiddleware from './appMiddleware';
 import localizationMiddleware from './localizationMiddleware';
 import routerMiddleware from './routerMiddleware';
+import tradeMiddleware from './tradeMiddleware';
 
 import { accountSlice } from './account';
 import { appSlice } from './app';
@@ -39,6 +40,7 @@ export const store = configureStore({
     appMiddleware,
     localizationMiddleware,
     routerMiddleware,
+    tradeMiddleware,
   ],
 
   devTools: process.env.NODE_ENV !== 'production',

src/state/account.ts

@@ -1,7 +1,6 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 
 import type {
-  AccountBalance,
   SubaccountFill,
   Nullable,
   Subaccount,
@@ -25,18 +24,16 @@ export type AccountState = {
   fundingPayments?: SubaccountFundingPayments;
   transfers?: SubaccountTransfers;
   clearedOrderIds?: string[];
+  uncommittedOrderClientIds?: number[];
   hasUnseenFillUpdates: boolean;
   hasUnseenOrderUpdates: boolean;
   historicalPnl?: SubAccountHistoricalPNLs;
-  latestOrder?: Nullable<SubaccountOrder>;
   onboardingGuards: Record<OnboardingGuard, boolean | undefined>;
   onboardingState: OnboardingState;
   subaccount?: Nullable<Subaccount>;
-  uncommittedOrderClientIds: number[];
   wallet?: Nullable<Wallet>;
   walletType?: WalletType;
   historicalPnlPeriod?: HistoricalPnlPeriods;
-  balances?: Record<string, AccountBalance>;
 };
 
 const initialState: AccountState = {
@@ -44,10 +41,10 @@ const initialState: AccountState = {
   fundingPayments: undefined,
   transfers: undefined,
   clearedOrderIds: undefined,
+  uncommittedOrderClientIds: undefined,
   hasUnseenFillUpdates: false,
   hasUnseenOrderUpdates: false,
   historicalPnl: undefined,
-  latestOrder: undefined,
   onboardingGuards: {
     [OnboardingGuard.hasAcknowledgedTerms]: Boolean(
       getLocalStorage<boolean>({
@@ -59,7 +56,6 @@ const initialState: AccountState = {
   },
   onboardingState: OnboardingState.Disconnected,
   subaccount: undefined,
-  uncommittedOrderClientIds: [],
   wallet: undefined,
   walletType: getLocalStorage<WalletType>({
     key: LocalStorageKey.OnboardingSelectedWalletType,
@@ -90,16 +86,6 @@ export const accountSlice = createSlice({
     setTransfers: (state, action: PayloadAction<any>) => {
       state.transfers = action.payload;
     },
-    setLatestOrder: (state, action: PayloadAction<Nullable<SubaccountOrder>>) => {
-      const { clientId } = action.payload ?? {};
-      state.latestOrder = action.payload;
-
-      if (clientId) {
-        state.uncommittedOrderClientIds = state.uncommittedOrderClientIds.filter(
-          (id) => id !== clientId
-        );
-      }
-    },
     clearOrder: (state, action: PayloadAction<string>) => ({
       ...state,
       clearedOrderIds: [...(state.clearedOrderIds || []), action.payload],
@@ -145,23 +131,22 @@ export const accountSlice = createSlice({
       ...state,
       wallet: action.payload,
     }),
+    addUncommittedOrderClientId: (state, action: PayloadAction<number>) => {
+      state.uncommittedOrderClientIds = state.uncommittedOrderClientIds
+        ? [...state.uncommittedOrderClientIds, action.payload]
+        : [action.payload];
+    },
+    removeUncommittedOrderClientId: (state, action: PayloadAction<number>) => {
+      state.uncommittedOrderClientIds = state.uncommittedOrderClientIds?.filter(
+        (clientId) => clientId !== action.payload
+      );
+    },
     viewedFills: (state) => {
       state.hasUnseenFillUpdates = false;
     },
     viewedOrders: (state) => {
       state.hasUnseenOrderUpdates = false;
     },
-    setBalances: (state, action: PayloadAction<Record<string, AccountBalance>>) => {
-      state.balances = action.payload;
-    },
-    addUncommittedOrderClientId: (state, action: PayloadAction<number>) => {
-      state.uncommittedOrderClientIds.push(action.payload);
-    },
-    removeUncommittedOrderClientId: (state, action: PayloadAction<number>) => {
-      state.uncommittedOrderClientIds = state.uncommittedOrderClientIds.filter(
-        (id) => id !== action.payload
-      );
-    },
   },
 });
 
@@ -169,16 +154,14 @@ export const {
   setFills,
   setFundingPayments,
   setTransfers,
-  setLatestOrder,
   clearOrder,
   setOnboardingGuard,
   setOnboardingState,
   setHistoricalPnl,
   setSubaccount,
   setWallet,
-  viewedFills,
-  viewedOrders,
-  setBalances,
   addUncommittedOrderClientId,
   removeUncommittedOrderClientId,
+  viewedFills,
+  viewedOrders,
 } = accountSlice.actions;

src/state/accountCalculators.ts

@@ -9,7 +9,6 @@ import {
   getOnboardingGuards,
   getOnboardingState,
   getSubaccountId,
-  getUncommittedOrderClientIds,
 } from '@/state/accountSelectors';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
@@ -70,11 +69,6 @@ export const calculateHasOpenPositions = createSelector(
   (openPositions?: SubaccountPosition[]) => (openPositions?.length || 0) > 0
 );
 
-export const calculateHasUncommittedOrders = createSelector(
-  [getUncommittedOrderClientIds],
-  (uncommittedOrderClientIds: number[]) => uncommittedOrderClientIds.length > 0
-);
-
 /**
  * @description calculate whether the client is loading info.
  * (account is connected but subaccountId is till missing)

src/state/accountSelectors.ts

@@ -78,12 +78,6 @@ export const getCurrentMarketPositionData = (state: RootState) => {
 export const getSubaccountOrders = (state: RootState) =>
   state.account.subaccount?.orders?.toArray();
 
-/**
- * @param state
- * @returns latestOrder of the currently connected subaccount throughout this session
- */
-export const getLatestOrder = (state: RootState) => state.account?.latestOrder;
-
 /**
  * @param state
  * @returns list of order ids that user has cleared and should be hidden
@@ -121,26 +115,7 @@ export const getSubaccountOpenOrdersBySideAndPrice = createSelector(
 );
 
 /**
- * @returns the clientId of the latest order
+ * @param state
- */
-export const getLatestOrderClientId = createSelector([getLatestOrder], (order) => order?.clientId);
-
-/**
- * @returns the rawValue status of the latest order
- */
-export const getLatestOrderStatus = createSelector(
-  [getLatestOrder],
-  (order) => order?.status.rawValue
-);
-
-/**
- * @returns a list of clientIds belonging to uncommmited orders
- */
-export const getUncommittedOrderClientIds = (state: RootState) =>
-  state.account.uncommittedOrderClientIds;
-
-/**
- * @param orderId
  * @returns order details with the given orderId
  */
 export const getOrderDetails = (orderId: string) =>
@@ -308,6 +283,21 @@ export const getIsAccountConnected = (state: RootState) =>
  */
 export const getOnboardingGuards = (state: RootState) => state.account.onboardingGuards;
 
+/**
+ * @param state
+ * @returns a boolean indicating whether the user has uncommitted orders
+ */
+export const calculateHasUncommittedOrders = (state: RootState) => {
+  return !!state.account.uncommittedOrderClientIds?.length;
+};
+
+/**
+ * @param state
+ * @returns List of uncommitted order clientIds
+ */
+export const getUncommittedOrderClientIds = (state: RootState) =>
+  state.account.uncommittedOrderClientIds;
+
 /**
  * @param state
  * @returns Whether there are unseen fill updates
@@ -332,8 +322,3 @@ export const getUserStats = (state: RootState) => ({
   makerVolume30D: state.account?.wallet?.user?.makerVolume30D,
   takerVolume30D: state.account?.wallet?.user?.takerVolume30D,
 });
-
-/**
- * @returns user wallet balances
- */
-export const getBalances = (state: RootState) => state.account?.balances;

src/state/tradeMiddleware.ts

@@ -0,0 +1,39 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+
+import type { SubaccountOrder } from '@/constants/abacus';
+
+import { removeUncommittedOrderClientId, setSubaccount } from '@/state/account';
+
+import { getSubaccountOrders, getUncommittedOrderClientIds } from '@/state/accountSelectors';
+
+export default (store: any) => (next: any) => async (action: PayloadAction<any>) => {
+  const { type, payload } = action;
+  const state = store.getState();
+  next(action);
+
+  switch (type) {
+    case setSubaccount.type: {
+      const updatedOrders = payload?.orders?.toArray() || [];
+      const orders = getSubaccountOrders(state);
+      const uncommittedOrderClientIds = getUncommittedOrderClientIds(state);
+
+      if (uncommittedOrderClientIds?.length && updatedOrders?.length !== orders?.length) {
+        const updatedOrdersClientIds = Object.fromEntries(
+          updatedOrders.map((order: SubaccountOrder) => [order.clientId, order])
+        );
+
+        const receivedClientId = uncommittedOrderClientIds.find(
+          (clientId) => updatedOrdersClientIds[clientId]
+        );
+
+        if (receivedClientId) {
+          store.dispatch(removeUncommittedOrderClientId(receivedClientId));
+        }
+      }
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+};

src/views/AccountInfo/AccountInfoConnectedState.tsx

@@ -62,10 +62,8 @@ export const AccountInfoConnectedState = () => {
   const { buyingPower, equity, marginUsage, leverage } = subAccount || {};
 
   const hasDiff =
-    (marginUsage?.postOrder !== null &&
+    marginUsage?.postOrder != null &&
-      !MustBigNumber(marginUsage?.postOrder).eq(MustBigNumber(marginUsage?.current))) ||
+    !MustBigNumber(marginUsage?.postOrder).eq(MustBigNumber(marginUsage?.current));
-    (buyingPower?.postOrder !== null &&
-      !MustBigNumber(buyingPower?.postOrder).eq(MustBigNumber(buyingPower?.current)));
 
   const showHeader = !hasDiff && !isTablet;
 

src/views/MarketLinks.tsx

@@ -15,17 +15,14 @@ export const MarketLinks = () => {
 
   const linkItems = [
     {
-      key: 'coinmarketcap',
       href: coinMarketCapsLink,
       icon: IconName.CoinMarketCap,
     },
     {
-      key: 'whitepaper',
       href: whitepaperLink,
       icon: IconName.Whitepaper,
     },
     {
-      key: 'project-website',
       href: websiteLink,
       icon: IconName.Website,
     },
@@ -34,8 +31,8 @@ export const MarketLinks = () => {
   return (
     <Styled.MarketLinks>
       {linkItems.map(
-        ({ key, href, icon }) =>
+        ({ href, icon }) =>
-          href && <IconButton key={key} href={href} iconName={icon} type={ButtonType.Link} />
+          href && <IconButton key={href} href={href} iconName={icon} type={ButtonType.Link} />
       )}
     </Styled.MarketLinks>
   );

src/views/TradeBoxOrderView.tsx

@@ -49,6 +49,7 @@ const useTradeTypeOptions = () => {
                   value && {
                     value: value as TradeTypes,
                     label,
+                    disabled: import.meta.env.MODE === 'production', // TODO: Remove this when stop orders are supported on testnet
                   }
               )
               .filter(isTruthy),

src/views/TransferStatus.tsx

@@ -7,11 +7,9 @@ import { StatusResponse } from '@0xsquid/sdk';
 import { useInterval, useStringGetter } from '@/hooks';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { AlertType } from '@/constants/alerts';
 
 import { formatSeconds } from '@/lib/timeUtils';
 
-import { AlertMessage } from '@/components/AlertMessage';
 import { Output, OutputType } from '@/components/Output';
 import { WithReceipt } from '@/components/WithReceipt';
 import { Icon, IconName } from '@/components/Icon';
@@ -35,9 +33,6 @@ export const TransferStatusToast = ({
   const [open, setOpen] = useState<boolean>(false);
   const [secondsLeft, setSecondsLeft] = useState<number | undefined>();
 
-  // @ts-ignore status.errors is not in the type definition but can be returned
-  const error = status?.errors?.length ? status?.errors[0] : status?.error;
-
   const type = useMemo(
     () => (status?.toChain?.chainData?.chainId === TESTNET_CHAIN_ID ? 'deposit' : 'withdrawal'),
     [status]
@@ -79,16 +74,6 @@ export const TransferStatusToast = ({
               },
             })}
           </Styled.Status>
-          {error && (
-            <AlertMessage type={AlertType.Error}>
-              {stringGetter({
-                key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
-                params: {
-                  ERROR_MESSAGE: error.message || stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }),
-                },
-              })}
-            </AlertMessage>
-          )}
           <Styled.Trigger>
             <Styled.TriggerIcon>
               <Icon iconName={IconName.Caret} />

src/views/TransferStatusSteps.tsx

@@ -59,7 +59,7 @@ export const TransferStatusSteps = ({ status }: ElementProps) => {
       },
     ];
 
-    const currentStatus = routeStatus?.[routeStatus?.length - 1];
+    const currentStatus = routeStatus[routeStatus?.length - 1];
 
     let currentStep = TransferStatusStep.Bridge;
 

src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx

@@ -7,7 +7,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { AbacusOrderStatus, AbacusOrderTypes, type Nullable } from '@/constants/abacus';
 import { ButtonAction } from '@/constants/buttons';
-import { STRING_KEYS, type StringKey } from '@/constants/localization';
+import { STRING_KEYS } from '@/constants/localization';
 
 import { AssetIcon } from '@/components/AssetIcon';
 import { Button } from '@/components/Button';
@@ -47,7 +47,7 @@ export const OrderDetailsDialog = ({ orderId, setIsOpen }: ElementProps) => {
   const { cancelOrder } = useSubaccount();
 
   const {
-    asset,
+    asset = {},
     cancelReason,
     createdAtMilliseconds,
     expiresAtMilliseconds,
@@ -57,7 +57,7 @@ export const OrderDetailsDialog = ({ orderId, setIsOpen }: ElementProps) => {
     price,
     reduceOnly,
     totalFilled,
-    resources,
+    resources = {},
     size,
     status,
     stepSizeDecimals,
@@ -121,9 +121,7 @@ export const OrderDetailsDialog = ({ orderId, setIsOpen }: ElementProps) => {
     {
       key: 'cancel-reason',
       label: stringGetter({ key: STRING_KEYS.CANCEL_REASON }),
-      value: cancelReason
+      value: cancelReason ? stringGetter({ key: STRING_KEYS[cancelReason] }) : undefined,
-        ? stringGetter({ key: STRING_KEYS[cancelReason as StringKey] })
-        : undefined,
     },
     {
       key: 'amount',
@@ -184,7 +182,8 @@ export const OrderDetailsDialog = ({ orderId, setIsOpen }: ElementProps) => {
 
   const onCancelClick = async () => {
     setIsPlacingCancel(true);
-    await cancelOrder({ orderId, onError: () => setIsPlacingCancel(false) });
+    await cancelOrder({ orderId });
+    setIsPlacingCancel(false);
   };
 
   const onClearClick = () => {

src/views/dialogs/ExchangeOfflineDialog.tsx

@@ -5,6 +5,8 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { AbacusApiStatus } from '@/constants/abacus';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
+import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks';
+import { UNICODE } from '@/constants/unicode';
 import { useApiState, useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -29,8 +31,16 @@ export const ExchangeOfflineDialog = ({ preventClose, setIsOpen }: ElementProps)
   const selectedNetwork = useSelector(getSelectedNetwork);
   const activeDialog = useSelector(getActiveDialog, shallowEqual);
 
+  const showOfflineMessage =
+    import.meta.env.MODE === 'production' &&
+    CLIENT_NETWORK_CONFIGS[selectedNetwork].dydxChainId === 'dydx-testnet-3';
+
   useEffect(() => {
-    if (activeDialog?.type === DialogTypes.ExchangeOffline && status === AbacusApiStatus.NORMAL) {
+    if (
+      activeDialog?.type === DialogTypes.ExchangeOffline &&
+      status === AbacusApiStatus.NORMAL &&
+      !showOfflineMessage
+    ) {
       dispatch(closeDialog());
     }
   }, [status, selectedNetwork]);
@@ -43,7 +53,16 @@ export const ExchangeOfflineDialog = ({ preventClose, setIsOpen }: ElementProps)
       title={stringGetter({ key: STRING_KEYS.UNAVAILABLE })}
     >
       <Styled.Content>
-        <p>{statusErrorMessage}</p>
+        {showOfflineMessage ? (
+          <>
+            <p>Testnet is currently offline. Please check back!</p>
+            <Styled.Link href="https://v4-teacher.vercel.app/testnets/schedule">
+              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} {UNICODE.ARROW_RIGHT}
+            </Styled.Link>
+          </>
+        ) : (
+          <p>{statusErrorMessage}</p>
+        )}
         {import.meta.env.MODE !== 'production' && <NetworkSelectMenu />}
       </Styled.Content>
     </Dialog>

src/views/dialogs/TradeDialog.tsx

@@ -17,7 +17,7 @@ import { Ring } from '@/components/Ring';
 import { ToggleGroup } from '@/components/ToggleGroup';
 
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
-import { getInputTradeData, getInputTradeOptions } from '@/state/inputsSelectors';
+import { getInputTradeData } from '@/state/inputsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
 import { getSelectedTradeType } from '@/lib/tradeData';
@@ -35,15 +35,6 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: ElementProps) =>
   const currentTradeData = useSelector(getInputTradeData, shallowEqual);
   const { type } = currentTradeData || {};
   const selectedTradeType = getSelectedTradeType(type);
-  const { typeOptions } = useSelector(getInputTradeOptions, shallowEqual) ?? {};
-
-  const allTradeTypeItems = typeOptions?.toArray()?.map(({ type, stringKey }) => ({
-    value: type,
-    label: stringGetter({
-      key: stringKey,
-    }),
-    slotBefore: <AssetIcon symbol={symbol} />,
-  }));
 
   const [currentStep, setCurrentStep] = useState<MobilePlaceOrderSteps>(
     MobilePlaceOrderSteps.EditOrder
@@ -71,7 +62,11 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: ElementProps) =>
         [MobilePlaceOrderSteps.EditOrder]: {
           title: (
             <Styled.ToggleGroup
-              items={allTradeTypeItems}
+              items={[TradeTypes.LIMIT, TradeTypes.MARKET].map((tradeType: TradeTypes) => ({
+                value: tradeType,
+                label: stringGetter({ key: TRADE_TYPE_STRINGS[tradeType].tradeTypeKey }),
+                slotBefore: <AssetIcon symbol={symbol} />,
+              }))}
               value={selectedTradeType}
               onValueChange={(tradeType: TradeTypes) =>
                 onTradeTypeChange(tradeType || selectedTradeType)
@@ -131,8 +126,6 @@ Styled.Dialog = styled(Dialog)<{ currentStep: MobilePlaceOrderSteps }>`
 `;
 
 Styled.ToggleGroup = styled(ToggleGroup)`
-  overflow-x: auto;
-
   button[data-state='off'] {
     gap: 0;
 

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -38,7 +38,6 @@ import { getTransferInputs } from '@/state/inputsSelectors';
 import abacusStateManager from '@/lib/abacus';
 import { MustBigNumber } from '@/lib/numbers';
 import { log } from '@/lib/telemetry';
-import { parseWalletError } from '@/lib/wallet';
 
 import { ChainSelectMenu } from './ChainSelectMenu';
 import { TokenSelectMenu } from './TokenSelectMenu';
@@ -287,7 +286,12 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
 
   const errorMessage = useMemo(() => {
     if (error) {
-      return parseWalletError({ error, stringGetter }).message;
+      return error?.message
+        ? stringGetter({
+            key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
+            params: { ERROR_MESSAGE: error.message },
+          })
+        : stringGetter({ key: STRING_KEYS.SOMETHING_WENT_WRONG });
     }
 
     if (fromAmount) {

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -43,7 +43,7 @@ export const WithdrawForm = () => {
   const [error, setError] = useState<Error | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  const { sendSquidWithdraw } = useSubaccount();
+  const { simulateWithdraw, sendSquidWithdraw } = useSubaccount();
   const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
 
   // User input
@@ -97,10 +97,16 @@ export const WithdrawForm = () => {
             field: TransferInputField.usdcSize,
           });
         } else {
+          const stdFee = await simulateWithdraw(parseFloat(debouncedAmount));
+          const amount =
+            parseFloat(debouncedAmount) -
+            parseFloat(stdFee?.amount[0]?.amount || '0') / QUANTUM_MULTIPLIER;
+
           abacusStateManager.setTransferValue({
-            value: debouncedAmount,
+            value: amount.toString(),
             field: TransferInputField.usdcSize,
           });
+
           setError(null);
         }
       } catch (error) {

src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx

@@ -49,15 +49,15 @@ export const WithdrawButtonAndReceipt = ({
   const [isEditingSlippage, setIsEditingSlipapge] = useState(false);
   const stringGetter = useStringGetter();
 
-  // TODO: uncomment when we have a way to get token amount estimate from abacus
+  const { balance, queryStatus } = useAccountBalance({
-  // const { balance, queryStatus } = useAccountBalance({
+    addressOrDenom: withdrawToken?.address || undefined,
-  //   addressOrDenom: withdrawToken?.address || undefined,
+    assetSymbol: withdrawToken?.symbol || undefined,
-  //   assetSymbol: withdrawToken?.symbol || undefined,
+    chainId: withdrawChain ? parseInt(withdrawChain) : undefined,
-  //   chainId: withdrawChain ? parseInt(withdrawChain) : undefined,
+    decimals: withdrawToken?.decimals || undefined,
-  //   decimals: withdrawToken?.decimals || undefined,
+    isCosmosChain: false,
-  //   isCosmosChain: false,
+  });
-  // });
 
+  // TODO: uncomment when we have a way to get token amount estimate from abacus
   // const balanceBN = MustBigNumber(balance);
   // const newBalance =
   //   // toAmountMin && withdrawToken && parseUnits(toAmountMin, withdrawToken.decimals).toString();
@@ -158,7 +158,7 @@ export const WithdrawButtonAndReceipt = ({
     // },
   ];
 
-  const isFormValid = !isDisabled && !isEditingSlippage;
+  const isFormValid = !isDisabled && !isEditingSlippage && queryStatus !== 'error';
 
   return (
     <Styled.WithReceipt

src/views/forms/ClosePositionForm.tsx

@@ -1,19 +1,14 @@
-import { type FormEvent, useCallback, useEffect, useState } from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
-import {
+import { ClosePositionInputField } from '@/constants/abacus';
-  ClosePositionInputField,
-  type HumanReadablePlaceOrderPayload,
-  type Nullable,
-} from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
 import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
 import { TOKEN_DECIMALS } from '@/constants/numbers';
 import { STRING_KEYS } from '@/constants/localization';
 import { MobilePlaceOrderSteps } from '@/constants/trade';
 import { useBreakpoints, useIsFirstRender, useStringGetter, useSubaccount } from '@/hooks';
-import { useOnLastOrderIndexed } from '@/hooks/useOnLastOrderIndexed';
 
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -32,7 +27,10 @@ import { Orderbook, orderbookMixins, type OrderbookScrollBehavior } from '@/view
 
 import { PositionPreview } from '@/views/forms/TradeForm/PositionPreview';
 
-import { getCurrentMarketPositionData } from '@/state/accountSelectors';
+import {
+  calculateHasUncommittedOrders,
+  getCurrentMarketPositionData,
+} from '@/state/accountSelectors';
 
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
 import { getInputClosePositionData } from '@/state/inputsSelectors';
@@ -84,7 +82,9 @@ export const ClosePositionForm = ({
   const { stepSizeDecimals } = useSelector(getCurrentMarketConfig, shallowEqual) || {};
   const { size: sizeData, summary } = useSelector(getInputClosePositionData, shallowEqual) || {};
   const { size, percent } = sizeData || {};
+  const hasUncommittedOrders = useSelector(calculateHasUncommittedOrders);
   const currentInput = useSelector(getCurrentInput);
+
   const currentPositionData = useSelector(getCurrentMarketPositionData, shallowEqual);
   const { size: currentPositionSize } = currentPositionData || {};
   const { current: currentSize } = currentPositionSize || {};
@@ -106,22 +106,17 @@ export const ClosePositionForm = ({
     }
   }, [currentInput, market, currentStep]);
 
-  const onLastOrderIndexed = useCallback(() => {
+  useEffect(() => {
-    if (!isFirstRender) {
+    // close has been placed
+    if (!isFirstRender && !hasUncommittedOrders) {
       abacusStateManager.clearClosePositionInputValues({ shouldFocusOnTradeInput: true });
       onClosePositionSuccess?.();
 
       if (currentStep === MobilePlaceOrderSteps.PlacingOrder) {
         setCurrentStep?.(MobilePlaceOrderSteps.Confirmation);
       }
-
-      setIsClosingPosition(false);
     }
-  }, [currentStep, isFirstRender]);
+  }, [hasUncommittedOrders]);
-
-  const { setUnIndexedClientId } = useOnLastOrderIndexed({
-    callback: onLastOrderIndexed,
-  });
 
   const onAmountInput = ({ floatValue }: { floatValue?: number }) => {
     if (currentSize == null) return;
@@ -170,16 +165,14 @@ export const ClosePositionForm = ({
     setIsClosingPosition(true);
 
     await closePosition({
-      onError: (errorParams?: { errorStringKey?: Nullable<string> }) => {
+      onError: (errorParams?: { errorStringKey?: string }) => {
         setClosePositionError(
           stringGetter({ key: errorParams?.errorStringKey || STRING_KEYS.SOMETHING_WENT_WRONG })
         );
-        setIsClosingPosition(false);
-      },
-      onSuccess: (placeOrderPayload: Nullable<HumanReadablePlaceOrderPayload>) => {
-        setUnIndexedClientId(placeOrderPayload?.clientId);
       },
     });
+
+    setIsClosingPosition(false);
   };
 
   const alertMessage = closePositionError && (

src/views/forms/TradeForm.tsx

@@ -1,4 +1,4 @@
-import { type FormEvent, useState, Ref, useCallback } from 'react';
+import { type FormEvent, useState, useEffect, Ref } from 'react';
 import styled, { AnyStyledComponent, css } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 import type { NumberFormatValues, SourceInfo } from 'react-number-format';
@@ -7,8 +7,6 @@ import { AlertType } from '@/constants/alerts';
 
 import {
   ErrorType,
-  type HumanReadablePlaceOrderPayload,
-  type Nullable,
   TradeInputErrorAction,
   TradeInputField,
   ValidationError,
@@ -21,7 +19,6 @@ import { InputErrorData, TradeBoxKeys, MobilePlaceOrderSteps } from '@/constants
 
 import { breakpoints } from '@/styles';
 import { useStringGetter, useSubaccount } from '@/hooks';
-import { useOnLastOrderIndexed } from '@/hooks/useOnLastOrderIndexed';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { formMixins } from '@/styles/formMixins';
@@ -37,6 +34,7 @@ import { WithTooltip } from '@/components/WithTooltip';
 
 import { Orderbook } from '@/views/tables/Orderbook';
 
+import { calculateHasUncommittedOrders } from '@/state/accountSelectors';
 import { getCurrentInput, useTradeFormData } from '@/state/inputsSelectors';
 import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
 
@@ -99,6 +97,7 @@ export const TradeForm = ({
   } = useTradeFormData();
 
   const { limitPrice, triggerPrice, trailingPercent } = price || {};
+  const hasUncommittedOrders = useSelector(calculateHasUncommittedOrders);
   const currentInput = useSelector(getCurrentInput);
   const { tickSizeDecimals, stepSizeDecimals } =
     useSelector(getCurrentMarketConfig, shallowEqual) || {};
@@ -155,33 +154,30 @@ export const TradeForm = ({
     }
   };
 
-  const onLastOrderIndexed = useCallback(() => {
+  useEffect(() => {
-    if (!currentStep || currentStep === MobilePlaceOrderSteps.PlacingOrder) {
+    // order has been placed
+    if (
+      (!currentStep || currentStep === MobilePlaceOrderSteps.PlacingOrder) &&
+      !hasUncommittedOrders
+    ) {
       setIsPlacingOrder(false);
       abacusStateManager.clearTradeInputValues({ shouldResetSize: true });
       setCurrentStep?.(MobilePlaceOrderSteps.Confirmation);
     }
-  }, [currentStep]);
+  }, [currentStep, hasUncommittedOrders]);
-
-  const { setUnIndexedClientId } = useOnLastOrderIndexed({
-    callback: onLastOrderIndexed,
-  });
 
   const onPlaceOrder = async () => {
     setPlaceOrderError(undefined);
     setIsPlacingOrder(true);
 
     await placeOrder({
-      onError: (errorParams?: { errorStringKey?: Nullable<string> }) => {
+      onError: (errorParams?: { errorStringKey?: string }) => {
         setPlaceOrderError(
           stringGetter({ key: errorParams?.errorStringKey || STRING_KEYS.SOMETHING_WENT_WRONG })
         );
 
         setIsPlacingOrder(false);
       },
-      onSuccess: (placeOrderPayload?: Nullable<HumanReadablePlaceOrderPayload>) => {
-        setUnIndexedClientId(placeOrderPayload?.clientId);
-      },
     });
   };
 

src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx

@@ -136,7 +136,7 @@ export const PlaceOrderButtonAndReceipt = ({
 
   const buttonState = currentStep
     ? buttonStatesPerStep[currentStep].buttonState
-    : { isDisabled: !shouldEnableTrade || isLoading, isLoading };
+    : { isDisabled: !shouldEnableTrade, isLoading };
 
   return (
     <WithDetailsReceipt detailItems={items}>

src/views/forms/TransferForm.tsx

@@ -13,7 +13,7 @@ import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { CLIENT_NETWORK_CONFIGS } 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, DydxChainAsset } from '@/constants/wallets';
 
 import {
   useAccountBalance,
@@ -52,6 +52,28 @@ type TransferFormProps = {
   className?: string;
 };
 
+const debouncedEstimateFee = debounce(
+  async ({ amount, recipientAddress, asset, setFees, simulateTransfer }) => {
+    if (!amount || !recipientAddress) {
+      return;
+    }
+
+    try {
+      const coinDenom = DYDX_CHAIN_ASSET_COIN_DENOM[asset as DydxChainAsset];
+      const stdFee: StdFee = await simulateTransfer(amount, recipientAddress, coinDenom);
+
+      const fee = stdFee?.amount.find((coin) => coin.denom === coinDenom)?.amount;
+      const feeAmount = MustBigNumber(fee).div(QUANTUM_MULTIPLIER).toNumber();
+
+      setFees(feeAmount);
+    } catch (error) {
+      console.error('TransferForm > : debouncedEstimateFee > ', error);
+    }
+  },
+  1000,
+  { trailing: true }
+);
+
 export const TransferForm = ({
   selectedAsset = DydxChainAsset.DYDX,
   onDone,
@@ -60,8 +82,8 @@ 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 } = useSelector(getTransferInputs, shallowEqual) || {};
-  const { transfer } = useSubaccount();
+  const { transfer, simulateTransfer } = useSubaccount();
   const { nativeTokenBalance, usdcBalance } = useAccountBalance();
   const { selectedNetwork } = useSelectedNetwork();
 
@@ -71,6 +93,7 @@ export const TransferForm = ({
   // Form states
   const [error, setError] = useState<Error | undefined>();
   const [isLoading, setIsLoading] = useState(false);
+  const [fees, setFees] = useState<number>();
 
   const balance = asset === DydxChainAsset.USDC ? freeCollateral?.current : nativeTokenBalance;
   const newBalance =
@@ -81,7 +104,7 @@ export const TransferForm = ({
           .toNumber();
   const amount = asset === DydxChainAsset.USDC ? size?.usdcSize : size?.size;
 
-  const showNotEnoughGasWarning = fee && asset === DydxChainAsset.USDC && usdcBalance < fee;
+  const showNotEnoughGasWarning = fees && asset === DydxChainAsset.USDC && usdcBalance < fees;
 
   // BN
   const amountBN = MustBigNumber(amount);
@@ -111,21 +134,34 @@ export const TransferForm = ({
 
   useEffect(() => {
     setError(undefined);
-    abacusStateManager.setTransferValue({
+    debouncedEstimateFee.cancel();
-      value: asset,
+
-      field: TransferInputField.token,
+    if (isAmountValid && isAddressValid) {
-    });
+      debouncedEstimateFee({
+        amount,
+        recipientAddress,
+        asset,
+        setFees,
+        simulateTransfer,
+      });
+    } else {
+      setFees(undefined);
+    }
+  }, [asset, amount, recipientAddress]);
+
+  useEffect(() => {
+    setError(undefined);
   }, [asset]);
 
   const onTransfer = async () => {
-    if (!isAmountValid || !isAddressValid || !fee) return;
+    if (!isAmountValid || !isAddressValid || !fees) return;
     setIsLoading(true);
     setError(undefined);
 
     try {
       // Subtract fees from amount if sending native tokens
       const amountToTransfer = (
-        asset === DydxChainAsset.DYDX ? amountBN.minus(fee) : amountBN
+        asset === DydxChainAsset.DYDX ? amountBN.minus(fees) : amountBN
       ).toNumber();
 
       const txResponse = await transfer(
@@ -176,7 +212,7 @@ export const TransferForm = ({
       value: DydxChainAsset.USDC,
       label: (
         <Styled.InlineRow>
-          <AssetIcon symbol="USDC" /> {DYDX_CHAIN_ASSET_TAGS[DydxChainAsset.USDC]}
+          <AssetIcon symbol="USDC" /> USDC
         </Styled.InlineRow>
       ),
     },
@@ -185,7 +221,7 @@ export const TransferForm = ({
       label: (
         <Styled.InlineRow>
           {/* <AssetIcon symbol="DYDX" />  */}
-          {DYDX_CHAIN_ASSET_TAGS[DydxChainAsset.DYDX]}
+          Dv4TNT
         </Styled.InlineRow>
       ),
     },
@@ -207,7 +243,7 @@ export const TransferForm = ({
       key: 'amount',
       label: (
         <span>
-          {stringGetter({ key: STRING_KEYS.AVAILABLE })} <Tag>{DYDX_CHAIN_ASSET_TAGS[asset]}</Tag>
+          {stringGetter({ key: STRING_KEYS.AVAILABLE })} <Tag>{asset}</Tag>
         </span>
       ),
       value: (
@@ -339,9 +375,9 @@ export const TransferForm = ({
       <Styled.Footer>
         <TransferButtonAndReceipt
           selectedAsset={asset}
-          fees={fee || undefined}
+          fees={fees}
-          isDisabled={!isAmountValid || !isAddressValid || !fee}
+          isDisabled={!isAmountValid || !isAddressValid || !fees}
-          isLoading={isLoading || Boolean(isAmountValid && isAddressValid && !fee)}
+          isLoading={isLoading || Boolean(isAmountValid && isAddressValid && !fees)}
         />
       </Styled.Footer>
     </Styled.Form>

src/views/forms/TransferForm/TransferButtonAndReceipt.tsx

@@ -3,7 +3,7 @@ import { shallowEqual, useSelector } from 'react-redux';
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { NumberSign } from '@/constants/numbers';
-import { DYDX_CHAIN_ASSET_TAGS, DydxChainAsset } from '@/constants/wallets';
+import { DydxChainAsset } from '@/constants/wallets';
 
 import { useAccountBalance, useStringGetter } from '@/hooks';
 
@@ -60,7 +60,7 @@ export const TransferButtonAndReceipt = ({
       key: 'fees',
       label: (
         <span>
-          {stringGetter({ key: STRING_KEYS.FEES })} <Tag>{DYDX_CHAIN_ASSET_TAGS[selectedAsset]}</Tag>
+          {stringGetter({ key: STRING_KEYS.FEES })} <Tag>{selectedAsset}</Tag>
         </span>
       ),
       value: <Output type={OutputType.Asset} value={fees} />,
@@ -69,7 +69,7 @@ export const TransferButtonAndReceipt = ({
       key: 'balance',
       label: (
         <span>
-          {stringGetter({ key: STRING_KEYS.BALANCE })} <Tag>{DYDX_CHAIN_ASSET_TAGS[selectedAsset]}</Tag>
+          {stringGetter({ key: STRING_KEYS.BALANCE })} <Tag>{selectedAsset}</Tag>
         </span>
       ),
       value: (

src/views/tables/OrdersTable/OrderActionsCell.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import styled, { AnyStyledComponent } from 'styled-components';
 
 import { AbacusOrderStatus, type OrderStatus } from '@/constants/abacus';
@@ -29,7 +29,8 @@ export const OrderActionsCell = ({ orderId, status, isDisabled }: ElementProps)
 
   const onCancel = useCallback(async () => {
     setIsCanceling(true);
-    await cancelOrder({ orderId, onError: () => setIsCanceling(false) });
+    await cancelOrder({ orderId });
+    setIsCanceling(false);
   }, []);
 
   return (