merge order types

package.json

@@ -42,7 +42,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@dydxprotocol/v4-abacus": "^1.4.2",
     "@dydxprotocol/v4-client-js": "^1.0.20",
-    "@dydxprotocol/v4-localization": "^1.1.26",
+    "@dydxprotocol/v4-localization": "^1.1.25",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",

pnpm-lock.yaml

@@ -36,8 +36,8 @@ dependencies:
     specifier: ^1.0.20
     version: 1.0.20
   '@dydxprotocol/v4-localization':
-    specifier: ^1.1.26
-    version: 1.1.26
+    specifier: ^1.1.25
+    version: 1.1.25
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1323,8 +1323,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.1.26:
-    resolution: {integrity: sha512-u+J1J5Up8McwZOcDaG9GrH/A8p4vD2NU2CT2hPdYyKgEd28XeAYvv7bNAQRKdiBaqTePbbF5uB6TMAQnEGnb1A==}
+  /@dydxprotocol/v4-localization@1.1.25:
+    resolution: {integrity: sha512-84BJMybnZBrRnDpnHlMUcOYT1r0ODtgcdgrjdzTw8b0sViTY6ne9ob690fcn/vQO+6sEdDsdt+08ud0H+ZvyYg==}
     dev: false
 
   /@dydxprotocol/v4-proto@4.0.0-dev.0:
@@ -8882,7 +8882,7 @@ packages:
     resolution: {integrity: sha512-WIdaQ8uW1vIbYvNnAVunkC6yxTrneJC7VQ5UUQ0kuw8b0C0A39KTIpoQHCfc8tV7o9vF4niwRhdXEdfAgQEsQQ==}
     dependencies:
       cosmos-directory-types: 0.0.6
-      node-fetch-native: 1.6.2
+      node-fetch-native: 1.6.1
     dev: false
 
   /cosmos-directory-types@0.0.6:
@@ -12892,10 +12892,6 @@ packages:
     resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
     dev: false
 
-  /node-fetch-native@1.6.2:
-    resolution: {integrity: sha512-69mtXOFZ6hSkYiXAVB5SqaRvrbITC/NPyqv7yuu/qw0nmgPyYbIMYYNIDhNtwPrzk0ptrimrLz/hhjvm4w5Z+w==}
-    dev: false
-
   /node-fetch@2.6.12:
     resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
     engines: {node: 4.x || >=6.0.0}

src/constants/trade.ts

@@ -4,7 +4,6 @@ import { AlertType } from '@/constants/alerts';
 import { STRING_KEYS } from '@/constants/localization';
 import { TimeUnitShort } from '@/constants/time';
 
-// TODO: rename to OrderType
 export enum TradeTypes {
   MARKET = 'MARKET',
   LIMIT = 'LIMIT',
@@ -15,6 +14,16 @@ export enum TradeTypes {
   TRAILING_STOP = 'TRAILING_STOP',
 }
 
+enum ClosingTradeTypes {
+  LIQUIDATED = 'LIQUIDATED',
+  LIQUIDATION = 'LIQUIDATION',
+  OFFSETTING = 'OFFSETTING',
+  DELEVERAGED = 'DELEVERAGED',
+  FINAL_SETTLEMENT = 'FINAL_SETTLEMENT',
+}
+
+export type OrderType = TradeTypes | ClosingTradeTypes;
+
 export enum TimeInForceOptions {
   GTT = 'GTT',
   FOK = 'FOK',
@@ -40,49 +49,74 @@ export const POSITION_SIDE_STRINGS: Record<PositionSide, string> = {
   [PositionSide.Short]: STRING_KEYS.SHORT_POSITION_SHORT,
 };
 
-export const TRADE_TYPE_STRINGS: Record<
-  TradeTypes,
+export const ORDER_TYPE_STRINGS: Record<
+  OrderType,
   {
-    tradeTypeKeyShort: string;
-    tradeTypeKey: string;
-    descriptionKey: string;
+    orderTypeKeyShort: string;
+    orderTypeKey: string;
+    descriptionKey: string | null;
   }
 > = {
   [TradeTypes.LIMIT]: {
-    tradeTypeKeyShort: STRING_KEYS.LIMIT_ORDER_SHORT,
-    tradeTypeKey: STRING_KEYS.LIMIT_ORDER,
+    orderTypeKeyShort: STRING_KEYS.LIMIT_ORDER_SHORT,
+    orderTypeKey: STRING_KEYS.LIMIT_ORDER,
     descriptionKey: STRING_KEYS.LIMIT_ORDER_DESCRIPTION,
   },
   [TradeTypes.MARKET]: {
-    tradeTypeKeyShort: STRING_KEYS.MARKET_ORDER_SHORT,
-    tradeTypeKey: STRING_KEYS.MARKET_ORDER,
+    orderTypeKeyShort: STRING_KEYS.MARKET_ORDER_SHORT,
+    orderTypeKey: STRING_KEYS.MARKET_ORDER,
     descriptionKey: STRING_KEYS.MARKET_ORDER_DESCRIPTION,
   },
   [TradeTypes.STOP_LIMIT]: {
-    tradeTypeKeyShort: STRING_KEYS.STOP_LIMIT,
-    tradeTypeKey: STRING_KEYS.STOP_LIMIT,
+    orderTypeKeyShort: STRING_KEYS.STOP_LIMIT,
+    orderTypeKey: STRING_KEYS.STOP_LIMIT,
     descriptionKey: STRING_KEYS.STOP_LIMIT_DESCRIPTION,
   },
   [TradeTypes.STOP_MARKET]: {
-    tradeTypeKeyShort: STRING_KEYS.STOP_MARKET,
-    tradeTypeKey: STRING_KEYS.STOP_MARKET,
+    orderTypeKeyShort: STRING_KEYS.STOP_MARKET,
+    orderTypeKey: STRING_KEYS.STOP_MARKET,
     descriptionKey: STRING_KEYS.STOP_MARKET_DESCRIPTION,
   },
   [TradeTypes.TAKE_PROFIT]: {
-    tradeTypeKeyShort: STRING_KEYS.TAKE_PROFIT_LIMIT,
-    tradeTypeKey: STRING_KEYS.TAKE_PROFIT_LIMIT,
+    orderTypeKeyShort: STRING_KEYS.TAKE_PROFIT_LIMIT,
+    orderTypeKey: STRING_KEYS.TAKE_PROFIT_LIMIT,
     descriptionKey: STRING_KEYS.TAKE_PROFIT_LIMIT_DESCRIPTION,
   },
   [TradeTypes.TAKE_PROFIT_MARKET]: {
-    tradeTypeKeyShort: STRING_KEYS.TAKE_PROFIT_MARKET,
-    tradeTypeKey: STRING_KEYS.TAKE_PROFIT_MARKET,
+    orderTypeKeyShort: STRING_KEYS.TAKE_PROFIT_MARKET,
+    orderTypeKey: STRING_KEYS.TAKE_PROFIT_MARKET,
     descriptionKey: STRING_KEYS.TAKE_PROFIT_MARKET_DESCRIPTION,
   },
   [TradeTypes.TRAILING_STOP]: {
-    tradeTypeKeyShort: STRING_KEYS.TRAILING_STOP,
-    tradeTypeKey: STRING_KEYS.TRAILING_STOP,
+    orderTypeKeyShort: STRING_KEYS.TRAILING_STOP,
+    orderTypeKey: STRING_KEYS.TRAILING_STOP,
     descriptionKey: STRING_KEYS.TRAILING_STOP_DESCRIPTION,
   },
+  [ClosingTradeTypes.LIQUIDATED]: {
+    orderTypeKeyShort: STRING_KEYS.LIQUIDATED,
+    orderTypeKey: STRING_KEYS.LIQUIDATED,
+    descriptionKey: null,
+  },
+  [ClosingTradeTypes.LIQUIDATION]: {
+    orderTypeKeyShort: STRING_KEYS.LIQUIDATION,
+    orderTypeKey: STRING_KEYS.LIQUIDATION,
+    descriptionKey: null,
+  },
+  [ClosingTradeTypes.OFFSETTING]: {
+    orderTypeKeyShort: STRING_KEYS.OFFSETTING,
+    orderTypeKey: STRING_KEYS.OFFSETTING,
+    descriptionKey: null,
+  },
+  [ClosingTradeTypes.DELEVERAGED]: {
+    orderTypeKeyShort: STRING_KEYS.DELEVERAGED,
+    orderTypeKey: STRING_KEYS.DELEVERAGED,
+    descriptionKey: null,
+  },
+  [ClosingTradeTypes.FINAL_SETTLEMENT]: {
+    orderTypeKeyShort: STRING_KEYS.FINAL_SETTLEMENT,
+    orderTypeKey: STRING_KEYS.FINAL_SETTLEMENT,
+    descriptionKey: null,
+  },
 };
 
 export const GOOD_TIL_TIME_TIMESCALE_STRINGS: Record<TimeUnitShort, string> = {

src/constants/wallets.ts

@@ -40,7 +40,6 @@ export enum WalletErrorType {
   // General
   ChainMismatch,
   UserCanceled,
-  SwitchChainMethodMissing,
 
   // Non-Deterministic
   NonDeterministicWallet,

src/hooks/tradingView/useTradingView.ts

@@ -5,9 +5,11 @@ import isEmpty from 'lodash/isEmpty';
 import { LanguageCode, ResolutionString, widget } from 'public/tradingview/charting_library';
 
 import { DEFAULT_RESOLUTION } from '@/constants/candles';
-import { SUPPORTED_LOCALE_BASE_TAGS } from '@/constants/localization';
+import { SUPPORTED_LOCALE_BASE_TAGS, STRING_KEYS } from '@/constants/localization';
+
 import { LocalStorageKey } from '@/constants/localStorage';
-import { useDydxClient, useLocalStorage } from '@/hooks';
+
+import { useDydxClient, useLocalStorage, useStringGetter } from '@/hooks';
 import { store } from '@/state/_store';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
@@ -23,14 +25,19 @@ import { getSavedResolution, getWidgetOptions, getWidgetOverrides } from '@/lib/
  */
 export const useTradingView = ({
   tvWidgetRef,
+  displayButtonRef,
   setIsChartReady,
 }: {
   tvWidgetRef: React.MutableRefObject<any>;
+  displayButtonRef: React.MutableRefObject<any>;
   setIsChartReady: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const marketId = useSelector(getCurrentMarketId);
+  const stringGetter = useStringGetter();
+
   const appTheme = useSelector(getAppTheme);
   const appColorMode = useSelector(getAppColorMode);
+
+  const marketId = useSelector(getCurrentMarketId);
   const marketIds = useSelector(getMarketIds, shallowEqual);
   const selectedLocale = useSelector(getSelectedLocale);
   const selectedNetwork = useSelector(getSelectedNetwork);
@@ -49,7 +56,6 @@ export const useTradingView = ({
       const widgetOptions = getWidgetOptions();
       const widgetOverrides = getWidgetOverrides({ appTheme, appColorMode });
       const options = {
-        // debug: true,
         ...widgetOptions,
         ...widgetOverrides,
         datafeed: getDydxDatafeed(store, getCandlesForDatafeed),
@@ -63,6 +69,17 @@ export const useTradingView = ({
       tvWidgetRef.current = tvChartWidget;
 
       tvWidgetRef.current.onChartReady(() => {
+        tvWidgetRef?.current?.headerReady().then(() => {
+          displayButtonRef.current = tvWidgetRef?.current?.createButton();
+          displayButtonRef.current.innerHTML = `<span>${stringGetter({
+            key: STRING_KEYS.ORDER_LINES,
+          })}</span> <div class="displayOrdersButton-toggle"></div>`;
+          displayButtonRef.current.setAttribute(
+            'title',
+            stringGetter({ key: STRING_KEYS.ORDER_LINES_TOOLTIP })
+          );
+        });
+
         tvWidgetRef?.current?.subscribe('onAutoSaveNeeded', () =>
           tvWidgetRef?.current?.save((chartConfig: object) => setTvChartConfig(chartConfig))
         );
@@ -72,6 +89,8 @@ export const useTradingView = ({
     }
 
     return () => {
+      displayButtonRef.current?.remove();
+      displayButtonRef.current = null;
       tvWidgetRef.current?.remove();
       tvWidgetRef.current = null;
       setIsChartReady(false);

src/hooks/tradingView/useTradingViewTheme.ts

@@ -1,12 +1,16 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
-import type { IChartingLibraryWidget, ThemeName } from 'public/tradingview/charting_library';
+import type {
+  IChartingLibraryWidget,
+  IOrderLineAdapter,
+  ThemeName,
+} from 'public/tradingview/charting_library';
 
 import { AppColorMode, AppTheme } from '@/state/configs';
 import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
 
-import { getWidgetOverrides } from '@/lib/tradingView/utils';
+import { getWidgetOverrides, getOrderLineColors } from '@/lib/tradingView/utils';
 
 /**
  * @description Method to define a type guard and check that an element is an IFRAME
@@ -22,9 +26,11 @@ const isIFrame = (element: HTMLElement | null): element is HTMLIFrameElement =>
  * In order to support our Classic along with Dark/Light, we are directly accessing the <html> within the iFrame.
  */
 export const useTradingViewTheme = ({
+  orderLines,
   tvWidget,
   isWidgetReady,
 }: {
+  orderLines: Record<string, IOrderLineAdapter>;
   tvWidget: (IChartingLibraryWidget & { _id?: string; _ready?: boolean }) | null;
   isWidgetReady?: boolean;
 }) => {
@@ -37,8 +43,8 @@ export const useTradingViewTheme = ({
         .changeTheme?.(
           {
             [AppTheme.Classic]: '',
-            [AppTheme.Dark]: 'Dark',
-            [AppTheme.Light]: 'Light',
+            [AppTheme.Dark]: 'dark',
+            [AppTheme.Light]: 'light',
           }[appTheme] as ThemeName
         )
         .then(() => {
@@ -49,9 +55,17 @@ export const useTradingViewTheme = ({
 
             if (isIFrame(frame) && frame.contentWindow) {
               const innerHtml = frame.contentWindow.document.documentElement;
-
-              if (appTheme === AppTheme.Classic) {
-                innerHtml?.classList.remove('theme-dark', 'theme-light');
+              switch (appTheme) {
+                case AppTheme.Classic:
+                  innerHtml?.classList.remove('theme-dark', 'theme-light');
+                  break;
+                case AppTheme.Dark:
+                  innerHtml?.classList.remove('theme-light');
+                  innerHtml?.classList.add('theme-dark');
+                  break;
+                case AppTheme.Light:
+                  innerHtml?.classList.remove('theme-dark');
+                  innerHtml?.classList.add('theme-light');
               }
             }
           }
@@ -73,7 +87,22 @@ export const useTradingViewTheme = ({
               'volume.color.1': studies_overrides['volume.volume.color.1'],
             });
           }
+
+          // Necessary to update existing chart lines
+          Object.entries(orderLines).forEach(([key, line]) => {
+            const { orderColor, borderColor, backgroundColor, textColor, textButtonColor } =
+              getOrderLineColors({ side: key.split('-')[0], appTheme, appColorMode });
+
+            line
+              .setLineColor(orderColor)
+              .setQuantityBackgroundColor(orderColor)
+              .setQuantityBorderColor(borderColor)
+              .setBodyBackgroundColor(backgroundColor)
+              .setBodyBorderColor(borderColor)
+              .setBodyTextColor(textColor)
+              .setQuantityTextColor(textButtonColor);
+          });
         });
     }
-  }, [appTheme, appColorMode]);
+  }, [appTheme, appColorMode, isWidgetReady]);
 };

src/hooks/usePotentialMarkets.tsx

@@ -88,7 +88,7 @@ export const usePotentialMarketsContext = () => {
         impactNotional: 10_000,
       },
       1: {
-        label: stringGetter({ key: STRING_KEYS.MID_CAP }),
+        label: 'Mid-cap',
         initialMarginFraction: 0.1,
         maintenanceMarginFraction: 0.05,
         impactNotional: 5_000,

src/hooks/useWalletConnection.ts

@@ -163,20 +163,17 @@ export const useWalletConnection = () => {
           }
         }
       } catch (error) {
-        const { isErrorExpected } = parseWalletError({ error, stringGetter });
-        if (!isErrorExpected) {
-          throw Object.assign(
-            new Error([error.message, error.cause?.message].filter(Boolean).join('\n')),
-            {
-              walletConnectionType: walletConnection?.type,
-            }
-          );
-        }
+        throw Object.assign(
+          new Error([error.message, error.cause?.message].filter(Boolean).join('\n')),
+          {
+            walletConnectionType: walletConnection?.type,
+          }
+        );
       }
 
       return {
         walletType,
-        walletConnectionType: walletConnection?.type,
+        walletConnectionType: walletConnection.type,
       };
     },
     [isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi]

src/lib/tradingView/utils.ts

@@ -1,6 +1,8 @@
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+
 import { Candle, TradingViewBar, TradingViewSymbol } from '@/constants/candles';
 
-import type { AppTheme, AppColorMode } from '@/state/configs';
+import { AppTheme, type AppColorMode } from '@/state/configs';
 
 import { Themes } from '@/styles/themes';
 
@@ -47,6 +49,30 @@ export const getHistorySlice = ({
   return bars.filter(({ time }) => time >= fromMs);
 };
 
+export const getOrderLineColors = ({
+  appTheme,
+  appColorMode,
+  side,
+}: {
+  appTheme: AppTheme;
+  appColorMode: AppColorMode;
+  side: OrderSide;
+}) => {
+  const theme = Themes[appTheme][appColorMode];
+  const orderColor = {
+    [OrderSide.BUY]: theme.positive,
+    [OrderSide.SELL]: theme.negative,
+  }[side];
+
+  return {
+    orderColor,
+    borderColor: theme.borderDefault,
+    backgroundColor: theme.layer1,
+    textColor: theme.textTertiary,
+    textButtonColor: theme.textButton,
+  };
+};
+
 export const getWidgetOverrides = ({
   appTheme,
   appColorMode,
@@ -57,6 +83,7 @@ export const getWidgetOverrides = ({
   const theme = Themes[appTheme][appColorMode];
 
   return {
+    theme: appTheme === AppTheme.Dark ? 'dark' : AppTheme.Light ? 'light' : '',
     overrides: {
       'paneProperties.background': theme.layer2,
       'paneProperties.horzGridProperties.color': theme.layer3,

src/lib/wallet/index.ts

@@ -92,10 +92,6 @@ export const getWalletErrorType = ({ error }: { error: Error }) => {
     return WalletErrorType.ChainMismatch;
   }
 
-  if (messageLower.includes('Missing or invalid. request() method: wallet_switchEthereumChain')) {
-    return WalletErrorType.SwitchChainMethodMissing;
-  }
-
   // ImToken - User canceled
   if (messageLower.includes('用户取消了操作')) {
     return WalletErrorType.UserCanceled;
@@ -117,18 +113,13 @@ export const parseWalletError = ({
 }) => {
   const walletErrorType = getWalletErrorType({ error });
   let message;
-  let isErrorExpected;
 
   switch (walletErrorType) {
     case WalletErrorType.ChainMismatch:
-    case WalletErrorType.UserCanceled:
-    case WalletErrorType.SwitchChainMethodMissing: {
-      isErrorExpected = true;
-      message = error.message;
+    case WalletErrorType.UserCanceled: {
       break;
     }
     default: {
-      isErrorExpected = false;
       message = stringGetter({
         key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
         params: {
@@ -141,6 +132,5 @@ export const parseWalletError = ({
   return {
     walletErrorType,
     message,
-    isErrorExpected,
   };
 };

src/pages/token/Governance.tsx

@@ -19,7 +19,7 @@ export default () => {
       <Styled.HeaderSection>
         <ContentSectionHeader
           title={stringGetter({ key: STRING_KEYS.GOVERNANCE })}
-          subtitle={stringGetter({ key: STRING_KEYS.GOVERNANCE_PAGE_SUBTITLE })}
+          subtitle="Participate in the ecosystem by voting on Governance proposals or submitting your own."
         />
       </Styled.HeaderSection>
 

src/pages/token/Token.tsx

@@ -59,7 +59,7 @@ export default () => {
                           <Icon iconName={IconName.CurrencySign} />
                         </Styled.IconContainer>
                       ),
-                      label: stringGetter({ key: STRING_KEYS.STAKING_REWARDS }),
+                      label: 'Staking Rewards', // stringGetter({ key: STRING_KEYS.STAKING_REWARDS }),
                       href: TokenRoute.StakingRewards,
                       tag: stringGetter({ key: STRING_KEYS.NEW }),
                     },

src/pages/token/staking/StakingPage.tsx

@@ -5,21 +5,18 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { DetachedSection } from '@/components/ContentSection';
 import { ContentSectionHeader } from '@/components/ContentSectionHeader';
-import { useStringGetter } from '@/hooks';
 
 import { StakingPanel } from './StakingPanel';
 import { StrideStakingPanel } from './StrideStakingPanel';
 import { DYDXBalancePanel } from '../rewards/DYDXBalancePanel';
-import { STRING_KEYS } from '@/constants/localization';
 
 export default () => {
-  const stringGetter = useStringGetter();
   return (
     <DetachedSection>
       <Styled.HeaderSection>
         <ContentSectionHeader
-          title={stringGetter({ key: STRING_KEYS.STAKING_REWARDS })}
-          subtitle={stringGetter({ key: STRING_KEYS.STAKING_PAGE_SUBTITLE })}
+          title="Staking Rewards"
+          subtitle="Stake to earn APR. Unstaking can take up to 30 days."
         />
       </Styled.HeaderSection>
 

src/pages/token/staking/StakingPanel.tsx

@@ -23,7 +23,7 @@ export const StakingPanel = ({ className }: { className?: string }) => {
       className={className}
       slotHeaderContent={
         <Styled.Header>
-          <Styled.Title>{stringGetter({ key: STRING_KEYS.STAKE_WITH_KEPLR })}</Styled.Title>
+          <Styled.Title>Stake with Keplr</Styled.Title>
           <Styled.Img src="/third-party/keplr.png" alt={stringGetter({ key: STRING_KEYS.KEPLR })} />
         </Styled.Header>
       }

src/pages/token/staking/StrideStakingPanel.tsx

@@ -24,7 +24,7 @@ export const StrideStakingPanel = ({ className }: { className?: string }) => {
       slotHeaderContent={
         <Styled.Header>
           <Styled.Title>
-            {stringGetter({ key: STRING_KEYS.LIQUID_STAKE_W_STRIDE })}
+            Liquid Stake with Stride
             <Tag isHighlighted>{stringGetter({ key: STRING_KEYS.NEW })}</Tag>
           </Styled.Title>
           <Styled.Img src="/third-party/stride.png" alt="Stride" />
@@ -33,10 +33,7 @@ export const StrideStakingPanel = ({ className }: { className?: string }) => {
       onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavStride }))}
     >
       <Styled.Description>
-        {stringGetter({
-          key: STRING_KEYS.LIQUID_STAKE_STRIDE_DESCRIPTION,
-          params: { TOKEN_DENOM: chainTokenLabel },
-        })}
+        {`Stake your ${chainTokenLabel} tokens for st${chainTokenLabel} which you can deploy around the ecosystem.`}
         <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
           {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
         </Link>

src/pages/trade/TradeDialogTrigger.tsx

@@ -3,7 +3,7 @@ import { useSelector, shallowEqual } from 'react-redux';
 import styled, { AnyStyledComponent } from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { TRADE_TYPE_STRINGS } from '@/constants/trade';
+import { ORDER_TYPE_STRINGS } from '@/constants/trade';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -43,7 +43,7 @@ export const TradeDialogTrigger = () => {
             <Styled.TradeSummary>
               <Styled.TradeType>
                 <span>
-                  {stringGetter({ key: TRADE_TYPE_STRINGS[selectedTradeType].tradeTypeKey })}
+                  {stringGetter({ key: ORDER_TYPE_STRINGS[selectedTradeType].orderTypeKey })}
                 </span>
                 <OrderSideTag size={TagSize.Medium} orderSide={selectedOrderSide} />
               </Styled.TradeType>

src/views/charts/TvChart.tsx

@@ -1,28 +1,52 @@
 import { useEffect, useRef, useState } from 'react';
+
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
-import { useDispatch, useSelector } from 'react-redux';
 
-import type { IChartingLibraryWidget, ResolutionString } from 'public/tradingview/charting_library';
+import type {
+  IChartingLibraryWidget,
+  IOrderLineAdapter,
+  ResolutionString,
+} from 'public/tradingview/charting_library';
 
-import { DEFAULT_MARKETID } from '@/constants/markets';
+import { AbacusOrderStatus } from '@/constants/abacus';
 import { DEFAULT_RESOLUTION, RESOLUTION_CHART_CONFIGS } from '@/constants/candles';
+import { DEFAULT_MARKETID } from '@/constants/markets';
+import { type OrderType, ORDER_TYPE_STRINGS } from '@/constants/trade';
+
+import { useStringGetter } from '@/hooks';
 import { useTradingView, useTradingViewTheme } from '@/hooks/tradingView';
 
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 
+import { getCurrentMarketOrders } from '@/state/accountSelectors';
+import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
 import { setTvChartResolution } from '@/state/perpetuals';
-
 import { getCurrentMarketId, getSelectedResolutionForMarket } from '@/state/perpetualsSelectors';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
+import { MustBigNumber } from '@/lib/numbers';
+import { getOrderLineColors } from '@/lib/tradingView/utils';
+
 type TvWidget = IChartingLibraryWidget & { _id?: string; _ready?: boolean };
 
-export const TvChart = () => {
-  const [isChartReady, setIsChartReady] = useState(false);
+let orderLines: Record<string, IOrderLineAdapter> = {};
 
+export const TvChart = () => {
   const dispatch = useDispatch();
+  const stringGetter = useStringGetter();
+
+  const [isChartReady, setIsChartReady] = useState(false);
+  const [showOrderLines, setShowOrderLines] = useState(false);
+
+  const displayButtonRef = useRef<HTMLElement | null>(null);
+
+  const appTheme = useSelector(getAppTheme);
+  const appColorMode = useSelector(getAppColorMode);
+
   const currentMarketId: string = useSelector(getCurrentMarketId) || DEFAULT_MARKETID;
+  const currentMarketOrders = useSelector(getCurrentMarketOrders, shallowEqual);
 
   const selectedResolution: string =
     useSelector(getSelectedResolutionForMarket(currentMarketId)) || DEFAULT_RESOLUTION;
@@ -33,8 +57,8 @@ export const TvChart = () => {
   const chart = isWidgetReady ? tvWidget?.chart() : undefined;
   const chartResolution = chart?.resolution?.();
 
-  const { savedResolution } = useTradingView({ tvWidgetRef, setIsChartReady });
-  useTradingViewTheme({ tvWidget, isWidgetReady });
+  const { savedResolution } = useTradingView({ tvWidgetRef, displayButtonRef, setIsChartReady });
+  useTradingViewTheme({ tvWidget, isWidgetReady, orderLines });
 
   const setVisibleRangeForResolution = ({ resolution }: { resolution: ResolutionString }) => {
     // Different resolutions have different timeframes to display data efficiently.
@@ -49,6 +73,9 @@ export const TvChart = () => {
     tvWidget?.activeChart().setVisibleRange(newRange, { percentRightMargin: 10 });
   };
 
+  /**
+   * @description Hook to handle changing chart resolution
+   */
   useEffect(() => {
     if (chartResolution) {
       if (chartResolution !== selectedResolution) {
@@ -69,6 +96,111 @@ export const TvChart = () => {
     }
   }, [currentMarketId, isWidgetReady]);
 
+  /**
+   * @description Hook to handle order line toggle state
+   */
+  useEffect(() => {
+    if (isChartReady && displayButtonRef && displayButtonRef.current) {
+      displayButtonRef.current.onclick = () => {
+        const newShowOrderLinesState = !showOrderLines;
+        if (newShowOrderLinesState) {
+          displayButtonRef.current?.classList?.add('order-lines-active');
+        } else {
+          displayButtonRef.current?.classList?.remove('order-lines-active');
+        }
+        setShowOrderLines(newShowOrderLinesState);
+      };
+    }
+  }, [isChartReady, showOrderLines]);
+
+  /**
+   * @description Hook to handle drawing order lines
+   */
+  useEffect(() => {
+    if (tvWidget && isChartReady) {
+      tvWidget.onChartReady(() => {
+        tvWidget.chart().dataReady(() => {
+          if (showOrderLines) {
+            drawOrderLines();
+          } else {
+            deleteOrderLines();
+          }
+        });
+      });
+    }
+  }, [isChartReady, showOrderLines, currentMarketOrders, currentMarketId]);
+
+  const drawOrderLines = () => {
+    if (!currentMarketOrders) return;
+    currentMarketOrders.forEach(
+      ({
+        id,
+        type,
+        status,
+        side,
+        cancelReason,
+        remainingSize,
+        size,
+        triggerPrice,
+        price,
+        trailingPercent,
+      }) => {
+        const key = `${side.rawValue}-${id}`;
+        const quantity = (remainingSize ?? size).toString();
+
+        const orderType = type.rawValue as OrderType;
+        const orderLabel = stringGetter({
+          key: ORDER_TYPE_STRINGS[orderType].orderTypeKey,
+        });
+        const orderString = trailingPercent ? `${orderLabel} ${trailingPercent}%` : orderLabel;
+
+        const shouldShow =
+          !cancelReason &&
+          (status === AbacusOrderStatus.open || status === AbacusOrderStatus.untriggered);
+
+        const maybeOrderLine = key in orderLines ? orderLines[key] : null;
+        if (maybeOrderLine) {
+          if (!shouldShow) {
+            maybeOrderLine.remove();
+            delete orderLines[key];
+            return;
+          } else if (maybeOrderLine.getQuantity() !== quantity) {
+            maybeOrderLine.setQuantity(quantity);
+            return;
+          }
+        } else if (shouldShow) {
+          const { orderColor, borderColor, backgroundColor, textColor, textButtonColor } =
+            getOrderLineColors({ side: side.rawValue, appTheme, appColorMode });
+
+          const orderLine = tvWidget
+            ?.chart()
+            .createOrderLine({ disableUndo: false })
+            .setPrice(MustBigNumber(triggerPrice ?? price).toNumber())
+            .setQuantity(quantity)
+            .setText(orderString)
+            .setLineColor(orderColor)
+            .setQuantityBackgroundColor(orderColor)
+            .setQuantityBorderColor(borderColor)
+            .setBodyBackgroundColor(backgroundColor)
+            .setBodyBorderColor(borderColor)
+            .setBodyTextColor(textColor)
+            .setQuantityTextColor(textButtonColor);
+
+          if (orderLine) {
+            orderLines[key] = orderLine;
+          }
+        }
+      }
+    );
+  };
+
+  const deleteOrderLines = () => {
+    Object.values(orderLines).forEach((line) => {
+      line.remove();
+    });
+    orderLines = {};
+  };
+
   return (
     <Styled.PriceChart isChartReady={isChartReady}>
       {!isChartReady && <LoadingSpace id="tv-chart-loading" />}

src/views/dialogs/ExternalLinkDialog.tsx

@@ -15,7 +15,6 @@ type ElementProps = {
   link: string;
   linkDescription?: string;
   title?: ReactNode;
-  slotContent?: ReactNode;
   setIsOpen: (open: boolean) => void;
 };
 
@@ -25,7 +24,6 @@ export const ExternalLinkDialog = ({
   link,
   linkDescription,
   title,
-  slotContent,
 }: ElementProps) => {
   const stringGetter = useStringGetter();
   return (
@@ -38,7 +36,6 @@ export const ExternalLinkDialog = ({
       }
     >
       <Styled.Content>
-        {slotContent}
         <p>{stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE_DISCLAIMER })}.</p>
         <Button type={ButtonType.Link} action={ButtonAction.Primary} href={link}>
           {buttonText ?? stringGetter({ key: STRING_KEYS.CONTINUE })}

src/views/dialogs/ExternalNavKeplrDialog.tsx

@@ -1,9 +1,6 @@
-import { useCallback } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
-import { useDispatch } from 'react-redux';
 
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
-import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';
 
@@ -12,8 +9,6 @@ import { Dialog, DialogPlacement } from '@/components/Dialog';
 import { IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 
-import { closeDialog, openDialog } from '@/state/dialogs';
-
 import { layoutMixins } from '@/styles/layoutMixins';
 
 type ElementProps = {
@@ -23,20 +18,8 @@ type ElementProps = {
 export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
   const stringGetter = useStringGetter();
   const { keplrDashboard, accountExportLearnMore } = useURLConfigs();
-  const dispatch = useDispatch();
-  const { isTablet } = useBreakpoints();
 
-  const onExternalNavDialog = useCallback(() => {
-    dispatch(closeDialog());
-    dispatch(
-      openDialog({
-        type: DialogTypes.ExternalLink,
-        dialogProps: {
-          link: keplrDashboard,
-        },
-      })
-    );
-  }, [dispatch]);
+  const { isTablet } = useBreakpoints();
 
   return (
     <Dialog
@@ -46,11 +29,7 @@ export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
       placement={isTablet ? DialogPlacement.FullScreen : DialogPlacement.Default}
     >
       <Styled.Content>
-        <Styled.Button
-          type={ButtonType.Button}
-          size={ButtonSize.XLarge}
-          onClick={onExternalNavDialog}
-        >
+        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={keplrDashboard}>
           <span>
             {stringGetter({
               key: STRING_KEYS.NAVIGATE_TO_KEPLR,
@@ -67,11 +46,7 @@ export const ExternalNavKeplrDialog = ({ setIsOpen }: ElementProps) => {
           />
         </Styled.Button>
 
-        <Styled.Button
-          type={ButtonType.Link}
-          size={ButtonSize.XLarge}
-          href={accountExportLearnMore}
-        >
+        <Styled.Button type={ButtonType.Link} size={ButtonSize.XLarge} href={accountExportLearnMore}>
           <span>
             {stringGetter({
               key: STRING_KEYS.LEARN_TO_EXPORT,

src/views/dialogs/ExternalNavStrideDialog.tsx

@@ -33,22 +33,15 @@ export const ExternalNavStrideDialog = ({ setIsOpen }: ElementProps) => {
         dialogProps: {
           buttonText: (
             <Styled.Span>
-              {stringGetter({ key: STRING_KEYS.LIQUID_STAKE_ON_STRIDE })}
-              <Icon iconName={IconName.LinkOut} />
+              Liquid Stake on Stride <Icon iconName={IconName.LinkOut} />
             </Styled.Span>
           ),
           link: strideZoneApp,
-          title: stringGetter({ key: STRING_KEYS.LIQUID_STAKING_AND_LEAVING }),
-          slotContent: stringGetter({
-            key: STRING_KEYS.LIQUID_STAKING_AND_LEAVING_DESCRIPTION,
-            params: {
-              CTA: stringGetter({ key: STRING_KEYS.LIQUID_STAKE_ON_STRIDE }),
-            },
-          }),
+          title: 'Liquid staking and leaving website',
         },
       })
     );
-  }, [dispatch, stringGetter]);
+  }, [dispatch]);
 
   return (
     <Dialog
@@ -64,12 +57,7 @@ export const ExternalNavStrideDialog = ({ setIsOpen }: ElementProps) => {
           onClick={openExternalNavDialog}
         >
           <span>
-            {stringGetter({
-              key: STRING_KEYS.NAVIGATE_TO_STRIDE,
-              params: {
-                STRONG_YES: <strong>{stringGetter({ key: STRING_KEYS.YES })}</strong>,
-              },
-            })}
+            <strong>{stringGetter({ key: STRING_KEYS.YES })}</strong>, Navigate to Stride Zone.
           </span>
 
           <Styled.IconButton

src/views/dialogs/OnboardingDialog/GenerateKeys.tsx

@@ -44,6 +44,7 @@ export const GenerateKeys = ({
   onKeysDerived = () => {},
 }: ElementProps) => {
   const stringGetter = useStringGetter();
+  const { isMobile } = useBreakpoints();
 
   const [shouldRememberMe, setShouldRememberMe] = useState(false);
 
@@ -65,30 +66,17 @@ export const GenerateKeys = ({
 
     try {
       await matchNetwork?.();
-      return true;
     } catch (error) {
-      const { message, walletErrorType, isErrorExpected } = parseWalletError({
-        error,
-        stringGetter,
-      });
-
-      if (!isErrorExpected) {
-        log('GenerateKeys/switchNetwork', error, { walletErrorType });
-      }
+      const { message, walletErrorType } = parseWalletError({ error, stringGetter });
 
       if (message) {
+        log('GenerateKeys/switchNetwork', error, { walletErrorType });
         setError(message);
+        throw error;
       }
-
-      return false;
     }
   };
 
-  const switchNetworkAndDeriveKeys = async () => {
-    const networkSwitched = await switchNetwork();
-    if (networkSwitched) await deriveKeys();
-  };
-
   // 2. Derive keys from EVM account
   const { getWalletFromEvmSignature } = useDydxClient();
   const { getSubaccounts } = useAccounts();
@@ -166,16 +154,11 @@ export const GenerateKeys = ({
       setStatus(EvmDerivedAccountStatus.Derived);
     } catch (error) {
       setStatus(EvmDerivedAccountStatus.NotDerived);
-      const { message, walletErrorType, isErrorExpected } = parseWalletError({
-        error,
-        stringGetter,
-      });
+      const { message, walletErrorType } = parseWalletError({ error, stringGetter });
 
       if (message) {
         setError(message);
-        if (!isErrorExpected) {
-          log('GenerateKeys/deriveKeys', error, { walletErrorType });
-        }
+        log('GenerateKeys/deriveKeys', error, { walletErrorType });
       }
     }
   };
@@ -248,7 +231,7 @@ export const GenerateKeys = ({
           {!isMatchingNetwork ? (
             <Button
               action={ButtonAction.Primary}
-              onClick={() => switchNetworkAndDeriveKeys().then(onKeysDerived)}
+              onClick={() => switchNetwork().then(deriveKeys).then(onKeysDerived)}
               state={{ isLoading: isSwitchingNetwork }}
             >
               {stringGetter({ key: STRING_KEYS.SWITCH_NETWORK })}

src/views/dialogs/TradeDialog.tsx

@@ -4,7 +4,7 @@ import styled, { AnyStyledComponent, css } from 'styled-components';
 
 import { TradeInputField } from '@/constants/abacus';
 import { STRING_KEYS, StringKey } from '@/constants/localization';
-import { TradeTypes, TRADE_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade';
+import { TradeTypes, ORDER_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade';
 
 import { useBreakpoints, useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';

src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx

@@ -5,7 +5,7 @@ import type { TradeInputSummary } from '@/constants/abacus';
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
-import { TRADE_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade';
+import { ORDER_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade';
 
 import { useStringGetter, useTokenConfigs } from '@/hooks';
 
@@ -184,7 +184,7 @@ export const PlaceOrderButtonAndReceipt = ({
               ORDER: stringGetter({
                 key: isClosePosition
                   ? STRING_KEYS.CLOSE_ORDER
-                  : TRADE_TYPE_STRINGS[selectedTradeType].tradeTypeKey,
+                  : ORDER_TYPE_STRINGS[selectedTradeType].orderTypeKey,
               }),
             },
           })}

src/views/notifications/TradeNotification/index.tsx

@@ -11,7 +11,7 @@ import {
 } from '@/constants/abacus';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { TRADE_TYPE_STRINGS, TradeTypes } from '@/constants/trade';
+import { ORDER_TYPE_STRINGS, TradeTypes } from '@/constants/trade';
 import { useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -48,7 +48,7 @@ export const TradeNotification = ({ isToast, data, notification }: TradeNotifica
   const { assetId } = marketData ?? {};
   const orderType = ORDER_TYPE as KotlinIrEnumValues<typeof AbacusOrderType>;
   const tradeType = TRADE_TYPES[orderType];
-  const titleKey = tradeType && TRADE_TYPE_STRINGS[tradeType]?.tradeTypeKey;
+  const titleKey = tradeType && ORDER_TYPE_STRINGS[tradeType]?.orderTypeKey;
   const orderStatus = ORDER_STATUS as KotlinIrEnumValues<typeof AbacusOrderStatus>;
 
   return (