Merge branch 'hn.validator-onboarding' of https://github.com/nimbus-gui/nimbus-gui into hn.validator-onboarding

src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.stories.tsx

@@ -17,5 +17,9 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {},
+  args: {
+    valueOf: () => {
+      return true
+    },
+  },
 }

src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx

@@ -1,8 +1,13 @@
+import React, { useState } from 'react'
 import { XStack, YStack } from 'tamagui'
 import { ClearIcon } from '@status-im/icons'
 import { Avatar, Text } from '@status-im/components'
 
-const PairedDeviceCard = () => {
+const PairedDeviceCard = (isVisibleState: boolean) => {
+  const [isVisible, setIsVisible] = useState(isVisibleState)
+
+  if (!isVisible) return null
+
   return (
     <XStack
       space={'$7'}
@@ -24,7 +29,12 @@ const PairedDeviceCard = () => {
           </Text>
         </YStack>
       </XStack>
-      <ClearIcon size={20} color="#A1ABBD" />
+      <ClearIcon
+        size={20}
+        color="#A1ABBD"
+        cursor={'pointer'}
+        onClick={() => setIsVisible(false)} 
+      />
     </XStack>
   )
 }

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx

@@ -12,7 +12,7 @@ const ValidatorSetup = () => {
         <Text size={27} weight={'semibold'}>
           Validator Setup
         </Text>
-        <PairedDeviceCard />
+        <PairedDeviceCard isVisibleState={true} />
       </XStack>
 
       <YStack>