Padding fixes, markets data null fix, update .env.example (#112)

* update .env.example for token migration * bump icon size in icon button * add padding in rewards / fees page, panel changes * fix markets data crashing * fix market details overflow on tablet * fix market filters * prevent fees table overflow * remove notifications close button on mobile * fix nested button console warning * update ToggleGroup value change logic * panel hover impact button hover * update dropdown icon in header
2023-10-31 17:11:46 -04:00 · 2023-10-31 17:11:46 -04:00 · 890a4b2c0e
commit 890a4b2c0e
parent 8d3cc76d14
22 changed files with 289 additions and 225 deletions
--- a/.env.example
+++ b/.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/
--- a/src/components/CollapsibleTabs.tsx
+++ b/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;
  }
--- a/src/components/ComboboxDialogMenu.tsx
+++ b/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
--- a/src/components/DropdownHeaderMenu.tsx
+++ b/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
--- a/src/components/IconButton.tsx
+++ b/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
  > * {
--- a/src/components/NavigationMenu.tsx
+++ b/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"] & {
--- a/src/components/Panel.tsx
+++ b/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);
 `;
--- a/src/components/ToggleGroup.tsx
+++ b/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}
--- a/src/hooks/useMarketsData.ts
+++ b/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(() => {
--- a/src/pages/Profile.tsx
+++ b/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);
--- a/src/pages/portfolio/Fees.tsx
+++ b/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;
+    }
  }
 `;

--- a/src/pages/rewards/DYDXBalancePanel.tsx
+++ b/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;
--- a/src/pages/rewards/MigratePanel.tsx
+++ b/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;
 `;

--- a/src/pages/rewards/RewardsPage.tsx
+++ b/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;
 `;
--- a/src/pages/trade/HorizontalPanel.tsx
+++ b/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);
          }}
        />
--- a/src/views/MarketFilter.tsx
+++ b/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,
          }))}
--- a/src/views/MarketStatsDetails.tsx
+++ b/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);

    > * {
--- a/src/views/charts/FundingChart.tsx
+++ b/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>
--- a/src/views/dialogs/TradeDialog.tsx
+++ b/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}
            />
          ),
        },
--- a/src/views/forms/ClosePositionForm.tsx
+++ b/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}
      />

--- a/src/views/forms/TradeForm/MarketLeverageInput.tsx
+++ b/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}
      />
    </>
--- a/src/views/menus/NotificationsMenu.tsx
+++ b/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}
    />
  );
 };