Add Pinned Message to redux

src/App.tsx

@@ -8,6 +8,7 @@ import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck'
 import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage'
 import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus'
 import { Provider as ReduxProvider } from 'react-redux'
+import PinnedNotification from './components/General/PinnedNottification'
 import store from './redux/store'
 
 const router = createBrowserRouter([
@@ -28,12 +29,12 @@ const router = createBrowserRouter([
     element: <DeviceSyncStatus />,
   },
 ])
-
 function App() {
   return (
     <ReduxProvider store={store}>
       <TamaguiProvider config={config}>
         <StatusProvider>
+          <PinnedNotification />
           <RouterProvider router={router} />
         </StatusProvider>
       </TamaguiProvider>

src/components/General/PinnedNottification.tsx

@@ -0,0 +1,26 @@
+import { PinnedMessage } from '@status-im/components'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../redux/store'
+
+function PinnedNotification() {
+  const pinnedMessage = useSelector((state: RootState) => state.pinnedMessage.pinnedMessage)
+  console.log(pinnedMessage)
+  return (
+    <>
+      {pinnedMessage && pinnedMessage.pinned && (
+        <PinnedMessage
+          messages={[
+            {
+              id: pinnedMessage.id,
+              reactions: {},
+              pinned: pinnedMessage.pinned,
+              text: pinnedMessage.text,
+            },
+          ]}
+        />
+      )}
+    </>
+  )
+}
+
+export default PinnedNotification

src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx

@@ -1,32 +1,30 @@
 import { Stack, YStack } from 'tamagui'
 
-import { Button, PinnedMessage } from '@status-im/components'
+import { Button } from '@status-im/components'
 
 import Titles from '../../components/General/Titles'
 import NimbusLogo from '../../components/Logos/NimbusLogo'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import SyncStatusCardConsensus from './SyncStatusCardConsensus'
 import SyncStatusCardExecution from './SyncStatusCardExecution'
+import { setPinnedMessage } from '../../redux/PinnedMessage/slice'
+import { useDispatch } from 'react-redux'
+import { useEffect } from 'react'
 
 const DeviceSyncStatus = () => {
+  const dispatch = useDispatch()
+  useEffect(() => {
+    dispatch(
+      setPinnedMessage({
+        id: '123',
+        text: 'You are currently syncing to the Nimbus Validator Client and Beacon node. This may take a while... Please stay put until you can access the Node Manager.',
+        pinned: true,
+      }),
+    )
+  }, [dispatch])
   return (
     <PageWrapperShadow rightImageSrc="/background-images/sync-status-background.png">
-      <Stack>
-        <PinnedMessage
-          messages={[
-            {
-              id: '123',
-              text: 'You are currently syncing to the Nimbus Validator Client and Beacon node. This may take a while... Please stay put until you can access the Node Manager.',
-              reactions: { love: new Set(['userId1', 'userId2']) },
-            },
-            {
-              id: '123',
-              text: 'You are currently syncing to the Nimbus Validator Client and Beacon node. This may take a while... Please stay put until you can access the Node Manager.',
-              reactions: { love: new Set(['userId3', 'userId4w']) },
-            },
-          ]}
-        />
-      </Stack>
+
       <div className="container-inner landing-page">
         <YStack
           space={'$4'}

src/redux/PinnedMessage/slice.tsx

@@ -0,0 +1,34 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+export interface PinnedMessage {
+  id: string
+  text: string
+  images?: Array<{
+    url: string
+  }>
+  reply?: boolean
+  pinned: boolean
+}
+
+interface PinnedMessageState {
+  pinnedMessage?: PinnedMessage
+}
+
+const initialState: PinnedMessageState = {}
+
+const pinnedMessageSlice = createSlice({
+  name: 'pinnedMessage',
+  initialState,
+  reducers: {
+    setPinnedMessage: (state, action: PayloadAction<PinnedMessage>) => {
+      state.pinnedMessage = action.payload
+    },
+    clearPinnedMessage: state => {
+      state.pinnedMessage = undefined
+    },
+  },
+})
+
+export const { setPinnedMessage, clearPinnedMessage } = pinnedMessageSlice.actions
+
+export default pinnedMessageSlice.reducer

src/redux/store.tsx

@@ -1,9 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit'
 import deviceHealthReducer from './deviceHealthCheck/slice'
+import pinnedMessageReducer from './PinnedMessage/slice'
 
 const store = configureStore({
   reducer: {
     deviceHealth: deviceHealthReducer,
+    pinnedMessage: pinnedMessageReducer,
   },
 })