Ethereum für Webentwickler: Smart Contracts ohne den Hype

interface Transaction {
  // Wer diese Transaktion empfängt — eine EOA-Adresse oder Contract-Adresse
  to: string;      // 20-Byte Hex-Adresse, oder null für Contract-Deployment
  // Wie viel ETH gesendet wird (in wei)
  value: bigint;   // Kann 0n sein für reine Contract-Aufrufe
  // Kodierte Funktionsaufruf-Daten, oder leer für einfache ETH-Transfers
  data: string;    // Hex-kodierte Bytes, "0x" für einfache Transfers
  // Sequenzieller Zähler, verhindert Replay-Angriffe
  nonce: number;   // Muss exakt dem aktuellen Nonce des Senders entsprechen
  // Gas-Limit — maximales Gas, das diese Tx verbrauchen kann
  gasLimit: bigint;
  // EIP-1559 Gebührenparameter
  maxFeePerGas: bigint;
  maxPriorityFeePerGas: bigint;
  // Chain-Identifikator (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"), // Konvertiert "0.1" zu wei (100000000000000000n)
});
 
console.log("Tx hash:", tx.hash);
 
// Auf Aufnahme in einen Block warten
const receipt = await tx.wait();
console.log("Block number:", receipt.blockNumber);
console.log("Gas used:", receipt.gasUsed.toString());
console.log("Status:", receipt.status); // 1 = Erfolg, 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 = [
  // Read-Only-Funktionen (view/pure — keine Gaskosten bei externem Aufruf)
  "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)",
 
  // Zustandsändernde Funktionen (erfordern Transaktion, kosten 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)",
 
  // Events (werden während der Ausführung emittiert, in Transaktionslogs gespeichert)
  "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);
 
// Funktionsaufruf kodieren
const calldata = iface.encodeFunctionData("transfer", [
  "0xBobAddress...",
  1000000n,
]);
console.log(calldata);
// 0xa9059cbb000000000000000000000000bob...000000000000000000000000000f4240
 
// Calldata zurück zu Funktionsname und Argumenten dekodieren
const decoded = iface.parseTransaction({ data: calldata });
console.log(decoded.name);       // "transfer"
console.log(decoded.args[0]);    // "0xBobAddress..."
console.log(decoded.args[1]);    // 1000000n (BigInt)
 
// Rückgabedaten einer Funktion dekodieren
const returnData = "0x0000000000000000000000000000000000000000000000000000000000000001";
const result = iface.decodeFunctionResult("transfer", returnData);
console.log(result[0]); // true

// Storage Slot 0 eines Contracts lesen
const slot0 = await provider.getStorage(
  "0xContractAddress...",
  0
);
console.log(slot0); // Roher 32-Byte Hex-Wert

// Transfer-Events in Echtzeit mit ethers.js abhören
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("Block:", event.log.blockNumber);
  console.log("Tx hash:", event.log.transactionHash);
});
 
// Historische Events abfragen
const filter = contract.filters.Transfer(null, "0xMyAddress..."); // from=beliebig, to=spezifisch
const events = await contract.queryFilter(filter, 19000000, 19100000); // Blockbereich
 
for (const event of events) {
  console.log("Von:", event.args.from);
  console.log("Wert:", 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"),
});
 
// Historische Logs
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("Von:", log.args.from);
  console.log("An:", log.args.to);
  console.log("Wert:", log.args.value);
}
 
// Echtzeit-Überwachung
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}`);
    }
  },
});
 
// unwatch() aufrufen zum Beenden

// Das macht deine Bibliothek unter der Haube
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 Fallback Provider
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");
 
// ERC-20 Interface — nur die Lesefunktionen
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 // Beachte: provider, nicht signer. Nur Lesen.
);
 
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(`Decimals: ${decimals}`);          // 6 (NICHT 18!)
console.log(`Total supply: ${ethers.formatUnits(totalSupply, decimals)}`);
 
// Kontostand einer bestimmten Adresse prüfen
const balance = await erc20.balanceOf("0xSomeAddress...");
console.log(`Balance: ${ethers.formatUnits(balance, decimals)} USDC`);

import { ethers } from "ethers";
 
// Mit einem Node verbinden
const provider = new ethers.JsonRpcProvider("https://...");
 
// Grundlegende Abfragen
const blockNumber = await provider.getBlockNumber();
const balance = await provider.getBalance("0xAddress...");
const block = await provider.getBlock(blockNumber);
const txCount = await provider.getTransactionCount("0xAddress...");

// Aus einem privaten Schlüssel (serverseitig, Skripte)
const wallet = new ethers.Wallet("0xPrivateKey...", provider);
 
// Aus einer Browser-Wallet (clientseitig)
const browserProvider = new ethers.BrowserProvider(window.ethereum);
const signer = await browserProvider.getSigner();
 
// Adresse abrufen
const address = await signer.getAddress();

const usdc = new ethers.Contract(USDC_ADDRESS, ERC20_ABI, provider);
 
// Lesen (kostenlos, gibt Wert direkt zurück)
const balance = await usdc.balanceOf("0xSomeAddress...");
// balance ist ein bigint: 1000000000n (1000 USDC mit 6 Dezimalstellen)
 
// Zum Schreiben mit einem Signer verbinden
const usdcWithSigner = usdc.connect(signer);
 
// Schreiben (kostet Gas, gibt TransactionResponse zurück)
const tx = await usdcWithSigner.transfer("0xRecipient...", 1000000n);
const receipt = await tx.wait(); // Auf Blockaufnahme warten
 
if (receipt.status === 0) {
  throw new Error("Transaktion revertet");
}

// Ohne TypeChain — keine Typprüfung
const balance = await contract.balanceOf("0x...");
// balance ist 'any'. Keine Autovervollständigung. Leicht falsch zu verwenden.
 
// Mit TypeChain — volle Type Safety
import { USDC__factory } from "./typechain";
 
const usdc = USDC__factory.connect(USDC_ADDRESS, provider);
const balance = await usdc.balanceOf("0x...");
// balance ist BigNumber. Autovervollständigung funktioniert. Typfehler zur Kompilierzeit erkannt.

// WebSocket für Echtzeit-Events
const wsProvider = new ethers.WebSocketProvider("wss://eth-mainnet.g.alchemy.com/v2/YOUR_KEY");
 
const contract = new ethers.Contract(USDC_ADDRESS, ERC20_ABI, wsProvider);
 
// Alle Transfer-Events abhören
contract.on("Transfer", (from, to, value, event) => {
  console.log(`Transfer: ${from} -> ${to}`);
  console.log(`Betrag: ${ethers.formatUnits(value, 6)} USDC`);
});
 
// Transfers AN eine bestimmte Adresse abhören
const filter = contract.filters.Transfer(null, "0xMyAddress...");
contract.on(filter, (from, to, value) => {
  console.log(`Eingehender Transfer: ${ethers.formatUnits(value, 6)} USDC von ${from}`);
});
 
// Aufräumen wenn fertig
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>Lädt...</span>;
  if (error) return <span>Fehler: {error.message}</span>;
 
  // balance ist als bigint typisiert, weil das ABI uint256 angibt
  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 ? "In Wallet bestätigen..." : "100 USDC senden"}
      </button>
 
      {hash && <p>Transaktion: {hash}</p>}
      {isConfirming && <p>Warte auf Bestätigung...</p>}
      {isSuccess && <p>Transfer bestätigt!</p>}
      {error && <p>Fehler: {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;
}

// Low-Level Wallet-Interaktion (solltest du nicht direkt machen, aber es ist nützlich zum Verständnis)
 
// Account-Zugriff anfordern
const accounts = await window.ethereum.request({
  method: "eth_requestAccounts",
});
console.log("Verbundene Adresse:", accounts[0]);
 
// Aktuelle Chain abrufen
const chainId = await window.ethereum.request({
  method: "eth_chainId",
});
console.log("Chain ID:", parseInt(chainId, 16)); // "0x1" -> 1 (Mainnet)
 
// Auf Account-Wechsel lauschen (Benutzer wechselt Account in MetaMask)
window.ethereum.on("accountsChanged", (accounts: string[]) => {
  if (accounts.length === 0) {
    console.log("Wallet getrennt");
  } else {
    console.log("Gewechselt zu:", accounts[0]);
  }
});
 
// Auf Chain-Wechsel lauschen (Benutzer wechselt Netzwerk)
window.ethereum.on("chainChanged", (chainId: string) => {
  // Der empfohlene Ansatz ist, die Seite neu zu laden
  window.location.reload();
});

// Alle verfügbaren Wallets erkennen
interface EIP6963ProviderDetail {
  info: {
    uuid: string;
    name: string;
    icon: string;
    rdns: string;  // Reverse Domain Name, z.B. "io.metamask"
  };
  provider: EIP1193Provider;
}
 
const wallets: EIP6963ProviderDetail[] = [];
 
window.addEventListener("eip6963:announceProvider", (event: CustomEvent) => {
  wallets.push(event.detail);
});
 
// Alle Wallets auffordern, sich anzukündigen
window.dispatchEvent(new Event("eip6963:requestProvider"));
 
// Jetzt enthält 'wallets' alle installierten Wallets mit ihren Namen und Icons
// Du kannst eine Wallet-Auswahl-UI anzeigen

import { walletConnect } from "wagmi/connectors";
 
const connector = walletConnect({
  projectId: "YOUR_PROJECT_ID", // Hole von 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>Bitte verbinde deine Wallet</p>;
 
  if (chain.id !== mainnet.id) {
    return (
      <div>
        <p>Bitte wechsle zum Ethereum Mainnet</p>
        <button
          onClick={() => switchChain({ chainId: mainnet.id })}
          disabled={isPending}
        >
          {isPending ? "Wechsle..." : "Netzwerk wechseln"}
        </button>
      </div>
    );
  }
 
  return <>{children}</>;
}

{
  "name": "Cool NFT #42",
  "description": "Ein sehr cooler NFT",
  "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}`;
    // Oder ein dediziertes Gateway verwenden:
    // return `https://YOUR_PROJECT.mypinata.cloud/ipfs/${cid}`;
  }
  return uri;
}
 
// NFT-Metadaten abrufen
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,
  };
}

// Zu Pinata hochladen
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}`; // Gibt CID zurück
}

# Subgraph-Schema (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")
}

// Subgraph von deinem Frontend abfragen
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: Alle ERC-20 Token-Kontostände für eine Adresse abrufen
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"],
    }),
  }
);
 
// Gibt ALLE ERC-20 Token-Kontostände in einem Aufruf zurück
// vs. jeden möglichen ERC-20 Contract's balanceOf() scannen

// Alchemy: Alle NFTs einer Adresse abrufen
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}`);
}

// FALSCH — stiller Genauigkeitsverlust
const balance = 1000000000000000000; // 1 ETH in wei
const double = balance * 2;
console.log(double); // 2000000000000000000 — sieht richtig aus, aber...
 
const largeBalance = 99999999999999999999; // ~100 ETH
console.log(largeBalance);          // 100000000000000000000 — FALSCH! Aufgerundet.
console.log(largeBalance === 100000000000000000000); // true — Datenkorruption
 
// RICHTIG — BigInt verwenden
const balance = 1000000000000000000n;
const double = balance * 2n;
console.log(double.toString()); // "2000000000000000000" — korrekt
 
const largeBalance = 99999999999999999999n;
console.log(largeBalance.toString()); // "99999999999999999999" — korrekt

import { formatUnits, parseUnits } from "viem";
 
// Anzeige: BigInt → menschenlesbarer String
const weiAmount = 1500000000000000000n; // 1.5 ETH
const display = formatUnits(weiAmount, 18); // "1.5"
 
// Eingabe: menschenlesbarer String → BigInt
const userInput = "1.5";
const wei = parseUnits(userInput, 18); // 1500000000000000000n
 
// USDC hat 6 Dezimalstellen, nicht 18
const usdcAmount = 100000000n; // 100 USDC
const usdcDisplay = formatUnits(usdcAmount, 6); // "100.0"

// Der Benutzer kann jeden Wallet-Prompt ablehnen
try {
  const tx = await writeContract({
    address: contractAddress,
    abi: ERC20_ABI,
    functionName: "approve",
    args: [spenderAddress, amount],
  });
} catch (error) {
  if (error.code === 4001) {
    // Benutzer hat die Transaktion in seiner Wallet abgelehnt
    // Das ist normal — kein Fehler zum Melden
    showToast("Transaktion abgebrochen");
  } else if (error.code === -32603) {
    // Interner JSON-RPC-Fehler — bedeutet oft, die Transaktion würde reverten
    showToast("Transaktion würde fehlschlagen. Prüfe dein Guthaben.");
  } else {
    // Unerwarteter Fehler
    console.error("Transaktionsfehler:", error);
    showToast("Etwas ist schiefgelaufen. Bitte versuche es erneut.");
  }
}

// Defensive Chain-Prüfung
import { useAccount, useChainId } from "wagmi";
 
function useRequireChain(requiredChainId: number) {
  const chainId = useChainId();
  const { isConnected } = useAccount();
 
  if (!isConnected) {
    return { ready: false, error: "Bitte verbinde deine Wallet" };
  }
 
  if (chainId !== requiredChainId) {
    return {
      ready: false,
      error: `Bitte wechsle zu ${getChainName(requiredChainId)}. Du bist auf ${getChainName(chainId)}.`,
    };
  }
 
  return { ready: true, error: null };
}

// Slippage-Toleranz bei einem Uniswap-artigen Swap setzen
const amountOutMin = expectedOutput * 995n / 1000n; // 0,5% Slippage-Toleranz
 
// Deadline verwenden, um langlebige ausstehende Transaktionen zu verhindern
const deadline = BigInt(Math.floor(Date.now() / 1000) + 60 * 20); // 20 Minuten
 
await router.swapExactTokensForTokens(
  amountIn,
  amountOutMin,  // Minimaler akzeptabler Output — revertet wenn weniger
  [tokenA, tokenB],
  userAddress,
  deadline,       // Revertet wenn nicht innerhalb von 20 Minuten ausgeführt
);

// Flashbots Protect als RPC-Endpunkt verwenden
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; // Kein Fehler — Transaktion würde erfolgreich sein
  } catch (error) {
    // Revert-Grund dekodieren
    if (error.data) {
      // Gängige Revert-Strings
      if (error.data.startsWith("0x08c379a0")) {
        // Error(string) — Standard-Revert mit Nachricht
        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("");
 
  // Kontostand lesen — läuft nur wenn Adresse definiert ist
  const { data: balance, refetch: refetchBalance } = useReadContract({
    address: USDC_ADDRESS,
    abi: USDC_ABI,
    functionName: "balanceOf",
    args: address ? [address] : undefined,
    query: { enabled: !!address },
  });
 
  // Schreiben: Tokens transferieren
  const {
    writeContract,
    data: txHash,
    isPending: isSigning,
    error: writeError,
  } = useWriteContract();
 
  // Auf Bestätigung warten
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({
    hash: txHash,
  });
 
  // Kontostand nach Bestätigung erneut abrufen
  if (isSuccess) {
    refetchBalance();
  }
 
  if (!isConnected) {
    return (
      <button onClick={() => connect({ connector: injected() })}>
        Wallet verbinden
      </button>
    );
  }
 
  return (
    <div>
      <p>Verbunden: {address}</p>
      <p>
        USDC-Kontostand:{" "}
        {balance !== undefined ? formatUnits(balance, 6) : "Lädt..."}
      </p>
 
      <div>
        <input
          placeholder="Empfängeradresse (0x...)"
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
        />
        <input
          placeholder="Betrag (z.B. 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
            ? "In Wallet bestätigen..."
            : isConfirming
              ? "Bestätige..."
              : "USDC senden"}
        </button>
      </div>
 
      {writeError && <p style={{ color: "red" }}>{writeError.message}</p>}
      {isSuccess && <p style={{ color: "green" }}>Transfer bestätigt!</p>}
      {txHash && (
        <a
          href={`https://etherscan.io/tx/${txHash}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          Auf Etherscan anzeigen
        </a>
      )}
 
      <button onClick={() => disconnect()}>Trennen</button>
    </div>
  );
}