feat: mobile Nostr identity — Amber NIP-55 + nsec fallback (Fixes #29)
- Add NostrIdentityContext with SecureStore-backed nsec storage and pure-JS bech32/secp256k1 for nsec→npub derivation; private key never enters React state or logs - Android: NIP-55 Amber deep-link integration (get_public_key + sign_event) with install-prompt fallback to Play Store when Amber is absent; Android queries manifest entry for com.greenart7c3.nostrsigner - iOS/both: manual nsec entry stored exclusively in expo-secure-store - Settings tab (gear icon) added to both NativeTabLayout and ClassicTabLayout showing: connected npub (truncated), signing method badge, Disconnect button (with confirmation + SecureStore wipe) - Root layout wrapped with NostrIdentityProvider - app.json: add expo-secure-store plugin + Android intentFilters for mobile://amber-callback deep-link return path Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alexander Whitestone
@@ -25,6 +25,10 @@ function NativeTabLayout() {
|
||||
<Icon sf={{ default: "list.bullet", selected: "list.bullet.circle.fill" }} />
|
||||
<Label>Feed</Label>
|
||||
</NativeTabs.Trigger>
|
||||
<NativeTabs.Trigger name="settings">
|
||||
<Icon sf={{ default: "gearshape", selected: "gearshape.fill" }} />
|
||||
<Label>Settings</Label>
|
||||
</NativeTabs.Trigger>
|
||||
</NativeTabs>
|
||||
);
|
||||
}
|
||||
@@ -100,6 +104,18 @@ function ClassicTabLayout() {
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="settings"
|
||||
options={{
|
||||
title: "Settings",
|
||||
tabBarIcon: ({ color, size }) =>
|
||||
isIOS ? (
|
||||
<SymbolView name="gearshape" tintColor={color} size={size} />
|
||||
) : (
|
||||
<Feather name="settings" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
513
artifacts/mobile/app/(tabs)/settings.tsx
Normal file
513
artifacts/mobile/app/(tabs)/settings.tsx
Normal file
@@ -0,0 +1,513 @@
|
||||
import { Feather } from "@expo/vector-icons";
|
||||
import * as Haptics from "expo-haptics";
|
||||
import * as Linking from "expo-linking";
|
||||
import React, { useCallback, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
Platform,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
|
||||
import { Colors } from "@/constants/colors";
|
||||
import {
|
||||
AMBER_PACKAGE,
|
||||
truncateNpub,
|
||||
useNostrIdentity,
|
||||
} from "@/context/NostrIdentityContext";
|
||||
|
||||
const C = Colors.dark;
|
||||
|
||||
const PLAY_STORE_AMBER =
|
||||
"https://play.google.com/store/apps/details?id=" + AMBER_PACKAGE;
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const {
|
||||
npub,
|
||||
isConnected,
|
||||
signingMethod,
|
||||
amberAvailable,
|
||||
connectWithNsec,
|
||||
connectWithAmber,
|
||||
disconnect,
|
||||
} = useNostrIdentity();
|
||||
|
||||
const [nsecInput, setNsecInput] = useState("");
|
||||
const [nsecError, setNsecError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState<"nsec" | "amber" | "disconnect" | null>(null);
|
||||
|
||||
const topPad = Platform.OS === "web" ? 67 : insets.top;
|
||||
const bottomPad = Platform.OS === "web" ? 84 + 34 : insets.bottom + 84;
|
||||
|
||||
const handleConnectNsec = useCallback(async () => {
|
||||
const trimmed = nsecInput.trim();
|
||||
if (!trimmed.startsWith("nsec1")) {
|
||||
setNsecError("Must be a valid nsec1… key");
|
||||
return;
|
||||
}
|
||||
setNsecError(null);
|
||||
setLoading("nsec");
|
||||
try {
|
||||
await connectWithNsec(trimmed);
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
||||
setNsecInput("");
|
||||
} catch (err) {
|
||||
const msg =
|
||||
err instanceof Error ? err.message : "Failed to connect identity";
|
||||
setNsecError(msg);
|
||||
} finally {
|
||||
setLoading(null);
|
||||
}
|
||||
}, [nsecInput, connectWithNsec]);
|
||||
|
||||
const handleConnectAmber = useCallback(async () => {
|
||||
setLoading("amber");
|
||||
try {
|
||||
await connectWithAmber();
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
||||
} catch (err) {
|
||||
const msg =
|
||||
err instanceof Error ? err.message : "Failed to connect via Amber";
|
||||
Alert.alert("Amber error", msg);
|
||||
} finally {
|
||||
setLoading(null);
|
||||
}
|
||||
}, [connectWithAmber]);
|
||||
|
||||
const handleInstallAmber = useCallback(() => {
|
||||
Linking.openURL(PLAY_STORE_AMBER);
|
||||
}, []);
|
||||
|
||||
const handleDisconnect = useCallback(() => {
|
||||
Alert.alert(
|
||||
"Disconnect Nostr identity",
|
||||
"Your private key will be wiped from this device. This cannot be undone.",
|
||||
[
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Disconnect",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
setLoading("disconnect");
|
||||
try {
|
||||
await disconnect();
|
||||
Haptics.notificationAsync(
|
||||
Haptics.NotificationFeedbackType.Warning
|
||||
);
|
||||
} finally {
|
||||
setLoading(null);
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
}, [disconnect]);
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
style={[styles.container, { paddingTop: topPad }]}
|
||||
contentContainerStyle={[styles.content, { paddingBottom: bottomPad }]}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>Settings</Text>
|
||||
</View>
|
||||
|
||||
{/* ── Nostr Identity section ── */}
|
||||
<SectionHeader label="Nostr Identity" />
|
||||
|
||||
{isConnected && npub ? (
|
||||
<>
|
||||
<Card>
|
||||
<Row>
|
||||
<View style={styles.npubIconWrap}>
|
||||
<Feather name="key" size={16} color={C.accentGlow} />
|
||||
</View>
|
||||
<View style={styles.npubTextWrap}>
|
||||
<Text style={styles.npubLabel}>
|
||||
{signingMethod === "amber" ? "Via Amber" : "Manual nsec"}
|
||||
</Text>
|
||||
<Text style={styles.npubValue} selectable>
|
||||
{truncateNpub(npub)}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.methodBadge,
|
||||
signingMethod === "amber"
|
||||
? styles.methodBadgeAmber
|
||||
: styles.methodBadgeNsec,
|
||||
]}
|
||||
>
|
||||
<Text style={styles.methodBadgeText}>
|
||||
{signingMethod === "amber" ? "Amber" : "nsec"}
|
||||
</Text>
|
||||
</View>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Pressable
|
||||
onPress={handleDisconnect}
|
||||
style={({ pressed }) => [
|
||||
styles.dangerButton,
|
||||
pressed && styles.dangerButtonPressed,
|
||||
]}
|
||||
disabled={loading === "disconnect"}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Disconnect Nostr identity"
|
||||
>
|
||||
{loading === "disconnect" ? (
|
||||
<ActivityIndicator size="small" color={C.error} />
|
||||
) : (
|
||||
<>
|
||||
<Feather name="log-out" size={16} color={C.error} />
|
||||
<Text style={styles.dangerButtonText}>Disconnect</Text>
|
||||
</>
|
||||
)}
|
||||
</Pressable>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Android — Amber option */}
|
||||
{Platform.OS === "android" && (
|
||||
<Card>
|
||||
<Text style={styles.sectionDesc}>
|
||||
Use{" "}
|
||||
<Text style={styles.highlight}>Amber</Text> to sign events
|
||||
without exposing your key to this app.
|
||||
</Text>
|
||||
|
||||
{amberAvailable ? (
|
||||
<PrimaryButton
|
||||
label="Connect via Amber"
|
||||
icon="shield"
|
||||
loading={loading === "amber"}
|
||||
onPress={handleConnectAmber}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<View style={styles.notInstalledRow}>
|
||||
<Feather
|
||||
name="alert-circle"
|
||||
size={14}
|
||||
color={C.textMuted}
|
||||
/>
|
||||
<Text style={styles.notInstalledText}>
|
||||
Amber is not installed
|
||||
</Text>
|
||||
</View>
|
||||
<PrimaryButton
|
||||
label="Install Amber (Play Store)"
|
||||
icon="download"
|
||||
onPress={handleInstallAmber}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Both platforms — nsec entry */}
|
||||
<Card>
|
||||
<Text style={styles.sectionDesc}>
|
||||
{Platform.OS === "ios"
|
||||
? "Enter your nsec to connect your Nostr identity. The key is stored only in the iOS Keychain."
|
||||
: "Alternatively, enter your nsec directly. The key is stored only in the Android Keystore."}
|
||||
</Text>
|
||||
|
||||
<TextInput
|
||||
style={[styles.nsecInput, nsecError ? styles.nsecInputError : null]}
|
||||
value={nsecInput}
|
||||
onChangeText={(t) => {
|
||||
setNsecInput(t);
|
||||
if (nsecError) setNsecError(null);
|
||||
}}
|
||||
placeholder="nsec1…"
|
||||
placeholderTextColor={C.textMuted}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
secureTextEntry
|
||||
returnKeyType="done"
|
||||
onSubmitEditing={handleConnectNsec}
|
||||
accessibilityLabel="nsec private key input"
|
||||
/>
|
||||
{nsecError ? (
|
||||
<Text style={styles.errorText}>{nsecError}</Text>
|
||||
) : null}
|
||||
|
||||
<PrimaryButton
|
||||
label="Connect with nsec"
|
||||
icon="log-in"
|
||||
loading={loading === "nsec"}
|
||||
onPress={handleConnectNsec}
|
||||
disabled={!nsecInput.trim()}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Security notice */}
|
||||
<View style={styles.securityNote}>
|
||||
<Feather name="lock" size={12} color={C.textMuted} />
|
||||
<Text style={styles.securityNoteText}>
|
||||
Your private key is stored exclusively in the device secure enclave
|
||||
and is never logged, transmitted, or held in app memory.
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Small UI helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function SectionHeader({ label }: { label: string }) {
|
||||
return (
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionHeaderText}>{label.toUpperCase()}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function Card({ children }: { children: React.ReactNode }) {
|
||||
return <View style={styles.card}>{children}</View>;
|
||||
}
|
||||
|
||||
function Row({ children }: { children: React.ReactNode }) {
|
||||
return <View style={styles.row}>{children}</View>;
|
||||
}
|
||||
|
||||
function PrimaryButton({
|
||||
label,
|
||||
icon,
|
||||
loading = false,
|
||||
disabled = false,
|
||||
onPress,
|
||||
}: {
|
||||
label: string;
|
||||
icon: React.ComponentProps<typeof Feather>["name"];
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
onPress: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
style={({ pressed }) => [
|
||||
styles.primaryButton,
|
||||
(disabled || loading) && styles.primaryButtonDisabled,
|
||||
pressed && !disabled && styles.primaryButtonPressed,
|
||||
]}
|
||||
disabled={disabled || loading}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={label}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator size="small" color={C.text} />
|
||||
) : (
|
||||
<>
|
||||
<Feather name={icon} size={16} color={C.text} />
|
||||
<Text style={styles.primaryButtonText}>{label}</Text>
|
||||
</>
|
||||
)}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Styles
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: C.background,
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 16,
|
||||
gap: 8,
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: 8,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 16,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontFamily: "Inter_700Bold",
|
||||
color: C.text,
|
||||
letterSpacing: -0.5,
|
||||
},
|
||||
sectionHeader: {
|
||||
paddingHorizontal: 8,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 4,
|
||||
},
|
||||
sectionHeaderText: {
|
||||
fontSize: 11,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
color: C.textMuted,
|
||||
letterSpacing: 1.2,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: C.surface,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: C.border,
|
||||
padding: 16,
|
||||
gap: 12,
|
||||
},
|
||||
row: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
},
|
||||
npubIconWrap: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
backgroundColor: C.surfaceElevated,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
npubTextWrap: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
},
|
||||
npubLabel: {
|
||||
fontSize: 11,
|
||||
fontFamily: "Inter_500Medium",
|
||||
color: C.textMuted,
|
||||
letterSpacing: 0.4,
|
||||
},
|
||||
npubValue: {
|
||||
fontSize: 13,
|
||||
fontFamily: "Inter_500Medium",
|
||||
color: C.text,
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
methodBadge: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 3,
|
||||
borderRadius: 8,
|
||||
},
|
||||
methodBadgeAmber: {
|
||||
backgroundColor: "#F59E0B22",
|
||||
borderWidth: 1,
|
||||
borderColor: "#F59E0B55",
|
||||
},
|
||||
methodBadgeNsec: {
|
||||
backgroundColor: C.accent + "22",
|
||||
borderWidth: 1,
|
||||
borderColor: C.accent + "55",
|
||||
},
|
||||
methodBadgeText: {
|
||||
fontSize: 11,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
color: C.textSecondary,
|
||||
},
|
||||
sectionDesc: {
|
||||
fontSize: 13,
|
||||
fontFamily: "Inter_400Regular",
|
||||
color: C.textSecondary,
|
||||
lineHeight: 18,
|
||||
},
|
||||
highlight: {
|
||||
color: C.accentGlow,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
},
|
||||
notInstalledRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
},
|
||||
notInstalledText: {
|
||||
fontSize: 12,
|
||||
fontFamily: "Inter_400Regular",
|
||||
color: C.textMuted,
|
||||
},
|
||||
nsecInput: {
|
||||
backgroundColor: C.surfaceElevated,
|
||||
borderRadius: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: C.border,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 11,
|
||||
fontSize: 14,
|
||||
fontFamily: "Inter_400Regular",
|
||||
color: C.text,
|
||||
},
|
||||
nsecInputError: {
|
||||
borderColor: C.error,
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 12,
|
||||
fontFamily: "Inter_400Regular",
|
||||
color: C.error,
|
||||
marginTop: -4,
|
||||
},
|
||||
primaryButton: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
backgroundColor: C.accent,
|
||||
borderRadius: 12,
|
||||
paddingVertical: 13,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
primaryButtonDisabled: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
primaryButtonPressed: {
|
||||
opacity: 0.8,
|
||||
},
|
||||
primaryButtonText: {
|
||||
fontSize: 15,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
color: C.text,
|
||||
},
|
||||
dangerButton: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
backgroundColor: C.error + "15",
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: C.error + "40",
|
||||
paddingVertical: 13,
|
||||
paddingHorizontal: 20,
|
||||
marginTop: 4,
|
||||
},
|
||||
dangerButtonPressed: {
|
||||
opacity: 0.7,
|
||||
},
|
||||
dangerButtonText: {
|
||||
fontSize: 15,
|
||||
fontFamily: "Inter_600SemiBold",
|
||||
color: C.error,
|
||||
},
|
||||
securityNote: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
gap: 6,
|
||||
paddingHorizontal: 8,
|
||||
paddingTop: 8,
|
||||
},
|
||||
securityNoteText: {
|
||||
flex: 1,
|
||||
fontSize: 11,
|
||||
fontFamily: "Inter_400Regular",
|
||||
color: C.textMuted,
|
||||
lineHeight: 16,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user