Merge pull request #24 from nimbus-gui/rd.fix-sync-cards-and-passwords

Fix sync cards and passwords

public/icons/pepper.svg

@@ -0,0 +1,6 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Emoji">
+<path id="Vector" d="M1.3987 11.1058C3.04483 11.3285 4.58256 10.4489 5.93346 8.70235C7.55333 6.60774 7.61662 3.44762 7.61662 3.04341C7.61662 2.6392 11.4239 1.80815 11.3196 5.06446C11.1748 9.59 8.81839 13.531 4.61488 13.9231C2.60115 14.1111 1.35662 13.548 0.781658 12.9753C-0.12388 12.0735 0.528848 10.9882 1.3987 11.1058Z" fill="#DA2F47"/>
+<path id="Vector_2" d="M10.3201 2.3466C10.3888 1.68208 10.3467 0.829196 10.0687 0.384969C9.69467 -0.212857 8.57706 0.0757486 8.86723 0.430645C9.1904 0.826367 9.69366 1.34173 9.67548 2.10852C9.66067 2.10448 9.64687 2.09963 9.63172 2.09559C8.33367 1.74433 7.36922 2.6635 7.21909 3.29124C6.95584 4.3915 8.58749 3.52083 8.79452 4.00346C9.40719 5.43032 10.1084 4.06611 10.2767 4.52085C10.445 4.97558 11.6559 6.26016 11.6559 4.77792C11.6559 3.56125 11.2546 2.79608 10.3201 2.3466Z" fill="#77B255"/>
+</g>
+</svg>

src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader/KeyGenerationSyncCard.tsx

@@ -1,7 +1,6 @@
 import { Stack, XStack, YStack } from 'tamagui'
-import { ClearIcon } from '@status-im/icons'
+import { InfoBadgeIcon } from '@status-im/icons'
 import { Text } from '@status-im/components'
-import { useState } from 'react'
 
 import StandardGauge from '../../../../components/Charts/StandardGauge'
 import BorderBox from '../../../../components/General/BorderBox'
@@ -15,16 +14,6 @@ type KeyGenerationSyncCardProps = {
 }
 
 const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyncCardProps) => {
-  const [isOpen, setIsOpen] = useState(true)
-
-  const closeCardHanlder = () => {
-    setIsOpen(false)
-  }
-
-  if (isOpen === false) {
-    return null
-  }
-
   return (
     <BorderBox style={{ borderRadius: '10.1px', borderWidth: '0.5px' }}>
       <XStack space={'$2'} alignItems="center">
@@ -59,12 +48,7 @@ const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyn
             {formatNumbersWithComa(synced)} / {formatNumbersWithComa(total)}
           </Text>
         </YStack>
-        <ClearIcon
+        <InfoBadgeIcon size={20} color="#A1ABBD" style={{ cursor: 'pointer' }} />
-          size={20}
-          color="#A1ABBD"
-          onClick={closeCardHanlder}
-          style={{ cursor: 'pointer' }}
-        />
       </XStack>
     </BorderBox>
   )

src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles.tsx

@@ -50,6 +50,16 @@ const KeystoreFiles = () => {
     return '*'.repeat(passwordLength)
   }
 
+  const clearEncryptedPasswordHandler = () => {
+    setEncryptedPassword('')
+    setDisplayEncryptedPassword('')
+  }
+
+  const clearConfirmEncryptedPasswordHandler = () => {
+    setConfirmEncryptedPassword('')
+    setDisplayConfirmEncryptedPassword('')
+  }
+
   return (
     <YStack space={'$4'}>
       <XStack space={'$2'} style={{ justifyContent: 'space-between', width: '100%' }}>
@@ -65,7 +75,7 @@ const KeystoreFiles = () => {
                   size={16}
                   color="#A1ABBD"
                   style={{ cursor: 'pointer' }}
-                  onClick={() => setEncryptedPassword('')}
+                  onClick={clearEncryptedPasswordHandler}
                 />
               }
               error={encryptedPasswordError}
@@ -84,7 +94,7 @@ const KeystoreFiles = () => {
                   size={16}
                   color="#A1ABBD"
                   style={{ cursor: 'pointer' }}
-                  onClick={() => setConfirmEncryptedPassword('')}
+                  onClick={clearConfirmEncryptedPasswordHandler}
                 />
               }
               error={confirmEncryptedPasswordError}

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx

@@ -1,5 +1,5 @@
 import { Stack, XStack, YStack } from 'tamagui'
-import { ClearIcon } from '@status-im/icons'
+import { InfoBadgeIcon } from '@status-im/icons'
 import { Text } from '@status-im/components'
 
 import StandardGauge from '../../../../components/Charts/StandardGauge'
@@ -48,7 +48,7 @@ const ConsensusGaugeCard = ({ synced, total, title, color }: ConsensusGaugeCardP
             {formatNumbersWithComa(synced)} / {formatNumbersWithComa(total)}
           </Text>
         </YStack>
-        <ClearIcon size={20} color="#A1ABBD" />
+        <InfoBadgeIcon size={20} color="#A1ABBD" />
       </XStack>
     </BorderBox>
   )

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

@@ -1,5 +1,5 @@
 import { XStack, YStack } from 'tamagui'
-import { InfoIcon } from '@status-im/icons'
+import { InfoBadgeIcon } from '@status-im/icons'
 import { Avatar, Text } from '@status-im/components'
 
 const PairedDeviceCard = () => {
@@ -14,7 +14,12 @@ const PairedDeviceCard = () => {
       alignItems={'center'}
     >
       <XStack space={'$3'} alignItems={'center'}>
-        <Avatar backgroundColor="pink" size={32} type="user" name="RP" />
+        <Avatar
+          backgroundColor="pink"
+          type="icon"
+          size={32}
+          icon={<img src={'/icons/pepper.svg'} alt="pepper" />}
+        />
         <YStack>
           <Text size={13} color="#647084">
             Paired Device
@@ -24,7 +29,7 @@ const PairedDeviceCard = () => {
           </Text>
         </YStack>
       </XStack>
-      <InfoIcon size={20} color="#A1ABBD" cursor={'pointer'} />
+      <InfoBadgeIcon size={20} color="#A1ABBD" cursor={'pointer'} />
     </XStack>
   )
 }