feat: move and rename sync card

component and story

src/components/General/SyncStatusCard.stories.ts

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import KeyGenerationSyncCard from './KeyGenerationSyncCard'
+import SyncStatusCard from './SyncStatusCard'
 
 const meta = {
-  title: 'ValidatorOnboarding/KeyGenerationSyncCard',
-  component: KeyGenerationSyncCard,
+  title: 'General/SyncStatusCard',
+  component: SyncStatusCard,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof KeyGenerationSyncCard>
+} satisfies Meta<typeof SyncStatusCard>
 
 export default meta
 type Story = StoryObj<typeof meta>

src/components/General/SyncStatusCard.tsx

@@ -2,18 +2,18 @@ import { Stack, XStack, YStack } from 'tamagui'
 import { InfoBadgeIcon } from '@status-im/icons'
 import { Text } from '@status-im/components'
 
-import StandardGauge from '../../../../components/Charts/StandardGauge'
-import BorderBox from '../../../../components/General/BorderBox'
-import { formatNumbersWithComa } from '../../../../utilities'
+import StandardGauge from '../Charts/StandardGauge'
+import BorderBox from './BorderBox'
+import { formatNumbersWithComa } from '../../utilities'
 
-type KeyGenerationSyncCardProps = {
+type SyncStatusCardProps = {
   synced: number
   total: number
   title: string
   color: string
 }
 
-const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyncCardProps) => {
+const SyncStatusCard = ({ synced, total, title, color }: SyncStatusCardProps) => {
   return (
     <BorderBox style={{ borderRadius: '10.1px', borderWidth: '0.5px' }}>
       <XStack space={'$2'} alignItems="center">
@@ -54,4 +54,4 @@ const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyn
   )
 }
 
-export default KeyGenerationSyncCard
+export default SyncStatusCard

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

@@ -1,6 +1,6 @@
 import { XStack } from 'tamagui'
 
-import KeyGenerationSyncCard from './KeyGenerationSyncCard'
+import SyncStatusCard from '../../../../components/General/SyncStatusCard'
 import KeyGenerationTitle from '../KeyGenerationTitle'
 
 const KeyGenerationHeader = () => {
@@ -8,13 +8,13 @@ const KeyGenerationHeader = () => {
     <XStack style={{ width: '100%', justifyContent: 'space-between' }}>
       <KeyGenerationTitle />
       <XStack space={'$2'}>
-        <KeyGenerationSyncCard
+        <SyncStatusCard
           synced={123.524}
           total={172.503}
           title="Execution Sync Status"
           color="#2a4af5"
         />
-        <KeyGenerationSyncCard
+        <SyncStatusCard
           synced={123.524}
           total={172.503}
           title="Consensus Sync Status"