From 0555e52bdb72ab9f923d848cae90c874f5ea2376 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 16 Aug 2023 13:40:23 +0300
Subject: [PATCH 1/2] Implement settings section

---
 src/pages/PairDevice/PairDevice.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index fa7b8098..ad4544bb 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -2,7 +2,7 @@ import { Separator, XStack, YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import SyncStatus from './SyncStatus'
 import NimbusLogo from '../../components/Logos/NimbusLogo'
-import { Button, Tag } from '@status-im/components'
+import { Button, Checkbox, Tag, Text } from '@status-im/components'
 import PairIcon from '../../components/Icons/PairIcon'
 import CreateIcon from '../../components/Icons/CreateIcon'
 import NodeIcon from '../../components/Icons/NodeIcon'
@@ -26,6 +26,22 @@ const PairDevice = () => {
         <Separator borderColor={'#e3e3e3'} />
         <SyncStatus isPairing={true} timer={'00:12'} isAwaitingPairing={true} />
         <Separator borderColor={'#e3e3e3'} />
+        <Text size={19} weight={'semibold'} color="#09101C">
+          Settings
+        </Text>
+        <XStack space={'$4'}>
+          <Checkbox
+            id="port-checkbox"
+            variant="outline"
+            selected={false}
+            onCheckedChange={() => {
+              console.log('checked')
+            }}
+            size={20}
+          />
+          <Text size={15}>Auto Connect Paired Device</Text>
+        </XStack>
+        <Separator borderColor={'#e3e3e3'} />
         <XStack>
           <Button icon={<NodeIcon />}>Continue</Button>
         </XStack>

From ed5fff1e699f8cfa371e1751c13be2d9114e0b0f Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 16 Aug 2023 13:46:34 +0300
Subject: [PATCH 2/2] Add functionality

---
 src/pages/PairDevice/PairDevice.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index 2b2af6aa..5ff729f3 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -7,9 +7,11 @@ import PairIcon from '../../components/Icons/PairIcon'
 import CreateIcon from '../../components/Icons/CreateIcon'
 import NodeIcon from '../../components/Icons/NodeIcon'
 import Titles from '../../components/General/Titles'
+import { useState } from 'react'
 
 const PairDevice = () => {
   const isPaired = false
+  const [autoChecked, setAutoChecked] = useState(false)
 
   return (
     <PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png">
@@ -37,9 +39,9 @@ const PairDevice = () => {
           <Checkbox
             id="port-checkbox"
             variant="outline"
-            selected={false}
-            onCheckedChange={() => {
-              console.log('checked')
+            selected={autoChecked}
+            onCheckedChange={v => {
+              setAutoChecked(v)
             }}
             size={20}
           />