Create documentation.json

package.json

@@ -39,12 +39,11 @@
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.1.32",
+    "@dydxprotocol/v4-abacus": "^1.1.27",
     "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.1.5",
+    "@dydxprotocol/v4-localization": "^1.1.0",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
-    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",

public/configs/cctp.json

@@ -4,9 +4,38 @@
         "tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
         "name": "Ethereum"
     },
+    {
+        "chainId": "421613",
+        "tokenAddress": "0xfd064a18f3bf249cf1f87fc203e90d8f650f2d63",
+        "name": "Arbitrum Goerli"
+    },
+    {
+        "chainId": "43113",
+        "tokenAddress": "0x5425890298aed601595a70AB815c96711a31Bc65",
+        "name": "Avalanche Fuji"
+    },
+    {
+        "chainId": "84531",
+        "tokenAddress": "0xf175520c52418dfe19c8098071a252da48cd1c19",
+        "name": "Base Goerli"
+    },
     {
         "chainId": "5",
         "tokenAddress": "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
         "name": "Ethereum Goerli"
+    },
+    {
+        "chainId": "grand-1",
+        "tokenAddress": "uusdc",
+        "name": "Noble Testnet"
+    },
+    {
+        "chainId": "420",
+        "tokenAddress": "0xe05606174bac4a6364b31bd0eca4bf4dd368f8c6",
+        "name": "OP Goerli"
+    },
+    {
+        "chainId": "103",
+        "name": "Solana Devnet"
     }
 ]

public/configs/env.json

@@ -89,7 +89,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -162,7 +162,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -235,7 +235,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -308,7 +308,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -383,7 +383,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -531,7 +531,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -610,7 +610,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -686,7 +686,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -762,7 +762,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -838,7 +838,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -914,7 +914,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -1126,7 +1126,7 @@
             "blogs": "[HTTP link to blogs, can be null]",
             "foundation": "[HTTP link to foundation, can be null]",
             "initialMarginFractionLearnMore": "[HTTP link to initial margin fraction learn more, can be null]",
-            "reduceOnlyLearnMore": "[HTTP link to reduce-only 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]",

src/components/Accordion.tsx

@@ -1,119 +0,0 @@
-import styled, { keyframes, type AnyStyledComponent } from 'styled-components';
-
-import { Root, Item, Header, Trigger, Content } from '@radix-ui/react-accordion';
-
-import { layoutMixins } from '@/styles/layoutMixins';
-import { PlusIcon } from '@/icons';
-
-export type AccordionItem = {
-  header: React.ReactNode;
-  content: React.ReactNode;
-};
-
-type AccordionProps = {
-  items: AccordionItem[];
-  className?: string;
-};
-
-export const Accordion = ({ items, className }: AccordionProps) => (
-  <Styled.Root className={className} type="single" collapsible>
-    {items.map(({ header, content }, idx) => (
-      <Styled.Item key={idx} value={idx.toString()}>
-        <Header>
-          <Styled.Trigger>
-            {header}
-            <Styled.Icon>
-              <PlusIcon />
-            </Styled.Icon>
-          </Styled.Trigger>
-        </Header>
-        <Styled.Content>{content}</Styled.Content>
-      </Styled.Item>
-    ))}
-  </Styled.Root>
-);
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Root = styled(Root)`
-  > *:not(:last-child) {
-    border-bottom: var(--border-width) solid var(--border-color);
-  }
-`;
-
-Styled.Item = styled(Item)``;
-
-Styled.Icon = styled.div`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-
-  width: 2.25rem;
-  height: 2.25rem;
-
-  --color-border: var(--color-layer-6);
-  color: var(--color-text-1);
-  background-color: var(--color-layer-5);
-  border: solid var(--border-width) var(--color-border);
-  border-radius: 50%;
-  font: var(--font-small-book);
-
-  svg {
-    height: 1.125em;
-    width: 1.125em;
-  }
-`;
-
-Styled.Trigger = styled(Trigger)`
-  ${layoutMixins.spacedRow}
-  width: 100%;
-  padding: 1rem 0.75rem;
-
-  color: var(--color-text-1);
-  text-align: start;
-
-  &:hover {
-    ${Styled.Icon} {
-      color: var(--color-text-2);
-      filter: brightness(1.1);
-    }
-  }
-
-  svg {
-    color: var(--color-text-0);
-    transition: transform 0.3s var(--ease-out-expo);
-  }
-
-  &[data-state='open'] svg {
-    transform: rotate(45deg);
-  }
-`;
-
-Styled.Content = styled(Content)`
-  overflow: hidden;
-  margin: 0 0.75rem 1rem;
-
-  color: var(--color-text-0);
-
-  &[data-state='open'] {
-    animation: ${keyframes`
-      from {
-        height: 0;
-      }
-      to {
-        height: var(--radix-accordion-content-height);
-      }
-    `} 0.3s var(--ease-out-expo);
-  }
-
-  &[data-state='closed'] {
-    animation: ${keyframes`
-      from {
-        height: var(--radix-accordion-content-height);
-      }
-      to {
-        height: 0;
-      }
-    `} 0.1s var(--ease-in-expo);
-  }
-`;

src/components/Icon.tsx

@@ -55,7 +55,6 @@ import {
   OverviewIcon,
   PencilIcon,
   PlayIcon,
-  PlusIcon,
   PositionsIcon,
   PriceChartIcon,
   PrivacyIcon,
@@ -131,7 +130,6 @@ export enum IconName {
   Overview = 'Overview',
   Pencil = 'Pencil',
   Play = 'Play',
-  Plus = 'Plus',
   Positions = 'Positions',
   PriceChart = 'PriceChart',
   Privacy = 'Privacy',
@@ -206,7 +204,6 @@ const icons = {
   [IconName.Overview]: OverviewIcon,
   [IconName.Pencil]: PencilIcon,
   [IconName.Play]: PlayIcon,
-  [IconName.Plus]: PlusIcon,
   [IconName.Positions]: PositionsIcon,
   [IconName.PriceChart]: PriceChartIcon,
   [IconName.Privacy]: PrivacyIcon,

src/components/Table.tsx

@@ -43,7 +43,6 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Icon, IconName } from './Icon';
 import { Tag } from './Tag';
-import { MustBigNumber } from '@/lib/numbers';
 
 export { TableCell } from './Table/TableCell';
 export { TableColumnHeader } from './Table/TableColumnHeader';
@@ -162,7 +161,10 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
         ? // String
           collator.compare(first as string, second as string)
         : // Number
-          MustBigNumber(first).comparedTo(MustBigNumber(second))) *
+          Math.sign(
+            (parseInt(first as string) || (first as number)) -
+              (parseInt(second as string) || (second as number))
+          )) *
       // Flip the direction if descending order is specified.
       (sortDirection === 'descending' ? -1 : 1)
     );

src/constants/numbers.ts

@@ -10,7 +10,6 @@ export const LEVERAGE_DECIMALS = 2;
 export const TOKEN_DECIMALS = 4;
 export const LARGE_TOKEN_DECIMALS = 2;
 export const FEE_DECIMALS = 3;
-export const FUNDING_DECIMALS = 6;
 
 export const QUANTUM_MULTIPLIER = 1_000_000;
 
@@ -19,7 +18,3 @@ export enum NumberSign {
   Negative = 'Negative',
   Neutral = 'Neutral',
 }
-
-// Deposit/Withdraw
-export const MAX_CCTP_TRANSFER_AMOUNT = 1_000_000;
-export const MAX_PRICE_IMPACT = 0.02; // 2%

src/constants/tooltips/deposit.ts

@@ -1,10 +1,6 @@
 import { type TooltipStrings, TOOLTIP_STRING_KEYS } from '@/constants/localization';
 
 export const depositTooltips: TooltipStrings = {
-  'minimum-deposit-amount': ({ stringGetter }) => ({
-    title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_TITLE }),
-    body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_BODY }),
-  }),
   swap: ({ stringGetter }) => ({
     title: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_TITLE }),
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_BODY }),

src/constants/tooltips/withdraw.ts

@@ -5,10 +5,6 @@ export const withdrawTooltips: TooltipStrings = {
     title: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_TITLE }),
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_BODY }),
   }),
-  'minimum-amount-received': ({ stringGetter }) => ({
-    title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_TITLE }),
-    body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_BODY }),
-  }),
   'withdraw-types': ({ stringGetter }) => ({
     title: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_TITLE }),
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_BODY }),

src/hooks/useNotificationTypes.tsx

@@ -157,8 +157,8 @@ export const notificationTypes: NotificationTypeConfig[] = [
           const isFinished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
           const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;
 
-          const transferType =
-            type ?? fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
+          const transferType = type ??
+            fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
               ? TransferNotificationTypes.Withdrawal
               : TransferNotificationTypes.Deposit;
 

src/icons/index.ts

@@ -44,7 +44,6 @@ export { default as OrderbookIcon } from './orderbook.svg';
 export { default as OverviewIcon } from './overview.svg';
 export { default as PencilIcon } from './pencil.svg';
 export { default as PlayIcon } from './play.svg';
-export { default as PlusIcon } from './plus.svg';
 export { default as PortfolioIcon } from './portfolio.svg';
 export { default as PositionsIcon } from './positions.svg';
 export { default as PriceChartIcon } from './price-chart.svg';

src/icons/plus.svg

@@ -1 +0,0 @@
-<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m6.75.75c0-.198912-.07902-.389678-.21967-.53033-.14065-.1406525-.33142-.21967-.53033-.21967s-.38968.0790175-.53033.21967c-.14065.140652-.21967.331418-.21967.53033v4.5h-4.5c-.198912 0-.389678.07902-.53033.21967-.1406525.14065-.21967.33142-.21967.53033s.0790175.38968.21967.53033c.140652.14065.331418.21967.53033.21967h4.5v4.5c0 .1989.07902.3897.21967.5303.14065.1407.33142.2197.53033.2197s.38968-.079.53033-.2197c.14065-.1406.21967-.3314.21967-.5303v-4.5h4.5c.1989 0 .3897-.07902.5303-.21967.1407-.14065.2197-.33142.2197-.53033s-.079-.38968-.2197-.53033c-.1406-.14065-.3314-.21967-.5303-.21967h-4.5z" fill="currentColor"/></svg>

src/lib/abacus/dydxChainTransactions.ts

@@ -212,8 +212,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
         timeInForce as OrderTimeInForce,
         goodTilTimeInSeconds ?? 0,
         execution as OrderExecution,
-        postOnly ?? undefined,
-        reduceOnly ?? undefined,
+        postOnly,
+        reduceOnly,
         triggerPrice ?? undefined
       );
 
@@ -351,7 +351,12 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     }
   }
 
-  async sendNobleIBC(params: { msgTypeUrl: string; msg: any }): Promise<string> {
+  async sendNobleIBC(
+    params: {
+      msgTypeUrl: string,
+      msg: any,
+    }
+  ): Promise<string> {
     if (!this.nobleClient?.isConnected) {
       throw new Error('Missing nobleClient or localWallet');
     }
@@ -362,16 +367,15 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
         value: params.msg,
       };
       const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
-
+  
       // take out fee from amount before sweeping
-      const amount =
-        parseInt(ibcMsg.value.token.amount, 10) -
+      const amount = parseInt(ibcMsg.value.token.amount, 10) -
         Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
-
+  
       if (amount <= 0) {
         throw new Error('noble balance does not cover fees');
       }
-
+  
       ibcMsg.value.token.amount = amount.toString();
       const tx = await this.nobleClient.send([ibcMsg]);
 
@@ -387,21 +391,23 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     }
   }
 
-  async withdrawToNobleIBC(params: {
-    subaccountNumber: number;
-    amount: string;
-    ibcPayload: string;
-  }): Promise<string> {
+  async withdrawToNobleIBC(
+    params: {
+      subaccountNumber: number,
+      amount: string,
+      ibcPayload: string,
+    }
+  ): Promise<string> {
     if (!this.compositeClient || !this.localWallet) {
       throw new Error('Missing compositeClient or localWallet');
     }
 
     const { subaccountNumber, amount, ibcPayload } = params ?? {};
     const parsedIbcPayload: {
-      msgTypeUrl: string;
-      msg: any;
-    } = ibcPayload ? JSON.parse(atob(ibcPayload)) : undefined;
-
+      msgTypeUrl: string,
+      msg: any,
+    } = ibcPayload ? JSON.parse(ibcPayload) : undefined;
+  
     try {
       const msg = this.compositeClient.withdrawFromSubaccountMessage(
         new SubaccountClient(this.localWallet, subaccountNumber),
@@ -419,7 +425,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
       );
 
       return JSON.stringify({
-        txHash: hashFromTx(tx?.hash),
+        txHash: hashFromTx(tx?.hash)
       });
     } catch (error) {
       log('DydxChainTransactions/withdrawToNobleIBC', error);
@@ -430,7 +436,10 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     }
   }
 
-  async cctpWithdraw(params: { typeUrl: string; value: any }): Promise<string> {
+  async cctpWithdraw(params: {
+    typeUrl: string,
+    value: any,
+  }): Promise<string> {
     if (!this.nobleClient?.isConnected) {
       throw new Error('Missing nobleClient or localWallet');
     }
@@ -441,18 +450,17 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
         value: params.value,
       };
       const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
-
+  
       // take out fee from amount before sweeping
-      const amount =
-        parseInt(ibcMsg.value.amount, 10) -
+      const amount = parseInt(ibcMsg.value.amount, 10) -
         Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
-
+  
       if (amount <= 0) {
         throw new Error('noble balance does not cover fees');
       }
-
+  
       ibcMsg.value.amount = amount.toString();
-
+  
       const tx = await this.nobleClient.send([ibcMsg]);
 
       const parsedTx = this.parseToPrimitives(tx);

src/lib/abacus/index.ts

@@ -84,7 +84,8 @@ class AbacusStateManager {
     );
 
     const appConfigs = AbacusAppConfig.Companion.forWeb;
-    appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
+    if (!isMainnet || testFlags.withCCTP)
+      appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
 
     this.stateManager = new AsyncAbacusStateManager(
       '',

src/lib/wagmi.ts

@@ -146,7 +146,7 @@ const getConnectors = (walletConnectConfig: WalletConnectConfig) => [
   new CoinbaseWalletConnector({
     chains,
     options: {
-      appName: 'dYdX',
+      appName: 'wagmi',
       reloadOnDisconnect: false,
     },
   }),

src/pages/rewards/RewardsHelpPanel.tsx

@@ -1,80 +0,0 @@
-import styled, { AnyStyledComponent } from 'styled-components';
-
-import { STRING_KEYS } from '@/constants/localization';
-import { layoutMixins } from '@/styles/layoutMixins';
-import { useStringGetter } from '@/hooks';
-
-import { Accordion } from '@/components/Accordion';
-import { Link } from '@/components/Link';
-import { Panel } from '@/components/Panel';
-
-const REWARDS_LEARN_MORE_LINK = ''; // to be configured
-
-export const RewardsHelpPanel = () => {
-  const stringGetter = useStringGetter();
-
-  return (
-    <Styled.HelpCard
-      slotHeader={
-        <Styled.Header>
-          <h3>{stringGetter({ key: STRING_KEYS.HELP })}</h3>
-          {REWARDS_LEARN_MORE_LINK && (
-            <Link withIcon href={REWARDS_LEARN_MORE_LINK}>
-              {stringGetter({ key: STRING_KEYS.LEARN_MORE })}
-            </Link>
-          )}
-        </Styled.Header>
-      }
-    >
-      <Accordion
-        items={[
-          {
-            header: 'Who is eligible for trading rewards?',
-            content: 'All traders are eligible for trading rewards.',
-          },
-          {
-            header: 'How do trading rewards work?',
-            content:
-              'Immediately after each fill, trading rewards are sent directly to the trader’s dYdX Chain address, based on the amount of fees paid by the trader.',
-          },
-          {
-            header: 'How do I claim my rewards?',
-            content:
-              'Each block, trading rewards are automatically sent directly to the trader’s dYdX Chain address.',
-          },
-        ]}
-      />
-    </Styled.HelpCard>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.HelpCard = styled(Panel)`
-  --panel-content-paddingY: 0;
-  width: 100%;
-  height: max-content;
-  padding: 0;
-  gap: 0;
-
-  text-align: start;
-`;
-
-Styled.Header = styled.div`
-  ${layoutMixins.spacedRow}
-  gap: 1ch;
-
-  padding: 1.25rem 1.5rem;
-  border-bottom: var(--border-width) solid var(--border-color);
-
-  font: var(--font-small-book);
-
-  h3 {
-    font: var(--font-medium-book);
-    color: var(--color-text-2);
-  }
-`;
-
-Styled.Link = styled(Link)`
-  display: inline-flex;
-`;

src/pages/trade/HorizontalPanel.tsx

@@ -83,6 +83,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
   const tabItems = useMemo(
     () => [
       {
+        asChild: true,
         value: InfoSection.Position,
         label: stringGetter({
           key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,

src/views/forms/AccountManagementForms/ChainSelectMenu.tsx

@@ -18,7 +18,11 @@ type ElementProps = {
   onSelectChain: (chain: string) => void;
 };
 
-export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: ElementProps) => {
+export const ChainSelectMenu = ({
+  label,
+  selectedChain,
+  onSelectChain,
+}: ElementProps) => {
   const stringGetter = useStringGetter();
   const { type, depositOptions, withdrawalOptions, resources } =
     useSelector(getTransferInputs, shallowEqual) || {};
@@ -34,7 +38,7 @@ export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: Element
     slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
   }));
 
-  const selectedOption = chains.find((item) => item.type === selectedChain);
+  const selectedOption = chains.find((item) => item.type === selectedChain); 
 
   return (
     <SearchSelectMenu
@@ -77,4 +81,4 @@ Styled.ChainRow = styled.div`
   gap: 0.5rem;
   color: var(--color-text-2);
   font: var(--font-base-book);
-`;
+`;

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -10,8 +10,9 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
 import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
-import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { NotificationStatus } from '@/constants/notifications';
+import { NumberSign } from '@/constants/numbers';
 import type { EvmAddress } from '@/constants/wallets';
 
 import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks';
@@ -252,9 +253,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         if (txHash) {
           addTransferNotification({
             txHash: txHash,
-            toChainId: !isCctp
-              ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
-              : getNobleChainId(),
+            toChainId: !isCctp ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId : getNobleChainId(),
             fromChainId: chainIdStr || undefined,
             toAmount: summary?.usdcSize || undefined,
             triggeredAt: Date.now(),
@@ -325,21 +324,6 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
       return stringGetter({ key: STRING_KEYS.DEPOSIT_MORE_THAN_BALANCE });
     }
 
-    if (isCctp) {
-      if (MustBigNumber(debouncedAmountBN).gte(MAX_CCTP_TRANSFER_AMOUNT)) {
-        return stringGetter({
-          key: STRING_KEYS.MAX_CCTP_TRANSFER_LIMIT_EXCEEDED,
-          params: {
-            MAX_CCTP_TRANSFER_AMOUNT: MAX_CCTP_TRANSFER_AMOUNT,
-          },
-        });
-      }
-    }
-
-    if (isMainnet && MustBigNumber(summary?.aggregatePriceImpact).gte(MAX_PRICE_IMPACT)) {
-      return stringGetter({ key: STRING_KEYS.PRICE_IMPACT_TOO_HIGH });
-    }
-
     return undefined;
   }, [
     error,
@@ -350,7 +334,6 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     fromAmount,
     sourceToken,
     stringGetter,
-    summary,
   ]);
 
   const isDisabled =

src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx

@@ -1,16 +1,21 @@
-import { type Dispatch, type ReactNode, type SetStateAction, useState, useMemo } from 'react';
+import { type Dispatch, type SetStateAction, useState, type ReactNode } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 import type { RouteData } from '@0xsquid/sdk';
-import { formatUnits } from 'viem';
 
-import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
+import {
+  ButtonAction,
+  ButtonShape,
+  ButtonSize,
+  ButtonState,
+  ButtonType,
+} from '@/constants/buttons';
 
 import { TransferInputTokenResource } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
-import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';
+import { NumberSign } from '@/constants/numbers';
 
-import { useStringGetter, useTokenConfigs } from '@/hooks';
+import { useStringGetter } from '@/hooks';
 import { useMatchingEvmNetwork } from '@/hooks/useMatchingEvmNetwork';
 
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -29,7 +34,6 @@ import { calculateCanAccountTrade } from '@/state/accountCalculators';
 import { getSubaccountBuyingPower, getSubaccountEquity } from '@/state/accountSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
 
-import { isTruthy } from '@/lib/isTruthy';
 import { MustBigNumber } from '@/lib/numbers';
 
 import { SlippageEditor } from '../SlippageEditor';
@@ -79,8 +83,7 @@ export const DepositButtonAndReceipt = ({
   const { current: buyingPower, postOrder: newBuyingPower } =
     useSelector(getSubaccountBuyingPower, shallowEqual) || {};
 
-  const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
-  const { usdcDecimals, usdcLabel } = useTokenConfigs();
+  const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
 
   const feeSubitems: DetailsItem[] = [];
 
@@ -95,7 +98,7 @@ export const DepositButtonAndReceipt = ({
   if (typeof summary?.bridgeFee === 'number') {
     feeSubitems.push({
       key: 'bridge-fees',
-      label: <span>{stringGetter({ key: STRING_KEYS.BRIDGE_FEE })}</span>,
+      label: <span>Bridge Fee</span>,
       value: <Output type={OutputType.Fiat} value={summary?.bridgeFee} />,
     });
   }
@@ -108,68 +111,12 @@ export const DepositButtonAndReceipt = ({
 
   const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0);
 
-  const { toAmount, toAmountMin } = useMemo(() => {
-    if (isCctp) {
-      return {
-        toAmount: summary?.toAmount,
-        toAmountMin: summary?.toAmountMin,
-      };
-    } else {
-      return {
-        toAmount: summary?.toAmount && formatUnits(BigInt(summary.toAmount), usdcDecimals),
-        toAmountMin: summary?.toAmountMin && formatUnits(BigInt(summary.toAmountMin), usdcDecimals),
-      };
-    }
-  }, [isCctp, summary]);
-
   const submitButtonReceipt = [
-    {
-      key: 'expected-deposit-amount',
-      label: (
-        <span>
-          {stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
-        </span>
-      ),
-      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmount} />,
-      subitems: [
-        {
-          key: 'minimum-deposit-amount',
-          label: (
-            <span>
-              {stringGetter({ key: STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
-            </span>
-          ),
-          value: (
-            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmountMin} />
-          ),
-          tooltip: 'minimum-deposit-amount',
-        },
-      ],
-    },
-    {
-      key: 'exchange-rate',
-      label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
-      value:
-        typeof summary?.exchangeRate === 'number' ? (
-          <Styled.ExchangeRate>
-            <Output
-              type={OutputType.Asset}
-              value={1}
-              fractionDigits={0}
-              tag={sourceToken?.symbol}
-            />
-            =
-            <Output type={OutputType.Asset} value={summary?.exchangeRate} tag={usdcLabel} />
-          </Styled.ExchangeRate>
-        ) : (
-          <Output type={OutputType.Asset} />
-        ),
-    },
     {
       key: 'equity',
       label: (
         <span>
-          {stringGetter({ key: STRING_KEYS.EQUITY })} <Tag>{usdcLabel}</Tag>
+          {stringGetter({ key: STRING_KEYS.EQUITY })} <Tag>USDC</Tag>
         </span>
       ),
       value: (
@@ -186,7 +133,7 @@ export const DepositButtonAndReceipt = ({
       key: 'buying-power',
       label: (
         <span>
-          {stringGetter({ key: STRING_KEYS.BUYING_POWER })} <Tag>{usdcLabel}</Tag>
+          {stringGetter({ key: STRING_KEYS.BUYING_POWER })} <Tag>USDC</Tag>
         </span>
       ),
       value: (
@@ -199,7 +146,18 @@ export const DepositButtonAndReceipt = ({
         />
       ),
     },
-    !isCctp && {
+    {
+      key: 'exchange-rate',
+      label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
+      value: typeof summary?.exchangeRate === 'number' && (
+        <Styled.ExchangeRate>
+          <Output type={OutputType.Asset} value={1} fractionDigits={0} tag={sourceToken?.symbol} />
+          =
+          <Output type={OutputType.Asset} value={summary?.exchangeRate} tag="USDC" />
+        </Styled.ExchangeRate>
+      ),
+    },
+    {
       key: 'total-fees',
       label: <span>{stringGetter({ key: STRING_KEYS.TOTAL_FEES })}</span>,
       value: <Output type={OutputType.Fiat} value={totalFees} />,
@@ -220,26 +178,22 @@ export const DepositButtonAndReceipt = ({
     {
       key: 'estimatedRouteDuration',
       label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
-      value: (
+      value: typeof summary?.estimatedRouteDuration === 'number' && (
         <Output
           type={OutputType.Text}
-          value={
-            typeof summary?.estimatedRouteDuration === 'number'
-              ? stringGetter({
-                  key: STRING_KEYS.X_MINUTES_LOWERCASED,
-                  params: {
-                    X:
-                      summary?.estimatedRouteDuration < 60
-                        ? '< 1'
-                        : Math.round(summary?.estimatedRouteDuration / 60),
-                  },
-                })
-              : null
-          }
+          value={stringGetter({
+            key: STRING_KEYS.X_MINUTES_LOWERCASED,
+            params: {
+              X:
+                summary?.estimatedRouteDuration < 60
+                  ? '< 1'
+                  : Math.round(summary?.estimatedRouteDuration / 60),
+            },
+          })}
         />
       ),
     },
-  ].filter(isTruthy);
+  ];
 
   const isFormValid = !isDisabled && !isEditingSlippage;
 

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -9,9 +9,9 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
 import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
-import { TransferNotificationTypes } from '@/constants/notifications';
-import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { NotificationStatus, TransferNotificationTypes } from '@/constants/notifications';
+import { NumberSign } from '@/constants/numbers';
 
 import {
   useAccounts,
@@ -67,8 +67,7 @@ export const WithdrawForm = () => {
     resources,
     errors: routeErrors,
     errorMessage: routeErrorMessage,
-    isCctp,
-    summary,
+    isCctp
   } = useSelector(getTransferInputs, shallowEqual) || {};
 
   // User input
@@ -76,6 +75,7 @@ export const WithdrawForm = () => {
   const [slippage, setSlippage] = useState(isCctp ? 0 : 0.01); // 0.1% slippage
   const debouncedAmount = useDebounce<string>(withdrawAmount, 500);
 
+
   const isValidAddress = toAddress && isAddress(toAddress);
 
   const toToken = useMemo(
@@ -168,18 +168,12 @@ export const WithdrawForm = () => {
             })
           );
         } else {
-          const txHash = await sendSquidWithdraw(
-            debouncedAmountBN.toNumber(),
-            requestPayload.data,
-            isCctp
-          );
+          const txHash = await sendSquidWithdraw(debouncedAmountBN.toNumber(), requestPayload.data, isCctp);
           if (txHash) {
             addTransferNotification({
               txHash: txHash,
               type: TransferNotificationTypes.Withdrawal,
-              fromChainId: !isCctp
-                ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
-                : getNobleChainId(),
+              fromChainId: !isCctp ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId : getNobleChainId(),
               toChainId: chainIdStr || undefined,
               toAmount: debouncedAmountBN.toNumber(),
               triggeredAt: Date.now(),
@@ -289,7 +283,10 @@ export const WithdrawForm = () => {
 
   const errorMessage = useMemo(() => {
     if (error) {
-      return error;
+      return stringGetter({
+        key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
+        params: { ERROR_MESSAGE: error },
+      });
     }
 
     if (routeErrors) {
@@ -320,21 +317,6 @@ export const WithdrawForm = () => {
       return stringGetter({ key: STRING_KEYS.WITHDRAW_MORE_THAN_FREE });
     }
 
-    if (isCctp) {
-      if (MustBigNumber(debouncedAmountBN).gte(MAX_CCTP_TRANSFER_AMOUNT)) {
-        return stringGetter({
-          key: STRING_KEYS.MAX_CCTP_TRANSFER_LIMIT_EXCEEDED,
-          params: {
-            MAX_CCTP_TRANSFER_AMOUNT: MAX_CCTP_TRANSFER_AMOUNT,
-          },
-        });
-      }
-    }
-
-    if (isMainnet && MustBigNumber(summary?.aggregatePriceImpact).gte(MAX_PRICE_IMPACT)) {
-      return stringGetter({ key: STRING_KEYS.PRICE_IMPACT_TOO_HIGH });
-    }
-
     return undefined;
   }, [
     error,
@@ -347,7 +329,6 @@ export const WithdrawForm = () => {
     toAddress,
     sanctionedAddresses,
     stringGetter,
-    summary,
   ]);
 
   const isDisabled =

src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { formatUnits } from 'viem';
@@ -6,11 +6,14 @@ import { formatUnits } from 'viem';
 import { TransferInputTokenResource } from '@/constants/abacus';
 import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';
+import { NumberSign } from '@/constants/numbers';
+
+import { formatSeconds } from '@/lib/timeUtils';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
-import { useStringGetter, useTokenConfigs } from '@/hooks';
+import { useStringGetter } from '@/hooks';
+import { useAccountBalance } from '@/hooks/useAccountBalance';
 
 import { Button } from '@/components/Button';
 
@@ -55,9 +58,13 @@ export const WithdrawButtonAndReceipt = ({
   const stringGetter = useStringGetter();
 
   const { leverage } = useSelector(getSubaccount, shallowEqual) || {};
-  const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
+  const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
   const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
-  const { usdcLabel } = useTokenConfigs();
+
+  const toAmount =
+    summary?.toAmount &&
+    withdrawToken?.decimals &&
+    formatUnits(BigInt(summary.toAmount), withdrawToken?.decimals);
 
   const feeSubitems: DetailsItem[] = [];
 
@@ -85,26 +92,6 @@ export const WithdrawButtonAndReceipt = ({
 
   const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0);
 
-  const { toAmount, toAmountMin } = useMemo(() => {
-    if (isCctp) {
-      return {
-        toAmount: summary?.toAmount,
-        toAmountMin: summary?.toAmountMin,
-      };
-    } else {
-      return {
-        toAmount:
-          summary?.toAmount &&
-          withdrawToken?.decimals &&
-          formatUnits(BigInt(summary.toAmount), withdrawToken.decimals),
-        toAmountMin:
-          summary?.toAmountMin &&
-          withdrawToken?.decimals &&
-          formatUnits(BigInt(summary.toAmountMin), withdrawToken.decimals),
-      };
-    }
-  }, [isCctp, summary, withdrawToken]);
-
   const submitButtonReceipt = [
     {
       key: 'total-fees',
@@ -112,12 +99,24 @@ export const WithdrawButtonAndReceipt = ({
       value: <Output type={OutputType.Fiat} value={totalFees} />,
       subitems: feeSubitems,
     },
+    {
+      key: 'slippage',
+      label: <span>{stringGetter({ key: STRING_KEYS.MAX_SLIPPAGE })}</span>,
+      value: (
+        <SlippageEditor
+          disabled
+          slippage={slippage}
+          setIsEditing={setIsEditingSlipapge}
+          setSlippage={setSlippage}
+        />
+      ),
+    },
     {
       key: 'exchange-rate',
       label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
       value: withdrawToken && typeof summary?.exchangeRate === 'number' && (
         <Styled.ExchangeRate>
-          <Output type={OutputType.Asset} value={1} fractionDigits={0} tag={usdcLabel} />
+          <Output type={OutputType.Asset} value={1} fractionDigits={0} tag="USDC" />
           =
           <Output
             type={OutputType.Asset}
@@ -128,7 +127,7 @@ export const WithdrawButtonAndReceipt = ({
       ),
     },
     {
-      key: 'estimated-route-duration',
+      key: 'estimatedRouteDuration',
       label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
       value: typeof summary?.estimatedRouteDuration === 'number' && (
         <Output
@@ -146,39 +145,20 @@ export const WithdrawButtonAndReceipt = ({
       ),
     },
     {
-      key: 'expected-amount-received',
+      key: 'wallet',
       label: (
         <span>
-          {stringGetter({ key: STRING_KEYS.EXPECTED_AMOUNT_RECEIVED })}{' '}
+          {stringGetter({ key: STRING_KEYS.MINIMUM_AMOUNT_RECEIVED })}{' '}
           {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
         </span>
       ),
-      value: <Output type={OutputType.Asset} value={toAmount} fractionDigits={TOKEN_DECIMALS} />,
-      subitems: [
-        {
-          key: 'minimum-amount-received',
-          label: (
-            <span>
-              {stringGetter({ key: STRING_KEYS.MINIMUM_AMOUNT_RECEIVED })}{' '}
-              {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
-            </span>
-          ),
-          value: (
-            <Output type={OutputType.Asset} value={toAmountMin} fractionDigits={TOKEN_DECIMALS} />
-          ),
-          tooltip: 'minimum-amount-received',
-        },
-      ],
-    },
-    {
-      key: 'slippage',
-      label: <span>{stringGetter({ key: STRING_KEYS.MAX_SLIPPAGE })}</span>,
       value: (
-        <SlippageEditor
-          disabled
-          slippage={slippage}
-          setIsEditing={setIsEditingSlipapge}
-          setSlippage={setSlippage}
+        <Styled.DiffOutput
+          type={OutputType.Asset}
+          value={'0'}
+          newValue={toAmount}
+          sign={NumberSign.Positive}
+          withDiff={Boolean(toAmount)}
         />
       ),
     },

src/views/tables/MarketsTable.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { STRING_KEYS } from '@/constants/localization';
 import { MarketFilters, type MarketData } from '@/constants/markets';
-import { FUNDING_DECIMALS, LARGE_TOKEN_DECIMALS } from '@/constants/numbers';
+import { LARGE_TOKEN_DECIMALS } from '@/constants/numbers';
 import { AppRoute } from '@/constants/routes';
 
 import { useBreakpoints, useStringGetter } from '@/hooks';
@@ -128,8 +128,7 @@ export const MarketsTable = ({ className }: { className?: string }) => {
               label: stringGetter({ key: STRING_KEYS.FUNDING_RATE_1H_SHORT }),
               renderCell: (row) => (
                 <Styled.Output
-                  type={OutputType.Percent}
-                  fractionDigits={FUNDING_DECIMALS}
+                  type={OutputType.SmallPercent}
                   value={row.nextFundingRate}
                   isPositive={MustBigNumber(row.nextFundingRate).gt(0)}
                   isNegative={MustBigNumber(row.nextFundingRate).isNegative()}