parse error message in abacus

* Add TestFlags provider and class

* import order nit

* markets is an object and not array

* Use null coalescing op

README.md

@@ -98,6 +98,11 @@ For the "Build & Development Settings", we recommend the following:
 - Framework Preset: `Vite`
 - Build Command (override): `pnpm run build`
 
+By default, the dev server runs in development mode and the build command runs in production mode. To override the default mode, you can pass in the `--mode` option flag. For example, if you want to build your app for testnet:
+```
+pnpm run build --mode testnet
+```
+
 If you wish to incorporate analytics via Amplitude and Bugsnag, you can use our scripts:
 `pnpm run build:inject-amplitude` and `pnpm run build:inject-bugsnag`. You will need to provide your own API keys for these services. In the Environment Variables section, name the variables as `AMPLITUDE_API_KEY` and `BUGSNAG_API_KEY` and provide the respective keys as their values.
 

package.json

@@ -39,7 +39,7 @@
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.0.19",
+    "@dydxprotocol/v4-abacus": "^1.0.24",
     "@dydxprotocol/v4-client-js": "^1.0.0",
     "@dydxprotocol/v4-localization": "^1.0.5",
     "@ethersproject/providers": "^5.7.2",
@@ -96,6 +96,7 @@
     "long": "^5.2.3",
     "luxon": "^3.3.0",
     "qr-code-styling": "1.6.0-rc.1",
+    "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-aria": "^3.25.0",
     "react-dom": "^18.2.0",

pnpm-lock.yaml

@@ -27,8 +27,8 @@ dependencies:
     specifier: ^0.31.0
     version: 0.31.0
   '@dydxprotocol/v4-abacus':
-    specifier: ^1.0.19
-    version: 1.0.19
+    specifier: ^1.0.24
+    version: 1.0.24
   '@dydxprotocol/v4-client-js':
     specifier: ^1.0.0
     version: 1.0.0
@@ -197,6 +197,9 @@ dependencies:
   qr-code-styling:
     specifier: 1.6.0-rc.1
     version: 1.6.0-rc.1
+  query-string:
+    specifier: ^8.1.0
+    version: 8.1.0
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -979,8 +982,8 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/v4-abacus@1.0.19:
-    resolution: {integrity: sha512-XhvSHGr503gNwHWEiOYP7M2uYeLu+Qm4szpE5w5H6hWFCanSGz6zAsTbPuyPLtt7IE1gj5z8mlL9J3tw2AZROg==}
+  /@dydxprotocol/v4-abacus@1.0.24:
+    resolution: {integrity: sha512-wDGSjkrc3Se6Ev7UTjPgJV7PiyzZSz2mJwOTZikLwH7W3k1iPYGQmaCd7TudFk8h2aSdlEwNsQBCf0sLoyvHaQ==}
     dev: false
 
   /@dydxprotocol/v4-client-js@1.0.0:
@@ -7875,7 +7878,6 @@ packages:
   /decode-uri-component@0.4.1:
     resolution: {integrity: sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==}
     engines: {node: '>=14.16'}
-    dev: true
 
   /deep-eql@4.1.3:
     resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
@@ -8945,7 +8947,6 @@ packages:
   /filter-obj@5.1.0:
     resolution: {integrity: sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==}
     engines: {node: '>=14.16'}
-    dev: true
 
   /find-cache-dir@3.3.2:
     resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
@@ -11876,7 +11877,6 @@ packages:
       decode-uri-component: 0.4.1
       filter-obj: 5.1.0
       split-on-first: 3.0.0
-    dev: true
 
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
@@ -12701,7 +12701,6 @@ packages:
   /split-on-first@3.0.0:
     resolution: {integrity: sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==}
     engines: {node: '>=12'}
-    dev: true
 
   /split2@4.2.0:
     resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}

src/App.tsx

@@ -23,6 +23,7 @@ import { LocalNotificationsProvider } from '@/hooks/useLocalNotifications';
 import { RestrictionProvider } from '@/hooks/useRestrictions';
 import { SubaccountProvider } from '@/hooks/useSubaccount';
 import { SquidProvider } from '@/hooks/useSquid';
+import { TestFlagsProvider } from '@/hooks/useTestFlags';
 
 import { GuardedMobileRoute } from '@/components/GuardedMobileRoute';
 
@@ -123,6 +124,7 @@ const providers = [
   wrapProvider(QueryClientProvider, { client: queryClient }),
   wrapProvider(GrazProvider),
   wrapProvider(WagmiConfig, { config }),
+  wrapProvider(TestFlagsProvider),
   wrapProvider(LocaleProvider),
   wrapProvider(RestrictionProvider),
   wrapProvider(DydxProvider),

src/hooks/useTestFlags.tsx

@@ -0,0 +1,46 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import queryString from 'query-string';
+
+class TestFlags {
+  public queryParams: queryString.ParsedQuery<string>;
+
+  constructor() {
+    this.queryParams = {};
+  }
+
+  setQueryParams(flags: queryString.ParsedQuery<string>) {
+    this.queryParams = flags;
+  }
+
+  get displayInitializingMarkets() {
+    return !!this.queryParams.displayInitializingMarkets;
+  }
+}
+
+export const testFlags = new TestFlags();
+
+const useTestFlagsContext = () => {
+  const [queryParams, setQueryParams] = useState<queryString.ParsedQuery<string>>({});
+  const location = useLocation();
+
+  useEffect(() => {
+    const parsedQueryParams = queryString.parse(location.search.substring(-1));
+    testFlags.setQueryParams(parsedQueryParams);
+    setQueryParams(parsedQueryParams);
+  }, []);
+
+  return {
+    ...queryParams,
+  };
+};
+
+type TestFlagsContextType = ReturnType<typeof useTestFlagsContext>;
+const TestFlagsContext = createContext<TestFlagsContextType>({} as TestFlagsContextType);
+TestFlagsContext.displayName = 'TestFlags';
+
+export const TestFlagsProvider = ({ ...props }) => (
+  <TestFlagsContext.Provider value={useTestFlagsContext()} {...props} />
+);
+
+export const useTestFlags = () => useContext(TestFlagsContext);

src/lib/abacus/rest.ts

@@ -56,13 +56,8 @@ class AbacusRest implements AbacusRestProtocol {
       .then(async (response) => {
         const data = await response.text();
 
-        if (response.ok) {
-          callback(data, response.status);
-        } else {
-          // response not OK, call callback with null data and the status, this includes 400/500 status codes
-          callback(null, response.status);
-        }
-
+        callback(data, response.status);
+        
         try {
           lastSuccessfulRestRequestByOrigin[new URL(url).origin] = Date.now();
         } catch {}

src/lib/abacus/websocket.ts

@@ -9,11 +9,12 @@ import {
   PONG_MESSAGE_TYPE,
 } from '@/constants/websocket';
 
+import { lastSuccessfulWebsocketRequestByOrigin } from '@/hooks/useAnalytics';
+import { testFlags } from '@/hooks/useTestFlags';
+
 import { subscriptionsByChannelId } from '@/lib/tradingView/dydxfeed/cache';
 import { mapCandle } from '@/lib/tradingView/utils';
 
-import { lastSuccessfulWebsocketRequestByOrigin } from '@/hooks/useAnalytics';
-
 import { log } from '../telemetry';
 
 const RECONNECT_INTERVAL_MS = 10_000;
@@ -144,6 +145,23 @@ class AbacusWebsocket implements Omit<AbacusWebsocketProtocol, '__doNotUseOrImpl
 
               break;
             }
+            case 'v4_markets': {
+              if (testFlags.displayInitializingMarkets) {
+                shouldProcess = false;
+                const { contents } = parsedMessage;
+
+                Object.keys(contents.markets ?? {}).forEach((market: any) => {
+                  const status = contents.markets[market].status;
+                  if (status === 'INITIALIZING') {
+                    contents.markets[market].status = 'ONLINE';
+                  }
+                });
+
+                this.receivedCallback?.(JSON.stringify(parsedMessage));
+              }
+
+              break;
+            }
             default: {
               break;
             }

src/views/dialogs/DepositDialog.tsx

@@ -17,7 +17,7 @@ type ElementProps = {
 };
 
 export const DepositDialog = ({ setIsOpen }: ElementProps) => {
-  const [showTestDeposit, setShowTestDeposit] = useState(true);
+  const [showFaucet, setShowFaucet] = useState(!isMainnet);
   const stringGetter = useStringGetter();
   const { isMobile } = useBreakpoints();
 
@@ -28,20 +28,18 @@ export const DepositDialog = ({ setIsOpen }: ElementProps) => {
       isOpen
       setIsOpen={setIsOpen}
       title={stringGetter({ key: STRING_KEYS.DEPOSIT })}
-      description={
-        !isMainnet && showTestDeposit && 'Test funds will be sent directly to your dYdX account.'
-      }
+      description={showFaucet && 'Test funds will be sent directly to your dYdX account.'}
       placement={isMobile ? DialogPlacement.FullScreen : DialogPlacement.Default}
     >
       <Styled.Content>
-        {!isMainnet && showTestDeposit ? (
-          <TestnetDepositForm onDeposit={closeDialog} />
-        ) : (
+        {isMainnet || !showFaucet ? (
           <DepositForm />
+        ) : (
+          <TestnetDepositForm onDeposit={closeDialog} />
         )}
         {!isMainnet && (
-          <Styled.TextToggle onClick={() => setShowTestDeposit(!showTestDeposit)}>
-            {showTestDeposit ? 'Show deposit form (Under Construction)' : 'Show test faucet'}
+          <Styled.TextToggle onClick={() => setShowFaucet(!showFaucet)}>
+            {showFaucet ? 'Show deposit form' : 'Show test faucet'}
           </Styled.TextToggle>
         )}
       </Styled.Content>

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -2,7 +2,7 @@ import { type FormEvent, useCallback, useEffect, useMemo, useState } from 'react
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { type NumberFormatValues } from 'react-number-format';
 import { shallowEqual, useSelector } from 'react-redux';
-import { parseUnits } from 'viem'
+import { parseUnits } from 'viem';
 
 import erc20 from '@/abi/erc20.json';
 import { TransferInputField, TransferInputTokenResource, TransferType } from '@/constants/abacus';
@@ -65,6 +65,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     chain: chainIdStr,
     resources,
     summary,
+    errors: routeErrors,
+    errorMessage: routeErrorMessage,
   } = useSelector(getTransferInputs, shallowEqual) || {};
   const chainId = chainIdStr ? parseInt(chainIdStr) : undefined;
 
@@ -97,7 +99,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
 
   useEffect(() => {
     const hasInvalidInput =
-      debouncedAmountBN.isNaN() || debouncedAmountBN.lte(0) || debouncedAmountBN.gte(balanceBN);
+      debouncedAmountBN.isNaN() || debouncedAmountBN.lte(0) || debouncedAmountBN.gt(balanceBN);
 
     abacusStateManager.setTransferValue({
       value: hasInvalidInput ? 0 : debouncedAmount,
@@ -171,7 +173,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
 
   const validateTokenApproval = useCallback(async () => {
     if (!signerWagmi || !publicClientWagmi) throw new Error('Missing signer');
-    if (!sourceToken?.address || !sourceToken.decimals) throw new Error('Missing source token address');
+    if (!sourceToken?.address || !sourceToken.decimals)
+      throw new Error('Missing source token address');
     if (!sourceChain?.rpc) throw new Error('Missing source chain rpc');
     if (!requestPayload?.targetAddress) throw new Error('Missing target address');
     if (!requestPayload?.value) throw new Error('Missing transaction value');
@@ -181,11 +184,11 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
       address: sourceToken.address as EvmAddress,
       abi: erc20,
       functionName: 'allowance',
-      args: [evmAddress as EvmAddress, requestPayload.targetAddress as EvmAddress]
+      args: [evmAddress as EvmAddress, requestPayload.targetAddress as EvmAddress],
     });
 
     const sourceAmountBN = parseUnits(debouncedAmount, sourceToken.decimals);
-    
+
     if (sourceAmountBN > (allowance as bigint)) {
       const { request } = await publicClientWagmi.simulateContract({
         account: evmAddress,
@@ -193,12 +196,12 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         abi: erc20,
         functionName: 'approve',
         args: [requestPayload.targetAddress as EvmAddress, sourceAmountBN],
-      })
+      });
 
       const approveTx = await signerWagmi.writeContract(request);
       await publicClientWagmi.waitForTransactionReceipt({
         hash: approveTx,
-      })
+      });
     }
   }, [signerWagmi, sourceToken, sourceChain, requestPayload, publicClientWagmi]);
 
@@ -228,8 +231,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
           to: requestPayload.targetAddress as EvmAddress,
           data: requestPayload.data as EvmAddress,
           gasLimit: BigInt(requestPayload.gasLimit),
-          value:
-            requestPayload.routeType !== 'SEND' ? BigInt(requestPayload.value) : undefined,
+          value: requestPayload.routeType !== 'SEND' ? BigInt(requestPayload.value) : undefined,
         };
         const txHash = await signerWagmi.sendTransaction(tx);
 
@@ -287,6 +289,15 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
       return parseWalletError({ error, stringGetter }).message;
     }
 
+    if (routeErrors) {
+      return routeErrorMessage
+        ? stringGetter({
+            key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
+            params: { ERROR_MESSAGE: routeErrorMessage },
+          })
+        : stringGetter({ key: STRING_KEYS.SOMETHING_WENT_WRONG });
+    }
+
     if (fromAmount) {
       if (!chainId) {
         return stringGetter({ key: STRING_KEYS.MUST_SPECIFY_CHAIN });
@@ -300,7 +311,16 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     }
 
     return undefined;
-  }, [error, balance, chainId, fromAmount, sourceToken]);
+  }, [
+    error,
+    routeErrors,
+    routeErrorMessage,
+    balance,
+    chainId,
+    fromAmount,
+    sourceToken,
+    stringGetter,
+  ]);
 
   const isDisabled =
     Boolean(errorMessage) ||

src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx

@@ -164,6 +164,7 @@ export const DepositButtonAndReceipt = ({
       label: <span>{stringGetter({ key: STRING_KEYS.SLIPPAGE })}</span>,
       value: (
         <SlippageEditor
+          disabled
           slippage={slippage}
           setIsEditing={setIsEditingSlipapge}
           setSlippage={setSlippage}

src/views/forms/AccountManagementForms/SlippageEditor.tsx

@@ -24,11 +24,17 @@ type ElementProps = {
   slippage: number;
   setIsEditing?: Dispatch<SetStateAction<boolean>>;
   setSlippage: (slippage: number) => void;
+  disabled?: boolean;
 };
 
 export type SlippageEditorProps = ElementProps;
 
-export const SlippageEditor = ({ slippage, setIsEditing, setSlippage }: SlippageEditorProps) => {
+export const SlippageEditor = ({
+  disabled,
+  slippage,
+  setIsEditing,
+  setSlippage,
+}: SlippageEditorProps) => {
   const percentSlippage = slippage * 100;
   const [slippageInputValue, setSlippageInputValue] = useState(percentSlippage.toString());
   const [editorState, setEditorState] = useState(EditorState.Viewing);
@@ -80,6 +86,10 @@ export const SlippageEditor = ({ slippage, setIsEditing, setSlippage }: Slippage
     }
   };
 
+  if (disabled) {
+    return <Output type={OutputType.Percent} value={slippage} />;
+  }
+
   return (
     <Styled.WithConfirmationPopover
       open={editorState !== EditorState.Viewing}

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -44,10 +44,10 @@ import { getTransferInputs } from '@/state/inputsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
 import { MustBigNumber } from '@/lib/numbers';
+import { log } from '@/lib/telemetry';
 
 import { TokenSelectMenu } from './TokenSelectMenu';
 import { WithdrawButtonAndReceipt } from './WithdrawForm/WithdrawButtonAndReceipt';
-import { join } from 'path';
 
 export const WithdrawForm = () => {
   const stringGetter = useStringGetter();
@@ -69,6 +69,8 @@ export const WithdrawForm = () => {
     chain: chainIdStr,
     address: toAddress,
     resources,
+    errors: routeErrors,
+    errorMessage: routeErrorMessage,
   } = useSelector(getTransferInputs, shallowEqual) || {};
 
   const isValidAddress = toAddress && isAddress(toAddress);
@@ -281,6 +283,15 @@ export const WithdrawForm = () => {
       });
     }
 
+    if (routeErrors) {
+      return routeErrorMessage
+        ? stringGetter({
+            key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
+            params: { ERROR_MESSAGE: routeErrorMessage },
+          })
+        : stringGetter({ key: STRING_KEYS.SOMETHING_WENT_WRONG });
+    }
+
     if (!toAddress) return stringGetter({ key: STRING_KEYS.WITHDRAW_MUST_SPECIFY_ADDRESS });
 
     if (sanctionedAddresses.has(toAddress))
@@ -303,12 +314,15 @@ export const WithdrawForm = () => {
     return undefined;
   }, [
     error,
+    routeErrors,
+    routeErrorMessage,
     freeCollateralBN,
     chainIdStr,
     debouncedAmountBN,
     toToken,
     toAddress,
     sanctionedAddresses,
+    stringGetter,
   ]);
 
   const isDisabled =

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

@@ -147,6 +147,7 @@ export const WithdrawButtonAndReceipt = ({
       label: <span>{stringGetter({ key: STRING_KEYS.SLIPPAGE })}</span>,
       value: (
         <SlippageEditor
+          disabled
           slippage={slippage}
           setIsEditing={setIsEditingSlipapge}
           setSlippage={setSlippage}

src/views/forms/TransferForm.tsx

@@ -61,38 +61,53 @@ export const TransferForm = ({
   const stringGetter = useStringGetter();
   const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
   const { dydxAddress } = useAccounts();
-  const {
-    address: recipientAddress,
-    size,
-    fee,
-  } = useSelector(getTransferInputs, shallowEqual) || {};
   const { transfer } = useSubaccount();
   const { nativeTokenBalance, usdcBalance } = useAccountBalance();
   const { selectedNetwork } = useSelectedNetwork();
   const { tokensConfigs, usdcLabel, chainTokenLabel } = useTokenConfigs();
 
-  // User Input
-  const [asset, setAsset] = useState<DydxChainAsset>(selectedAsset);
+  const {
+    address: recipientAddress,
+    size,
+    fee,
+    token,
+  } = useSelector(getTransferInputs, shallowEqual) || {};
 
   // Form states
   const [error, setError] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
 
-  const balance = asset === DydxChainAsset.USDC ? freeCollateral?.current : nativeTokenBalance;
-  const newBalance =
-    asset === DydxChainAsset.USDC
-      ? freeCollateral?.postOrder
-      : MustBigNumber(nativeTokenBalance)
-          .minus(size?.size ?? 0)
-          .toNumber();
-  const amount = asset === DydxChainAsset.USDC ? size?.usdcSize : size?.size;
+  // temp fix: TODO: reset fees when changing token in Abacus
+  const [currentFee, setCurrentFee] = useState(fee);
+  useEffect(() => {
+    setCurrentFee(fee);
+  }, [fee]);
 
-  const showNotEnoughGasWarning = fee && asset === DydxChainAsset.USDC && usdcBalance < fee;
+  const asset = (token ?? selectedAsset) as DydxChainAsset;
+  const isUSDCSelected = asset === DydxChainAsset.USDC;
+  const amount = isUSDCSelected ? size?.usdcSize : size?.size;
+  const showNotEnoughGasWarning = fee && isUSDCSelected && usdcBalance < fee;
+  const balance = isUSDCSelected ? freeCollateral?.current : nativeTokenBalance;
 
   // BN
+  const newBalanceBN = isUSDCSelected
+    ? MustBigNumber(freeCollateral?.postOrder)
+    : nativeTokenBalance.minus(size?.size ?? 0);
+
   const amountBN = MustBigNumber(amount);
   const balanceBN = MustBigNumber(balance);
-  const newBalanceBN = MustBigNumber(newBalance);
+
+  const onChangeAsset = (asset: DydxChainAsset) => {
+    setError(undefined);
+    setCurrentFee(undefined);
+
+    if (asset) {
+      abacusStateManager.setTransferValue({
+        value: asset,
+        field: TransferInputField.token,
+      });
+    }
+  };
 
   useEffect(() => {
     abacusStateManager.setTransferValue({
@@ -100,19 +115,13 @@ export const TransferForm = ({
       field: TransferInputField.type,
     });
 
+    onChangeAsset(selectedAsset);
+
     return () => {
       abacusStateManager.clearTransferInputValues();
     };
   }, []);
 
-  useEffect(() => {
-    setError(undefined);
-    abacusStateManager.setTransferValue({
-      value: asset,
-      field: TransferInputField.token,
-    });
-  }, [asset]);
-
   const { sanctionedAddresses } = useRestrictions();
 
   const isAddressValid = useMemo(
@@ -134,11 +143,6 @@ export const TransferForm = ({
     setError(undefined);
 
     try {
-      // Subtract fees from amount if sending native tokens
-      const amountToTransfer = (
-        asset === DydxChainAsset.CHAINTOKEN ? amountBN.minus(fee) : amountBN
-      ).toNumber();
-
       const screenResults = await screenAddresses({
         addresses: [recipientAddress!, dydxAddress!],
       });
@@ -157,9 +161,9 @@ export const TransferForm = ({
         );
       } else {
         const txResponse = await transfer(
-          amountToTransfer,
+          amountBN.toNumber(),
           recipientAddress as string,
-          tokensConfigs[asset].denom,
+          tokensConfigs[asset]?.denom
         );
 
         if (txResponse?.code === 0) {
@@ -200,7 +204,7 @@ export const TransferForm = ({
   const onChangeAmount = (value?: number) => {
     abacusStateManager.setTransferValue({
       value,
-      field: asset === DydxChainAsset.USDC ? TransferInputField.usdcSize : TransferInputField.size,
+      field: isUSDCSelected ? TransferInputField.usdcSize : TransferInputField.size,
     });
   };
 
@@ -226,7 +230,7 @@ export const TransferForm = ({
       value: DydxChainAsset.CHAINTOKEN,
       label: (
         <Styled.InlineRow>
-          {/* <AssetIcon symbol="DYDX" />  */}
+          <AssetIcon symbol={chainTokenLabel} />
           {chainTokenLabel}
         </Styled.InlineRow>
       ),
@@ -249,15 +253,15 @@ export const TransferForm = ({
       key: 'amount',
       label: (
         <span>
-          {stringGetter({ key: STRING_KEYS.AVAILABLE })} <Tag>{tokensConfigs[asset].name}</Tag>
+          {stringGetter({ key: STRING_KEYS.AVAILABLE })} <Tag>{tokensConfigs[asset]?.name}</Tag>
         </span>
       ),
       value: (
         <DiffOutput
           type={OutputType.Asset}
-          value={balanceBN.toString()}
-          newValue={newBalanceBN.toString()}
+          value={balanceBN}
           sign={NumberSign.Negative}
+          newValue={newBalanceBN}
           hasInvalidNewValue={newBalanceBN.isNegative()}
           withDiff={Boolean(amount && balance) && !amountBN.isNaN()}
         />
@@ -340,8 +344,8 @@ export const TransferForm = ({
 
       <Styled.SelectMenu
         label={stringGetter({ key: STRING_KEYS.ASSET })}
-        value={asset}
-        onValueChange={setAsset}
+        value={token}
+        onValueChange={onChangeAsset}
         disabled={isLoading}
       >
         {assetOptions.map(({ value, label }) => (
@@ -355,12 +359,16 @@ export const TransferForm = ({
           type={InputType.Number}
           onChange={({ floatValue }: NumberFormatValues) => onChangeAmount(floatValue)}
           value={amount ?? undefined}
-          slotRight={renderFormInputButton({
-            label: stringGetter({ key: STRING_KEYS.MAX }),
-            isInputEmpty: size?.usdcSize == null,
-            onClear: () => onChangeAmount(undefined),
-            onClick: () => onChangeAmount(balanceBN.toNumber()),
-          })}
+          slotRight={
+            isUSDCSelected &&
+            balanceBN.gt(0) &&
+            renderFormInputButton({
+              label: stringGetter({ key: STRING_KEYS.MAX }),
+              isInputEmpty: size?.usdcSize == null,
+              onClear: () => onChangeAmount(undefined),
+              onClick: () => onChangeAmount(balanceBN.toNumber()),
+            })
+          }
           disabled={isLoading}
         />
       </WithDetailsReceipt>
@@ -369,7 +377,7 @@ export const TransferForm = ({
         <AlertMessage type={AlertType.Warning}>
           {stringGetter({
             key: STRING_KEYS.TRANSFER_INSUFFICIENT_GAS,
-            params: { USDC_BALANCE: `(${usdcBalance})` },
+            params: { USDC_BALANCE: `(${usdcBalance} USDC)` },
           })}
         </AlertMessage>
       )}
@@ -379,9 +387,9 @@ export const TransferForm = ({
       <Styled.Footer>
         <TransferButtonAndReceipt
           selectedAsset={asset}
-          fees={fee || undefined}
-          isDisabled={!isAmountValid || !isAddressValid || !fee || isLoading}
-          isLoading={isLoading || Boolean(isAmountValid && isAddressValid && !fee)}
+          fee={currentFee || undefined}
+          isDisabled={!isAmountValid || !isAddressValid || !currentFee || isLoading}
+          isLoading={isLoading || Boolean(isAmountValid && isAddressValid && !currentFee)}
         />
       </Styled.Footer>
     </Styled.Form>

src/views/forms/TransferForm/TransferButtonAndReceipt.tsx

@@ -23,14 +23,14 @@ import { MustBigNumber } from '@/lib/numbers';
 
 type ElementProps = {
   selectedAsset: DydxChainAsset;
-  fees?: number;
+  fee?: number;
   isDisabled?: boolean;
   isLoading?: boolean;
 };
 
 export const TransferButtonAndReceipt = ({
   selectedAsset,
-  fees,
+  fee,
   isDisabled,
   isLoading,
 }: ElementProps) => {
@@ -47,43 +47,46 @@ export const TransferButtonAndReceipt = ({
   const { current: equity, postOrder: newEquity } = equityInfo || {};
   const { current: leverage, postOrder: newLeverage } = leverageInfo || {};
 
-  // TODO(@aforaleka): add wallet balance for DYDX
-  const balance = selectedAsset === DydxChainAsset.USDC ? equity : nativeTokenBalance;
-  const newBalance =
-    selectedAsset === DydxChainAsset.USDC
-      ? newEquity
-      : MustBigNumber(nativeTokenBalance)
-          .minus(size?.size ?? 0)
-          .toNumber();
+  const isUSDCSelected = selectedAsset === DydxChainAsset.USDC;
+
+  const balance = isUSDCSelected ? equity : nativeTokenBalance;
+  const newNativeTokenBalance = nativeTokenBalance
+    .minus(size?.size ?? 0)
+    .minus(fee ?? 0) // show balance after fees for button receipt
+    .toNumber();
+
+  const newBalance = isUSDCSelected ? newEquity : newNativeTokenBalance;
 
   const transferDetailItems = [
     {
       key: 'fees',
       label: (
         <span>
-          {stringGetter({ key: STRING_KEYS.FEES })} <Tag>{tokensConfigs[selectedAsset].name}</Tag>
+          {stringGetter({ key: STRING_KEYS.FEES })} <Tag>{tokensConfigs[selectedAsset]?.name}</Tag>
         </span>
       ),
-      value: <Output type={OutputType.Asset} value={fees} />,
+      value: <Output type={OutputType.Asset} value={fee} />,
     },
     {
       key: 'balance',
       label: (
         <span>
-          {stringGetter({ key: STRING_KEYS.BALANCE })} <Tag>{tokensConfigs[selectedAsset].name}</Tag>
+          {stringGetter({ key: STRING_KEYS.BALANCE })}{' '}
+          <Tag>{tokensConfigs[selectedAsset]?.name}</Tag>
         </span>
       ),
       value: (
         <DiffOutput
           type={OutputType.Asset}
           value={balance}
-          newValue={newBalance}
           sign={NumberSign.Negative}
-          withDiff={Boolean(newBalance) && balance !== newBalance}
+          newValue={newBalance}
+          hasInvalidNewValue={MustBigNumber(newBalance).isNegative()}
+          withDiff={newBalance !== null && !MustBigNumber(balance).eq(newBalance ?? 0)}
         />
       ),
     },
-    selectedAsset === DydxChainAsset.USDC && {
+    isUSDCSelected && {
       key: 'leverage',
       label: <span>{stringGetter({ key: STRING_KEYS.LEVERAGE })}</span>,
       value: (