bump abacus

* Account dropdown onboarding entrypoints

* Update based on latest designs

.env.example

@@ -6,5 +6,5 @@ VITE_PK_ENCRYPTION_KEY=
 
 VITE_WALLETCONNECT2_PROJECT_ID=
 
-VITE_V3_TOKEN_ADDRESS=
-VITE_TOKEN_MIGRATION_URI=
+VITE_V3_TOKEN_ADDRESS=0x6d5bb505a4f85c10b122ccc36e30f57e2b86a291
+VITE_TOKEN_MIGRATION_URI=https://bridge.dydx.trade/

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.3",
+    "@dydxprotocol/v4-abacus": "^1.0.10",
     "@dydxprotocol/v4-client-js": "^1.0.0",
     "@dydxprotocol/v4-localization": "^1.0.0",
     "@ethersproject/providers": "^5.7.2",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@0xsquid/sdk':
     specifier: ^1.10.0
@@ -23,8 +27,8 @@ dependencies:
     specifier: ^0.31.0
     version: 0.31.0
   '@dydxprotocol/v4-abacus':
-    specifier: ^1.0.3
-    version: 1.0.3
+    specifier: ^1.0.10
+    version: 1.0.10
   '@dydxprotocol/v4-client-js':
     specifier: ^1.0.0
     version: 1.0.0
@@ -975,8 +979,8 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/v4-abacus@1.0.3:
-    resolution: {integrity: sha512-GuX37/DMMNSke8ZFcw52II7IVJfUgVGHqoi1Uw2cUb+hgIjjSG3OtbyRWedm5r6nqWq8BNLOexI0VVFB6OMVYg==}
+  /@dydxprotocol/v4-abacus@1.0.10:
+    resolution: {integrity: sha512-SdxI/JcyxM1ydtR9ImWujeurea3gbxj37qYnw1wz829BQiZ05uNEtll3xJCI0MjpG+01ARsxVys7SHbpjSxwOg==}
     dev: false
 
   /@dydxprotocol/v4-client-js@1.0.0:
@@ -7652,7 +7656,7 @@ packages:
     resolution: {integrity: sha512-WIdaQ8uW1vIbYvNnAVunkC6yxTrneJC7VQ5UUQ0kuw8b0C0A39KTIpoQHCfc8tV7o9vF4niwRhdXEdfAgQEsQQ==}
     dependencies:
       cosmos-directory-types: 0.0.6
-      node-fetch-native: 1.4.0
+      node-fetch-native: 1.4.1
     dev: false
 
   /cosmos-directory-types@0.0.6:
@@ -11283,8 +11287,8 @@ packages:
     engines: {node: '>=10.5.0'}
     dev: true
 
-  /node-fetch-native@1.4.0:
-    resolution: {integrity: sha512-F5kfEj95kX8tkDhUCYdV8dg3/8Olx/94zB8+ZNthFs6Bz31UpUi8Xh40TN3thLwXgrwXry1pEg9lJ++tLWTcqA==}
+  /node-fetch-native@1.4.1:
+    resolution: {integrity: sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==}
     dev: false
 
   /node-fetch@2.6.12:
@@ -14096,7 +14100,3 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

public/configs/env.json

@@ -38,6 +38,7 @@
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -110,6 +111,7 @@
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -181,6 +183,7 @@
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -252,6 +255,7 @@
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -323,6 +327,7 @@
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -396,6 +401,7 @@
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -469,6 +475,7 @@
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -546,6 +553,7 @@
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -620,6 +628,7 @@
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -694,6 +703,7 @@
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -768,6 +778,7 @@
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -842,6 +853,7 @@
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -906,6 +918,7 @@
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -980,6 +993,7 @@
          "dydxChainId": "[mainnet chain id]",
          "chainName": "dYdX Chain",
          "chainLogo": "dydx-chain.png",
+         "squidIntegratorId": "[mainnet squid integrator id]",
          "isMainNet": true,
          "tokens": {
             "comment": "Change according to mainnet release",

src/components/CollapsibleTabs.tsx

@@ -225,6 +225,7 @@ Styled.CollapsibleContent = styled(CollapsibleContent)`
 `;
 
 Styled.IconButton = styled(IconButton)`
+  --button-icon-size: 1em;
   ${Styled.CollapsibleRoot}[data-state='closed'] & {
     rotate: -0.5turn;
   }

src/components/ComboboxDialogMenu.tsx

@@ -34,6 +34,7 @@ type PickDialogProps = Pick<
   | 'slotHeaderInner'
   | 'slotTrigger'
   | 'slotFooter'
+  | 'preventClose'
 >;
 
 export const ComboboxDialogMenu = <
@@ -57,6 +58,7 @@ export const ComboboxDialogMenu = <
   children,
 
   placement = DialogPlacement.Default,
+  preventClose,
   className,
 }: ElementProps<MenuItemValue, MenuGroupValue> &
   PickComboxMenuProps<MenuItemValue, MenuGroupValue> &
@@ -72,6 +74,7 @@ export const ComboboxDialogMenu = <
     slotTrigger={slotTrigger}
     slotFooter={slotFooter}
     placement={placement}
+    preventClose={preventClose}
     className={className}
   >
     <Styled.ComboboxMenu

src/components/DropdownHeaderMenu.tsx

@@ -33,9 +33,11 @@ export const DropdownHeaderMenu = <MenuItemValue extends string>({
 
   return (
     <Root>
-      <Styled.Trigger className={className}>
+      <Styled.Trigger className={className} asChild>
+        <div>
         {children}
         <Styled.DropdownIconButton iconName={IconName.Caret} isToggle />
+        </div>
       </Styled.Trigger>
       <Portal>
         <Styled.Content

src/components/Icon.tsx

@@ -24,9 +24,10 @@ import {
   CommentIcon,
   CopyIcon,
   CubeIcon,
+  DepositIcon,
+  DepthChartIcon,
   DiscordIcon,
   EtherscanIcon,
-  DepthChartIcon,
   ExportKeysIcon,
   FeedbackIcon,
   FileIcon,
@@ -69,6 +70,7 @@ import {
   WarningIcon,
   WebsiteIcon,
   WhitepaperIcon,
+  WithdrawIcon,
 } from '@/icons';
 
 export enum IconName {
@@ -93,6 +95,7 @@ export enum IconName {
   Comment = 'Comment',
   Copy = 'Copy',
   Cube = 'Cube',
+  Deposit = 'Deposit',
   DepthChart = 'DepthChart',
   Discord = 'Discord',
   Etherscan = 'Etherscan',
@@ -139,6 +142,7 @@ export enum IconName {
   Warning = 'Warning',
   Website = 'Website',
   Whitepaper = 'Whitepaper',
+  Withdraw = 'Withdraw',
 }
 
 const icons = {
@@ -163,6 +167,7 @@ const icons = {
   [IconName.Comment]: CommentIcon,
   [IconName.Copy]: CopyIcon,
   [IconName.Cube]: CubeIcon,
+  [IconName.Deposit]: DepositIcon,
   [IconName.DepthChart]: DepthChartIcon,
   [IconName.Discord]: DiscordIcon,
   [IconName.Etherscan]: EtherscanIcon,
@@ -208,6 +213,7 @@ const icons = {
   [IconName.Warning]: WarningIcon,
   [IconName.Website]: WebsiteIcon,
   [IconName.Whitepaper]: WhitepaperIcon,
+  [IconName.Withdraw]: WithdrawIcon,
 } as Record<IconName, ElementType>;
 
 type ElementProps = {

src/components/IconButton.tsx

@@ -67,6 +67,7 @@ const Styled: Record<string, AnyStyledComponent> = {};
 const buttonMixin = css`
   // Params
   --button-icon-size: 1.125em;
+  --button-padding: 0;
 
   // Rules
   > * {

src/components/NavigationMenu.tsx

@@ -71,7 +71,7 @@ const NavItem = forwardRef(
           )}
         </span>
         {slotAfter}
-        {subitems?.length && <Styled.Icon iconName={IconName.Caret} />}
+        {subitems?.length && <Styled.Icon iconName={IconName.Triangle} />}
       </>
     );
 
@@ -525,7 +525,7 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
 `;
 
 Styled.Icon = styled(Icon)`
-  height: 0.75em;
+  font-size: 0.375em;
   transition: rotate 0.3s var(--ease-out-expo);
 
   ${Styled.List}[data-orientation="menu"] & {

src/components/Panel.tsx

@@ -31,7 +31,7 @@ export const Panel = ({
   hasSeparator,
   className,
 }: PanelProps & PanelStyleProps) => (
-  <Styled.Panel onClick={onClick}>
+  <Styled.Panel onClick={onClick} className={className}>
     <Styled.Left>
       {href ? (
         <Link to={href}>
@@ -53,7 +53,7 @@ export const Panel = ({
           </Styled.Header>
         )
       )}
-      <Styled.Content className={className}>{children}</Styled.Content>
+      <Styled.Content>{children}</Styled.Content>
     </Styled.Left>
     {slotRight}
   </Styled.Panel>
@@ -61,11 +61,29 @@ export const Panel = ({
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
-Styled.Panel = styled.section`
+Styled.Panel = styled.section<{ onClick?: () => void }>`
+  --panel-paddingY: 1rem;
+  --panel-paddingX: 1rem;
+  --panel-content-paddingY: var(--panel-paddingY);
+  --panel-content-paddingX: var(--panel-paddingX);
+
   ${layoutMixins.row}
 
   background-color: var(--color-layer-3);
   border-radius: 0.875rem;
+
+  ${({ onClick }) =>
+    onClick &&
+    css`
+      cursor: pointer;
+
+      &:hover {
+        button:not(:disabled) {
+          color: var(--button-hover-textColor);
+          filter: var(--button-hover-filter);
+        }
+      }
+    `}
 `;
 
 Styled.Left = styled.div`
@@ -75,7 +93,7 @@ Styled.Left = styled.div`
 
 Styled.Header = styled.header<{ hasSeparator?: boolean }>`
   ${layoutMixins.spacedRow}
-  padding: 1rem 1rem;
+  padding: var(--panel-paddingY) var(--panel-paddingX);
 
   ${({ hasSeparator }) =>
     hasSeparator &&
@@ -94,5 +112,5 @@ Styled.Content = styled.div`
   ${layoutMixins.scrollArea}
   ${layoutMixins.stickyArea0}
   --stickyArea0-background: transparent;
-  padding: 1rem 1rem;
+  padding: var(--panel-content-paddingY) var(--panel-content-paddingX);
 `;

src/components/ToggleGroup.tsx

@@ -7,13 +7,15 @@ import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { useBreakpoints } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-import {  type BaseButtonProps } from '@/components/BaseButton';
+import { type BaseButtonProps } from '@/components/BaseButton';
 import { ToggleButton } from '@/components/ToggleButton';
 
 type ElementProps<MenuItemValue extends string> = {
   items: MenuItem<MenuItemValue>[];
   value: MenuItemValue;
-  onValueChange: (value: MenuItemValue) => void;
+  onValueChange: (value: any) => void;
+  onInteraction?: () => void;
+  ensureSelected?: boolean;
 };
 
 type StyleProps = {
@@ -25,10 +27,14 @@ export const ToggleGroup = forwardRef(
     {
       items,
       value,
+      ensureSelected = true,
       onValueChange,
+      onInteraction,
+
       className,
       size,
       shape = ButtonShape.Pill,
+
       ...buttonProps
     }: ElementProps<MenuItemValue> & StyleProps & BaseButtonProps,
     ref: Ref<HTMLDivElement>
@@ -40,12 +46,17 @@ export const ToggleGroup = forwardRef(
         ref={ref}
         type="single"
         value={value}
-        onValueChange={onValueChange}
+        onValueChange={(newValue: MenuItemValue) => {
+          if ((ensureSelected && newValue) || !ensureSelected) {
+            onValueChange(newValue);
+          }
+          onInteraction?.();
+        }}
         className={className}
         loop
       >
         {items.map((item) => (
-          <Item key={item.value} value={item.value} aria-label={item.label} asChild>
+          <Item key={item.value} value={item.value} asChild>
             <ToggleButton
               size={size ? size : isTablet ? ButtonSize.Small : ButtonSize.XSmall}
               shape={shape}

src/hooks/useMarketsData.ts

@@ -6,8 +6,10 @@ import { MarketFilters, MARKET_FILTER_LABELS, type MarketData } from '@/constant
 import { getAssets } from '@/state/assetsSelectors';
 import { getPerpetualMarkets } from '@/state/perpetualsSelectors';
 
+import { isTruthy } from '@/lib/isTruthy';
+
 const filterFunctions = {
-  [MarketFilters.ALL]: (market: MarketData) => true,
+  [MarketFilters.ALL]: () => true,
   [MarketFilters.LAYER_1]: (market: MarketData) => {
     return market.asset.tags?.toArray().includes('Layer 1');
   },
@@ -28,13 +30,15 @@ export const useMarketsData = (
   const allAssets = useSelector(getAssets, shallowEqual) || {};
 
   const markets = useMemo(() => {
-    return Object.values(allPerpetualMarkets).map((marketData) => ({
-      asset: allAssets[marketData.assetId],
-      tickSizeDecimals: marketData.configs?.tickSizeDecimals,
-      ...marketData,
-      ...marketData.perpetual,
-      ...marketData.configs,
-    })) as MarketData[];
+    return Object.values(allPerpetualMarkets)
+      .filter(isTruthy)
+      .map((marketData) => ({
+        asset: allAssets[marketData.assetId],
+        tickSizeDecimals: marketData.configs?.tickSizeDecimals,
+        ...marketData,
+        ...marketData.perpetual,
+        ...marketData.configs,
+      })) as MarketData[];
   }, [allPerpetualMarkets, allAssets]);
 
   const filteredMarkets = useMemo(() => {

src/hooks/useSquid.tsx

@@ -22,7 +22,11 @@ const useSquidContext = () => {
   };
 
   const squid = useMemo(
-    () => new Squid({ baseUrl: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.endpoints['0xsquid'] }),
+    () =>
+      new Squid({
+        baseUrl: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.endpoints['0xsquid'],
+        integratorId: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.squidIntegratorId,
+      }),
     [selectedNetwork]
   );
 

src/icons/deposit.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <g clip-path="url(#clip0_18204_36775)">
+    <path d="M13.2426 6.25736C14.0817 7.09647 14.6531 8.16557 14.8846 9.32946C15.1162 10.4933 14.9973 11.6997 14.5432 12.7961C14.0891 13.8925 13.32 14.8295 12.3334 15.4888C11.3467 16.1481 10.1866 16.5 8.99993 16.5C7.81324 16.5 6.6532 16.1481 5.66651 15.4888C4.67981 14.8295 3.91078 13.8925 3.45665 12.7961C3.00253 11.6997 2.88371 10.4933 3.11522 9.32946C3.34673 8.16557 3.91817 7.09647 4.75729 6.25736" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round"/>
+    <path d="M11.25 9L9 11.25M9 11.25L6.75 9M9 11.25V1.6875" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_18204_36775">
+      <rect width="18" height="18" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

src/icons/index.ts

@@ -19,6 +19,7 @@ export { default as CoinsIcon } from './coins.svg';
 export { default as CommentIcon } from './comment.svg';
 export { default as CopyIcon } from './copy.svg';
 export { default as CubeIcon } from './cube.svg';
+export { default as DepositIcon } from './deposit.svg';
 export { default as DepthChartIcon } from './depth-chart.svg';
 export { default as DiscordIcon } from './discord.svg';
 export { default as ExportKeysIcon } from './export-keys.svg';
@@ -59,6 +60,7 @@ export { default as TransferIcon } from './transfer.svg';
 export { default as TriangleIcon } from './triangle.svg';
 export { default as TryAgainIcon } from './try-again.svg';
 export { default as WarningIcon } from './warning.svg';
+export { default as WithdrawIcon } from './withdraw.svg';
 
 // Wallets
 export { default as BitkeepIcon } from './wallets/bitkeep.svg';

src/icons/withdraw.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M13.2426 6.2573C14.0817 7.09641 14.6531 8.16551 14.8846 9.3294C15.1162 10.4933 14.9973 11.6997 14.5432 12.796C14.0891 13.8924 13.32 14.8295 12.3334 15.4888C11.3467 16.148 10.1866 16.4999 8.99993 16.4999C7.81324 16.4999 6.6532 16.148 5.66651 15.4888C4.67981 14.8295 3.91078 13.8924 3.45665 12.796C3.00253 11.6997 2.88371 10.4933 3.11522 9.3294C3.34673 8.16551 3.91817 7.09641 4.75729 6.2573" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round"/>
+  <path d="M11.25 2.9375L9 0.6875M9 0.6875L6.75 2.9375M9 0.6875V10.25" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/pages/Profile.tsx

@@ -180,7 +180,7 @@ Styled.MobileProfileLayout = styled.div`
   ${layoutMixins.contentContainerPage}
 
   gap: 1rem;
-  padding: 1rem;
+  padding: 1.25rem;
 `;
 
 Styled.Header = styled.header`
@@ -278,13 +278,17 @@ Styled.RewardsPanel = styled(Panel)`
 `;
 
 Styled.TablePanel = styled(Panel)`
-  max-width: calc(100vw - 2rem);
-  max-height: 10rem;
-  margin-top: 0.5rem;
-  padding: 0;
-  border-radius: 0.875rem;
+  --panel-content-paddingY: 0;
+  --panel-content-paddingX: 0;
+
+  > div > div {
+    margin-top: 0.5rem;
+    --scrollArea-height: 10rem;
+    border-radius: 0.875rem;
+  }
 
   table {
+    max-height: 10rem;
     --tableCell-padding: 0.25rem 1rem;
     --tableRow-backgroundColor: var(--color-layer-3);
     background-color: var(--color-layer-3);

src/pages/portfolio/Fees.tsx

@@ -1,12 +1,12 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Nullable } from '@dydxprotocol/v4-abacus';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 
 import { FeeTier } from '@/constants/abacus';
-import { FEE_DECIMALS, QUANTUM_MULTIPLIER } from '@/constants/numbers';
+import { FEE_DECIMALS } from '@/constants/numbers';
 import { STRING_KEYS } from '@/constants/localization';
-import { useAccounts, useBreakpoints, useStringGetter } from '@/hooks';
+import { useBreakpoints, useStringGetter } from '@/hooks';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { tableMixins } from '@/styles/tableMixins';
@@ -29,9 +29,8 @@ const EQUALITY_SYMBOL_MAP = {
 };
 
 export const Fees = () => {
-  const { dydxAddress } = useAccounts();
   const stringGetter = useStringGetter();
-  const { isNotTablet } = useBreakpoints();
+  const { isTablet, isNotTablet } = useBreakpoints();
   const userFeeTier = useSelector(getUserFeeTier, shallowEqual);
   const userStats = useSelector(getUserStats, shallowEqual);
   const feeTiers = useSelector(getFeeTiers, shallowEqual);
@@ -56,28 +55,28 @@ export const Fees = () => {
       <Styled.AdditionalConditions>
         {!isAdditional && !totalShare && !makerShare && <Output type={OutputType.Text} />}
         {!!totalShare && (
-          <Styled.TextRow>
-            {isAdditional && <span>{stringGetter({ key: STRING_KEYS.AND })}</span>}
-            <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_MARKET_SHARE })}</span>
-            <Styled.Highlighted>{'>'}</Styled.Highlighted>
+          <Styled.AdditionalConditionsText>
+            {isAdditional && stringGetter({ key: STRING_KEYS.AND })}{' '}
+            {stringGetter({ key: STRING_KEYS.EXCHANGE_MARKET_SHARE })}{' '}
+            <Styled.Highlighted>{'>'}</Styled.Highlighted>{' '}
             <Styled.HighlightOutput
               type={OutputType.Percent}
               value={totalShare}
               fractionDigits={0}
             />
-          </Styled.TextRow>
+          </Styled.AdditionalConditionsText>
         )}
         {!!makerShare && (
-          <Styled.TextRow>
-            {isAdditional && <span>{stringGetter({ key: STRING_KEYS.AND })}</span>}
-            <span>{stringGetter({ key: STRING_KEYS.MAKER_MARKET_SHARE })}</span>
-            <Styled.Highlighted>{'>'}</Styled.Highlighted>
+          <Styled.AdditionalConditionsText>
+            {isAdditional && stringGetter({ key: STRING_KEYS.AND })}{' '}
+            {stringGetter({ key: STRING_KEYS.MAKER_MARKET_SHARE })}{' '}
+            <Styled.Highlighted>{'>'}</Styled.Highlighted>{' '}
             <Styled.HighlightOutput
               type={OutputType.Percent}
               value={makerShare}
               fractionDigits={0}
             />
-          </Styled.TextRow>
+          </Styled.AdditionalConditionsText>
         )}
       </Styled.AdditionalConditions>
     ),
@@ -103,91 +102,90 @@ export const Fees = () => {
             },
           ]}
         />
-        <div>
-          <Styled.FeeTable
-            label="Fee Tiers"
-            data={feeTiers || []}
-            getRowKey={(row: FeeTier) => row.tier}
-            getRowAttributes={(row: FeeTier) => ({
-              'data-yours': row.tier === userFeeTier,
-            })}
-            columns={(
-              [
-                {
-                  columnKey: 'tier',
-                  getCellValue: (row) => row.tier,
-                  label: stringGetter({ key: STRING_KEYS.TIER }),
-                  allowsSorting: false,
-                  renderCell: ({ tier }) => (
-                    <Styled.Tier>
-                      <Styled.Output type={OutputType.Text} value={tier} />
-                      {tier === userFeeTier && (
-                        <Styled.YouTag size={TagSize.Medium}>
-                          {stringGetter({ key: STRING_KEYS.YOU })}
-                        </Styled.YouTag>
-                      )}
-                    </Styled.Tier>
-                  ),
-                },
-                {
-                  columnKey: 'volume',
-                  getCellValue: (row) => row.volume,
-                  label: stringGetter({ key: STRING_KEYS.VOLUME_30D }),
-                  allowsSorting: false,
-                  renderCell: ({ symbol, volume, makerShare, totalShare }) => (
-                    <>
-                      <span>{`${
-                        symbol in EQUALITY_SYMBOL_MAP
-                          ? EQUALITY_SYMBOL_MAP[symbol as keyof typeof EQUALITY_SYMBOL_MAP]
-                          : symbol
-                      } `}</span>
-                      <Styled.HighlightOutput type={OutputType.CompactFiat} value={volume} />
-                      {!isNotTablet &&
-                        AdditionalConditions({ totalShare, makerShare, isAdditional: true })}
-                    </>
-                  ),
-                },
-                isNotTablet && {
-                  columnKey: 'condition',
-                  getCellValue: (row) => row.volume,
-                  label: stringGetter({ key: STRING_KEYS.ADDITIONAL_CONDITION }),
-                  allowsSorting: false,
-                  renderCell: ({ totalShare, makerShare }) =>
-                    AdditionalConditions({ totalShare, makerShare }),
-                },
-                {
-                  columnKey: 'maker',
-                  getCellValue: (row) => row.maker,
-                  label: stringGetter({ key: STRING_KEYS.MAKER }),
-                  allowsSorting: false,
-                  renderCell: ({ maker }) => (
-                    <Styled.HighlightOutput
-                      type={OutputType.SmallPercent}
-                      value={maker}
-                      fractionDigits={FEE_DECIMALS}
-                    />
-                  ),
-                },
-                {
-                  columnKey: 'taker',
-                  getCellValue: (row) => row.taker,
-                  label: stringGetter({ key: STRING_KEYS.TAKER }),
-                  allowsSorting: false,
-                  renderCell: ({ taker }) => (
-                    <Styled.HighlightOutput
-                      type={OutputType.SmallPercent}
-                      value={taker}
-                      fractionDigits={FEE_DECIMALS}
-                    />
-                  ),
-                },
-              ] as ColumnDef<FeeTier>[]
-            ).filter(isTruthy)}
-            selectionBehavior="replace"
-            withOuterBorder={isNotTablet}
-            withInnerBorders
-          />
-        </div>
+
+        <Styled.FeeTable
+          label="Fee Tiers"
+          data={feeTiers || []}
+          getRowKey={(row: FeeTier) => row.tier}
+          getRowAttributes={(row: FeeTier) => ({
+            'data-yours': row.tier === userFeeTier,
+          })}
+          columns={(
+            [
+              {
+                columnKey: 'tier',
+                getCellValue: (row) => row.tier,
+                label: stringGetter({ key: STRING_KEYS.TIER }),
+                allowsSorting: false,
+                renderCell: ({ tier }) => (
+                  <Styled.Tier>
+                    <Styled.Output type={OutputType.Text} value={tier} />
+                    {tier === userFeeTier && (
+                      <Styled.YouTag size={TagSize.Medium}>
+                        {stringGetter({ key: STRING_KEYS.YOU })}
+                      </Styled.YouTag>
+                    )}
+                  </Styled.Tier>
+                ),
+              },
+              {
+                columnKey: 'volume',
+                getCellValue: (row) => row.volume,
+                label: stringGetter({ key: STRING_KEYS.VOLUME_30D }),
+                allowsSorting: false,
+                renderCell: ({ symbol, volume, makerShare, totalShare }) => (
+                  <>
+                    <span>{`${
+                      symbol in EQUALITY_SYMBOL_MAP
+                        ? EQUALITY_SYMBOL_MAP[symbol as keyof typeof EQUALITY_SYMBOL_MAP]
+                        : symbol
+                    } `}</span>
+                    <Styled.HighlightOutput type={OutputType.CompactFiat} value={volume} />
+                    {isTablet &&
+                      AdditionalConditions({ totalShare, makerShare, isAdditional: true })}
+                  </>
+                ),
+              },
+              isNotTablet && {
+                columnKey: 'condition',
+                getCellValue: (row) => row.volume,
+                label: stringGetter({ key: STRING_KEYS.ADDITIONAL_CONDITION }),
+                allowsSorting: false,
+                renderCell: ({ totalShare, makerShare }) =>
+                  AdditionalConditions({ totalShare, makerShare }),
+              },
+              {
+                columnKey: 'maker',
+                getCellValue: (row) => row.maker,
+                label: stringGetter({ key: STRING_KEYS.MAKER }),
+                allowsSorting: false,
+                renderCell: ({ maker }) => (
+                  <Styled.HighlightOutput
+                    type={OutputType.SmallPercent}
+                    value={maker}
+                    fractionDigits={FEE_DECIMALS}
+                  />
+                ),
+              },
+              {
+                columnKey: 'taker',
+                getCellValue: (row) => row.taker,
+                label: stringGetter({ key: STRING_KEYS.TAKER }),
+                allowsSorting: false,
+                renderCell: ({ taker }) => (
+                  <Styled.HighlightOutput
+                    type={OutputType.SmallPercent}
+                    value={taker}
+                    fractionDigits={FEE_DECIMALS}
+                  />
+                ),
+              },
+            ] as ColumnDef<FeeTier>[]
+          ).filter(isTruthy)}
+          selectionBehavior="replace"
+          withOuterBorder={isNotTablet}
+          withInnerBorders
+        />
       </Styled.ContentWrapper>
     </AttachedExpandingSection>
   );
@@ -198,21 +196,43 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.ContentWrapper = styled.div`
   ${layoutMixins.flexColumn}
   gap: 1.5rem;
+  max-width: 100vw;
 `;
 
 Styled.AdditionalConditions = styled.div`
   ${tableMixins.cellContentColumn}
+  justify-content: end;
 
   color: var(--color-text-0);
+  font: var(--font-small-book);
 
   > :nth-child(2) {
-    font: var(--font-base-book);
+    font: var(--font-small-book);
+  }
+`;
+
+Styled.AdditionalConditionsText = styled.span`
+  display: flex;
+  gap: 0.5ch;
+
+  @media ${breakpoints.mobile} {
+    display: inline;
+    max-width: 8rem;
+    min-width: 0;
+
+    output {
+      display: inline;
+    }
   }
 `;
 
 Styled.FeesDetails = styled(Details)`
   gap: 1rem;
 
+  @media ${breakpoints.notTablet} {
+    margin: 0 1.25rem;
+  }
+
   @media ${breakpoints.tablet} {
     padding: 1rem 1rem 0 1rem;
     --details-grid-numColumns: 1;
@@ -237,11 +257,7 @@ Styled.FeesDetails = styled(Details)`
   }
 
   output {
-    font: var(--font-medium-book);
-
-    @media ${breakpoints.tablet} {
-      font: var(--font-base-book);
-    }
+    font: var(--font-base-book);
   }
 `;
 
@@ -271,6 +287,11 @@ Styled.FeeTable = styled(Table)`
 
   font: var(--font-base-book);
 
+  @media ${breakpoints.mobile} {
+    --tableCell-padding: 1rem 1.25rem;
+    font: var(--font-small-book);
+  }
+
   tbody tr {
     &[data-yours='true'] {
       background-color: var(--color-layer-3);
@@ -283,6 +304,10 @@ Styled.FeeTable = styled(Table)`
 
   @media ${breakpoints.notTablet} {
     --tableHeader-backgroundColor: var(--color-layer-1);
+
+    thead tr {
+      --border-width: 0;
+    }
   }
 `;
 

src/pages/rewards/DYDXBalancePanel.tsx

@@ -32,11 +32,11 @@ export const DYDXBalancePanel = () => {
   const { chainTokenLabel } = useTokenConfigs();
 
   return (
-    <Panel
+    <Styled.Panel
       slotHeader={
         <Styled.Header>
           <Styled.Title>
-            {/* <AssetIcon symbol="DYDX" /> */}
+            <AssetIcon symbol={chainTokenLabel} />
             {chainTokenLabel}
           </Styled.Title>
           <Styled.ReceiveAndTransferButtons>
@@ -117,14 +117,19 @@ export const DYDXBalancePanel = () => {
           ]}
         />
       </Styled.Content>
-    </Panel>
+    </Styled.Panel>
   );
 };
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
+Styled.Panel = styled(Panel)`
+  --panel-paddingX: 1.5rem;
+`;
+
 Styled.Header = styled.div`
   ${layoutMixins.spacedRow}
+  gap: 1rem;
   padding: 1rem 1.5rem 0;
 `;
 
@@ -177,7 +182,7 @@ Styled.WalletAndStakedBalance = styled(Details)`
   --details-item-backgroundColor: var(--color-layer-6);
 
   grid-template-columns: 1fr 1fr;
-  gap: 0.5rem;
+  gap: 1rem;
 
   > div {
     gap: 1rem;

src/pages/rewards/MigratePanel.tsx

@@ -71,7 +71,7 @@ export const MigratePanel = () => {
       </Styled.Description>
     </Styled.MigratePanel>
   ) : (
-    <Styled.MobileMigratePanel
+    <Styled.MigratePanel
       slotHeader={
         <Styled.MobileMigrateHeader>
           <h3>
@@ -88,49 +88,52 @@ export const MigratePanel = () => {
         </Styled.MobileMigrateHeader>
       }
     >
-      <Styled.WithReceipt
-        slotReceipt={
-          <Styled.Details
-            items={[
-              {
-                key: 'available-to-migrate',
-                label: (
-                  <Styled.InlineRow>
-                    {stringGetter({ key: STRING_KEYS.AVAILABLE_TO_MIGRATE })}
-                    <Tag>DYDX</Tag>
-                  </Styled.InlineRow>
-                ),
-                value: <Output type={OutputType.Asset} value={tokenBalance} />,
-              },
-            ]}
-          />
-        }
-      >
-        {import.meta.env.VITE_TOKEN_MIGRATION_URI && (
-          <Button
-            action={tokenBalance ? ButtonAction.Primary : ButtonAction.Base}
-            size={ButtonSize.Medium}
-            slotRight={<Icon iconName={IconName.LinkOut} />}
-            href={import.meta.env.VITE_TOKEN_MIGRATION_URI}
-          >
-            {stringGetter({ key: STRING_KEYS.MIGRATE_NOW })}
-          </Button>
-        )}
-      </Styled.WithReceipt>
-      <Styled.InlineRow>
-        {stringGetter({ key: STRING_KEYS.WANT_TO_LEARN })}
-        <Link href={TOKEN_MIGRATION_LEARN_MORE_LINK} withIcon>
-          {stringGetter({ key: STRING_KEYS.CLICK_HERE })}
-        </Link>
-      </Styled.InlineRow>
-    </Styled.MobileMigratePanel>
+      <Styled.Column>
+        <Styled.WithReceipt
+          slotReceipt={
+            <Styled.Details
+              items={[
+                {
+                  key: 'available-to-migrate',
+                  label: (
+                    <Styled.InlineRow>
+                      {stringGetter({ key: STRING_KEYS.AVAILABLE_TO_MIGRATE })}
+                      <Tag>DYDX</Tag>
+                    </Styled.InlineRow>
+                  ),
+                  value: <Output type={OutputType.Asset} value={tokenBalance} />,
+                },
+              ]}
+            />
+          }
+        >
+          {import.meta.env.VITE_TOKEN_MIGRATION_URI && (
+            <Button
+              action={tokenBalance ? ButtonAction.Primary : ButtonAction.Base}
+              size={ButtonSize.Medium}
+              slotRight={<Icon iconName={IconName.LinkOut} />}
+              href={import.meta.env.VITE_TOKEN_MIGRATION_URI}
+            >
+              {stringGetter({ key: STRING_KEYS.MIGRATE_NOW })}
+            </Button>
+          )}
+        </Styled.WithReceipt>
+        <Styled.InlineRow>
+          {stringGetter({ key: STRING_KEYS.WANT_TO_LEARN })}
+          <Link href={TOKEN_MIGRATION_LEARN_MORE_LINK} withIcon>
+            {stringGetter({ key: STRING_KEYS.CLICK_HERE })}
+          </Link>
+        </Styled.InlineRow>
+      </Styled.Column>
+    </Styled.MigratePanel>
   );
 };
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.MigratePanel = styled(Panel)`
-  padding: 1rem 1.5rem;
+  --panel-paddingX: 1.5rem;
+  width: 100%;
 `;
 
 Styled.Title = styled.h3`
@@ -163,10 +166,9 @@ Styled.Description = styled.div`
   --link-color: var(--color-text-1);
 `;
 
-Styled.MobileMigratePanel = styled(Panel)`
+Styled.Column = styled.div`
   ${layoutMixins.flexColumn}
   gap: 1rem;
-
   align-items: center;
 `;
 

src/pages/rewards/RewardsPage.tsx

@@ -40,11 +40,7 @@ export const RewardsPage = () => {
     <Styled.Page>
       {import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}
       <Styled.PanelRow>
-        {isTablet && (
-          <Styled.BalancePanelContainer>
-            <DYDXBalancePanel />
-          </Styled.BalancePanelContainer>
-        )}
+        {isTablet && <DYDXBalancePanel />}
 
         <Styled.Panel
           slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
@@ -72,11 +68,7 @@ export const RewardsPage = () => {
           </Styled.Description>
         </Styled.Panel>
 
-        {isNotTablet && (
-          <Styled.BalancePanelContainer>
-            <DYDXBalancePanel />
-          </Styled.BalancePanelContainer>
-        )}
+        {isNotTablet && <DYDXBalancePanel />}
       </Styled.PanelRow>
     </Styled.Page>
   );
@@ -87,10 +79,26 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.Page = styled.div`
   ${layoutMixins.contentContainerPage}
   gap: 1.5rem;
+  padding: 2rem;
+  align-items: center;
+
+  > * {
+    --content-max-width: 70rem;
+    max-width: min(calc(100vw - 4rem), var(--content-max-width));
+  }
+
+  @media ${breakpoints.tablet} {
+    padding: 1.25rem;
+
+    > * {
+      max-width: calc(100vw - 2.5rem);
+      width: 100%;
+    }
+  }
 `;
 
 Styled.Panel = styled(Panel)`
-  padding: 1rem 1.5rem;
+  --panel-paddingX: 1.5rem;
 `;
 
 Styled.Title = styled.h3`
@@ -105,27 +113,14 @@ Styled.Description = styled.div`
 `;
 
 Styled.PanelRow = styled.div`
-  ${layoutMixins.spacedRow}
+  ${layoutMixins.gridEqualColumns}
   gap: 1.5rem;
-  max-width: min(100vw, var(--content-max-width));
-  align-items: flex-start;
 
-  > section {
-    cursor: pointer;
-  }
+  align-items: flex-start;
 
   @media ${breakpoints.tablet} {
     grid-auto-flow: row;
     grid-template-columns: 1fr;
-    max-width: auto;
-  }
-`;
-
-Styled.BalancePanelContainer = styled.div`
-  width: 21.25rem;
-
-  @media ${breakpoints.tablet} {
-    width: auto;
   }
 `;
 
@@ -135,5 +130,5 @@ Styled.IconButton = styled(IconButton)`
 `;
 
 Styled.Arrow = styled.div`
-  padding: 1rem 1.5rem;
+  padding: 1rem;
 `;

src/pages/trade/HorizontalPanel.tsx

@@ -227,8 +227,8 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
             },
           ]}
           value={view}
-          onValueChange={(newView: string) => {
-            setView((newView || view) as PanelView);
+          onValueChange={setView}
+          onInteraction={() => {
             setIsOpen?.(true);
           }}
         />

src/views/MarketFilter.tsx

@@ -29,7 +29,7 @@ export const MarketFilter = ({
     <>
       {!isSearch && (
         <ToggleGroup
-          items={Object.entries(filters).map(([key, value]) => ({
+          items={Object.values(filters).map((value) => ({
             label: stringGetter({ key: MARKET_FILTER_LABELS[value] }),
             value,
           }))}

src/views/MarketStatsDetails.tsx

@@ -198,8 +198,6 @@ Styled.Details = styled(Details)`
   @media ${breakpoints.tablet} {
     ${layoutMixins.withOuterAndInnerBorders}
 
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
     font: var(--font-small-book);
 
     > * {

src/views/charts/FundingChart.tsx

@@ -246,9 +246,7 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => {
               }[rate] || '',
           }))}
           value={fundingRateView}
-          onValueChange={(newRate: FundingRateResolution) => {
-            if (newRate) setFundingRateView(newRate);
-          }}
+          onValueChange={setFundingRateView}
           size={ButtonSize.XSmall}
         />
       </Styled.FundingRateToggle>

src/views/dialogs/TradeDialog.tsx

@@ -73,9 +73,7 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: ElementProps) =>
             <Styled.ToggleGroup
               items={allTradeTypeItems}
               value={selectedTradeType}
-              onValueChange={(tradeType: TradeTypes) =>
-                onTradeTypeChange(tradeType || selectedTradeType)
-              }
+              onValueChange={onTradeTypeChange}
             />
           ),
         },

src/views/forms/ClosePositionForm.tsx

@@ -209,7 +209,7 @@ export const ClosePositionForm = ({
           value: value.toString(),
         }))}
         value={percent?.toString() ?? ''}
-        onValueChange={(value: any) => onSelectPercentage((value || percent?.toString()) ?? '')}
+        onValueChange={onSelectPercentage}
         shape={ButtonShape.Rectangle}
       />
 

src/views/forms/TradeForm/MarketLeverageInput.tsx

@@ -153,9 +153,7 @@ export const MarketLeverageInput = ({
           value: MustBigNumber(leverageAmount).toFixed(LEVERAGE_DECIMALS),
         }))}
         value={MustBigNumber(formattedLeverageValue).abs().toFixed(LEVERAGE_DECIMALS)} // sign agnostic
-        onValueChange={(option?: number) =>
-          updateLeverage(option === undefined ? formattedLeverageValue : option)
-        }
+        onValueChange={updateLeverage}
         shape={ButtonShape.Rectangle}
       />
     </>

src/views/menus/AccountMenu.tsx

@@ -139,7 +139,7 @@ export const AccountMenu = () => {
                     fractionDigits={2}
                   />
                 </div>
-                <AssetActions asset={DydxChainAsset.USDC} dispatch={dispatch} />
+                <AssetActions asset={DydxChainAsset.USDC} dispatch={dispatch} withOnboarding />
               </div>
             </Styled.Balances>
           </Styled.AccountInfo>
@@ -212,28 +212,45 @@ export const AccountMenu = () => {
   );
 };
 
-const AssetActions = memo(({ asset, dispatch }: { asset: DydxChainAsset; dispatch: Dispatch }) => (
-  <Styled.InlineRow>
-    {[
-      // TODO(@rosepuppy): Add withdraw action for USDC
-      {
-        dialogType: DialogTypes.Receive,
-        iconName: IconName.Qr,
-      },
-      { dialogType: DialogTypes.Transfer, iconName: IconName.Send },
-    ].map(({ iconName, dialogType }) => (
-      <IconButton
-        key={dialogType}
-        action={ButtonAction.Base}
-        shape={ButtonShape.Square}
-        iconName={iconName}
-        onClick={() =>
-          dispatch(openDialog({ type: dialogType, dialogProps: { selectedAsset: asset } }))
-        }
-      />
-    ))}
-  </Styled.InlineRow>
-));
+const AssetActions = memo(
+  ({
+    asset,
+    dispatch,
+    withOnboarding,
+  }: {
+    asset: DydxChainAsset;
+    dispatch: Dispatch;
+    withOnboarding?: boolean;
+  }) => (
+    <Styled.InlineRow>
+      {[
+        withOnboarding && {
+          dialogType: DialogTypes.Withdraw,
+          iconName: IconName.Withdraw,
+        },
+        withOnboarding && {
+          dialogType: DialogTypes.Deposit,
+          iconName: IconName.Deposit,
+        },
+        {
+          dialogType: DialogTypes.Transfer,
+          dialogProps: { selectedAsset: asset },
+          iconName: IconName.Send,
+        },
+      ]
+        .filter(isTruthy)
+        .map(({ iconName, dialogType, dialogProps }) => (
+          <Styled.IconButton
+            key={dialogType}
+            action={ButtonAction.Base}
+            shape={ButtonShape.Square}
+            iconName={iconName}
+            onClick={() => dispatch(openDialog({ type: dialogType, dialogProps }))}
+          />
+        ))}
+    </Styled.InlineRow>
+  )
+);
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
@@ -351,3 +368,7 @@ Styled.ConnectToChain = styled(Styled.Column)`
     font: var(--font-small-book);
   }
 `;
+
+Styled.IconButton = styled(IconButton)`
+  --button-padding: 0 0.25rem;
+`;

src/views/menus/NotificationsMenu.tsx

@@ -1,10 +1,13 @@
 import React, { useMemo } from 'react';
-
+import styled from 'styled-components';
+import { layoutMixins } from '@/styles/layoutMixins';
 import { groupBy } from 'lodash';
 
 import { type Notification, NotificationStatus } from '@/constants/notifications';
 
+import { useBreakpoints } from '@/hooks';
 import { useNotifications } from '@/hooks/useNotifications';
+import { CloseIcon } from '@/icons';
 
 import { Button } from '@/components/Button';
 import { ButtonAction, ButtonSize } from '@/constants/buttons';
@@ -13,10 +16,6 @@ import { DialogPlacement } from '@/components/Dialog';
 import { Output, OutputType } from '@/components/Output';
 import { IconButton } from '@/components/IconButton';
 import { Toolbar } from '@/components/Toolbar';
-import { CloseIcon } from '@/icons';
-
-import styled from 'styled-components';
-import { layoutMixins } from '@/styles/layoutMixins';
 
 type ElementProps = {
   slotTrigger?: React.ReactNode;
@@ -27,6 +26,7 @@ export const NotificationsMenu = ({
   slotTrigger,
   placement = DialogPlacement.Sidebar,
 }: ElementProps) => {
+  const { isTablet } = useBreakpoints();
   const {
     notifications,
     getDisplayData,
@@ -173,6 +173,7 @@ export const NotificationsMenu = ({
         </$FooterToolbar>
       }
       placement={placement}
+      preventClose={isTablet}
     />
   );
 };