feat: trading league reward notification

package.json

@@ -55,7 +55,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-client-js": "3.2.0",
-    "@dydxprotocol/v4-localization": "1.1.365",
+    "@dydxprotocol/v4-localization": "1.1.366",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",
     "@emotion/is-prop-valid": "^1.3.0",
     "@hugocxl/react-to-image": "^0.0.9",

src/hooks/useNotificationTypes.tsx

@@ -57,6 +57,8 @@ import {
 } from '@/state/accountSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
 import { openDialog } from '@/state/dialogs';
+import { setHasDismissedTradingLeagueRewardsNotification } from '@/state/dismissable';
+import { getHasDismissedTradingLeagueRewardsNotification } from '@/state/dismissableSelectors';
 import {
   getLocalCancelAlls,
   getLocalCancelOrders,
@@ -574,6 +576,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
     type: NotificationType.RewardsProgramUpdates,
     useTrigger: ({ trigger }) => {
       const stringGetter = useStringGetter();
+      const dispatch = useAppDispatch();
       const dydxAddress = useAppSelector(getUserWalletAddress);
       const currentSeason = CURRENT_REWARDS_SEASON;
 
@@ -729,6 +732,43 @@ export const notificationTypes: NotificationTypeConfig[] = [
             updateKey: [`pump-trading-competition-base`],
           });
       }, [stringGetter, trigger]);
+
+      const hasDismissedTradingLeagueRewardsNotification = useAppSelector(
+        getHasDismissedTradingLeagueRewardsNotification
+      );
+      useEffect(() => {
+        const now = new Date().getTime();
+        const seasonEnd = new Date(CURRENT_REWARDS_SEASON_EXPIRATION).getTime();
+
+        if (now < seasonEnd && rewards != null && !hasDismissedTradingLeagueRewardsNotification) {
+          trigger({
+            id: `trading-league-rewards-notification`,
+            displayData: {
+              icon: <Icon iconName={IconName.Trophy} />,
+              title: stringGetter({ key: STRING_KEYS.TRADING_LEAGUES }),
+              body: stringGetter({ key: STRING_KEYS.CLAIM_TRADING_LEAGUE_REWARD_BODY }),
+              toastSensitivity: 'foreground',
+              groupKey: NotificationType.RewardsProgramUpdates,
+              actionAltText: stringGetter({ key: STRING_KEYS.CHECK_ELIGIBILITY }),
+              renderActionSlot: () => (
+                <Link
+                  href="https://www.dydx.xyz/trading-league-rewards"
+                  isAccent
+                  onClick={() => {
+                    dispatch(setHasDismissedTradingLeagueRewardsNotification(true));
+                  }}
+                >
+                  {stringGetter({ key: STRING_KEYS.CHECK_ELIGIBILITY })}
+                </Link>
+              ),
+            },
+            updateKey: [`trading-league-rewards-notification`],
+          });
+        }
+      }, [currentSeason, rewards, stringGetter, trigger]);
+    },
+    useNotificationAction: () => {
+      return () => {};
     },
   },
   {

src/state/dismissable.ts

@@ -12,6 +12,7 @@ export interface DismissableState {
   hasDismissedRebateBanner: boolean;
   hasDismissedTradingLeagueBanner: boolean;
   hasDismissedNoFeeBanner: boolean;
+  hasDismissedTradingLeagueRewardsNotification: boolean;
 }
 
 const initialState: DismissableState = {
@@ -24,6 +25,7 @@ const initialState: DismissableState = {
   hasDismissedRebateBanner: false,
   hasDismissedTradingLeagueBanner: false,
   hasDismissedNoFeeBanner: false,
+  hasDismissedTradingLeagueRewardsNotification: false,
 };
 
 export const dismissableSlice = createSlice({
@@ -54,6 +56,9 @@ export const dismissableSlice = createSlice({
     setHasDismissedNoFeeBanner: (state, action: PayloadAction<boolean>) => {
       state.hasDismissedNoFeeBanner = action.payload;
     },
+    setHasDismissedTradingLeagueRewardsNotification: (state, action: PayloadAction<boolean>) => {
+      state.hasDismissedTradingLeagueRewardsNotification = action.payload;
+    },
   },
 });
 
@@ -66,4 +71,5 @@ export const {
   setHasDismissedRebateBanner,
   setHasDismissedTradingLeagueBanner,
   setHasDismissedNoFeeBanner,
+  setHasDismissedTradingLeagueRewardsNotification,
 } = dismissableSlice.actions;

src/state/dismissableSelectors.ts

@@ -23,3 +23,6 @@ export const getHasDismissedTradingLeagueBanner = (state: RootState) =>
 
 export const getHasDismissedNoFeeBanner = (state: RootState) =>
   state.dismissable.hasDismissedNoFeeBanner;
+
+export const getHasDismissedTradingLeagueRewardsNotification = (state: RootState) =>
+  state.dismissable.hasDismissedTradingLeagueRewardsNotification;