Clear code and remove warnings

src/components/General/Icon.tsx

@@ -1,5 +1,4 @@
 import { Image } from '@status-im/components'
-import { Stack } from 'tamagui'
 
 export type IconProps = {
   src: string
@@ -10,7 +9,7 @@ export type IconProps = {
 
 const Icon = ({ src, width = 16, height = 16, onClick }: IconProps) => {
   return (
-    <Stack onClick={onClick} activeOpacity={0.7}>
+    <div onClick={onClick}>
       <Image
         src={src}
         source={{ uri: src }}
@@ -18,7 +17,7 @@ const Icon = ({ src, width = 16, height = 16, onClick }: IconProps) => {
         height={height}
         style={{ backgroundColor: 'transparent' }}
       />
-    </Stack>
+    </div>
   )
 }
 

src/pages/PairDevice/PairDevice.tsx

@@ -9,6 +9,7 @@ import NodeIcon from '../../components/Icons/NodeIcon'
 import Titles from '../../components/General/Titles'
 import { useState, useEffect } from 'react'
 import { v4 as uuidv4 } from 'uuid'
+import { convertSecondsToTimerFormat } from '../../utilities'
 
 const PairDevice = () => {
   const [autoChecked, setAutoChecked] = useState(false)
@@ -19,6 +20,7 @@ const PairDevice = () => {
   const [isPairing] = useState(true) // assuming starting as true for demo
   const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
   const [elapsedTime, setElapsedTime] = useState(0)
+  
   const resetTimer = () => {
     setElapsedTime(0)
     setIsAwaitingPairing(false)
@@ -31,7 +33,6 @@ const PairDevice = () => {
       timer = setInterval(() => {
         setElapsedTime(prevTime => prevTime + 1)
         if (elapsedTime >= 180) {
-          // 180 seconds = 3 minutes
           setIsAwaitingPairing(true)
         }
       }, 1000)
@@ -39,11 +40,8 @@ const PairDevice = () => {
 
     return () => clearInterval(timer)
   }, [isPairing, elapsedTime])
-  const convertSecondsToTimerFormat = (seconds: number) => {
-    const minutes = Math.floor(seconds / 60)
-    const remainingSeconds = seconds % 60
-    return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`
-  }
+
+
   return (
     <PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png">
       <YStack

src/pages/PairDevice/SyncStatus.tsx

@@ -41,18 +41,18 @@ const SyncStatus = ({ isPairing, timer, isAwaitingPairing, onResetTimer }: SyncS
         </Text>
       )}
       {isAwaitingPairing && (
-        <>
-          <InformationBox
-            message="No connection has been created to a Nimbus service for over 3 minutes. Please ensure that the generated pairing ID was input into the CLI. If you are unable to pair device, consider connect via IP.   "
-            variant="error"
-            icon={<Icon src={BlockIcon} />}
-          />
-          <XStack>
-            <Button icon={<Icon src={ConnectionIcon} />} size={40}>
-              Connect via IP
-            </Button>
-          </XStack>
-        </>
+        <InformationBox
+          message="No connection has been created to a Nimbus service for over 3 minutes. Please ensure that the generated pairing ID was input into the CLI. If you are unable to pair device, consider connect via IP.   "
+          variant="error"
+          icon={<Icon src={BlockIcon} />}
+        />
+      )}
+      {isAwaitingPairing && (
+        <XStack>
+          <Button icon={<Icon src={ConnectionIcon} />} size={40}>
+            Connect via IP
+          </Button>
+        </XStack>
       )}
     </YStack>
   )

src/utilities.ts

@@ -16,3 +16,9 @@
 export function assertUnreachable(value: never): never {
     throw new Error(`Unreachable case: ${value}`);
 }
+
+export const convertSecondsToTimerFormat = (seconds: number) => {
+    const minutes = Math.floor(seconds / 60)
+    const remainingSeconds = seconds % 60
+    return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`
+  }