feat(pages): create `AddValidatorButton.tsx`, `DashboardDiamondCard.tsx` &` NodesList.tsx`

src/pages/Dashboard/DashboardSidebar/AddValidatorButton.tsx

@@ -0,0 +1,31 @@
+import { Text } from '@status-im/components'
+import { XStack, YStack } from 'tamagui'
+import { AddSmallIcon } from '@status-im/icons'
+const AddValidatorButton = () => {
+  return (
+    <YStack
+      backgroundColor={'#757e8c'}
+      style={{
+        padding: '8px 12px',
+        borderRadius: '16px',
+        flexGrow: '1',
+        height: 'max-fit',
+      }}
+    >
+      <XStack
+        style={{ marginBottom: '8px' }}
+        alignContent="center"
+        alignItems="center"
+        justifyContent="center"
+        space="$2"
+      >
+        <AddSmallIcon size={20} color="#fff"></AddSmallIcon>
+        <Text size={19} color={'#FFF'}>
+          Add Validator
+        </Text>
+      </XStack>
+    </YStack>
+  )
+}
+
+export default AddValidatorButton

src/pages/Dashboard/DashboardSidebar/DashboardDiamondCard.tsx

@@ -0,0 +1,38 @@
+import { Text } from '@status-im/components'
+import { Stack, XStack, YStack } from 'tamagui'
+
+const DashboardDiamondCard = () => {
+  return (
+    <YStack
+      backgroundColor={'#2A4AF5'}
+      style={{
+        padding: '8px 12px',
+        borderRadius: '16px',
+        flexGrow: '1',
+        height: 'max-fit',
+      }}
+    >
+      <Stack style={{ marginBottom: '8px' }}>
+        <Text size={15} weight={'semibold'} color={'#FFF'}>
+          💎 Diamond Hands
+        </Text>
+      </Stack>
+      <Text size={27} weight={'semibold'} color={'#FFF'}>
+        $0.00
+      </Text>
+      <XStack space={'$1.5'} alignItems={'center'}>
+        <Text size={13} color={'#bac7fb'}>
+          0%
+        </Text>
+        <Text size={13} color={'#bac7fb'}>
+          .
+        </Text>
+        <Text size={13} color={'#bac7fb'}>
+          $0
+        </Text>
+      </XStack>
+    </YStack>
+  )
+}
+
+export default DashboardDiamondCard

src/pages/Dashboard/DashboardSidebar/NodesList.tsx

@@ -0,0 +1,72 @@
+import { Text } from '@status-im/components'
+import { DragIcon, StatusIcon, ChevronRightIcon } from '@status-im/icons'
+import { Stack, Tooltip, XStack, YStack } from 'tamagui'
+import Icon from '../../../components/General/Icon'
+
+const NodesList = () => {
+  return (
+    <YStack backgroundColor={'#fff'} padding="18px" borderRadius={25}>
+      <Text size={15} color="#647084" weight="semibold">
+        Nodes
+      </Text>
+      <YStack padding="$2" space="$3">
+        {Array.from(Array(3).keys()).map(e => {
+          return (
+            <XStack
+              alignContent="center"
+              alignItems="center"
+              justifyContent="space-between"
+              width={'250px'}
+              backgroundColor={'#FAFBFC'}
+              borderRadius={15}
+            >
+              <XStack
+                space="$3"
+                alignContent="center"
+                alignItems="center"
+                padding="8px"
+              >
+                <DragIcon size={20} color="#09101C"></DragIcon>
+                <StatusIcon size={20}></StatusIcon>
+                <YStack>
+                  <Text size={15} weight="semibold">
+                    Nickname {e}
+                  </Text>
+                  <Text size={13} color="#647084">
+                    Validators
+                  </Text>
+                </YStack>
+              </XStack>
+
+              <Tooltip>
+                <Tooltip.Trigger>
+                  <Stack padding="3px">
+                    <ChevronRightIcon size={20}></ChevronRightIcon>
+                  </Stack>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <XStack alignContent="center" alignItems="center" space="$1">
+                    <Icon
+                      src="icons/tooltipIcon.png"
+                      width={22}
+                      height={22}
+                    ></Icon>
+                    <YStack space="$2">
+                      <Text size={15} weight="semibold">
+                        Client Name
+                      </Text>
+                      <Text size={15} weight="semibold">
+                        Host Name
+                      </Text>
+                    </YStack>
+                  </XStack>
+                </Tooltip.Content>
+              </Tooltip>
+            </XStack>
+          )
+        })}
+      </YStack>
+    </YStack>
+  )
+}
+export default NodesList