Ethereum para desarrolladores web: Smart Contracts sin el hype

interface Transaction {
  // Quién recibe esta transacción — una dirección EOA o una dirección de contrato
  to: string; // dirección hex de 20 bytes, o null para despliegue de contrato
  // Cuánto ETH enviar (en wei)
  value: bigint; // Puede ser 0n para llamadas puras a contrato
  // Datos de llamada a función codificados, o vacío para transferencias simples de ETH
  data: string; // Bytes codificados en hex, "0x" para transferencias simples
  // Contador secuencial, previene ataques de replay
  nonce: number; // Debe ser exactamente igual al nonce actual del remitente
  // Límite de gas — máximo gas que esta tx puede consumir
  gasLimit: bigint;
  // Parámetros de tarifa EIP-1559
  maxFeePerGas: bigint;
  maxPriorityFeePerGas: bigint;
  // Identificador de cadena (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"), // Convierte "0.1" a wei (100000000000000000n)
});
 
console.log("Tx hash:", tx.hash);
 
// Esperar inclusión en un bloque
const receipt = await tx.wait();
console.log("Número de bloque:", receipt.blockNumber);
console.log("Gas usado:", receipt.gasUsed.toString());
console.log("Estado:", receipt.status); // 1 = éxito, 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("Tx hash:", hash);

const ERC20_ABI = [
  // Funciones de solo lectura (view/pure — sin costo de gas cuando se llaman externamente)
  "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)",
 
  // Funciones que cambian estado (requieren una transacción, cuestan 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)",
 
  // Eventos (emitidos durante la ejecución, almacenados en logs de transacción)
  "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);
 
// Codificar una llamada a función
const calldata = iface.encodeFunctionData("transfer", ["0xBobAddress...", 1000000n]);
console.log(calldata);
// 0xa9059cbb000000000000000000000000bob...000000000000000000000000000f4240
 
// Decodificar calldata de vuelta a nombre de función y argumentos
const decoded = iface.parseTransaction({ data: calldata });
console.log(decoded.name); // "transfer"
console.log(decoded.args[0]); // "0xBobAddress..."
console.log(decoded.args[1]); // 1000000n (BigInt)
 
// Decodificar los datos de retorno de una función
const returnData = "0x0000000000000000000000000000000000000000000000000000000000000001";
const result = iface.decodeFunctionResult("transfer", returnData);
console.log(result[0]); // true

// Leyendo el slot de almacenamiento 0 de un contrato
const slot0 = await provider.getStorage("0xContractAddress...", 0);
console.log(slot0); // Valor hex bruto de 32 bytes

// Escuchando eventos Transfer en tiempo real con 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)} tokens`);
  console.log("Bloque:", event.log.blockNumber);
  console.log("Tx hash:", event.log.transactionHash);
});
 
// Consultando eventos históricos
const filter = contract.filters.Transfer(null, "0xMyAddress..."); // from=cualquiera, to=específico
const events = await contract.queryFilter(filter, 19000000, 19100000); // rango de bloques
 
for (const event of events) {
  console.log("De:", event.args.from);
  console.log("Valor:", 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 históricos
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("A:", log.args.to);
  console.log("Valor:", log.args.value);
}
 
// Observación en tiempo real
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(`Transfer: ${log.args.from} -> ${log.args.to}`);
    }
  },
});
 
// Llama a unwatch() para dejar de escuchar

// Esto es lo que tu biblioteca hace internamente
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";
 
// ethers.js v6 proveedor de fallback
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");
 
// Interfaz ERC-20 — solo las funciones de lectura
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, // Nota: provider, no signer. Solo lectura.
);
 
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(`Decimales: ${decimals}`); // 6 (¡NO 18!)
console.log(`Supply total: ${ethers.formatUnits(totalSupply, decimals)}`);
 
// Verificar el balance de una dirección específica
const balance = await erc20.balanceOf("0xSomeAddress...");
console.log(`Balance: ${ethers.formatUnits(balance, decimals)} USDC`);

import { ethers } from "ethers";
 
// Conectar a un nodo
const provider = new ethers.JsonRpcProvider("https://...");
 
// Consultas básicas
const blockNumber = await provider.getBlockNumber();
const balance = await provider.getBalance("0xAddress...");
const block = await provider.getBlock(blockNumber);
const txCount = await provider.getTransactionCount("0xAddress...");

// Desde una clave privada (servidor, scripts)
const wallet = new ethers.Wallet("0xPrivateKey...", provider);
 
// Desde un wallet del navegador (lado cliente)
const browserProvider = new ethers.BrowserProvider(window.ethereum);
const signer = await browserProvider.getSigner();
 
// Obtener la dirección
const address = await signer.getAddress();

const usdc = new ethers.Contract(USDC_ADDRESS, ERC20_ABI, provider);
 
// Lectura (gratis, devuelve el valor directamente)
const balance = await usdc.balanceOf("0xSomeAddress...");
// balance es un bigint: 1000000000n (1000 USDC con 6 decimales)
 
// Para escribir, conectar con un signer
const usdcWithSigner = usdc.connect(signer);
 
// Escritura (cuesta gas, devuelve TransactionResponse)
const tx = await usdcWithSigner.transfer("0xRecipient...", 1000000n);
const receipt = await tx.wait(); // Esperar inclusión en bloque
 
if (receipt.status === 0) {
  throw new Error("La transacción revirtió");
}

// Sin TypeChain — sin verificación de tipos
const balance = await contract.balanceOf("0x...");
// balance es 'any'. Sin autocompletado. Fácil de usar mal.
 
// Con TypeChain — seguridad de tipos completa
import { USDC__factory } from "./typechain";
 
const usdc = USDC__factory.connect(USDC_ADDRESS, provider);
const balance = await usdc.balanceOf("0x...");
// balance es BigNumber. Autocompletado funciona. Errores de tipo detectados en compilación.

// WebSocket para eventos en tiempo real
const wsProvider = new ethers.WebSocketProvider("wss://eth-mainnet.g.alchemy.com/v2/YOUR_KEY");
 
const contract = new ethers.Contract(USDC_ADDRESS, ERC20_ABI, wsProvider);
 
// Escuchar todos los eventos Transfer
contract.on("Transfer", (from, to, value, event) => {
  console.log(`Transfer: ${from} -> ${to}`);
  console.log(`Cantidad: ${ethers.formatUnits(value, 6)} USDC`);
});
 
// Escuchar transferencias A una dirección específica
const filter = contract.filters.Transfer(null, "0xMyAddress...");
contract.on(filter, (from, to, value) => {
  console.log(`Transferencia entrante: ${ethers.formatUnits(value, 6)} USDC de ${from}`);
});
 
// Limpiar cuando termines
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>Cargando...</span>;
  if (error) return <span>Error: {error.message}</span>;
 
  // balance está tipado como bigint porque el ABI dice 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 ? "Confirmar en wallet..." : "Enviar 100 USDC"}
      </button>
 
      {hash && <p>Transacción: {hash}</p>}
      {isConfirming && <p>Esperando confirmación...</p>}
      {isSuccess && <p>¡Transferencia confirmada!</p>}
      {error && <p>Error: {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;
}

// Interacción de bajo nivel con wallet (no deberías hacer esto directamente, pero es útil entenderlo)
 
// Solicitar acceso a la cuenta
const accounts = await window.ethereum.request({
  method: "eth_requestAccounts",
});
console.log("Dirección conectada:", accounts[0]);
 
// Obtener la cadena actual
const chainId = await window.ethereum.request({
  method: "eth_chainId",
});
console.log("Chain ID:", parseInt(chainId, 16)); // "0x1" -> 1 (mainnet)
 
// Escuchar cambios de cuenta (el usuario cambia de cuenta en MetaMask)
window.ethereum.on("accountsChanged", (accounts: string[]) => {
  if (accounts.length === 0) {
    console.log("Wallet desconectado");
  } else {
    console.log("Cambiado a:", accounts[0]);
  }
});
 
// Escuchar cambios de cadena (el usuario cambia de red)
window.ethereum.on("chainChanged", (chainId: string) => {
  // El enfoque recomendado es recargar la página
  window.location.reload();
});

// Descubriendo todos los wallets disponibles
interface EIP6963ProviderDetail {
  info: {
    uuid: string;
    name: string;
    icon: string;
    rdns: string; // Nombre de dominio inverso, ej., "io.metamask"
  };
  provider: EIP1193Provider;
}
 
const wallets: EIP6963ProviderDetail[] = [];
 
window.addEventListener("eip6963:announceProvider", (event: CustomEvent) => {
  wallets.push(event.detail);
});
 
// Solicitar a todos los wallets que se anuncien
window.dispatchEvent(new Event("eip6963:requestProvider"));
 
// Ahora 'wallets' contiene todos los wallets instalados con sus nombres e iconos
// Puedes mostrar una UI de selección de wallet

import { walletConnect } from "wagmi/connectors";
 
const connector = walletConnect({
  projectId: "YOUR_PROJECT_ID", // Obtener de 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>Por favor conecta tu wallet</p>;
 
  if (chain.id !== mainnet.id) {
    return (
      <div>
        <p>Por favor cambia a Ethereum Mainnet</p>
        <button
          onClick={() => switchChain({ chainId: mainnet.id })}
          disabled={isPending}
        >
          {isPending ? "Cambiando..." : "Cambiar red"}
        </button>
      </div>
    );
  }
 
  return <>{children}</>;
}

{
  "name": "Cool NFT #42",
  "description": "Un NFT muy 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}`;
    // O usa un gateway dedicado:
    // return `https://YOUR_PROJECT.mypinata.cloud/ipfs/${cid}`;
  }
  return uri;
}
 
// Obteniendo metadatos de 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,
  };
}

// Subiendo a 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}`; // Devuelve CID
}

# Esquema del 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")
}

// Consultando un subgraph desde tu 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: Obtener todos los balances de tokens ERC-20 para una dirección
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"],
  }),
});
 
// Devuelve TODOS los balances de tokens ERC-20 en una llamada
// vs. escanear el balanceOf() de cada posible contrato ERC-20

// Alchemy: Obtener todos los NFTs propiedad de una dirección
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}`);
}

// MAL — pérdida silenciosa de precisión
const balance = 1000000000000000000; // 1 ETH en wei
const double = balance * 2;
console.log(double); // 2000000000000000000 — parece correcto, pero...
 
const largeBalance = 99999999999999999999; // ~100 ETH
console.log(largeBalance); // 100000000000000000000 — ¡MAL! Redondeado.
console.log(largeBalance === 100000000000000000000); // true — corrupción de datos
 
// BIEN — usar BigInt
const balance = 1000000000000000000n;
const double = balance * 2n;
console.log(double.toString()); // "2000000000000000000" — correcto
 
const largeBalance = 99999999999999999999n;
console.log(largeBalance.toString()); // "99999999999999999999" — correcto

import { formatUnits, parseUnits } from "viem";
 
// Mostrar: BigInt -> string legible
const weiAmount = 1500000000000000000n; // 1.5 ETH
const display = formatUnits(weiAmount, 18); // "1.5"
 
// Entrada: string legible -> BigInt
const userInput = "1.5";
const wei = parseUnits(userInput, 18); // 1500000000000000000n
 
// USDC tiene 6 decimales, no 18
const usdcAmount = 100000000n; // 100 USDC
const usdcDisplay = formatUnits(usdcAmount, 6); // "100.0"

// El usuario puede rechazar cualquier prompt del wallet
try {
  const tx = await writeContract({
    address: contractAddress,
    abi: ERC20_ABI,
    functionName: "approve",
    args: [spenderAddress, amount],
  });
} catch (error) {
  if (error.code === 4001) {
    // El usuario rechazó la transacción en su wallet
    // Esto es normal — no es un error para reportar
    showToast("Transacción cancelada");
  } else if (error.code === -32603) {
    // Error interno JSON-RPC — a menudo significa que la transacción revertiría
    showToast("La transacción fallaría. Verifica tu balance.");
  } else {
    // Error inesperado
    console.error("Error de transacción:", error);
    showToast("Algo salió mal. Por favor intenta de nuevo.");
  }
}

// Verificación defensiva de cadena
import { useAccount, useChainId } from "wagmi";
 
function useRequireChain(requiredChainId: number) {
  const chainId = useChainId();
  const { isConnected } = useAccount();
 
  if (!isConnected) {
    return { ready: false, error: "Por favor conecta tu wallet" };
  }
 
  if (chainId !== requiredChainId) {
    return {
      ready: false,
      error: `Por favor cambia a ${getChainName(requiredChainId)}. Estás en ${getChainName(chainId)}.`,
    };
  }
 
  return { ready: true, error: null };
}

// Estableciendo tolerancia de slippage en un swap estilo Uniswap
const amountOutMin = (expectedOutput * 995n) / 1000n; // 0.5% de tolerancia al slippage
 
// Usando un deadline para prevenir transacciones pendientes de larga duración
const deadline = BigInt(Math.floor(Date.now() / 1000) + 60 * 20); // 20 minutos
 
await router.swapExactTokensForTokens(
  amountIn,
  amountOutMin, // Salida mínima aceptable — revertir si obtendríamos menos
  [tokenA, tokenB],
  userAddress,
  deadline, // Revertir si no se ejecuta dentro de 20 minutos
);

// Usando Flashbots Protect como tu 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; // Sin error — la transacción tendría éxito
  } catch (error) {
    // Decodificar la razón del revert
    if (error.data) {
      // Strings de revert comunes
      if (error.data.startsWith("0x08c379a0")) {
        // Error(string) — revert estándar con mensaje
        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("");
 
  // Leer balance — solo se ejecuta cuando address está definida
  const { data: balance, refetch: refetchBalance } = useReadContract({
    address: USDC_ADDRESS,
    abi: USDC_ABI,
    functionName: "balanceOf",
    args: address ? [address] : undefined,
    query: { enabled: !!address },
  });
 
  // Escribir: transferir tokens
  const {
    writeContract,
    data: txHash,
    isPending: isSigning,
    error: writeError,
  } = useWriteContract();
 
  // Esperar confirmación
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({
    hash: txHash,
  });
 
  // Recargar balance después de confirmación
  if (isSuccess) {
    refetchBalance();
  }
 
  if (!isConnected) {
    return (
      <button onClick={() => connect({ connector: injected() })}>
        Conectar Wallet
      </button>
    );
  }
 
  return (
    <div>
      <p>Conectado: {address}</p>
      <p>
        Balance USDC:{" "}
        {balance !== undefined ? formatUnits(balance, 6) : "Cargando..."}
      </p>
 
      <div>
        <input
          placeholder="Dirección del destinatario (0x...)"
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
        />
        <input
          placeholder="Cantidad (ej., 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
            ? "Confirmar en wallet..."
            : isConfirming
              ? "Confirmando..."
              : "Enviar USDC"}
        </button>
      </div>
 
      {writeError && <p style={{ color: "red" }}>{writeError.message}</p>}
      {isSuccess && <p style={{ color: "green" }}>¡Transferencia confirmada!</p>}
      {txHash && (
        <a
          href={`https://etherscan.io/tx/${txHash}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          Ver en Etherscan
        </a>
      )}
 
      <button onClick={() => disconnect()}>Desconectar</button>
    </div>
  );
}