IMPLEMENTACIÓ D'APLICACIONS DESCENTRALITZADES (DApps)¶

Frontend → Smart Contracts → Blockchain

Frontend → Smart Contracts → Blockchain
    ↓
Backend API → Base de Dades Tradicional
    ↓
IPFS/Arweave → Emmagatzematge descentralitzat

Frontend → Smart Contracts → Blockchain
                ↓
            Chainlink Oracle
                ↓
            Dades Externes (APIs, preus, etc.)

1. USUARI
   ↓
2. CONNECTA WALLET (MetaMask)
   ↓
3. FRONTEND LLEGEIX DADES DE BLOCKCHAIN
   ↓
4. USUARI INICIA ACCIÓ (click button)
   ↓
5. FRONTEND PREPARA TRANSACCIÓ
   ↓
6. WALLET DEMANA CONFIRMACIÓ
   ↓
7. USUARI SIGNA TRANSACCIÓ
   ↓
8. TRANSACCIÓ ENVIADA A BLOCKCHAIN
   ↓
9. ESPERA CONFIRMACIÓ (miners/validators)
   ↓
10. FRONTEND ACTUALITZA UI
   ↓
11. ESCOLTA EVENTS PER ACTUALITZACIONS

# Amb npm
npm install ethers

# Amb yarn
yarn add ethers

# Versió actual: ethers v6.x

// ES6 Modules (React, modern)
import { ethers } from 'ethers';

// CommonJS (Node.js)
const { ethers } = require('ethers');

// Browser (CDN)
<script src="https://cdn.ethers.io/lib/ethers-6.0.umd.min.js"></script>

import { ethers } from 'ethers';

// Provider públic (només lectura)
const provider = new ethers.JsonRpcProvider('https://mainnet.infura.io/v3/YOUR_KEY');

// Provider de testnet
const sepoliaProvider = new ethers.JsonRpcProvider('https://sepolia.infura.io/v3/YOUR_KEY');

// Provider des de MetaMask (browser)
const provider = new ethers.BrowserProvider(window.ethereum);

// Llegir informació de la xarxa
const network = await provider.getNetwork();
console.log('Chain ID:', network.chainId);
console.log('Nom:', network.name);

// Llegir saldo d'una adreça
const balance = await provider.getBalance('0x71C7656EC7ab88b098defB751B7401B5f6d8976F');
console.log('Saldo:', ethers.formatEther(balance), 'ETH');

// Llegir número de bloc actual
const blockNumber = await provider.getBlockNumber();
console.log('Bloc actual:', blockNumber);

// Escolta de nous blocs
provider.on('block', (blockNumber) => {
    console.log('Nou bloc:', blockNumber);
});

// Obtenir signer des de MetaMask
async function getSigner() {
    // Demanar connexió a MetaMask
    await window.ethereum.request({ method: 'eth_requestAccounts' });

    const provider = new ethers.BrowserProvider(window.ethereum);
    const signer = await provider.getSigner();

    console.log('Adreça:', await signer.getAddress());
    console.log('Xarxa:', await signer.provider.getNetwork());

    return signer;
}

// Signar un missatge
async function signMessage(signer) {
    const message = 'Hola Blockchain!';
    const signature = await signer.signMessage(message);
    console.log('Signatura:', signature);

    // Verificar signatura
    const recoveredAddress = ethers.verifyMessage(message, signature);
    console.log('Adreça recuperada:', recoveredAddress);
}

// Signar transacció
async function sendTransaction(signer, to, amount) {
    const tx = await signer.sendTransaction({
        to: to,
        value: ethers.parseEther(amount)
    });

    console.log('TX Hash:', tx.hash);

    // Esperar confirmació
    const receipt = await tx.wait();
    console.log('Confirmat al bloc:', receipt.blockNumber);
}

// ABI del contracte (generat per Hardhat/Truffle)
const contractABI = [
    "function name() view returns (string)",
    "function symbol() view returns (string)",
    "function balanceOf(address) view returns (uint256)",
    "function transfer(address to, uint256 amount) returns (bool)",
    "event Transfer(address indexed from, address indexed to, uint256 value)"
];

// Adreça del contracte desplegat
const contractAddress = '0xYourContractAddress';

// Contracte de només lectura (amb provider)
const provider = new ethers.JsonRpcProvider('https://sepolia.infura.io/v3/YOUR_KEY');
const readOnlyContract = new ethers.Contract(contractAddress, contractABI, provider);

// Contracte amb capacitat d'escriptura (amb signer)
async function getWriteContract() {
    const signer = await getSigner();
    const contract = new ethers.Contract(contractAddress, contractABI, signer);
    return contract;
}

// Cridar funcions view (gratis)
async function readData() {
    const name = await readOnlyContract.name();
    const symbol = await readOnlyContract.symbol();
    const totalSupply = await readOnlyContract.totalSupply();

    console.log('Token:', name, `(${symbol})`);
    console.log('Total Supply:', ethers.formatEther(totalSupply));
}

// Cridar funcions que modifiquen estat (paga gas)
async function writeData() {
    const contract = await getWriteContract();

    const tx = await contract.transfer('0xRecipientAddress', ethers.parseEther('100'));
    console.log('TX enviada:', tx.hash);

    const receipt = await tx.wait();
    console.log('TX confirmada:', receipt.status);
}

// De string/number a wei (BigInt)
const amount1 = ethers.parseEther('1.5');  // 1.5 ETH en wei
const amount2 = ethers.parseUnits('100', 18);  // 100 tokens amb 18 decimals
const amount3 = ethers.parseUnits('50.5', 6);  // 50.5 tokens amb 6 decimals

// De wei a string/number llegible
const ethAmount = ethers.formatEther(amount1);  // "1.5"
const tokenAmount = ethers.formatUnits(amount2, 18);  // "100.0"
const usdcAmount = ethers.formatUnits(amount3, 6);  // "50.5"

// Conversió manual
const bigNumber = 1000000000000000000n;  // BigInt literal
const formatted = ethers.formatEther(bigNumber);  // "1.0"

// Adreces
const checksumAddress = ethers.getAddress('0x71c7656ec7ab88b098defb751b7401b5f6d8976f');
console.log(checksumAddress);  // "0x71C7656EC7ab88b098defB751B7401B5f6d8976F"

// Verificar adreça
const isValid = ethers.isAddress('0x71C7656EC7ab88b098defB751B7401B5f6d8976F');
console.log('És vàlida:', isValid);

// Hash
const hash = ethers.keccak256(ethers.toUtf8Bytes('Hola'));
console.log('Hash:', hash);

// Detectar si MetaMask està instal·lat
function isMetaMaskInstalled() {
    if (typeof window !== 'undefined' && window.ethereum) {
        return true;
    }
    return false;
}

// Detectar provider actual
function getCurrentProvider() {
    if (window.ethereum?.isMetaMask) {
        return 'MetaMask';
    } else if (window.ethereum?.isCoinbaseWallet) {
        return 'Coinbase Wallet';
    } else if (window.ethereum?.isTrust) {
        return 'Trust Wallet';
    }
    return 'Unknown';
}

import { ethers } from 'ethers';

class WalletConnector {
    constructor() {
        this.provider = null;
        this.signer = null;
        this.account = null;
        this.chainId = null;
    }

    // Connectar a MetaMask
    async connect() {
        try {
            // Verificar MetaMask
            if (!window.ethereum) {
                throw new Error('MetaMask no està instal·lat');
            }

            // Demanar accés als comptes
            const accounts = await window.ethereum.request({
                method: 'eth_requestAccounts'
            });

            // Inicialitzar provider i signer
            this.provider = new ethers.BrowserProvider(window.ethereum);
            this.signer = await this.provider.getSigner();
            this.account = accounts[0];

            // Obtenir chain ID
            const network = await this.provider.getNetwork();
            this.chainId = Number(network.chainId);

            console.log('Connectat:', this.account);
            console.log('Chain ID:', this.chainId);

            // Configurar listeners per canvis
            this.setupListeners();

            return {
                account: this.account,
                chainId: this.chainId,
                provider: this.provider,
                signer: this.signer
            };

        } catch (error) {
            console.error('Error connectant wallet:', error);
            throw error;
        }
    }

    // Desconnectar
    disconnect() {
        this.provider = null;
        this.signer = null;
        this.account = null;
        this.chainId = null;
        console.log('Desconnectat');
    }

    // Configurar listeners per canvis de compte/xarxa
    setupListeners() {
        // Canvi de compte
        window.ethereum.on('accountsChanged', (accounts) => {
            console.log('Compte canviat:', accounts);
            if (accounts.length === 0) {
                this.disconnect();
            } else {
                this.account = accounts[0];
                // Actualitzar UI
                this.onAccountChanged(accounts[0]);
            }
        });

        // Canvi de xarxa
        window.ethereum.on('chainChanged', (chainId) => {
            console.log('Xarxa canviada:', chainId);
            this.chainId = Number(chainId);
            // Recarregar pàgina per seguretat
            window.location.reload();
        });
    }

    // Callback per canvis de compte (sobreescriure)
    onAccountChanged(newAccount) {
        console.log('Actualitzar UI per:', newAccount);
    }

    // Obtenir saldo
    async getBalance(address = null) {
        const targetAddress = address || this.account;
        const balance = await this.provider.getBalance(targetAddress);
        return ethers.formatEther(balance);
    }
}

// Ús
const wallet = new WalletConnector();

// Botó de connexió
document.getElementById('connectBtn').addEventListener('click', async () => {
    try {
        const connection = await wallet.connect();
        console.log('Connectat:', connection.account);
    } catch (error) {
        console.error('Error:', error.message);
    }
});

async function switchNetwork(chainId) {
    const chainIdHex = '0x' + chainId.toString(16);

    try {
        await window.ethereum.request({
            method: 'wallet_switchEthereumChain',
            params: [{ chainId: chainIdHex }],
        });
    } catch (switchError) {
        // Xarxa no afegida a MetaMask
        if (switchError.code === 4902) {
            await addNetwork(chainId);
        } else {
            throw switchError;
        }
    }
}

async function addNetwork(chainId) {
    const networks = {
        1: {
            chainId: '0x1',
            chainName: 'Ethereum Mainnet',
            nativeCurrency: { name: 'ETH', symbol: 'ETH', decimals: 18 },
            rpcUrls: ['https://mainnet.infura.io/v3/'],
            blockExplorerUrls: ['https://etherscan.io']
        },
        11155111: {
            chainId: '0xaa36a7',
            chainName: 'Sepolia Testnet',
            nativeCurrency: { name: 'Sepolia ETH', symbol: 'ETH', decimals: 18 },
            rpcUrls: ['https://sepolia.infura.io/v3/'],
            blockExplorerUrls: ['https://sepolia.etherscan.io']
        },
        137: {
            chainId: '0x89',
            chainName: 'Polygon Mainnet',
            nativeCurrency: { name: 'MATIC', symbol: 'MATIC', decimals: 18 },
            rpcUrls: ['https://polygon-rpc.com'],
            blockExplorerUrls: ['https://polygonscan.com']
        }
    };

    const network = networks[chainId];
    if (!network) throw new Error('Xarxa no suportada');

    await window.ethereum.request({
        method: 'wallet_addEthereumChain',
        params: [network],
    });
}

// Ús
// Canviar a Sepolia
switchNetwork(11155111);

npm install @walletconnect/web3-provider

import WalletConnectProvider from "@walletconnect/web3-provider";

async function connectWalletConnect() {
    const provider = new WalletConnectProvider({
        rpc: {
            1: "https://mainnet.infura.io/v3/YOUR_KEY",
            11155111: "https://sepolia.infura.io/v3/YOUR_KEY"
        },
        chainId: 11155111,
    });

    // Enable session (triggers QR Code modal)
    await provider.enable();

    const ethersProvider = new ethers.BrowserProvider(provider);
    const signer = await ethersProvider.getSigner();

    console.log('Connectat via WalletConnect');
    return { provider, signer };
}

import { ethers } from 'ethers';

class ContractManager {
    constructor(provider, signer) {
        this.provider = provider;
        this.signer = signer;
        this.contracts = {};
    }

    // Carregar contracte amb ABI i adreça
    loadContract(name, address, abi) {
        // Contracte de lectura
        const readOnlyContract = new ethers.Contract(address, abi, this.provider);

        // Contracte d'escriptura (si hi ha signer)
        const writeContract = this.signer 
            ? new ethers.Contract(address, abi, this.signer)
            : null;

        this.contracts[name] = {
            read: readOnlyContract,
            write: writeContract,
            address: address,
            abi: abi
        };

        return this.contracts[name];
    }

    // Carregar des d'artefactes de Hardhat
    async loadFromArtifacts(name, artifacts, networkName = 'sepolia') {
        const deployment = artifacts.deployments?.[networkName]?.[name];

        if (!deployment) {
            throw new Error(`Contracte ${name} no trobat a ${networkName}`);
        }

        return this.loadContract(name, deployment.address, deployment.abi);
    }

    // Obtenir contracte
    getContract(name, write = false) {
        const contract = this.contracts[name];
        if (!contract) throw new Error(`Contracte ${name} no carregat`);
        return write ? contract.write : contract.read;
    }
}

// Exemple d'ús
const abi = [
    "function name() view returns (string)",
    "function symbol() view returns (string)",
    "function balanceOf(address) view returns (uint256)",
    "function transfer(address to, uint256 amount) returns (bool)",
    "event Transfer(address indexed from, address indexed to, uint256 value)"
];

const contractManager = new ContractManager(provider, signer);
const token = contractManager.loadContract('Token', '0xContractAddress', abi);

async function readTokenData(contract) {
    try {
        // Funcions simples
        const name = await contract.read.name();
        const symbol = await contract.read.symbol();
        const decimals = await contract.read.decimals();
        const totalSupply = await contract.read.totalSupply();

        console.log('=== Informació del Token ===');
        console.log('Nom:', name);
        console.log('Símbol:', symbol);
        console.log('Decimals:', decimals);
        console.log('Total Supply:', ethers.formatUnits(totalSupply, decimals));

        // Saldo d'un compte
        const account = '0xUserAddress';
        const balance = await contract.read.balanceOf(account);
        console.log('Saldo:', ethers.formatUnits(balance, decimals));

        // Múltiples crides en paral·lel (més eficient)
        const [name2, symbol2, supply2] = await Promise.all([
            contract.read.name(),
            contract.read.symbol(),
            contract.read.totalSupply()
        ]);

        return {
            name,
            symbol,
            decimals,
            totalSupply: ethers.formatUnits(totalSupply, decimals),
            balance: ethers.formatUnits(balance, decimals)
        };

    } catch (error) {
        console.error('Error llegint dades:', error);
        throw error;
    }
}

async function transferTokens(contract, to, amount) {
    try {
        // Preparar transacció
        const amountWei = ethers.parseUnits(amount.toString(), 18);

        // Estimar gas (opcional però recomanat)
        const gasEstimate = await contract.write.transfer.estimateGas(to, amountWei);
        console.log('Gas estimat:', gasEstimate.toString());

        // Enviar transacció
        const tx = await contract.write.transfer(to, amountWei, {
            gasLimit: gasEstimate * 120n / 100n  // 20% buffer
        });

        console.log('Transacció enviada:', tx.hash);
        console.log('Esperant confirmació...');

        // Esperar confirmació
        const receipt = await tx.wait();

        console.log('Transacció confirmada!');
        console.log('Bloc:', receipt.blockNumber);
        console.log('Gas utilitzat:', receipt.gasUsed.toString());

        return {
            hash: tx.hash,
            blockNumber: receipt.blockNumber,
            status: receipt.status,
            gasUsed: receipt.gasUsed.toString()
        };

    } catch (error) {
        console.error('Error en transferència:', error);

        // Analitzar error
        if (error.reason) {
            console.error('Motiu:', error.reason);
        }
        if (error.code) {
            console.error('Codi:', error.code);
        }

        throw error;
    }
}

// Transacció amb valor en ETH
async function depositETH(contract, amount) {
    const tx = await contract.write.deposit({
        value: ethers.parseEther(amount.toString())
    });
    await tx.wait();
    return tx.hash;
}

// Contracte Multicall (disponible a la majoria de xarxes)
const MULTICALL_ADDRESS = '0xcA11bde05977b3631167028862bE2a173976CA11';

async function multicall(contracts, calls) {
    // calls = [
    //   { contract: tokenContract, function: 'balanceOf', args: [address1] },
    //   { contract: tokenContract, function: 'balanceOf', args: [address2] },
    // ]

    const callData = calls.map(call => ({
        target: call.contract.address,
        callData: call.contract.interface.encodeFunctionData(call.function, call.args)
    }));

    const multicallContract = new ethers.Contract(
        MULTICALL_ADDRESS,
        ['function aggregate(tuple(address target, bytes callData)[] calls) view returns (uint256 blockNumber, bytes[] returnData)'],
        provider
    );

    const [, returnData] = await multicallContract.aggregate(callData);

    return calls.map((call, i) => {
        return call.contract.interface.decodeFunctionResult(call.function, returnData[i]);
    });
}

class TransactionManager {
    constructor(provider) {
        this.provider = provider;
        this.pendingTxs = new Map();
    }

    // Enviar transacció amb tracking
    async sendTransaction(txRequest, callbacks = {}) {
        const { onPending, onConfirming, onConfirmed, onError } = callbacks;

        try {
            // Enviar
            const tx = await txRequest();
            const txHash = tx.hash;

            console.log('TX enviada:', txHash);
            this.pendingTxs.set(txHash, { status: 'pending', timestamp: Date.now() });

            if (onPending) onPending(txHash);

            // Esperar primera confirmació
            onConfirming && onConfirming(txHash, 0);
            const receipt = await tx.wait();

            // Actualitzar estat
            this.pendingTxs.set(txHash, { 
                status: 'confirmed', 
                receipt,
                confirmations: receipt.confirmations 
            });

            if (onConfirmed) onConfirmed(receipt);

            return receipt;

        } catch (error) {
            console.error('Error TX:', error);
            this.pendingTxs.delete(txHash);

            if (onError) onError(error);
            throw error;
        }
    }

    // Esperar múltiples confirmacions
    async waitForConfirmations(txHash, confirmations = 3) {
        const tx = await this.provider.getTransaction(txHash);
        if (!tx) throw new Error('Transacció no trobada');

        let currentConfirmations = 0;

        while (currentConfirmations < confirmations) {
            const receipt = await this.provider.getTransactionReceipt(txHash);
            if (!receipt) {
                await this.sleep(1000);
                continue;
            }

            const currentBlock = await this.provider.getBlockNumber();
            currentConfirmations = currentBlock - receipt.blockNumber + 1;

            console.log(`Confirmacions: ${currentConfirmations}/${confirmations}`);

            if (currentConfirmations < confirmations) {
                await this.sleep(3000);  // Esperar 3 segons
            }
        }

        return await this.provider.getTransactionReceipt(txHash);
    }

    // Obtenir estat de TX
    async getTransactionStatus(txHash) {
        const tx = await this.provider.getTransaction(txHash);
        if (!tx) return { status: 'not_found' };

        const receipt = await this.provider.getTransactionReceipt(txHash);
        if (!receipt) return { status: 'pending', tx };

        const currentBlock = await this.provider.getBlockNumber();
        const confirmations = currentBlock - receipt.blockNumber + 1;

        return {
            status: receipt.status === 1 ? 'confirmed' : 'failed',
            confirmations,
            blockNumber: receipt.blockNumber,
            gasUsed: receipt.gasUsed.toString(),
            tx
        };
    }

    sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}

// Ús
const txManager = new TransactionManager(provider);

await txManager.sendTransaction(
    () => contract.write.transfer(to, amount),
    {
        onPending: (hash) => console.log('Pendent:', hash),
        onConfirming: (hash, conf) => console.log('Confirmant:', conf),
        onConfirmed: (receipt) => console.log('Confirmat!', receipt),
        onError: (error) => console.error('Error:', error)
    }
);

async function estimateAndSend(contract, functionName, args, options = {}) {
    const { gasMultiplier = 1.2, maxFeePerGas, maxPriorityFeePerGas } = options;

    // Estimar gas
    let gasLimit;
    try {
        gasLimit = await contract.write[functionName].estimateGas(...args);
        gasLimit = (gasLimit * BigInt(Math.floor(gasMultiplier * 100))) / 100n;
    } catch (error) {
        console.error('Error estimant gas:', error);
        throw new Error('No es pot estimar el gas');
    }

    // Obtenir preu de gas actual
    const feeData = await provider.getFeeData();

    // Preparar opció de gas
    const txOptions = {
        gasLimit,
        maxFeePerGas: maxFeePerGas || feeData.maxFeePerGas,
        maxPriorityFeePerGas: maxPriorityFeePerGas || feeData.maxPriorityFeePerGas
    };

    // Enviar
    const tx = await contract.write[functionName](...args, txOptions);
    return await tx.wait();
}

// Tipus de transaccions
async function sendLegacyTx(signer, to, value) {
    // Transacció legacy (tipus 0)
    const tx = await signer.sendTransaction({
        to,
        value,
        gasPrice: await provider.getFeeData().then(f => f.gasPrice)
    });
    return tx.wait();
}

async function sendEIP1559Tx(signer, to, value) {
    // Transacció EIP-1559 (tipus 2) - Ethereum post-London
    const feeData = await provider.getFeeData();

    const tx = await signer.sendTransaction({
        to,
        value,
        maxFeePerGas: feeData.maxFeePerGas,
        maxPriorityFeePerGas: feeData.maxPriorityFeePerGas
    });
    return tx.wait();
}

function parseTransactionError(error) {
    const errorInfo = {
        code: error.code,
        reason: error.reason,
        message: error.message,
        userFriendly: 'Error desconegut'
    };

    // Errors comuns
    switch (error.code) {
        case 'ACTION_REJECTED':
        case 4001:
            errorInfo.userFriendly = 'Transacció rebutjada per l\'usuari';
            break;

        case 'INSUFFICIENT_FUNDS':
        case -32000:
            errorInfo.userFriendly = 'Saldo insuficient per pagar el gas';
            break;

        case 'NONCE_TOO_LOW':
            errorInfo.userFriendly = 'Nonce massa baix. Intenta-ho de nou.';
            break;

        case 'REPLACEMENT_UNDERPRICED':
            errorInfo.userFriendly = 'Preu de gas massa baix per reemplaçar TX';
            break;

        case 'UNPREDICTABLE_GAS_LIMIT':
            errorInfo.userFriendly = 'Error en l\'execució. Revisa els paràmetres.';
            break;

        default:
            // Analitzar revert reason
            if (error.reason) {
                errorInfo.userFriendly = `Error: ${error.reason}`;
            } else if (error.data?.message) {
                errorInfo.userFriendly = error.data.message;
            }
    }

    console.error('Error detallat:', errorInfo);
    return errorInfo;
}

// Ús amb try-catch
async function safeTransfer(contract, to, amount) {
    try {
        const tx = await contract.write.transfer(to, ethers.parseEther(amount.toString()));
        return await tx.wait();
    } catch (error) {
        const parsedError = parseTransactionError(error);

        // Mostrar error a l'usuari
        alert(parsedError.userFriendly);

        // Log per debugging
        console.error('Error complet:', error);

        throw error;
    }
}

class EventListener {
    constructor(contract) {
        this.contract = contract;
        this.listeners = new Map();
    }

    // Escoltar event específic
    onEvent(eventName, callback) {
        const listener = this.contract.on(eventName, (...args) => {
            const event = args[args.length - 1];
            callback({
                eventName,
                data: args.slice(0, -1),
                event: event,
                blockNumber: event.blockNumber,
                transactionHash: event.log.transactionHash
            });
        });

        this.listeners.set(eventName, listener);
        return listener;
    }

    // Escoltar Transfer events (ERC20)
    onTransfer(callback) {
        return this.onEvent('Transfer', (data) => {
            console.log('Transferència detectada:', {
                from: data.data[0],
                to: data.data[1],
                value: ethers.formatEther(data.data[2]),
                block: data.blockNumber
            });
            callback(data);
        });
    }

    // Escolta temporal (un sol cop)
    onceEvent(eventName, callback) {
        return this.contract.once(eventName, (...args) => {
            const event = args[args.length - 1];
            callback({
                eventName,
                data: args.slice(0, -1),
                event
            });
            // Auto-remove listener
            this.listeners.delete(eventName);
        });
    }

    // Remoure listener
    offEvent(eventName) {
        if (this.listeners.has(eventName)) {
            this.contract.removeListener(eventName, this.listeners.get(eventName));
            this.listeners.delete(eventName);
        }
    }

    // Remoure tots els listeners
    removeAllListeners() {
        this.listeners.forEach((listener, eventName) => {
            this.contract.removeListener(eventName, listener);
        });
        this.listeners.clear();
    }

    // Obtenir events passats
    async getPastEvents(eventName, fromBlock, toBlock = 'latest') {
        const filter = {
            address: await this.contract.getAddress(),
            topics: [
                this.contract.interface.getEvent(eventName).topicHash
            ]
        };

        const logs = await this.provider.getLogs({
            ...filter,
            fromBlock,
            toBlock
        });

        return logs.map(log => this.contract.interface.parseLog(log));
    }
}

// Ús
const eventListener = new EventListener(contract, provider);

// Escoltar transferències en temps real
eventListener.onTransfer((data) => {
    console.log('Nova transferència!');
    console.log('De:', data.data[0]);
    console.log('A:', data.data[1]);
    console.log('Quantitat:', ethers.formatEther(data.data[2]));

    // Actualitzar UI
    updateBalanceUI(data.data[1]);
});

// Després de 5 minuts, parar d'escoltar
setTimeout(() => {
    eventListener.offEvent('Transfer');
}, 300000);

// Filtrar events per adreça específica
async function getMyTransfers(contract, myAddress, fromBlock = 0) {
    const filter = contract.filters.Transfer(null, myAddress);

    const events = await contract.queryFilter(filter, fromBlock, 'latest');

    return events.map(event => ({
        from: event.args.from,
        to: event.args.to,
        value: ethers.formatEther(event.args.value),
        block: event.blockNumber,
        txHash: event.transactionHash
    }));
}

// Filtrar per rang de valors
async function getLargeTransfers(contract, minValue, fromBlock) {
    const events = await contract.queryFilter('Transfer', fromBlock, 'latest');

    return events.filter(event => {
        const value = event.args.value;
        return value >= ethers.parseEther(minValue.toString());
    }).map(event => ({
        from: event.args.from,
        to: event.args.to,
        value: ethers.formatEther(event.args.value),
        block: event.blockNumber
    }));
}

// Escoltar múltiples events
async function listenToMultipleEvents(contract) {
    contract.on('Transfer', (from, to, value, event) => {
        console.log('Transfer:', ethers.formatEther(value), 'de', from, 'a', to);
    });

    contract.on('Approval', (owner, spender, value, event) => {
        console.log('Approval:', ethers.formatEther(value), 'de', owner, 'per', spender);
    });
}

# Crear projecte React
npx create-react-app my-dapp
cd my-dapp

# Instal·lar dependències
npm install ethers@6
npm install @rainbow-me/rainbowkit  # Opcional: millor UX de wallet
npm install wagmi  # Opcional: hooks per React

# O instal·lació mínima
npm install ethers@6

// hooks/useWeb3.js
import { useState, useEffect, useCallback } from 'react';
import { ethers } from 'ethers';

export function useWeb3() {
    const [account, setAccount] = useState(null);
    const [provider, setProvider] = useState(null);
    const [signer, setSigner] = useState(null);
    const [chainId, setChainId] = useState(null);
    const [isConnecting, setIsConnecting] = useState(false);
    const [error, setError] = useState(null);

    // Connectar wallet
    const connect = useCallback(async () => {
        setIsConnecting(true);
        setError(null);

        try {
            if (!window.ethereum) {
                throw new Error('MetaMask no està instal·lat');
            }

            const accounts = await window.ethereum.request({
                method: 'eth_requestAccounts'
            });

            const browserProvider = new ethers.BrowserProvider(window.ethereum);
            const browserSigner = await browserProvider.getSigner();
            const network = await browserProvider.getNetwork();

            setProvider(browserProvider);
            setSigner(browserSigner);
            setAccount(accounts[0]);
            setChainId(Number(network.chainId));

            // Configurar listeners
            setupListeners(browserProvider);

        } catch (err) {
            setError(err.message);
            console.error('Error connectant:', err);
        } finally {
            setIsConnecting(false);
        }
    }, []);

    // Desconnectar
    const disconnect = useCallback(() => {
        setAccount(null);
        setProvider(null);
        setSigner(null);
        setChainId(null);
        setError(null);
    }, []);

    // Configurar listeners per canvis
    const setupListeners = useCallback((browserProvider) => {
        window.ethereum.on('accountsChanged', (accounts) => {
            if (accounts.length === 0) {
                disconnect();
            } else {
                setAccount(accounts[0]);
            }
        });

        window.ethereum.on('chainChanged', () => {
            window.location.reload();
        });
    }, [disconnect]);

    // Netejar listeners al desmuntar
    useEffect(() => {
        return () => {
            if (window.ethereum) {
                window.ethereum.removeAllListeners();
            }
        };
    }, []);

    // Comprovar connexió existent
    useEffect(() => {
        const checkConnection = async () => {
            if (window.ethereum) {
                try {
                    const accounts = await window.ethereum.request({
                        method: 'eth_accounts'
                    });

                    if (accounts.length > 0) {
                        const browserProvider = new ethers.BrowserProvider(window.ethereum);
                        const browserSigner = await browserProvider.getSigner();
                        const network = await browserProvider.getNetwork();

                        setProvider(browserProvider);
                        setSigner(browserSigner);
                        setAccount(accounts[0]);
                        setChainId(Number(network.chainId));
                        setupListeners(browserProvider);
                    }
                } catch (err) {
                    console.error('Error checkant connexió:', err);
                }
            }
        };

        checkConnection();
    }, [setupListeners]);

    return {
        account,
        provider,
        signer,
        chainId,
        isConnecting,
        error,
        connect,
        disconnect,
        isConnected: !!account
    };
}

export default useWeb3;