웹 개발자를 위한 Ethereum: 과대광고 없는 스마트 컨트랙트

interface Transaction {
  // 이 트랜잭션을 받는 사람 — EOA 주소 또는 컨트랙트 주소
  to: string;      // 20바이트 16진수 주소, 또는 컨트랙트 배포 시 null
  // 보낼 ETH 양 (wei 단위)
  value: bigint;   // 순수 컨트랙트 호출의 경우 0n이 될 수 있음
  // 인코딩된 함수 호출 데이터, 또는 단순 ETH 전송의 경우 비어 있음
  data: string;    // 16진수 인코딩된 바이트, 단순 전송의 경우 "0x"
  // 순차적 카운터, 리플레이 공격 방지
  nonce: number;   // 발신자의 현재 nonce와 정확히 일치해야 함
  // 가스 한도 — 이 트랜잭션이 소비할 수 있는 최대 가스
  gasLimit: bigint;
  // EIP-1559 수수료 매개변수
  maxFeePerGas: bigint;
  maxPriorityFeePerGas: bigint;
  // 체인 식별자 (1 = 메인넷, 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"), // "0.1"을 wei로 변환 (100000000000000000n)
});
 
console.log("Tx hash:", tx.hash);
 
// 블록에 포함될 때까지 대기
const receipt = await tx.wait();
console.log("Block number:", receipt.blockNumber);
console.log("Gas used:", receipt.gasUsed.toString());
console.log("Status:", receipt.status); // 1 = 성공, 0 = 되돌림

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 = [
  // 읽기 전용 함수 (view/pure — 외부에서 호출 시 가스 비용 없음)
  "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)",
 
  // 상태 변경 함수 (트랜잭션 필요, 가스 비용 발생)
  "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)",
 
  // 이벤트 (실행 중 발생, 트랜잭션 로그에 저장)
  "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);
 
// 함수 호출 인코딩
const calldata = iface.encodeFunctionData("transfer", [
  "0xBobAddress...",
  1000000n,
]);
console.log(calldata);
// 0xa9059cbb000000000000000000000000bob...000000000000000000000000000f4240
 
// calldata를 함수 이름과 인수로 디코딩
const decoded = iface.parseTransaction({ data: calldata });
console.log(decoded.name);       // "transfer"
console.log(decoded.args[0]);    // "0xBobAddress..."
console.log(decoded.args[1]);    // 1000000n (BigInt)
 
// 함수의 반환 데이터 디코딩
const returnData = "0x0000000000000000000000000000000000000000000000000000000000000001";
const result = iface.decodeFunctionResult("transfer", returnData);
console.log(result[0]); // true

// 컨트랙트의 스토리지 슬롯 0 읽기
const slot0 = await provider.getStorage(
  "0xContractAddress...",
  0
);
console.log(slot0); // 원시 32바이트 16진수 값

// ethers.js로 실시간 Transfer 이벤트 리스닝
const contract = new ethers.Contract(tokenAddress, ERC20_ABI, provider);
 
contract.on("Transfer", (from, to, value, event) => {
  console.log(`${from} -> ${to}: ${ethers.formatUnits(value, 18)} 토큰`);
  console.log("Block:", event.log.blockNumber);
  console.log("Tx hash:", event.log.transactionHash);
});
 
// 과거 이벤트 쿼리
const filter = contract.filters.Transfer(null, "0xMyAddress..."); // from=아무나, to=특정 주소
const events = await contract.queryFilter(filter, 19000000, 19100000); // 블록 범위
 
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"),
});
 
// 과거 로그
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);
}
 
// 실시간 감시
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()를 호출

// 라이브러리가 내부적으로 하는 것
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 폴백 프로바이더
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 인터페이스 — 읽기 함수만
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 // 참고: signer가 아닌 provider. 읽기 전용.
);
 
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 (18이 아닙니다!)
console.log(`Total supply: ${ethers.formatUnits(totalSupply, decimals)}`);
 
// 특정 주소의 잔액 확인
const balance = await erc20.balanceOf("0xSomeAddress...");
console.log(`Balance: ${ethers.formatUnits(balance, decimals)} USDC`);

import { ethers } from "ethers";
 
// 노드에 연결
const provider = new ethers.JsonRpcProvider("https://...");
 
// 기본 쿼리
const blockNumber = await provider.getBlockNumber();
const balance = await provider.getBalance("0xAddress...");
const block = await provider.getBlock(blockNumber);
const txCount = await provider.getTransactionCount("0xAddress...");

// 개인 키에서 (서버 측, 스크립트)
const wallet = new ethers.Wallet("0xPrivateKey...", provider);
 
// 브라우저 지갑에서 (클라이언트 측)
const browserProvider = new ethers.BrowserProvider(window.ethereum);
const signer = await browserProvider.getSigner();
 
// 주소 가져오기
const address = await signer.getAddress();

const usdc = new ethers.Contract(USDC_ADDRESS, ERC20_ABI, provider);
 
// 읽기 (무료, 값을 직접 반환)
const balance = await usdc.balanceOf("0xSomeAddress...");
// balance는 bigint: 1000000000n (6 decimals로 1000 USDC)
 
// 쓰기 위해 signer로 연결
const usdcWithSigner = usdc.connect(signer);
 
// 쓰기 (가스 비용 발생, TransactionResponse 반환)
const tx = await usdcWithSigner.transfer("0xRecipient...", 1000000n);
const receipt = await tx.wait(); // 블록 포함 대기
 
if (receipt.status === 0) {
  throw new Error("트랜잭션이 되돌아갔습니다");
}

// TypeChain 없이 — 타입 검사 없음
const balance = await contract.balanceOf("0x...");
// balance는 'any'. 자동완성 없음. 잘못 사용하기 쉬움.
 
// TypeChain 사용 — 완전한 타입 안전성
import { USDC__factory } from "./typechain";
 
const usdc = USDC__factory.connect(USDC_ADDRESS, provider);
const balance = await usdc.balanceOf("0x...");
// balance는 BigNumber. 자동완성이 작동함. 컴파일 타임에 타입 오류 포착.

// 실시간 이벤트를 위한 WebSocket
const wsProvider = new ethers.WebSocketProvider("wss://eth-mainnet.g.alchemy.com/v2/YOUR_KEY");
 
const contract = new ethers.Contract(USDC_ADDRESS, ERC20_ABI, wsProvider);
 
// 모든 Transfer 이벤트 리스닝
contract.on("Transfer", (from, to, value, event) => {
  console.log(`Transfer: ${from} -> ${to}`);
  console.log(`Amount: ${ethers.formatUnits(value, 6)} USDC`);
});
 
// 특정 주소로의 전송 리스닝
const filter = contract.filters.Transfer(null, "0xMyAddress...");
contract.on(filter, (from, to, value) => {
  console.log(`수신 전송: ${ethers.formatUnits(value, 6)} USDC from ${from}`);
});
 
// 완료 시 정리
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>로딩 중...</span>;
  if (error) return <span>오류: {error.message}</span>;
 
  // ABI가 uint256이라고 했으므로 balance는 bigint으로 타입됩니다
  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 ? "지갑에서 확인 중..." : "100 USDC 보내기"}
      </button>
 
      {hash && <p>트랜잭션: {hash}</p>}
      {isConfirming && <p>확인 대기 중...</p>}
      {isSuccess && <p>전송 확인됨!</p>}
      {error && <p>오류: {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;
}

// 저수준 지갑 상호작용 (직접 하면 안 되지만, 이해하는 데 유용)
 
// 계정 접근 요청
const accounts = await window.ethereum.request({
  method: "eth_requestAccounts",
});
console.log("연결된 주소:", accounts[0]);
 
// 현재 체인 가져오기
const chainId = await window.ethereum.request({
  method: "eth_chainId",
});
console.log("Chain ID:", parseInt(chainId, 16)); // "0x1" -> 1 (메인넷)
 
// 계정 변경 리스닝 (사용자가 MetaMask에서 계정 전환)
window.ethereum.on("accountsChanged", (accounts: string[]) => {
  if (accounts.length === 0) {
    console.log("지갑 연결 끊김");
  } else {
    console.log("전환됨:", accounts[0]);
  }
});
 
// 체인 변경 리스닝 (사용자가 네트워크 전환)
window.ethereum.on("chainChanged", (chainId: string) => {
  // 권장 접근 방식은 페이지를 새로고침하는 것
  window.location.reload();
});

// 사용 가능한 모든 지갑 발견
interface EIP6963ProviderDetail {
  info: {
    uuid: string;
    name: string;
    icon: string;
    rdns: string;  // 역방향 도메인 이름, 예: "io.metamask"
  };
  provider: EIP1193Provider;
}
 
const wallets: EIP6963ProviderDetail[] = [];
 
window.addEventListener("eip6963:announceProvider", (event: CustomEvent) => {
  wallets.push(event.detail);
});
 
// 모든 지갑에 자신을 알리도록 요청
window.dispatchEvent(new Event("eip6963:requestProvider"));
 
// 이제 'wallets'에 이름과 아이콘이 포함된 모든 설치된 지갑이 있습니다
// 지갑 선택 UI를 보여줄 수 있습니다

import { walletConnect } from "wagmi/connectors";
 
const connector = walletConnect({
  projectId: "YOUR_PROJECT_ID", // 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>지갑을 연결해 주세요</p>;
 
  if (chain.id !== mainnet.id) {
    return (
      <div>
        <p>Ethereum 메인넷으로 전환해 주세요</p>
        <button
          onClick={() => switchChain({ chainId: mainnet.id })}
          disabled={isPending}
        >
          {isPending ? "전환 중..." : "네트워크 전환"}
        </button>
      </div>
    );
  }
 
  return <>{children}</>;
}

{
  "name": "Cool NFT #42",
  "description": "매우 멋진 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}`;
    // 또는 전용 게이트웨이 사용:
    // return `https://YOUR_PROJECT.mypinata.cloud/ipfs/${cid}`;
  }
  return uri;
}
 
// 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,
  };
}

// 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}`; // CID 반환
}

# 서브그래프 스키마 (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")
}

// 프론트엔드에서 서브그래프 쿼리
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: 주소의 모든 ERC-20 토큰 잔액 가져오기
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"],
    }),
  }
);
 
// 한 번의 호출로 모든 ERC-20 토큰 잔액을 반환
// 모든 가능한 ERC-20 컨트랙트의 balanceOf()를 스캔하는 것과 비교

// Alchemy: 주소가 소유한 모든 NFT 가져오기
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}`);
}

// 잘못됨 — 정밀도 손실이 조용히 발생
const balance = 1000000000000000000; // wei로 1 ETH
const double = balance * 2;
console.log(double); // 2000000000000000000 — 맞아 보이지만...
 
const largeBalance = 99999999999999999999; // ~100 ETH
console.log(largeBalance);          // 100000000000000000000 — 틀림! 반올림됨.
console.log(largeBalance === 100000000000000000000); // true — 데이터 손상
 
// 올바름 — BigInt 사용
const balance = 1000000000000000000n;
const double = balance * 2n;
console.log(double.toString()); // "2000000000000000000" — 정확
 
const largeBalance = 99999999999999999999n;
console.log(largeBalance.toString()); // "99999999999999999999" — 정확

import { formatUnits, parseUnits } from "viem";
 
// 표시: BigInt → 사람이 읽을 수 있는 문자열
const weiAmount = 1500000000000000000n; // 1.5 ETH
const display = formatUnits(weiAmount, 18); // "1.5"
 
// 입력: 사람이 읽을 수 있는 문자열 → BigInt
const userInput = "1.5";
const wei = parseUnits(userInput, 18); // 1500000000000000000n
 
// USDC는 18이 아닌 6 decimals
const usdcAmount = 100000000n; // 100 USDC
const usdcDisplay = formatUnits(usdcAmount, 6); // "100.0"

// 사용자는 어떤 지갑 프롬프트도 거부할 수 있습니다
try {
  const tx = await writeContract({
    address: contractAddress,
    abi: ERC20_ABI,
    functionName: "approve",
    args: [spenderAddress, amount],
  });
} catch (error) {
  if (error.code === 4001) {
    // 사용자가 지갑에서 트랜잭션을 거부
    // 이것은 정상 — 보고할 오류가 아님
    showToast("트랜잭션 취소됨");
  } else if (error.code === -32603) {
    // 내부 JSON-RPC 오류 — 종종 트랜잭션이 되돌릴 것을 의미
    showToast("트랜잭션이 실패할 것입니다. 잔액을 확인하세요.");
  } else {
    // 예상치 못한 오류
    console.error("트랜잭션 오류:", error);
    showToast("문제가 발생했습니다. 다시 시도해 주세요.");
  }
}

// 방어적 체인 확인
import { useAccount, useChainId } from "wagmi";
 
function useRequireChain(requiredChainId: number) {
  const chainId = useChainId();
  const { isConnected } = useAccount();
 
  if (!isConnected) {
    return { ready: false, error: "지갑을 연결해 주세요" };
  }
 
  if (chainId !== requiredChainId) {
    return {
      ready: false,
      error: `${getChainName(requiredChainId)}으로 전환해 주세요. 현재 ${getChainName(chainId)}에 있습니다.`,
    };
  }
 
  return { ready: true, error: null };
}

// Uniswap 스타일 스왑에서 슬리피지 허용 범위 설정
const amountOutMin = expectedOutput * 995n / 1000n; // 0.5% 슬리피지 허용
 
// 장기 대기 트랜잭션을 방지하기 위한 데드라인 사용
const deadline = BigInt(Math.floor(Date.now() / 1000) + 60 * 20); // 20분
 
await router.swapExactTokensForTokens(
  amountIn,
  amountOutMin,  // 최소 허용 출력 — 이보다 적으면 되돌림
  [tokenA, tokenB],
  userAddress,
  deadline,       // 20분 내에 실행되지 않으면 되돌림
);

// Flashbots Protect를 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; // 오류 없음 — 트랜잭션이 성공할 것
  } catch (error) {
    // 되돌림 이유 디코딩
    if (error.data) {
      // 일반적인 되돌림 문자열
      if (error.data.startsWith("0x08c379a0")) {
        // Error(string) — 메시지가 있는 표준 되돌림
        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("");
 
  // 잔액 읽기 — address가 정의되었을 때만 실행
  const { data: balance, refetch: refetchBalance } = useReadContract({
    address: USDC_ADDRESS,
    abi: USDC_ABI,
    functionName: "balanceOf",
    args: address ? [address] : undefined,
    query: { enabled: !!address },
  });
 
  // 쓰기: 토큰 전송
  const {
    writeContract,
    data: txHash,
    isPending: isSigning,
    error: writeError,
  } = useWriteContract();
 
  // 확인 대기
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({
    hash: txHash,
  });
 
  // 확인 후 잔액 재조회
  if (isSuccess) {
    refetchBalance();
  }
 
  if (!isConnected) {
    return (
      <button onClick={() => connect({ connector: injected() })}>
        지갑 연결
      </button>
    );
  }
 
  return (
    <div>
      <p>연결됨: {address}</p>
      <p>
        USDC 잔액:{" "}
        {balance !== undefined ? formatUnits(balance, 6) : "로딩 중..."}
      </p>
 
      <div>
        <input
          placeholder="수신자 주소 (0x...)"
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
        />
        <input
          placeholder="금액 (예: 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
            ? "지갑에서 확인 중..."
            : isConfirming
              ? "확인 중..."
              : "USDC 보내기"}
        </button>
      </div>
 
      {writeError && <p style={{ color: "red" }}>{writeError.message}</p>}
      {isSuccess && <p style={{ color: "green" }}>전송 확인됨!</p>}
      {txHash && (
        <a
          href={`https://etherscan.io/tx/${txHash}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          Etherscan에서 보기
        </a>
      )}
 
      <button onClick={() => disconnect()}>연결 끊기</button>
    </div>
  );
}