Learnmore -> LearnMore

.env.example

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

src/components/CollapsibleTabs.tsx

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

src/components/DropdownHeaderMenu.tsx

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

src/components/Icon.tsx

@@ -24,10 +24,9 @@ import {
   CommentIcon,
   CopyIcon,
   CubeIcon,
-  DepositIcon,
-  DepthChartIcon,
   DiscordIcon,
   EtherscanIcon,
+  DepthChartIcon,
   ExportKeysIcon,
   FeedbackIcon,
   FileIcon,
@@ -70,7 +69,6 @@ import {
   WarningIcon,
   WebsiteIcon,
   WhitepaperIcon,
-  WithdrawIcon,
 } from '@/icons';
 
 export enum IconName {
@@ -95,7 +93,6 @@ export enum IconName {
   Comment = 'Comment',
   Copy = 'Copy',
   Cube = 'Cube',
-  Deposit = 'Deposit',
   DepthChart = 'DepthChart',
   Discord = 'Discord',
   Etherscan = 'Etherscan',
@@ -142,7 +139,6 @@ export enum IconName {
   Warning = 'Warning',
   Website = 'Website',
   Whitepaper = 'Whitepaper',
-  Withdraw = 'Withdraw',
 }
 
 const icons = {
@@ -167,7 +163,6 @@ const icons = {
   [IconName.Comment]: CommentIcon,
   [IconName.Copy]: CopyIcon,
   [IconName.Cube]: CubeIcon,
-  [IconName.Deposit]: DepositIcon,
   [IconName.DepthChart]: DepthChartIcon,
   [IconName.Discord]: DiscordIcon,
   [IconName.Etherscan]: EtherscanIcon,
@@ -213,7 +208,6 @@ 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,7 +67,6 @@ 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.Triangle} />}
+        {subitems?.length && <Styled.Icon iconName={IconName.Caret} />}
       </>
     );
 
@@ -525,7 +525,7 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
 `;
 
 Styled.Icon = styled(Icon)`
-  font-size: 0.375em;
+  height: 0.75em;
   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} className={className}>
+  <Styled.Panel onClick={onClick}>
     <Styled.Left>
       {href ? (
         <Link to={href}>
@@ -53,7 +53,7 @@ export const Panel = ({
           </Styled.Header>
         )
       )}
-      <Styled.Content>{children}</Styled.Content>
+      <Styled.Content className={className}>{children}</Styled.Content>
     </Styled.Left>
     {slotRight}
   </Styled.Panel>
@@ -61,29 +61,11 @@ export const Panel = ({
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
-Styled.Panel = styled.section<{ onClick?: () => void }>`
+Styled.Panel = styled.section`
-  --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`
@@ -93,7 +75,7 @@ Styled.Left = styled.div`
 
 Styled.Header = styled.header<{ hasSeparator?: boolean }>`
   ${layoutMixins.spacedRow}
-  padding: var(--panel-paddingY) var(--panel-paddingX);
+  padding: 1rem 1rem;
 
   ${({ hasSeparator }) =>
     hasSeparator &&
@@ -112,5 +94,5 @@ Styled.Content = styled.div`
   ${layoutMixins.scrollArea}
   ${layoutMixins.stickyArea0}
   --stickyArea0-background: transparent;
-  padding: var(--panel-content-paddingY) var(--panel-content-paddingX);
+  padding: 1rem 1rem;
 `;

src/components/ToggleGroup.tsx

@@ -7,15 +7,13 @@ 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: any) => void;
+  onValueChange: (value: MenuItemValue) => void;
-  onInteraction?: () => void;
-  ensureSelected?: boolean;
 };
 
 type StyleProps = {
@@ -27,14 +25,10 @@ export const ToggleGroup = forwardRef(
     {
       items,
       value,
-      ensureSelected = true,
       onValueChange,
-      onInteraction,
-
       className,
       size,
       shape = ButtonShape.Pill,
-
       ...buttonProps
     }: ElementProps<MenuItemValue> & StyleProps & BaseButtonProps,
     ref: Ref<HTMLDivElement>
@@ -46,17 +40,12 @@ export const ToggleGroup = forwardRef(
         ref={ref}
         type="single"
         value={value}
-        onValueChange={(newValue: MenuItemValue) => {
+        onValueChange={onValueChange}
-          if ((ensureSelected && newValue) || !ensureSelected) {
-            onValueChange(newValue);
-          }
-          onInteraction?.();
-        }}
         className={className}
         loop
       >
         {items.map((item) => (
-          <Item key={item.value} value={item.value} asChild>
+          <Item key={item.value} value={item.value} aria-label={item.label} asChild>
             <ToggleButton
               size={size ? size : isTablet ? ButtonSize.Small : ButtonSize.XSmall}
               shape={shape}

src/hooks/useMarketsData.ts

@@ -6,10 +6,8 @@ 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]: () => true,
+  [MarketFilters.ALL]: (market: MarketData) => true,
   [MarketFilters.LAYER_1]: (market: MarketData) => {
     return market.asset.tags?.toArray().includes('Layer 1');
   },
@@ -30,15 +28,13 @@ export const useMarketsData = (
   const allAssets = useSelector(getAssets, shallowEqual) || {};
 
   const markets = useMemo(() => {
-    return Object.values(allPerpetualMarkets)
+    return Object.values(allPerpetualMarkets).map((marketData) => ({
-      .filter(isTruthy)
+      asset: allAssets[marketData.assetId],
-      .map((marketData) => ({
+      tickSizeDecimals: marketData.configs?.tickSizeDecimals,
-        asset: allAssets[marketData.assetId],
+      ...marketData,
-        tickSizeDecimals: marketData.configs?.tickSizeDecimals,
+      ...marketData.perpetual,
-        ...marketData,
+      ...marketData.configs,
-        ...marketData.perpetual,
+    })) as MarketData[];
-        ...marketData.configs,
-      })) as MarketData[];
   }, [allPerpetualMarkets, allAssets]);
 
   const filteredMarkets = useMemo(() => {

src/icons/deposit.svg

@@ -1,11 +0,0 @@
-<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,7 +19,6 @@ 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';
@@ -60,7 +59,6 @@ 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

@@ -1,4 +0,0 @@
-<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: 1.25rem;
+  padding: 1rem;
 `;
 
 Styled.Header = styled.header`
@@ -278,17 +278,13 @@ Styled.RewardsPanel = styled(Panel)`
 `;
 
 Styled.TablePanel = styled(Panel)`
-  --panel-content-paddingY: 0;
+  max-width: calc(100vw - 2rem);
-  --panel-content-paddingX: 0;
+  max-height: 10rem;
-
+  margin-top: 0.5rem;
-  > div > div {
+  padding: 0;
-    margin-top: 0.5rem;
+  border-radius: 0.875rem;
-    --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, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } 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 } from '@/constants/numbers';
+import { FEE_DECIMALS, QUANTUM_MULTIPLIER } from '@/constants/numbers';
 import { STRING_KEYS } from '@/constants/localization';
-import { useBreakpoints, useStringGetter } from '@/hooks';
+import { useAccounts, useBreakpoints, useStringGetter } from '@/hooks';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { tableMixins } from '@/styles/tableMixins';
@@ -29,8 +29,9 @@ const EQUALITY_SYMBOL_MAP = {
 };
 
 export const Fees = () => {
+  const { dydxAddress } = useAccounts();
   const stringGetter = useStringGetter();
-  const { isTablet, isNotTablet } = useBreakpoints();
+  const { isNotTablet } = useBreakpoints();
   const userFeeTier = useSelector(getUserFeeTier, shallowEqual);
   const userStats = useSelector(getUserStats, shallowEqual);
   const feeTiers = useSelector(getFeeTiers, shallowEqual);
@@ -55,28 +56,28 @@ export const Fees = () => {
       <Styled.AdditionalConditions>
         {!isAdditional && !totalShare && !makerShare && <Output type={OutputType.Text} />}
         {!!totalShare && (
-          <Styled.AdditionalConditionsText>
+          <Styled.TextRow>
-            {isAdditional && stringGetter({ key: STRING_KEYS.AND })}{' '}
+            {isAdditional && <span>{stringGetter({ key: STRING_KEYS.AND })}</span>}
-            {stringGetter({ key: STRING_KEYS.EXCHANGE_MARKET_SHARE })}{' '}
+            <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_MARKET_SHARE })}</span>
-            <Styled.Highlighted>{'>'}</Styled.Highlighted>{' '}
+            <Styled.Highlighted>{'>'}</Styled.Highlighted>
             <Styled.HighlightOutput
               type={OutputType.Percent}
               value={totalShare}
               fractionDigits={0}
             />
-          </Styled.AdditionalConditionsText>
+          </Styled.TextRow>
         )}
         {!!makerShare && (
-          <Styled.AdditionalConditionsText>
+          <Styled.TextRow>
-            {isAdditional && stringGetter({ key: STRING_KEYS.AND })}{' '}
+            {isAdditional && <span>{stringGetter({ key: STRING_KEYS.AND })}</span>}
-            {stringGetter({ key: STRING_KEYS.MAKER_MARKET_SHARE })}{' '}
+            <span>{stringGetter({ key: STRING_KEYS.MAKER_MARKET_SHARE })}</span>
-            <Styled.Highlighted>{'>'}</Styled.Highlighted>{' '}
+            <Styled.Highlighted>{'>'}</Styled.Highlighted>
             <Styled.HighlightOutput
               type={OutputType.Percent}
               value={makerShare}
               fractionDigits={0}
             />
-          </Styled.AdditionalConditionsText>
+          </Styled.TextRow>
         )}
       </Styled.AdditionalConditions>
     ),
@@ -102,90 +103,91 @@ export const Fees = () => {
             },
           ]}
         />
-
+        <div>
-        <Styled.FeeTable
+          <Styled.FeeTable
-          label="Fee Tiers"
+            label="Fee Tiers"
-          data={feeTiers || []}
+            data={feeTiers || []}
-          getRowKey={(row: FeeTier) => row.tier}
+            getRowKey={(row: FeeTier) => row.tier}
-          getRowAttributes={(row: FeeTier) => ({
+            getRowAttributes={(row: FeeTier) => ({
-            'data-yours': row.tier === userFeeTier,
+              'data-yours': row.tier === userFeeTier,
-          })}
+            })}
-          columns={(
+            columns={(
-            [
+              [
-              {
+                {
-                columnKey: 'tier',
+                  columnKey: 'tier',
-                getCellValue: (row) => row.tier,
+                  getCellValue: (row) => row.tier,
-                label: stringGetter({ key: STRING_KEYS.TIER }),
+                  label: stringGetter({ key: STRING_KEYS.TIER }),
-                allowsSorting: false,
+                  allowsSorting: false,
-                renderCell: ({ tier }) => (
+                  renderCell: ({ tier }) => (
-                  <Styled.Tier>
+                    <Styled.Tier>
-                    <Styled.Output type={OutputType.Text} value={tier} />
+                      <Styled.Output type={OutputType.Text} value={tier} />
-                    {tier === userFeeTier && (
+                      {tier === userFeeTier && (
-                      <Styled.YouTag size={TagSize.Medium}>
+                        <Styled.YouTag size={TagSize.Medium}>
-                        {stringGetter({ key: STRING_KEYS.YOU })}
+                          {stringGetter({ key: STRING_KEYS.YOU })}
-                      </Styled.YouTag>
+                        </Styled.YouTag>
-                    )}
+                      )}
-                  </Styled.Tier>
+                    </Styled.Tier>
-                ),
+                  ),
-              },
+                },
-              {
+                {
-                columnKey: 'volume',
+                  columnKey: 'volume',
-                getCellValue: (row) => row.volume,
+                  getCellValue: (row) => row.volume,
-                label: stringGetter({ key: STRING_KEYS.VOLUME_30D }),
+                  label: stringGetter({ key: STRING_KEYS.VOLUME_30D }),
-                allowsSorting: false,
+                  allowsSorting: false,
-                renderCell: ({ symbol, volume, makerShare, totalShare }) => (
+                  renderCell: ({ symbol, volume, makerShare, totalShare }) => (
-                  <>
+                    <>
-                    <span>{`${
+                      <span>{`${
-                      symbol in EQUALITY_SYMBOL_MAP
+                        symbol in EQUALITY_SYMBOL_MAP
-                        ? EQUALITY_SYMBOL_MAP[symbol as keyof typeof EQUALITY_SYMBOL_MAP]
+                          ? EQUALITY_SYMBOL_MAP[symbol as keyof typeof EQUALITY_SYMBOL_MAP]
-                        : symbol
+                          : symbol
-                    } `}</span>
+                      } `}</span>
-                    <Styled.HighlightOutput type={OutputType.CompactFiat} value={volume} />
+                      <Styled.HighlightOutput type={OutputType.CompactFiat} value={volume} />
-                    {isTablet &&
+                      {!isNotTablet &&
-                      AdditionalConditions({ totalShare, makerShare, isAdditional: true })}
+                        AdditionalConditions({ totalShare, makerShare, isAdditional: true })}
-                  </>
+                    </>
-                ),
+                  ),
-              },
+                },
-              isNotTablet && {
+                isNotTablet && {
-                columnKey: 'condition',
+                  columnKey: 'condition',
-                getCellValue: (row) => row.volume,
+                  getCellValue: (row) => row.volume,
-                label: stringGetter({ key: STRING_KEYS.ADDITIONAL_CONDITION }),
+                  label: stringGetter({ key: STRING_KEYS.ADDITIONAL_CONDITION }),
-                allowsSorting: false,
+                  allowsSorting: false,
-                renderCell: ({ totalShare, makerShare }) =>
+                  renderCell: ({ totalShare, makerShare }) =>
-                  AdditionalConditions({ totalShare, makerShare }),
+                    AdditionalConditions({ totalShare, makerShare }),
-              },
+                },
-              {
+                {
-                columnKey: 'maker',
+                  columnKey: 'maker',
-                getCellValue: (row) => row.maker,
+                  getCellValue: (row) => row.maker,
-                label: stringGetter({ key: STRING_KEYS.MAKER }),
+                  label: stringGetter({ key: STRING_KEYS.MAKER }),
-                allowsSorting: false,
+                  allowsSorting: false,
-                renderCell: ({ maker }) => (
+                  renderCell: ({ maker }) => (
-                  <Styled.HighlightOutput
+                    <Styled.HighlightOutput
-                    type={OutputType.SmallPercent}
+                      type={OutputType.SmallPercent}
-                    value={maker}
+                      value={maker}
-                    fractionDigits={FEE_DECIMALS}
+                      fractionDigits={FEE_DECIMALS}
-                  />
+                    />
-                ),
+                  ),
-              },
+                },
-              {
+                {
-                columnKey: 'taker',
+                  columnKey: 'taker',
-                getCellValue: (row) => row.taker,
+                  getCellValue: (row) => row.taker,
-                label: stringGetter({ key: STRING_KEYS.TAKER }),
+                  label: stringGetter({ key: STRING_KEYS.TAKER }),
-                allowsSorting: false,
+                  allowsSorting: false,
-                renderCell: ({ taker }) => (
+                  renderCell: ({ taker }) => (
-                  <Styled.HighlightOutput
+                    <Styled.HighlightOutput
-                    type={OutputType.SmallPercent}
+                      type={OutputType.SmallPercent}
-                    value={taker}
+                      value={taker}
-                    fractionDigits={FEE_DECIMALS}
+                      fractionDigits={FEE_DECIMALS}
-                  />
+                    />
-                ),
+                  ),
-              },
+                },
-            ] as ColumnDef<FeeTier>[]
+              ] as ColumnDef<FeeTier>[]
-          ).filter(isTruthy)}
+            ).filter(isTruthy)}
-          selectionBehavior="replace"
+            selectionBehavior="replace"
-          withOuterBorder={isNotTablet}
+            withOuterBorder={isNotTablet}
-          withInnerBorders
+            withInnerBorders
-        />
+          />
+        </div>
       </Styled.ContentWrapper>
     </AttachedExpandingSection>
   );
@@ -196,43 +198,21 @@ 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-small-book);
+    font: var(--font-base-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;
@@ -257,7 +237,11 @@ Styled.FeesDetails = styled(Details)`
   }
 
   output {
-    font: var(--font-base-book);
+    font: var(--font-medium-book);
+
+    @media ${breakpoints.tablet} {
+      font: var(--font-base-book);
+    }
   }
 `;
 
@@ -287,11 +271,6 @@ 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);
@@ -304,10 +283,6 @@ 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 (
-    <Styled.Panel
+    <Panel
       slotHeader={
         <Styled.Header>
           <Styled.Title>
-            <AssetIcon symbol={chainTokenLabel} />
+            {/* <AssetIcon symbol="DYDX" /> */}
             {chainTokenLabel}
           </Styled.Title>
           <Styled.ReceiveAndTransferButtons>
@@ -117,19 +117,14 @@ export const DYDXBalancePanel = () => {
           ]}
         />
       </Styled.Content>
-    </Styled.Panel>
+    </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;
 `;
 
@@ -182,7 +177,7 @@ Styled.WalletAndStakedBalance = styled(Details)`
   --details-item-backgroundColor: var(--color-layer-6);
 
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  gap: 0.5rem;
 
   > div {
     gap: 1rem;

src/pages/rewards/MigratePanel.tsx

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

src/pages/rewards/RewardsPage.tsx

@@ -40,7 +40,11 @@ export const RewardsPage = () => {
     <Styled.Page>
       {import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}
       <Styled.PanelRow>
-        {isTablet && <DYDXBalancePanel />}
+        {isTablet && (
+          <Styled.BalancePanelContainer>
+            <DYDXBalancePanel />
+          </Styled.BalancePanelContainer>
+        )}
 
         <Styled.Panel
           slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
@@ -68,7 +72,11 @@ export const RewardsPage = () => {
           </Styled.Description>
         </Styled.Panel>
 
-        {isNotTablet && <DYDXBalancePanel />}
+        {isNotTablet && (
+          <Styled.BalancePanelContainer>
+            <DYDXBalancePanel />
+          </Styled.BalancePanelContainer>
+        )}
       </Styled.PanelRow>
     </Styled.Page>
   );
@@ -79,26 +87,10 @@ 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)`
-  --panel-paddingX: 1.5rem;
+  padding: 1rem 1.5rem;
 `;
 
 Styled.Title = styled.h3`
@@ -113,14 +105,27 @@ Styled.Description = styled.div`
 `;
 
 Styled.PanelRow = styled.div`
-  ${layoutMixins.gridEqualColumns}
+  ${layoutMixins.spacedRow}
   gap: 1.5rem;
-
+  max-width: min(100vw, var(--content-max-width));
   align-items: flex-start;
 
+  > section {
+    cursor: pointer;
+  }
+
   @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;
   }
 `;
 
@@ -130,5 +135,5 @@ Styled.IconButton = styled(IconButton)`
 `;
 
 Styled.Arrow = styled.div`
-  padding: 1rem;
+  padding: 1rem 1.5rem;
 `;

src/pages/trade/HorizontalPanel.tsx

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

src/styles/text.css

@@ -2,7 +2,7 @@
 
 :root {
   --fontFamily-base: "Satoshi", system-ui, -apple-system, Helvetica, Arial, sans-serif;
-  --fontFamily-monospace: monospace, var(--fontFamily-base);
+  --fontFamily-monospace: Courier, monospace, var(--fontFamily-base);
 
   --fontWeight-base-0: 450;
   --fontWeight-base-1: 500;

src/views/MarketFilter.tsx

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

src/views/MarketStatsDetails.tsx

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

src/views/dialogs/TradeDialog.tsx

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

src/views/forms/ClosePositionForm.tsx

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

src/views/forms/TradeForm/MarketLeverageInput.tsx

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

src/views/menus/AccountMenu.tsx

@@ -139,7 +139,7 @@ export const AccountMenu = () => {
                     fractionDigits={2}
                   />
                 </div>
-                <AssetActions asset={DydxChainAsset.USDC} dispatch={dispatch} withOnboarding />
+                <AssetActions asset={DydxChainAsset.USDC} dispatch={dispatch} />
               </div>
             </Styled.Balances>
           </Styled.AccountInfo>
@@ -212,45 +212,28 @@ export const AccountMenu = () => {
   );
 };
 
-const AssetActions = memo(
+const AssetActions = memo(({ asset, dispatch }: { asset: DydxChainAsset; dispatch: Dispatch }) => (
-  ({
+  <Styled.InlineRow>
-    asset,
+    {[
-    dispatch,
+      // TODO(@rosepuppy): Add withdraw action for USDC
-    withOnboarding,
+      {
-  }: {
+        dialogType: DialogTypes.Receive,
-    asset: DydxChainAsset;
+        iconName: IconName.Qr,
-    dispatch: Dispatch;
+      },
-    withOnboarding?: boolean;
+      { dialogType: DialogTypes.Transfer, iconName: IconName.Send },
-  }) => (
+    ].map(({ iconName, dialogType }) => (
-    <Styled.InlineRow>
+      <IconButton
-      {[
+        key={dialogType}
-        withOnboarding && {
+        action={ButtonAction.Base}
-          dialogType: DialogTypes.Withdraw,
+        shape={ButtonShape.Square}
-          iconName: IconName.Withdraw,
+        iconName={iconName}
-        },
+        onClick={() =>
-        withOnboarding && {
+          dispatch(openDialog({ type: dialogType, dialogProps: { selectedAsset: asset } }))
-          dialogType: DialogTypes.Deposit,
+        }
-          iconName: IconName.Deposit,
+      />
-        },
+    ))}
-        {
+  </Styled.InlineRow>
-          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> = {};
 
@@ -368,7 +351,3 @@ 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,13 +1,10 @@
 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';
@@ -16,6 +13,10 @@ 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;
@@ -26,7 +27,6 @@ export const NotificationsMenu = ({
   slotTrigger,
   placement = DialogPlacement.Sidebar,
 }: ElementProps) => {
-  const { isTablet } = useBreakpoints();
   const {
     notifications,
     getDisplayData,
@@ -173,7 +173,6 @@ export const NotificationsMenu = ({
         </$FooterToolbar>
       }
       placement={placement}
-      preventClose={isTablet}
     />
   );
 };