From 04b29d9e841f4ab8e3cd57080f24bbab3a44b19d Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 11 Aug 2023 10:13:05 +0300
Subject: [PATCH 1/5] Implement memory health card

---
 src/components/DeviceMemoryHealth.tsx | 70 +++++++++++++++++++++++++++
 src/components/LandingPage.tsx        |  2 +
 2 files changed, 72 insertions(+)
 create mode 100644 src/components/DeviceMemoryHealth.tsx

diff --git a/src/components/DeviceMemoryHealth.tsx b/src/components/DeviceMemoryHealth.tsx
new file mode 100644
index 00000000..b5857e22
--- /dev/null
+++ b/src/components/DeviceMemoryHealth.tsx
@@ -0,0 +1,70 @@
+import StandartLineChart from './StandardLineChart'
+import ShadowBox from './ShadowBox'
+import IconText from './IconText'
+import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+
+type DataPoint = {
+  x: number
+  y: number
+}
+
+type ChartData = {
+  id: string
+  color: string
+  data: DataPoint[]
+}
+
+type DeviceMemoryProps = {
+  load: number[]
+}
+const DeviceMemory: React.FC<DeviceMemoryProps> = ({ load }) => {
+  const chartData: ChartData[] = [
+    {
+      id: 'cpu',
+      color: '#8DC6BC',
+      data: load.map((yValue, index: number) => ({
+        x: index + 1,
+        y: yValue,
+      })),
+    },
+  ]
+  const currentLoad =
+    chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
+
+  const message = currentLoad < 80 ? 'Good' : 'Poor'
+
+  return (
+    <ShadowBox boxStyle={{ width: '284px', height: '136px' }}>
+      <YStack>
+        <XStack
+          justifyContent="space-between"
+          style={{
+            padding: '8px 16px',
+            position: 'relative', // Make XStack a positioning context
+          }}
+        >
+          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
+            <StandartLineChart data={chartData} />
+          </div>
+          <YStack space={'$3'}>
+            <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
+              Memory
+            </Paragraph>
+            <Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
+              {currentLoad} GB
+            </Paragraph>
+          </YStack>
+        </XStack>
+        <Separator borderColor={'#e3e3e3'} />
+        <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
+          <IconText icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}>
+            {message}
+          </IconText>
+          {/* <Text color={'#E95460'}>This is additional text</Text>  */}
+        </XStack>
+      </YStack>
+    </ShadowBox>
+  )
+}
+
+export default DeviceMemory
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index d6bc3dc6..25286f31 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -1,6 +1,7 @@
 import LayoutComponent from './LayoutComponent'
 import './LandingPage.css'
 import QuickStartBar from './QuickStartBar'
+import DeviceMemory from './DeviceMemoryHealth'
 
 function LandingPage() {
   return (
@@ -95,6 +96,7 @@ function Content() {
           Discover Nodes
         </button>
       </article>
+      <DeviceMemory load={[12,13,14,14,2,1,3]}></DeviceMemory>
     </div>
   )
 }

From caf44695565481877f7e74c1ae13d4fc8ebd7c14 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 11 Aug 2023 14:16:20 +0300
Subject: [PATCH 2/5] Add maxMemory argument

---
 src/components/DeviceMemoryHealth.tsx | 9 ++++++---
 src/components/LandingPage.tsx        | 2 +-
 src/components/StandardLineChart.tsx  | 7 +++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/DeviceMemoryHealth.tsx b/src/components/DeviceMemoryHealth.tsx
index b5857e22..c1cd0f22 100644
--- a/src/components/DeviceMemoryHealth.tsx
+++ b/src/components/DeviceMemoryHealth.tsx
@@ -12,20 +12,23 @@ type ChartData = {
   id: string
   color: string
   data: DataPoint[]
+  maxMemory?: number
 }
 
 type DeviceMemoryProps = {
-  load: number[]
+  currentMemory: number[]
+  maxMemory?: number
 }
-const DeviceMemory: React.FC<DeviceMemoryProps> = ({ load }) => {
+const DeviceMemory = ({ currentMemory, maxMemory }: DeviceMemoryProps) => {
   const chartData: ChartData[] = [
     {
       id: 'cpu',
       color: '#8DC6BC',
-      data: load.map((yValue, index: number) => ({
+      data: currentMemory.map((yValue, index: number) => ({
         x: index + 1,
         y: yValue,
       })),
+      maxMemory: maxMemory,
     },
   ]
   const currentLoad =
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 25286f31..dd750b00 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -96,7 +96,7 @@ function Content() {
           Discover Nodes
         </button>
       </article>
-      <DeviceMemory load={[12,13,14,14,2,1,3]}></DeviceMemory>
+      <DeviceMemory currentMemory={[12,32,21,2,3,64]} maxMemory={64}/>
     </div>
   )
 }
diff --git a/src/components/StandardLineChart.tsx b/src/components/StandardLineChart.tsx
index 43aee4ee..5662bee6 100644
--- a/src/components/StandardLineChart.tsx
+++ b/src/components/StandardLineChart.tsx
@@ -7,12 +7,15 @@ interface DataPoint {
 interface ChartData {
   id: string
   data: DataPoint[]
+  maxMemory?: number
 }
 
 interface StandartLineChartProps {
   data: ChartData[]
 }
 const StandartLineChart = ({ data }: StandartLineChartProps) => {
+  const maxMemory = data[0].maxMemory || 'auto'
+
   return (
     <ResponsiveLine
       data={data}
@@ -20,8 +23,8 @@ const StandartLineChart = ({ data }: StandartLineChartProps) => {
       xScale={{ type: 'linear', min: 0, max: data[0].data.length }}
       yScale={{
         type: 'linear',
-        min: 'auto',
-        max: 'auto',
+        min: 0,
+        max: maxMemory,
         stacked: true,
         reverse: false,
       }}

From eed7a6d447eeedbc3795be75231768a4d6541c14 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 11 Aug 2023 14:20:11 +0300
Subject: [PATCH 3/5] Remove imports

---
 src/components/LandingPage.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index dd750b00..d6bc3dc6 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -1,7 +1,6 @@
 import LayoutComponent from './LayoutComponent'
 import './LandingPage.css'
 import QuickStartBar from './QuickStartBar'
-import DeviceMemory from './DeviceMemoryHealth'
 
 function LandingPage() {
   return (
@@ -96,7 +95,6 @@ function Content() {
           Discover Nodes
         </button>
       </article>
-      <DeviceMemory currentMemory={[12,32,21,2,3,64]} maxMemory={64}/>
     </div>
   )
 }

From 6b052c9b170853f38dc07506fec319212fcb239d Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 11 Aug 2023 14:29:06 +0300
Subject: [PATCH 4/5] tweaks

---
 src/components/DeviceMemoryHealth.tsx | 4 ++--
 src/components/LandingPage.tsx        | 2 ++
 src/components/StandardLineChart.tsx  | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/DeviceMemoryHealth.tsx b/src/components/DeviceMemoryHealth.tsx
index c1cd0f22..cbc410ed 100644
--- a/src/components/DeviceMemoryHealth.tsx
+++ b/src/components/DeviceMemoryHealth.tsx
@@ -12,7 +12,7 @@ type ChartData = {
   id: string
   color: string
   data: DataPoint[]
-  maxMemory?: number
+  maxValue?: number
 }
 
 type DeviceMemoryProps = {
@@ -28,7 +28,7 @@ const DeviceMemory = ({ currentMemory, maxMemory }: DeviceMemoryProps) => {
         x: index + 1,
         y: yValue,
       })),
-      maxMemory: maxMemory,
+      maxValue: maxMemory,
     },
   ]
   const currentLoad =
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index d6bc3dc6..19003acf 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -1,6 +1,7 @@
 import LayoutComponent from './LayoutComponent'
 import './LandingPage.css'
 import QuickStartBar from './QuickStartBar'
+import DeviceMemory from './DeviceMemoryHealth'
 
 function LandingPage() {
   return (
@@ -14,6 +15,7 @@ function LandingPage() {
 function Content() {
   return (
     <div className="container-inner landing-page">
+      <DeviceMemory currentMemory={[12,24,14,12,4,60]} maxMemory={65}/>
       <header>
         <div>
           <div>
diff --git a/src/components/StandardLineChart.tsx b/src/components/StandardLineChart.tsx
index 5662bee6..4f3efe1b 100644
--- a/src/components/StandardLineChart.tsx
+++ b/src/components/StandardLineChart.tsx
@@ -7,14 +7,14 @@ interface DataPoint {
 interface ChartData {
   id: string
   data: DataPoint[]
-  maxMemory?: number
+  maxValue?: number
 }
 
 interface StandartLineChartProps {
   data: ChartData[]
 }
 const StandartLineChart = ({ data }: StandartLineChartProps) => {
-  const maxMemory = data[0].maxMemory || 'auto'
+  const maxMemory = data[0].maxValue || 'auto'
 
   return (
     <ResponsiveLine

From 263c0b6a6f68ca0a0aa7e9c5ffff99c630b9db2a Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 11 Aug 2023 14:52:28 +0300
Subject: [PATCH 5/5] Use status shadow box

---
 src/components/DeviceMemoryHealth.tsx  | 5 +++--
 src/components/DeviceNetworkHealth.tsx | 5 +++--
 src/components/LandingPage.tsx         | 1 +
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/DeviceMemoryHealth.tsx b/src/components/DeviceMemoryHealth.tsx
index cbc410ed..c9e3e916 100644
--- a/src/components/DeviceMemoryHealth.tsx
+++ b/src/components/DeviceMemoryHealth.tsx
@@ -1,7 +1,8 @@
 import StandartLineChart from './StandardLineChart'
-import ShadowBox from './ShadowBox'
+
 import IconText from './IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+import { Shadow as ShadowBox } from '@status-im/components'
 
 type DataPoint = {
   x: number
@@ -37,7 +38,7 @@ const DeviceMemory = ({ currentMemory, maxMemory }: DeviceMemoryProps) => {
   const message = currentLoad < 80 ? 'Good' : 'Poor'
 
   return (
-    <ShadowBox boxStyle={{ width: '284px', height: '136px' }}>
+    <ShadowBox style={{ width: '284px', height: '136px' }}>
       <YStack>
         <XStack
           justifyContent="space-between"
diff --git a/src/components/DeviceNetworkHealth.tsx b/src/components/DeviceNetworkHealth.tsx
index 10f8481d..21ff6e71 100644
--- a/src/components/DeviceNetworkHealth.tsx
+++ b/src/components/DeviceNetworkHealth.tsx
@@ -1,7 +1,8 @@
 import StandartLineChart from './StandardLineChart'
-import ShadowBox from './ShadowBox'
+
 import IconText from './IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+import { Shadow as ShadowBox } from '@status-im/components'
 
 type DataPoint = {
   x: number
@@ -43,7 +44,7 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
   const message = currentLoad < 80 ? 'Good' : 'Poor'
 
   return (
-    <ShadowBox boxStyle={{ width: '284px', height: '136px' }}>
+    <ShadowBox style={{ width: '284px', height: '136px' }}>
       <YStack>
         <XStack
           justifyContent="space-between"
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 532641c9..4ae340cc 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -2,6 +2,7 @@ import LayoutComponent from './LayoutComponent'
 import './LandingPage.css'
 import QuickStartBar from './QuickStartBar'
 import DeviceMemory from './DeviceMemoryHealth'
+import DeviceNetworkHealth from './DeviceNetworkHealth'
 
 function LandingPage() {
   return (