Merge pull request #374 from getAlby/feat/btc-map-home

feat: bring btc map home

Author: im-adithya

app/(app)/bitcoin-map.js

@@ -0,0 +1,5 @@
+import { BitcoinMap } from "../../pages/BitcoinMap";
+
+export default function Page() {
+  return <BitcoinMap />;
+}

app/(app)/settings/bitcoin-map.js

@@ -17,6 +17,7 @@ import {
   PopiconsImageSolid as ImageIcon,
   PopiconsKeyboardSolid as KeyboardIcon,
   PopiconsLinkExternalSolid as LinkIcon,
+  PopiconsMapLine as MapLineIcon,
   PopiconsArrowDownLine as MoveDownIcon,
   PopiconsArrowUpLine as MoveUpIcon,
   PopiconsNotificationSquareSolid as NotificationIcon,
@@ -28,6 +29,7 @@ import {
   PopiconsReloadSolid as ResetIcon,
   PopiconsFullscreenSolid as ScanIcon,
   PopiconsSettingsMinimalSolid as SettingsIcon,
+  PopiconsSettingsMinimalLine as SettingsLineIcon,
   PopiconsShareSolid as ShareIcon,
   PopiconsLogoutSolid as SignOutIcon,
   PopiconsLoopSolid as SwapIcon,
@@ -72,6 +74,7 @@ interopIcon(HelpCircleIcon);
 interopIcon(ImageIcon);
 interopIcon(KeyboardIcon);
 interopIcon(LinkIcon);
+interopIcon(MapLineIcon);
 interopIcon(MoveDownIcon);
 interopIcon(MoveUpIcon);
 interopIcon(NotificationIcon);
@@ -83,6 +86,7 @@ interopIcon(RefreshIcon);
 interopIcon(ResetIcon);
 interopIcon(ScanIcon);
 interopIcon(SettingsIcon);
+interopIcon(SettingsLineIcon);
 interopIcon(ShareIcon);
 interopIcon(SignOutIcon);
 interopIcon(SwapIcon);
@@ -113,6 +117,7 @@ export {
   ImageIcon,
   KeyboardIcon,
   LinkIcon,
+  MapLineIcon,
   MoveDownIcon,
   MoveUpIcon,
   NotificationIcon,
@@ -124,6 +129,7 @@ export {
   ResetIcon,
   ScanIcon,
   SettingsIcon,
+  SettingsLineIcon,
   ShareIcon,
   SignOutIcon,
   SwapIcon,

components/Icons.tsx

@@ -1,19 +1,21 @@
-import { type NativeStackHeaderRightProps } from "@react-navigation/native-stack";
+import { type NativeStackHeaderItemProps } from "@react-navigation/native-stack";
 import { Stack } from "expo-router";
 import { type StackAnimationTypes } from "react-native-screens";
 
 type ScreenProps = {
   title: string;
-  right?: (props: NativeStackHeaderRightProps) => React.ReactNode;
+  left?: (props: NativeStackHeaderItemProps) => React.ReactNode;
+  right?: (props: NativeStackHeaderItemProps) => React.ReactNode;
   animation?: StackAnimationTypes;
 };
 
-function Screen({ title, animation, right }: ScreenProps) {
+function Screen({ title, animation, right, left }: ScreenProps) {
   return (
     <Stack.Screen
       options={{
         title,
         animation,
+        headerLeft: left ? left : undefined,
         headerRight: right ? right : undefined,
         headerShadowVisible: false,
       }}

components/Screen.tsx

@@ -12,7 +12,11 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import { ChevronUpIcon, SettingsIcon } from "~/components/Icons";
+import {
+  ChevronUpIcon,
+  MapLineIcon,
+  SettingsLineIcon,
+} from "~/components/Icons";
 import { Text } from "~/components/ui/text";
 
 import { LinearGradient } from "expo-linear-gradient";
@@ -67,14 +71,28 @@ export function Home() {
     <>
       <Screen
         title=""
-        right={() => (
+        left={() => (
           <TouchableOpacity
             onPressIn={() => {
               router.push("/settings");
             }}
+            className="-ml-4 px-6"
+          >
+            <SettingsLineIcon
+              className="text-muted-foreground"
+              width={24}
+              height={24}
+            />
+          </TouchableOpacity>
+        )}
+        right={() => (
+          <TouchableOpacity
+            onPressIn={() => {
+              router.push("/bitcoin-map");
+            }}
             className="-mr-4 px-6"
           >
-            <SettingsIcon
+            <MapLineIcon
               className="text-muted-foreground"
               width={24}
               height={24}

pages/settings/BitcoinMap.tsx pages/BitcoinMap.tsxpages/settings/BitcoinMap.tsx renamed to pages/BitcoinMap.tsx

@@ -6,7 +6,6 @@ import {
   FingerprintIcon,
   NotificationIcon,
   OnboardingIcon,
-  PinIcon,
   ResetIcon,
   SignOutIcon,
   ThemeIcon,
@@ -108,14 +107,6 @@ export function Settings() {
             </Text>
           </TouchableOpacity>
         </Link>
-        <Link href="/settings/bitcoin-map" asChild>
-          <TouchableOpacity className="flex flex-row gap-4 items-center">
-            <PinIcon className="text-muted-foreground" />
-            <Text className="text-foreground font-medium2 text-xl">
-              Bitcoin Map
-            </Text>
-          </TouchableOpacity>
-        </Link>
 
         {developerMode && (
           <>