diff --git a/package.json b/package.json index 6e51e07f..9fe08a9a 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dependencies": { "@nivo/line": "^0.83.0", "@nivo/pie": "^0.83.0", + "@reduxjs/toolkit": "^1.9.5", "@status-im/colors": "*", "@status-im/components": "^0.2.6", "@tamagui/config": "1.36.4", @@ -28,9 +29,11 @@ "@types/react-dom": "18", "expo-modules-core": "^1.5.9", "react": "18", + "react-color": "^2.19.3", "react-dom": "18", "react-native": "^0.72.3", "react-native-svg": "^13.10.0", + "react-redux": "^8.1.2", "react-router-dom": "^6.14.2", "tamagui": "1.36.4" }, @@ -46,6 +49,7 @@ "@storybook/react-vite": "^7.2.0", "@storybook/test-runner": "^0.12.0", "@storybook/testing-library": "^0.2.0", + "@types/react-color": "^3.0.6", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react": "^4.0.3", diff --git a/src/App.css b/src/App.css index 55e6bd98..29d4f3ac 100644 --- a/src/App.css +++ b/src/App.css @@ -1,30 +1,3 @@ #root { width: 100%; -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -/* span { - display: inline-block; - vertical-align: middle; - line-height: 1; -} */ - -.mb-1 { - margin-bottom: 1em; -} -.mt-1 { - margin-top: 1em; -} -.my-1 { - margin-top: 1em; - margin-bottom: 1em; -} -.py-05 { - padding-top: 0.5em; - padding-bottom: 0.5em; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index df4095a9..4136b233 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,10 @@ import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck' import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage' import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus' import PairDevice from './pages/PairDevice/PairDevice' +import { Provider as ReduxProvider } from 'react-redux' +import PinnedNotification from './components/General/PinnedNottification' +import store from './redux/store' +import CreateLocalNodePage from './pages/CreateLocalNodePage/CreateLocalNodePage' const router = createBrowserRouter([ { @@ -30,15 +34,18 @@ const router = createBrowserRouter([ path: '/pair-device', element: , }, + { path: '/create-local-node', element: }, ]) - function App() { return ( - - - - - + + + + + + + + ) } diff --git a/src/components/Charts/DeviceCPULoad.tsx b/src/components/Charts/DeviceCPULoad.tsx index e481b904..518bf92b 100644 --- a/src/components/Charts/DeviceCPULoad.tsx +++ b/src/components/Charts/DeviceCPULoad.tsx @@ -49,7 +49,7 @@ const DeviceCPULoad: React.FC = ({ load }) => { justifyContent="space-between" style={{ padding: '8px 16px', - position: 'relative', // Make XStack a positioning context + position: 'relative', }} >
diff --git a/src/components/Charts/DeviceNetworkHealth.tsx b/src/components/Charts/DeviceNetworkHealth.tsx index 2dbfdb51..c74fc9c7 100644 --- a/src/components/Charts/DeviceNetworkHealth.tsx +++ b/src/components/Charts/DeviceNetworkHealth.tsx @@ -58,7 +58,7 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr justifyContent="space-between" style={{ padding: '8px 16px', - position: 'relative', // Make XStack a positioning context + position: 'relative', }} >
diff --git a/src/components/General/BreadcrumbBar/breadcrumbbar.css b/src/components/General/BreadcrumbBar/BreadcrumbBar.css similarity index 78% rename from src/components/General/BreadcrumbBar/breadcrumbbar.css rename to src/components/General/BreadcrumbBar/BreadcrumbBar.css index b63bec69..e4dbdae6 100644 --- a/src/components/General/BreadcrumbBar/breadcrumbbar.css +++ b/src/components/General/BreadcrumbBar/BreadcrumbBar.css @@ -4,19 +4,14 @@ padding: 1rem 2rem; margin: 0.5rem; } -.breadcrumb-bar-ul { - list-style-type: none; - display: flex; - padding: 0; - margin: 0; -} .breadcrumb-bar-li { - padding: 0 1em; color: #647084; - font-size: 15px; font-weight: 500; position: relative; } +.breadcrumb-bar-li:last-child { + color: #09101C; +} .breadcrumb-bar-li::after { display: inline-block; content: url("/icons/chevron.svg"); @@ -26,10 +21,7 @@ left: 100%; transform: translateX(-50%); } -.breadcrumb-bar-li:last-child { - color: #09101C; -} .breadcrumb-bar-li:last-child::after { display: none; -} \ No newline at end of file +} diff --git a/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx index 9034efbb..44199c1a 100644 --- a/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx +++ b/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx @@ -1,4 +1,4 @@ -import './breadcrumbbar.css' +import './BreadcrumbBar.css' type BreadcrumbBarProps = { breadcrumbList: string[] diff --git a/src/components/General/ColorPicker.stories.tsx b/src/components/General/ColorPicker.stories.tsx new file mode 100644 index 00000000..371a3309 --- /dev/null +++ b/src/components/General/ColorPicker.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ColorPicker from './ColorPicker' + +const meta = { + title: 'General/ColorPicker', + component: ColorPicker, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const DefaultColors: Story = { + args: {}, +} diff --git a/src/components/General/ColorPicker.tsx b/src/components/General/ColorPicker.tsx new file mode 100644 index 00000000..80d5afed --- /dev/null +++ b/src/components/General/ColorPicker.tsx @@ -0,0 +1,33 @@ +import { useState } from 'react' +import { CirclePicker } from 'react-color' +import { XStack } from 'tamagui' + +const ColorPicker = () => { + const [chosenColor, setChosenColor] = useState('#FFFFFF') + return ( + + setChosenColor(color.hex)} + /> + + ) +} + +export default ColorPicker diff --git a/src/components/General/LabelInputField.css b/src/components/General/LabelInputField.css new file mode 100644 index 00000000..a1859b9a --- /dev/null +++ b/src/components/General/LabelInputField.css @@ -0,0 +1,6 @@ +.input-container { + background-color: #fff; + border-radius: 12px; + margin-top: 8px; + width: 100%; +} \ No newline at end of file diff --git a/src/components/General/LabelInputField.tsx b/src/components/General/LabelInputField.tsx index 298fabee..fb71d95e 100644 --- a/src/components/General/LabelInputField.tsx +++ b/src/components/General/LabelInputField.tsx @@ -1,5 +1,6 @@ import { Input as StatusInput, Text } from '@status-im/components' import { Label } from 'tamagui' +import './LabelInputField.css' type LabelInputProps = { labelText: string @@ -12,7 +13,9 @@ function LabelInputField({ labelText, placeholderText }: LabelInputProps) { {labelText} - +
+ +
) } diff --git a/src/components/General/PinnedNottification.tsx b/src/components/General/PinnedNottification.tsx new file mode 100644 index 00000000..b4146d15 --- /dev/null +++ b/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 && ( + + )} + + ) +} + +export default PinnedNotification diff --git a/src/components/General/QuickStartBar/QuickStartBar.css b/src/components/General/QuickStartBar/QuickStartBar.css index 334c8d90..90d344f3 100644 --- a/src/components/General/QuickStartBar/QuickStartBar.css +++ b/src/components/General/QuickStartBar/QuickStartBar.css @@ -14,22 +14,12 @@ } .quick-start-bar > div { width: 100%; - display: flex; - justify-content: space-between; - align-items: center; border-radius: 24px; background: rgba(100, 112, 132, 0.05); margin-left: 1rem; + padding: 1rem 0.5rem; } -.quick-start-bar ul { - list-style-type: none; - display: flex; - padding: 0; - margin: 0; -} - .quick-start-bar ul li { - padding: 0 1rem; color: #0D1625; font-size: 13px; } diff --git a/src/components/General/QuickStartBar/QuickStartBar.tsx b/src/components/General/QuickStartBar/QuickStartBar.tsx index 66560c6c..da93872a 100644 --- a/src/components/General/QuickStartBar/QuickStartBar.tsx +++ b/src/components/General/QuickStartBar/QuickStartBar.tsx @@ -38,7 +38,6 @@ const QuickStartBar = () => {
  • Nodes Community
  • Documentation
    • -
    ) diff --git a/src/components/General/TagContainer.css b/src/components/General/TagContainer.css new file mode 100644 index 00000000..d02ec351 --- /dev/null +++ b/src/components/General/TagContainer.css @@ -0,0 +1,4 @@ + +.tag-container div:nth-child(1) { + background:transparent; + } \ No newline at end of file diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx new file mode 100644 index 00000000..42dbfd0d --- /dev/null +++ b/src/components/General/TagContainer.tsx @@ -0,0 +1,16 @@ +import { Tag } from '@status-im/components' +import { XStack } from 'tamagui' +import PairIcon from '../Icons/PairIcon' +import CreateIcon from '../Icons/CreateIcon' +import './TagContainer.css' + +const TagContainer = () => { + return ( + + + + + ) +} + +export default TagContainer diff --git a/src/components/General/Title.tsx b/src/components/General/Title.tsx index b5a02796..925e590b 100644 --- a/src/components/General/Title.tsx +++ b/src/components/General/Title.tsx @@ -7,7 +7,7 @@ type TitleProps = { const Title = ({ color, children }: TitleProps) => { return ( - + {children} ) diff --git a/src/components/General/Titles.tsx b/src/components/General/Titles.tsx index 29aaae53..fb24683a 100644 --- a/src/components/General/Titles.tsx +++ b/src/components/General/Titles.tsx @@ -11,7 +11,7 @@ type TitlesProps = { const Titles = ({ title, subtitle, isAdvancedSettings }: TitlesProps) => { return ( - + {title} {isAdvancedSettings && ( diff --git a/src/components/Icons/ReactionIcon.tsx b/src/components/Icons/ReactionIcon.tsx new file mode 100644 index 00000000..74a71de2 --- /dev/null +++ b/src/components/Icons/ReactionIcon.tsx @@ -0,0 +1,16 @@ +function ReactionIcon() { + return ( + + + + + + ) +} +export default ReactionIcon diff --git a/src/components/Logos/NimbusLogo.css b/src/components/Logos/NimbusLogo.css new file mode 100644 index 00000000..52c7136e --- /dev/null +++ b/src/components/Logos/NimbusLogo.css @@ -0,0 +1,5 @@ + +.nimbus-logomark{ + width: auto; + height: 30%; +} \ No newline at end of file diff --git a/src/components/Logos/NimbusLogo.tsx b/src/components/Logos/NimbusLogo.tsx index e955012e..729c7c16 100644 --- a/src/components/Logos/NimbusLogo.tsx +++ b/src/components/Logos/NimbusLogo.tsx @@ -1,5 +1,6 @@ import { XStack } from 'tamagui' import BetaTag from './BetaTag' +import './NimbusLogo.css' const NimbusLogo = () => { return ( diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index 7de68989..a2911318 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -25,8 +25,8 @@ display: flex; flex-wrap: wrap; justify-content: end; - height: 100%; - margin: 0 auto; + height: 100%; + padding: 70px 0 0; } .container-inner { max-width: 70%; @@ -34,88 +34,42 @@ display: flex; flex-direction: column; } -header { - width: 100%; - display: flex; - justify-content: space-between; - padding: 1.5rem 0; -} -header > div { - display: flex; - align-items: center; -} -.logo-title { - font-size: 27px; - font-weight: 700; - display: flex; - align-items: center; - -} -.logo-title .beta{ - color: #FFF; - font-size: 10px; - font-weight: 600; - border-radius: 66.667px; - background-color: #2A4AF5; - padding: 4px 6px; - margin-left: 10px; -} .content { flex-grow: 1; } -.content .title { - font-size: 27px; - font-weight: 600; - margin-bottom: 0.25em; -} -.content .subtitle { - font-size: 15px; - margin: 0.1em; -} -.content .subtitle span{ - font-weight: 700; -} -.content button { - display: flex; - align-items: center; -} -.content button span { - padding-right: 10px; + +/* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */ +.layout-right { + flex: 0 0 45%; + max-width: 45%; + z-index: 0; } - - /* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */ - .layout-right { - flex: 0 0 45%; - max-width: 45%; - z-index: 0; - } - - .image-container { - height: 100%; - position: relative; - overflow: hidden; - } - .image-container::before { - display: block; - content: ""; - padding-bottom: 100%; - } - .image-container::after { - display: block; - content: ""; - position: absolute; - top: 0; - left: -1%; - width: 50%; - height: 100%; - background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0)); - } - .image-container img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - height: 140%; - width: auto; - } +.image-container { + height: 100%; + position: relative; + overflow: hidden; +} +.image-container::before { + display: block; + content: ""; + padding-bottom: 100%; +} +.image-container::after { + display: block; + content: ""; + position: absolute; + top: 0; + left: -1%; + width: 50%; + height: 100%; + background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0)); +} +.image-container img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 140%; + width: auto; +} diff --git a/src/index.css b/src/index.css index bd360c1c..54b88a93 100644 --- a/src/index.css +++ b/src/index.css @@ -13,69 +13,46 @@ -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } - #storybook-root { - width: 100%; + width: 100%; } - body { margin: 0; display: flex; min-width: 320px; min-height: 100vh; } - h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; } - -h1 { - font-size: 3.2em; - -} - a { font-weight: 500; text-decoration: inherit; cursor: pointer; } -a:hover { - color: #535bf2; -} button { border-radius: 12px; border: 1px solid transparent; - padding: 0.6em 1.2em; font-size: 15px; font-weight: 500; font-family: inherit; - background-color: #2A4AF5; - cursor: pointer; - transition: border-color 0.25s; -} -button.inversed { - border-radius: 12px; - border: 1px solid #2A4AF5; - color: #2A4AF5; - padding: 0.75em 1.2em; - font-size: 15px; - background-color:transparent; - font-weight: 500; - font-family: inherit; cursor: pointer; transition: border-color 0.25s; } -button:hover { - border-color: #646cff; -} button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } -.nimbus-logomark{ - width: auto; - height: 30%; +ul{ + list-style-type: none; + padding: 0; + margin: 0; + display: flex; +} +ul li { + padding: 0 1rem; + font-size: 15px; } @media (prefers-color-scheme: light) { :root { diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts b/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts new file mode 100644 index 00000000..99c8bae0 --- /dev/null +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import CreateLocalNodePage from './CreateLocalNodePage' + +const meta = { + title: 'Pages/CreateLocalNodePage', + component: CreateLocalNodePage, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx new file mode 100644 index 00000000..dcc4b61f --- /dev/null +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -0,0 +1,76 @@ +import { useState } from 'react' +import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components' +import { Label, Separator, XStack, YStack } from 'tamagui' +import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' +import NimbusLogo from '../../components/Logos/NimbusLogo' +import TagContainer from '../../components/General/TagContainer' +import Titles from '../../components/General/Titles' +import NodeIcon from '../../components/Icons/NodeIcon' +import LabelInputField from '../../components/General/LabelInputField' +import ReactionIcon from '../../components/Icons/ReactionIcon' +import ColorPicker from '../../components/General/ColorPicker' + +const CreateLocalNodePage = () => { + const [autoConnectChecked, setAutoConnectChecked] = useState(false) + + return ( + +
    + + + + +
    + + + + + + + + + Device Avatar + + + + } backgroundColor={'white'} /> + + + + + Highlight Color + + + + + + + + Settings + + + setAutoConnectChecked(v)} + variant="outline" + /> + + + + + }>Continue +
    +
    +     + ) +} + +export default CreateLocalNodePage diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx index 30828e76..29d09abc 100644 --- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx +++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx @@ -1,16 +1,25 @@ import type { Meta, StoryObj } from '@storybook/react' - +import { Provider as ReduxProvider } from 'react-redux' +import store from '../../redux/store' import DeviceHealthCheck from './DeviceHealthCheck' -const meta = { +const meta: Meta = { title: 'Pages/DeviceHealthCheck', component: DeviceHealthCheck, + decorators: [ + StoryObj => ( + + + + ), + ], tags: ['autodocs'], -} satisfies Meta +} export default meta -type Story = StoryObj -export const Page: Story = { +type DeviceHealthCheckStory = StoryObj + +export const Page: DeviceHealthCheckStory = { args: {}, } diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx index 4bb9d649..72e90471 100644 --- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx +++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx @@ -9,8 +9,13 @@ import { Button, InformationBox } from '@status-im/components' import Icon from '../../components/General/Icon' import DeviceMemory from '../../components/Charts/DeviceMemoryHealth' import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth' +import { useSelector } from 'react-redux' +import { RootState } from '../../redux/store' const DeviceHealthCheck = () => { + + const deviceHealthState = useSelector((state: RootState) => state.deviceHealth) + console.log(deviceHealthState) return ( { isAdvancedSettings={true} /> - - + + - - + + ( -
    - -
    + +
    + +
    +     ), ], } satisfies Meta diff --git a/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx b/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx index f0c8023b..a0fa7cba 100644 --- a/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx +++ b/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx @@ -1,32 +1,29 @@ 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 ( - - -
    -
    - -
    -
    -
    - - - - - - - - - -
    -

    - Welcome, John. This is your complete access to a truly decentralized Web 3.0 -

    -

    - Status Nodes allows you to finally take control and ownership of the - services you wish to run in a completely trustless and decentralized manner. -

    - -
    + + + + + + + }>Get Started + +
    diff --git a/src/redux/PinnedMessage/slice.tsx b/src/redux/PinnedMessage/slice.tsx new file mode 100644 index 00000000..4371aa74 --- /dev/null +++ b/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) => { + state.pinnedMessage = action.payload + }, + clearPinnedMessage: state => { + state.pinnedMessage = undefined + }, + }, +}) + +export const { setPinnedMessage, clearPinnedMessage } = pinnedMessageSlice.actions + +export default pinnedMessageSlice.reducer diff --git a/src/redux/deviceHealthCheck/slice.tsx b/src/redux/deviceHealthCheck/slice.tsx new file mode 100644 index 00000000..53e60cc0 --- /dev/null +++ b/src/redux/deviceHealthCheck/slice.tsx @@ -0,0 +1,56 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit' + +interface DeviceHealthState { + storage: number + maxStorage: number + cpuLoad: number[] + memory: number[] + maxMemory: number + uploadRate: number[] + downloadRate: number[] +} + +const initialState: DeviceHealthState = { + storage: 44, + maxStorage: 100, + cpuLoad: [12, 123, 4, 90], + memory: [25, 31, 5, 14, 20, 81], + maxMemory: 120, + uploadRate: [1, 4, 25, 65], + downloadRate: [20, 3, 50, 30], +} + +const deviceHealthSlice = createSlice({ + name: 'deviceHealth', + initialState, + reducers: { + setStorage: ( + state: DeviceHealthState, + action: PayloadAction<{ storage: number; maxStorage: number }>, + ) => { + state.storage = action.payload.storage + state.maxStorage = action.payload.maxStorage + }, + setCpuLoad: (state: DeviceHealthState, action: PayloadAction) => { + state.cpuLoad = action.payload + }, + setMemory: ( + state: DeviceHealthState, + action: PayloadAction<{ memory: number[]; maxMemory: number }>, + ) => { + state.memory = action.payload.memory + state.maxMemory = action.payload.maxMemory + }, + setNetworkHealth: ( + state: DeviceHealthState, + action: PayloadAction<{ uploadRate: number[]; downloadRate: number[] }>, + ) => { + state.uploadRate = action.payload.uploadRate + state.downloadRate = action.payload.downloadRate + }, + }, +}) + +export const { setStorage, setCpuLoad, setMemory, setNetworkHealth } = deviceHealthSlice.actions + +export default deviceHealthSlice.reducer diff --git a/src/redux/store.tsx b/src/redux/store.tsx new file mode 100644 index 00000000..70d352db --- /dev/null +++ b/src/redux/store.tsx @@ -0,0 +1,14 @@ +import { configureStore } from '@reduxjs/toolkit' +import deviceHealthReducer from './deviceHealthCheck/slice' +import pinnedMessageReducer from './PinnedMessage/slice' + +const store = configureStore({ + reducer: { + deviceHealth: deviceHealthReducer, + pinnedMessage: pinnedMessageReducer, + }, +}) + +export type RootState = ReturnType +export type AppDispatch = typeof store.dispatch +export default store diff --git a/yarn.lock b/yarn.lock index 68528b38..0d82d177 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1590,6 +1590,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.9.2": + version: 7.22.10 + resolution: "@babel/runtime@npm:7.22.10" + dependencies: + regenerator-runtime: ^0.14.0 + checksum: 524d41517e68953dbc73a4f3616b8475e5813f64e28ba89ff5fca2c044d535c2ea1a3f310df1e5bb06162e1f0b401b5c4af73fe6e2519ca2450d9d8c44cf268d + languageName: node + linkType: hard + "@babel/template@npm:^7.0.0, @babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3": version: 7.22.5 resolution: "@babel/template@npm:7.22.5" @@ -2158,6 +2167,15 @@ __metadata: languageName: node linkType: hard +"@icons/material@npm:^0.2.4": + version: 0.2.4 + resolution: "@icons/material@npm:0.2.4" + peerDependencies: + react: "*" + checksum: 24baa360cb83f7e1a9e6784ac11185d57eb895b0efd3070ec915693378330f35ff9feb248f650b9649fa3e1045601286585dc05795a4c734d4849b33900351ee + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -4050,6 +4068,26 @@ __metadata: languageName: node linkType: hard +"@reduxjs/toolkit@npm:^1.9.5": + version: 1.9.5 + resolution: "@reduxjs/toolkit@npm:1.9.5" + dependencies: + immer: ^9.0.21 + redux: ^4.2.1 + redux-thunk: ^2.4.2 + reselect: ^4.1.8 + peerDependencies: + react: ^16.9.0 || ^17.0.0 || ^18 + react-redux: ^7.2.1 || ^8.0.2 + peerDependenciesMeta: + react: + optional: true + react-redux: + optional: true + checksum: 54672c5593d05208af577e948a338f23128d3aa01ef056ab0d40bcfa14400cf6566be99e11715388f12c1d7655cdf7c5c6b63cb92eb0fecf996c454a46a3914c + languageName: node + linkType: hard + "@remix-run/router@npm:1.7.2": version: 1.7.2 resolution: "@remix-run/router@npm:1.7.2" @@ -6886,6 +6924,16 @@ __metadata: languageName: node linkType: hard +"@types/hoist-non-react-statics@npm:^3.3.1": + version: 3.3.1 + resolution: "@types/hoist-non-react-statics@npm:3.3.1" + dependencies: + "@types/react": "*" + hoist-non-react-statics: ^3.3.0 + checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719 + languageName: node + linkType: hard + "@types/http-errors@npm:*": version: 2.0.1 resolution: "@types/http-errors@npm:2.0.1" @@ -7033,6 +7081,16 @@ __metadata: languageName: node linkType: hard +"@types/react-color@npm:^3.0.6": + version: 3.0.6 + resolution: "@types/react-color@npm:3.0.6" + dependencies: + "@types/react": "*" + "@types/reactcss": "*" + checksum: 8cd881d6eb725190be942c1d71f7917d3dd1b418417740f64fa6c03ae3ba16cb91d07c4b3b348cf5bae20071c8ca5d4aaf514c9a5318077d5e50bd782a5e8da2 + languageName: node + linkType: hard + "@types/react-dom@npm:18": version: 18.2.7 resolution: "@types/react-dom@npm:18.2.7" @@ -7062,6 +7120,15 @@ __metadata: languageName: node linkType: hard +"@types/reactcss@npm:*": + version: 1.2.6 + resolution: "@types/reactcss@npm:1.2.6" + dependencies: + "@types/react": "*" + checksum: f4711d707a1af653178c8941080e989a945feb0c529d848fed36687ee5e8a462cda183383caadf8848497b5c03bec16e6cdf22fc70462913d8d706cabb597130 + languageName: node + linkType: hard + "@types/resolve@npm:1.20.2": version: 1.20.2 resolution: "@types/resolve@npm:1.20.2" @@ -7118,6 +7185,13 @@ __metadata: languageName: node linkType: hard +"@types/use-sync-external-store@npm:^0.0.3": + version: 0.0.3 + resolution: "@types/use-sync-external-store@npm:0.0.3" + checksum: 161ddb8eec5dbe7279ac971531217e9af6b99f7783213566d2b502e2e2378ea19cf5e5ea4595039d730aa79d3d35c6567d48599f69773a02ffcff1776ec2a44e + languageName: node + linkType: hard + "@types/wait-on@npm:^5.2.0": version: 5.3.1 resolution: "@types/wait-on@npm:5.3.1" @@ -11059,6 +11133,15 @@ __metadata: languageName: node linkType: hard +"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2": + version: 3.3.2 + resolution: "hoist-non-react-statics@npm:3.3.2" + dependencies: + react-is: ^16.7.0 + checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8 + languageName: node + linkType: hard + "homedir-polyfill@npm:^1.0.0": version: 1.0.3 resolution: "homedir-polyfill@npm:1.0.3" @@ -11220,6 +11303,13 @@ __metadata: languageName: node linkType: hard +"immer@npm:^9.0.21": + version: 9.0.21 + resolution: "immer@npm:9.0.21" + checksum: 70e3c274165995352f6936695f0ef4723c52c92c92dd0e9afdfe008175af39fa28e76aafb3a2ca9d57d1fb8f796efc4dd1e1cc36f18d33fa5b74f3dfb0375432 + languageName: node + linkType: hard + "import-fresh@npm:^2.0.0": version: 2.0.0 resolution: "import-fresh@npm:2.0.0" @@ -12820,6 +12910,13 @@ __metadata: languageName: node linkType: hard +"lodash-es@npm:^4.17.15": + version: 4.17.21 + resolution: "lodash-es@npm:4.17.21" + checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2 + languageName: node + linkType: hard + "lodash.debounce@npm:^4.0.8": version: 4.0.8 resolution: "lodash.debounce@npm:4.0.8" @@ -12848,7 +12945,7 @@ __metadata: languageName: node linkType: hard -"lodash@npm:^4.17.15, lodash@npm:^4.17.21": +"lodash@npm:^4.0.1, lodash@npm:^4.17.15, lodash@npm:^4.17.21": version: 4.17.21 resolution: "lodash@npm:4.17.21" checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7 @@ -13024,6 +13121,13 @@ __metadata: languageName: node linkType: hard +"material-colors@npm:^1.2.1": + version: 1.2.6 + resolution: "material-colors@npm:1.2.6" + checksum: 72d005ccccb82bab68eef3cd757e802668634fc86976dedb9fc564ce994f2d3258273766b7efecb7404a0031969e2d72201a1b74169763f0a53c0dd8d649209f + languageName: node + linkType: hard + "mdast-util-definitions@npm:^4.0.0": version: 4.0.0 resolution: "mdast-util-definitions@npm:4.0.0" @@ -13701,6 +13805,7 @@ __metadata: "@fsouza/prettierd": ^0.24.2 "@nivo/line": ^0.83.0 "@nivo/pie": ^0.83.0 + "@reduxjs/toolkit": ^1.9.5 "@status-im/colors": "*" "@status-im/components": ^0.2.6 "@storybook/addon-essentials": ^7.2.0 @@ -13717,6 +13822,7 @@ __metadata: "@tamagui/react-17-patch": 1.36.4 "@tamagui/vite-plugin": 1.36.4 "@types/react": 18 + "@types/react-color": ^3.0.6 "@types/react-dom": 18 "@typescript-eslint/eslint-plugin": ^6.0.0 "@typescript-eslint/parser": ^6.0.0 @@ -13728,9 +13834,11 @@ __metadata: expo-modules-core: ^1.5.9 prettier: ^3.0.1 react: 18 + react-color: ^2.19.3 react-dom: 18 react-native: ^0.72.3 react-native-svg: ^13.10.0 + react-redux: ^8.1.2 react-router-dom: ^6.14.2 storybook: ^7.2.0 tamagui: 1.36.4 @@ -14585,7 +14693,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:*, prop-types@npm:^15.7.2": +"prop-types@npm:*, prop-types@npm:^15.5.10, prop-types@npm:^15.7.2": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -14729,6 +14837,23 @@ __metadata: languageName: node linkType: hard +"react-color@npm:^2.19.3": + version: 2.19.3 + resolution: "react-color@npm:2.19.3" + dependencies: + "@icons/material": ^0.2.4 + lodash: ^4.17.15 + lodash-es: ^4.17.15 + material-colors: ^1.2.1 + prop-types: ^15.5.10 + reactcss: ^1.2.0 + tinycolor2: ^1.4.1 + peerDependencies: + react: "*" + checksum: 40b49e1aa2ab27a099cc37a3fa2d5bb906b8def4dbe2d922c0e42365e386d82b03f9b06a2b29a44a51f1e114cef72e61c0ba0740581a128d951936ea4617429b + languageName: node + linkType: hard + "react-colorful@npm:^5.1.2": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -14848,7 +14973,7 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^16.13.1": +"react-is@npm:^16.13.1, react-is@npm:^16.7.0": version: 16.13.1 resolution: "react-is@npm:16.13.1" checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f @@ -14979,6 +15104,38 @@ __metadata: languageName: node linkType: hard +"react-redux@npm:^8.1.2": + version: 8.1.2 + resolution: "react-redux@npm:8.1.2" + dependencies: + "@babel/runtime": ^7.12.1 + "@types/hoist-non-react-statics": ^3.3.1 + "@types/use-sync-external-store": ^0.0.3 + hoist-non-react-statics: ^3.3.2 + react-is: ^18.0.0 + use-sync-external-store: ^1.0.0 + peerDependencies: + "@types/react": ^16.8 || ^17.0 || ^18.0 + "@types/react-dom": ^16.8 || ^17.0 || ^18.0 + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + react-native: ">=0.59" + redux: ^4 || ^5.0.0-beta.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + react-dom: + optional: true + react-native: + optional: true + redux: + optional: true + checksum: 4d5976b0f721e4148475871fcabce2fee875cc7f70f9a292f3370d63b38aa1dd474eb303c073c5555f3e69fc732f3bac05303def60304775deb28361e3f4b7cc + languageName: node + linkType: hard + "react-refresh@npm:^0.14.0": version: 0.14.0 resolution: "react-refresh@npm:0.14.0" @@ -15109,6 +15266,15 @@ __metadata: languageName: node linkType: hard +"reactcss@npm:^1.2.0": + version: 1.2.3 + resolution: "reactcss@npm:1.2.3" + dependencies: + lodash: ^4.0.1 + checksum: c53e386a0881f1477e1cff661f6a6ad4c662230941f3827862193ac30f9b75cdf7bc7b4c7e5ca543d3e4e80fee1a3e9fa0056c206b1c0423726c41773ab3fe45 + languageName: node + linkType: hard + "read-pkg-up@npm:^7.0.1": version: 7.0.1 resolution: "read-pkg-up@npm:7.0.1" @@ -15199,6 +15365,24 @@ __metadata: languageName: node linkType: hard +"redux-thunk@npm:^2.4.2": + version: 2.4.2 + resolution: "redux-thunk@npm:2.4.2" + peerDependencies: + redux: ^4 + checksum: c7f757f6c383b8ec26152c113e20087818d18ed3edf438aaad43539e9a6b77b427ade755c9595c4a163b6ad3063adf3497e5fe6a36c68884eb1f1cfb6f049a5c + languageName: node + linkType: hard + +"redux@npm:^4.2.1": + version: 4.2.1 + resolution: "redux@npm:4.2.1" + dependencies: + "@babel/runtime": ^7.9.2 + checksum: f63b9060c3a1d930ae775252bb6e579b42415aee7a23c4114e21a0b4ba7ec12f0ec76936c00f546893f06e139819f0e2855e0d55ebfce34ca9c026241a6950dd + languageName: node + linkType: hard + "reforest@npm:^0.12.1": version: 0.12.3 resolution: "reforest@npm:0.12.3" @@ -15234,6 +15418,13 @@ __metadata: languageName: node linkType: hard +"regenerator-runtime@npm:^0.14.0": + version: 0.14.0 + resolution: "regenerator-runtime@npm:0.14.0" + checksum: 1c977ad82a82a4412e4f639d65d22be376d3ebdd30da2c003eeafdaaacd03fc00c2320f18120007ee700900979284fc78a9f00da7fb593f6e6eeebc673fba9a3 + languageName: node + linkType: hard + "regenerator-transform@npm:^0.15.1": version: 0.15.2 resolution: "regenerator-transform@npm:0.15.2" @@ -15333,6 +15524,13 @@ __metadata: languageName: node linkType: hard +"reselect@npm:^4.1.8": + version: 4.1.8 + resolution: "reselect@npm:4.1.8" + checksum: a4ac87cedab198769a29be92bc221c32da76cfdad6911eda67b4d3e7136dca86208c3b210e31632eae31ebd2cded18596f0dd230d3ccc9e978df22f233b5583e + languageName: node + linkType: hard + "resolve-cwd@npm:^3.0.0": version: 3.0.0 resolution: "resolve-cwd@npm:3.0.0" @@ -16391,6 +16589,13 @@ __metadata: languageName: node linkType: hard +"tinycolor2@npm:^1.4.1": + version: 1.6.0 + resolution: "tinycolor2@npm:1.6.0" + checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230 + languageName: node + linkType: hard + "tmpl@npm:1.0.5": version: 1.0.5 resolution: "tmpl@npm:1.0.5"