flex-wrap

* Handle squid route errors

* bump abacus

* add dep

* address comments

* fix max

* disable slippage editor

* parse error message in abacus

public/configs/env.json

@@ -439,6 +439,7 @@
             "tos": "https://dydx.exchange/v4-terms",
             "privacy": "https://dydx.exchange/privacy",
             "mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
+            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "documentation": "https://v4-teacher.vercel.app/",
             "community": "https://discord.com/invite/dydx",
             "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",

src/components/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -22,6 +22,11 @@ export const SearchInput = ({
 }: SearchInputProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (isOpen) inputRef?.current?.focus();
+  }, [inputRef, isOpen]);
 
   return (
     <Styled.Search>
@@ -41,6 +46,7 @@ export const SearchInput = ({
       />
       <Styled.Input
         autoFocus
+        ref={inputRef}
         value={value}
         isOpen={isOpen}
         type={type}

src/components/Table.tsx

@@ -831,6 +831,7 @@ Styled.SortArrow = styled.span<{ sortDirection: 'ascending' | 'descending' }>`
 Styled.Thead = styled.thead<StyleProps>`
   ${layoutMixins.stickyHeader}
   scroll-snap-align: none;
+  font: var(--font-mini-book);
 
   > * {
     height: var(--stickyArea-topHeight);
@@ -839,18 +840,17 @@ Styled.Thead = styled.thead<StyleProps>`
   color: var(--tableHeader-textColor);
   background-color: var(--tableHeader-backgroundColor);
 
-  @media ${breakpoints.notTablet} {
-    ${({ withInnerBorders, withGradientCardRows }) =>
-      withInnerBorders &&
-      !withGradientCardRows &&
-      css`
-        ${layoutMixins.withInnerHorizontalBorders}
-      `}
-  }
+  ${({ withInnerBorders, withGradientCardRows }) =>
+    withInnerBorders &&
+    !withGradientCardRows &&
+    css`
+      ${layoutMixins.withInnerHorizontalBorders}
+    `}
 `;
 
 Styled.Tbody = styled.tbody<StyleProps>`
   ${layoutMixins.stickyArea2}
+  font: var(--font-small-book);
 
   // If <table> height is fixed with not enough rows to overflow, vertically center the rows
   &:before,
@@ -869,6 +869,10 @@ Styled.Tbody = styled.tbody<StyleProps>`
       --stickyArea2-paddingBottom: var(--border-width);
       --stickyArea2-paddingLeft: var(--border-width);
       --stickyArea2-paddingRight: var(--border-width);
+
+      tr:first-of-type {
+        box-shadow: none;
+      }
     `}
 
   ${({ withGradientCardRows }) =>

src/hooks/useAccounts.tsx

@@ -136,8 +136,8 @@ const useAccountsContext = () => {
       getSubaccounts: async ({ dydxAddress }: { dydxAddress: DydxAddress }) => {
         try {
           const response = await compositeClient?.indexerClient.account.getSubaccounts(dydxAddress);
-          setDydxSubaccounts(response.subaccounts);
-          return response.subaccounts;
+          setDydxSubaccounts(response?.subaccounts);
+          return response?.subaccounts ?? [];
         } catch (error) {
           // 404 is expected if the user has no subaccounts
           if (error.status === 404) {

src/hooks/useLocalNotifications.tsx

@@ -66,7 +66,16 @@ const useLocalNotificationsContext = () => {
         status: currentStatus,
       } of transferNotifications) {
         try {
-          if (currentStatus && currentStatus?.squidTransactionStatus !== 'ongoing') continue;
+          // skip if error is returned or if the transaction is not ongoing
+          if (
+            // @ts-ignore status.errors is not in the type definition but can be returned
+            currentStatus?.errors ||
+            currentStatus?.error ||
+            (currentStatus?.squidTransactionStatus &&
+              currentStatus?.squidTransactionStatus !== 'ongoing')
+          ) {
+            continue;
+          }
 
           const status = await squid?.getStatus({ transactionId: txHash, toChainId, fromChainId });
           if (status) statuses[txHash] = status;

src/hooks/useSquid.tsx

@@ -8,7 +8,7 @@ import { getSelectedNetwork } from '@/state/appSelectors';
 
 export const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
 
-export const STATUS_ERROR_GRACE_PERIOD = 120_000;
+export const STATUS_ERROR_GRACE_PERIOD = 300_000;
 
 const useSquidContext = () => {
   const selectedNetwork = useSelector(getSelectedNetwork);

src/lib/abacus/dydxChainTransactions.ts

@@ -200,10 +200,9 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
 
       if (isTestnet) {
         console.log(
-          `${
-            ENVIRONMENT_CONFIG_MAP[this.compositeClient.network.getString() as DydxNetwork]?.links
-              ?.mintscanBase
-          }/txs/${hash}`
+          `${ENVIRONMENT_CONFIG_MAP[
+            this.compositeClient.network.getString() as DydxNetwork
+          ]?.links?.mintscan?.replace('{tx_hash}', hash.toString())}`
         );
       } else console.log(`txHash: ${hash}`);
 

src/pages/portfolio/Fees.tsx

@@ -304,10 +304,6 @@ Styled.FeeTable = styled(Table)`
 
   @media ${breakpoints.notTablet} {
     --tableHeader-backgroundColor: var(--color-layer-1);
-
-    thead tr {
-      --border-width: 0;
-    }
   }
 `;
 

src/pages/portfolio/Portfolio.tsx

@@ -1,11 +1,13 @@
-import { useEffect } from 'react';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
+import { OnboardingState } from '@/constants/account';
+import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { HistoryRoute, PortfolioRoute } from '@/constants/routes';
 
-import { useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
+import { useAccountBalance, useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
 
 import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
 import { FundingPaymentsTable } from '@/views/tables/FundingPaymentsTable';
@@ -14,6 +16,9 @@ import { Icon, IconName } from '@/components/Icon';
 import { NavigationMenu } from '@/components/NavigationMenu';
 import { WithSidebar } from '@/components/WithSidebar';
 
+import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
+import { openDialog } from '@/state/dialogs';
+
 import { PortfolioNavMobile } from './PortfolioNavMobile';
 import { Overview } from './Overview';
 import { Positions } from './Positions';
@@ -22,11 +27,20 @@ import { Fees } from './Fees';
 import { History } from './History';
 
 import { layoutMixins } from '@/styles/layoutMixins';
+import { Button } from '@/components/Button';
+import { ButtonAction } from '@/constants/buttons';
 
 export default () => {
+  const dispatch = useDispatch();
   const stringGetter = useStringGetter();
   const { isTablet, isNotTablet } = useBreakpoints();
 
+  const onboardingState = useSelector(getOnboardingState);
+  const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
+  const { nativeTokenBalance } = useAccountBalance();
+
+  const usdcBalance = freeCollateral?.current || 0;
+
   useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
 
   const routesComponent = (
@@ -84,46 +98,74 @@ export default () => {
     <WithSidebar
       sidebar={
         isTablet ? null : (
-          <Styled.NavigationMenu
-            items={[
-              {
-                group: 'views',
-                groupLabel: stringGetter({ key: STRING_KEYS.VIEWS }),
-                items: [
-                  {
-                    value: PortfolioRoute.Overview,
-                    slotBefore: <Styled.Icon iconName={IconName.Overview} />,
-                    label: stringGetter({ key: STRING_KEYS.OVERVIEW }),
-                    href: PortfolioRoute.Overview,
-                  },
-                  {
-                    value: PortfolioRoute.Positions,
-                    slotBefore: <Styled.Icon iconName={IconName.Cube} />,
-                    label: stringGetter({ key: STRING_KEYS.POSITIONS }),
-                    href: PortfolioRoute.Positions,
-                  },
-                  {
-                    value: PortfolioRoute.Orders,
-                    slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
-                    label: stringGetter({ key: STRING_KEYS.ORDERS }),
-                    href: PortfolioRoute.Orders,
-                  },
-                  {
-                    value: PortfolioRoute.Fees,
-                    slotBefore: <Styled.Icon iconName={IconName.Calculator} />,
-                    label: stringGetter({ key: STRING_KEYS.FEES }),
-                    href: PortfolioRoute.Fees,
-                  },
-                  {
-                    value: PortfolioRoute.History,
-                    slotBefore: <Styled.Icon iconName={IconName.History} />,
-                    label: stringGetter({ key: STRING_KEYS.HISTORY }),
-                    href: PortfolioRoute.History,
-                  },
-                ],
-              },
-            ]}
-          />
+          <Styled.SideBar>
+            <Styled.NavigationMenu
+              items={[
+                {
+                  group: 'views',
+                  groupLabel: stringGetter({ key: STRING_KEYS.VIEWS }),
+                  items: [
+                    {
+                      value: PortfolioRoute.Overview,
+                      slotBefore: <Styled.Icon iconName={IconName.Overview} />,
+                      label: stringGetter({ key: STRING_KEYS.OVERVIEW }),
+                      href: PortfolioRoute.Overview,
+                    },
+                    {
+                      value: PortfolioRoute.Positions,
+                      slotBefore: <Styled.Icon iconName={IconName.Cube} />,
+                      label: stringGetter({ key: STRING_KEYS.POSITIONS }),
+                      href: PortfolioRoute.Positions,
+                    },
+                    {
+                      value: PortfolioRoute.Orders,
+                      slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
+                      label: stringGetter({ key: STRING_KEYS.ORDERS }),
+                      href: PortfolioRoute.Orders,
+                    },
+                    {
+                      value: PortfolioRoute.Fees,
+                      slotBefore: <Styled.Icon iconName={IconName.Calculator} />,
+                      label: stringGetter({ key: STRING_KEYS.FEES }),
+                      href: PortfolioRoute.Fees,
+                    },
+                    {
+                      value: PortfolioRoute.History,
+                      slotBefore: <Styled.Icon iconName={IconName.History} />,
+                      label: stringGetter({ key: STRING_KEYS.HISTORY }),
+                      href: PortfolioRoute.History,
+                    },
+                  ],
+                },
+              ]}
+            />
+            {onboardingState === OnboardingState.AccountConnected && (
+              <Styled.Footer>
+                <Button
+                  action={ButtonAction.Primary}
+                  onClick={() => dispatch(openDialog({ type: DialogTypes.Deposit }))}
+                >
+                  {stringGetter({ key: STRING_KEYS.DEPOSIT })}
+                </Button>
+                {usdcBalance > 0 && (
+                  <Button
+                    action={ButtonAction.Base}
+                    onClick={() => dispatch(openDialog({ type: DialogTypes.Withdraw }))}
+                  >
+                    {stringGetter({ key: STRING_KEYS.WITHDRAW })}
+                  </Button>
+                )}
+                {(usdcBalance > 0 || nativeTokenBalance.gt(0)) && (
+                  <Button
+                    action={ButtonAction.Base}
+                    onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
+                  >
+                    {stringGetter({ key: STRING_KEYS.TRANSFER })}
+                  </Button>
+                )}
+              </Styled.Footer>
+            )}
+          </Styled.SideBar>
         )
       }
     >
@@ -139,6 +181,26 @@ Styled.PortfolioMobile = styled.div`
   ${layoutMixins.expandingColumnWithHeader}
 `;
 
+Styled.SideBar = styled.div`
+  ${layoutMixins.flexColumn}
+  justify-content: space-between;
+
+  height: 100%;
+`;
+
+Styled.Footer = styled.div`
+  ${layoutMixins.row}
+  flex-wrap: wrap;
+  
+  padding: 1rem;
+
+  gap: 0.5rem;
+
+  > button {
+    flex-grow: 1;
+  }
+`;
+
 Styled.NavigationMenu = styled(NavigationMenu)`
   padding: 0.5rem;
   padding-top: 0;

src/pages/rewards/DYDXBalancePanel.tsx

@@ -43,23 +43,14 @@ export const DYDXBalancePanel = () => {
             {!canAccountTrade ? (
               <OnboardingTriggerButton size={ButtonSize.Small} />
             ) : (
-              <>
-                <Styled.ReceiveButton
-                  slotLeft={<Icon iconName={IconName.Qr} />}
-                  size={ButtonSize.Small}
-                  onClick={() => dispatch(openDialog({ type: DialogTypes.Receive }))}
-                >
-                  {stringGetter({ key: STRING_KEYS.RECEIVE })}
-                </Styled.ReceiveButton>
-                <Button
-                  slotLeft={<Icon iconName={IconName.Send} />}
-                  size={ButtonSize.Small}
-                  action={ButtonAction.Primary}
-                  onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
-                >
-                  {stringGetter({ key: STRING_KEYS.TRANSFER })}
-                </Button>
-              </>
+              <Button
+                slotLeft={<Icon iconName={IconName.Send} />}
+                size={ButtonSize.Small}
+                action={ButtonAction.Primary}
+                onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
+              >
+                {stringGetter({ key: STRING_KEYS.TRANSFER })}
+              </Button>
             )}
           </Styled.ReceiveAndTransferButtons>
         </Styled.Header>

src/styles/tradeViewMixins.ts

@@ -18,9 +18,5 @@ export const tradeViewMixins: Record<
     tbody {
       font: var(--font-small-book);
     }
-
-    thead tr {
-      box-shadow: none;
-    }
   `,
 };

src/views/MarketsDropdown.tsx

@@ -82,18 +82,18 @@ const MarketsDropdownContent = ({ onRowAction }: { onRowAction?: (market: string
                 ),
               },
               {
-                columnKey: 'priceChange24H',
-                getCellValue: (row) => row.priceChange24H,
+                columnKey: 'priceChange24HPercent',
+                getCellValue: (row) => row.priceChange24HPercent,
                 label: stringGetter({ key: STRING_KEYS._24H }),
-                renderCell: ({ priceChange24H, priceChange24HPercent }) => (
+                renderCell: ({ priceChange24HPercent }) => (
                   <Styled.InlineRow>
-                    {!priceChange24H ? (
+                    {!priceChange24HPercent ? (
                       <Styled.Output type={OutputType.Text} value={null} />
                     ) : (
                       <Styled.PriceChangeOutput
                         type={OutputType.Percent}
                         value={priceChange24HPercent}
-                        isNegative={MustBigNumber(priceChange24H).isNegative()}
+                        isNegative={MustBigNumber(priceChange24HPercent).isNegative()}
                       />
                     )}
                   </Styled.InlineRow>

src/views/TransferStatusSteps.tsx

@@ -45,7 +45,12 @@ export const TransferStatusSteps = ({ status, type }: ElementProps) => {
             type === 'deposit' ? STRING_KEYS.INITIATED_DEPOSIT : STRING_KEYS.INITIATED_WITHDRAWAL,
         }),
         step: TransferStatusStep.FromChain,
-        link: status?.fromChain?.transactionUrl,
+        link: 
+          type === 'deposit'
+            ? status?.fromChain?.transactionUrl
+            : routeStatus?.[0]?.chainId === dydxChainId && routeStatus[0].txHash
+            ? `${mintscanTxUrl?.replace('{tx_hash}', routeStatus[0].txHash.replace('0x', ''))}`
+            : undefined,
       },
       {
         label: stringGetter({ key: STRING_KEYS.BRIDGING_TOKENS }),
@@ -64,7 +69,7 @@ export const TransferStatusSteps = ({ status, type }: ElementProps) => {
           type === 'withdrawal'
             ? status?.toChain?.transactionUrl
             : currentStatus?.chainId === dydxChainId && currentStatus?.txHash
-            ? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash)}`
+            ? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash.replace('0x', ''))}`
             : undefined,
       },
     ];

src/views/dialogs/OnboardingDialog.tsx

@@ -3,6 +3,7 @@ import styled, { AnyStyledComponent, css } from 'styled-components';
 
 import { AnalyticsEvent } from '@/constants/analytics';
 import { STRING_KEYS } from '@/constants/localization';
+import { isMainnet } from '@/constants/networks';
 import { EvmDerivedAccountStatus, OnboardingSteps } from '@/constants/account';
 import { wallets } from '@/constants/wallets';
 
@@ -26,6 +27,7 @@ import { track } from '@/lib/analytics';
 import { AcknowledgeTerms } from './OnboardingDialog/AcknowledgeTerms';
 import { ChooseWallet } from './OnboardingDialog/ChooseWallet';
 import { GenerateKeys } from './OnboardingDialog/GenerateKeys';
+import { DepositForm } from '../forms/AccountManagementForms/DepositForm';
 
 type ElementProps = {
   setIsOpen?: (open: boolean) => void;
@@ -50,7 +52,7 @@ export const OnboardingDialog = ({ setIsOpen }: ElementProps) => {
       disconnect();
     }
     setIsOpen?.(open);
-  }
+  };
 
   return (
     <Styled.Dialog
@@ -82,10 +84,7 @@ export const OnboardingDialog = ({ setIsOpen }: ElementProps) => {
             description: stringGetter({ key: STRING_KEYS.SIGNATURE_CREATES_COSMOS_WALLET }),
             children: (
               <Styled.Content>
-                <GenerateKeys
-                  status={derivationStatus}
-                  setStatus={setDerivationStatus}
-                />
+                <GenerateKeys status={derivationStatus} setStatus={setDerivationStatus} />
               </Styled.Content>
             ),
             width: '23rem',
@@ -101,14 +100,22 @@ export const OnboardingDialog = ({ setIsOpen }: ElementProps) => {
           },
           [OnboardingSteps.DepositFunds]: {
             title: stringGetter({ key: STRING_KEYS.DEPOSIT }),
-            description: 'Test funds will be sent directly to your dYdX account.',
+            description: !isMainnet && 'Test funds will be sent directly to your dYdX account.',
             children: (
               <Styled.Content>
-                <TestnetDepositForm
-                  onDeposit={() => {
-                    track(AnalyticsEvent.TransferFaucet);
-                  }}
-                />
+                {isMainnet ? (
+                  <DepositForm
+                    onDeposit={() => {
+                      track(AnalyticsEvent.TransferDeposit);
+                    }}
+                  />
+                ) : (
+                  <TestnetDepositForm
+                    onDeposit={() => {
+                      track(AnalyticsEvent.TransferFaucet);
+                    }}
+                  />
+                )}
               </Styled.Content>
             ),
           },

src/views/dialogs/RestrictedGeoDialog.tsx

@@ -1,11 +1,13 @@
 import styled, { AnyStyledComponent } from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
+import { isDev } from '@/constants/networks';
 import { useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Dialog } from '@/components/Dialog';
 import { Icon, IconName } from '@/components/Icon';
+import { NetworkSelectMenu } from '@/views/menus/NetworkSelectMenu';
 
 type ElementProps = {
   preventClose?: boolean;
@@ -25,6 +27,7 @@ export const RestrictedGeoDialog = ({ preventClose, setIsOpen }: ElementProps) =
     >
       <Styled.Content>
         {stringGetter({ key: STRING_KEYS.REGION_NOT_PERMITTED_SUBTITLE })}
+        {isDev && <NetworkSelectMenu />}
       </Styled.Content>
     </Dialog>
   );

src/views/dialogs/RestrictedWalletDialog.tsx

@@ -1,11 +1,13 @@
 import styled, { AnyStyledComponent } from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
+import { isDev } from '@/constants/networks';
 import { useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Dialog } from '@/components/Dialog';
 import { Icon, IconName } from '@/components/Icon';
+import { NetworkSelectMenu } from '@/views/menus/NetworkSelectMenu';
 
 type ElementProps = {
   preventClose?: boolean;
@@ -25,6 +27,7 @@ export const RestrictedWalletDialog = ({ preventClose, setIsOpen }: ElementProps
     >
       <Styled.Content>
         {stringGetter({ key: STRING_KEYS.REGION_NOT_PERMITTED_SUBTITLE })}
+        {isDev && <NetworkSelectMenu />}
       </Styled.Content>
     </Dialog>
   );

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -44,7 +44,6 @@ 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';

src/views/menus/NetworkSelectMenu.tsx

@@ -33,6 +33,8 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.DropdownSelectMenu = styled(DropdownSelectMenu)`
   ${headerMixins.dropdownTrigger}
 
+  width: max-content;
+
   & > span:first-of-type {
     ${layoutMixins.textOverflow}
     max-width: 5.625rem;