viem + wagmi: где заканчивается viem и начинается wagmi

import { createPublicClient, http, formatUnits } from "viem";
import { mainnet } from "viem/chains";

const publicClient = createPublicClient({
  chain: mainnet,
  transport: http("https://ethereum.publicnode.com"),
});

const usdcAddress = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48";
const holder = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";

const erc20Abi = [
  {
    type: "function",
    name: "balanceOf",
    stateMutability: "view",
    inputs: [{ name: "account", type: "address" }],
    outputs: [{ type: "uint256" }],
  },
  {
    type: "function",
    name: "decimals",
    stateMutability: "view",
    inputs: [],
    outputs: [{ type: "uint8" }],
  },
] as const;

const [rawBalance, decimals] = await Promise.all([
  publicClient.readContract({
    address: usdcAddress,
    abi: erc20Abi,
    functionName: "balanceOf",
    args: [holder],
  }),
  publicClient.readContract({
    address: usdcAddress,
    abi: erc20Abi,
    functionName: "decimals",
  }),
]);

console.log(formatUnits(rawBalance, decimals));

npm install wagmi viem @tanstack/react-query

// config.ts
import { createConfig, http } from "wagmi";
import { mainnet } from "wagmi/chains";

export const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http("https://ethereum.publicnode.com"),
  },
});

// main.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { config } from "./config";
import { UsdcBalance } from "./UsdcBalance";

const queryClient = new QueryClient();

export function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <UsdcBalance />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

// UsdcBalance.tsx
import { useReadContract } from "wagmi";
import { formatUnits } from "viem";

const usdcAddress = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48";
const holder = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";

const erc20Abi = [
  {
    type: "function",
    name: "balanceOf",
    stateMutability: "view",
    inputs: [{ name: "account", type: "address" }],
    outputs: [{ type: "uint256" }],
  },
  {
    type: "function",
    name: "decimals",
    stateMutability: "view",
    inputs: [],
    outputs: [{ type: "uint8" }],
  },
] as const;

export function UsdcBalance() {
  const balance = useReadContract({
    address: usdcAddress,
    abi: erc20Abi,
    functionName: "balanceOf",
    args: [holder],
  });

  const decimals = useReadContract({
    address: usdcAddress,
    abi: erc20Abi,
    functionName: "decimals",
  });

  if (balance.isLoading || decimals.isLoading) {
    return <p>Загрузка…</p>;
  }

  if (balance.error || decimals.error || balance.data == null || decimals.data == null) {
    return <p>Не удалось прочитать баланс</p>;
  }

  return <p>{formatUnits(balance.data, decimals.data)} USDC</p>;
}