feat: use new is advanced state and reducer

src/pages/PairDevice/ConnectViaIP/ConnectViaIP.tsx

@@ -2,7 +2,7 @@ import { Separator, XStack, YStack } from 'tamagui'
 import { useState } from 'react'
 import { Button, Input, Text } from '@status-im/components'
 import { SettingsIcon, ClearIcon } from '@status-im/icons'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import InputsRow from './InputsRow'
 import { RootState } from '../../../redux/store'
@@ -11,8 +11,8 @@ import styles from './index.module.css'
 
 const ConnectViaIP = () => {
   const [apiToken, setApiToken] = useState('')
-  const [isAdvanced, setIsAdvanced] = useState(false)
   const {
+    isAdvanced,
     beaconPort,
     vcPort,
     nodeAddress,
@@ -21,13 +21,14 @@ const ConnectViaIP = () => {
     isBeaconSwitchOn,
     isVcSwitchOn,
   } = useSelector((state: RootState) => state.pairDevice)
+  const dispatch = useDispatch()
 
   const changeApiToken = (value: string) => {
     setApiToken(value)
   }
 
   const onAdvancedClickHandler = () => {
-    setIsAdvanced(state => !state)
+    dispatch({ type: 'pairDevice/setIsAdvanced', payload: !isAdvanced })
   }
 
   return (
@@ -52,7 +53,6 @@ const ConnectViaIP = () => {
             portType={VC}
             address={vcAddress}
             port={vcPort}
-            isAdvanced={isAdvanced}
             isSwitchOn={isVcSwitchOn}
           />
           <InputsRow
@@ -60,18 +60,11 @@ const ConnectViaIP = () => {
             portType={BEACON}
             address={beaconAddress}
             port={beaconPort}
-            isAdvanced={isAdvanced}
             isSwitchOn={isBeaconSwitchOn}
           />
         </YStack>
       ) : (
-        <InputsRow
-          addressType={NODE}
-          address={nodeAddress}
-          port={''}
-          portType={''}
-          isAdvanced={isAdvanced}
-        />
+        <InputsRow addressType={NODE} address={nodeAddress} port={''} portType={''} />
       )}
       <Separator borderColor={'#e3e3e3'} />
       <YStack space={'$2'}>

src/pages/PairDevice/ConnectViaIP/InputsRow.stories.tsx

@@ -1,16 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { withRouter } from 'storybook-addon-react-router-v6'
 
 import InputsRow from './InputsRow'
-import {
-  BEACON,
-  BEACON_PORT,
-  DEFAULT_ADDRESS,
-  NODE,
-  VALIDATOR_CLIENT,
-  VC,
-  VC_PORT,
-} from '../../../constants'
+import { DEFAULT_ADDRESS, NODE } from '../../../constants'
 
 const meta = {
   title: 'Pair Device/InputsRow',
@@ -19,7 +10,6 @@ const meta = {
     layout: 'centered',
   },
   tags: ['autodocs'],
-  decorators: [withRouter],
 } satisfies Meta<typeof InputsRow>
 
 export default meta
@@ -31,30 +21,5 @@ export const Node: Story = {
     address: DEFAULT_ADDRESS,
     port: '',
     portType: '',
-    isAdvanced: false,
-  },
-}
-
-export const ValidatorClient: Story = {
-  args: {
-    addressType: VALIDATOR_CLIENT,
-    portType: VC,
-    address: DEFAULT_ADDRESS,
-    port: VC_PORT,
-    isAdvanced: true,
-    isSwitchOn: true,
-    isChecked: true,
-  },
-}
-
-export const Beacon: Story = {
-  args: {
-    addressType: BEACON,
-    portType: BEACON,
-    address: DEFAULT_ADDRESS,
-    port: BEACON_PORT,
-    isAdvanced: true,
-    isSwitchOn: true,
-    isChecked: true,
   },
 }

src/pages/PairDevice/ConnectViaIP/InputsRow.tsx

@@ -11,22 +11,16 @@ import styles from './index.module.css'
 type InputsRowProps = {
   addressType: string
   portType: string
-  isAdvanced: boolean
   address: string
   port: string
   isSwitchOn?: boolean
   isChecked?: boolean
 }
 
-const InputsRow = ({
-  isAdvanced,
-  addressType,
-  portType,
-  address,
-  port,
-  isSwitchOn,
-}: InputsRowProps) => {
-  const { beaconPort, vcPort, isNodeSwitchOn } = useSelector((state: RootState) => state.pairDevice)
+const InputsRow = ({ addressType, portType, address, port, isSwitchOn }: InputsRowProps) => {
+  const { isAdvanced, beaconPort, vcPort, isNodeSwitchOn } = useSelector(
+    (state: RootState) => state.pairDevice,
+  )
   const dispatch = useDispatch()
   const isSwitchOnResult = isAdvanced ? isSwitchOn : isNodeSwitchOn
   const switchStyle = isSwitchOnResult