周末动手：零后端构建多链加密货币投资组合追踪器

npx create-next-app@latest crypto-tracker --typescript --tailwind --app
cd crypto-tracker

npm install @tanstack/react-query axios

COVALENT_API_KEY=your_key_here
NEXT_PUBLIC_SUPPORTED_CHAINS=1,137,42161,56,43114

// lib/chains.ts
export const CHAINS = {
  1: {
    name: 'Ethereum',
    symbol: 'ETH',
    color: '#627EEA',
    covalentChainId: 'eth-mainnet',
    coingeckoId: 'ethereum',
    explorer: 'https://etherscan.io'
  },
  137: {
    name: 'Polygon',
    symbol: 'MATIC',
    color: '#8247E5',
    covalentChainId: 'matic-mainnet',
    coingeckoId: 'polygon-pos',
    explorer: 'https://polygonscan.com'
  },
  42161: {
    name: 'Arbitrum',
    symbol: 'ETH',
    color: '#12AAFF',
    covalentChainId: 'arbitrum-mainnet',
    coingeckoId: 'arbitrum-one',
    explorer: 'https://arbiscan.io'
  },
  56: {
    name: 'BSC',
    symbol: 'BNB',
    color: '#F0B90B',
    covalentChainId: 'bsc-mainnet',
    coingeckoId: 'binance-smart-chain',
    explorer: 'https://bscscan.com'
  },
  43114: {
    name: 'Avalanche',
    symbol: 'AVAX',
    color: '#E84142',
    covalentChainId: 'avalanche-mainnet',
    coingeckoId: 'avalanche',
    explorer: 'https://snowtrace.io'
  }
} as const;

export type ChainId = keyof typeof CHAINS;

// app/actions/balances.ts
'use server'

import { CHAINS, ChainId } from '@/lib/chains';

interface TokenBalance {
  contract_address: string;
  contract_name: string;
  contract_ticker_symbol: string;
  contract_decimals: number;
  balance: string;
  quote: number;
  logo_url: string;
}

interface ChainBalances {
  chainId: ChainId;
  chainName: string;
  tokens: TokenBalance[];
  totalUsd: number;
}

export async function getBalancesForChain(
  address: string,
  chainId: ChainId
): Promise<ChainBalances> {
  const chain = CHAINS[chainId];
  const apiKey = process.env.COVALENT_API_KEY;

  const response = await fetch(
    `https://api.covalenthq.com/v1/${chain.covalentChainId}/address/${address}/balances_v2/?key=${apiKey}`,
    { next: { revalidate: 60 } }
  );

  if (!response.ok) {
    throw new Error(`Failed to fetch balances for ${chain.name}`);
  }

  const data = await response.json();
  const items = data.data?.items || [];

  const tokens = items
    .filter((item: any) => parseFloat(item.balance) > 0)
    .map((item: any) => ({
      contract_address: item.contract_address,
      contract_name: item.contract_name,
      contract_ticker_symbol: item.contract_ticker_symbol,
      contract_decimals: item.contract_decimals,
      balance: item.balance,
      quote: item.quote || 0,
      logo_url: item.logo_url
    }));

  const totalUsd = tokens.reduce((sum: number, t: TokenBalance) => sum + t.quote, 0);

  return {
    chainId,
    chainName: chain.name,
    tokens,
    totalUsd
  };
}

export async function getAllBalances(address: string): Promise<ChainBalances[]> {
  const chainIds = Object.keys(CHAINS).map(Number) as ChainId[];

  const results = await Promise.allSettled(
    chainIds.map(chainId => getBalancesForChain(address, chainId))
  );

  return results
    .filter((r): r is PromiseFulfilledResult<ChainBalances> => r.status === 'fulfilled')
    .map(r => r.value);
}

// components/portfolio-dashboard.tsx
'use client'

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { getAllBalances } from '@/app/actions/balances';
import { CHAINS, ChainId } from '@/lib/chains';

function formatUsd(value: number): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value);
}

function formatTokenBalance(balance: string, decimals: number): string {
  const value = parseFloat(balance) / Math.pow(10, decimals);
  if (value < 0.0001) return '<0.0001';
  if (value < 1) return value.toFixed(4);
  if (value < 1000) return value.toFixed(2);
  return value.toLocaleString('en-US', { maximumFractionDigits: 2 });
}

export function PortfolioDashboard({ address }: { address: string }) {
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ['balances', address],
    queryFn: () => getAllBalances(address),
    staleTime: 60 * 1000,
    refetchInterval: 5 * 60 * 1000
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4">
        <p className="text-red-400">加载投资组合数据失败</p>
        <button
          onClick={() => refetch()}
          className="mt-2 text-sm text-red-300 underline"
        >
          重试
        </button>
      </div>
    );
  }

  const totalPortfolioValue = data?.reduce((sum, chain) => sum + chain.totalUsd, 0) || 0;
  const sortedChains = [...(data || [])].sort((a, b) => b.totalUsd - a.totalUsd);

  return (
    <div className="space-y-6">
      <div className="bg-gradient-to-r from-purple-500/20 to-cyan-500/20 rounded-xl p-6">
        <p className="text-gray-400 text-sm">总投资组合价值</p>
        <p className="text-4xl font-bold text-white mt-1">
          {formatUsd(totalPortfolioValue)}
        </p>
        <p className="text-gray-500 text-sm mt-2">
          跨{sortedChains.length}条链 • 刚刚更新
        </p>
      </div>

      <div className="grid gap-4">
        {sortedChains.map(chain => (
          <ChainCard key={chain.chainId} chain={chain} />
        ))}
      </div>
    </div>
  );
}

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/crypto-tracker.git
git push -u origin main

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

const client = createPublicClient({
  chain: mainnet,
  transport: http()
});

async function resolveAddress(input: string): Promise<string> {
  if (input.endsWith('.eth')) {
    const resolved = await client.getEnsAddress({ name: input });
    if (!resolved) throw new Error('未找到ENS名称');
    return resolved;
  }
  return input;
}