import { useEffect, useState } from 'react';
import { Contract, JsonRpcProvider } from 'ethers';
import { ERC20_ABI } from './abis';

const PROVIDER_URL = 'wss://eth-mainnet.g.alchemy.com/v2/xxx';
const USDC = '0xA0b86a33E6441E6C7D3D4B4f6c7D3D4B4f6c7D3';

export function useErc20TransferEvents(address: string) {
  const [events, setEvents] = useState<any[]>([]);

  useEffect(() => {
    const provider = new JsonRpcProvider(PROVIDER_URL);
    const contract = new Contract(USDC, ERC20_ABI, provider);

    const handler = (from: string, to: string, amount: bigint, event: any) => {
      if (from.toLowerCase() === address.toLowerCase() ||
          to.toLowerCase() === address.toLowerCase()) {
        setEvents(prev => [...prev, { from, to, amount, logIndex: event.logIndex }]);
      }
    };

    // 持续监听 Transfer 事件
    contract.on("Transfer", handler);

    // 批量拉取最近 1000 个区块的历史事件，与实时监听构成"全量+增量"模式
    contract.queryFilter("Transfer", -1000, "latest")
      .then(logs => {
        const historical = logs
          .filter((l: any) =>
            l.args.from?.toLowerCase() === address.toLowerCase() ||
            l.args.to?.toLowerCase() === address.toLowerCase()
          )
          .map((l: any) => ({
            from: l.args.from,
            to: l.args.to,
            amount: l.args.amount,
            logIndex: l.logIndex,
          }));
        setEvents(prev => [...historical, ...prev]);
      });

    return () => {
      // 组件卸载时务必清理，避免内存泄漏与重复回调
      contract.off("Transfer", handler);
    };
  }, [address]);

  return events;
}

import { useEffect, useState } from 'react';
import { createPublicClient, webSocket } from 'viem';
import { mainnet }   from 'viem/chains';
import { erc20Abi }  from 'viem/erc20';

const client = createPublicClient({
  chain: mainnet,
  transport: webSocket('wss://eth-mainnet.g.alchemy.com/v2/xxx'),
});

export function useViemTransferEvents(address: `0x${string}`) {
  const [events, setEvents] = useState<any[]>([]);

  useEffect(() => {
    // Viem 的 watchContractEvent 返回 unwatch 函数
    const unwatch = client.watchContractEvent({
      address: '0xA0b86a33E6441E6C7D3D4B4f6c7D3D4B4f6c7D3',
      abi: erc20Abi,
      eventName: 'Transfer',
      args: { from: address, to: address }, // 细粒度过滤
      fromBlock: BigInt(await client.getBlockNumber()), // 避免重复拉取历史
      onLogs: (logs) => {
        setEvents(prev => [...prev, ...logs]);
      },
    });

    return () => {
      unwatch(); // 清理
    };
  }, [address]);

  return events;
}

import { useState, useCallback } from 'react';
import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
import { erc20Abi } from 'viem/erc20';

interface OptimisticState {
  status: 'idle' | 'pending' | 'success' | 'reverted';
  snapshot: bigint | null; // 交易前的余额快照
  optimisticValue: bigint; // 乐观更新的余额
}

export function useOptimisticTransfer(token: `0x${string}`) {
  const [state, setState] = useState<OptimisticState>({
    status: 'idle', snapshot: null, optimisticValue: 0n,
  });

  const { writeContract, data: hash } = useWriteContract();
  const { isLoading, isSuccess, isError } = useWaitForTransactionReceipt({ hash });

  const send = useCallback(
    async (to: `0x${string}`, currentBalance: bigint, amount: bigint) => {
      // 第 1 步：保存快照
      setState({
        status: 'pending',
        snapshot: currentBalance,
        optimisticValue: currentBalance - amount,
      });

      // 第 2 步：发起链上交易
      writeContract({
        address: token,
        abi: erc20Abi,
        functionName: 'transfer',
        args: [to, amount],
      });
    },
    [token, writeContract]
  );

  // 根据 wagmi 的状态自动处理确认/回滚
  if (state.status === 'pending') {
    if (isSuccess) {
      setState(prev => ({ ...prev, status: 'success' }));
    } else if (isError) {
      // 第 4 步：交易失败，从快照恢复
      setState(prev => ({
        ...prev,
        status: 'reverted',
        optimisticValue: prev.snapshot ?? 0n,
      }));
    }
  }

  return {
    send,
    balance: state.status === 'pending' ? state.optimisticValue : undefined,
    status: state.status,
    isConfirming: isLoading,
  };
}

/**
 * 将去中心化 URI 解析为浏览器可访问的 HTTP URL
 */
export function resolveUri(
  uri: string,
  gateway?: { ipfs?: string; arweave?: string }
): string {
  const gw = {
    ipfs: gateway?.ipfs ?? 'https://cf-ipfs.com/ipfs',
    arweave: gateway?.arweave ?? 'https://arweave.net',
  };

  if (uri.startsWith('ipfs://')) {
    return `${gw.ipfs}/${uri.slice(7)}`;
  }
  if (uri.startsWith('ar://')) {
    return `${gw.arweave}/${uri.slice(5)}`;
  }
  // 已经是 https 或 http，直接返回
  return uri;
}

import React, { useState, useEffect } from 'react';
import { resolveUri } from './utils/resolveUri';

interface NftDisplayProps {
  tokenURI: string;
  fallbackImage?: string;
}

export const NftDisplay: React.FC<NftDisplayProps> = ({
  tokenURI,
  fallbackImage = '/placeholder.png',
}) => {
  const [metadata, setMetadata] = useState<any>(null);
  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');

  useEffect(() => {
    const url = resolveUri(tokenURI, {
      ipfs: 'https://your-pinata-gateway.mypinata.cloud/ipfs',
      arweave: 'https://arweave.net',
    });

    fetch(url)
      .then((r) => r.json())
      .then((data) => {
        setMetadata(data);
        setStatus('success');
      })
      .catch(() => setStatus('error'));
  }, [tokenURI]);

  if (status === 'loading') return <div className="nft-placeholder">加载中…</div>;
  if (status === 'error')   return <img src={fallbackImage} alt="加载失败" />;

  const imageUrl = resolveUri(metadata?.image ?? '');

  return (
    <div className="nft-card">
      <img src={imageUrl} alt={metadata?.name ?? 'NFT'} loading="lazy" />
      <h3>{metadata?.name}</h3>
      <p>{metadata?.description}</p>
    </div>
  );
};

import { WebIrys } from '@irys/sdk';
import { BrowserProvider } from 'ethers';

export async function uploadToIrys(
  file: File,
  tags: { name: string; value: string }[]
): Promise<string> {
  // 通过浏览器钱包获取签名者
  const provider = new BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();

  const webIrys = new WebIrys({
    url: 'https://node1.irys.xyz', // 或 https://devnet.irys.xyz 测试网
    token: 'ethereum',
    wallet: { provider: signer.provider, rpcUrl: undefined as any },
  });

  await webIrys.ready();

  const receipt = await webIrys.uploadFile(file, { tags });
  // 返回 ar://<transactionId>
  return `ar://${receipt.id}`;
}

export interface BridgeProvider {
  /** 发起跨链交易，返回源链 txHash */
  send(params: BridgeSendParams): Promise<{ srcTxHash: string }>;
  /** 查询跨链状态 */
  getStatus(srcChain: number, srcTxHash: string): Promise<BridgeStatus>;
  /** 预估到账时间（秒） */
  getEstimatedTime(srcChain: number, dstChain: number): number;
  /** 手动重试目标链交付（部分桥支持） */
  retry?(srcChain: number, srcTxHash: string): Promise<void>;
}

export type BridgeStatus =
  | 'pending'
  | 'source_confirmed'
  | 'delivered'
  | 'target_pending'
  | 'completed'
  | 'failed';

export interface BridgeSendParams {
  srcChain: number;
  dstChain: number;
  token: string;
  amount: string;
  recipient: string;
}

import { useCallback } from 'react';
import { useSwitchChain } from 'wagmi';

export function useSwitchOrAddChain() {
  const { switchChainAsync } = useSwitchChain();

  const switchOrAdd = useCallback(async (chainId: number) => {
    try {
      await switchChainAsync({ chainId });
    } catch (error: any) {
      // 4902 = 用户钱包中未添加该链
      if (error.code === 4902) {
        const chainConfig = SUPPORTED_CHAINS.find((c) => c.chainId === chainId);
        if (!chainConfig) throw new Error('不支持的链');

        await window.ethereum.request({
          method: 'wallet_addEthereumChain',
          params: [{
            chainId: `0x${chainId.toString(16)}`,
            chainName: chainConfig.name,
            rpcUrls: [chainConfig.rpcUrl],
            nativeCurrency: chainConfig.nativeCurrency,
            blockExplorerUrls: [chainConfig.blockExplorer],
          }],
        });
        // 添加后再次切换
        await switchChainAsync({ chainId });
      } else {
        throw error;
      }
    }
  }, [switchChainAsync]);

  return { switchOrAdd };
}

import React, { useState, useEffect } from 'react';

interface CrossChainTransferStatusProps {
  srcChain: number;
  dstChain: number;
  srcTxHash: string;
  bridgeStatus: BridgeStatus;
  onRetry?: () => void;
}

export const CrossChainTransferStatus: React.FC<CrossChainTransferStatusProps> = ({
  srcChain,
  dstChain,
  srcTxHash,
  bridgeStatus,
  onRetry,
}) => {
  const steps = [
    { key: 'pending',           label: '源链交易已提交' },
    { key: 'source_confirmed',  label: '源链已确认' },
    { key: 'delivered',         label: '跨链消息已送达' },
    { key: 'target_pending',    label: '目标链交易执行中' },
    { key: 'completed',         label: '目标链已到账' },
  ];

  const currentIndex = steps.findIndex((s) => s.key === bridgeStatus);
  const isFailed = bridgeStatus === 'failed';

  return (
    <div className="cross-chain-status">
      <h4>跨链转账进度</h4>
      <div className="steps">
        {steps.map((step, i) => (
          <div
            key={step.key}
            className={`step ${i <= currentIndex ? 'active' : ''}${isFailed ? 'failed' : ''}`}
          >
            <div className="step-dot" />
            <span>{step.label}</span>
          </div>
        ))}
      </div>
      <div className="tx-links">
        <a href={`${getExplorer(srcChain)}/tx/${srcTxHash}`} target="_blank" rel="noopener">
          源链交易
        </a>
      </div>
      {isFailed && onRetry && (
        <button onClick={onRetry} className="retry-btn">
          手动重试
        </button>
      )}
    </div>
  );
}