349 lines
10 KiB
TypeScript
349 lines
10 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Image, StyleSheet, Pressable, Platform, View, Alert } from 'react-native';
|
|
import { useCameraPermissions } from 'expo-camera';
|
|
import Link, { } from 'expo-router/link';
|
|
import { ethers } from 'ethers';
|
|
|
|
import ParallaxScrollView from '@/components/ParallaxScrollView';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { ThemedView } from '@/components/ThemedView';
|
|
import { WalletConnectModal, useWalletConnectModal } from '@walletconnect/modal-react-native';
|
|
import { CHAIN_ID, CONTRACT_ADDRESS, projectId, providerMetadata } from './shared';
|
|
import { contractABI } from './ABI/transfer_contract';
|
|
// import { GoogleSignin } from 'react-native-google-signin';
|
|
import { GoogleSignin, statusCodes, GoogleSigninButton, isErrorWithCode, User } from '@react-native-google-signin/google-signin';
|
|
import auth from '@react-native-firebase/auth';
|
|
|
|
|
|
export default function HomeScreen() {
|
|
const [loading, setLoading] = useState(false);
|
|
const [transferLoading, setTransferLoading] = useState(false);
|
|
|
|
const [firebaseUser, setFirebaseUser] = useState<User | null>();
|
|
const [permission, requestPermission] = useCameraPermissions();
|
|
const [embeddedWallet, setEmbeddedWallet] = useState("");
|
|
const isPermissionGranted = Boolean(permission?.granted);
|
|
|
|
const { open, isConnected, address, provider } = useWalletConnectModal();
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
|
|
GoogleSignin.configure({
|
|
webClientId: '652710461284-7e2909o0bmsqqo17l4fhtkm33emh35vj.apps.googleusercontent.com',
|
|
});
|
|
// Check if the user is already signed in
|
|
const checkSignInStatus = async () => {
|
|
try {
|
|
const userInfo = await GoogleSignin.signInSilently();
|
|
|
|
if (userInfo != null) {
|
|
console.log("Setting firebase user silently");
|
|
setFirebaseUser(userInfo.data);
|
|
console.log(firebaseUser);
|
|
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to check Google sign-in status:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
checkSignInStatus();
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
|
|
const fetchEmbeddedWallet = async () => {
|
|
if (firebaseUser == null) { console.log('firebase user is null'); return; }
|
|
const googleCredential = auth.GoogleAuthProvider.credential(firebaseUser.idToken);
|
|
const userCredential = await auth().signInWithCredential(googleCredential);
|
|
const tokenId = await userCredential.user.getIdToken();
|
|
console.log(`tokenId from firebase ${tokenId}`);
|
|
const register = await fetch(`http://vps.playpoolstudios.com:30017/signinWithGoogle?tokenId=${tokenId}`)
|
|
const registerJson = await register.json();
|
|
console.log(registerJson);
|
|
setEmbeddedWallet(registerJson['publicKey']);
|
|
}
|
|
|
|
fetchEmbeddedWallet();
|
|
}, [firebaseUser])
|
|
|
|
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);
|
|
}
|
|
};
|
|
|
|
const transferEth = async () => {
|
|
if (!provider || !isConnected) {
|
|
console.error('Wallet not connected.');
|
|
return;
|
|
}
|
|
|
|
setTransferLoading(true);
|
|
|
|
try {
|
|
const ethersProvider = new ethers.providers.Web3Provider(provider);
|
|
const network = await ethersProvider.getNetwork();
|
|
|
|
if (network.chainId !== CHAIN_ID) {
|
|
console.log(`Switching from ${network.chainId} to ${CHAIN_ID} (Arbitrum Sepolia)...`);
|
|
// await provider.request({method:"eth_requestAccounts",params: []});
|
|
await provider.request({
|
|
method: 'wallet_switchEthereumChain',
|
|
params: [{ chainId: `0x${CHAIN_ID.toString(16)}` }],
|
|
});
|
|
console.log(`Switched to chain ID: ${CHAIN_ID}`);
|
|
}
|
|
console.log(`Current chain ID: ${CHAIN_ID}`);
|
|
|
|
const signer = ethersProvider.getSigner();
|
|
|
|
|
|
const contract = new ethers.Contract(CONTRACT_ADDRESS, contractABI, signer);
|
|
|
|
const tx = await contract.transferETH('warlock', {
|
|
value: ethers.utils.parseEther('0.002'), // Sending 0.003 ETH
|
|
});
|
|
|
|
console.log('Transaction sent:', tx.hash);
|
|
await tx.wait();
|
|
console.log('Transaction confirmed:', tx.hash);
|
|
} catch (error) {
|
|
console.error('Transfer failed:', error);
|
|
} finally {
|
|
setTransferLoading(false);
|
|
}
|
|
};
|
|
|
|
const _signIn = async () => {
|
|
try {
|
|
await GoogleSignin.hasPlayServices();
|
|
const { type, data } = await GoogleSignin.signIn();
|
|
if (type === 'success') {
|
|
console.log({ data });
|
|
setFirebaseUser(data);
|
|
} else {
|
|
// sign in was cancelled by user
|
|
setTimeout(() => {
|
|
Alert.alert('cancelled');
|
|
}, 500);
|
|
}
|
|
} catch (error: any) {
|
|
if (isErrorWithCode(error)) {
|
|
console.log('error', error.message);
|
|
switch (error.code) {
|
|
case statusCodes.IN_PROGRESS:
|
|
// operation (eg. sign in) already in progress
|
|
Alert.alert(
|
|
'in progress',
|
|
'operation (eg. sign in) already in progress',
|
|
);
|
|
break;
|
|
case statusCodes.PLAY_SERVICES_NOT_AVAILABLE:
|
|
// android only
|
|
Alert.alert('play services not available or outdated');
|
|
break;
|
|
default:
|
|
Alert.alert('Something went wrong: ', error.toString() + error.code);
|
|
}
|
|
} else {
|
|
alert(`an error that's not related to google sign in occurred`);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await GoogleSignin.signOut();
|
|
setFirebaseUser(null);
|
|
} catch (error) {
|
|
console.error('Logout failed:', error);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ParallaxScrollView
|
|
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
|
|
headerImage={
|
|
<Image
|
|
source={require('@/assets/images/partial-react-logo.png')}
|
|
style={styles.reactLogo}
|
|
/>
|
|
}
|
|
>
|
|
<ThemedView style={styles.titleContainer}>
|
|
<ThemedText type="title">Welcome to ECPay</ThemedText>
|
|
</ThemedView>
|
|
|
|
{/* Connect Wallet Section */}
|
|
{
|
|
firebaseUser == null ?
|
|
(<Pressable onPress={connectWallet} style={styles.button}>
|
|
<ThemedText style={styles.buttonText}>
|
|
{loading ? 'Connecting...' : isConnected ? 'Disconnect Wallet' : 'Connect Wallet'}
|
|
</ThemedText>
|
|
</Pressable>) : (<></>)}
|
|
|
|
{/* Display Wallet Address if Connected */}
|
|
{isConnected && (
|
|
<ThemedView style={styles.addressContainer}>
|
|
<ThemedText>Connected Wallet:</ThemedText>
|
|
<ThemedText>{address}</ThemedText>
|
|
</ThemedView>
|
|
)}
|
|
|
|
{
|
|
(firebaseUser == null && !isConnected) ?
|
|
(<GoogleSigninButton
|
|
size={GoogleSigninButton.Size.Standard}
|
|
color={GoogleSigninButton.Color.Dark}
|
|
onPress={_signIn}
|
|
accessibilityLabel={'sign in'}
|
|
/>)
|
|
:
|
|
|
|
(!isConnected) ?
|
|
(
|
|
<ThemedView>
|
|
<ThemedText>
|
|
Signed in as {firebaseUser?.user.email}
|
|
</ThemedText>
|
|
<ThemedText>
|
|
{embeddedWallet}
|
|
</ThemedText>
|
|
<Pressable onPress={handleLogout} style={styles.logoutButton}>
|
|
<ThemedText style={styles.buttonText}>Logout</ThemedText>
|
|
</Pressable>
|
|
|
|
</ThemedView>
|
|
)
|
|
:
|
|
(<></>)
|
|
}
|
|
|
|
{/* Link to Scanner */}
|
|
{isPermissionGranted ? (isConnected || firebaseUser != null) && (
|
|
<Link href="./scanner" asChild>
|
|
<Pressable
|
|
style={({ pressed }) => [
|
|
styles.scanButton,
|
|
{ opacity: pressed ? 0.5 : 1 },
|
|
]}
|
|
>
|
|
<Image
|
|
source={require('@/assets/images/qr-code-icon.png')}
|
|
style={styles.qrIcon}
|
|
/>
|
|
<ThemedText style={styles.scanButtonText}>Scan</ThemedText>
|
|
</Pressable>
|
|
</Link>
|
|
) : (
|
|
<Pressable onPress={requestPermission} style={styles.button}>
|
|
<ThemedText style={styles.buttonText}>Grant Permission</ThemedText>
|
|
</Pressable>
|
|
)}
|
|
|
|
{/* Transfer ETH Button
|
|
<Pressable onPress={transferEth} style={styles.transferButton} disabled={transferLoading}>
|
|
<ThemedText style={styles.buttonText}>
|
|
{transferLoading ? 'Transferring...' : 'Transfer 0.003 ETH'}
|
|
</ThemedText>
|
|
</Pressable>
|
|
|
|
|
|
<ThemedView style={styles.scannedDataContainer}>
|
|
<ThemedText>Scanned Ethereum Address:</ThemedText>
|
|
<ThemedText>{''}</ThemedText>
|
|
</ThemedView> */}
|
|
|
|
{/* WalletConnect Modal */}
|
|
<WalletConnectModal projectId={projectId} providerMetadata={providerMetadata} />
|
|
</ParallaxScrollView>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
titleContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
marginVertical: 16,
|
|
},
|
|
reactLogo: {
|
|
height: 178,
|
|
width: 290,
|
|
bottom: 0,
|
|
left: 0,
|
|
position: 'absolute',
|
|
},
|
|
button: {
|
|
backgroundColor: '#007bff',
|
|
padding: 12,
|
|
borderRadius: 8,
|
|
alignItems: 'center',
|
|
marginVertical: 8,
|
|
},
|
|
transferButton: {
|
|
backgroundColor: '#28a745',
|
|
padding: 12,
|
|
borderRadius: 8,
|
|
alignItems: 'center',
|
|
marginVertical: 8,
|
|
},
|
|
buttonText: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
},
|
|
addressContainer: {
|
|
marginVertical: 16,
|
|
padding: 12,
|
|
backgroundColor: '#333333',
|
|
borderRadius: 8,
|
|
},
|
|
scanButton: {
|
|
width: 150,
|
|
height: 150,
|
|
backgroundColor: '#007bff',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderRadius: 16,
|
|
marginVertical: 16,
|
|
},
|
|
qrIcon: {
|
|
width: 60,
|
|
height: 60,
|
|
marginBottom: 8,
|
|
},
|
|
scanButtonText: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 16,
|
|
},
|
|
scannedDataContainer: {
|
|
marginTop: 16,
|
|
padding: 12,
|
|
backgroundColor: "#444",
|
|
borderRadius: 8,
|
|
},
|
|
logoutButton: {
|
|
backgroundColor: '#d9534f',
|
|
padding: 12,
|
|
borderRadius: 8,
|
|
alignItems: 'center',
|
|
},
|
|
});
|