import { WalletProvider, useWallet } from '@/modules/wallet-providers';
function App() {
return (
<WalletProvider
config={{
autoConnect: true,
providers: ['privy', 'dynamic', 'turnkey', 'mwa'],
defaultProvider: 'privy'
}}
>
<MainApp />
</WalletProvider>
);
}
function MainApp() {
const { connected, connect, disconnect } = useWallet();
return (
<View style={styles.container}>
{connected ? (
<ConnectedView />
) : (
<WalletSelectionScreen />
)}
</View>
);
}
function WalletSelectionScreen() {
const { connect } = useWallet();
const walletOptions = [
{ name: 'Privy', provider: 'privy', icon: '🔐', description: 'Social login' },
{ name: 'Dynamic', provider: 'dynamic', icon: '⚡', description: 'Multi-chain' },
{ name: 'Turnkey', provider: 'turnkey', icon: '🏛️', description: 'Institutional' },
{ name: 'Mobile Wallet', provider: 'mwa', icon: '📱', description: 'Native wallets' }
];
return (
<View style={styles.walletSelection}>
<Text style={styles.title}>Choose Your Wallet</Text>
{walletOptions.map((option) => (
<TouchableOpacity
key={option.provider}
style={styles.walletOption}
onPress={() => connect(option.provider)}
>
<Text style={styles.walletIcon}>{option.icon}</Text>
<View style={styles.walletInfo}>
<Text style={styles.walletName}>{option.name}</Text>
<Text style={styles.walletDescription}>{option.description}</Text>
</View>
</TouchableOpacity>
))}
</View>
);
}