Remove Courier

Account dropdown onboarding entrypoints (#113 )
* Account dropdown onboarding entrypoints * Update based on latest designs
2023-11-02 13:36:52 -07:00 · 2023-10-31 14:29:36 -07:00 · 2023-10-31 17:11:46 -04:00 · 2023-10-31 11:02:45 -07:00
39 changed files with 623 additions and 333 deletions
@@ -6,5 +6,5 @@ VITE_PK_ENCRYPTION_KEY=
 VITE_WALLETCONNECT2_PROJECT_ID=
-VITE_V3_TOKEN_ADDRESS=
+VITE_V3_TOKEN_ADDRESS=0x6d5bb505a4f85c10b122ccc36e30f57e2b86a291
-VITE_TOKEN_MIGRATION_URI=
+VITE_TOKEN_MIGRATION_URI=https://bridge.dydx.trade/
@@ -71,7 +71,19 @@
            "tos": "https://dydx.exchange/v4-terms",
            "privacy": "https://dydx.exchange/privacy",
            "mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
-            "blogs": "https://www.dydx.foundation/blog"
+            "blogs": "https://www.dydx.foundation/blog",
            "foundation": "https://www.dydx.foundation",
            "help": "https://help.dydx.exchange/",
            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "documentation": "https://docs.dydx.exchange/",
            "community": "https://discord.com/invite/dydx",
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -130,7 +142,19 @@
            "tos": "https://dydx.exchange/v4-terms",
            "privacy": "https://dydx.exchange/privacy",
            "mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
-            "blogs": "https://www.dydx.foundation/blog"
+            "blogs": "https://www.dydx.foundation/blog",
            "foundation": "https://www.dydx.foundation",
            "help": "https://help.dydx.exchange/",
            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "documentation": "https://docs.dydx.exchange/",
            "community": "https://discord.com/invite/dydx",
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -189,7 +213,19 @@
            "tos": "https://dydx.exchange/v4-terms",
            "privacy": "https://dydx.exchange/privacy",
            "mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
-            "blogs": "https://www.dydx.foundation/blog"
+            "blogs": "https://www.dydx.foundation/blog",
            "foundation": "https://www.dydx.foundation",
            "help": "https://help.dydx.exchange/",
            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "documentation": "https://docs.dydx.exchange/",
            "community": "https://discord.com/invite/dydx",
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -248,7 +284,19 @@
            "tos": "https://dydx.exchange/v4-terms",
            "privacy": "https://dydx.exchange/privacy",
            "mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
-            "blogs": "https://www.dydx.foundation/blog"
+            "blogs": "https://www.dydx.foundation/blog",
            "foundation": "https://www.dydx.foundation",
            "help": "https://help.dydx.exchange/",
            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "documentation": "https://docs.dydx.exchange/",
            "community": "https://discord.com/invite/dydx",
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -312,7 +360,16 @@
            "community": "https://discord.com/invite/dydx",
            "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
            "blogs": "https://www.dydx.foundation/blog",
-            "help": "https://help.dydx.exchange"
+            "help": "https://help.dydx.exchange",
            "foundation": "https://www.dydx.foundation",
            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -376,7 +433,16 @@
            "community": "https://discord.com/invite/dydx",
            "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
            "blogs": "https://www.dydx.foundation/blog",
-            "help": "https://help.dydx.exchange"
+            "help": "https://help.dydx.exchange",
            "foundation": "https://www.dydx.foundation",
            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -443,7 +509,17 @@
            "documentation": "https://docs.dydx.exchange/",
            "community": "https://discord.com/invite/dydx",
            "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
-            "blogs": "https://www.dydx.foundation/blog"
+            "blogs": "https://www.dydx.foundation/blog",
            "foundation": "https://www.dydx.foundation",
            "help": "https://help.dydx.exchange/",
            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -507,7 +583,17 @@
            "documentation": "https://docs.dydx.exchange/",
            "community": "https://discord.com/invite/dydx",
            "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
-            "blogs": "https://www.dydx.foundation/blog"
+            "blogs": "https://www.dydx.foundation/blog",
            "foundation": "https://www.dydx.foundation",
            "help": "https://help.dydx.exchange/",
            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -571,7 +657,17 @@
            "documentation": "https://docs.dydx.exchange/",
            "community": "https://discord.com/invite/dydx",
            "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
-            "blogs": "https://www.dydx.foundation/blog"
+            "blogs": "https://www.dydx.foundation/blog",
            "foundation": "https://www.dydx.foundation",
            "help": "https://help.dydx.exchange/",
            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -635,7 +731,17 @@
            "documentation": "https://docs.dydx.exchange/",
            "community": "https://discord.com/invite/dydx",
            "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
-            "blogs": "https://www.dydx.foundation/blog"
+            "blogs": "https://www.dydx.foundation/blog",
            "foundation": "https://www.dydx.foundation",
            "help": "https://help.dydx.exchange/",
            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -699,7 +805,17 @@
            "documentation": "https://docs.dydx.exchange/",
            "community": "https://discord.com/invite/dydx",
            "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
-            "blogs": "https://www.dydx.foundation/blog"
+            "blogs": "https://www.dydx.foundation/blog",
            "foundation": "https://www.dydx.foundation",
            "help": "https://help.dydx.exchange/",
            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -824,10 +940,20 @@
            "privacy": "https://dydx.exchange/privacy",
            "statusPage": "https://status.v4testnet.dydx.exchange/",
            "mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
-            "documentation": "https://v4-teacher.vercel.app/",
+            "documentation": "https://docs.dydx.exchange/",
            "community": "https://discord.com/invite/dydx",
            "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
-            "blogs": "https://www.dydx.foundation/blog"
+            "blogs": "https://www.dydx.foundation/blog",
            "foundation": "https://www.dydx.foundation",
            "help": "https://help.dydx.exchange/",
            "initialMarginFractionLearnmore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
            "reduceOnlyLearnmore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
            "governanceLearnmore": "https://help.dydx.exchange",
            "stakingLearnmore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
            "accountExportLearnmore": "https://help.dydx.exchange",
            "walletLearnmore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
            "walletconnect": {
@@ -888,11 +1014,20 @@
            "tos": "[HTTP link to TOS]",
            "privacy": "[HTTP link to Privacy Policy]",
            "mintscan": "[HTTP link to Mintscan, with {tx_hash} placeholder]",
-            "documentation": "[HTTP link to documentation, can be null]",
+            "mintscanBase": "[HTTP link to TOS mintsacn base url]",
            "community": "[HTTP link to community, can be null]",
            "feedback": "[HTTP link to feedback form, can be null]",
            "blogs": "[HTTP link to blogs, can be null]",
-            "help": "[HTTP link to help page, can be null]"
+            "foundation": "[HTTP link to foundation, can be null]",
            "initialMarginFractionLearnMore": "[HTTP link to initial margin fraction learn more, can be null]",
            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "documentation": "[HTTP link to documentation, can be null]",
            "community": "[HTTP link to community, can be null]",
            "help": "[HTTP link to help page, can be null]",
            "governanceLearnMore": "[HTTP link to governance learn more, can be null]",
            "stakingLearnMore": "[HTTP link to staking learn more, can be null]",
            "keplrDashboard": "[HTTP link to keplr dashboard, can be null]",
            "accountExportLearnMore": "[HTTP link to account export learn more, can be null]",
            "walletLearnMore": "[HTTP link to wallet learn more, can be null]"
         },
         "wallets": {
            "walletconnect": {
@@ -225,6 +225,7 @@ Styled.CollapsibleContent = styled(CollapsibleContent)`
 `;
 Styled.IconButton = styled(IconButton)`
  --button-icon-size: 1em;
  ${Styled.CollapsibleRoot}[data-state='closed'] & {
    rotate: -0.5turn;
  }
@@ -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
@@ -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
@@ -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 = {
@@ -67,6 +67,7 @@ const Styled: Record<string, AnyStyledComponent> = {};
 const buttonMixin = css`
  // Params
  --button-icon-size: 1.125em;
  --button-padding: 0;
  // Rules
  > * {
@@ -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"] & {
@@ -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);
 `;
@@ -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}
@@ -2,11 +2,13 @@ import type { ReactNode } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { Content, Portal, Provider, Root, Trigger, Arrow } from '@radix-ui/react-tooltip';
 import { STRING_KEYS } from '@/constants/localization';
 import { tooltipStrings } from '@/constants/tooltips';
-import { useStringGetter } from '@/hooks';
+import { useStringGetter, useURLConfigs } from '@/hooks';
 import { Icon, IconName } from '@/components/Icon';
 import { Link } from '@/components/Link';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { popoverMixins } from '@/styles/popoverMixins';
@@ -38,20 +40,24 @@ export const WithTooltip = ({
  slotTooltip,
 }: ElementProps & StyleProps) => {
  const stringGetter = useStringGetter();
  const urlConfigs = useURLConfigs();
  const getTooltipStrings = tooltip && tooltipStrings[tooltip];
  if (!getTooltipStrings && !tooltipString && !slotTooltip) return <>{children}</>;
  let tooltipTitle;
  let tooltipBody;
  let tooltipLearnMore;
  if (getTooltipStrings) {
-    const { title, body } = getTooltipStrings({
+    const { title, body, learnMoreLink } = getTooltipStrings({
      stringGetter,
      stringParams,
      urlConfigs,
    });
    tooltipTitle = title;
    tooltipBody = body;
    tooltipLearnMore = learnMoreLink;
  } else {
    tooltipBody = tooltipString;
  }
@@ -72,6 +78,13 @@ export const WithTooltip = ({
              <dl>
                {tooltipTitle && <dt>{tooltipTitle}</dt>}
                {tooltipBody && <dd>{tooltipBody}</dd>}
                {tooltipLearnMore && (
                  <dd>
                    <Styled.LearnMore href={tooltipLearnMore}>
                      {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
                    </Styled.LearnMore>
                  </dd>
                )}
                <Styled.Arrow />
              </dl>
            )}
@@ -142,3 +155,7 @@ Styled.Arrow = styled(Arrow)`
 Styled.Icon = styled(Icon)`
  color: var(--color-text-0);
 `;
 Styled.LearnMore = styled(Link)`
  --link-color: var(--color-accent);
 `;
@@ -8,6 +8,8 @@ import {
  WARNINGS_STRING_KEYS,
 } from '@dydxprotocol/v4-localization';
 import { type LinksConfigs } from '@/hooks/useURLConfigs';
 export { TOOLTIP_STRING_KEYS } from '@dydxprotocol/v4-localization';
 export enum SupportedLocales {
@@ -79,9 +81,11 @@ export type TooltipStrings = {
  [key: string]: ({
    stringGetter,
    stringParams,
    urlConfigs,
  }: {
    stringGetter: StringGetterFunction;
    stringParams?: any;
    urlConfigs?: LinksConfigs;
  }) => {
    title: string;
    body: string;
@@ -37,7 +37,3 @@ export const HISTORY_ROUTE = `${AppRoute.Portfolio}/${PortfolioRoute.History}/:s
 export const DEFAULT_TRADE_ROUTE = `${AppRoute.Trade}/${DEFAULT_MARKETID}`;
 export const SETTINGS_ROUTE = `${AppRoute.Settings}/*`;
 export const DEFAULT_DOCUMENT_TITLE = 'dYdX';
 export enum ExternalLink {
  Foundation = 'https://dydx.foundation',
 }
@@ -57,10 +57,10 @@ export const tradeTooltips: TooltipStrings = {
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.INDEX_PRICE_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.INDEX_PRICE_BODY }),
  }),
-  'initial-margin-fraction': ({ stringGetter }) => ({
+  'initial-margin-fraction': ({ stringGetter, urlConfigs }) => ({
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.INITIAL_MARGIN_FRACTION_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.INITIAL_MARGIN_FRACTION_BODY }),
-    learnMoreLink: 'https://help.dydx.exchange/articles/5232637-maximum-position-sizes',
+    learnMoreLink: urlConfigs?.initialMarginFractionLearnMore,
  }),
  'initial-stop': ({ stringGetter }) => ({
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.INITIAL_STOP_TITLE }),
@@ -146,10 +146,10 @@ export const tradeTooltips: TooltipStrings = {
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.REALIZED_PNL_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REALIZED_PNL_BODY }),
  }),
-  'reduce-only': ({ stringGetter }) => ({
+  'reduce-only': ({ stringGetter, urlConfigs }) => ({
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_BODY }),
-    learnMoreLink: 'https://help.dydx.exchange/articles/6345793-reduce-only-orders',
+    learnMoreLink: urlConfigs?.reduceOnlyLearnMore,
  }),
  spread: () => ({
    title: 'Spread',
@@ -22,6 +22,7 @@ import { useShouldShowFooter } from './useShouldShowFooter';
 import { useSelectedNetwork } from './useSelectedNetwork';
 import { useStringGetter } from './useStringGetter';
 import { useSubaccount } from './useSubaccount';
 import { useURLConfigs } from './useURLConfigs';
 export {
  useApiState,
@@ -48,4 +49,5 @@ export {
  useSelectedNetwork,
  useStringGetter,
  useSubaccount,
  useURLConfigs,
 };
@@ -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) => ({
+    return Object.values(allPerpetualMarkets)
-      asset: allAssets[marketData.assetId],
+      .filter(isTruthy)
-      tickSizeDecimals: marketData.configs?.tickSizeDecimals,
+      .map((marketData) => ({
-      ...marketData,
+        asset: allAssets[marketData.assetId],
-      ...marketData.perpetual,
+        tickSizeDecimals: marketData.configs?.tickSizeDecimals,
-      ...marketData.configs,
+        ...marketData,
-    })) as MarketData[];
+        ...marketData.perpetual,
        ...marketData.configs,
      })) as MarketData[];
  }, [allPerpetualMarkets, allAssets]);
  const filteredMarkets = useMemo(() => {
@@ -0,0 +1,50 @@
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 import { useSelectedNetwork } from '@/hooks';
 const FALLBACK_URL = 'https://help.dydx.exchange/';
 export interface LinksConfigs {
  tos: string,
  privacy: string,
  mintscan: string,
  mintscanBase: string,
  feedback?: string,
  help?: string,
  blogs?: string,
  foundation?: string,
  initialMarginFractionLearnMore?: string,
  reduceOnlyLearnMore?: string,
  documentation?: string,
  community?: string,
  governanceLearnMore?: string,
  stakingLearnMore?: string,
  keplrDashboard?: string,
  accountExportLearnMore?: string,
  walletLearnMore?: string
 }
 export const useURLConfigs = (): LinksConfigs => {
  const { selectedNetwork } = useSelectedNetwork();
  const linksConfigs = ENVIRONMENT_CONFIG_MAP[selectedNetwork].links as LinksConfigs;
  return {
    tos: linksConfigs.tos,
    privacy: linksConfigs.privacy,
    mintscan: linksConfigs.mintscan,
    mintscanBase: linksConfigs.mintscanBase,
    feedback: linksConfigs.feedback || FALLBACK_URL,
    help: linksConfigs.help || FALLBACK_URL,
    blogs: linksConfigs.blogs || FALLBACK_URL,
    foundation: linksConfigs.foundation || FALLBACK_URL,
    initialMarginFractionLearnMore: linksConfigs.initialMarginFractionLearnMore || FALLBACK_URL,
    reduceOnlyLearnMore: linksConfigs.reduceOnlyLearnMore || FALLBACK_URL,
    documentation: linksConfigs.documentation || FALLBACK_URL,
    community: linksConfigs.community || FALLBACK_URL,
    governanceLearnMore: linksConfigs.governanceLearnMore || FALLBACK_URL,
    stakingLearnMore: linksConfigs.stakingLearnMore || FALLBACK_URL,
    keplrDashboard: linksConfigs.keplrDashboard || FALLBACK_URL,
    accountExportLearnMore: linksConfigs.accountExportLearnMore || FALLBACK_URL,
    walletLearnMore: linksConfigs.walletLearnMore || FALLBACK_URL,
  };
 };
@@ -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>
@@ -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';
@@ -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>
@@ -8,7 +8,7 @@ import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute } from '@/constants/routes';
 import { LogoShortIcon, BellStrokeIcon } from '@/icons';
-import { useTokenConfigs, useStringGetter } from '@/hooks';
+import { useTokenConfigs, useStringGetter, useURLConfigs } from '@/hooks';
 import { Icon, IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
@@ -28,6 +28,7 @@ import breakpoints from '@/styles/breakpoints';
 export const HeaderDesktop = () => {
  const stringGetter = useStringGetter();
  const { documentation, community, mintscanBase } = useURLConfigs();
  const dispatch = useDispatch();
  const { chainTokenLabel } = useTokenConfigs();
@@ -63,19 +64,19 @@ export const HeaderDesktop = () => {
              value: 'DOCUMENTATION',
              slotBefore: <Icon iconName={IconName.Terminal} />,
              label: stringGetter({ key: STRING_KEYS.DOCUMENTATION }),
-              href: 'https://docs.dydx.exchange/',
+              href: documentation,
            },
            {
              value: 'MINTSCAN',
              slotBefore: <Icon iconName={IconName.Mintscan} />,
              label: stringGetter({ key: STRING_KEYS.MINTSCAN }),
-              href: 'https://testnet.mintscan.io/dydx-testnet',
+              href: mintscanBase,
            },
            {
              value: 'COMMUNITY',
              slotBefore: <Icon iconName={IconName.Discord} />,
              label: stringGetter({ key: STRING_KEYS.COMMUNITY }),
-              href: 'https://discord.gg/dydx',
+              href: community,
            },
            {
              value: 'TERMS_OF_USE',
@@ -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);
+  --panel-content-paddingY: 0;
-  max-height: 10rem;
+  --panel-content-paddingX: 0;
-  margin-top: 0.5rem;
+
-  padding: 0;
+  > div > div {
-  border-radius: 0.875rem;
+    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);
@@ -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>
+          <Styled.AdditionalConditionsText>
-            {isAdditional && <span>{stringGetter({ key: STRING_KEYS.AND })}</span>}
+            {isAdditional && stringGetter({ key: STRING_KEYS.AND })}{' '}
-            <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_MARKET_SHARE })}</span>
+            {stringGetter({ key: STRING_KEYS.EXCHANGE_MARKET_SHARE })}{' '}
-            <Styled.Highlighted>{'>'}</Styled.Highlighted>
+            <Styled.Highlighted>{'>'}</Styled.Highlighted>{' '}
            <Styled.HighlightOutput
              type={OutputType.Percent}
              value={totalShare}
              fractionDigits={0}
            />
-          </Styled.TextRow>
+          </Styled.AdditionalConditionsText>
        )}
        {!!makerShare && (
-          <Styled.TextRow>
+          <Styled.AdditionalConditionsText>
-            {isAdditional && <span>{stringGetter({ key: STRING_KEYS.AND })}</span>}
+            {isAdditional && stringGetter({ key: STRING_KEYS.AND })}{' '}
-            <span>{stringGetter({ key: STRING_KEYS.MAKER_MARKET_SHARE })}</span>
+            {stringGetter({ key: STRING_KEYS.MAKER_MARKET_SHARE })}{' '}
-            <Styled.Highlighted>{'>'}</Styled.Highlighted>
+            <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
+        <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} />
-                      {!isNotTablet &&
+                    {isTablet &&
-                        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>
  );
@@ -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);
+    font: var(--font-base-book);
    @media ${breakpoints.tablet} {
      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;
    }
  }
 `;
@@ -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;
@@ -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
+      <Styled.Column>
-        slotReceipt={
+        <Styled.WithReceipt
-          <Styled.Details
+          slotReceipt={
-            items={[
+            <Styled.Details
-              {
+              items={[
-                key: 'available-to-migrate',
+                {
-                label: (
+                  key: 'available-to-migrate',
-                  <Styled.InlineRow>
+                  label: (
-                    {stringGetter({ key: STRING_KEYS.AVAILABLE_TO_MIGRATE })}
+                    <Styled.InlineRow>
-                    <Tag>DYDX</Tag>
+                      {stringGetter({ key: STRING_KEYS.AVAILABLE_TO_MIGRATE })}
-                  </Styled.InlineRow>
+                      <Tag>DYDX</Tag>
-                ),
+                    </Styled.InlineRow>
-                value: <Output type={OutputType.Asset} value={tokenBalance} />,
+                  ),
-              },
+                  value: <Output type={OutputType.Asset} value={tokenBalance} />,
-            ]}
+                },
-          />
+              ]}
-        }
+            />
-      >
+          }
-        {import.meta.env.VITE_TOKEN_MIGRATION_URI && (
+        >
-          <Button
+          {import.meta.env.VITE_TOKEN_MIGRATION_URI && (
-            action={tokenBalance ? ButtonAction.Primary : ButtonAction.Base}
+            <Button
-            size={ButtonSize.Medium}
+              action={tokenBalance ? ButtonAction.Primary : ButtonAction.Base}
-            slotRight={<Icon iconName={IconName.LinkOut} />}
+              size={ButtonSize.Medium}
-            href={import.meta.env.VITE_TOKEN_MIGRATION_URI}
+              slotRight={<Icon iconName={IconName.LinkOut} />}
-          >
+              href={import.meta.env.VITE_TOKEN_MIGRATION_URI}
-            {stringGetter({ key: STRING_KEYS.MIGRATE_NOW })}
+            >
-          </Button>
+              {stringGetter({ key: STRING_KEYS.MIGRATE_NOW })}
-        )}
+            </Button>
-      </Styled.WithReceipt>
+          )}
-      <Styled.InlineRow>
+        </Styled.WithReceipt>
-        {stringGetter({ key: STRING_KEYS.WANT_TO_LEARN })}
+        <Styled.InlineRow>
-        <Link href={TOKEN_MIGRATION_LEARN_MORE_LINK} withIcon>
+          {stringGetter({ key: STRING_KEYS.WANT_TO_LEARN })}
-          {stringGetter({ key: STRING_KEYS.CLICK_HERE })}
+          <Link href={TOKEN_MIGRATION_LEARN_MORE_LINK} withIcon>
-        </Link>
+            {stringGetter({ key: STRING_KEYS.CLICK_HERE })}
-      </Styled.InlineRow>
+          </Link>
-    </Styled.MobileMigratePanel>
+        </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;
 `;
@@ -5,7 +5,7 @@ import { STRING_KEYS } from '@/constants/localization';
 import { ButtonAction, ButtonSize } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
-import { useBreakpoints, useStringGetter } from '@/hooks';
+import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -20,15 +20,10 @@ import { openDialog } from '@/state/dialogs';
 import { DYDXBalancePanel } from './DYDXBalancePanel';
 import { MigratePanel } from './MigratePanel';
 // TODO: consolidate help link urls to env variables
 const GOVERNANCE_HELP_URL = 'https://help.dydx.exchange/';
 const STAKING_HELP_URL =
  'https://docs.dydx.community/dydx-chain-documentation/staking/how-to-stake';
 export const RewardsPage = () => {
  const dispatch = useDispatch();
  const stringGetter = useStringGetter();
-
+  const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
  const { isTablet, isNotTablet } = useBreakpoints();
  const panelArrow = (
@@ -45,11 +40,7 @@ export const RewardsPage = () => {
    <Styled.Page>
      {import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}
      <Styled.PanelRow>
-        {isTablet && (
+        {isTablet && <DYDXBalancePanel />}
          <Styled.BalancePanelContainer>
            <DYDXBalancePanel />
          </Styled.BalancePanelContainer>
        )}
        <Styled.Panel
          slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
@@ -58,7 +49,7 @@ export const RewardsPage = () => {
        >
          <Styled.Description>
            {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
-            <Link href={GOVERNANCE_HELP_URL} onClick={(e) => e.stopPropagation()}>
+            <Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
            </Link>
          </Styled.Description>
@@ -71,17 +62,13 @@ export const RewardsPage = () => {
        >
          <Styled.Description>
            {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
-            <Link href={STAKING_HELP_URL} onClick={(e) => e.stopPropagation()}>
+            <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
            </Link>
          </Styled.Description>
        </Styled.Panel>
-        {isNotTablet && (
+        {isNotTablet && <DYDXBalancePanel />}
          <Styled.BalancePanelContainer>
            <DYDXBalancePanel />
          </Styled.BalancePanelContainer>
        )}
      </Styled.PanelRow>
    </Styled.Page>
  );
@@ -92,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`
@@ -110,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 {
+  align-items: flex-start;
    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;
  }
 `;
@@ -140,5 +130,5 @@ Styled.IconButton = styled(IconButton)`
 `;
 Styled.Arrow = styled.div`
-  padding: 1rem 1.5rem;
+  padding: 1rem;
 `;
@@ -227,8 +227,8 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
            },
          ]}
          value={view}
-          onValueChange={(newView: string) => {
+          onValueChange={setView}
-            setView((newView || view) as PanelView);
+          onInteraction={() => {
            setIsOpen?.(true);
          }}
        />
@@ -2,7 +2,7 @@
 :root {
  --fontFamily-base: "Satoshi", system-ui, -apple-system, Helvetica, Arial, sans-serif;
-  --fontFamily-monospace: Courier, monospace, var(--fontFamily-base);
+  --fontFamily-monospace: monospace, var(--fontFamily-base);
  --fontWeight-base-0: 450;
  --fontWeight-base-1: 500;
@@ -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,
          }))}
@@ -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);
    > * {
@@ -246,9 +246,7 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => {
              }[rate] || '',
          }))}
          value={fundingRateView}
-          onValueChange={(newRate: FundingRateResolution) => {
+          onValueChange={setFundingRateView}
            if (newRate) setFundingRateView(newRate);
          }}
          size={ButtonSize.XSmall}
        />
      </Styled.FundingRateToggle>
@@ -2,7 +2,7 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { useBreakpoints, useStringGetter } from '@/hooks';
+import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';
 import { Button } from '@/components/Button';
 import { Dialog, DialogPlacement } from '@/components/Dialog';
@@ -15,12 +15,10 @@ type ElementProps = {
  setIsOpen: (open: boolean) => void;
 };
 // TODO: replace placeholder URL with real URLs when avaialble
 const KEPLR_DASHBOARD_URL = 'https://testnet.keplr.app/';
 const HELP_URL = 'https://help.dydx.exchange/en/articles/2921366-how-do-i-create-an-account-or-sign-up';
 export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
  const stringGetter = useStringGetter();
  const { keplrDashboard, accountExportLearnMore } = useURLConfigs();
  const { isTablet } = useBreakpoints();
  return (
@@ -31,7 +29,7 @@ export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
      placement={isTablet ? DialogPlacement.FullScreen : DialogPlacement.Default}
    >
      <Styled.Content>
-        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={KEPLR_DASHBOARD_URL}>
+        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={keplrDashboard}>
          <span>
            {stringGetter({
              key: STRING_KEYS.NAVIGATE_TO_KEPLR,
@@ -48,7 +46,7 @@ export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
          />
        </Styled.Button>
-        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={HELP_URL}>
+        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={accountExportLearnMore}>
          <span>
            {stringGetter({
              key: STRING_KEYS.LEARN_TO_EXPORT,
@@ -2,10 +2,10 @@ import { useMemo } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { STRING_KEYS } from '@/constants/localization';
-import { useStringGetter } from '@/hooks';
+import { useStringGetter, useURLConfigs } from '@/hooks';
 import { ChatIcon, FeedbackIcon, FileIcon, TerminalIcon } from '@/icons';
 import { ComboboxDialogMenu } from '@/components/ComboboxDialogMenu';
 import { Icon, IconName } from '@/components/Icon';
 import { isTruthy } from '@/lib/isTruthy';
@@ -13,39 +13,24 @@ type ElementProps = {
  setIsOpen: (open: boolean) => void;
 };
 const HELP_LINKS = {
  apiDocumentation: 'https://v4-teacher.vercel.app/',
  helpCenter: null,
  feedback: null,
 };
 export const HelpDialog = ({ setIsOpen }: ElementProps) => {
  const stringGetter = useStringGetter();
  const { help: helpCenter, community } = useURLConfigs();
  const HELP_ITEMS = useMemo(
    () => [
      {
        group: 'help-items',
        items: [
-          HELP_LINKS.helpCenter && {
+          helpCenter && {
            value: 'help-center',
            label: stringGetter({ key: STRING_KEYS.HELP_CENTER }),
            description: stringGetter({ key: STRING_KEYS.HELP_CENTER_DESCRIPTION }),
            onSelect: () => {
-              HELP_LINKS.helpCenter && globalThis.open(HELP_LINKS.helpCenter, '_blank');
+              helpCenter && globalThis.open(helpCenter, '_blank');
              setIsOpen(false);
            },
-            slotBefore: <FileIcon />,
+            slotBefore: <Icon iconName={IconName.File} />,
          },
          HELP_LINKS.apiDocumentation && {
            value: 'api-documentation',
            label: stringGetter({ key: STRING_KEYS.API_DOCUMENTATION }),
            description: stringGetter({ key: STRING_KEYS.API_DOCUMENTATION_DESCRIPTION }),
            onSelect: () => {
              HELP_LINKS.apiDocumentation && globalThis.open(HELP_LINKS.apiDocumentation, '_blank');
              setIsOpen(false);
            },
            slotBefore: <TerminalIcon />,
          },
          globalThis?.Intercom && {
            value: 'live-chat',
@@ -55,22 +40,22 @@ export const HelpDialog = ({ setIsOpen }: ElementProps) => {
              globalThis.Intercom('show');
              setIsOpen(false);
            },
-            slotBefore: <ChatIcon />,
+            slotBefore: <Icon iconName={IconName.Chat} />,
          },
-          HELP_LINKS.feedback && {
+          community && {
-            value: 'feedback',
+            value: 'community',
-            label: stringGetter({ key: STRING_KEYS.PROVIDE_FEEDBACK }),
+            label: stringGetter({ key: STRING_KEYS.COMMUNITY }),
-            description: stringGetter({ key: STRING_KEYS.PROVIDE_FEEDBACK_DESCRIPTION }),
+            description: stringGetter({ key: STRING_KEYS.COMMUNITY_DESCRIPTION }),
            onSelect: () => {
-              HELP_LINKS.feedback && globalThis.open(HELP_LINKS.feedback, '_blank');
+              community && globalThis.open(community, '_blank');
              setIsOpen(false);
            },
-            slotBefore: <FeedbackIcon />,
+            slotBefore: <Icon iconName={IconName.Discord} />,
          },
        ].filter(isTruthy),
      },
    ],
-    [stringGetter]
+    [stringGetter, helpCenter, community]
  );
  return (
@@ -13,16 +13,15 @@ import { Button } from '@/components/Button';
 import { Icon } from '@/components/Icon';
 import { Link } from '@/components/Link';
-import { useAccounts, useStringGetter } from '@/hooks';
+import { useAccounts, useStringGetter, useURLConfigs } from '@/hooks';
 import { useDisplayedWallets } from '@/hooks/useDisplayedWallets';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 const aboutWalletsLink = `https://www.dydx.academy/video/defi-wallet`;
 export const ChooseWallet = () => {
  const stringGetter = useStringGetter();
  const { walletLearnMore } = useURLConfigs();
  const displayedWallets = useDisplayedWallets();
@@ -63,7 +62,7 @@ export const ChooseWallet = () => {
      </Styled.Wallets>
      <Styled.Footer>
-        <Link href={aboutWalletsLink} withIcon>
+        <Link href={walletLearnMore} withIcon>
          {stringGetter({ key: STRING_KEYS.ABOUT_WALLETS })}
        </Link>
      </Styled.Footer>
@@ -73,9 +73,7 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: ElementProps) =>
            <Styled.ToggleGroup
              items={allTradeTypeItems}
              value={selectedTradeType}
-              onValueChange={(tradeType: TradeTypes) =>
+              onValueChange={onTradeTypeChange}
                onTradeTypeChange(tradeType || selectedTradeType)
              }
            />
          ),
        },
@@ -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}
      />
@@ -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) =>
+        onValueChange={updateLeverage}
          updateLeverage(option === undefined ? formattedLeverageValue : option)
        }
        shape={ButtonShape.Rectangle}
      />
    </>
@@ -15,6 +15,7 @@ import {
  useTokenConfigs,
  useStringGetter,
  useAccountBalance,
  useURLConfigs,
 } from '@/hooks';
 import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton';
@@ -36,10 +37,9 @@ import { truncateAddress } from '@/lib/wallet';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { headerMixins } from '@/styles/headerMixins';
 const explorerBaseUri = 'https://testnet.mintscan.io/dydx-testnet';
 export const AccountMenu = () => {
  const stringGetter = useStringGetter();
  const { mintscanBase } = useURLConfigs();
  const { isTablet } = useBreakpoints();
  const dispatch = useDispatch();
  const onboardingState = useSelector(getOnboardingState);
@@ -92,7 +92,7 @@ export const AccountMenu = () => {
              />
              <IconButton
                action={ButtonAction.Base}
-                href={`${explorerBaseUri}/account/${dydxAddress}`}
+                href={`${mintscanBase}/account/${dydxAddress}`}
                iconName={IconName.LinkOut}
                shape={ButtonShape.Square}
                type={ButtonType.Link}
@@ -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>
@@ -167,7 +167,7 @@ export const AccountMenu = () => {
        //   value: 'ViewInExplorer',
        //   icon: <Icon iconName={IconName.Etherscan} />,
        //   label: stringGetter({ key: STRING_KEYS.OPEN_IN_ETHERSCAN }),
-        //   onSelect: () => globalThis.open(`${explorerBaseUri}/address/${address}`),
+        //   onSelect: () => globalThis.open(`${mintscanBase}/address/${address}`),
        //   separator: true,
        // },
        ...(onboardingState === OnboardingState.AccountConnected && hdKey
@@ -212,28 +212,45 @@ export const AccountMenu = () => {
  );
 };
-const AssetActions = memo(({ asset, dispatch }: { asset: DydxChainAsset; dispatch: Dispatch }) => (
+const AssetActions = memo(
-  <Styled.InlineRow>
+  ({
-    {[
+    asset,
-      // TODO(@rosepuppy): Add withdraw action for USDC
+    dispatch,
-      {
+    withOnboarding,
-        dialogType: DialogTypes.Receive,
+  }: {
-        iconName: IconName.Qr,
+    asset: DydxChainAsset;
-      },
+    dispatch: Dispatch;
-      { dialogType: DialogTypes.Transfer, iconName: IconName.Send },
+    withOnboarding?: boolean;
-    ].map(({ iconName, dialogType }) => (
+  }) => (
-      <IconButton
+    <Styled.InlineRow>
-        key={dialogType}
+      {[
-        action={ButtonAction.Base}
+        withOnboarding && {
-        shape={ButtonShape.Square}
+          dialogType: DialogTypes.Withdraw,
-        iconName={iconName}
+          iconName: IconName.Withdraw,
-        onClick={() =>
+        },
-          dispatch(openDialog({ type: dialogType, dialogProps: { selectedAsset: asset } }))
+        withOnboarding && {
-        }
+          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> = {};
@@ -351,3 +368,7 @@ Styled.ConnectToChain = styled(Styled.Column)`
    font: var(--font-small-book);
  }
 `;
 Styled.IconButton = styled(IconButton)`
  --button-padding: 0 0.25rem;
 `;
@@ -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}
    />
  );
 };
Author	SHA1	Message	Date
Bill He	650b16aeae	Remove Courier	2023-11-02 13:36:52 -07:00
Bill	9815437a80	Account dropdown onboarding entrypoints (#113 ) * Account dropdown onboarding entrypoints * Update based on latest designs	2023-10-31 14:29:36 -07:00
aleka	890a4b2c0e	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
Bill	8d3cc76d14	Configurable URLs (#107 ) * Configurable URLs * add learnmore to tooltip * Learnmore -> LearnMore	2023-10-31 11:02:45 -07:00