Skip to content

feat: Replace mock wallet with real Web3 integration (Issue #5) #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Smartdevs17 merged 1 commit into from
Mar 23, 2026
Merged

feat: Replace mock wallet with real Web3 integration (Issue #5) #114

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 38 additions & 41 deletions src/screens/WalletConnectScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,16 @@ import { useNavigation } from '@react-navigation/native';
import { colors, spacing, typography, borderRadius, shadows } from '../utils/constants';
import { Button } from '../components/common/Button';
import { Card } from '../components/common/Card';
import { useAppKit } from '@reown/appkit-ethers-react-native';
import { useAppKit, useAppKitAccount } from '@reown/appkit-ethers-react-native';
import walletServiceManager, { WalletConnection, TokenBalance } from '../services/walletService';
import { useWalletStore } from '../store';

const WalletConnectScreen: React.FC = () => {
const navigation = useNavigation();
const { open } = useAppKit();
const { address, isConnected } = useAppKitAccount();
const { connectWallet, disconnect } = useWalletStore();

const [isConnecting, setIsConnecting] = useState(false);
const [connection, setConnection] = useState<WalletConnection | null>(null);
const [tokenBalances, setTokenBalances] = useState<TokenBalance[]>([]);
Expand All @@ -28,11 +32,22 @@ const WalletConnectScreen: React.FC = () => {
initializeWalletService();
}, []);

// For now, we'll use a mock connection until we implement the full AppKit integration
useEffect(() => {
// This will be updated when we implement the full AppKit connection tracking
console.log('Wallet connection status updated');
}, []);
if (isConnected && address) {
const realConnection: WalletConnection = {
address: address,
chainId: 1,
isConnected: true,
};
setConnection(realConnection);
walletServiceManager.setConnection(realConnection);
connectWallet();
loadTokenBalances();
} else if (!isConnected && connection) {
setConnection(null);
setTokenBalances([]);
}
}, [isConnected, address]);

useEffect(() => {
if (connection) {
Expand All @@ -43,7 +58,6 @@ const WalletConnectScreen: React.FC = () => {
const initializeWalletService = async () => {
try {
await walletServiceManager.initialize();
console.log('Wallet service initialized');
} catch (error) {
console.error('Failed to initialize wallet service:', error);
Alert.alert('Error', 'Failed to initialize wallet service');
Expand All @@ -53,19 +67,7 @@ const WalletConnectScreen: React.FC = () => {
const handleConnectWallet = async () => {
try {
setIsConnecting(true);
open(); // Open the Reown AppKit modal

// For demo purposes, simulate a connection after a delay
setTimeout(() => {
const mockConnection: WalletConnection = {
address: '0x742d35Cc6634C0532925a3b8D4C9db96C4b4d8b6',
chainId: 1,
isConnected: true,
};
setConnection(mockConnection);
walletServiceManager.setConnection(mockConnection);
setIsConnecting(false);
}, 3000);
open();
} catch (error) {
console.error('Failed to open wallet modal:', error);
Alert.alert('Error', 'Failed to open wallet modal. Please try again.');
Expand All @@ -76,6 +78,7 @@ const WalletConnectScreen: React.FC = () => {
const handleDisconnectWallet = async () => {
try {
await walletServiceManager.disconnectWallet();
await disconnect();
setConnection(null);
setTokenBalances([]);
Alert.alert('Success', 'Wallet disconnected successfully!');
Expand All @@ -87,7 +90,7 @@ const WalletConnectScreen: React.FC = () => {

const loadTokenBalances = async () => {
if (!connection) return;

try {
setIsLoadingBalances(true);
const balances = await walletServiceManager.getTokenBalances(
Expand Down Expand Up @@ -171,9 +174,7 @@ const WalletConnectScreen: React.FC = () => {
<ScrollView style={styles.scrollView}>
<View style={styles.header}>
<Text style={styles.title}>Connect Wallet</Text>
<Text style={styles.subtitle}>
Connect your Web3 wallet to enable crypto payments
</Text>
<Text style={styles.subtitle}>Connect your Web3 wallet to enable crypto payments</Text>
</View>

{!connection ? (
Expand All @@ -183,10 +184,11 @@ const WalletConnectScreen: React.FC = () => {
<Text style={styles.connectIcon}>🔗</Text>
<Text style={styles.sectionTitle}>Connect Your Wallet</Text>
<Text style={styles.sectionDescription}>
Choose from popular wallets like MetaMask, Trust Wallet, Rainbow, or Coinbase Wallet
Choose from popular wallets like MetaMask, Trust Wallet, Rainbow, or Coinbase
Wallet
</Text>
</View>

<View style={styles.walletOptions}>
<View style={styles.walletOption}>
<View style={styles.walletIconContainer}>
Expand Down Expand Up @@ -227,9 +229,7 @@ const WalletConnectScreen: React.FC = () => {
size="large"
variant="crypto"
/>
<Text style={styles.connectNote}>
Tap to open wallet selection modal
</Text>
<Text style={styles.connectNote}>Tap to open wallet selection modal</Text>
</View>
</Card>
</View>
Expand All @@ -243,10 +243,7 @@ const WalletConnectScreen: React.FC = () => {
<Text style={styles.statusText}>Connected</Text>
<Text style={styles.connectionTime}>Just now</Text>
</View>
<TouchableOpacity
style={styles.disconnectButton}
onPress={handleDisconnectWallet}
>
<TouchableOpacity style={styles.disconnectButton} onPress={handleDisconnectWallet}>
<Text style={styles.disconnectIcon}>⏹️</Text>
<Text style={styles.disconnectText}>Disconnect</Text>
</TouchableOpacity>
Expand All @@ -260,9 +257,13 @@ const WalletConnectScreen: React.FC = () => {
</TouchableOpacity>
</View>
<Text style={styles.addressText}>{formatAddress(connection.address)}</Text>

<View style={styles.chainInfo}>
<View style={[styles.chainBadge, { backgroundColor: getChainColor(connection.chainId) }]}>
<View
style={[
styles.chainBadge,
{ backgroundColor: getChainColor(connection.chainId) },
]}>
<Text style={styles.chainIcon}>🔗</Text>
<Text style={styles.chainText}>{getChainName(connection.chainId)}</Text>
</View>
Expand All @@ -280,10 +281,7 @@ const WalletConnectScreen: React.FC = () => {
<Text style={styles.balancesIcon}>💰</Text>
<Text style={styles.sectionTitle}>Token Balances</Text>
</View>
<TouchableOpacity
style={styles.refreshButton}
onPress={handleRefreshBalances}
>
<TouchableOpacity style={styles.refreshButton} onPress={handleRefreshBalances}>
<Text style={styles.refreshIcon}>🔄</Text>
<Text style={styles.refreshText}>Refresh</Text>
</TouchableOpacity>
Expand Down Expand Up @@ -330,7 +328,7 @@ const WalletConnectScreen: React.FC = () => {
Set up streaming payments using Superfluid or Sablier protocols
</Text>
</View>

<View style={styles.protocolInfo}>
<View style={styles.protocolItem}>
<Text style={styles.protocolIcon}>🌊</Text>
Expand All @@ -343,7 +341,7 @@ const WalletConnectScreen: React.FC = () => {
<Text style={styles.protocolDesc}>Time-locked streams</Text>
</View>
</View>

<Button
title="Setup Crypto Payments"
onPress={handleSetupCryptoPayments}
Expand Down Expand Up @@ -703,7 +701,6 @@ const styles = StyleSheet.create({
fontSize: 48,
marginBottom: spacing.sm,
},

});

export default WalletConnectScreen;
Loading