Ethereum pour les développeurs web : smart contracts sans le battage médiatique

interface Transaction {
  // Qui reçoit cette transaction — une adresse EOA ou une adresse de contrat
  to: string;      // adresse hexadécimale de 20 octets, ou null pour le déploiement de contrat
  // Combien d'ETH envoyer (en wei)
  value: bigint;   // Peut être 0n pour les appels de contrat purs
  // Données d'appel de fonction encodées, ou vide pour les transferts ETH simples
  data: string;    // Octets encodés en hex, "0x" pour les transferts simples
  // Compteur séquentiel, empêche les attaques par rejeu
  nonce: number;   // Doit être exactement égal au nonce actuel de l'expéditeur
  // Limite de gas — gas maximum que cette tx peut consommer
  gasLimit: bigint;
  // Paramètres de frais EIP-1559
  maxFeePerGas: bigint;
  maxPriorityFeePerGas: bigint;
  // Identifiant de chaîne (1 = mainnet, 11155111 = Sepolia, 137 = Polygon)
  chainId: number;
}

import { ethers } from "ethers";
 
const provider = new ethers.JsonRpcProvider("https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY");
const wallet = new ethers.Wallet("0xYOUR_PRIVATE_KEY", provider);
 
const tx = await wallet.sendTransaction({
  to: "0xRecipientAddress...",
  value: ethers.parseEther("0.1"), // Convertit "0.1" en wei (100000000000000000n)
});
 
console.log("Hash de la tx :", tx.hash);
 
// Attendre l'inclusion dans un bloc
const receipt = await tx.wait();
console.log("Numéro de bloc :", receipt.blockNumber);
console.log("Gas utilisé :", receipt.gasUsed.toString());
console.log("Statut :", receipt.status); // 1 = succès, 0 = revert

import { createWalletClient, http, parseEther } from "viem";
import { mainnet } from "viem/chains";
import { privateKeyToAccount } from "viem/accounts";
 
const account = privateKeyToAccount("0xYOUR_PRIVATE_KEY");
 
const client = createWalletClient({
  account,
  chain: mainnet,
  transport: http("https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY"),
});
 
const hash = await client.sendTransaction({
  to: "0xRecipientAddress...",
  value: parseEther("0.1"),
});
 
console.log("Hash de la tx :", hash);

const ERC20_ABI = [
  // Fonctions en lecture seule (view/pure — pas de coût en gas quand appelées de l'extérieur)
  "function name() view returns (string)",
  "function symbol() view returns (string)",
  "function decimals() view returns (uint8)",
  "function totalSupply() view returns (uint256)",
  "function balanceOf(address owner) view returns (uint256)",
  "function allowance(address owner, address spender) view returns (uint256)",
 
  // Fonctions qui changent l'état (nécessitent une transaction, coûtent du gas)
  "function transfer(address to, uint256 amount) returns (bool)",
  "function approve(address spender, uint256 amount) returns (bool)",
  "function transferFrom(address from, address to, uint256 amount) returns (bool)",
 
  // Événements (émis pendant l'exécution, stockés dans les logs de transaction)
  "event Transfer(address indexed from, address indexed to, uint256 value)",
  "event Approval(address indexed owner, address indexed spender, uint256 value)",
] as const;

import { ethers } from "ethers";
 
const iface = new ethers.Interface(ERC20_ABI);
 
// Encoder un appel de fonction
const calldata = iface.encodeFunctionData("transfer", [
  "0xBobAddress...",
  1000000n,
]);
console.log(calldata);
// 0xa9059cbb000000000000000000000000bob...000000000000000000000000000f4240
 
// Décoder les calldata en nom de fonction et arguments
const decoded = iface.parseTransaction({ data: calldata });
console.log(decoded.name);       // "transfer"
console.log(decoded.args[0]);    // "0xBobAddress..."
console.log(decoded.args[1]);    // 1000000n (BigInt)
 
// Décoder les données de retour d'une fonction
const returnData = "0x0000000000000000000000000000000000000000000000000000000000000001";
const result = iface.decodeFunctionResult("transfer", returnData);
console.log(result[0]); // true

// Lire le slot de stockage 0 d'un contrat
const slot0 = await provider.getStorage(
  "0xContractAddress...",
  0
);
console.log(slot0); // Valeur hex brute de 32 octets

// Écouter les événements Transfer en temps réel avec ethers.js
const contract = new ethers.Contract(tokenAddress, ERC20_ABI, provider);
 
contract.on("Transfer", (from, to, value, event) => {
  console.log(`${from} -> ${to}: ${ethers.formatUnits(value, 18)} jetons`);
  console.log("Bloc :", event.log.blockNumber);
  console.log("Hash de tx :", event.log.transactionHash);
});
 
// Interroger les événements historiques
const filter = contract.filters.Transfer(null, "0xMyAddress..."); // from=quelconque, to=spécifique
const events = await contract.queryFilter(filter, 19000000, 19100000); // plage de blocs
 
for (const event of events) {
  console.log("De :", event.args.from);
  console.log("Valeur :", event.args.value.toString());
}

import { createPublicClient, http, parseAbiItem } from "viem";
import { mainnet } from "viem/chains";
 
const client = createPublicClient({
  chain: mainnet,
  transport: http("https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY"),
});
 
// Logs historiques
const logs = await client.getLogs({
  address: "0xTokenAddress...",
  event: parseAbiItem(
    "event Transfer(address indexed from, address indexed to, uint256 value)"
  ),
  args: {
    to: "0xMyAddress...",
  },
  fromBlock: 19000000n,
  toBlock: 19100000n,
});
 
for (const log of logs) {
  console.log("De :", log.args.from);
  console.log("À :", log.args.to);
  console.log("Valeur :", log.args.value);
}
 
// Surveillance en temps réel
const unwatch = client.watchEvent({
  address: "0xTokenAddress...",
  event: parseAbiItem(
    "event Transfer(address indexed from, address indexed to, uint256 value)"
  ),
  onLogs: (logs) => {
    for (const log of logs) {
      console.log(`Transfert : ${log.args.from} -> ${log.args.to}`);
    }
  },
});
 
// Appeler unwatch() pour arrêter l'écoute

// Voici ce que votre bibliothèque fait sous le capot
const response = await fetch("https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    jsonrpc: "2.0",
    id: 1,
    method: "eth_call",
    params: [
      {
        to: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", // USDC
        data: "0x70a08231000000000000000000000000d8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
        // balanceOf(vitalik.eth)
      },
      "latest",
    ],
  }),
});
 
const result = await response.json();
console.log(result);
// { jsonrpc: "2.0", id: 1, result: "0x000000000000000000000000000000000000000000000000000000174876e800" }

import { ethers } from "ethers";
 
// Fournisseur fallback ethers.js v6
const provider = new ethers.FallbackProvider([
  {
    provider: new ethers.JsonRpcProvider("https://eth-mainnet.g.alchemy.com/v2/KEY1"),
    priority: 1,
    stallTimeout: 2000,
    weight: 2,
  },
  {
    provider: new ethers.JsonRpcProvider("https://mainnet.infura.io/v3/KEY2"),
    priority: 2,
    stallTimeout: 2000,
    weight: 1,
  },
]);

import { ethers } from "ethers";
 
const provider = new ethers.JsonRpcProvider("https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY");
 
// Interface ERC-20 — juste les fonctions de lecture
const erc20 = new ethers.Contract(
  "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", // USDC
  [
    "function name() view returns (string)",
    "function symbol() view returns (string)",
    "function decimals() view returns (uint8)",
    "function totalSupply() view returns (uint256)",
    "function balanceOf(address) view returns (uint256)",
  ],
  provider // Note : provider, pas signer. Lecture seule.
);
 
const [name, symbol, decimals, totalSupply] = await Promise.all([
  erc20.name(),
  erc20.symbol(),
  erc20.decimals(),
  erc20.totalSupply(),
]);
 
console.log(`${name} (${symbol})`);           // "USD Coin (USDC)"
console.log(`Décimales : ${decimals}`);        // 6 (PAS 18 !)
console.log(`Supply total : ${ethers.formatUnits(totalSupply, decimals)}`);
 
// Vérifier le solde d'une adresse spécifique
const balance = await erc20.balanceOf("0xSomeAddress...");
console.log(`Solde : ${ethers.formatUnits(balance, decimals)} USDC`);

import { ethers } from "ethers";
 
// Se connecter à un nœud
const provider = new ethers.JsonRpcProvider("https://...");
 
// Requêtes de base
const blockNumber = await provider.getBlockNumber();
const balance = await provider.getBalance("0xAddress...");
const block = await provider.getBlock(blockNumber);
const txCount = await provider.getTransactionCount("0xAddress...");

// Depuis une clé privée (côté serveur, scripts)
const wallet = new ethers.Wallet("0xPrivateKey...", provider);
 
// Depuis un portefeuille navigateur (côté client)
const browserProvider = new ethers.BrowserProvider(window.ethereum);
const signer = await browserProvider.getSigner();
 
// Obtenir l'adresse
const address = await signer.getAddress();

const usdc = new ethers.Contract(USDC_ADDRESS, ERC20_ABI, provider);
 
// Lecture (gratuit, retourne la valeur directement)
const balance = await usdc.balanceOf("0xSomeAddress...");
// balance est un bigint : 1000000000n (1000 USDC avec 6 décimales)
 
// Pour écrire, connecter avec un signer
const usdcWithSigner = usdc.connect(signer);
 
// Écriture (coûte du gas, retourne une TransactionResponse)
const tx = await usdcWithSigner.transfer("0xRecipient...", 1000000n);
const receipt = await tx.wait(); // Attendre l'inclusion dans un bloc
 
if (receipt.status === 0) {
  throw new Error("Transaction annulée (revert)");
}

// Sans TypeChain — pas de vérification de type
const balance = await contract.balanceOf("0x...");
// balance est 'any'. Pas d'autocomplétion. Facile à mal utiliser.
 
// Avec TypeChain — sécurité de type complète
import { USDC__factory } from "./typechain";
 
const usdc = USDC__factory.connect(USDC_ADDRESS, provider);
const balance = await usdc.balanceOf("0x...");
// balance est BigNumber. L'autocomplétion fonctionne. Les erreurs de type sont détectées à la compilation.

// WebSocket pour les événements en temps réel
const wsProvider = new ethers.WebSocketProvider("wss://eth-mainnet.g.alchemy.com/v2/YOUR_KEY");
 
const contract = new ethers.Contract(USDC_ADDRESS, ERC20_ABI, wsProvider);
 
// Écouter tous les événements Transfer
contract.on("Transfer", (from, to, value, event) => {
  console.log(`Transfert : ${from} -> ${to}`);
  console.log(`Montant : ${ethers.formatUnits(value, 6)} USDC`);
});
 
// Écouter les transferts VERS une adresse spécifique
const filter = contract.filters.Transfer(null, "0xMyAddress...");
contract.on(filter, (from, to, value) => {
  console.log(`Transfert entrant : ${ethers.formatUnits(value, 6)} USDC de ${from}`);
});
 
// Nettoyer quand c'est fini
contract.removeAllListeners();

// wagmi.config.ts
import { createConfig, http } from "wagmi";
import { mainnet, sepolia } from "wagmi/chains";
import { injected, walletConnect } from "wagmi/connectors";
 
export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [
    injected(),
    walletConnect({ projectId: "YOUR_WALLETCONNECT_PROJECT_ID" }),
  ],
  transports: {
    [mainnet.id]: http("https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY"),
    [sepolia.id]: http("https://eth-sepolia.g.alchemy.com/v2/YOUR_KEY"),
  },
});

// app/providers.tsx
"use client";
 
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "./wagmi.config";
 
const queryClient = new QueryClient();
 
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  );
}

"use client";
 
import { useReadContract } from "wagmi";
import { formatUnits } from "viem";
 
const ERC20_ABI = [
  {
    name: "balanceOf",
    type: "function",
    stateMutability: "view",
    inputs: [{ name: "owner", type: "address" }],
    outputs: [{ name: "balance", type: "uint256" }],
  },
] as const;
 
function TokenBalance({ address }: { address: `0x${string}` }) {
  const { data: balance, isLoading, error } = useReadContract({
    address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", // USDC
    abi: ERC20_ABI,
    functionName: "balanceOf",
    args: [address],
  });
 
  if (isLoading) return <span>Chargement...</span>;
  if (error) return <span>Erreur : {error.message}</span>;
 
  // balance est typé comme bigint parce que l'ABI dit uint256
  return <span>{formatUnits(balance ?? 0n, 6)} USDC</span>;
}

"use client";
 
import { useWriteContract, useWaitForTransactionReceipt } from "wagmi";
import { parseUnits } from "viem";
 
function SendTokens() {
  const { writeContract, data: hash, isPending, error } = useWriteContract();
 
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({
    hash,
  });
 
  function handleSend() {
    writeContract({
      address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
      abi: ERC20_ABI,
      functionName: "transfer",
      args: [
        "0xRecipientAddress...",
        parseUnits("100", 6), // 100 USDC
      ],
    });
  }
 
  return (
    <div>
      <button onClick={handleSend} disabled={isPending}>
        {isPending ? "Confirmez dans le portefeuille..." : "Envoyer 100 USDC"}
      </button>
 
      {hash && <p>Transaction : {hash}</p>}
      {isConfirming && <p>En attente de confirmation...</p>}
      {isSuccess && <p>Transfert confirmé !</p>}
      {error && <p>Erreur : {error.message}</p>}
    </div>
  );
}

"use client";
 
import { useWatchContractEvent } from "wagmi";
import { useState } from "react";
import { formatUnits } from "viem";
 
interface TransferEvent {
  from: string;
  to: string;
  value: string;
}
 
function LiveTransfers() {
  const [transfers, setTransfers] = useState<TransferEvent[]>([]);
 
  useWatchContractEvent({
    address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
    abi: ERC20_ABI,
    eventName: "Transfer",
    onLogs(logs) {
      const newTransfers = logs.map((log) => ({
        from: log.args.from as string,
        to: log.args.to as string,
        value: formatUnits(log.args.value as bigint, 6),
      }));
      setTransfers((prev) => [...newTransfers, ...prev].slice(0, 50));
    },
  });
 
  return (
    <ul>
      {transfers.map((t, i) => (
        <li key={i}>
          {t.from.slice(0, 8)}... → {t.to.slice(0, 8)}... : {t.value} USDC
        </li>
      ))}
    </ul>
  );
}

interface EIP1193Provider {
  request(args: { method: string; params?: unknown[] }): Promise<unknown>;
  on(event: string, handler: (...args: unknown[]) => void): void;
  removeListener(event: string, handler: (...args: unknown[]) => void): void;
}

// Interaction bas niveau avec le portefeuille (vous ne devriez pas le faire directement, mais c'est utile à comprendre)
 
// Demander l'accès au compte
const accounts = await window.ethereum.request({
  method: "eth_requestAccounts",
});
console.log("Adresse connectée :", accounts[0]);
 
// Obtenir la chaîne actuelle
const chainId = await window.ethereum.request({
  method: "eth_chainId",
});
console.log("ID de chaîne :", parseInt(chainId, 16)); // "0x1" -> 1 (mainnet)
 
// Écouter les changements de compte (l'utilisateur change de compte dans MetaMask)
window.ethereum.on("accountsChanged", (accounts: string[]) => {
  if (accounts.length === 0) {
    console.log("Portefeuille déconnecté");
  } else {
    console.log("Basculé vers :", accounts[0]);
  }
});
 
// Écouter les changements de chaîne (l'utilisateur change de réseau)
window.ethereum.on("chainChanged", (chainId: string) => {
  // L'approche recommandée est de recharger la page
  window.location.reload();
});

// Découvrir tous les portefeuilles disponibles
interface EIP6963ProviderDetail {
  info: {
    uuid: string;
    name: string;
    icon: string;
    rdns: string;  // Nom de domaine inversé, par ex. "io.metamask"
  };
  provider: EIP1193Provider;
}
 
const wallets: EIP6963ProviderDetail[] = [];
 
window.addEventListener("eip6963:announceProvider", (event: CustomEvent) => {
  wallets.push(event.detail);
});
 
// Demander à tous les portefeuilles de s'annoncer
window.dispatchEvent(new Event("eip6963:requestProvider"));
 
// Maintenant 'wallets' contient tous les portefeuilles installés avec leurs noms et icônes
// Vous pouvez afficher une interface de sélection de portefeuille

import { walletConnect } from "wagmi/connectors";
 
const connector = walletConnect({
  projectId: "YOUR_PROJECT_ID", // Obtenir sur cloud.walletconnect.com
  showQrModal: true,
});

"use client";
 
import { useAccount, useSwitchChain } from "wagmi";
import { mainnet } from "wagmi/chains";
 
function NetworkGuard({ children }: { children: React.ReactNode }) {
  const { chain } = useAccount();
  const { switchChain, isPending } = useSwitchChain();
 
  if (!chain) return <p>Veuillez connecter votre portefeuille</p>;
 
  if (chain.id !== mainnet.id) {
    return (
      <div>
        <p>Veuillez basculer vers Ethereum Mainnet</p>
        <button
          onClick={() => switchChain({ chainId: mainnet.id })}
          disabled={isPending}
        >
          {isPending ? "Changement en cours..." : "Changer de réseau"}
        </button>
      </div>
    );
  }
 
  return <>{children}</>;
}

{
  "name": "Cool NFT #42",
  "description": "Un NFT très cool",
  "image": "ipfs://QmImageHash...",
  "attributes": [
    { "trait_type": "Background", "value": "Blue" },
    { "trait_type": "Rarity", "value": "Legendary" }
  ]
}

function ipfsToHttp(uri: string): string {
  if (uri.startsWith("ipfs://")) {
    const cid = uri.replace("ipfs://", "");
    return `https://ipfs.io/ipfs/${cid}`;
    // Ou utilisez une passerelle dédiée :
    // return `https://YOUR_PROJECT.mypinata.cloud/ipfs/${cid}`;
  }
  return uri;
}
 
// Récupérer les métadonnées NFT
async function getNftMetadata(
  contractAddress: string,
  tokenId: bigint,
  provider: ethers.Provider
) {
  const contract = new ethers.Contract(
    contractAddress,
    ["function tokenURI(uint256 tokenId) view returns (string)"],
    provider
  );
 
  const tokenUri = await contract.tokenURI(tokenId);
  const httpUri = ipfsToHttp(tokenUri);
 
  const response = await fetch(httpUri);
  const metadata = await response.json();
 
  return {
    name: metadata.name,
    description: metadata.description,
    image: ipfsToHttp(metadata.image),
    attributes: metadata.attributes,
  };
}

// Upload sur Pinata
async function pinToIpfs(file: File): Promise<string> {
  const formData = new FormData();
  formData.append("file", file);
 
  const response = await fetch("https://api.pinata.cloud/pinning/pinFileToIPFS", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${PINATA_JWT}`,
    },
    body: formData,
  });
 
  const result = await response.json();
  return `ipfs://${result.IpfsHash}`; // Retourne le CID
}

# Schéma du subgraph (schema.graphql)
type Transfer @entity {
  id: Bytes!
  from: Bytes!
  to: Bytes!
  value: BigInt!
  blockNumber: BigInt!
  timestamp: BigInt!
}
 
type Account @entity {
  id: Bytes!
  balance: BigInt!
  transfersFrom: [Transfer!]! @derivedFrom(field: "from")
  transfersTo: [Transfer!]! @derivedFrom(field: "to")
}

// Interroger un subgraph depuis votre frontend
const SUBGRAPH_URL =
  "https://api.studio.thegraph.com/query/YOUR_ID/YOUR_SUBGRAPH/v0.0.1";
 
async function getRecentTransfers(address: string) {
  const query = `
    query GetTransfers($address: Bytes!) {
      transfers(
        where: { from: $address }
        orderBy: blockNumber
        orderDirection: desc
        first: 100
      ) {
        id
        from
        to
        value
        blockNumber
        timestamp
      }
    }
  `;
 
  const response = await fetch(SUBGRAPH_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ query, variables: { address } }),
  });
 
  const { data } = await response.json();
  return data.transfers;
}

// Alchemy : Obtenir tous les soldes de jetons ERC-20 pour une adresse
const response = await fetch(
  `https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY`,
  {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      jsonrpc: "2.0",
      id: 1,
      method: "alchemy_getTokenBalances",
      params: ["0xAddress...", "erc20"],
    }),
  }
);
 
// Retourne TOUS les soldes de jetons ERC-20 en un seul appel
// vs. scanner le balanceOf() de chaque contrat ERC-20 possible

// Alchemy : Obtenir tous les NFTs détenus par une adresse
const response = await fetch(
  `https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY/getNFTs?owner=0xAddress...`
);
 
const { ownedNfts } = await response.json();
for (const nft of ownedNfts) {
  console.log(`${nft.title} - ${nft.contract.address}#${nft.tokenId}`);
}

// FAUX — perte de précision silencieuse
const balance = 1000000000000000000; // 1 ETH en wei
const double = balance * 2;
console.log(double); // 2000000000000000000 — semble correct, mais...
 
const largeBalance = 99999999999999999999; // ~100 ETH
console.log(largeBalance);          // 100000000000000000000 — FAUX ! Arrondi vers le haut.
console.log(largeBalance === 100000000000000000000); // true — corruption de données
 
// CORRECT — utiliser BigInt
const balance = 1000000000000000000n;
const double = balance * 2n;
console.log(double.toString()); // "2000000000000000000" — correct
 
const largeBalance = 99999999999999999999n;
console.log(largeBalance.toString()); // "99999999999999999999" — correct

import { formatUnits, parseUnits } from "viem";
 
// Affichage : BigInt → chaîne lisible par l'humain
const weiAmount = 1500000000000000000n; // 1.5 ETH
const display = formatUnits(weiAmount, 18); // "1.5"
 
// Saisie : chaîne lisible par l'humain → BigInt
const userInput = "1.5";
const wei = parseUnits(userInput, 18); // 1500000000000000000n
 
// USDC a 6 décimales, pas 18
const usdcAmount = 100000000n; // 100 USDC
const usdcDisplay = formatUnits(usdcAmount, 6); // "100.0"

// L'utilisateur peut rejeter n'importe quel prompt du portefeuille
try {
  const tx = await writeContract({
    address: contractAddress,
    abi: ERC20_ABI,
    functionName: "approve",
    args: [spenderAddress, amount],
  });
} catch (error) {
  if (error.code === 4001) {
    // L'utilisateur a rejeté la transaction dans son portefeuille
    // C'est normal — pas une erreur à signaler
    showToast("Transaction annulée");
  } else if (error.code === -32603) {
    // Erreur JSON-RPC interne — signifie souvent que la transaction échouerait
    showToast("La transaction échouerait. Vérifiez votre solde.");
  } else {
    // Erreur inattendue
    console.error("Erreur de transaction :", error);
    showToast("Quelque chose s'est mal passé. Veuillez réessayer.");
  }
}

// Vérification défensive de la chaîne
import { useAccount, useChainId } from "wagmi";
 
function useRequireChain(requiredChainId: number) {
  const chainId = useChainId();
  const { isConnected } = useAccount();
 
  if (!isConnected) {
    return { ready: false, error: "Veuillez connecter votre portefeuille" };
  }
 
  if (chainId !== requiredChainId) {
    return {
      ready: false,
      error: `Veuillez basculer vers ${getChainName(requiredChainId)}. Vous êtes sur ${getChainName(chainId)}.`,
    };
  }
 
  return { ready: true, error: null };
}

// Définir la tolérance de slippage sur un échange de type Uniswap
const amountOutMin = expectedOutput * 995n / 1000n; // 0,5 % de tolérance de slippage
 
// Utiliser un deadline pour empêcher les transactions en attente de longue durée
const deadline = BigInt(Math.floor(Date.now() / 1000) + 60 * 20); // 20 minutes
 
await router.swapExactTokensForTokens(
  amountIn,
  amountOutMin,  // Sortie minimale acceptable — revert si on obtiendrait moins
  [tokenA, tokenB],
  userAddress,
  deadline,       // Revert si pas exécuté dans les 20 minutes
);

// Utiliser Flashbots Protect comme endpoint RPC
const provider = new ethers.JsonRpcProvider("https://rpc.flashbots.net");

async function formatTokenAmount(
  tokenAddress: string,
  rawAmount: bigint,
  provider: ethers.Provider
): Promise<string> {
  const contract = new ethers.Contract(
    tokenAddress,
    ["function decimals() view returns (uint8)", "function symbol() view returns (string)"],
    provider
  );
 
  const [decimals, symbol] = await Promise.all([
    contract.decimals(),
    contract.symbol(),
  ]);
 
  return `${ethers.formatUnits(rawAmount, decimals)} ${symbol}`;
}
 
// formatTokenAmount(USDC, 1000000n, provider) → "1.0 USDC"
// formatTokenAmount(WETH, 1000000000000000000n, provider) → "1.0 WETH"
// formatTokenAmount(WBTC, 100000000n, provider) → "1.0 WBTC"

import { createPublicClient, http, decodeFunctionResult } from "viem";
 
async function simulateAndGetError(client: ReturnType<typeof createPublicClient>, tx: object) {
  try {
    await client.call({
      account: tx.from,
      to: tx.to,
      data: tx.data,
      value: tx.value,
    });
    return null; // Pas d'erreur — la transaction réussirait
  } catch (error) {
    // Décoder la raison du revert
    if (error.data) {
      // Chaînes de revert courantes
      if (error.data.startsWith("0x08c379a0")) {
        // Error(string) — revert standard avec message
        const reason = decodeAbiParameters(
          [{ type: "string" }],
          `0x${error.data.slice(10)}`
        );
        return `Revert : ${reason[0]}`;
      }
    }
    return error.message;
  }
}

"use client";
 
import { useAccount, useConnect, useDisconnect, useReadContract, useWriteContract, useWaitForTransactionReceipt } from "wagmi";
import { injected } from "wagmi/connectors";
import { formatUnits, parseUnits } from "viem";
import { useState } from "react";
 
const USDC_ADDRESS = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48";
 
const USDC_ABI = [
  {
    name: "balanceOf",
    type: "function",
    stateMutability: "view",
    inputs: [{ name: "account", type: "address" }],
    outputs: [{ name: "", type: "uint256" }],
  },
  {
    name: "transfer",
    type: "function",
    stateMutability: "nonpayable",
    inputs: [
      { name: "to", type: "address" },
      { name: "amount", type: "uint256" },
    ],
    outputs: [{ name: "", type: "bool" }],
  },
] as const;
 
export function TokenDashboard() {
  const { address, isConnected } = useAccount();
  const { connect } = useConnect();
  const { disconnect } = useDisconnect();
 
  const [recipient, setRecipient] = useState("");
  const [amount, setAmount] = useState("");
 
  // Lire le solde — ne s'exécute que quand l'adresse est définie
  const { data: balance, refetch: refetchBalance } = useReadContract({
    address: USDC_ADDRESS,
    abi: USDC_ABI,
    functionName: "balanceOf",
    args: address ? [address] : undefined,
    query: { enabled: !!address },
  });
 
  // Écriture : transférer des jetons
  const {
    writeContract,
    data: txHash,
    isPending: isSigning,
    error: writeError,
  } = useWriteContract();
 
  // Attendre la confirmation
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({
    hash: txHash,
  });
 
  // Rafraîchir le solde après confirmation
  if (isSuccess) {
    refetchBalance();
  }
 
  if (!isConnected) {
    return (
      <button onClick={() => connect({ connector: injected() })}>
        Connecter le portefeuille
      </button>
    );
  }
 
  return (
    <div>
      <p>Connecté : {address}</p>
      <p>
        Solde USDC :{" "}
        {balance !== undefined ? formatUnits(balance, 6) : "Chargement..."}
      </p>
 
      <div>
        <input
          placeholder="Adresse du destinataire (0x...)"
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
        />
        <input
          placeholder="Montant (ex : 100)"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />
        <button
          onClick={() => {
            writeContract({
              address: USDC_ADDRESS,
              abi: USDC_ABI,
              functionName: "transfer",
              args: [recipient as `0x${string}`, parseUnits(amount, 6)],
            });
          }}
          disabled={isSigning || isConfirming}
        >
          {isSigning
            ? "Confirmez dans le portefeuille..."
            : isConfirming
              ? "Confirmation en cours..."
              : "Envoyer des USDC"}
        </button>
      </div>
 
      {writeError && <p style={{ color: "red" }}>{writeError.message}</p>}
      {isSuccess && <p style={{ color: "green" }}>Transfert confirmé !</p>}
      {txHash && (
        <a
          href={`https://etherscan.io/tx/${txHash}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          Voir sur Etherscan
        </a>
      )}
 
      <button onClick={() => disconnect()}>Déconnecter</button>
    </div>
  );
}