feat(market-launch-notif): Add notification for market launch (#877)

dydxprotocol · Aug 7, 2024 · 1875a80 · 1875a80
1 parent a54654f
commit 1875a80
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 168 deletions.
diff --git a/public/AmericanFlag2.png b/public/AmericanFlag2.png
diff --git a/public/configs/v1/env.json b/public/configs/v1/env.json
@@ -84,7 +84,8 @@
          "mintscanValidatorsLearnMore": "https://www.mintscan.io/dydx/validators",
          "protocolStaking": "https://protocolstaking.info/",
          "stakingAndClaimingRewardsLearnMore": "https://help.dydx.trade/en/articles/178571-staking-and-unstaking-dydx-and-claiming-staking-rewards",
-         "rndrParamProposal": "https://www.mintscan.io/dydx/proposals/61"
+         "rndrParamProposal": "https://www.mintscan.io/dydx/proposals/61",
+         "predictionMarketLearnMore": "https://help.dydx.trade/en"
       },
       "dydx-testnet-4": {
          "tos": "https://dydx.exchange/v4-terms",
@@ -118,7 +119,8 @@
          "mintscanValidatorsLearnMore": "https://www.mintscan.io/dydx/validators",
          "protocolStaking": "https://protocolstaking.info/",
          "stakingAndClaimingRewardsLearnMore": "https://help.dydx.trade/en/articles/178571-staking-and-unstaking-dydx-and-claiming-staking-rewards",
-         "rndrParamProposal": "https://www.mintscan.io/dydx/proposals/61"
+         "rndrParamProposal": "https://www.mintscan.io/dydx/proposals/61",
+         "predictionMarketLearnMore": "https://help.dydx.trade/en"
       },
       "[mainnet chain id]": {
          "tos": "[HTTP link to TOS]",
@@ -151,7 +153,8 @@
          "isolatedMarginLearnMore": "[HTTP link to documentation on isolated margin]",
          "mintscanValidatorsLearnMore": "[HTTP link to mintscan info on validators]",
          "protocolStaking": "[HTTP link to protocol staking info]",
-         "stakingAndClaimingRewardsLearnMore": "[HTTP link to staking and claiming rewards learn more]"
+         "stakingAndClaimingRewardsLearnMore": "[HTTP link to staking and claiming rewards learn more]",
+         "predictionMarketLearnMore": "[HTTP link to prediction market learn more]"
       }
    },
    "wallets": {

diff --git a/src/constants/markets.ts b/src/constants/markets.ts
@@ -46,8 +46,7 @@ export const MARKET_FILTER_OPTIONS: Record<
     label: STRING_KEYS.RECENTLY_LISTED,
   },
   [MarketFilters.PREDICTION_MARKET]: {
-    // TODO: (TRA-528): Update string when v4-localization contains stringKey.
-    label: undefined,
+    label: STRING_KEYS.PREDICTION_MARKET,
     isNew: true,
   },
   [MarketFilters.LAYER_1]: {
@@ -86,3 +85,7 @@ export enum FundingDirection {
   ToLong = 'ToLong',
   None = 'None',
 }
+
+export const PREDICTION_MARKET = {
+  TRUMPWIN: 'TRUMPWIN-USD',
+};
diff --git a/src/constants/notifications.ts b/src/constants/notifications.ts
@@ -233,6 +233,10 @@ export function getSeasonRewardDistributionNumber(seasonId: IncentivesDistribute
   }
 }
 
+export enum MarketLaunchNotificationIds {
+  TrumpWin = 'market-launch-trumpwin',
+}
+
 export enum MarketWindDownNotificationIds {
   MarketWindDownFetAgix = 'market-wind-down-fet-agix',
   MarketWindDownProposalFetAgix = 'market-wind-down-proposal-fet-agix',

diff --git a/src/hooks/useNotificationTypes.tsx b/src/hooks/useNotificationTypes.tsx
@@ -14,11 +14,13 @@ import {
   type StringGetterFunction,
   type StringKey,
 } from '@/constants/localization';
+import { PREDICTION_MARKET } from '@/constants/markets';
 import {
   CURRENT_SEASON_NUMBER,
   DEFAULT_TOAST_AUTO_CLOSE_MS,
   INCENTIVES_SEASON_NOTIFICATION_ID,
   MEDIAN_REWARDS_AMOUNT,
+  MarketLaunchNotificationIds,
   MarketWindDownNotificationIds,
   NotificationDisplayData,
   NotificationType,
@@ -37,9 +39,9 @@ import { Link } from '@/components/Link';
 // eslint-disable-next-line import/no-cycle
 import { BlockRewardNotification } from '@/views/notifications/BlockRewardNotification';
 import { IncentiveSeasonDistributionNotification } from '@/views/notifications/IncentiveSeasonDistributionNotification';
+import { MarketLaunchTrumpwinNotification } from '@/views/notifications/MarketLaunchTrumpwinNotification';
 import { OrderCancelNotification } from '@/views/notifications/OrderCancelNotification';
 import { OrderStatusNotification } from '@/views/notifications/OrderStatusNotification';
-import { StakingLiveNotification } from '@/views/notifications/StakingLiveNotification';
 import { TradeNotification } from '@/views/notifications/TradeNotification';
 import { TransferStatusNotification } from '@/views/notifications/TransferStatusNotification';
 
@@ -55,6 +57,7 @@ import { openDialog } from '@/state/dialogs';
 import { getAbacusNotifications } from '@/state/notificationsSelectors';
 import { getMarketIds } from '@/state/perpetualsSelectors';
 
+import { testFlags } from '@/lib/testFlags';
 import { formatSeconds } from '@/lib/timeUtils';
 
 import { useAccounts } from './useAccounts';
@@ -279,13 +282,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
 
       const twitter200BVolumeExpirationDate = new Date('2024-08-16T23:59:59');
       const incentivesExpirationDate = new Date('2024-08-16T23:59:59');
-      const conditionalOrdersExpirationDate = new Date('2024-06-01T23:59:59');
-      const fokDeprecationExpirationDate = new Date('2024-07-01T23:59:59');
-      const isolatedMarginLiveExpirationDate = new Date('2024-07-12T23:59:59');
-      const stakingLiveExpirationDate = new Date('2024-07-24T23:59:59');
-
-      const { isolatedMarginLearnMore } = useURLConfigs();
-
+      const tradeUSElectionExpirationDate = new Date('2024-08-16T23:59:59'); // TODO: (TRA-528): Update this date
       const currentDate = new Date();
 
       useEffect(() => {
@@ -338,89 +335,22 @@ export const notificationTypes: NotificationTypeConfig[] = [
           );
         }
 
-        if (currentDate <= conditionalOrdersExpirationDate) {
-          trigger(
-            ReleaseUpdateNotificationIds.RevampedConditionalOrders,
-            {
-              icon: <AssetIcon symbol={chainTokenLabel} />,
-              title: stringGetter({
-                key: 'NOTIFICATIONS.CONDITIONAL_ORDERS_REVAMP.TITLE',
-              }),
-              body: stringGetter({
-                key: 'NOTIFICATIONS.CONDITIONAL_ORDERS_REVAMP.BODY',
-                params: {
-                  TWITTER_LINK: (
-                    <Link
-                      href="https://twitter.com/dYdX/status/1785339109268935042"
-                      isAccent
-                      isInline
-                    >
-                      {stringGetter({ key: STRING_KEYS.HERE })}
-                    </Link>
-                  ),
-                },
-              }),
-              toastSensitivity: 'foreground',
-              groupKey: ReleaseUpdateNotificationIds.RevampedConditionalOrders,
-            },
-            []
-          );
-        }
-
-        if (currentDate <= fokDeprecationExpirationDate) {
+        if (testFlags.enablePredictionMarketPerp && currentDate <= tradeUSElectionExpirationDate) {
           trigger(
-            ReleaseUpdateNotificationIds.FOKDeprecation,
+            MarketLaunchNotificationIds.TrumpWin,
             {
-              icon: <AssetIcon symbol={chainTokenLabel} />,
-              title: stringGetter({
-                key: 'NOTIFICATIONS.FOK_DEPRECATION.TITLE',
-              }),
+              title: stringGetter({ key: STRING_KEYS.TRUMPWIN_MARKET_LAUNCH_TITLE }),
               body: stringGetter({
-                key: 'NOTIFICATIONS.FOK_DEPRECATION.BODY',
+                key: STRING_KEYS.TRUMPWIN_MARKET_LAUNCH_BODY,
+                params: { MARKET: PREDICTION_MARKET.TRUMPWIN },
               }),
-              toastSensitivity: 'foreground',
-              groupKey: ReleaseUpdateNotificationIds.FOKDeprecation,
-            },
-            []
-          );
-        }
-
-        if (currentDate <= isolatedMarginLiveExpirationDate) {
-          trigger(
-            ReleaseUpdateNotificationIds.IsolatedMarginLive,
-            {
-              icon: <AssetIcon symbol={chainTokenLabel} />,
-              title: stringGetter({
-                key: 'NOTIFICATIONS.ISOLATED_MARGIN_LIVE.TITLE',
-              }),
-              body: stringGetter({
-                key: 'NOTIFICATIONS.ISOLATED_MARGIN_LIVE.BODY',
-                params: {
-                  LEARN_MORE: (
-                    <Link href={isolatedMarginLearnMore} isAccent isInline>
-                      {stringGetter({ key: STRING_KEYS.HERE })}
-                    </Link>
-                  ),
-                },
-              }),
-              toastSensitivity: 'foreground',
-              groupKey: ReleaseUpdateNotificationIds.IsolatedMarginLive,
-            },
-            []
-          );
-        }
-
-        if (currentDate <= stakingLiveExpirationDate) {
-          trigger(
-            ReleaseUpdateNotificationIds.InAppStakingLive,
-            {
-              title: stringGetter({ key: 'NOTIFICATIONS.IN_APP_STAKING_LIVE.TITLE' }),
-              body: stringGetter({ key: 'NOTIFICATIONS.IN_APP_STAKING_LIVE.BODY' }),
               renderCustomBody({ isToast, notification }) {
-                return <StakingLiveNotification isToast={isToast} notification={notification} />;
+                return (
+                  <MarketLaunchTrumpwinNotification isToast={isToast} notification={notification} />
+                );
               },
               toastSensitivity: 'foreground',
-              groupKey: ReleaseUpdateNotificationIds.InAppStakingLive,
+              groupKey: MarketLaunchNotificationIds.TrumpWin,
             },
             []
           );

diff --git a/src/hooks/useURLConfigs.ts b/src/hooks/useURLConfigs.ts
@@ -39,6 +39,7 @@ export interface LinksConfigs {
   stakingAndClaimingRewardsLearnMore?: string;
   vaultsLearnMore: string;
   rndrParamProposal?: string;
+  predictionMarketLearnMore?: string;
 }
 
 export const useURLConfigs = (): LinksConfigs => {
@@ -81,5 +82,6 @@ export const useURLConfigs = (): LinksConfigs => {
     // todo add to the link configs objects
     vaultsLearnMore: linksConfigs.vaultsLearnMore ?? FALLBACK_URL,
     rndrParamProposal: linksConfigs.rndrParamProposal,
+    predictionMarketLearnMore: linksConfigs.predictionMarketLearnMore,
   };
 };
diff --git a/src/pages/markets/Markets.tsx b/src/pages/markets/Markets.tsx
@@ -1,10 +1,11 @@
 import { useMemo, useState } from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { ButtonAction } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
+import { PREDICTION_MARKET } from '@/constants/markets';
 import { AppRoute, MarketsRoute } from '@/constants/routes';
 
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
@@ -33,16 +34,12 @@ const Markets = () => {
   useDocumentTitle(stringGetter({ key: STRING_KEYS.MARKETS }));
 
   const marketsPageBanner = useMemo(() => {
-    // TODO: (TRA-528): Localize text when finallized. Update navigate link to TRUMPWIN-USD (Use Market redux state to ensure existance)
     if (testFlags.enablePredictionMarketPerp) {
       return (
-        <$MarketsPageBanner>
-          <span>🇺🇸 Leverage trade the outcome of the U.S. Election</span>
+        <$MarketsPageBanner to={`${AppRoute.Trade}/${PREDICTION_MARKET.TRUMPWIN}`}>
+          <span>🇺🇸 {stringGetter({ key: STRING_KEYS.LEVERAGE_TRADE_US_ELECTION })}</span>
           <$FlagOverlay />
-          <IconButton
-            iconName={IconName.Arrow}
-            onClick={() => navigate(`${AppRoute.Trade}/TRUMPWIN-USD`)}
-          />
+          <IconButton iconName={IconName.Arrow} />
         </$MarketsPageBanner>
       );
     }
@@ -115,11 +112,11 @@ const $HeaderSection = styled.section`
   }
 `;
 
-const $MarketsPageBanner = styled.div`
+const $MarketsPageBanner = styled(Link)`
   ${layoutMixins.row}
   height: 5rem;
   border-radius: 10px;
-  background-color: var(--color-layer-4);
+  background-color: var(--color-layer-1);
   margin-bottom: 1rem;
   padding: 0 1.5rem;
   justify-content: space-between;
@@ -149,7 +146,7 @@ const $FlagOverlay = styled.div`
   width: 573px;
   height: 100%;
   background-image: ${({ theme }) => `
-    linear-gradient(90deg, ${theme.layer4} 0%, ${theme.tooltipBackground} 53%, ${theme.layer4} 99%),
+    linear-gradient(90deg, ${theme.layer1} 0%, ${theme.tooltipBackground} 53%, ${theme.layer1} 99%),
     url('/AmericanFlag.png')
   `};
   background-repeat: no-repeat;