fix(polymarket): add dismissable reducer and fix ticker

src/hooks/useCurrentMarketId.ts

@@ -17,6 +17,7 @@ import { getSelectedNetwork } from '@/state/appSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
 import { closeDialogInTradeBox, openDialog } from '@/state/dialogs';
 import { getActiveTradeBoxDialog } from '@/state/dialogsSelectors';
+import { getHasSeenPolymarketDialog } from '@/state/dismissableSelectors';
 import { setCurrentMarketId } from '@/state/perpetuals';
 import { getMarketIds } from '@/state/perpetualsSelectors';
 
@@ -35,19 +36,15 @@ export const useCurrentMarketId = () => {
   const launchableMarkets = useLaunchableMarkets();
   const activeTradeBoxDialog = useAppSelector(getActiveTradeBoxDialog);
   const hasLoadedLaunchableMarkets = launchableMarkets.data.length > 0;
+  const hasSeenPolymarketDialog = useAppSelector(getHasSeenPolymarketDialog);
 
   const [lastViewedMarket, setLastViewedMarket] = useLocalStorage({
     key: LocalStorageKey.LastViewedMarket,
     defaultValue: DEFAULT_MARKETID,
   });
 
-  const [hasSeenPredictionMarketsIntro] = useLocalStorage({
-    key: LocalStorageKey.HasSeenPredictionMarketsIntro,
-    defaultValue: false,
-  });
-
   const onNavigateToPredictionMarket = () => {
-    if (!hasSeenPredictionMarketsIntro) {
+    if (!hasSeenPolymarketDialog) {
       dispatch(openDialog(DialogTypes.PredictionMarketIntro()));
     }
   };

src/state/_store.ts

@@ -11,6 +11,7 @@ import appMiddleware from './appMiddleware';
 import { assetsSlice } from './assets';
 import { configsSlice } from './configs';
 import { dialogsSlice } from './dialogs';
+import { dismissableSlice } from './dismissable';
 import { inputsSlice } from './inputs';
 import { layoutSlice } from './layout';
 import { localOrdersSlice } from './localOrders';
@@ -30,6 +31,7 @@ const reducers = {
   assets: assetsSlice.reducer,
   configs: configsSlice.reducer,
   dialogs: dialogsSlice.reducer,
+  dismissable: dismissableSlice.reducer,
   inputs: inputsSlice.reducer,
   layout: layoutSlice.reducer,
   localization: localizationSlice.reducer,
@@ -47,7 +49,7 @@ const persistConfig = {
   key: 'root',
   version: 1,
   storage,
-  whitelist: ['tradingView', 'wallet', 'affiliates'],
+  whitelist: ['affiliates', 'dismissable', 'tradingView', 'wallet'],
   migrate: customCreateMigrate({ debug: process.env.NODE_ENV !== 'production' }),
 };
 

src/state/dismissable.ts

@@ -0,0 +1,22 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+
+export interface DismissableState {
+  hasSeenPolymarketDialog: boolean;
+}
+
+const initialState: DismissableState = {
+  hasSeenPolymarketDialog: false,
+};
+
+export const dismissableSlice = createSlice({
+  name: 'Dismissable',
+  initialState,
+  reducers: {
+    setHasSeenPolymarketDialog: (state, action: PayloadAction<boolean>) => {
+      state.hasSeenPolymarketDialog = action.payload;
+    },
+  },
+});
+
+export const { setHasSeenPolymarketDialog } = dismissableSlice.actions;

src/state/dismissableSelectors.ts

@@ -0,0 +1,4 @@
+import { type RootState } from './_store';
+
+export const getHasSeenPolymarketDialog = (state: RootState) =>
+  state.dismissable.hasSeenPolymarketDialog;

src/views/MarketDetails/CurrentMarketDetails.tsx

@@ -14,6 +14,7 @@ import { useAppSelector } from '@/state/appTypes';
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
 import { getCurrentMarketData } from '@/state/perpetualsSelectors';
 
+import { getDisplayableTickerFromMarket } from '@/lib/assetUtils';
 import { BIG_NUMBERS } from '@/lib/numbers';
 
 import { MarketDetails } from './MarketDetails';
@@ -50,15 +51,10 @@ export const CurrentMarketDetails = () => {
   );
 
   const items = [
-    {
-      key: 'market-name',
-      label: stringGetter({ key: STRING_KEYS.MARKET_NAME }),
-      value: displayId,
-    },
     {
       key: 'ticker',
       label: stringGetter({ key: STRING_KEYS.TICKER }),
-      value: market,
+      value: getDisplayableTickerFromMarket(market ?? ''),
     },
     {
       key: 'market-type',

src/views/dialogs/PredictionMarketIntroDialog.tsx

@@ -1,13 +1,12 @@
 import { useCallback, useState } from 'react';
 
+import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 
 import { ButtonAction } from '@/constants/buttons';
 import type { DialogProps, PredictionMarketIntroDialogProps } from '@/constants/dialogs';
-import { LocalStorageKey } from '@/constants/localStorage';
 import { STRING_KEYS } from '@/constants/localization';
 
-import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { Button } from '@/components/Button';
@@ -16,20 +15,26 @@ import { Dialog } from '@/components/Dialog';
 import { Icon, IconName } from '@/components/Icon';
 import { NewTag } from '@/components/Tag';
 
+import { setHasSeenPolymarketDialog } from '@/state/dismissable';
+
 export const PredictionMarketIntroDialog = ({
   setIsOpen,
 }: DialogProps<PredictionMarketIntroDialogProps>) => {
   const stringGetter = useStringGetter();
   const [doNotShowAgain, setDoNotShowAgain] = useState(false);
-  const [, setHasSeenPredictionMarketsIntro] = useLocalStorage({
-    key: LocalStorageKey.HasSeenPredictionMarketsIntro,
-    defaultValue: false,
-  });
+  const dispatch = useDispatch();
+
+  const onDismissPredictionMarketsIntro = useCallback(() => {
+    dispatch(setHasSeenPolymarketDialog(true));
+  }, [dispatch]);
 
   const onContinue = useCallback(() => {
-    setHasSeenPredictionMarketsIntro(doNotShowAgain);
+    if (doNotShowAgain) {
+      onDismissPredictionMarketsIntro();
+    }
+
     setIsOpen(false);
-  }, [doNotShowAgain, setIsOpen, setHasSeenPredictionMarketsIntro]);
+  }, [doNotShowAgain, setIsOpen, onDismissPredictionMarketsIntro]);
 
   const renderPoint = ({
     icon,