Merge branch 'main' into hn.line-chart

package.json

@@ -30,6 +30,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": {

src/App.tsx

@@ -1,18 +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'
 
-import config from '../tamagui.config'
- 
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <LandingPage />,
+  },
+])
+
 function App() {
   return (
     <TamaguiProvider config={config}>
       <StatusProvider>
-        <LandingPage />
-   
+        <RouterProvider router={router} />
       </StatusProvider>
     </TamaguiProvider>
   )

src/components/BackgroundImage.tsx

@@ -1,11 +1,22 @@
-import { Stack, styled } from 'tamagui'
+import { Stack } from 'tamagui'
 
-const BackgroundImage = styled(Stack, {
-  style: { boxShadow: 'inset 100px 0px 100px white' },
-  width: '650px',
-  height: '91.9vh',
-  borderTopRightRadius: '25px',
-  borderBottomRightRadius: '25px',
-})
+type BackgroundImageProps = {
+  background: string
+}
+
+const BackgroundImage = ({ background }: BackgroundImageProps) => {
+  return (
+    <Stack
+      style={{
+        boxShadow: 'inset 100px 0px 100px white',
+        width: '650px',
+        height: '91.9vh',
+        borderTopRightRadius: '25px',
+        borderBottomRightRadius: '25px',
+        background: `url(${background}) no-repeat`,
+      }}
+    />
+  )
+}
 
 export default BackgroundImage

src/components/HealthInfoSection.tsx

@@ -0,0 +1,62 @@
+import { YStack } from 'tamagui'
+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 // GB
+  maxStorage: number // GB
+  usedRamMemory: number // GB
+  maxRamMemory: number // GB
+  cpuClockRate: number // GHz
+  networkLatency: number // milliseconds
+}
+
+const HealthInfoSection = (props: HealthInfoSectionProps) => {
+  const { usedStorage, maxStorage, usedRamMemory, maxRamMemory, cpuClockRate, networkLatency } =
+    props
+
+  const usedStoragePercentage = (usedStorage / maxStorage) * 100
+  const usedRamMemoryPercentage = (usedRamMemory / maxRamMemory) * 100
+  const cpuClockRatePercentage = cpuClockRate > 2.4 ? 100 : 0
+  const networkLatencyPercentage = networkLatency > 100 ? 100 : 0
+
+  return (
+    <YStack space={'$2'}>
+      <StatusIconText
+        percentage={usedStoragePercentage}
+        threshold={80}
+        goodText={GOOD_STORAGE_TEXT}
+        badText={BAD_STORAGE_TEXT}
+      />
+      <StatusIconText
+        percentage={cpuClockRatePercentage}
+        threshold={50}
+        goodText={GOOD_CPU_CLOCK_RATE_TEXT}
+        badText={BAD_CPU_CLOCK_RATE_TEXT}
+      />
+      <StatusIconText
+        percentage={usedRamMemoryPercentage}
+        threshold={80}
+        goodText={GOOD_RAM_MEMORY_TEXT}
+        badText={BAD_RAM_MEMORY_TEXT}
+      />
+      <StatusIconText
+        percentage={networkLatencyPercentage}
+        threshold={50}
+        goodText={GOOD_NETWORK_TEXT}
+        badText={BAD_NETWORK_TEXT}
+      />
+    </YStack>
+  )
+}
+
+export default HealthInfoSection

src/components/IconText.tsx

@@ -14,8 +14,8 @@ const IconText = ({ icon, children, ...props }: IconTextProps) => {
       }}
       space={'$2'}
     >
-      <Icon source={icon} width={16} height={16} />
-      <Paragraph {...props} color={'#000000'} style={{ fontWeight: 'bold' }}>
+      <Icon source={icon} />
+      <Paragraph {...props} color={'#000000'} fontWeight={'bold'}>
         {children}
       </Paragraph>
     </XStack>

src/components/ShadowBox.tsx

@@ -1,9 +1,23 @@
-import { Stack, styled } from 'tamagui'
+import { ReactNode } from 'react'
+import { Stack } from 'tamagui'
 
-const ShadowBox = styled(Stack, {
-  style: { boxSizing: 'border-box', boxShadow: '0px 4px 20px 0px rgba(9, 16, 28, 0.08)' },
-  borderRadius: '16px',
-  width: '100%',
-})
+type ShadowBoxProps = {
+  children: ReactNode
+}
+
+const ShadowBox = ({ children }: ShadowBoxProps) => {
+  return (
+    <Stack
+      style={{
+        boxSizing: 'border-box',
+        borderRadius: '16px',
+        boxShadow: '0px 4px 20px 0px rgba(9, 16, 28, 0.08)',
+        width: '100%',
+      }}
+    >
+      {children}
+    </Stack>
+  )
+}
 
 export default ShadowBox

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 <IconText icon={icon}>{text}</IconText>
+}
+
+export default StatusIconText

src/constants.ts

@@ -0,0 +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 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.'
+
+export const BAD_STORAGE_TEXT =
+  'Your storage is running low as required for additional node services.'
+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.'

yarn.lock

@@ -4050,6 +4050,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"
@@ -13723,6 +13730,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
@@ -15038,6 +15046,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"