Ethereum untuk Web Developer: Smart Contracts Tanpa Hype

interface Transaction {
  // Siapa yang menerima transaksi ini — alamat EOA atau alamat kontrak
  to: string; // alamat hex 20-byte, atau null untuk deployment kontrak
  // Berapa banyak ETH yang dikirim (dalam wei)
  value: bigint; // Bisa 0n untuk pemanggilan kontrak murni
  // Data pemanggilan fungsi yang di-encode, atau kosong untuk transfer ETH biasa
  data: string; // Byte yang di-encode hex, "0x" untuk transfer sederhana
  // Counter berurutan, mencegah serangan replay
  nonce: number; // Harus sama persis dengan nonce pengirim saat ini
  // Batas gas — gas maksimum yang bisa dikonsumsi tx ini
  gasLimit: bigint;
  // Parameter biaya EIP-1559
  maxFeePerGas: bigint;
  maxPriorityFeePerGas: bigint;
  // Identifier chain (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"), // Mengonversi "0.1" ke wei (100000000000000000n)
});
 
console.log("Hash tx:", tx.hash);
 
// Tunggu inklusi di blok
const receipt = await tx.wait();
console.log("Nomor blok:", receipt.blockNumber);
console.log("Gas terpakai:", receipt.gasUsed.toString());
console.log("Status:", receipt.status); // 1 = sukses, 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 tx:", hash);

const ERC20_ABI = [
  // Fungsi read-only (view/pure — tanpa biaya gas saat dipanggil secara eksternal)
  "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)",
 
  // Fungsi yang mengubah state (memerlukan transaksi, memakan 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 (diemit selama eksekusi, disimpan di log transaksi)
  "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);
 
// Encode pemanggilan fungsi
const calldata = iface.encodeFunctionData("transfer", ["0xBobAddress...", 1000000n]);
console.log(calldata);
// 0xa9059cbb000000000000000000000000bob...000000000000000000000000000f4240
 
// Decode calldata kembali ke nama fungsi dan argumen
const decoded = iface.parseTransaction({ data: calldata });
console.log(decoded.name); // "transfer"
console.log(decoded.args[0]); // "0xBobAddress..."
console.log(decoded.args[1]); // 1000000n (BigInt)
 
// Decode data kembalian fungsi
const returnData = "0x0000000000000000000000000000000000000000000000000000000000000001";
const result = iface.decodeFunctionResult("transfer", returnData);
console.log(result[0]); // true

// Membaca slot storage 0 dari kontrak
const slot0 = await provider.getStorage("0xContractAddress...", 0);
console.log(slot0); // Nilai hex 32-byte mentah

// Mendengarkan event Transfer secara real-time dengan 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)} token`);
  console.log("Blok:", event.log.blockNumber);
  console.log("Hash tx:", event.log.transactionHash);
});
 
// Mengquery event historis
const filter = contract.filters.Transfer(null, "0xMyAddress..."); // from=any, to=spesifik
const events = await contract.queryFilter(filter, 19000000, 19100000); // rentang blok
 
for (const event of events) {
  console.log("Dari:", event.args.from);
  console.log("Nilai:", 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"),
});
 
// Log historis
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("Dari:", log.args.from);
  console.log("Ke:", log.args.to);
  console.log("Nilai:", log.args.value);
}
 
// Pemantauan real-time
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}`);
    }
  },
});
 
// Panggil unwatch() untuk berhenti mendengarkan

// Inilah yang dilakukan pustaka Anda di balik layar
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";
 
// Provider 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");
 
// Antarmuka ERC-20 — hanya fungsi baca
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, // Catatan: provider, bukan signer. Read-only.
);
 
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(`Desimal: ${decimals}`); // 6 (BUKAN 18!)
console.log(`Total supply: ${ethers.formatUnits(totalSupply, decimals)}`);
 
// Periksa saldo alamat tertentu
const balance = await erc20.balanceOf("0xSomeAddress...");
console.log(`Saldo: ${ethers.formatUnits(balance, decimals)} USDC`);

import { ethers } from "ethers";
 
// Terhubung ke node
const provider = new ethers.JsonRpcProvider("https://...");
 
// Query dasar
const blockNumber = await provider.getBlockNumber();
const balance = await provider.getBalance("0xAddress...");
const block = await provider.getBlock(blockNumber);
const txCount = await provider.getTransactionCount("0xAddress...");

// Dari private key (sisi server, skrip)
const wallet = new ethers.Wallet("0xPrivateKey...", provider);
 
// Dari dompet browser (sisi klien)
const browserProvider = new ethers.BrowserProvider(window.ethereum);
const signer = await browserProvider.getSigner();
 
// Dapatkan alamat
const address = await signer.getAddress();

const usdc = new ethers.Contract(USDC_ADDRESS, ERC20_ABI, provider);
 
// Baca (gratis, mengembalikan nilai langsung)
const balance = await usdc.balanceOf("0xSomeAddress...");
// balance adalah bigint: 1000000000n (1000 USDC dengan 6 desimal)
 
// Untuk menulis, hubungkan dengan signer
const usdcWithSigner = usdc.connect(signer);
 
// Tulis (memakan gas, mengembalikan TransactionResponse)
const tx = await usdcWithSigner.transfer("0xRecipient...", 1000000n);
const receipt = await tx.wait(); // Tunggu inklusi blok
 
if (receipt.status === 0) {
  throw new Error("Transaksi di-revert");
}

// Tanpa TypeChain — tanpa pengecekan tipe
const balance = await contract.balanceOf("0x...");
// balance adalah 'any'. Tanpa autocomplete. Mudah disalahgunakan.
 
// Dengan TypeChain — keamanan tipe penuh
import { USDC__factory } from "./typechain";
 
const usdc = USDC__factory.connect(USDC_ADDRESS, provider);
const balance = await usdc.balanceOf("0x...");
// balance adalah BigNumber. Autocomplete berfungsi. Error tipe tertangkap saat kompilasi.

// WebSocket untuk event real-time
const wsProvider = new ethers.WebSocketProvider("wss://eth-mainnet.g.alchemy.com/v2/YOUR_KEY");
 
const contract = new ethers.Contract(USDC_ADDRESS, ERC20_ABI, wsProvider);
 
// Dengarkan semua event Transfer
contract.on("Transfer", (from, to, value, event) => {
  console.log(`Transfer: ${from} -> ${to}`);
  console.log(`Jumlah: ${ethers.formatUnits(value, 6)} USDC`);
});
 
// Dengarkan transfer KE alamat tertentu
const filter = contract.filters.Transfer(null, "0xMyAddress...");
contract.on(filter, (from, to, value) => {
  console.log(`Transfer masuk: ${ethers.formatUnits(value, 6)} USDC dari ${from}`);
});
 
// Bersihkan saat selesai
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>Memuat...</span>;
  if (error) return <span>Error: {error.message}</span>;
 
  // balance bertipe bigint karena ABI bilang 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 ? "Konfirmasi di dompet..." : "Kirim 100 USDC"}
      </button>
 
      {hash && <p>Transaksi: {hash}</p>}
      {isConfirming && <p>Menunggu konfirmasi...</p>}
      {isSuccess && <p>Transfer dikonfirmasi!</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;
}

// Interaksi dompet level rendah (Anda tidak seharusnya melakukan ini langsung, tapi berguna untuk dipahami)
 
// Minta akses akun
const accounts = await window.ethereum.request({
  method: "eth_requestAccounts",
});
console.log("Alamat terhubung:", accounts[0]);
 
// Dapatkan chain saat ini
const chainId = await window.ethereum.request({
  method: "eth_chainId",
});
console.log("Chain ID:", parseInt(chainId, 16)); // "0x1" -> 1 (mainnet)
 
// Dengarkan perubahan akun (pengguna berganti akun di MetaMask)
window.ethereum.on("accountsChanged", (accounts: string[]) => {
  if (accounts.length === 0) {
    console.log("Dompet terputus");
  } else {
    console.log("Beralih ke:", accounts[0]);
  }
});
 
// Dengarkan perubahan chain (pengguna berganti jaringan)
window.ethereum.on("chainChanged", (chainId: string) => {
  // Pendekatan yang disarankan adalah memuat ulang halaman
  window.location.reload();
});

// Menemukan semua dompet yang tersedia
interface EIP6963ProviderDetail {
  info: {
    uuid: string;
    name: string;
    icon: string;
    rdns: string; // Nama domain terbalik, mis., "io.metamask"
  };
  provider: EIP1193Provider;
}
 
const wallets: EIP6963ProviderDetail[] = [];
 
window.addEventListener("eip6963:announceProvider", (event: CustomEvent) => {
  wallets.push(event.detail);
});
 
// Minta semua dompet mengumumkan diri
window.dispatchEvent(new Event("eip6963:requestProvider"));
 
// Sekarang 'wallets' berisi semua dompet terinstal dengan nama dan ikon
// Anda bisa menampilkan UI pemilihan dompet

import { walletConnect } from "wagmi/connectors";
 
const connector = walletConnect({
  projectId: "YOUR_PROJECT_ID", // Dapatkan dari 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>Silakan hubungkan dompet Anda</p>;
 
  if (chain.id !== mainnet.id) {
    return (
      <div>
        <p>Silakan beralih ke Ethereum Mainnet</p>
        <button
          onClick={() => switchChain({ chainId: mainnet.id })}
          disabled={isPending}
        >
          {isPending ? "Beralih..." : "Ganti Jaringan"}
        </button>
      </div>
    );
  }
 
  return <>{children}</>;
}

{
  "name": "Cool NFT #42",
  "description": "NFT yang sangat keren",
  "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}`;
    // Atau gunakan gateway khusus:
    // return `https://YOUR_PROJECT.mypinata.cloud/ipfs/${cid}`;
  }
  return uri;
}
 
// Mengambil metadata 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,
  };
}

// Mengunggah ke 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}`; // Mengembalikan CID
}

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

// Melakukan query subgraph dari 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: Dapatkan semua saldo token ERC-20 untuk alamat
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"],
  }),
});
 
// Mengembalikan SEMUA saldo token ERC-20 dalam satu panggilan
// vs. memindai setiap kemungkinan balanceOf() kontrak ERC-20

// Alchemy: Dapatkan semua NFT yang dimiliki alamat
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}`);
}

// SALAH — kehilangan presisi secara diam-diam
const balance = 1000000000000000000; // 1 ETH dalam wei
const double = balance * 2;
console.log(double); // 2000000000000000000 — tampak benar, tapi...
 
const largeBalance = 99999999999999999999; // ~100 ETH
console.log(largeBalance); // 100000000000000000000 — SALAH! Dibulatkan ke atas.
console.log(largeBalance === 100000000000000000000); // true — korupsi data
 
// BENAR — gunakan BigInt
const balance = 1000000000000000000n;
const double = balance * 2n;
console.log(double.toString()); // "2000000000000000000" — benar
 
const largeBalance = 99999999999999999999n;
console.log(largeBalance.toString()); // "99999999999999999999" — benar

import { formatUnits, parseUnits } from "viem";
 
// Tampilan: BigInt → string yang mudah dibaca
const weiAmount = 1500000000000000000n; // 1.5 ETH
const display = formatUnits(weiAmount, 18); // "1.5"
 
// Input: string yang mudah dibaca → BigInt
const userInput = "1.5";
const wei = parseUnits(userInput, 18); // 1500000000000000000n
 
// USDC punya 6 desimal, bukan 18
const usdcAmount = 100000000n; // 100 USDC
const usdcDisplay = formatUnits(usdcAmount, 6); // "100.0"

// Pengguna bisa menolak prompt dompet apa pun
try {
  const tx = await writeContract({
    address: contractAddress,
    abi: ERC20_ABI,
    functionName: "approve",
    args: [spenderAddress, amount],
  });
} catch (error) {
  if (error.code === 4001) {
    // Pengguna menolak transaksi di dompet mereka
    // Ini normal — bukan error yang perlu dilaporkan
    showToast("Transaksi dibatalkan");
  } else if (error.code === -32603) {
    // Error JSON-RPC internal — sering berarti transaksi akan revert
    showToast("Transaksi akan gagal. Periksa saldo Anda.");
  } else {
    // Error tidak terduga
    console.error("Error transaksi:", error);
    showToast("Terjadi kesalahan. Silakan coba lagi.");
  }
}

// Pengecekan chain defensif
import { useAccount, useChainId } from "wagmi";
 
function useRequireChain(requiredChainId: number) {
  const chainId = useChainId();
  const { isConnected } = useAccount();
 
  if (!isConnected) {
    return { ready: false, error: "Silakan hubungkan dompet Anda" };
  }
 
  if (chainId !== requiredChainId) {
    return {
      ready: false,
      error: `Silakan beralih ke ${getChainName(requiredChainId)}. Anda di ${getChainName(chainId)}.`,
    };
  }
 
  return { ready: true, error: null };
}

// Mengatur toleransi slippage pada swap bergaya Uniswap
const amountOutMin = (expectedOutput * 995n) / 1000n; // Toleransi slippage 0.5%
 
// Menggunakan deadline untuk mencegah transaksi tertunda yang bertahan lama
const deadline = BigInt(Math.floor(Date.now() / 1000) + 60 * 20); // 20 menit
 
await router.swapExactTokensForTokens(
  amountIn,
  amountOutMin, // Output minimum yang diterima — revert jika mendapat kurang
  [tokenA, tokenB],
  userAddress,
  deadline, // Revert jika tidak dieksekusi dalam 20 menit
);

// Menggunakan Flashbots Protect sebagai endpoint RPC Anda
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; // Tidak ada error — transaksi akan berhasil
  } catch (error) {
    // Decode alasan revert
    if (error.data) {
      // String revert umum
      if (error.data.startsWith("0x08c379a0")) {
        // Error(string) — revert standar dengan pesan
        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("");
 
  // Baca saldo — hanya berjalan ketika address didefinisikan
  const { data: balance, refetch: refetchBalance } = useReadContract({
    address: USDC_ADDRESS,
    abi: USDC_ABI,
    functionName: "balanceOf",
    args: address ? [address] : undefined,
    query: { enabled: !!address },
  });
 
  // Tulis: transfer token
  const {
    writeContract,
    data: txHash,
    isPending: isSigning,
    error: writeError,
  } = useWriteContract();
 
  // Tunggu konfirmasi
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({
    hash: txHash,
  });
 
  // Refresh saldo setelah konfirmasi
  if (isSuccess) {
    refetchBalance();
  }
 
  if (!isConnected) {
    return (
      <button onClick={() => connect({ connector: injected() })}>
        Hubungkan Dompet
      </button>
    );
  }
 
  return (
    <div>
      <p>Terhubung: {address}</p>
      <p>
        Saldo USDC:{" "}
        {balance !== undefined ? formatUnits(balance, 6) : "Memuat..."}
      </p>
 
      <div>
        <input
          placeholder="Alamat penerima (0x...)"
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
        />
        <input
          placeholder="Jumlah (mis., 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
            ? "Konfirmasi di dompet..."
            : isConfirming
              ? "Mengonfirmasi..."
              : "Kirim USDC"}
        </button>
      </div>
 
      {writeError && <p style={{ color: "red" }}>{writeError.message}</p>}
      {isSuccess && <p style={{ color: "green" }}>Transfer dikonfirmasi!</p>}
      {txHash && (
        <a
          href={`https://etherscan.io/tx/${txHash}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          Lihat di Etherscan
        </a>
      )}
 
      <button onClick={() => disconnect()}>Putuskan Koneksi</button>
    </div>
  );
}