6433d9172c
- 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>
514 lines
13 KiB
TypeScript
514 lines
13 KiB
TypeScript
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,
|
|
},
|
|
});
|