From 1a44ad733c143f9984f244d2b38645436b59191c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 8 Aug 2023 13:07:00 +0300 Subject: [PATCH 01/17] feat: create HealthInfoSection component --- src/App.tsx | 5 +++-- src/components/HealthInfoSection.tsx | 7 +++++++ 2 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 src/components/HealthInfoSection.tsx diff --git a/src/App.tsx b/src/App.tsx index 5e9d989d..a9fd4dbf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,9 +2,9 @@ import './App.css' import { TamaguiProvider } from 'tamagui' import { Provider as StatusProvider } from '@status-im/components' import StandardGauge from './components/StandardGauge' - -import config from '../tamagui.config' +import config from '../tamagui.config' +import HealthInfoSection from './components/HealthInfoSection' function App() { const data = [ @@ -28,6 +28,7 @@ function App() {
+ ) diff --git a/src/components/HealthInfoSection.tsx b/src/components/HealthInfoSection.tsx new file mode 100644 index 00000000..fd5c083b --- /dev/null +++ b/src/components/HealthInfoSection.tsx @@ -0,0 +1,7 @@ +import { YStack } from 'tamagui' + +const HealthInfoSection = () => { + return +} + +export default HealthInfoSection From 6b788018adf1cd2a6380809089d38d42da43c75a Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 8 Aug 2023 13:10:07 +0300 Subject: [PATCH 02/17] feat: add type and props --- src/App.tsx | 9 ++++++++- src/components/HealthInfoSection.tsx | 15 ++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a9fd4dbf..87012520 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -28,7 +28,14 @@ function App() {
- + ) diff --git a/src/components/HealthInfoSection.tsx b/src/components/HealthInfoSection.tsx index fd5c083b..9001824f 100644 --- a/src/components/HealthInfoSection.tsx +++ b/src/components/HealthInfoSection.tsx @@ -1,6 +1,19 @@ import { YStack } from 'tamagui' -const HealthInfoSection = () => { +type HealthInfoSectionProps = { + usedStorage: number + maxStorage: number + usedCpuClockRate: number + usedRamMemory: number + maxRamMemory: number + network: number +} + +const HealthInfoSection = (props: HealthInfoSectionProps) => { + const { usedStorage, maxStorage, usedCpuClockRate, usedRamMemory, maxRamMemory, network } = props + + console.log(usedStorage, maxStorage, usedCpuClockRate, usedRamMemory, maxRamMemory, network) + return } From 0947232fa163610c968bf13567b47fe6636b2212 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 8 Aug 2023 13:57:33 +0300 Subject: [PATCH 03/17] feat: add constant messages --- src/components/HealthInfoSection.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/HealthInfoSection.tsx b/src/components/HealthInfoSection.tsx index 9001824f..c00ce1eb 100644 --- a/src/components/HealthInfoSection.tsx +++ b/src/components/HealthInfoSection.tsx @@ -1,5 +1,9 @@ import { YStack } from 'tamagui' +const BAD_STORAGE_TEXT = 'Your storage is running low as required for additional node services.' +const CPU_CLOCK_RATE_TEXT = '2.4GHz is recommended for CPU.' +const GOOD_RAM_MEMORY_TEXT = 'There is sufficient ram required for selected services.' +const NETWORK_TEXT = 'Network Latency is low.' type HealthInfoSectionProps = { usedStorage: number maxStorage: number From 822f4cc80506db3278ed966ac291edc7582280c2 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 8 Aug 2023 13:59:35 +0300 Subject: [PATCH 04/17] fix: remove not used props from icon --- src/components/Icon.tsx | 2 -- src/components/IconText.tsx | 2 +- src/components/InformationBox.tsx | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 56eae101..77196fbd 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -4,8 +4,6 @@ export type IconProps = { source: string width?: number height?: number - style?: unknown - className?: string } const Icon = ({ source, width = 16, height = 16, ...props }: IconProps) => { diff --git a/src/components/IconText.tsx b/src/components/IconText.tsx index aeb98825..53069fbb 100644 --- a/src/components/IconText.tsx +++ b/src/components/IconText.tsx @@ -14,7 +14,7 @@ const IconText = ({ icon, children, ...props }: IconTextProps) => { }} space={'$2'} > - + {children} diff --git a/src/components/InformationBox.tsx b/src/components/InformationBox.tsx index 56959795..36016d53 100644 --- a/src/components/InformationBox.tsx +++ b/src/components/InformationBox.tsx @@ -20,7 +20,7 @@ const InformationBox = ({ icon, textElements }: InformationBoxProps) => { }} space={'$2'} > - + ) From 47cf20b601f36800f2099835cac176c1ea69b87f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Tue, 8 Aug 2023 14:45:30 +0300 Subject: [PATCH 05/17] fix: remove styled from ShadowBox --- src/components/ShadowBox.tsx | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/src/components/ShadowBox.tsx b/src/components/ShadowBox.tsx index 790dd226..d427a493 100644 --- a/src/components/ShadowBox.tsx +++ b/src/components/ShadowBox.tsx @@ -1,10 +1,23 @@ -import { Stack, styled } from 'tamagui' +import { ReactNode } from 'react' +import { Stack } from 'tamagui' -const ShadowBox = styled(Stack, { - boxSizing: 'border-box', - borderRadius: '16px', - boxShadow: '0px 4px 20px 0px rgba(9, 16, 28, 0.08)', - width: '100%', -}) +type ShadowBoxProps = { + children: ReactNode +} + +const ShadowBox = ({ children }: ShadowBoxProps) => { + return ( + + {children} + + ) +} export default ShadowBox From 2ef62191aa07c995e83657ab9fb1a69b18dc5c1d Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 09:25:27 +0300 Subject: [PATCH 06/17] fix: remove styled from BackgroundImage It has an error for boxShadow prop --- src/components/BackgroundImage.tsx | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/components/BackgroundImage.tsx b/src/components/BackgroundImage.tsx index ca85f113..ac2de18a 100644 --- a/src/components/BackgroundImage.tsx +++ b/src/components/BackgroundImage.tsx @@ -1,11 +1,22 @@ -import { Stack, styled } from 'tamagui' +import { Stack } from 'tamagui' -const BackgroundImage = styled(Stack, { - boxShadow: 'inset 100px 0px 100px white', - width: '650px', - height: '91.9vh', - borderTopRightRadius: '25px', - borderBottomRightRadius: '25px', -}) +type BackgroundImageProps = { + background: string +} + +const BackgroundImage = ({ background }: BackgroundImageProps) => { + return ( + + ) +} export default BackgroundImage From 3ea108b2469c094a7847f68953adacf308804a90 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 10:12:39 +0300 Subject: [PATCH 07/17] feat: implement states for percentages --- src/components/HealthInfoSection.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/HealthInfoSection.tsx b/src/components/HealthInfoSection.tsx index c00ce1eb..52ae0fbf 100644 --- a/src/components/HealthInfoSection.tsx +++ b/src/components/HealthInfoSection.tsx @@ -1,22 +1,32 @@ import { YStack } from 'tamagui' +import { useEffect, useState } from 'react' +// Add more constant texts const BAD_STORAGE_TEXT = 'Your storage is running low as required for additional node services.' const CPU_CLOCK_RATE_TEXT = '2.4GHz is recommended for CPU.' -const GOOD_RAM_MEMORY_TEXT = 'There is sufficient ram required for selected services.' +const GOOD_RAM_MEMORY_TEXT = 'There is sufficient RAM required for selected services.' const NETWORK_TEXT = 'Network Latency is low.' + type HealthInfoSectionProps = { usedStorage: number maxStorage: number - usedCpuClockRate: number usedRamMemory: number maxRamMemory: number - network: number } const HealthInfoSection = (props: HealthInfoSectionProps) => { - const { usedStorage, maxStorage, usedCpuClockRate, usedRamMemory, maxRamMemory, network } = props + const { usedStorage, maxStorage, usedRamMemory, maxRamMemory } = props - console.log(usedStorage, maxStorage, usedCpuClockRate, usedRamMemory, maxRamMemory, network) + const [usedStoragePercentage, setUsedStoragePercentage] = useState(0) + const [usedRamMemoryPercentage, setUsedRamMemoryPercentage] = useState(0) + + useEffect(() => { + setUsedStoragePercentage((usedStorage / maxStorage) * 100) + }, [usedStorage, maxStorage]) + + useEffect(() => { + setUsedRamMemoryPercentage((usedRamMemory / maxRamMemory) * 100) + }, [usedRamMemory, maxRamMemory]) return } From e533617a6b1154546997a68c137a22c62ba179e1 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 10:20:39 +0300 Subject: [PATCH 08/17] feat: create constants file and move them --- src/constants.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/constants.ts diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 00000000..09e3a38c --- /dev/null +++ b/src/constants.ts @@ -0,0 +1,8 @@ +export const GREEN_CHECKMARK_ICON = '/icons/checkmark-circle-green.png' +export const RED_CHECKMARK_ICON = '/icons/remove-circle-red.png' + +export const BAD_STORAGE_TEXT = + 'Your storage is running low as required for additional node services.' +export const CPU_CLOCK_RATE_TEXT = '2.4GHz is recommended for CPU.' +export const GOOD_RAM_MEMORY_TEXT = 'There is sufficient RAM required for selected services.' +export const NETWORK_TEXT = 'Network Latency is low.' From 7245964d778769348ebc517cdaf3bd19e326f375 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 10:26:00 +0300 Subject: [PATCH 09/17] feat: change info messages and add more --- src/constants.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index 09e3a38c..a5b7c0c6 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,8 +1,14 @@ export const GREEN_CHECKMARK_ICON = '/icons/checkmark-circle-green.png' export const RED_CHECKMARK_ICON = '/icons/remove-circle-red.png' +export const GOOD_STORAGE_TEXT = + 'You have plenty of storage available for additional node services.' +export const GOOD_CPU_CLOCK_RATE_TEXT = '2.4GHz or higher is available for CPU.' +export const GOOD_RAM_MEMORY_TEXT = 'There is sufficient RAM required for selected services.' +export const GOOD_NETWORK_TEXT = 'Network Latency is low.' + export const BAD_STORAGE_TEXT = 'Your storage is running low as required for additional node services.' -export const CPU_CLOCK_RATE_TEXT = '2.4GHz is recommended for CPU.' -export const GOOD_RAM_MEMORY_TEXT = 'There is sufficient RAM required for selected services.' -export const NETWORK_TEXT = 'Network Latency is low.' +export const BAD_CPU_CLOCK_RATE_TEXT = 'Your CPU clock rate is below the recommended 2.4GHz.' +export const BAD_RAM_MEMORY_TEXT = 'There is insufficient RAM required for selected services.' +export const BAD_NETWORK_TEXT = 'Network Latency is high.' From 650a76943237bf9f1a24b3f63d6779b05a89be43 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 10:29:35 +0300 Subject: [PATCH 10/17] feat: add real values for props also add cpuClockRate and networkLatency --- src/App.tsx | 12 ++++----- src/components/HealthInfoSection.tsx | 39 ++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 6 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 87012520..4a21bef5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -29,12 +29,12 @@ function App() { diff --git a/src/components/HealthInfoSection.tsx b/src/components/HealthInfoSection.tsx index 52ae0fbf..972585f0 100644 --- a/src/components/HealthInfoSection.tsx +++ b/src/components/HealthInfoSection.tsx @@ -6,6 +6,17 @@ const BAD_STORAGE_TEXT = 'Your storage is running low as required for additional const CPU_CLOCK_RATE_TEXT = '2.4GHz is recommended for CPU.' const GOOD_RAM_MEMORY_TEXT = 'There is sufficient RAM required for selected services.' const NETWORK_TEXT = 'Network Latency is low.' +import StatusIconText from './StatusIconText' +import { + BAD_CPU_CLOCK_RATE_TEXT, + BAD_NETWORK_TEXT, + BAD_RAM_MEMORY_TEXT, + BAD_STORAGE_TEXT, + GOOD_CPU_CLOCK_RATE_TEXT, + GOOD_NETWORK_TEXT, + GOOD_RAM_MEMORY_TEXT, + GOOD_STORAGE_TEXT, +} from '../constants' type HealthInfoSectionProps = { usedStorage: number @@ -29,6 +40,34 @@ const HealthInfoSection = (props: HealthInfoSectionProps) => { }, [usedRamMemory, maxRamMemory]) return + return ( + + + + + + + ) } export default HealthInfoSection From c7120820bf252b2a646073a58b06637061f3faee Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 10:32:55 +0300 Subject: [PATCH 11/17] fix: add new props to the type --- src/components/HealthInfoSection.tsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/components/HealthInfoSection.tsx b/src/components/HealthInfoSection.tsx index 972585f0..9edd5e92 100644 --- a/src/components/HealthInfoSection.tsx +++ b/src/components/HealthInfoSection.tsx @@ -1,11 +1,5 @@ import { YStack } from 'tamagui' import { useEffect, useState } from 'react' - -// Add more constant texts -const BAD_STORAGE_TEXT = 'Your storage is running low as required for additional node services.' -const CPU_CLOCK_RATE_TEXT = '2.4GHz is recommended for CPU.' -const GOOD_RAM_MEMORY_TEXT = 'There is sufficient RAM required for selected services.' -const NETWORK_TEXT = 'Network Latency is low.' import StatusIconText from './StatusIconText' import { BAD_CPU_CLOCK_RATE_TEXT, @@ -19,10 +13,12 @@ import { } from '../constants' type HealthInfoSectionProps = { - usedStorage: number - maxStorage: number - usedRamMemory: number - maxRamMemory: number + usedStorage: number // GB + maxStorage: number // GB + usedRamMemory: number // GB + maxRamMemory: number // GB + cpuClockRate: number // GHz + networkLatency: number // milliseconds } const HealthInfoSection = (props: HealthInfoSectionProps) => { @@ -39,7 +35,6 @@ const HealthInfoSection = (props: HealthInfoSectionProps) => { setUsedRamMemoryPercentage((usedRamMemory / maxRamMemory) * 100) }, [usedRamMemory, maxRamMemory]) - return return ( Date: Wed, 9 Aug 2023 10:58:47 +0300 Subject: [PATCH 12/17] feat: create separate component for message --- src/components/StatusIconText.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/components/StatusIconText.tsx diff --git a/src/components/StatusIconText.tsx b/src/components/StatusIconText.tsx new file mode 100644 index 00000000..baad7dbd --- /dev/null +++ b/src/components/StatusIconText.tsx @@ -0,0 +1,19 @@ +import { GREEN_CHECKMARK_ICON, RED_CHECKMARK_ICON } from '../constants' +import IconText from './IconText' + +type StatusIconTextProps = { + percentage: number + threshold: number + goodText: string + badText: string +} + +const StatusIconText = ({ percentage, threshold, goodText, badText }: StatusIconTextProps) => { + const isGood = percentage < threshold + const icon = isGood ? GREEN_CHECKMARK_ICON : RED_CHECKMARK_ICON + const text = isGood ? goodText : badText + + return {text} +} + +export default StatusIconText From c7c4b4e7a57bb6991c4f902ffaeb62639d8c4350 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 11:26:50 +0300 Subject: [PATCH 13/17] feat: add valid values for new props --- src/App.tsx | 6 +++--- src/components/HealthInfoSection.tsx | 11 ++++++----- src/constants.ts | 2 +- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 4a21bef5..da155bad 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -29,11 +29,11 @@ function App() { diff --git a/src/components/HealthInfoSection.tsx b/src/components/HealthInfoSection.tsx index 9edd5e92..5a3f12ef 100644 --- a/src/components/HealthInfoSection.tsx +++ b/src/components/HealthInfoSection.tsx @@ -22,7 +22,8 @@ type HealthInfoSectionProps = { } const HealthInfoSection = (props: HealthInfoSectionProps) => { - const { usedStorage, maxStorage, usedRamMemory, maxRamMemory } = props + const { usedStorage, maxStorage, usedRamMemory, maxRamMemory, cpuClockRate, networkLatency } = + props const [usedStoragePercentage, setUsedStoragePercentage] = useState(0) const [usedRamMemoryPercentage, setUsedRamMemoryPercentage] = useState(0) @@ -44,8 +45,8 @@ const HealthInfoSection = (props: HealthInfoSectionProps) => { badText={BAD_STORAGE_TEXT} /> 2.4 ? 100 : 0} + threshold={50} goodText={GOOD_CPU_CLOCK_RATE_TEXT} badText={BAD_CPU_CLOCK_RATE_TEXT} /> @@ -56,8 +57,8 @@ const HealthInfoSection = (props: HealthInfoSectionProps) => { badText={BAD_RAM_MEMORY_TEXT} /> 100 ? 100 : 0} + threshold={50} goodText={GOOD_NETWORK_TEXT} badText={BAD_NETWORK_TEXT} /> diff --git a/src/constants.ts b/src/constants.ts index a5b7c0c6..2467e6ef 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -3,7 +3,7 @@ export const RED_CHECKMARK_ICON = '/icons/remove-circle-red.png' export const GOOD_STORAGE_TEXT = 'You have plenty of storage available for additional node services.' -export const GOOD_CPU_CLOCK_RATE_TEXT = '2.4GHz or higher is available for CPU.' +export const GOOD_CPU_CLOCK_RATE_TEXT = '2.4GHz is recommended for CPU.' export const GOOD_RAM_MEMORY_TEXT = 'There is sufficient RAM required for selected services.' export const GOOD_NETWORK_TEXT = 'Network Latency is low.' From 9a81ce236772447620c3f013e0e5be8f38b0213c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 12:00:59 +0300 Subject: [PATCH 14/17] fix: remove duplicate config import --- src/App.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 99f0d9d3..35aeb708 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,8 +4,6 @@ import { Provider as StatusProvider } from '@status-im/components' import config from '../tamagui.config' import LandingPage from './components/LayoutComponent/LandingPage' -import config from '../tamagui.config' - function App() { return ( From f8e6cf836949fa0903e5b0fed3c835d6d5cbeb03 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 12:37:58 +0300 Subject: [PATCH 15/17] feat: remove use state and effect just calculate them without state --- src/components/HealthInfoSection.tsx | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/components/HealthInfoSection.tsx b/src/components/HealthInfoSection.tsx index 5a3f12ef..ebd88242 100644 --- a/src/components/HealthInfoSection.tsx +++ b/src/components/HealthInfoSection.tsx @@ -1,5 +1,4 @@ import { YStack } from 'tamagui' -import { useEffect, useState } from 'react' import StatusIconText from './StatusIconText' import { BAD_CPU_CLOCK_RATE_TEXT, @@ -25,16 +24,10 @@ const HealthInfoSection = (props: HealthInfoSectionProps) => { const { usedStorage, maxStorage, usedRamMemory, maxRamMemory, cpuClockRate, networkLatency } = props - const [usedStoragePercentage, setUsedStoragePercentage] = useState(0) - const [usedRamMemoryPercentage, setUsedRamMemoryPercentage] = useState(0) - - useEffect(() => { - setUsedStoragePercentage((usedStorage / maxStorage) * 100) - }, [usedStorage, maxStorage]) - - useEffect(() => { - setUsedRamMemoryPercentage((usedRamMemory / maxRamMemory) * 100) - }, [usedRamMemory, maxRamMemory]) + const usedStoragePercentage = (usedStorage / maxStorage) * 100 + const usedRamMemoryPercentage = (usedRamMemory / maxRamMemory) * 100 + const cpuClockRatePercentage = cpuClockRate > 2.4 ? 100 : 0 + const networkLatencyPercentage = networkLatency > 100 ? 100 : 0 return ( @@ -45,7 +38,7 @@ const HealthInfoSection = (props: HealthInfoSectionProps) => { badText={BAD_STORAGE_TEXT} /> 2.4 ? 100 : 0} + percentage={cpuClockRatePercentage} threshold={50} goodText={GOOD_CPU_CLOCK_RATE_TEXT} badText={BAD_CPU_CLOCK_RATE_TEXT} @@ -57,7 +50,7 @@ const HealthInfoSection = (props: HealthInfoSectionProps) => { badText={BAD_RAM_MEMORY_TEXT} /> 100 ? 100 : 0} + percentage={networkLatencyPercentage} threshold={50} goodText={GOOD_NETWORK_TEXT} badText={BAD_NETWORK_TEXT} From 39146119709ab73998dbef965ee392f59b33dc77 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 13:13:18 +0300 Subject: [PATCH 16/17] chore: install react router dom library --- package.json | 1 + yarn.lock | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/package.json b/package.json index 6dc94f4b..893abbce 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "react-dom": "18", "react-native": "^0.72.3", "react-native-svg": "^13.10.0", + "react-router-dom": "^6.14.2", "tamagui": "1.36.4" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index cab22ca7..8efe1b20 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3964,6 +3964,13 @@ __metadata: languageName: node linkType: hard +"@remix-run/router@npm:1.7.2": + version: 1.7.2 + resolution: "@remix-run/router@npm:1.7.2" + checksum: ea43bb662f1f5c93965989b1667fb6e8a301cb69c44341ee92c81cb15ea685b494168e5905593b5777d59058f1455b4b58083d5b895f04382e49362e420d7af4 + languageName: node + linkType: hard + "@rollup/plugin-babel@npm:^6.0.3": version: 6.0.3 resolution: "@rollup/plugin-babel@npm:6.0.3" @@ -13578,6 +13585,7 @@ __metadata: react-dom: 18 react-native: ^0.72.3 react-native-svg: ^13.10.0 + react-router-dom: ^6.14.2 storybook: ^7.2.0 tamagui: 1.36.4 typescript: ^5.0.2 @@ -14893,6 +14901,30 @@ __metadata: languageName: node linkType: hard +"react-router-dom@npm:^6.14.2": + version: 6.14.2 + resolution: "react-router-dom@npm:6.14.2" + dependencies: + "@remix-run/router": 1.7.2 + react-router: 6.14.2 + peerDependencies: + react: ">=16.8" + react-dom: ">=16.8" + checksum: a53dbc566ecab7890b829d42d38553684f704803c1f615db1bd6aa2d71542c369a1a79e4385be31ae71a14b72ddbcd0d8b51188248c2bccd44e015050d1927df + languageName: node + linkType: hard + +"react-router@npm:6.14.2": + version: 6.14.2 + resolution: "react-router@npm:6.14.2" + dependencies: + "@remix-run/router": 1.7.2 + peerDependencies: + react: ">=16.8" + checksum: 7507bf5732b3a8ddbd901c2061216eebca73e194449bff58acc1445171e22bdda36b455b8af066e467748ebfb5875b3c0a565941c46af65c6f653a6ed0dc4fe4 + languageName: node + linkType: hard + "react-shallow-renderer@npm:^16.15.0": version: 16.15.0 resolution: "react-shallow-renderer@npm:16.15.0" From 90d6399d43839a6196f869a69d8e48124fddb394 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 9 Aug 2023 13:37:22 +0300 Subject: [PATCH 17/17] feat: implement react router add landing page on "/" --- src/App.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 35aeb708..44948ea8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,23 @@ import { TamaguiProvider } from 'tamagui' -import './App.css' +import { createBrowserRouter, RouterProvider } from 'react-router-dom' import { Provider as StatusProvider } from '@status-im/components' + +import './App.css' import config from '../tamagui.config' import LandingPage from './components/LayoutComponent/LandingPage' +const router = createBrowserRouter([ + { + path: '/', + element: , + }, +]) + function App() { return ( - + )