Ethereum för webbutvecklare: Smarta kontrakt utan hypen

interface Transaction {
  // Vem som tar emot denna transaktion — en EOA-adress eller en kontraktsadress
  to: string; // 20-byte hex-adress, eller null för kontrakts-deploy
  // Hur mycket ETH att skicka (i wei)
  value: bigint; // Kan vara 0n för rena kontraktsanrop
  // Kodat funktionsanropsdata, eller tomt för vanliga ETH-överföringar
  data: string; // Hex-kodade bytes, "0x" för enkla överföringar
  // Sekventiell räknare, förhindrar replay-attacker
  nonce: number; // Måste exakt motsvara avsändarens nuvarande nonce
  // Gasgräns — maximalt gas denna tx kan konsumera
  gasLimit: bigint;
  // EIP-1559 avgiftsparametrar
  maxFeePerGas: bigint;
  maxPriorityFeePerGas: bigint;
  // Kedjeidentifierare (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"), // Konverterar "0.1" till wei (100000000000000000n)
});
 
console.log("Tx hash:", tx.hash);
 
// Vänta på inkludering i ett block
const receipt = await tx.wait();
console.log("Block number:", receipt.blockNumber);
console.log("Gas used:", receipt.gasUsed.toString());
console.log("Status:", receipt.status); // 1 = lyckades, 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 = [
  // Skrivskyddade funktioner (view/pure — ingen gaskostnad vid externt anrop)
  "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)",
 
  // Tillståndsändrande funktioner (kräver en transaktion, kostar 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 (emitteras under exekvering, lagras i transaktionsloggar)
  "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);
 
// Koda ett funktionsanrop
const calldata = iface.encodeFunctionData("transfer", ["0xBobAddress...", 1000000n]);
console.log(calldata);
// 0xa9059cbb000000000000000000000000bob...000000000000000000000000000f4240
 
// Avkoda calldata tillbaka till funktionsnamn och argument
const decoded = iface.parseTransaction({ data: calldata });
console.log(decoded.name); // "transfer"
console.log(decoded.args[0]); // "0xBobAddress..."
console.log(decoded.args[1]); // 1000000n (BigInt)
 
// Avkoda en funktions returdata
const returnData = "0x0000000000000000000000000000000000000000000000000000000000000001";
const result = iface.decodeFunctionResult("transfer", returnData);
console.log(result[0]); // true

// Läsa lagringsplats 0 i ett kontrakt
const slot0 = await provider.getStorage("0xContractAddress...", 0);
console.log(slot0); // Rått 32-byte hex-värde

// Lyssna på Transfer-events i realtid med 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("Block:", event.log.blockNumber);
  console.log("Tx hash:", event.log.transactionHash);
});
 
// Söka historiska events
const filter = contract.filters.Transfer(null, "0xMyAddress..."); // from=valfri, to=specifik
const events = await contract.queryFilter(filter, 19000000, 19100000); // blockintervall
 
for (const event of events) {
  console.log("From:", event.args.from);
  console.log("Value:", 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"),
});
 
// Historiska loggar
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("From:", log.args.from);
  console.log("To:", log.args.to);
  console.log("Value:", log.args.value);
}
 
// Realtidsövervakning
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}`);
    }
  },
});
 
// Anropa unwatch() för att sluta lyssna

// Det här är vad ditt bibliotek gör under huven
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 reserv-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-gränssnitt — bara läsfunktionerna
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, // Notera: provider, inte signer. Skrivskyddad.
);
 
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 (INTE 18!)
console.log(`Total supply: ${ethers.formatUnits(totalSupply, decimals)}`);
 
// Kontrollera en specifik adress saldo
const balance = await erc20.balanceOf("0xSomeAddress...");
console.log(`Balance: ${ethers.formatUnits(balance, decimals)} USDC`);

import { ethers } from "ethers";
 
// Anslut till en nod
const provider = new ethers.JsonRpcProvider("https://...");
 
// Grundläggande förfrågningar
const blockNumber = await provider.getBlockNumber();
const balance = await provider.getBalance("0xAddress...");
const block = await provider.getBlock(blockNumber);
const txCount = await provider.getTransactionCount("0xAddress...");

// Från en privat nyckel (serversidan, skript)
const wallet = new ethers.Wallet("0xPrivateKey...", provider);
 
// Från en webbläsarplånbok (klientsidan)
const browserProvider = new ethers.BrowserProvider(window.ethereum);
const signer = await browserProvider.getSigner();
 
// Hämta adressen
const address = await signer.getAddress();

const usdc = new ethers.Contract(USDC_ADDRESS, ERC20_ABI, provider);
 
// Läs (gratis, returnerar värde direkt)
const balance = await usdc.balanceOf("0xSomeAddress...");
// balance är en bigint: 1000000000n (1000 USDC med 6 decimaler)
 
// För att skriva, anslut med en signer
const usdcWithSigner = usdc.connect(signer);
 
// Skriv (kostar gas, returnerar TransactionResponse)
const tx = await usdcWithSigner.transfer("0xRecipient...", 1000000n);
const receipt = await tx.wait(); // Vänta på blockinkludering
 
if (receipt.status === 0) {
  throw new Error("Transaction reverted");
}

// Utan TypeChain — ingen typkontroll
const balance = await contract.balanceOf("0x...");
// balance är 'any'. Ingen autokomplettering. Lätt att använda fel.
 
// Med TypeChain — full typsäkerhet
import { USDC__factory } from "./typechain";
 
const usdc = USDC__factory.connect(USDC_ADDRESS, provider);
const balance = await usdc.balanceOf("0x...");
// balance är BigNumber. Autokomplettering fungerar. Typfel fångas vid kompilering.

// WebSocket för realtids-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);
 
// Lyssna på alla Transfer-events
contract.on("Transfer", (from, to, value, event) => {
  console.log(`Transfer: ${from} -> ${to}`);
  console.log(`Amount: ${ethers.formatUnits(value, 6)} USDC`);
});
 
// Lyssna på överföringar TILL en specifik adress
const filter = contract.filters.Transfer(null, "0xMyAddress...");
contract.on(filter, (from, to, value) => {
  console.log(`Inkommande överföring: ${ethers.formatUnits(value, 6)} USDC från ${from}`);
});
 
// Städa upp när klart
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>Laddar...</span>;
  if (error) return <span>Fel: {error.message}</span>;
 
  // balance är typad som bigint eftersom ABI:n anger 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 ? "Bekräfta i plånboken..." : "Skicka 100 USDC"}
      </button>
 
      {hash && <p>Transaktion: {hash}</p>}
      {isConfirming && <p>Väntar på bekräftelse...</p>}
      {isSuccess && <p>Överföring bekräftad!</p>}
      {error && <p>Fel: {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;
}

// Lågnivå-plånboksinteraktion (du bör inte göra detta direkt, men det är nyttigt att förstå)
 
// Begär kontoåtkomst
const accounts = await window.ethereum.request({
  method: "eth_requestAccounts",
});
console.log("Ansluten adress:", accounts[0]);
 
// Hämta den aktuella kedjan
const chainId = await window.ethereum.request({
  method: "eth_chainId",
});
console.log("Chain ID:", parseInt(chainId, 16)); // "0x1" -> 1 (mainnet)
 
// Lyssna på kontoändringar (användaren byter konto i MetaMask)
window.ethereum.on("accountsChanged", (accounts: string[]) => {
  if (accounts.length === 0) {
    console.log("Plånbok frånkopplad");
  } else {
    console.log("Bytte till:", accounts[0]);
  }
});
 
// Lyssna på kedjeändringar (användaren byter nätverk)
window.ethereum.on("chainChanged", (chainId: string) => {
  // Den rekommenderade metoden är att ladda om sidan
  window.location.reload();
});

// Upptäcka alla tillgängliga plånböcker
interface EIP6963ProviderDetail {
  info: {
    uuid: string;
    name: string;
    icon: string;
    rdns: string; // Omvänt domännamn, t.ex. "io.metamask"
  };
  provider: EIP1193Provider;
}
 
const wallets: EIP6963ProviderDetail[] = [];
 
window.addEventListener("eip6963:announceProvider", (event: CustomEvent) => {
  wallets.push(event.detail);
});
 
// Begär att alla plånböcker ska annonsera sig
window.dispatchEvent(new Event("eip6963:requestProvider"));
 
// Nu innehåller 'wallets' alla installerade plånböcker med deras namn och ikoner
// Du kan visa ett plånboksval-UI

import { useConnect } from "wagmi";
 
function ConnectWallet() {
  const { connect, connectors, isPending } = useConnect();
 
  return (
    <div>
      {connectors.map((connector) => (
        <button
          key={connector.uid}
          onClick={() => connect({ connector })}
          disabled={isPending}
        >
          {connector.name}
        </button>
      ))}
    </div>
  );
}

"use client";
 
import { useAccount, useConnect, useDisconnect } from "wagmi";
 
function WalletStatus() {
  const { address, isConnected, chain } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();
 
  if (isConnected) {
    return (
      <div>
        <p>Ansluten: {address}</p>
        <p>Kedja: {chain?.name}</p>
        <button onClick={() => disconnect()}>Koppla från</button>
      </div>
    );
  }
 
  return (
    <div>
      {connectors.map((connector) => (
        <button key={connector.uid} onClick={() => connect({ connector })}>
          Anslut med {connector.name}
        </button>
      ))}
    </div>
  );
}

const NFT_ABI = [
  "function tokenURI(uint256 tokenId) view returns (string)",
  "function ownerOf(uint256 tokenId) view returns (address)",
] as const;
 
const nft = new ethers.Contract(NFT_ADDRESS, NFT_ABI, provider);
 
// Hämta metadata-URI:n
const tokenURI = await nft.tokenURI(42n);
console.log(tokenURI);
// Typiskt: "ipfs://QmYx6GsYAKnNzZ9A6NvEKV9nf1VaDzJrqDR23Y8YSkebLU/42"
// Eller: "https://api.example.com/tokens/42"
// Eller: "data:application/json;base64,eyJuYW1lIjoi..."
 
// Hämta metadata
let metadata;
if (tokenURI.startsWith("ipfs://")) {
  const httpUrl = tokenURI.replace("ipfs://", "https://ipfs.io/ipfs/");
  metadata = await fetch(httpUrl).then((r) => r.json());
} else if (tokenURI.startsWith("data:")) {
  const base64 = tokenURI.split(",")[1];
  metadata = JSON.parse(atob(base64));
} else {
  metadata = await fetch(tokenURI).then((r) => r.json());
}
 
console.log(metadata);
// {
//   "name": "My NFT #42",
//   "description": "A unique digital collectible",
//   "image": "ipfs://QmImage.../42.png",
//   "attributes": [
//     { "trait_type": "Background", "value": "Blue" },
//     { "trait_type": "Rarity", "value": "Legendary" }
//   ]
// }

// FEL — förutsätter 18 decimaler
const balance = ethers.formatEther(rawBalance);
 
// RÄTT — använd tokens faktiska decimaler
const decimals = await token.decimals();
const balance = ethers.formatUnits(rawBalance, decimals);

// FEL — tyst förlust av precision
const amount = Number(rawBalance) * 1.5;
 
// RÄTT — bigint-aritmetik
const amount = (rawBalance * 150n) / 100n;

// Manuell nonce-hantering för flera transaktioner
let nonce = await provider.getTransactionCount(address, "pending");
 
const tx1 = await wallet.sendTransaction({ ...params1, nonce: nonce++ });
const tx2 = await wallet.sendTransaction({ ...params2, nonce: nonce++ });
const tx3 = await wallet.sendTransaction({ ...params3, nonce: nonce++ });

// Estimera gas
const estimated = await contract.transfer.estimateGas(to, amount);
 
// Lägg till en buffert (20% är vanligt)
const gasLimit = (estimated * 120n) / 100n;
 
const tx = await contract.transfer(to, amount, { gasLimit });