diff --git a/frontend/src/screens/Wallet/WalletSetupScreen.tsx b/frontend/src/screens/Wallet/WalletSetupScreen.tsx index 3c9ec637..756111e4 100644 --- a/frontend/src/screens/Wallet/WalletSetupScreen.tsx +++ b/frontend/src/screens/Wallet/WalletSetupScreen.tsx @@ -13,30 +13,25 @@ import { LinearGradient } from 'expo-linear-gradient'; import { usePolkadot } from '../../contexts/PolkadotContext'; export default function WalletSetupScreen({ navigation }: any) { - const { connectWallet, setSelectedAccount } = usePolkadot(); + const { saveAccount } = usePolkadot(); const [walletAddress, setWalletAddress] = useState(''); + const [walletName, setWalletName] = useState('My Wallet'); - const handleConnectWithAddress = () => { + const handleConnectWithAddress = async () => { if (!walletAddress.trim()) { Alert.alert('Error', 'Please enter a valid wallet address'); return; } - // Set the account manually - setSelectedAccount({ + // Save the account + await saveAccount({ address: walletAddress.trim(), - name: 'My Wallet', + name: walletName.trim() || 'My Wallet', }); navigation.navigate('MainTabs'); }; - const handleConnectWithExtension = async () => { - await connectWallet(); - // After successful connection, navigate to main app - navigation.navigate('MainTabs'); - }; - return ( Connect Your Wallet - View your PezkuwiChain assets and transactions + Enter your PezkuwiChain wallet address to get started - {/* Option 1: Enter Address */} + {/* Main Card */} - Enter Wallet Address + Wallet Details - - Enter your wallet address to view balances and transactions - - + Wallet Name (optional) + + Wallet Address + - Read-only mode. To send transactions, you'll be guided to SubWallet. + Your wallet address is only stored locally on your device. We never access your private keys. - {/* Option 2: Connect with Extension (Web only) */} - - - - Connect Polkadot.js Extension - - - {/* Footer */} - Your keys stay secure. We never access private keys. + All blockchain data fetched securely via backend API @@ -159,18 +151,19 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', gap: 12, - marginBottom: 12, + marginBottom: 20, }, optionTitle: { fontSize: 20, fontWeight: '700', color: '#333', }, - optionDescription: { + label: { fontSize: 14, + fontWeight: '600', color: '#666', - marginBottom: 16, - lineHeight: 20, + marginBottom: 8, + marginTop: 12, }, input: { backgroundColor: '#F5F5F5', @@ -178,7 +171,10 @@ const styles = StyleSheet.create({ padding: 16, fontSize: 14, color: '#333', - marginBottom: 16, + }, + addressInput: { + minHeight: 60, + textAlignVertical: 'top', }, primaryButton: { backgroundColor: '#F08080', @@ -188,6 +184,7 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', gap: 8, + marginTop: 20, }, primaryButtonText: { color: '#FFF', @@ -199,7 +196,7 @@ const styles = StyleSheet.create({ borderRadius: 12, padding: 12, flexDirection: 'row', - alignItems: 'center', + alignItems: 'flex-start', gap: 8, marginTop: 16, borderWidth: 1, @@ -211,22 +208,6 @@ const styles = StyleSheet.create({ color: '#5DBEA3', lineHeight: 16, }, - secondaryButton: { - backgroundColor: 'rgba(255,255,255,0.2)', - borderRadius: 12, - padding: 16, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - gap: 8, - borderWidth: 2, - borderColor: 'rgba(255,255,255,0.3)', - }, - secondaryButtonText: { - color: '#FFF', - fontSize: 16, - fontWeight: '600', - }, footer: { flexDirection: 'row', alignItems: 'center',