ecpay_expo/app/(tabs)/index.tsx

import React, { useState } from 'react';
import { Image, StyleSheet, Pressable, Platform } from 'react-native';
import { useCameraPermissions } from 'expo-camera';
import { Link } from 'expo-router';
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, contractABI, projectId, providerMetadata } from './shared';



export default function HomeScreen() {
  const [loading, setLoading] = useState(false);
  const [transferLoading, setTransferLoading] = useState(false);
  const [permission, requestPermission] = useCameraPermissions();
  const isPermissionGranted = Boolean(permission?.granted);



  const { open, isConnected, address, provider } = useWalletConnectModal();
  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);
    }
  };

  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 */}
        <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>
        )}

        {/* Link to Scanner */}
        {isPermissionGranted ? isConnected&& (
          <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,
  },
});