refactor: restructure App component to utilize navigation and theming, and remove unused code

App.tsx

@@ -111,7 +111,6 @@ export default function App() {
     );
   }
 
-export default function App() {
   return (
     <SafeAreaProvider>
       <StatusBar style="dark" />

package.json

@@ -11,6 +11,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "1.23.1",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
     "expo": "~52.0.46",

src/components/ErrorBanner.tsx

@@ -1,12 +1,50 @@
+import { useMemo } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
-import { colors, spacing } from "../theme";
+import { useAppTheme } from "../theme/ThemeProvider";
+import type { ThemeColors } from "../theme";
 
 interface ErrorBannerProps {
   message: string;
   onRetry: () => void;
 }
 
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: colors.dangerBg,
+      backgroundColor: colors.dangerBg,
+      padding: 12,
+      gap: 8,
+    },
+    message: {
+      color: colors.danger,
+      fontSize: 14,
+    },
+    retryButton: {
+      alignSelf: "flex-start",
+      borderRadius: 8,
+      backgroundColor: colors.danger,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      minHeight: 44,
+      minWidth: 44,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    retryText: {
+      color: "#ffffff",
+      fontWeight: "600",
+      fontSize: 13,
+    },
+  });
+}
+
 export function ErrorBanner({ message, onRetry }: ErrorBannerProps) {
+  const { colors } = useAppTheme();
+  const styles = useMemo(() => createStyles(colors), [colors]);
+
   return (
     <View style={styles.container}>
       <Text style={styles.message}>{message}</Text>
@@ -16,34 +54,3 @@ export function ErrorBanner({ message, onRetry }: ErrorBannerProps) {
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: "#fecaca",
-    backgroundColor: "#fef2f2",
-    padding: spacing.md,
-    gap: spacing.sm,
-  },
-  message: {
-    color: colors.danger,
-    fontSize: 14,
-  },
-  retryButton: {
-    alignSelf: "flex-start",
-    borderRadius: 8,
-    backgroundColor: colors.danger,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    minHeight: 44,
-    minWidth: 44,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  retryText: {
-    color: "#ffffff",
-    fontWeight: "600",
-    fontSize: 13,
-  },
-});

src/components/PaywallModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   ActivityIndicator,
   Linking,
@@ -11,7 +11,9 @@ import {
 } from "react-native";
 
 import { accessResource } from "../api/payment";
-import { colors, shared, spacing, typography } from "../theme";
+import { spacing } from "../theme";
+import type { ThemeColors } from "../theme";
+import { useAppTheme } from "../theme/ThemeProvider";
 import type { AccessResult } from "../types";
 
 interface PaywallModalProps {
@@ -24,18 +26,75 @@ interface PaywallModalProps {
 
 type Phase = "confirm" | "loading" | "result" | "error";
 
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    overlay: {
+      flex: 1,
+      backgroundColor: "rgba(0,0,0,0.45)",
+      justifyContent: "flex-end",
+    },
+    sheet: {
+      backgroundColor: colors.surface,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      maxHeight: "80%",
+      paddingBottom: spacing.xxl,
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: spacing.lg,
+      borderBottomWidth: 1,
+      borderColor: colors.border,
+    },
+    closeBtn: {
+      padding: spacing.xs,
+    },
+    closeBtnText: {
+      fontSize: 16,
+      color: colors.textMuted,
+    },
+    body: {
+      padding: spacing.lg,
+      gap: spacing.md,
+    },
+    centered: {
+      alignItems: "center",
+      paddingVertical: spacing.xxl,
+    },
+    actionBtn: {
+      alignItems: "center",
+      paddingVertical: 12,
+    },
+    scrollArea: {
+      flexGrow: 0,
+    },
+    scrollContent: {
+      padding: spacing.lg,
+    },
+    contentText: {
+      fontSize: 14,
+      color: colors.text,
+      lineHeight: 22,
+    },
+  });
+}
+
 export function PaywallModal({
   visible,
   accessUrl,
   resourceTitle,
   price,
   onClose,
 }: PaywallModalProps) {
+  const { colors, shared, typography } = useAppTheme();
+  const styles = useMemo(() => createStyles(colors), [colors]);
+
   const [phase, setPhase] = useState<Phase>("confirm");
   const [result, setResult] = useState<AccessResult | null>(null);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
 
-  // Reset state each time the modal opens
   useEffect(() => {
     if (visible) {
       setPhase("confirm");
@@ -71,7 +130,6 @@ export function PaywallModal({
     >
       <View style={styles.overlay}>
         <View style={styles.sheet}>
-          {/* Header */}
           <View style={styles.header}>
             <Text style={typography.cardTitle} numberOfLines={1}>
               {resourceTitle}
@@ -81,7 +139,6 @@ export function PaywallModal({
             </Pressable>
           </View>
 
-          {/* Confirm phase */}
           {phase === "confirm" && (
             <View style={styles.body}>
               <Text style={typography.body}>
@@ -102,22 +159,19 @@ export function PaywallModal({
             </View>
           )}
 
-          {/* Loading phase */}
           {phase === "loading" && (
             <View style={[styles.body, styles.centered]}>
               <ActivityIndicator size="large" color={colors.primary} />
               <Text style={typography.body}>Signing payment…</Text>
             </View>
           )}
 
-          {/* Result phase — text content */}
           {phase === "result" && result?.type === "text" && (
             <ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent}>
               <Text style={styles.contentText}>{result.content}</Text>
             </ScrollView>
           )}
 
-          {/* Error phase */}
           {phase === "error" && (
             <View style={styles.body}>
               <Text style={[typography.body, { color: colors.danger }]}>{errorMsg}</Text>
@@ -134,56 +188,3 @@ export function PaywallModal({
     </Modal>
   );
 }
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0,0,0,0.45)",
-    justifyContent: "flex-end",
-  },
-  sheet: {
-    backgroundColor: colors.surface,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    maxHeight: "80%",
-    paddingBottom: spacing.xxl,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: spacing.lg,
-    borderBottomWidth: 1,
-    borderColor: colors.border,
-  },
-  closeBtn: {
-    padding: spacing.xs,
-  },
-  closeBtnText: {
-    fontSize: 16,
-    color: colors.textMuted,
-  },
-  body: {
-    padding: spacing.lg,
-    gap: spacing.md,
-  },
-  centered: {
-    alignItems: "center",
-    paddingVertical: spacing.xxl,
-  },
-  actionBtn: {
-    alignItems: "center",
-    paddingVertical: 12,
-  },
-  scrollArea: {
-    flexGrow: 0,
-  },
-  scrollContent: {
-    padding: spacing.lg,
-  },
-  contentText: {
-    fontSize: 14,
-    color: colors.text,
-    lineHeight: 22,
-  },
-});