diff --git a/frontend/src/screens/Wallet/WalletSetupScreen.tsx b/frontend/src/screens/Wallet/WalletSetupScreen.tsx index 71bb9361..7e0e333a 100644 --- a/frontend/src/screens/Wallet/WalletSetupScreen.tsx +++ b/frontend/src/screens/Wallet/WalletSetupScreen.tsx @@ -6,13 +6,39 @@ import { TouchableOpacity, SafeAreaView, Dimensions, + Image, } from 'react-native'; import { Ionicons } from '@expo/vector-icons'; import { LinearGradient } from 'expo-linear-gradient'; +import { useWalletConnectModal } from '@walletconnect/modal-react-native'; +import { usePolkadot } from '../../contexts/PolkadotContext'; const { width } = Dimensions.get('window'); export default function WalletSetupScreen({ navigation }: any) { + const { open, isConnected } = useWalletConnectModal(); + const { accounts } = usePolkadot(); + + const handleConnectWallet = async () => { + try { + await open(); + + // If connection succeeds, navigate to main app + if (isConnected && accounts.length > 0) { + navigation.navigate('MainTabs'); + } + } catch (error) { + console.error('Connection error:', error); + } + }; + + // If already connected, go to main app + React.useEffect(() => { + if (isConnected && accounts.length > 0) { + navigation.navigate('MainTabs'); + } + }, [isConnected, accounts]); + return ( - Setup Your Wallet + Connect Your Wallet - Create a new wallet or import an existing one to get started + Connect with SubWallet, Nova Wallet, or any Polkadot compatible wallet - {/* Options */} - - {/* Create New Wallet */} + {/* Main Action Card */} + navigation.navigate('CreateWallet')} + style={styles.connectButton} + onPress={handleConnectWallet} activeOpacity={0.8} > - - - - Create New Wallet - - Generate a new wallet with a secure seed phrase - - - + + + Connect Wallet + + via WalletConnect + - {/* Import Wallet */} - navigation.navigate('ImportWallet')} - activeOpacity={0.8} - > - - + {/* Supported Wallets */} + + Supported Wallets: + + + + + + SubWallet + + + + + + Nova Wallet + + + + + + Talisman + - Import Wallet - - Import an existing wallet using your seed phrase - - - - - + - {/* Footer Info */} - - - - Your keys are stored securely on your device - + {/* Info Section */} + + + + + Your keys stay in your wallet + + + + + + We never access your private keys + + + + {/* How to Connect */} + { + // TODO: Show help modal + }} + > + + How to connect? + @@ -112,54 +160,90 @@ const styles = StyleSheet.create({ opacity: 0.9, paddingHorizontal: 20, }, - optionsContainer: { - flex: 1, - justifyContent: 'center', - gap: 20, - }, - optionCard: { + mainCard: { backgroundColor: '#FFF', - borderRadius: 20, + borderRadius: 24, padding: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, - shadowOpacity: 0.1, - shadowRadius: 8, - elevation: 5, + shadowOpacity: 0.15, + shadowRadius: 12, + elevation: 8, }, - iconContainer: { - width: 80, - height: 80, - borderRadius: 40, + connectButton: { + backgroundColor: '#F08080', + borderRadius: 16, + padding: 24, + alignItems: 'center', + marginBottom: 24, + }, + buttonContent: { + alignItems: 'center', + }, + buttonTitle: { + fontSize: 22, + fontWeight: '700', + color: '#FFF', + marginTop: 12, + }, + buttonSubtitle: { + fontSize: 14, + color: '#FFF', + opacity: 0.9, + marginTop: 4, + }, + walletsSection: { + marginTop: 8, + }, + walletsTitle: { + fontSize: 14, + fontWeight: '600', + color: '#666', + marginBottom: 16, + }, + walletsList: { + flexDirection: 'row', + justifyContent: 'space-around', + }, + walletItem: { + alignItems: 'center', + }, + walletIcon: { + width: 50, + height: 50, + borderRadius: 25, backgroundColor: '#F5F5F5', alignItems: 'center', justifyContent: 'center', - marginBottom: 16, - }, - optionTitle: { - fontSize: 22, - fontWeight: '700', - color: '#333', marginBottom: 8, }, - optionDescription: { - fontSize: 15, + walletName: { + fontSize: 12, color: '#666', - lineHeight: 22, + fontWeight: '500', }, - arrow: { - position: 'absolute', - top: 24, - right: 24, + infoSection: { + gap: 12, + marginBottom: 20, }, - footer: { + infoItem: { + flexDirection: 'row', + alignItems: 'center', + gap: 12, + }, + infoText: { + fontSize: 14, + color: '#FFF', + opacity: 0.9, + }, + helpButton: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, - marginBottom: 20, + paddingVertical: 12, }, - footerText: { + helpText: { fontSize: 14, color: '#FFF', opacity: 0.9,