High leverage warning improvements

Author: midas-myth

src/components/Synthetics/TradeBox/TradeBox.tsx

@@ -955,10 +955,8 @@ export function TradeBox({ isMobile }: { isMobile: boolean }) {
                   </div>
                 )}
                 {showHighLeverageWarning && (
-                  <AlertInfoCard type="warning" onClose={dismissHighLeverageWarning}>
-                    <Trans>
-                      Using high leverage increases the risk of <span className="underline">losing funds</span>.
-                    </Trans>
+                  <AlertInfoCard type="info" onClose={dismissHighLeverageWarning}>
+                    <Trans>Using high leverage increases the risk of liquidation.</Trans>
                   </AlertInfoCard>
                 )}
                 {isTrigger && (

src/components/Synthetics/TradeBox/hooks/useShowHighLeverageWarning.ts

@@ -1,13 +1,15 @@
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 
 import { AB_HIGH_LEVERAGE_WARNING_GROUP, AB_HIGH_LEVERAGE_WARNING_PROBABILITY } from "config/ab";
 import { ARBITRUM, AVALANCHE, BOTANIX } from "config/chains";
 import { BASIS_POINTS_DIVISOR_BIGINT } from "config/factors";
+import { HIGH_LEVERAGE_WARNING_DISMISSED_TIMESTAMP_KEY } from "config/localStorage";
 import { selectAccount, selectChainId } from "context/SyntheticsStateContext/selectors/globalSelectors";
 import { selectTradeboxToTokenAddress } from "context/SyntheticsStateContext/selectors/shared/baseSelectors";
 import { selectTradeboxLeverage } from "context/SyntheticsStateContext/selectors/tradeboxSelectors";
 import { useSelector } from "context/SyntheticsStateContext/utils";
 import { useIsFreshAccountForHighLeverageTrading } from "domain/synthetics/accountStats/useIsFreshAccountForHighLeverageTrading";
+import { useLocalStorageSerializeKey } from "lib/localStorage";
 import { useIsAddressInGroup } from "lib/userAnalytics/getIsAddressInGroup";
 import { getToken } from "sdk/configs/tokens";
 
@@ -19,6 +21,18 @@ const IS_MAJOR_TOKEN_MAP: Record<number, string[]> = {
 
 const MAX_MAJOR_TOKEN_LEVERAGE = 15n * BASIS_POINTS_DIVISOR_BIGINT;
 const MAX_ALTCOIN_LEVERAGE = 10n * BASIS_POINTS_DIVISOR_BIGINT;
+const WAIVE_DISMISSAL_PERIOD_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+const NUMBER_OPTS: { raw: boolean; serializer: (val: number) => string; deserializer: (value: string) => number } = {
+  raw: true,
+  deserializer(value) {
+    const timestamp = Number(value);
+    return isNaN(timestamp) ? 0 : timestamp;
+  },
+  serializer(val) {
+    return val.toString();
+  },
+};
 
 export function useShowHighLeverageWarning(): {
   showHighLeverageWarning: boolean;
@@ -39,13 +53,19 @@ export function useShowHighLeverageWarning(): {
   const isMajorToken = toTokenSymbol ? IS_MAJOR_TOKEN_MAP[chainId].includes(toTokenSymbol) : false;
   const leverage = useSelector(selectTradeboxLeverage);
 
-  const [isDismissed, setIsDismissed] = useState(false);
-
   const isHighLeverage = isMajorToken ? leverage > MAX_MAJOR_TOKEN_LEVERAGE : leverage >= MAX_ALTCOIN_LEVERAGE;
 
+  const [dismissedTimestamp, setDismissedTimestamp] = useLocalStorageSerializeKey(
+    [account, HIGH_LEVERAGE_WARNING_DISMISSED_TIMESTAMP_KEY],
+    0,
+    NUMBER_OPTS
+  );
+
+  const isDismissed = (dismissedTimestamp ?? 0) > Date.now() - WAIVE_DISMISSAL_PERIOD_MS;
+
   const dismissHighLeverageWarning = useCallback(() => {
-    setIsDismissed(true);
-  }, []);
+    setDismissedTimestamp(Date.now());
+  }, [setDismissedTimestamp]);
 
   return {
     showHighLeverageWarning: isFreshAccount && isInGroup && isHighLeverage && !isDismissed,

src/config/localStorage.ts

@@ -87,6 +87,8 @@ export const EXPRESS_TRADING_BANNER_DISMISSED_KEY = "express-trading-banner-dism
 export const SUBACCOUNT_APPROVAL_KEY = "subaccount-approval";
 export const TOKEN_PERMITS_KEY = "token-permits";
 
+export const HIGH_LEVERAGE_WARNING_DISMISSED_TIMESTAMP_KEY = "high-leverage-warning-dismissed-timestamp";
+
 export const getSubgraphUrlKey = (chainId: number, subgraph: string) => `subgraphUrl:${chainId}:${subgraph}`;
 
 export function getSubaccountApprovalKey(chainId: number, account: string | undefined) {

src/locales/de/messages.po

@@ -1722,6 +1722,10 @@ msgstr ""
 msgid "Account"
 msgstr "Konto"
 
+#: src/components/Synthetics/TradeBox/TradeBox.tsx
+msgid "Using high leverage increases the risk of liquidation."
+msgstr ""
+
 #: src/components/Synthetics/TradeBox/ExpressTradingWarningCard.tsx
 msgid "Express Trading is not available for wrapping or unwrapping native token {0}."
 msgstr ""
@@ -7992,10 +7996,6 @@ msgstr ""
 msgid "You will be long {indexSymbol} from your long position, as well as from your {collateralSymbol} collateral. The liquidation price is higher compared to using a stablecoin as collateral since the worth of the collateral will change with its price."
 msgstr ""
 
-#: src/components/Synthetics/TradeBox/TradeBox.tsx
-msgid "Using high leverage increases the risk of <0>losing funds</0>."
-msgstr ""
-
 #: src/components/Synthetics/StatusNotification/GmStatusNotification.tsx
 msgid "Sell order cancelled"
 msgstr ""

src/locales/en/messages.po

@@ -1722,6 +1722,10 @@ msgstr "Enter a  price"
 msgid "Account"
 msgstr "Account"
 
+#: src/components/Synthetics/TradeBox/TradeBox.tsx
+msgid "Using high leverage increases the risk of liquidation."
+msgstr "Using high leverage increases the risk of liquidation."
+
 #: src/components/Synthetics/TradeBox/ExpressTradingWarningCard.tsx
 msgid "Express Trading is not available for wrapping or unwrapping native token {0}."
 msgstr "Express Trading is not available for wrapping or unwrapping native token {0}."
@@ -7998,10 +8002,6 @@ msgstr "<0>Delegate your undelegated {0} GMX DAO</0>voting power before claiming
 msgid "You will be long {indexSymbol} from your long position, as well as from your {collateralSymbol} collateral. The liquidation price is higher compared to using a stablecoin as collateral since the worth of the collateral will change with its price."
 msgstr "You will be long {indexSymbol} from your long position, as well as from your {collateralSymbol} collateral. The liquidation price is higher compared to using a stablecoin as collateral since the worth of the collateral will change with its price."
 
-#: src/components/Synthetics/TradeBox/TradeBox.tsx
-msgid "Using high leverage increases the risk of <0>losing funds</0>."
-msgstr "Using high leverage increases the risk of <0>losing funds</0>."
-
 #: src/components/Synthetics/StatusNotification/GmStatusNotification.tsx
 msgid "Sell order cancelled"
 msgstr "Sell order cancelled"

src/locales/es/messages.po

@@ -1722,6 +1722,10 @@ msgstr ""
 msgid "Account"
 msgstr "Cuenta"
 
+#: src/components/Synthetics/TradeBox/TradeBox.tsx
+msgid "Using high leverage increases the risk of liquidation."
+msgstr ""
+
 #: src/components/Synthetics/TradeBox/ExpressTradingWarningCard.tsx
 msgid "Express Trading is not available for wrapping or unwrapping native token {0}."
 msgstr ""
@@ -7992,10 +7996,6 @@ msgstr ""
 msgid "You will be long {indexSymbol} from your long position, as well as from your {collateralSymbol} collateral. The liquidation price is higher compared to using a stablecoin as collateral since the worth of the collateral will change with its price."
 msgstr ""
 
-#: src/components/Synthetics/TradeBox/TradeBox.tsx
-msgid "Using high leverage increases the risk of <0>losing funds</0>."
-msgstr ""
-
 #: src/components/Synthetics/StatusNotification/GmStatusNotification.tsx
 msgid "Sell order cancelled"
 msgstr ""

src/locales/fr/messages.po

@@ -1722,6 +1722,10 @@ msgstr ""
 msgid "Account"
 msgstr "Compte"
 
+#: src/components/Synthetics/TradeBox/TradeBox.tsx
+msgid "Using high leverage increases the risk of liquidation."
+msgstr ""
+
 #: src/components/Synthetics/TradeBox/ExpressTradingWarningCard.tsx
 msgid "Express Trading is not available for wrapping or unwrapping native token {0}."
 msgstr ""
@@ -7992,10 +7996,6 @@ msgstr ""
 msgid "You will be long {indexSymbol} from your long position, as well as from your {collateralSymbol} collateral. The liquidation price is higher compared to using a stablecoin as collateral since the worth of the collateral will change with its price."
 msgstr ""
 
-#: src/components/Synthetics/TradeBox/TradeBox.tsx
-msgid "Using high leverage increases the risk of <0>losing funds</0>."
-msgstr ""
-
 #: src/components/Synthetics/StatusNotification/GmStatusNotification.tsx
 msgid "Sell order cancelled"
 msgstr ""

src/locales/ja/messages.po

@@ -1722,6 +1722,10 @@ msgstr ""
 msgid "Account"
 msgstr "アカウント"
 
+#: src/components/Synthetics/TradeBox/TradeBox.tsx
+msgid "Using high leverage increases the risk of liquidation."
+msgstr ""
+
 #: src/components/Synthetics/TradeBox/ExpressTradingWarningCard.tsx
 msgid "Express Trading is not available for wrapping or unwrapping native token {0}."
 msgstr ""
@@ -7992,10 +7996,6 @@ msgstr ""
 msgid "You will be long {indexSymbol} from your long position, as well as from your {collateralSymbol} collateral. The liquidation price is higher compared to using a stablecoin as collateral since the worth of the collateral will change with its price."
 msgstr ""
 
-#: src/components/Synthetics/TradeBox/TradeBox.tsx
-msgid "Using high leverage increases the risk of <0>losing funds</0>."
-msgstr ""
-
 #: src/components/Synthetics/StatusNotification/GmStatusNotification.tsx
 msgid "Sell order cancelled"
 msgstr ""

src/locales/ko/messages.po

@@ -1722,6 +1722,10 @@ msgstr ""
 msgid "Account"
 msgstr "계정"
 
+#: src/components/Synthetics/TradeBox/TradeBox.tsx
+msgid "Using high leverage increases the risk of liquidation."
+msgstr ""
+
 #: src/components/Synthetics/TradeBox/ExpressTradingWarningCard.tsx
 msgid "Express Trading is not available for wrapping or unwrapping native token {0}."
 msgstr ""
@@ -7992,10 +7996,6 @@ msgstr ""
 msgid "You will be long {indexSymbol} from your long position, as well as from your {collateralSymbol} collateral. The liquidation price is higher compared to using a stablecoin as collateral since the worth of the collateral will change with its price."
 msgstr ""
 
-#: src/components/Synthetics/TradeBox/TradeBox.tsx
-msgid "Using high leverage increases the risk of <0>losing funds</0>."
-msgstr ""
-
 #: src/components/Synthetics/StatusNotification/GmStatusNotification.tsx
 msgid "Sell order cancelled"
 msgstr ""

src/locales/pseudo/messages.po

@@ -1722,6 +1722,10 @@ msgstr ""
 msgid "Account"
 msgstr ""
 
+#: src/components/Synthetics/TradeBox/TradeBox.tsx
+msgid "Using high leverage increases the risk of liquidation."
+msgstr ""
+
 #: src/components/Synthetics/TradeBox/ExpressTradingWarningCard.tsx
 msgid "Express Trading is not available for wrapping or unwrapping native token {0}."
 msgstr ""
@@ -7992,10 +7996,6 @@ msgstr ""
 msgid "You will be long {indexSymbol} from your long position, as well as from your {collateralSymbol} collateral. The liquidation price is higher compared to using a stablecoin as collateral since the worth of the collateral will change with its price."
 msgstr ""
 
-#: src/components/Synthetics/TradeBox/TradeBox.tsx
-msgid "Using high leverage increases the risk of <0>losing funds</0>."
-msgstr ""
-
 #: src/components/Synthetics/StatusNotification/GmStatusNotification.tsx
 msgid "Sell order cancelled"
 msgstr ""