42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Pressable, StyleSheet, ActivityIndicator } from 'react-native';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { useWalletConnectModal } from '@walletconnect/modal-react-native';
|
|
import { CHAIN_ID, CONTRACT_ADDRESS, providerMetadata } from '@/constants/Web3';
|
|
|
|
export default function WalletConnectSection() {
|
|
const { open, isConnected, provider } = useWalletConnectModal();
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const connectWallet = async () => {
|
|
setLoading(true);
|
|
try {
|
|
if (isConnected) await provider?.disconnect();
|
|
else await open();
|
|
} catch (error) {
|
|
console.error('Wallet connection failed:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Pressable onPress={connectWallet} style={styles.button}>
|
|
<ThemedText style={styles.text}>
|
|
{loading ? <ActivityIndicator color="#fff" /> : isConnected ? 'Disconnect' : 'Connect Wallet'}
|
|
</ThemedText>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
backgroundColor: '#007bff',
|
|
padding: 12,
|
|
borderRadius: 8,
|
|
alignItems: 'center',
|
|
marginVertical: 8,
|
|
},
|
|
text: { color: '#fff' },
|
|
});
|