fix: only show network badge for non mainnet, adjust home position, ref

LEA-1815

apps/mobile/src/components/headers/components/header-options.tsx

@@ -1,4 +1,3 @@
-import { NetworkBadge } from '@/features/settings/network-badge';
 import { AppRoutes } from '@/routes';
 import { TestId } from '@/shared/test-id';
 import { useSettings } from '@/store/settings/settings';
@@ -15,7 +14,6 @@ import {
 } from '@leather.io/ui/native';
 
 export function HeaderOptions() {
-  const { networkPreference } = useSettings();
   const router = useRouter();
   const { changePrivacyModePreference, privacyModePreference } = useSettings();
 
@@ -25,7 +23,6 @@ export function HeaderOptions() {
 
   return (
     <Box alignItems="center" flexDirection="row" justifyContent="center">
-      {networkPreference.id !== 'mainnet' && <NetworkBadge />}
       <TouchableOpacity
         p="2"
         onPress={() => onUpdatePrivacyMode()}

apps/mobile/src/components/headers/home-header.tsx

@@ -1,7 +1,21 @@
+import { NetworkBadge } from '@/features/settings/network-badge';
+
+import { Box } from '@leather.io/ui/native';
+
 import { HeaderLeatherLogo } from './components/header-leather-logo';
 import { HeaderOptions } from './components/header-options';
 import { HeaderLayout } from './header.layout';
 
 export function HomeHeader() {
-  return <HeaderLayout leftElement={<HeaderLeatherLogo />} rightElement={<HeaderOptions />} />;
+  return (
+    <HeaderLayout
+      leftElement={
+        <Box flexDirection="row" alignItems="center">
+          <HeaderLeatherLogo />
+          <NetworkBadge px="0" ml="-1" />
+        </Box>
+      }
+      rightElement={<HeaderOptions />}
+    />
+  );
 }

apps/mobile/src/features/settings/network-badge.tsx

@@ -3,13 +3,14 @@ import { useSettings } from '@/store/settings/settings';
 import { useLingui } from '@lingui/react';
 import { useRouter } from 'expo-router';
 
-import { Badge } from '@leather.io/ui/native';
+import { Badge, PressableProps } from '@leather.io/ui/native';
 
-export function NetworkBadge() {
+interface NetworkBadgeProps extends PressableProps {}
+export function NetworkBadge(props: NetworkBadgeProps) {
   const router = useRouter();
   const { i18n } = useLingui();
   const { networkPreference } = useSettings();
-
+  if (networkPreference.id === 'mainnet') return null;
   return (
     <Badge
       variant="default"
@@ -20,6 +21,7 @@ export function NetworkBadge() {
         message: '{network}',
         values: { network: networkPreference.name },
       })}
+      {...props}
     />
   );
 }