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,8 +1,9 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } 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 { getHighLeverageWarningDismissedTimestampKey } 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";
@@ -19,6 +20,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 DISMISSAL_POLL_INTERVAL_MS = 5000;
+
+function getDismissedTimestamp(account: string) {
+  const value = localStorage.getItem(getHighLeverageWarningDismissedTimestampKey(account));
+  if (value === null) {
+    return 0;
+  }
+
+  const timestamp = Number(value);
+  return isNaN(timestamp) ? 0 : timestamp;
+}
 
 export function useShowHighLeverageWarning(): {
   showHighLeverageWarning: boolean;
@@ -39,13 +52,41 @@ 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] = useState(() => {
+    if (!account) {
+      return 0;
+    }
+
+    return getDismissedTimestamp(account);
+  });
+
+  useEffect(() => {
+    if (!account) {
+      return;
+    }
+
+    const timer = window.setInterval(() => {
+      const freshDismissedTimestamp = getDismissedTimestamp(account);
+      if (freshDismissedTimestamp !== dismissedTimestamp) {
+        setDismissedTimestamp(freshDismissedTimestamp);
+      }
+    }, DISMISSAL_POLL_INTERVAL_MS);
+
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [account, dismissedTimestamp]);
+
+  const isDismissed = (dismissedTimestamp ?? 0) > Date.now() - WAIVE_DISMISSAL_PERIOD_MS;
+
   const dismissHighLeverageWarning = useCallback(() => {
-    setIsDismissed(true);
-  }, []);
+    setDismissedTimestamp(Date.now());
+    if (account) {
+      localStorage.setItem(getHighLeverageWarningDismissedTimestampKey(account), Date.now().toString());
+    }
+  }, [setDismissedTimestamp, account]);
 
   return {
     showHighLeverageWarning: isFreshAccount && isInGroup && isHighLeverage && !isDismissed,

src/config/localStorage.ts

@@ -89,6 +89,8 @@ export const SUBACCOUNT_APPROVAL_KEY = "subaccount-approval";
 export const TOKEN_PERMITS_KEY = "token-permits";
 export const CLAIM_TERMS_ACCEPTED_KEY = "claim-terms-accepted";
 
+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) {
@@ -219,3 +221,7 @@ export function getClaimTermsAcceptedKey(
 ) {
   return `${chainId}:${account}:${distributionId}:${claimTerms}-${CLAIM_TERMS_ACCEPTED_KEY}`;
 }
+
+export function getHighLeverageWarningDismissedTimestampKey(account: string) {
+  return `${account}-${HIGH_LEVERAGE_WARNING_DISMISSED_TIMESTAMP_KEY}`;
+}

src/locales/de/messages.po

@@ -1757,6 +1757,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 ""
@@ -8140,10 +8144,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

@@ -1757,6 +1757,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}."
@@ -8146,10 +8150,6 @@ msgstr "Claim funds"
 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

@@ -1757,6 +1757,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 ""
@@ -8140,10 +8144,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

@@ -1757,6 +1757,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 ""
@@ -8140,10 +8144,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

@@ -1757,6 +1757,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 ""
@@ -8140,10 +8144,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

@@ -1757,6 +1757,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 ""
@@ -8140,10 +8144,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

@@ -1757,6 +1757,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 ""
@@ -8140,10 +8144,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 ""