₿ Web3 - DAPP-FRONTEND

What are the main differences between DApp and traditional web applications?

考察点：DApp核心概念理解。

答案：

DApp（去中心化应用）与传统Web应用的主要区别体现在架构设计、数据存储、身份验证和用户交互等多个层面。传统Web应用通常采用中心化的服务器-客户端架构，而DApp基于区块链技术构建，具有去中心化的特性。

主要区别：

• 架构模式： 传统Web应用依赖中心化服务器处理业务逻辑和数据存储，DApp将业务逻辑部署在区块链上的智能合约中，前端直接与区块链节点交互
• 数据存储： 传统应用数据存储在中心化数据库中，DApp将关键数据存储在区块链上，具有不可篡改和透明的特性
• 身份验证： 传统应用使用用户名密码或第三方OAuth，DApp通过数字钱包进行身份验证，用户拥有私钥控制权
• 交易机制： 传统应用的交易由服务器处理，DApp中每笔交易都需要用户签名确认，并支付Gas费用
• 用户体验： DApp需要处理区块链确认时间、网络拥堵、Gas费波动等问题，用户体验设计更加复杂

技术实现差异：

// 传统Web应用 - API调用
const response = await fetch('/api/user/profile', {
  method: 'POST',
  headers: { 'Authorization': `Bearer ${token}` },
  body: JSON.stringify(userData)
});

// DApp - 智能合约交互
const contract = new ethers.Contract(contractAddress, abi, signer);
const tx = await contract.updateProfile(userData);
await tx.wait(); // 等待区块确认

What core components are typically included in DApp frontend architecture?

考察点：DApp架构设计基础。

答案：

DApp前端架构需要处理复杂的区块链交互、状态管理和用户体验优化。其核心组件设计需要考虑去中心化特性、异步交互和多种区块链网络的兼容性。

核心组件：

• Web3 Provider层： 负责与区块链网络通信的桥梁，如MetaMask、WalletConnect等，提供账户访问和交易签名功能
• 钱包连接组件： 管理用户钱包的连接、断开、切换，监听账户和网络变化事件
• 合约交互层： 封装智能合约的调用逻辑，包括合约实例化、方法调用、事件监听和错误处理
• 状态管理层： 管理链上链下数据状态，处理异步数据同步、缓存策略和状态持久化
• 交易管理组件： 处理交易生命周期，包括交易构建、签名、提交、确认和状态跟踪
• 网络管理组件： 支持多链切换，管理不同网络的配置信息和RPC节点
• 错误处理组件： 统一处理区块链相关错误，提供用户友好的错误提示和恢复建议
• UI组件库： DApp专用的UI组件，如地址显示、余额格式化、交易状态指示器等

架构示例：

// DApp核心架构层次
DApp Frontend
├── Presentation Layer (React/Vue Components)
├── State Management (Redux/Zustand + Web3 State)
├── Web3 Integration Layer
│   ├── Wallet Connection Manager
│   ├── Contract Interaction Service  
│   ├── Transaction Manager
│   └── Network Manager
├── Utility Layer
│   ├── Error Handler
│   ├── Cache Manager
│   └── BigNumber Formatter
└── External Services
    ├── IPFS Client
    ├── Subgraph Client
    └── Price Oracle API

How to manage user authentication state in DApp?

考察点：身份验证机制。

答案：

DApp的身份验证基于区块链地址和数字签名，无需传统的用户名密码系统。用户通过数字钱包连接DApp，钱包地址即为用户身份标识。身份验证状态管理需要处理钱包连接、地址变化、网络切换等多种场景。

身份验证流程：

• 钱包连接： 用户主动连接钱包，DApp获取用户地址和网络信息
• 签名验证： 通过消息签名验证用户对地址的控制权
• 状态持久化： 将认证信息存储到本地存储，支持页面刷新后自动重连
• 状态监听： 监听钱包事件，及时更新用户状态和网络变化

实现示例：

// 身份验证状态管理
class AuthManager {
  constructor() {
    this.user = null;
    this.isConnected = false;
    this.listeners = [];
  }

  // 连接钱包
  async connectWallet() {
    try {
      if (typeof window.ethereum !== 'undefined') {
        const accounts = await window.ethereum.request({
          method: 'eth_requestAccounts'
        });
        
        if (accounts.length > 0) {
          this.user = {
            address: accounts[0],
            chainId: await window.ethereum.request({ method: 'eth_chainId' })
          };
          this.isConnected = true;
          this.saveToStorage();
          this.notifyListeners();
        }
      }
    } catch (error) {
      console.error('钱包连接失败:', error);
    }
  }

  // 消息签名验证
  async verifySignature(message) {
    try {
      const signature = await window.ethereum.request({
        method: 'personal_sign',
        params: [message, this.user.address]
      });
      return signature;
    } catch (error) {
      console.error('签名验证失败:', error);
      return null;
    }
  }

  // 监听账户变化
  setupEventListeners() {
    if (window.ethereum) {
      window.ethereum.on('accountsChanged', (accounts) => {
        if (accounts.length === 0) {
          this.logout();
        } else {
          this.user.address = accounts[0];
          this.notifyListeners();
        }
      });

      window.ethereum.on('chainChanged', (chainId) => {
        this.user.chainId = chainId;
        this.notifyListeners();
      });
    }
  }
}

状态管理策略：

• 本地存储： 使用localStorage保存连接状态，页面刷新后自动重连
• 状态同步： 实时监听钱包事件，同步更新应用状态
• 安全考虑： 不存储敏感信息，每次操作都需要用户确认签名

What is a Web3 Provider? What is its role in DApp?

考察点：Provider概念理解。

答案：

Web3 Provider是DApp与区块链网络之间的通信桥梁，它提供了一套标准化的API接口，使前端应用能够与以太坊或其他兼容区块链进行交互。Provider负责处理网络连接、账户管理、交易签名等核心功能。

Provider的核心作用：

• 网络连接： 建立与区块链节点的连接，支持多种网络（主网、测试网等）
• 账户管理： 管理用户账户信息，提供地址访问和权限控制
• 交易处理： 处理交易的构建、签名、广播和确认
• 数据查询： 提供区块链数据查询接口，如余额、交易历史、合约状态等
• 事件监听： 监听区块链事件和智能合约事件

常见Provider类型：

// 1. 浏览器内置Provider (MetaMask)
if (typeof window.ethereum !== 'undefined') {
  const provider = window.ethereum;
  // 请求连接账户
  await provider.request({ method: 'eth_requestAccounts' });
}

// 2. ethers.js Provider
import { ethers } from 'ethers';

// 使用浏览器Provider
const provider = new ethers.providers.Web3Provider(window.ethereum);

// 使用RPC Provider
const provider = new ethers.providers.JsonRpcProvider('https://mainnet.infura.io/v3/YOUR-PROJECT-ID');

// 3. WalletConnect Provider
import WalletConnectProvider from '@walletconnect/web3-provider';

const provider = new WalletConnectProvider({
  infuraId: 'YOUR-INFURA-ID',
  qrcode: true
});

await provider.enable();

Provider使用示例：

// 获取账户信息
const accounts = await provider.request({ method: 'eth_accounts' });
const balance = await provider.request({
  method: 'eth_getBalance',
  params: [accounts[0], 'latest']
});

// 发送交易
const transactionParameters = {
  to: '0x...',
  value: ethers.utils.parseEther('1.0'),
  gasLimit: '21000',
};

const txHash = await provider.request({
  method: 'eth_sendTransaction',
  params: [transactionParameters]
});

Provider管理最佳实践：

• 检测Provider可用性： 在使用前检查Provider是否存在
• 处理网络切换： 监听chainChanged事件，处理网络变化
• 错误处理： 妥善处理Provider连接失败和交易失败
• 兼容性支持： 支持多种钱包Provider，提供统一接口

How does state management in DApp differ from traditional applications?

考察点：状态管理差异。

答案：

DApp的状态管理比传统应用更加复杂，需要同时处理链上状态和链下状态，并应对区块链的异步特性、不可逆性和网络延迟等挑战。状态管理策略必须考虑数据一致性、用户体验和性能优化的平衡。

主要差异：

• 双层状态结构： 传统应用主要管理客户端和服务端状态，DApp需要管理链上状态（智能合约）和链下状态（本地数据）
• 异步确认机制： 传统应用的状态变更通常是即时的，DApp的链上状态变更需要等待区块确认，存在延迟和不确定性
• 不可逆性： 传统应用可以回滚操作，区块链交易一旦确认不可撤销，需要更谨慎的状态管理
• 网络依赖性： DApp状态更新依赖区块链网络，需要处理网络拥堵、Gas费波动等问题

状态管理架构：

// DApp状态管理结构
const dappState = {
  // 用户相关状态
  user: {
    address: null,
    balance: null,
    isConnected: false,
    chainId: null
  },
  
  // 链上状态 (只读，通过合约查询)
  onChain: {
    contractData: {},
    tokenBalances: {},
    transactionHistory: []
  },
  
  // 链下状态 (本地管理)
  offChain: {
    uiState: {},
    cache: {},
    pendingTransactions: []
  },
  
  // 交易状态管理
  transactions: {
    pending: [],
    confirmed: [],
    failed: []
  }
};

// 状态更新策略
class DAppStateManager {
  constructor() {
    this.state = dappState;
    this.listeners = [];
  }

  // 乐观更新 - 立即更新UI，等待链上确认
  async optimisticUpdate(action, txPromise) {
    // 1. 立即更新本地状态
    this.updateLocalState(action);
    
    // 2. 等待交易确认
    try {
      const receipt = await txPromise;
      this.confirmTransaction(action, receipt);
    } catch (error) {
      // 3. 交易失败时回滚状态
      this.revertState(action);
      throw error;
    }
  }

  // 监听链上事件更新状态
  subscribeToChainEvents() {
    contract.on('Transfer', (from, to, amount) => {
      this.syncChainState();
    });
  }
}

状态同步策略：

// 实时状态同步
class StateSync {
  // 定期同步链上状态
  async syncChainState() {
    const [balance, contractData] = await Promise.all([
      provider.getBalance(userAddress),
      contract.getData()
    ]);
    
    this.updateState({
      user: { balance },
      onChain: { contractData }
    });
  }

  // 处理pending交易状态
  trackPendingTransaction(txHash) {
    const interval = setInterval(async () => {
      const receipt = await provider.getTransactionReceipt(txHash);
      if (receipt) {
        clearInterval(interval);
        this.confirmTransaction(txHash, receipt);
      }
    }, 3000);
  }
}

最佳实践：

• 分层管理： 区分链上链下状态，使用不同的更新策略
• 乐观更新： 提供即时UI反馈，后台等待链上确认
• 错误恢复： 实现状态回滚机制，处理交易失败场景
• 缓存策略： 合理缓存链上数据，减少不必要的区块链查询

How to handle asynchronous blockchain interactions in DApp?

考察点：异步处理基础。

答案：

区块链交互本质上是异步的，包括网络请求延迟、交易确认等待、区块生成时间等。DApp需要妥善处理这些异步操作，提供良好的用户体验，同时确保数据的准确性和一致性。

异步处理策略：

• Promise/Async-Await： 使用现代JavaScript异步语法处理区块链调用
• 状态管理： 维护loading、error、success等状态，及时反馈给用户
• 错误处理： 处理网络错误、交易失败、用户拒绝等异常情况
• 超时控制： 设置合理的超时时间，避免用户无限等待

基本异步处理模式：

// 1. 基础异步交互模式
class BlockchainService {
  async executeTransaction(contractMethod, ...args) {
    try {
      // 设置loading状态
      this.setLoading(true);
      
      // 估算Gas费用
      const gasEstimate = await contractMethod.estimateGas(...args);
      
      // 发送交易
      const tx = await contractMethod(...args, {
        gasLimit: gasEstimate.mul(120).div(100) // 增加20%缓冲
      });
      
      // 返回交易哈希，开始监听确认
      this.trackTransaction(tx.hash);
      return tx;
      
    } catch (error) {
      this.handleError(error);
      throw error;
    } finally {
      this.setLoading(false);
    }
  }

  // 交易确认监听
  async trackTransaction(txHash) {
    return new Promise((resolve, reject) => {
      const checkConfirmation = async () => {
        try {
          const receipt = await provider.getTransactionReceipt(txHash);
          if (receipt) {
            if (receipt.status === 1) {
              resolve(receipt);
            } else {
              reject(new Error('Transaction failed'));
            }
          } else {
            // 继续等待确认
            setTimeout(checkConfirmation, 3000);
          }
        } catch (error) {
          reject(error);
        }
      };
      
      checkConfirmation();
    });
  }
}

React Hook异步处理：

// 自定义Hook处理区块链交互
function useContractCall(contract, method, args = []) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const execute = useCallback(async (...newArgs) => {
    try {
      setLoading(true);
      setError(null);
      
      const result = await contract[method](...(newArgs.length ? newArgs : args));
      setData(result);
      return result;
      
    } catch (err) {
      setError(err);
      throw err;
    } finally {
      setLoading(false);
    }
  }, [contract, method, args]);

  return { data, loading, error, execute };
}

// 使用示例
function TokenBalance() {
  const { data: balance, loading, execute: fetchBalance } = useContractCall(
    tokenContract,
    'balanceOf',
    [userAddress]
  );

  useEffect(() => {
    fetchBalance();
  }, [fetchBalance]);

  if (loading) return <Spinner />;
  return <div>余额: {ethers.utils.formatEther(balance || 0)} ETH</div>;
}

并发处理和批量操作：

// 批量异步调用优化
class BatchProcessor {
  async batchCall(calls) {
    try {
      // 使用Promise.all并发执行
      const results = await Promise.all(
        calls.map(async (call) => {
          try {
            return await call();
          } catch (error) {
            return { error };
          }
        })
      );
      
      return results;
    } catch (error) {
      throw new Error('Batch operation failed');
    }
  }

  // 错误重试机制
  async retryCall(fn, maxRetries = 3, delay = 1000) {
    for (let i = 0; i < maxRetries; i++) {
      try {
        return await fn();
      } catch (error) {
        if (i === maxRetries - 1) throw error;
        await new Promise(resolve => setTimeout(resolve, delay * Math.pow(2, i)));
      }
    }
  }
}

用户体验优化：

• 即时反馈： 交易提交后立即显示pending状态
• 进度指示： 显示交易确认进度和预估时间
• 取消机制： 支持用户取消pending交易（通过更高Gas费的替换交易）
• 离线支持： 缓存重要数据，支持网络不稳定时的基本功能

What is transaction confirmation? How to display transaction status in UI?

考察点：交易状态管理。

答案：

交易确认是指交易被包含在区块中并得到网络认可的过程。每个新区块的产生都会为之前的交易增加一次确认，确认数越多，交易被回滚的概率越低。通常1-3个确认即可认为交易安全，重要交易建议等待6个或更多确认。

交易生命周期：

1. 创建阶段： 用户构造交易参数，估算Gas费用
2. 签名阶段： 用户确认并签名交易
3. 提交阶段： 交易被提交到内存池（mempool）
4. 打包阶段： 矿工将交易包含在新区块中
5. 确认阶段： 后续区块的产生增加确认数
6. 完成阶段： 达到足够确认数，交易最终确定

UI状态设计：

// 交易状态枚举
const TransactionStatus = {
  IDLE: 'idle',           // 初始状态
  PREPARING: 'preparing', // 准备交易
  PENDING: 'pending',     // 等待确认
  CONFIRMING: 'confirming', // 确认中
  SUCCESS: 'success',     // 成功
  FAILED: 'failed'       // 失败
};

// 交易状态组件
function TransactionStatus({ tx }) {
  const [status, setStatus] = useState(TransactionStatus.IDLE);
  const [confirmations, setConfirmations] = useState(0);
  const [error, setError] = useState(null);

  const handleTransaction = async () => {
    try {
      setStatus(TransactionStatus.PREPARING);
      
      // 发送交易
      const transaction = await contract.transfer(to, amount);
      setStatus(TransactionStatus.PENDING);
      
      // 监听确认
      const receipt = await transaction.wait(1); // 等待1个确认
      setStatus(TransactionStatus.CONFIRMING);
      
      // 监听更多确认
      watchConfirmations(transaction.hash);
      
    } catch (err) {
      setStatus(TransactionStatus.FAILED);
      setError(err.message);
    }
  };

  const watchConfirmations = (txHash) => {
    const interval = setInterval(async () => {
      try {
        const currentBlock = await provider.getBlockNumber();
        const receipt = await provider.getTransactionReceipt(txHash);
        
        if (receipt) {
          const confirmationCount = currentBlock - receipt.blockNumber + 1;
          setConfirmations(confirmationCount);
          
          if (confirmationCount >= 3) {
            setStatus(TransactionStatus.SUCCESS);
            clearInterval(interval);
          }
        }
      } catch (error) {
        clearInterval(interval);
      }
    }, 15000); // 每15秒检查一次
  };

  return (
    <div className="transaction-status">
      {status === TransactionStatus.PREPARING && (
        <div className="status preparing">
          <Spinner /> 准备交易中...
        </div>
      )}
      
      {status === TransactionStatus.PENDING && (
        <div className="status pending">
          <Spinner /> 交易已提交，等待打包...
          <small>交易哈希: {tx?.hash}</small>
        </div>
      )}
      
      {status === TransactionStatus.CONFIRMING && (
        <div className="status confirming">
          <ProgressBar value={confirmations} max={3} />
          确认中 ({confirmations}/3)
        </div>
      )}
      
      {status === TransactionStatus.SUCCESS && (
        <div className="status success">
          <CheckIcon /> 交易成功！({confirmations} 个确认)
        </div>
      )}
      
      {status === TransactionStatus.FAILED && (
        <div className="status failed">
          <ErrorIcon /> 交易失败: {error}
        </div>
      )}
    </div>
  );
}

状态展示最佳实践：

// 交易状态管理Hook
function useTransactionTracker(txHash) {
  const [state, setState] = useState({
    status: 'pending',
    confirmations: 0,
    blockNumber: null,
    gasUsed: null
  });

  useEffect(() => {
    if (!txHash) return;

    const trackTransaction = async () => {
      try {
        // 获取交易receipt
        const receipt = await provider.waitForTransaction(txHash, 1);
        
        if (receipt.status === 0) {
          setState(prev => ({ ...prev, status: 'failed' }));
          return;
        }

        setState(prev => ({
          ...prev,
          status: 'confirmed',
          blockNumber: receipt.blockNumber,
          gasUsed: receipt.gasUsed
        }));

        // 继续监听更多确认
        const subscription = provider.on('block', (blockNumber) => {
          const confirmations = blockNumber - receipt.blockNumber + 1;
          setState(prev => ({
            ...prev,
            confirmations,
            status: confirmations >= 3 ? 'finalized' : 'confirmed'
          }));
        });

        return () => provider.removeAllListeners('block');
        
      } catch (error) {
        setState(prev => ({ ...prev, status: 'failed', error }));
      }
    };

    trackTransaction();
  }, [txHash]);

  return state;
}

用户体验增强：

• 预估时间： 基于网络拥堵情况显示预估确认时间
• 可视化进度： 使用进度条或步骤指示器显示确认进度
• 详细信息： 提供交易链接到区块链浏览器查看详情
• 通知系统： 交易状态变化时及时通知用户
• 重试机制： 交易失败时提供重新发送选项

How to handle network errors and timeouts in DApp?

考察点：错误处理基础。

答案：

DApp面临的网络错误比传统Web应用更复杂，包括RPC节点故障、网络拥堵、Gas费不足、交易被拒绝等。有效的错误处理策略需要识别错误类型、提供用户友好的提示，并实现自动恢复机制。

常见错误类型：

• 网络连接错误： RPC节点不可用、网络超时、连接中断
• 交易相关错误： Gas费不足、nonce冲突、交易被拒绝
• 用户操作错误： 用户拒绝签名、钱包未连接、网络不匹配
• 合约执行错误： 合约revert、权限不足、参数错误

错误处理实现：

// 错误分类和处理
class DAppErrorHandler {
  static handleError(error) {
    // 用户拒绝错误
    if (error.code === 4001) {
      return {
        type: 'USER_REJECTED',
        message: '用户取消了操作',
        recoverable: true
      };
    }
    
    // Gas相关错误
    if (error.message.includes('insufficient funds')) {
      return {
        type: 'INSUFFICIENT_FUNDS',
        message: '余额不足，请检查ETH余额',
        recoverable: true,
        action: 'CHECK_BALANCE'
      };
    }
    
    // 网络错误
    if (error.message.includes('network') || error.code === 'NETWORK_ERROR') {
      return {
        type: 'NETWORK_ERROR',
        message: '网络连接失败，请检查网络设置',
        recoverable: true,
        action: 'RETRY'
      };
    }
    
    // 合约执行错误
    if (error.message.includes('revert')) {
      return {
        type: 'CONTRACT_REVERT',
        message: '交易被合约拒绝，请检查操作条件',
        recoverable: false
      };
    }
    
    return {
      type: 'UNKNOWN_ERROR',
      message: error.message || '发生未知错误',
      recoverable: false
    };
  }
}

// 重试机制
class RetryManager {
  async executeWithRetry(fn, options = {}) {
    const {
      maxRetries = 3,
      baseDelay = 1000,
      maxDelay = 10000,
      backoffFactor = 2
    } = options;
    
    for (let attempt = 0; attempt < maxRetries; attempt++) {
      try {
        return await fn();
      } catch (error) {
        const errorInfo = DAppErrorHandler.handleError(error);
        
        // 不可恢复的错误直接抛出
        if (!errorInfo.recoverable || attempt === maxRetries - 1) {
          throw error;
        }
        
        // 计算延迟时间
        const delay = Math.min(
          baseDelay * Math.pow(backoffFactor, attempt),
          maxDelay
        );
        
        await new Promise(resolve => setTimeout(resolve, delay));
      }
    }
  }
}

超时控制实现：

// 超时处理工具
class TimeoutManager {
  // 带超时的Promise包装
  static withTimeout(promise, timeoutMs = 30000) {
    return Promise.race([
      promise,
      new Promise((_, reject) => {
        setTimeout(() => {
          reject(new Error(`操作超时 (${timeoutMs}ms)`));
        }, timeoutMs);
      })
    ]);
  }

  // 可取消的网络请求
  static createCancellableRequest(requestFn, timeoutMs) {
    let timeoutId;
    let cancelled = false;
    
    const promise = new Promise(async (resolve, reject) => {
      timeoutId = setTimeout(() => {
        cancelled = true;
        reject(new Error('Request timeout'));
      }, timeoutMs);
      
      try {
        if (!cancelled) {
          const result = await requestFn();
          if (!cancelled) {
            clearTimeout(timeoutId);
            resolve(result);
          }
        }
      } catch (error) {
        if (!cancelled) {
          clearTimeout(timeoutId);
          reject(error);
        }
      }
    });
    
    return {
      promise,
      cancel: () => {
        cancelled = true;
        clearTimeout(timeoutId);
      }
    };
  }
}

React错误边界组件：

// DApp专用错误边界
class DAppErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    const errorDetails = DAppErrorHandler.handleError(error);
    
    // 记录错误日志
    console.error('DApp Error:', {
      error,
      errorInfo,
      errorDetails
    });
    
    // 可选：发送错误报告到监控服务
    this.reportError(error, errorInfo, errorDetails);
  }

  reportError = (error, errorInfo, errorDetails) => {
    // 发送到错误监控服务
    if (typeof window !== 'undefined' && window.analytics) {
      window.analytics.track('DApp Error', {
        errorType: errorDetails.type,
        errorMessage: errorDetails.message,
        stack: error.stack
      });
    }
  };

  render() {
    if (this.state.hasError) {
      const errorDetails = DAppErrorHandler.handleError(this.state.error);
      
      return (
        <div className="error-fallback">
          <h2>出现错误</h2>
          <p>{errorDetails.message}</p>
          
          {errorDetails.action === 'RETRY' && (
            <button onClick={() => window.location.reload()}>
              重试
            </button>
          )}
          
          {errorDetails.action === 'CHECK_BALANCE' && (
            <button onClick={() => {/* 跳转到余额页面 */}}>
              查看余额
            </button>
          )}
        </div>
      );
    }

    return this.props.children;
  }
}

最佳实践：

• 错误分类： 根据错误类型提供不同的处理方式和用户指导
• 自动重试： 对于临时性错误实现指数退避重试机制
• 用户反馈： 提供清晰的错误信息和解决建议
• 监控告警： 集成错误监控服务，及时发现系统问题
• 降级策略： 在网络不稳定时提供基础功能保障

What is Gas fee estimation? How to implement Gas fee estimation in frontend?

考察点：Gas费用处理。

答案：

Gas费用是以太坊网络中执行交易或智能合约所需支付的费用，用于激励矿工打包交易。Gas费用估算帮助用户了解交易成本，选择合适的Gas价格以平衡交易速度和成本。前端需要实现准确的费用预估和用户友好的费用选择界面。

Gas费用组成：

• Gas Limit： 交易最大消耗的Gas单位数量
• Gas Price： 每单位Gas的价格（以Gwei为单位）
• 总费用： Gas Limit × Gas Price = 交易费用

EIP-1559费用结构（以太坊2.0后）：

• Base Fee： 网络基础费用（自动调整）
• Priority Fee： 优先费用（给矿工的小费）
• Max Fee： 用户愿意支付的最高费用

Gas费用估算实现：

// Gas费用估算服务
class GasEstimationService {
  constructor(provider) {
    this.provider = provider;
  }

  // 估算交易Gas Limit
  async estimateGasLimit(transaction) {
    try {
      const gasEstimate = await this.provider.estimateGas(transaction);
      // 增加15%的安全边距
      return gasEstimate.mul(115).div(100);
    } catch (error) {
      console.error('Gas估算失败:', error);
      // 返回默认值
      return ethers.BigNumber.from('21000');
    }
  }

  // 获取当前网络Gas价格
  async getGasPrices() {
    try {
      // 获取网络建议的Gas价格
      const feeData = await this.provider.getFeeData();
      
      return {
        slow: {
          maxFeePerGas: feeData.maxFeePerGas?.mul(90).div(100), // 90%
          maxPriorityFeePerGas: feeData.maxPriorityFeePerGas?.mul(90).div(100)
        },
        standard: {
          maxFeePerGas: feeData.maxFeePerGas,
          maxPriorityFeePerGas: feeData.maxPriorityFeePerGas
        },
        fast: {
          maxFeePerGas: feeData.maxFeePerGas?.mul(110).div(100), // 110%
          maxPriorityFeePerGas: feeData.maxPriorityFeePerGas?.mul(110).div(100)
        }
      };
    } catch (error) {
      console.error('获取Gas价格失败:', error);
      throw error;
    }
  }

  // 计算预估费用
  async calculateTransactionCost(transaction) {
    const [gasLimit, gasPrices] = await Promise.all([
      this.estimateGasLimit(transaction),
      this.getGasPrices()
    ]);

    return {
      gasLimit,
      slow: {
        ...gasPrices.slow,
        totalCost: gasLimit.mul(gasPrices.slow.maxFeePerGas)
      },
      standard: {
        ...gasPrices.standard,
        totalCost: gasLimit.mul(gasPrices.standard.maxFeePerGas)
      },
      fast: {
        ...gasPrices.fast,
        totalCost: gasLimit.mul(gasPrices.fast.maxFeePerGas)
      }
    };
  }
}

Gas费用选择组件：

// Gas费用选择器组件
function GasFeeSelector({ transaction, onFeeSelect }) {
  const [feeOptions, setFeeOptions] = useState(null);
  const [selectedOption, setSelectedOption] = useState('standard');
  const [loading, setLoading] = useState(false);
  const [customFee, setCustomFee] = useState(false);

  useEffect(() => {
    estimateFees();
  }, [transaction]);

  const estimateFees = async () => {
    setLoading(true);
    try {
      const gasService = new GasEstimationService(provider);
      const fees = await gasService.calculateTransactionCost(transaction);
      setFeeOptions(fees);
      
      // 默认选择标准费用
      onFeeSelect(fees.standard);
    } catch (error) {
      console.error('费用估算失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleOptionSelect = (option) => {
    setSelectedOption(option);
    setCustomFee(false);
    onFeeSelect(feeOptions[option]);
  };

  if (loading) {
    return <div className="gas-fee-loading">估算Gas费用中...</div>;
  }

  return (
    <div className="gas-fee-selector">
      <h3>选择交易费用</h3>
      
      {feeOptions && (
        <div className="fee-options">
          {['slow', 'standard', 'fast'].map((option) => {
            const fee = feeOptions[option];
            const isSelected = selectedOption === option && !customFee;
            
            return (
              <div
                key={option}
                className={`fee-option ${isSelected ? 'selected' : ''}`}
                onClick={() => handleOptionSelect(option)}
              >
                <div className="option-label">
                  {option === 'slow' && '慢速 (~5分钟)'}
                  {option === 'standard' && '标准 (~2分钟)'}
                  {option === 'fast' && '快速 (~30秒)'}
                </div>
                <div className="option-price">
                  {ethers.utils.formatEther(fee.totalCost)} ETH
                </div>
                <div className="option-gwei">
                  {ethers.utils.formatUnits(fee.maxFeePerGas, 'gwei')} Gwei
                </div>
              </div>
            );
          })}
        </div>
      )}

      <button
        className="custom-fee-toggle"
        onClick={() => setCustomFee(!customFee)}
      >
        {customFee ? '使用预设费用' : '自定义费用'}
      </button>

      {customFee && (
        <CustomGasFeeInput
          defaultValues={feeOptions?.standard}
          onChange={onFeeSelect}
        />
      )}
    </div>
  );
}

// 自定义Gas费用输入组件
function CustomGasFeeInput({ defaultValues, onChange }) {
  const [maxFee, setMaxFee] = useState(
    ethers.utils.formatUnits(defaultValues?.maxFeePerGas || 0, 'gwei')
  );
  const [priorityFee, setPriorityFee] = useState(
    ethers.utils.formatUnits(defaultValues?.maxPriorityFeePerGas || 0, 'gwei')
  );

  const handleSubmit = () => {
    onChange({
      maxFeePerGas: ethers.utils.parseUnits(maxFee, 'gwei'),
      maxPriorityFeePerGas: ethers.utils.parseUnits(priorityFee, 'gwei')
    });
  };

  return (
    <div className="custom-gas-input">
      <div className="input-group">
        <label>最大费用 (Gwei)</label>
        <input
          type="number"
          value={maxFee}
          onChange={(e) => setMaxFee(e.target.value)}
          step="0.1"
        />
      </div>
      
      <div className="input-group">
        <label>优先费用 (Gwei)</label>
        <input
          type="number"
          value={priorityFee}
          onChange={(e) => setPriorityFee(e.target.value)}
          step="0.1"
        />
      </div>
      
      <button onClick={handleSubmit}>应用自定义费用</button>
    </div>
  );
}

实用工具函数：

// Gas费用工具函数
const GasUtils = {
  // 格式化Gas价格显示
  formatGasPrice(gasPrice) {
    const gwei = ethers.utils.formatUnits(gasPrice, 'gwei');
    return `${parseFloat(gwei).toFixed(1)} Gwei`;
  },

  // 格式化总费用显示
  formatTotalFee(totalFee) {
    const eth = ethers.utils.formatEther(totalFee);
    return `${parseFloat(eth).toFixed(6)} ETH`;
  },

  // 预估确认时间
  estimateConfirmationTime(gasPrice, networkCondition) {
    // 基于Gas价格和网络状况的简单预估
    const basePrice = ethers.utils.parseUnits('20', 'gwei');
    const ratio = gasPrice.div(basePrice);
    
    if (ratio.gte(2)) return '< 1分钟';
    if (ratio.gte(1)) return '1-3分钟';
    return '3-10分钟';
  }
};

最佳实践：

• 实时更新： 定期更新Gas价格，反映网络拥堵状况
• 安全边距： 在估算基础上增加适当的安全边距
• 用户教育： 提供Gas费用相关的说明和建议
• 费用预警： 当费用异常高时提醒用户
• 历史记录： 保存用户的费用偏好设置

How to implement user-friendly loading states in DApp?

考察点：用户体验基础。

答案：

DApp中的加载状态比传统应用更复杂，需要处理钱包连接、交易确认、区块链查询等多种异步操作。良好的加载状态设计能显著提升用户体验，减少用户焦虑，并提供清晰的操作反馈。

加载状态分类：

• 连接状态： 钱包连接、网络检测、Provider初始化
• 查询状态： 余额查询、合约数据读取、历史记录获取
• 交易状态： 交易准备、签名、提交、确认等多阶段
• 批量操作： 多个并发请求的整体进度

基础加载组件实现：

// 通用加载状态Hook
function useLoadingState() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [progress, setProgress] = useState(0);

  const withLoading = async (asyncFn, progressCallback) => {
    try {
      setLoading(true);
      setError(null);
      setProgress(0);

      const result = await asyncFn(setProgress);
      return result;
    } catch (err) {
      setError(err);
      throw err;
    } finally {
      setLoading(false);
      setProgress(0);
    }
  };

  return { loading, error, progress, withLoading };
}

// 交易加载状态组件
function TransactionLoader({ transaction, onComplete }) {
  const [stage, setStage] = useState('preparing');
  const [progress, setProgress] = useState(0);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (transaction) {
      processTransaction();
    }
  }, [transaction]);

  const processTransaction = async () => {
    try {
      // 阶段1: 准备交易
      setStage('preparing');
      setProgress(20);
      await new Promise(resolve => setTimeout(resolve, 500));

      // 阶段2: 等待用户签名
      setStage('signing');
      setProgress(40);
      const signedTx = await transaction.wait(0);

      // 阶段3: 提交到网络
      setStage('submitting');
      setProgress(60);

      // 阶段4: 等待确认
      setStage('confirming');
      setProgress(80);
      const receipt = await signedTx.wait(1);

      // 阶段5: 完成
      setStage('completed');
      setProgress(100);
      onComplete(receipt);

    } catch (err) {
      setError(err);
      setStage('failed');
    }
  };

  const stageLabels = {
    preparing: '准备交易...',
    signing: '等待签名确认...',
    submitting: '提交到区块链网络...',
    confirming: '等待交易确认...',
    completed: '交易成功完成！',
    failed: '交易失败'
  };

  return (
    <div className="transaction-loader">
      <div className="loader-header">
        <h3>{stageLabels[stage]}</h3>
        {stage !== 'failed' && stage !== 'completed' && (
          <div className="progress-bar">
            <div 
              className="progress-fill" 
              style={{ width: `${progress}%` }}
            />
          </div>
        )}
      </div>

      <div className="stage-indicators">
        {['preparing', 'signing', 'submitting', 'confirming', 'completed'].map((s, index) => (
          <div 
            key={s}
            className={`stage-indicator ${
              s === stage ? 'active' : 
              ['preparing', 'signing', 'submitting', 'confirming'].indexOf(stage) > index ? 'completed' : ''
            }`}
          >
            {index + 1}
          </div>
        ))}
      </div>

      {error && (
        <div className="error-message">
          错误: {error.message}
        </div>
      )}
    </div>
  );
}

骨架屏加载效果：

// 数据加载骨架屏组件
function DataSkeleton({ type = 'card', count = 1 }) {
  const renderSkeleton = () => {
    switch (type) {
      case 'balance':
        return (
          <div className="skeleton-balance">
            <div className="skeleton-line short" />
            <div className="skeleton-line long" />
          </div>
        );
      
      case 'transaction':
        return (
          <div className="skeleton-transaction">
            <div className="skeleton-avatar" />
            <div className="skeleton-content">
              <div className="skeleton-line medium" />
              <div className="skeleton-line short" />
            </div>
            <div className="skeleton-amount" />
          </div>
        );
      
      case 'nft':
        return (
          <div className="skeleton-nft">
            <div className="skeleton-image" />
            <div className="skeleton-line short" />
            <div className="skeleton-line medium" />
          </div>
        );
      
      default:
        return (
          <div className="skeleton-card">
            <div className="skeleton-line long" />
            <div className="skeleton-line medium" />
            <div className="skeleton-line short" />
          </div>
        );
    }
  };

  return (
    <div className="skeleton-container">
      {Array.from({ length: count }, (_, i) => (
        <div key={i} className="skeleton-item">
          {renderSkeleton()}
        </div>
      ))}
    </div>
  );
}

// 使用示例
function TokenList() {
  const [tokens, setTokens] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadTokens();
  }, []);

  const loadTokens = async () => {
    setLoading(true);
    try {
      const tokenData = await fetchUserTokens();
      setTokens(tokenData);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <DataSkeleton type="balance" count={5} />;
  }

  return (
    <div className="token-list">
      {tokens.map(token => (
        <TokenCard key={token.address} token={token} />
      ))}
    </div>
  );
}

智能加载状态管理：

// 全局加载状态管理
class LoadingManager {
  constructor() {
    this.loadingStates = new Map();
    this.listeners = [];
  }

  // 设置加载状态
  setLoading(key, loading, message = '') {
    this.loadingStates.set(key, { loading, message });
    this.notifyListeners();
  }

  // 获取加载状态
  isLoading(key) {
    return this.loadingStates.get(key)?.loading || false;
  }

  // 获取所有加载状态
  getAllLoadingStates() {
    return Array.from(this.loadingStates.entries())
      .filter(([_, state]) => state.loading)
      .map(([key, state]) => ({ key, ...state }));
  }

  // 添加监听器
  addListener(callback) {
    this.listeners.push(callback);
  }

  // 通知监听器
  notifyListeners() {
    this.listeners.forEach(callback => callback(this.getAllLoadingStates()));
  }
}

// React Hook封装
function useGlobalLoading() {
  const [loadingStates, setLoadingStates] = useState([]);

  useEffect(() => {
    const loadingManager = LoadingManager.getInstance();
    
    const handleLoadingChange = (states) => {
      setLoadingStates(states);
    };

    loadingManager.addListener(handleLoadingChange);
    
    return () => {
      // 清理监听器
    };
  }, []);

  return {
    loadingStates,
    isAnyLoading: loadingStates.length > 0,
    setLoading: (key, loading, message) => {
      LoadingManager.getInstance().setLoading(key, loading, message);
    }
  };
}

用户体验优化技巧：

• 预加载： 提前加载可能需要的数据，减少等待时间
• 渐进显示： 数据部分加载完成就开始显示，而不是等待全部完成
• 缓存策略： 合理使用缓存，避免重复加载相同数据
• 离线提示： 网络不可用时提供友好的离线提示
• 估时提示： 根据操作复杂度提供大概的等待时间预估

How should local storage strategy be designed for DApp?

考察点：数据存储策略。

答案：

DApp的本地存储策略需要平衡用户体验、数据安全和隐私保护。由于区块链数据的特殊性，需要区分不同类型的数据并采用相应的存储策略，同时考虑跨设备同步和数据一致性问题。

数据分类策略：

• 敏感数据： 私钥、助记词等绝对不能存储在本地
• 身份数据： 用户地址、网络偏好等可以安全存储
• 应用状态： UI偏好、主题设置等应用级配置
• 缓存数据： 区块链查询结果、交易历史等可缓存数据
• 临时数据： 表单数据、草稿等会话级数据

存储方案实现：

// 分层存储管理器
class DAppStorageManager {
  constructor() {
    this.storageTypes = {
      SECURE: 'secure',      // 加密存储
      LOCAL: 'local',        // 本地存储
      SESSION: 'session',    // 会话存储
      MEMORY: 'memory',      // 内存存储
      CACHE: 'cache'         // 缓存存储
    };
    
    this.memoryStorage = new Map();
    this.encryptionKey = this.generateEncryptionKey();
  }

  // 根据数据类型选择存储方式
  set(key, value, options = {}) {
    const { type = this.storageTypes.LOCAL, ttl, encrypt = false } = options;
    
    const data = {
      value,
      timestamp: Date.now(),
      ttl: ttl ? Date.now() + ttl : null
    };

    if (encrypt) {
      data.value = this.encrypt(JSON.stringify(value));
    }

    switch (type) {
      case this.storageTypes.SECURE:
        return this.setSecure(key, data);
      case this.storageTypes.LOCAL:
        return localStorage.setItem(key, JSON.stringify(data));
      case this.storageTypes.SESSION:
        return sessionStorage.setItem(key, JSON.stringify(data));
      case this.storageTypes.MEMORY:
        return this.memoryStorage.set(key, data);
      case this.storageTypes.CACHE:
        return this.setCache(key, data);
      default:
        throw new Error(`Unknown storage type: ${type}`);
    }
  }

  // 获取数据
  get(key, type = this.storageTypes.LOCAL) {
    let data;
    
    switch (type) {
      case this.storageTypes.SECURE:
        data = this.getSecure(key);
        break;
      case this.storageTypes.LOCAL:
        data = localStorage.getItem(key);
        break;
      case this.storageTypes.SESSION:
        data = sessionStorage.getItem(key);
        break;
      case this.storageTypes.MEMORY:
        data = this.memoryStorage.get(key);
        break;
      case this.storageTypes.CACHE:
        data = this.getCache(key);
        break;
      default:
        return null;
    }

    if (!data) return null;
    
    // 解析JSON数据
    if (typeof data === 'string') {
      try {
        data = JSON.parse(data);
      } catch {
        return null;
      }
    }

    // 检查TTL过期
    if (data.ttl && Date.now() > data.ttl) {
      this.remove(key, type);
      return null;
    }

    return data.value;
  }

  // 安全存储实现（使用Web Crypto API）
  async setSecure(key, data) {
    try {
      const encrypted = await this.encryptData(JSON.stringify(data));
      localStorage.setItem(`secure_${key}`, encrypted);
    } catch (error) {
      console.error('Secure storage failed:', error);
    }
  }

  async getSecure(key) {
    try {
      const encrypted = localStorage.getItem(`secure_${key}`);
      if (!encrypted) return null;
      
      const decrypted = await this.decryptData(encrypted);
      return JSON.parse(decrypted);
    } catch (error) {
      console.error('Secure retrieval failed:', error);
      return null;
    }
  }
}

DApp专用存储配置：

// DApp存储配置
const DAppStorage = {
  // 用户偏好设置
  userPreferences: {
    theme: { type: 'LOCAL', ttl: null },
    language: { type: 'LOCAL', ttl: null },
    currency: { type: 'LOCAL', ttl: null },
    gasPreferences: { type: 'LOCAL', ttl: null }
  },

  // 连接状态
  connectionState: {
    lastConnectedWallet: { type: 'LOCAL', ttl: null },
    connectedAddress: { type: 'SESSION', ttl: null },
    networkId: { type: 'SESSION', ttl: null }
  },

  // 缓存数据
  cache: {
    tokenBalances: { type: 'CACHE', ttl: 300000 }, // 5分钟
    tokenPrices: { type: 'CACHE', ttl: 60000 },    // 1分钟
    transactionHistory: { type: 'CACHE', ttl: 600000 }, // 10分钟
    contractAbi: { type: 'LOCAL', ttl: null }       // 永久缓存
  },

  // 临时数据
  temporary: {
    formDrafts: { type: 'SESSION', ttl: null },
    pendingTransactions: { type: 'MEMORY', ttl: 3600000 } // 1小时
  }
};

// 存储操作封装
class DAppDataManager {
  constructor() {
    this.storage = new DAppStorageManager();
  }

  // 保存用户偏好
  saveUserPreference(key, value) {
    const config = DAppStorage.userPreferences[key];
    if (config) {
      this.storage.set(`pref_${key}`, value, config);
    }
  }

  // 获取用户偏好
  getUserPreference(key, defaultValue = null) {
    const config = DAppStorage.userPreferences[key];
    if (config) {
      return this.storage.get(`pref_${key}`, config.type) || defaultValue;
    }
    return defaultValue;
  }

  // 缓存区块链数据
  cacheBlockchainData(key, data) {
    const config = DAppStorage.cache[key];
    if (config) {
      this.storage.set(`cache_${key}`, data, config);
    }
  }

  // 获取缓存数据
  getCachedData(key) {
    const config = DAppStorage.cache[key];
    if (config) {
      return this.storage.get(`cache_${key}`, config.type);
    }
    return null;
  }

  // 清理过期数据
  cleanup() {
    // 清理过期缓存
    Object.keys(DAppStorage.cache).forEach(key => {
      this.storage.get(`cache_${key}`, DAppStorage.cache[key].type);
    });
    
    // 清理临时数据
    Object.keys(DAppStorage.temporary).forEach(key => {
      this.storage.get(`temp_${key}`, DAppStorage.temporary[key].type);
    });
  }
}

React Hook集成：

// DApp存储Hook
function useDAppStorage() {
  const dataManager = useMemo(() => new DAppDataManager(), []);

  // 用户偏好Hook
  const useUserPreference = (key, defaultValue) => {
    const [value, setValue] = useState(
      () => dataManager.getUserPreference(key, defaultValue)
    );

    const updateValue = useCallback((newValue) => {
      setValue(newValue);
      dataManager.saveUserPreference(key, newValue);
    }, [key]);

    return [value, updateValue];
  };

  // 缓存数据Hook
  const useCachedData = (key, fetchFn, dependencies = []) => {
    const [data, setData] = useState(() => dataManager.getCachedData(key));
    const [loading, setLoading] = useState(!data);

    useEffect(() => {
      if (!data) {
        setLoading(true);
        fetchFn().then(result => {
          dataManager.cacheBlockchainData(key, result);
          setData(result);
        }).finally(() => {
          setLoading(false);
        });
      }
    }, dependencies);

    const refresh = useCallback(() => {
      setLoading(true);
      fetchFn().then(result => {
        dataManager.cacheBlockchainData(key, result);
        setData(result);
      }).finally(() => {
        setLoading(false);
      });
    }, [key, fetchFn]);

    return { data, loading, refresh };
  };

  return {
    dataManager,
    useUserPreference,
    useCachedData
  };
}

安全和隐私考虑：

• 数据分类： 严格区分可存储和不可存储的数据类型
• 加密保护： 对敏感配置数据进行客户端加密
• 定期清理： 实现自动清理机制，删除过期和无用数据
• 跨域隔离： 确保不同DApp的数据相互隔离
• 用户控制： 提供数据清理和导出功能，让用户控制自己的数据

How to handle display and calculation of large numbers (BigNumber) in DApp?

考察点：数值处理基础。

答案：

区块链中的数值通常非常大，超出JavaScript原生Number类型的安全范围。例如以太坊使用wei作为最小单位，1 ETH = 10^18 wei。DApp必须使用BigNumber库进行精确的数值计算和显示，避免精度丢失和计算错误。

BigNumber使用场景：

• 代币余额： 处理各种精度的代币数量
• 价格计算： 处理交易价格和汇率转换
• Gas费用： 计算和显示交易费用
• 时间戳： 处理区块链时间戳
• 百分比计算： 处理收益率、手续费等百分比

基础BigNumber操作：

import { ethers } from 'ethers';

// BigNumber创建和转换
class BigNumberUtils {
  // 创建BigNumber
  static create(value, unit = 'wei') {
    if (unit === 'ether' || unit === 'eth') {
      return ethers.utils.parseEther(value.toString());
    }
    return ethers.BigNumber.from(value);
  }

  // 格式化显示
  static format(bigNumber, decimals = 18, displayDecimals = 4) {
    if (!bigNumber || bigNumber.isZero()) return '0';
    
    // 转换为可读格式
    const formatted = ethers.utils.formatUnits(bigNumber, decimals);
    
    // 处理小数位数
    const number = parseFloat(formatted);
    
    if (number === 0) return '0';
    if (number < 0.0001) return '< 0.0001';
    
    return number.toLocaleString('en-US', {
      minimumFractionDigits: 0,
      maximumFractionDigits: displayDecimals
    });
  }

  // 安全的数学运算
  static safeAdd(a, b) {
    try {
      return ethers.BigNumber.from(a).add(ethers.BigNumber.from(b));
    } catch (error) {
      console.error('BigNumber addition error:', error);
      return ethers.BigNumber.from(0);
    }
  }

  static safeSub(a, b) {
    try {
      const bigA = ethers.BigNumber.from(a);
      const bigB = ethers.BigNumber.from(b);
      
      if (bigA.lt(bigB)) {
        throw new Error('Subtraction would result in negative number');
      }
      
      return bigA.sub(bigB);
    } catch (error) {
      console.error('BigNumber subtraction error:', error);
      return ethers.BigNumber.from(0);
    }
  }

  static safeMul(a, b) {
    try {
      return ethers.BigNumber.from(a).mul(ethers.BigNumber.from(b));
    } catch (error) {
      console.error('BigNumber multiplication error:', error);
      return ethers.BigNumber.from(0);
    }
  }

  static safeDiv(a, b) {
    try {
      const bigB = ethers.BigNumber.from(b);
      
      if (bigB.isZero()) {
        throw new Error('Division by zero');
      }
      
      return ethers.BigNumber.from(a).div(bigB);
    } catch (error) {
      console.error('BigNumber division error:', error);
      return ethers.BigNumber.from(0);
    }
  }
}

代币数量格式化组件：

// 代币数量显示组件
function TokenAmount({ 
  amount, 
  decimals = 18, 
  symbol = '', 
  showFullPrecision = false,
  prefix = '',
  className = '' 
}) {
  const [showFull, setShowFull] = useState(showFullPrecision);
  
  const formatAmount = (bigNumberAmount, showAll = false) => {
    if (!bigNumberAmount) return '0';
    
    try {
      const formatted = ethers.utils.formatUnits(bigNumberAmount, decimals);
      const number = parseFloat(formatted);
      
      if (number === 0) return '0';
      
      // 显示完整精度
      if (showAll) {
        return formatted;
      }
      
      // 智能显示策略
      if (number >= 1000000) {
        return (number / 1000000).toFixed(2) + 'M';
      } else if (number >= 1000) {
        return (number / 1000).toFixed(2) + 'K';
      } else if (number >= 1) {
        return number.toFixed(4);
      } else if (number >= 0.0001) {
        return number.toFixed(6);
      } else {
        return '< 0.0001';
      }
    } catch (error) {
      console.error('Format amount error:', error);
      return 'Error';
    }
  };

  const displayAmount = formatAmount(amount, showFull);
  const hasMorePrecision = amount && !ethers.BigNumber.from(amount).isZero() && 
                          displayAmount !== formatAmount(amount, true);

  return (
    <span className={`token-amount ${className}`}>
      {prefix && <span className="prefix">{prefix}</span>}
      
      <span 
        className={`amount ${hasMorePrecision ? 'clickable' : ''}`}
        onClick={hasMorePrecision ? () => setShowFull(!showFull) : undefined}
        title={showFull ? '点击简化显示' : '点击显示完整精度'}
      >
        {displayAmount}
      </span>
      
      {symbol && <span className="symbol">{symbol}</span>}
      
      {hasMorePrecision && (
        <span className="precision-toggle">
          {showFull ? '⬆️' : '⬇️'}
        </span>
      )}
    </span>
  );
}

// 价格计算组件
function PriceCalculator({ tokenAmount, tokenPrice, tokenDecimals = 18 }) {
  const calculateValue = () => {
    try {
      if (!tokenAmount || !tokenPrice) return ethers.BigNumber.from(0);
      
      // 将代币数量转换为标准单位
      const tokenInEther = ethers.utils.formatUnits(tokenAmount, tokenDecimals);
      
      // 计算总价值 (使用字符串避免精度问题)
      const totalValue = parseFloat(tokenInEther) * parseFloat(tokenPrice);
      
      // 转换回BigNumber (以美分为单位保持精度)
      return ethers.utils.parseUnits(totalValue.toFixed(2), 2);
      
    } catch (error) {
      console.error('Price calculation error:', error);
      return ethers.BigNumber.from(0);
    }
  };

  const totalValue = calculateValue();

  return (
    <div className="price-calculator">
      <div className="token-amount">
        <TokenAmount 
          amount={tokenAmount} 
          decimals={tokenDecimals}
          symbol="TOKENS"
        />
      </div>
      
      <div className="multiplication">×</div>
      
      <div className="token-price">
        ${tokenPrice}
      </div>
      
      <div className="equals">=</div>
      
      <div className="total-value">
        $<TokenAmount 
          amount={totalValue} 
          decimals={2}
          showFullPrecision={true}
        />
      </div>
    </div>
  );
}

输入验证和处理：

// BigNumber输入处理Hook
function useBigNumberInput(decimals = 18, maxValue = null) {
  const [inputValue, setInputValue] = useState('');
  const [bigNumberValue, setBigNumberValue] = useState(ethers.BigNumber.from(0));
  const [error, setError] = useState('');

  const handleInputChange = (value) => {
    setInputValue(value);
    setError('');

    // 基础验证
    if (!value || value === '') {
      setBigNumberValue(ethers.BigNumber.from(0));
      return;
    }

    // 验证数字格式
    const numberRegex = /^\d*\.?\d*$/;
    if (!numberRegex.test(value)) {
      setError('请输入有效的数字');
      return;
    }

    // 验证小数位数
    const decimalPlaces = (value.split('.')[1] || '').length;
    if (decimalPlaces > decimals) {
      setError(`小数位数不能超过${decimals}位`);
      return;
    }

    try {
      // 转换为BigNumber
      const bigNum = ethers.utils.parseUnits(value, decimals);
      
      // 检查最大值限制
      if (maxValue && bigNum.gt(maxValue)) {
        setError('输入值超过最大限制');
        return;
      }

      setBigNumberValue(bigNum);
      
    } catch (err) {
      setError('数值转换失败');
    }
  };

  const setMaxValue = () => {
    if (maxValue) {
      const maxValueFormatted = ethers.utils.formatUnits(maxValue, decimals);
      handleInputChange(maxValueFormatted);
    }
  };

  return {
    inputValue,
    bigNumberValue,
    error,
    handleInputChange,
    setMaxValue,
    isValid: !error && !bigNumberValue.isZero()
  };
}

// 使用示例
function TokenTransferForm() {
  const { 
    inputValue, 
    bigNumberValue, 
    error, 
    handleInputChange, 
    setMaxValue,
    isValid 
  } = useBigNumberInput(18, userBalance);

  return (
    <div className="transfer-form">
      <div className="input-group">
        <label>转账数量</label>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => handleInputChange(e.target.value)}
          placeholder="0.0"
          className={error ? 'error' : ''}
        />
        <button onClick={setMaxValue}>最大</button>
      </div>
      
      {error && <div className="error-message">{error}</div>}
      
      <div className="balance-info">
        余额: <TokenAmount amount={userBalance} decimals={18} />
      </div>
      
      <button disabled={!isValid}>
        转账
      </button>
    </div>
  );
}

最佳实践：

• 精度控制： 根据代币类型和用途选择合适的显示精度
• 输入验证： 严格验证用户输入，防止无效数值
• 错误处理： 妥善处理溢出、除零等异常情况
• 性能优化： 避免频繁的BigNumber计算，合理使用缓存
• 用户体验： 提供直观的数值显示和便捷的输入方式

What is IPFS? How to integrate IPFS storage in DApp?

考察点：去中心化存储基础。

答案：

IPFS（InterPlanetary File System）是一个分布式的点对点文件系统，旨在创建一个全球统一的文件存储网络。IPFS使用内容寻址而非位置寻址，通过文件内容的哈希值来唯一标识文件，确保数据的不可篡改性和去中心化存储。

IPFS核心特性：

• 内容寻址： 通过文件内容的哈希值（CID）访问文件，而非服务器地址
• 去重存储： 相同内容只存储一份，通过哈希值共享
• 版本控制： 支持文件版本历史和分支管理
• 分布式网络： 无单点故障，数据分布在多个节点
• 不可篡改： 文件内容变化会产生新的哈希值

IPFS集成实现：

// IPFS客户端封装
import { create } from 'ipfs-http-client';

class IPFSManager {
  constructor() {
    // 连接到IPFS节点 (可以是本地节点或Infura等服务)
    this.client = create({
      host: 'ipfs.infura.io',
      port: 5001,
      protocol: 'https',
      headers: {
        authorization: `Basic ${Buffer.from(
          `${projectId}:${projectSecret}`
        ).toString('base64')}`
      }
    });
  }

  // 上传文件到IPFS
  async uploadFile(file) {
    try {
      const result = await this.client.add(file, {
        progress: (prog) => console.log(`上传进度: ${prog}`)
      });
      
      return {
        hash: result.cid.toString(),
        path: result.path,
        size: result.size
      };
    } catch (error) {
      console.error('IPFS上传失败:', error);
      throw error;
    }
  }

  // 上传JSON数据
  async uploadJSON(data) {
    try {
      const jsonString = JSON.stringify(data, null, 2);
      const result = await this.client.add(jsonString);
      
      return result.cid.toString();
    } catch (error) {
      console.error('JSON上传失败:', error);
      throw error;
    }
  }

  // 获取文件内容
  async getFile(hash) {
    try {
      const stream = this.client.cat(hash);
      let data = '';
      
      for await (const chunk of stream) {
        data += new TextDecoder().decode(chunk);
      }
      
      return data;
    } catch (error) {
      console.error('IPFS获取失败:', error);
      throw error;
    }
  }

  // 获取JSON数据
  async getJSON(hash) {
    try {
      const data = await this.getFile(hash);
      return JSON.parse(data);
    } catch (error) {
      console.error('JSON解析失败:', error);
      throw error;
    }
  }

  // 固定文件到节点
  async pinFile(hash) {
    try {
      await this.client.pin.add(hash);
      return true;
    } catch (error) {
      console.error('文件固定失败:', error);
      return false;
    }
  }

  // 生成IPFS网关URL
  getGatewayUrl(hash, gateway = 'https://ipfs.io/ipfs/') {
    return `${gateway}${hash}`;
  }
}

React组件中的IPFS使用：

// IPFS文件上传组件
function IPFSFileUpload({ onUploadComplete }) {
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [uploadedFiles, setUploadedFiles] = useState([]);
  
  const ipfsManager = useMemo(() => new IPFSManager(), []);

  const handleFileUpload = async (files) => {
    setUploading(true);
    setProgress(0);

    try {
      const uploadPromises = Array.from(files).map(async (file, index) => {
        const result = await ipfsManager.uploadFile(file);
        
        setProgress(((index + 1) / files.length) * 100);
        
        return {
          name: file.name,
          hash: result.hash,
          size: result.size,
          url: ipfsManager.getGatewayUrl(result.hash)
        };
      });

      const results = await Promise.all(uploadPromises);
      setUploadedFiles(prev => [...prev, ...results]);
      
      if (onUploadComplete) {
        onUploadComplete(results);
      }
      
    } catch (error) {
      console.error('上传失败:', error);
    } finally {
      setUploading(false);
      setProgress(0);
    }
  };

  return (
    <div className="ipfs-upload">
      <div 
        className="upload-zone"
        onDrop={(e) => {
          e.preventDefault();
          handleFileUpload(e.dataTransfer.files);
        }}
        onDragOver={(e) => e.preventDefault()}
      >
        {uploading ? (
          <div className="upload-progress">
            <div className="progress-bar">
              <div 
                className="progress-fill" 
                style={{ width: `${progress}%` }}
              />
            </div>
            <span>上传中... {Math.round(progress)}%</span>
          </div>
        ) : (
          <div className="upload-prompt">
            <p>拖拽文件到此处或点击选择</p>
            <input
              type="file"
              multiple
              onChange={(e) => handleFileUpload(e.target.files)}
              style={{ display: 'none' }}
            />
          </div>
        )}
      </div>

      {uploadedFiles.length > 0 && (
        <div className="uploaded-files">
          <h4>已上传文件</h4>
          {uploadedFiles.map((file, index) => (
            <div key={index} className="file-item">
              <span className="file-name">{file.name}</span>
              <span className="file-hash">{file.hash}</span>
              <a 
                href={file.url} 
                target="_blank" 
                rel="noopener noreferrer"
              >
                查看
              </a>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// NFT元数据上传组件
function NFTMetadataUpload({ onMetadataUploaded }) {
  const [metadata, setMetadata] = useState({
    name: '',
    description: '',
    image: '',
    attributes: []
  });
  const [uploading, setUploading] = useState(false);
  
  const ipfsManager = useMemo(() => new IPFSManager(), []);

  const handleImageUpload = async (file) => {
    try {
      const result = await ipfsManager.uploadFile(file);
      setMetadata(prev => ({
        ...prev,
        image: ipfsManager.getGatewayUrl(result.hash)
      }));
    } catch (error) {
      console.error('图片上传失败:', error);
    }
  };

  const handleMetadataUpload = async () => {
    setUploading(true);
    try {
      // 验证元数据
      if (!metadata.name || !metadata.image) {
        throw new Error('名称和图片是必需的');
      }

      // 上传元数据JSON
      const hash = await ipfsManager.uploadJSON(metadata);
      const metadataUrl = ipfsManager.getGatewayUrl(hash);
      
      if (onMetadataUploaded) {
        onMetadataUploaded({
          hash,
          url: metadataUrl,
          metadata
        });
      }
      
    } catch (error) {
      console.error('元数据上传失败:', error);
    } finally {
      setUploading(false);
    }
  };

  return (
    <div className="nft-metadata-upload">
      <div className="metadata-form">
        <input
          type="text"
          placeholder="NFT名称"
          value={metadata.name}
          onChange={(e) => setMetadata(prev => ({
            ...prev,
            name: e.target.value
          }))}
        />
        
        <textarea
          placeholder="NFT描述"
          value={metadata.description}
          onChange={(e) => setMetadata(prev => ({
            ...prev,
            description: e.target.value
          }))}
        />
        
        <div className="image-upload">
          <input
            type="file"
            accept="image/*"
            onChange={(e) => {
              if (e.target.files[0]) {
                handleImageUpload(e.target.files[0]);
              }
            }}
          />
          {metadata.image && (
            <img src={metadata.image} alt="Preview" className="image-preview" />
          )}
        </div>
        
        <button 
          onClick={handleMetadataUpload}
          disabled={uploading || !metadata.name || !metadata.image}
        >
          {uploading ? '上传中...' : '上传元数据'}
        </button>
      </div>
    </div>
  );
}

IPFS数据获取Hook：

// IPFS数据获取Hook
function useIPFSData(hash) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const ipfsManager = useMemo(() => new IPFSManager(), []);

  useEffect(() => {
    if (!hash) return;

    const fetchData = async () => {
      setLoading(true);
      setError(null);
      
      try {
        // 尝试解析为JSON，失败则返回原始文本
        let result;
        try {
          result = await ipfsManager.getJSON(hash);
        } catch {
          result = await ipfsManager.getFile(hash);
        }
        
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [hash]);

  return { data, loading, error };
}

// 使用示例
function IPFSDataViewer({ hash }) {
  const { data, loading, error } = useIPFSData(hash);

  if (loading) return <div>加载IPFS数据中...</div>;
  if (error) return <div>错误: {error}</div>;
  if (!data) return <div>无数据</div>;

  return (
    <div className="ipfs-data-viewer">
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

IPFS应用场景：

• NFT元数据存储： 存储NFT的图片、属性等元数据
• 去中心化网站： 托管DApp的静态资源和前端代码
• 文档存储： 存储合同、证书等重要文档
• 媒体分享： 分布式的图片、视频分享平台
• 版本控制： 去中心化的代码和文档版本管理

最佳实践：

• 数据固定： 使用Pinning服务确保重要数据的可用性
• 网关备份： 使用多个IPFS网关提高访问可靠性
• 缓存策略： 本地缓存常用IPFS数据，提高访问速度
• 错误处理： 妥善处理网络故障和数据不可用情况
• 安全考虑： 注意IPFS数据的公开性，敏感数据需要加密

What special considerations are there for form validation in DApp compared to traditional applications?

考察点：表单处理差异。

答案：

DApp表单验证除了传统的客户端验证外，还需要考虑区块链特有的约束条件，如Gas费用、网络状态、智能合约限制等。验证策略需要在用户体验和交易成本之间找到平衡，避免用户因验证不充分而产生失败交易的Gas费损失。

DApp表单验证特殊考虑：

• Gas费用预估： 在表单提交前预估交易费用，让用户了解成本
• 余额验证： 确保用户有足够的余额支付交易和Gas费
• 网络状态检查： 验证用户连接的网络是否正确
• 智能合约限制： 检查合约状态和业务规则限制
• 数值精度： 处理BigNumber和代币精度相关的验证

DApp专用验证实现：

// DApp表单验证器
class DAppFormValidator {
  constructor(provider, userAddress) {
    this.provider = provider;
    this.userAddress = userAddress;
  }

  // 验证用户余额
  async validateBalance(requiredAmount, tokenContract = null) {
    try {
      let balance;
      
      if (tokenContract) {
        // ERC20代币余额
        balance = await tokenContract.balanceOf(this.userAddress);
      } else {
        // ETH余额
        balance = await this.provider.getBalance(this.userAddress);
      }

      if (balance.lt(requiredAmount)) {
        return {
          valid: false,
          error: '余额不足',
          current: balance,
          required: requiredAmount
        };
      }

      return { valid: true };
    } catch (error) {
      return {
        valid: false,
        error: '余额查询失败'
      };
    }
  }

  // 验证Gas费用
  async validateGasFee(transaction) {
    try {
      // 估算Gas
      const gasEstimate = await this.provider.estimateGas(transaction);
      const feeData = await this.provider.getFeeData();
      
      const gasCost = gasEstimate.mul(feeData.gasPrice || feeData.maxFeePerGas);
      
      // 检查ETH余额是否足够支付Gas
      const ethBalance = await this.provider.getBalance(this.userAddress);
      
      if (ethBalance.lt(gasCost)) {
        return {
          valid: false,
          error: 'ETH余额不足以支付Gas费用',
          gasCost,
          ethBalance
        };
      }

      return {
        valid: true,
        gasCost,
        gasEstimate
      };
    } catch (error) {
      return {
        valid: false,
        error: 'Gas费用估算失败'
      };
    }
  }

  // 验证网络
  async validateNetwork(requiredChainId) {
    try {
      const network = await this.provider.getNetwork();
      
      if (network.chainId !== requiredChainId) {
        return {
          valid: false,
          error: '请切换到正确的网络',
          current: network.chainId,
          required: requiredChainId
        };
      }

      return { valid: true };
    } catch (error) {
      return {
        valid: false,
        error: '网络检查失败'
      };
    }
  }

  // 验证地址格式
  validateAddress(address) {
    if (!ethers.utils.isAddress(address)) {
      return {
        valid: false,
        error: '无效的地址格式'
      };
    }

    if (address === ethers.constants.AddressZero) {
      return {
        valid: false,
        error: '不能使用零地址'
      };
    }

    return { valid: true };
  }

  // 验证代币数量
  validateTokenAmount(amount, decimals = 18, maxAmount = null) {
    try {
      const parsedAmount = ethers.utils.parseUnits(amount.toString(), decimals);
      
      if (parsedAmount.isZero()) {
        return {
          valid: false,
          error: '数量必须大于0'
        };
      }

      if (maxAmount && parsedAmount.gt(maxAmount)) {
        return {
          valid: false,
          error: '数量超过最大限制'
        };
      }

      return {
        valid: true,
        parsedAmount
      };
    } catch (error) {
      return {
        valid: false,
        error: '无效的数量格式'
      };
    }
  }

  // 智能合约状态验证
  async validateContractState(contract, validationRules) {
    const results = {};
    
    for (const [key, rule] of Object.entries(validationRules)) {
      try {
        const value = await contract[rule.method](...(rule.params || []));
        
        if (rule.validator) {
          const validation = rule.validator(value);
          results[key] = validation;
        } else {
          results[key] = { valid: true, value };
        }
      } catch (error) {
        results[key] = {
          valid: false,
          error: `合约状态检查失败: ${key}`
        };
      }
    }
    
    return results;
  }
}

React表单验证Hook：

// DApp表单验证Hook
function useDAppFormValidation(provider, userAddress, chainId) {
  const [errors, setErrors] = useState({});
  const [validating, setValidating] = useState(false);
  
  const validator = useMemo(() => 
    new DAppFormValidator(provider, userAddress), 
    [provider, userAddress]
  );

  const validateField = async (fieldName, value, validationConfig) => {
    setValidating(true);
    
    try {
      let result = { valid: true };
      
      switch (validationConfig.type) {
        case 'address':
          result = validator.validateAddress(value);
          break;
          
        case 'tokenAmount':
          result = validator.validateTokenAmount(
            value, 
            validationConfig.decimals,
            validationConfig.maxAmount
          );
          break;
          
        case 'balance':
          result = await validator.validateBalance(
            value,
            validationConfig.tokenContract
          );
          break;
          
        case 'network':
          result = await validator.validateNetwork(chainId);
          break;
          
        default:
          // 自定义验证函数
          if (validationConfig.customValidator) {
            result = await validationConfig.customValidator(value);
          }
      }
      
      setErrors(prev => ({
        ...prev,
        [fieldName]: result.valid ? null : result.error
      }));
      
      return result;
      
    } catch (error) {
      const errorMessage = `验证失败: ${error.message}`;
      setErrors(prev => ({
        ...prev,
        [fieldName]: errorMessage
      }));
      
      return { valid: false, error: errorMessage };
    } finally {
      setValidating(false);
    }
  };

  const validateForm = async (formData, validationSchema) => {
    setValidating(true);
    const results = {};
    
    try {
      // 并行执行所有验证
      const validationPromises = Object.entries(validationSchema).map(
        async ([fieldName, config]) => {
          const value = formData[fieldName];
          const result = await validateField(fieldName, value, config);
          return [fieldName, result];
        }
      );
      
      const validationResults = await Promise.all(validationPromises);
      
      validationResults.forEach(([fieldName, result]) => {
        results[fieldName] = result;
      });
      
      const isValid = Object.values(results).every(r => r.valid);
      
      return {
        isValid,
        results,
        errors: Object.fromEntries(
          Object.entries(results)
            .filter(([_, result]) => !result.valid)
            .map(([fieldName, result]) => [fieldName, result.error])
        )
      };
      
    } finally {
      setValidating(false);
    }
  };

  return {
    errors,
    validating,
    validateField,
    validateForm,
    clearErrors: () => setErrors({})
  };
}

实际应用示例：

// 代币转账表单
function TokenTransferForm({ tokenContract }) {
  const { provider, userAddress, chainId } = useWeb3();
  const [formData, setFormData] = useState({
    recipient: '',
    amount: '',
    gasPrice: ''
  });
  
  const { errors, validating, validateForm } = useDAppFormValidation(
    provider, 
    userAddress, 
    chainId
  );

  const validationSchema = {
    recipient: {
      type: 'address'
    },
    amount: {
      type: 'tokenAmount',
      decimals: 18,
      maxAmount: userTokenBalance
    },
    gasPrice: {
      type: 'tokenAmount',
      decimals: 9, // Gwei
      customValidator: async (value) => {
        const minGasPrice = ethers.utils.parseUnits('1', 'gwei');
        const maxGasPrice = ethers.utils.parseUnits('100', 'gwei');
        const gasPrice = ethers.utils.parseUnits(value, 'gwei');
        
        if (gasPrice.lt(minGasPrice)) {
          return { valid: false, error: 'Gas价格过低' };
        }
        
        if (gasPrice.gt(maxGasPrice)) {
          return { valid: false, error: 'Gas价格过高' };
        }
        
        return { valid: true };
      }
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // 执行表单验证
    const validation = await validateForm(formData, validationSchema);
    
    if (!validation.isValid) {
      console.log('表单验证失败:', validation.errors);
      return;
    }
    
    // 额外的Gas费用验证
    const transaction = {
      to: tokenContract.address,
      data: tokenContract.interface.encodeFunctionData('transfer', [
        formData.recipient,
        ethers.utils.parseEther(formData.amount)
      ])
    };
    
    const gasValidation = await validator.validateGasFee(transaction);
    if (!gasValidation.valid) {
      console.log('Gas费用验证失败:', gasValidation.error);
      return;
    }
    
    // 提交交易
    try {
      const tx = await tokenContract.transfer(
        formData.recipient,
        ethers.utils.parseEther(formData.amount)
      );
      
      console.log('交易提交成功:', tx.hash);
    } catch (error) {
      console.error('交易失败:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="token-transfer-form">
      <div className="field-group">
        <label>接收地址</label>
        <input
          type="text"
          value={formData.recipient}
          onChange={(e) => setFormData(prev => ({
            ...prev,
            recipient: e.target.value
          }))}
          className={errors.recipient ? 'error' : ''}
        />
        {errors.recipient && (
          <div className="error-message">{errors.recipient}</div>
        )}
      </div>
      
      <div className="field-group">
        <label>转账数量</label>
        <input
          type="text"
          value={formData.amount}
          onChange={(e) => setFormData(prev => ({
            ...prev,
            amount: e.target.value
          }))}
          className={errors.amount ? 'error' : ''}
        />
        {errors.amount && (
          <div className="error-message">{errors.amount}</div>
        )}
      </div>
      
      <button type="submit" disabled={validating}>
        {validating ? '验证中...' : '发送转账'}
      </button>
    </form>
  );
}

最佳实践：

• 分层验证： 客户端验证用于用户体验，智能合约验证确保安全性
• 实时反馈： 在用户输入过程中提供即时的验证反馈
• 成本预估： 在表单中显示预估的Gas费用和总成本
• 网络检查： 自动检测和提醒用户切换到正确的网络
• 错误恢复： 提供清晰的错误信息和解决方案指导

How to design responsive layout for DApp to adapt to different devices?

考察点：响应式设计基础。

答案：

DApp的响应式设计需要特别考虑钱包交互、复杂数据展示和移动端的操作便利性。与传统Web应用相比，DApp需要处理更多的状态信息、交易确认界面和数值显示，这对响应式设计提出了更高的要求。

DApp响应式设计特殊考虑：

• 钱包连接界面： 适配不同钱包的连接流程和弹窗
• 数据密集显示： 优化代币余额、交易历史等复杂信息的移动端展示
• 交易确认流程： 确保移动端交易确认界面的可用性
• 二维码支持： 移动端扫码连接和转账功能
• 触屏优化： 优化数值输入和滑动操作

响应式布局实现：

/* DApp响应式基础样式 */
.dapp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  
  /* 移动优先的设计 */
  @media (min-width: 768px) {
    padding: 0 24px;
  }
  
  @media (min-width: 1024px) {
    padding: 0 32px;
  }
}

/* 钱包连接按钮响应式 */
.wallet-connect {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  
  @media (min-width: 768px) {
    flex-direction: row;
    width: auto;
    gap: 16px;
  }
}

.wallet-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 12px;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  
  /* 移动端增大触摸区域 */
  min-height: 48px;
  
  @media (min-width: 768px) {
    min-height: auto;
    padding: 12px 20px;
  }
}

/* 数据表格响应式 */
.transaction-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  
  table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
  }
  
  /* 移动端卡片式布局 */
  @media (max-width: 767px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    
    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
    
    tr {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin-bottom: 12px;
      padding: 16px;
      background: var(--card-background);
    }
    
    td {
      border: none;
      position: relative;
      padding: 8px 0;
      
      &:before {
        content: attr(data-label) ": ";
        font-weight: bold;
        color: var(--text-secondary);
      }
    }
  }
}

/* 表单响应式布局 */
.form-layout {
  display: grid;
  gap: 20px;
  
  /* 移动端单列布局 */
  grid-template-columns: 1fr;
  
  /* 平板端双列布局 */
  @media (min-width: 768px) {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  
  /* 桌面端更复杂的网格 */
  @media (min-width: 1024px) {
    grid-template-columns: 2fr 1fr;
    gap: 32px;
  }
}

.form-full-width {
  grid-column: 1 / -1;
}

/* 数值显示响应式 */
.balance-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  
  @media (min-width: 768px) {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}

.balance-amount {
  font-size: 24px;
  font-weight: bold;
  
  @media (min-width: 768px) {
    font-size: 32px;
  }
}

.balance-usd {
  font-size: 14px;
  color: var(--text-secondary);
  
  @media (min-width: 768px) {
    font-size: 16px;
  }
}

React响应式组件：

// 响应式Hook
function useResponsive() {
  const [breakpoint, setBreakpoint] = useState('mobile');
  
  useEffect(() => {
    const getBreakpoint = () => {
      const width = window.innerWidth;
      if (width >= 1024) return 'desktop';
      if (width >= 768) return 'tablet';
      return 'mobile';
    };
    
    const handleResize = () => {
      setBreakpoint(getBreakpoint());
    };
    
    handleResize();
    window.addEventListener('resize', handleResize);
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return {
    breakpoint,
    isMobile: breakpoint === 'mobile',
    isTablet: breakpoint === 'tablet',
    isDesktop: breakpoint === 'desktop'
  };
}

// 响应式钱包连接组件
function ResponsiveWalletConnect({ onConnect }) {
  const { isMobile } = useResponsive();
  const [showModal, setShowModal] = useState(false);
  
  const walletOptions = [
    { name: 'MetaMask', icon: '🦊', id: 'metamask' },
    { name: 'WalletConnect', icon: '🔗', id: 'walletconnect' },
    { name: 'Coinbase', icon: '🔷', id: 'coinbase' }
  ];
  
  if (isMobile) {
    return (
      <>
        <button 
          className="wallet-connect-button mobile"
          onClick={() => setShowModal(true)}
        >
          连接钱包
        </button>
        
        {showModal && (
          <div className="wallet-modal mobile">
            <div className="modal-content">
              <div className="modal-header">
                <h3>选择钱包</h3>
                <button 
                  className="close-button"
                  onClick={() => setShowModal(false)}
                >
                  ×
                </button>
              </div>
              
              <div className="wallet-options">
                {walletOptions.map(wallet => (
                  <button
                    key={wallet.id}
                    className="wallet-option mobile"
                    onClick={() => {
                      onConnect(wallet.id);
                      setShowModal(false);
                    }}
                  >
                    <span className="wallet-icon">{wallet.icon}</span>
                    <span className="wallet-name">{wallet.name}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}
      </>
    );
  }
  
  return (
    <div className="wallet-connect desktop">
      {walletOptions.map(wallet => (
        <button
          key={wallet.id}
          className="wallet-option"
          onClick={() => onConnect(wallet.id)}
        >
          <span className="wallet-icon">{wallet.icon}</span>
          <span className="wallet-name">{wallet.name}</span>
        </button>
      ))}
    </div>
  );
}

// 响应式交易列表
function ResponsiveTransactionList({ transactions }) {
  const { isMobile } = useResponsive();
  
  if (isMobile) {
    return (
      <div className="transaction-list mobile">
        {transactions.map(tx => (
          <div key={tx.hash} className="transaction-card">
            <div className="tx-header">
              <span className="tx-type">{tx.type}</span>
              <span className="tx-status">{tx.status}</span>
            </div>
            
            <div className="tx-details">
              <div className="tx-amount">
                {tx.amount} {tx.symbol}
              </div>
              <div className="tx-time">
                {formatTime(tx.timestamp)}
              </div>
              <div className="tx-hash">
                {shortenAddress(tx.hash)}
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }
  
  return (
    <div className="transaction-table desktop">
      <table>
        <thead>
          <tr>
            <th>类型</th>
            <th>数量</th>
            <th>状态</th>
            <th>时间</th>
            <th>交易哈希</th>
          </tr>
        </thead>
        <tbody>
          {transactions.map(tx => (
            <tr key={tx.hash}>
              <td>{tx.type}</td>
              <td>{tx.amount} {tx.symbol}</td>
              <td>{tx.status}</td>
              <td>{formatTime(tx.timestamp)}</td>
              <td>{shortenAddress(tx.hash)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// 响应式数值输入
function ResponsiveNumberInput({ 
  value, 
  onChange, 
  symbol,
  maxValue,
  placeholder = "0.0"
}) {
  const { isMobile } = useResponsive();
  
  return (
    <div className={`number-input ${isMobile ? 'mobile' : 'desktop'}`}>
      <input
        type="text"
        inputMode="decimal"
        pattern="[0-9]*\.?[0-9]*"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="amount-input"
      />
      
      <div className="input-accessories">
        {symbol && <span className="symbol">{symbol}</span>}
        
        {maxValue && (
          <button
            type="button"
            className="max-button"
            onClick={() => onChange(maxValue)}
          >
            MAX
          </button>
        )}
      </div>
    </div>
  );
}

移动端优化技巧：

// 移动端特殊处理
function MobileOptimizations() {
  useEffect(() => {
    // 防止双击缩放
    document.addEventListener('touchstart', (e) => {
      if (e.touches.length > 1) {
        e.preventDefault();
      }
    });
    
    // 防止长按选择文本
    document.addEventListener('selectstart', (e) => {
      if (e.target.classList.contains('no-select')) {
        e.preventDefault();
      }
    });
    
    // 优化输入框在iOS上的行为
    const inputs = document.querySelectorAll('input[inputmode="decimal"]');
    inputs.forEach(input => {
      input.addEventListener('focus', () => {
        // 滚动到视图中
        setTimeout(() => {
          input.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }, 300);
      });
    });
    
  }, []);
  
  return null;
}

// PWA支持
function usePWA() {
  const [installPrompt, setInstallPrompt] = useState(null);
  const [isInstallable, setIsInstallable] = useState(false);
  
  useEffect(() => {
    const handler = (e) => {
      e.preventDefault();
      setInstallPrompt(e);
      setIsInstallable(true);
    };
    
    window.addEventListener('beforeinstallprompt', handler);
    
    return () => window.removeEventListener('beforeinstallprompt', handler);
  }, []);
  
  const installApp = async () => {
    if (!installPrompt) return;
    
    const result = await installPrompt.prompt();
    console.log('PWA安装结果:', result);
    
    setInstallPrompt(null);
    setIsInstallable(false);
  };
  
  return { isInstallable, installApp };
}

最佳实践：

• 移动优先： 采用移动优先的设计策略，逐步增强桌面体验
• 触摸友好： 确保所有交互元素的触摸区域至少44px
• 性能优化： 在移动端减少不必要的动画和复杂计算
• 网络适应： 考虑移动网络的不稳定性，提供离线功能
• PWA支持： 实现Progressive Web App，提升移动端体验

How to design a scalable DApp state management architecture?

考察点：架构设计能力。

答案：

可扩展的DApp状态管理架构需要处理多链环境、复杂的异步交互和大量的区块链数据。架构设计应该遵循模块化、可测试性和可维护性原则，同时考虑性能优化和用户体验。

架构设计原则：

• 分层架构： 清晰分离数据层、业务逻辑层和表现层
• 状态分类： 区分链上状态、链下状态、UI状态和缓存状态
• 事件驱动： 使用事件系统解耦组件间的通信
• 插件化设计： 支持不同区块链和协议的热插拔
• 性能优化： 实现智能缓存和按需加载机制

核心架构实现：

// 状态管理架构基础
class DAppStateManager {
  constructor() {
    this.stores = new Map();
    this.eventBus = new EventBus();
    this.middleware = [];
    this.subscriptions = new Map();
  }

  // 注册状态存储
  registerStore(name, store) {
    this.stores.set(name, store);
    
    // 连接事件系统
    store.setEventBus(this.eventBus);
    
    return store;
  }

  // 获取状态存储
  getStore(name) {
    return this.stores.get(name);
  }

  // 注册中间件
  use(middleware) {
    this.middleware.push(middleware);
  }

  // 分发action
  async dispatch(action) {
    let result = action;
    
    // 执行中间件
    for (const middleware of this.middleware) {
      result = await middleware(result, this);
    }
    
    // 分发到相关stores
    const promises = [];
    this.stores.forEach(store => {
      if (store.canHandle(result)) {
        promises.push(store.dispatch(result));
      }
    });
    
    return Promise.all(promises);
  }
}

// 基础Store类
class BaseStore {
  constructor(initialState = {}) {
    this.state = { ...initialState };
    this.listeners = new Set();
    this.eventBus = null;
  }

  setEventBus(eventBus) {
    this.eventBus = eventBus;
  }

  // 更新状态
  setState(partialState) {
    const prevState = { ...this.state };
    this.state = { ...this.state, ...partialState };
    
    // 通知监听者
    this.listeners.forEach(listener => {
      listener(this.state, prevState);
    });
    
    // 发出状态变化事件
    if (this.eventBus) {
      this.eventBus.emit('stateChange', {
        store: this.constructor.name,
        state: this.state,
        prevState
      });
    }
  }

  // 获取状态
  getState() {
    return { ...this.state };
  }

  // 订阅状态变化
  subscribe(listener) {
    this.listeners.add(listener);
    
    return () => {
      this.listeners.delete(listener);
    };
  }

  // 判断是否能处理action
  canHandle(action) {
    return false; // 子类实现
  }

  // 分发action
  async dispatch(action) {
    // 子类实现
  }
}

专用Store实现：

// Web3连接状态管理
class Web3Store extends BaseStore {
  constructor() {
    super({
      isConnected: false,
      address: null,
      chainId: null,
      provider: null,
      signer: null,
      network: null,
      balance: null
    });
  }

  canHandle(action) {
    return action.type && action.type.startsWith('WEB3_');
  }

  async dispatch(action) {
    switch (action.type) {
      case 'WEB3_CONNECT':
        return this.handleConnect(action.payload);
      
      case 'WEB3_DISCONNECT':
        return this.handleDisconnect();
      
      case 'WEB3_ACCOUNT_CHANGED':
        return this.handleAccountChanged(action.payload);
      
      case 'WEB3_CHAIN_CHANGED':
        return this.handleChainChanged(action.payload);
      
      default:
        return;
    }
  }

  async handleConnect(provider) {
    try {
      const signer = provider.getSigner();
      const address = await signer.getAddress();
      const network = await provider.getNetwork();
      const balance = await provider.getBalance(address);

      this.setState({
        isConnected: true,
        address,
        chainId: network.chainId,
        provider,
        signer,
        network,
        balance
      });

      // 监听账户和网络变化
      this.setupEventListeners(provider);
      
    } catch (error) {
      console.error('Web3连接失败:', error);
      throw error;
    }
  }

  setupEventListeners(provider) {
    if (provider.provider?.on) {
      provider.provider.on('accountsChanged', (accounts) => {
        this.dispatch({
          type: 'WEB3_ACCOUNT_CHANGED',
          payload: accounts[0] || null
        });
      });

      provider.provider.on('chainChanged', (chainId) => {
        this.dispatch({
          type: 'WEB3_CHAIN_CHANGED',
          payload: parseInt(chainId, 16)
        });
      });
    }
  }
}

// 合约状态管理
class ContractStore extends BaseStore {
  constructor() {
    super({
      contracts: new Map(),
      contractData: new Map(),
      loading: new Set(),
      errors: new Map()
    });
  }

  canHandle(action) {
    return action.type && action.type.startsWith('CONTRACT_');
  }

  async dispatch(action) {
    switch (action.type) {
      case 'CONTRACT_REGISTER':
        return this.registerContract(action.payload);
      
      case 'CONTRACT_CALL':
        return this.callContract(action.payload);
      
      case 'CONTRACT_SEND':
        return this.sendTransaction(action.payload);
      
      default:
        return;
    }
  }

  registerContract(contractConfig) {
    const { name, address, abi, provider } = contractConfig;
    const contract = new ethers.Contract(address, abi, provider);
    
    const state = this.getState();
    const contracts = new Map(state.contracts);
    contracts.set(name, contract);
    
    this.setState({ contracts });
  }

  async callContract({ contractName, method, params = [], cacheKey }) {
    const contracts = this.getState().contracts;
    const contract = contracts.get(contractName);
    
    if (!contract) {
      throw new Error(`Contract ${contractName} not found`);
    }

    // 检查缓存
    if (cacheKey) {
      const cachedData = this.getState().contractData.get(cacheKey);
      if (cachedData && !this.isCacheExpired(cachedData)) {
        return cachedData.data;
      }
    }

    // 设置loading状态
    const loading = new Set(this.getState().loading);
    loading.add(cacheKey || `${contractName}.${method}`);
    this.setState({ loading });

    try {
      const result = await contract[method](...params);
      
      // 缓存结果
      if (cacheKey) {
        const contractData = new Map(this.getState().contractData);
        contractData.set(cacheKey, {
          data: result,
          timestamp: Date.now(),
          ttl: 300000 // 5分钟缓存
        });
        this.setState({ contractData });
      }

      return result;
      
    } catch (error) {
      const errors = new Map(this.getState().errors);
      errors.set(cacheKey || `${contractName}.${method}`, error);
      this.setState({ errors });
      throw error;
      
    } finally {
      const loading = new Set(this.getState().loading);
      loading.delete(cacheKey || `${contractName}.${method}`);
      this.setState({ loading });
    }
  }

  isCacheExpired(cacheItem) {
    return Date.now() > (cacheItem.timestamp + cacheItem.ttl);
  }
}

// 交易状态管理
class TransactionStore extends BaseStore {
  constructor() {
    super({
      transactions: new Map(),
      pending: new Set(),
      confirmed: new Set(),
      failed: new Set()
    });
  }

  canHandle(action) {
    return action.type && action.type.startsWith('TX_');
  }

  async dispatch(action) {
    switch (action.type) {
      case 'TX_SUBMIT':
        return this.submitTransaction(action.payload);
      
      case 'TX_UPDATE':
        return this.updateTransaction(action.payload);
      
      case 'TX_CONFIRM':
        return this.confirmTransaction(action.payload);
      
      default:
        return;
    }
  }

  submitTransaction(txData) {
    const { hash, ...transaction } = txData;
    
    const transactions = new Map(this.getState().transactions);
    const pending = new Set(this.getState().pending);
    
    transactions.set(hash, {
      ...transaction,
      hash,
      status: 'pending',
      timestamp: Date.now()
    });
    
    pending.add(hash);
    
    this.setState({ transactions, pending });
    
    // 开始监听交易状态
    this.watchTransaction(hash);
  }

  async watchTransaction(hash) {
    const web3Store = this.eventBus.stateManager.getStore('web3');
    const provider = web3Store.getState().provider;
    
    if (!provider) return;

    try {
      const receipt = await provider.waitForTransaction(hash);
      
      this.dispatch({
        type: 'TX_CONFIRM',
        payload: { hash, receipt }
      });
      
    } catch (error) {
      this.dispatch({
        type: 'TX_UPDATE',
        payload: { 
          hash, 
          status: 'failed', 
          error: error.message 
        }
      });
    }
  }
}

React集成Hook：

// 状态管理Hook
function useDAppState() {
  const [stateManager] = useState(() => {
    const manager = new DAppStateManager();
    
    // 注册各种stores
    manager.registerStore('web3', new Web3Store());
    manager.registerStore('contract', new ContractStore());
    manager.registerStore('transaction', new TransactionStore());
    
    // 注册中间件
    manager.use(async (action, stateManager) => {
      console.log('Action dispatched:', action);
      return action;
    });
    
    return manager;
  });

  return stateManager;
}

// 具体Store的Hook
function useWeb3Store() {
  const stateManager = useDAppState();
  const web3Store = stateManager.getStore('web3');
  const [state, setState] = useState(web3Store.getState());

  useEffect(() => {
    const unsubscribe = web3Store.subscribe((newState) => {
      setState(newState);
    });

    return unsubscribe;
  }, [web3Store]);

  const actions = {
    connect: (provider) => stateManager.dispatch({
      type: 'WEB3_CONNECT',
      payload: provider
    }),
    
    disconnect: () => stateManager.dispatch({
      type: 'WEB3_DISCONNECT'
    })
  };

  return { state, actions };
}

// 使用示例
function DAppComponent() {
  const { state: web3State, actions: web3Actions } = useWeb3Store();

  const handleConnect = async () => {
    try {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      await web3Actions.connect(provider);
    } catch (error) {
      console.error('连接失败:', error);
    }
  };

  return (
    <div>
      {web3State.isConnected ? (
        <div>已连接: {web3State.address}</div>
      ) : (
        <button onClick={handleConnect}>连接钱包</button>
      )}
    </div>
  );
}

架构优势：

• 模块化： 每个Store负责特定的业务领域，易于维护和测试
• 可扩展： 支持动态注册新的Store和中间件
• 类型安全： 结合TypeScript可以提供完整的类型检查
• 性能优化： 内置缓存机制和按需更新
• 调试友好： 完整的action日志和状态追踪

How to implement offline functionality and data synchronization in DApp?

考察点：离线功能设计。

答案：

DApp的离线功能设计需要在去中心化特性和用户体验之间找到平衡。由于区块链交互本质上需要网络连接，离线功能主要集中在数据缓存、交易队列和基础功能的本地实现上。

离线功能策略：

• 数据缓存： 缓存关键的区块链数据，支持离线查看
• 交易队列： 离线时暂存交易，网络恢复后自动提交
• 本地计算： 在本地进行价格计算、余额估算等操作
• 渐进式同步： 网络恢复后智能同步数据，优先更新重要信息
• 冲突解决： 处理离线期间的数据冲突和状态不一致

离线存储架构：

// 离线数据管理器
class OfflineDataManager {
  constructor() {
    this.dbName = 'dapp-offline-db';
    this.version = 1;
    this.db = null;
    this.syncQueue = [];
    this.isOnline = navigator.onLine;
    this.setupEventListeners();
  }

  async initialize() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);
      
      request.onerror = () => reject(request.error);
      request.onsuccess = () => {
        this.db = request.result;
        resolve();
      };
      
      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        
        // 创建对象存储
        if (!db.objectStoreNames.contains('transactions')) {
          const txStore = db.createObjectStore('transactions', {
            keyPath: 'id',
            autoIncrement: true
          });
          txStore.createIndex('hash', 'hash', { unique: false });
          txStore.createIndex('status', 'status', { unique: false });
          txStore.createIndex('timestamp', 'timestamp', { unique: false });
        }
        
        if (!db.objectStoreNames.contains('contractData')) {
          const contractStore = db.createObjectStore('contractData', {
            keyPath: 'key'
          });
          contractStore.createIndex('contractAddress', 'contractAddress', { unique: false });
          contractStore.createIndex('timestamp', 'timestamp', { unique: false });
        }
        
        if (!db.objectStoreNames.contains('userPreferences')) {
          db.createObjectStore('userPreferences', {
            keyPath: 'key'
          });
        }
        
        if (!db.objectStoreNames.contains('pendingActions')) {
          const actionStore = db.createObjectStore('pendingActions', {
            keyPath: 'id',
            autoIncrement: true
          });
          actionStore.createIndex('type', 'type', { unique: false });
          actionStore.createIndex('priority', 'priority', { unique: false });
        }
      };
    });
  }

  setupEventListeners() {
    window.addEventListener('online', () => {
      this.isOnline = true;
      this.onNetworkRestore();
    });
    
    window.addEventListener('offline', () => {
      this.isOnline = false;
      this.onNetworkLost();
    });
  }

  // 缓存合约数据
  async cacheContractData(key, data, contractAddress, ttl = 3600000) {
    if (!this.db) return;
    
    const transaction = this.db.transaction(['contractData'], 'readwrite');
    const store = transaction.objectStore('contractData');
    
    const cacheItem = {
      key,
      data,
      contractAddress,
      timestamp: Date.now(),
      ttl,
      expiresAt: Date.now() + ttl
    };
    
    await store.put(cacheItem);
  }

  // 获取缓存的合约数据
  async getCachedContractData(key) {
    if (!this.db) return null;
    
    const transaction = this.db.transaction(['contractData'], 'readonly');
    const store = transaction.objectStore('contractData');
    
    return new Promise((resolve) => {
      const request = store.get(key);
      
      request.onsuccess = () => {
        const result = request.result;
        
        if (!result) {
          resolve(null);
          return;
        }
        
        // 检查是否过期
        if (Date.now() > result.expiresAt) {
          this.deleteCachedData('contractData', key);
          resolve(null);
          return;
        }
        
        resolve(result.data);
      };
      
      request.onerror = () => resolve(null);
    });
  }

  // 添加离线交易到队列
  async addPendingTransaction(transactionData) {
    if (!this.db) return;
    
    const transaction = this.db.transaction(['pendingActions'], 'readwrite');
    const store = transaction.objectStore('pendingActions');
    
    const pendingAction = {
      type: 'TRANSACTION',
      data: transactionData,
      priority: transactionData.priority || 1,
      timestamp: Date.now(),
      retryCount: 0,
      maxRetries: 3
    };
    
    const result = await store.add(pendingAction);
    return result;
  }

  // 获取待处理的操作
  async getPendingActions() {
    if (!this.db) return [];
    
    const transaction = this.db.transaction(['pendingActions'], 'readonly');
    const store = transaction.objectStore('pendingActions');
    const index = store.index('priority');
    
    return new Promise((resolve) => {
      const actions = [];
      const request = index.openCursor(null, 'prev'); // 按优先级降序
      
      request.onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
          actions.push(cursor.value);
          cursor.continue();
        } else {
          resolve(actions);
        }
      };
      
      request.onerror = () => resolve([]);
    });
  }

  // 网络恢复时的处理
  async onNetworkRestore() {
    console.log('网络已恢复，开始同步数据...');
    
    try {
      // 处理待处理的操作
      const pendingActions = await this.getPendingActions();
      
      for (const action of pendingActions) {
        try {
          await this.processPendingAction(action);
          await this.removePendingAction(action.id);
        } catch (error) {
          console.error('处理待处理操作失败:', error);
          await this.incrementRetryCount(action.id);
        }
      }
      
      // 触发数据同步事件
      window.dispatchEvent(new CustomEvent('dapp-sync-start'));
      
    } catch (error) {
      console.error('数据同步失败:', error);
    }
  }

  async processPendingAction(action) {
    switch (action.type) {
      case 'TRANSACTION':
        return await this.submitPendingTransaction(action.data);
      
      case 'CONTRACT_CALL':
        return await this.executePendingContractCall(action.data);
      
      default:
        console.warn('未知的待处理操作类型:', action.type);
    }
  }
}

离线交易管理：

// 离线交易管理器
class OfflineTransactionManager {
  constructor(offlineDataManager, web3Provider) {
    this.offlineData = offlineDataManager;
    this.provider = web3Provider;
    this.queuedTransactions = new Map();
  }

  // 离线提交交易
  async submitOfflineTransaction(transactionData) {
    const {
      to,
      value,
      data,
      gasLimit,
      gasPrice,
      description,
      priority = 1
    } = transactionData;

    // 生成本地交易ID
    const localId = this.generateLocalTransactionId();
    
    const offlineTx = {
      localId,
      to,
      value: value?.toString(),
      data,
      gasLimit: gasLimit?.toString(),
      gasPrice: gasPrice?.toString(),
      description,
      priority,
      status: 'queued',
      timestamp: Date.now(),
      estimatedGasCost: gasLimit && gasPrice ? 
        gasLimit.mul(gasPrice).toString() : null
    };

    // 保存到离线存储
    await this.offlineData.addPendingTransaction(offlineTx);
    
    // 更新本地状态
    this.queuedTransactions.set(localId, offlineTx);
    
    // 触发UI更新事件
    window.dispatchEvent(new CustomEvent('offline-transaction-queued', {
      detail: offlineTx
    }));

    return localId;
  }

  // 网络恢复后提交交易
  async submitPendingTransaction(txData) {
    try {
      // 重新获取最新的nonce和gas价格
      const signer = this.provider.getSigner();
      const nonce = await signer.getTransactionCount('pending');
      const feeData = await this.provider.getFeeData();

      const transaction = {
        to: txData.to,
        value: txData.value,
        data: txData.data,
        nonce,
        gasLimit: txData.gasLimit,
        maxFeePerGas: feeData.maxFeePerGas,
        maxPriorityFeePerGas: feeData.maxPriorityFeePerGas
      };

      const tx = await signer.sendTransaction(transaction);
      
      // 更新交易状态
      this.updateTransactionStatus(txData.localId, 'submitted', tx.hash);
      
      return tx;
      
    } catch (error) {
      this.updateTransactionStatus(txData.localId, 'failed', null, error.message);
      throw error;
    }
  }

  generateLocalTransactionId() {
    return `local_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
  }

  updateTransactionStatus(localId, status, hash = null, error = null) {
    const tx = this.queuedTransactions.get(localId);
    if (tx) {
      tx.status = status;
      tx.hash = hash;
      tx.error = error;
      tx.updatedAt = Date.now();
      
      window.dispatchEvent(new CustomEvent('transaction-status-updated', {
        detail: tx
      }));
    }
  }
}

React离线功能Hook：

// 离线状态管理Hook
function useOfflineCapability() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  const [syncStatus, setSyncStatus] = useState('idle');
  const [pendingActions, setPendingActions] = useState([]);
  const [offlineDataManager] = useState(() => new OfflineDataManager());

  useEffect(() => {
    const handleOnline = () => {
      setIsOnline(true);
      setSyncStatus('syncing');
    };
    
    const handleOffline = () => {
      setIsOnline(false);
      setSyncStatus('offline');
    };
    
    const handleSyncStart = () => {
      setSyncStatus('syncing');
    };
    
    const handleSyncComplete = () => {
      setSyncStatus('idle');
    };

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    window.addEventListener('dapp-sync-start', handleSyncStart);
    window.addEventListener('dapp-sync-complete', handleSyncComplete);

    // 初始化离线数据管理器
    offlineDataManager.initialize();

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
      window.removeEventListener('dapp-sync-start', handleSyncStart);
      window.removeEventListener('dapp-sync-complete', handleSyncComplete);
    };
  }, [offlineDataManager]);

  // 获取缓存数据
  const getCachedData = useCallback(async (key) => {
    return await offlineDataManager.getCachedContractData(key);
  }, [offlineDataManager]);

  // 缓存数据
  const cacheData = useCallback(async (key, data, contractAddress, ttl) => {
    return await offlineDataManager.cacheContractData(key, data, contractAddress, ttl);
  }, [offlineDataManager]);

  return {
    isOnline,
    syncStatus,
    pendingActions,
    getCachedData,
    cacheData,
    offlineDataManager
  };
}

// 离线感知的数据获取Hook
function useOfflineAwareData(key, fetchFn, cacheOptions = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [fromCache, setFromCache] = useState(false);
  
  const { isOnline, getCachedData, cacheData } = useOfflineCapability();

  useEffect(() => {
    const loadData = async () => {
      setLoading(true);
      setError(null);

      try {
        // 先尝试获取缓存数据
        const cachedData = await getCachedData(key);
        
        if (cachedData) {
          setData(cachedData);
          setFromCache(true);
          setLoading(false);
          
          // 如果在线，仍然尝试获取最新数据
          if (!isOnline) {
            return;
          }
        }

        // 如果在线，获取最新数据
        if (isOnline && fetchFn) {
          const freshData = await fetchFn();
          
          // 缓存新数据
          if (freshData && cacheOptions.cache !== false) {
            await cacheData(
              key, 
              freshData, 
              cacheOptions.contractAddress,
              cacheOptions.ttl
            );
          }
          
          setData(freshData);
          setFromCache(false);
        }
        
      } catch (err) {
        setError(err);
        
        // 如果获取失败但有缓存数据，使用缓存
        const cachedData = await getCachedData(key);
        if (cachedData) {
          setData(cachedData);
          setFromCache(true);
        }
        
      } finally {
        setLoading(false);
      }
    };

    loadData();
  }, [key, isOnline, fetchFn, getCachedData, cacheData, cacheOptions]);

  return { data, loading, error, fromCache, isOnline };
}

// 使用示例
function TokenBalance({ tokenAddress, userAddress }) {
  const { data: balance, loading, fromCache, isOnline } = useOfflineAwareData(
    `balance_${tokenAddress}_${userAddress}`,
    async () => {
      const contract = new ethers.Contract(tokenAddress, tokenABI, provider);
      return await contract.balanceOf(userAddress);
    },
    {
      contractAddress: tokenAddress,
      ttl: 300000, // 5分钟缓存
      cache: true
    }
  );

  return (
    <div className="token-balance">
      {loading ? (
        <span>加载中...</span>
      ) : (
        <div>
          <span>余额: {ethers.utils.formatEther(balance || 0)}</span>
          {fromCache && (
            <span className="cache-indicator">
              📱 {isOnline ? '缓存数据' : '离线数据'}
            </span>
          )}
        </div>
      )}
    </div>
  );
}

离线功能最佳实践：

• 智能缓存： 优先缓存用户常用和重要的数据
• 优雅降级： 离线时提供基础功能，在线时增强体验
• 数据同步： 网络恢复后智能同步，避免重复操作
• 用户提示： 清楚地告知用户当前的网络状态和数据来源
• 冲突处理： 妥善处理离线期间可能产生的数据冲突

How to optimize DApp performance? Reduce the number of blockchain calls.

考察点：性能优化策略。

答案：

DApp性能优化的核心在于减少不必要的区块链调用，因为每次调用都涉及网络延迟和计算成本。优化策略需要从数据缓存、批量操作、智能合约设计和前端架构等多个维度进行。

性能优化策略：

• 数据缓存： 智能缓存区块链查询结果，避免重复调用
• 批量操作： 使用Multicall等技术批量执行多个合约调用
• 预加载和预计算： 提前加载可能需要的数据
• 状态管理优化： 合理管理组件状态，避免不必要的重新渲染
• 网络优化： 使用多个RPC节点，实现负载均衡和故障转移

缓存策略实现：

// 智能缓存管理器
class SmartCacheManager {
  constructor() {
    this.cache = new Map();
    this.pendingRequests = new Map();
    this.cacheConfig = new Map();
  }

  // 配置缓存策略
  setCacheConfig(key, config) {
    this.cacheConfig.set(key, {
      ttl: config.ttl || 300000, // 默认5分钟
      refreshThreshold: config.refreshThreshold || 0.8, // 80%时间后刷新
      staleWhileRevalidate: config.staleWhileRevalidate || true,
      maxAge: config.maxAge || 3600000 // 最长1小时
    });
  }

  // 获取缓存数据
  async get(key, fetcher, options = {}) {
    const config = this.cacheConfig.get(key) || {};
    const cacheItem = this.cache.get(key);
    const now = Date.now();

    // 检查缓存是否有效
    if (cacheItem && !this.isExpired(cacheItem, config)) {
      // 检查是否需要后台刷新
      if (this.shouldRefresh(cacheItem, config)) {
        this.backgroundRefresh(key, fetcher, config);
      }
      
      return cacheItem.data;
    }

    // 检查是否有正在进行的请求
    if (this.pendingRequests.has(key)) {
      return await this.pendingRequests.get(key);
    }

    // 创建新的请求
    const fetchPromise = this.executeFetch(key, fetcher, config);
    this.pendingRequests.set(key, fetchPromise);

    try {
      const result = await fetchPromise;
      return result;
    } finally {
      this.pendingRequests.delete(key);
    }
  }

  async executeFetch(key, fetcher, config) {
    try {
      const data = await fetcher();
      
      // 缓存结果
      this.cache.set(key, {
        data,
        timestamp: Date.now(),
        accessCount: 1,
        lastAccess: Date.now()
      });

      return data;
    } catch (error) {
      // 如果有过期但可用的缓存，返回它
      const staleCache = this.cache.get(key);
      if (staleCache && config.staleWhileRevalidate) {
        console.warn(`使用过期缓存数据: ${key}`, error);
        return staleCache.data;
      }
      
      throw error;
    }
  }

  backgroundRefresh(key, fetcher, config) {
    // 后台异步刷新缓存
    this.executeFetch(key, fetcher, config).catch(error => {
      console.warn(`后台缓存刷新失败: ${key}`, error);
    });
  }

  isExpired(cacheItem, config) {
    const age = Date.now() - cacheItem.timestamp;
    return age > config.ttl;
  }

  shouldRefresh(cacheItem, config) {
    const age = Date.now() - cacheItem.timestamp;
    return age > (config.ttl * config.refreshThreshold);
  }

  // 清理过期缓存
  cleanup() {
    const now = Date.now();
    
    for (const [key, item] of this.cache.entries()) {
      const config = this.cacheConfig.get(key) || {};
      const age = now - item.timestamp;
      
      if (age > config.maxAge) {
        this.cache.delete(key);
      }
    }
  }
}

批量调用实现：

// Multicall批量调用管理器
class MulticallManager {
  constructor(multicallAddress, provider) {
    this.multicallAddress = multicallAddress;
    this.provider = provider;
    this.pendingCalls = [];
    this.batchTimeout = null;
    this.batchSize = 100;
    this.batchDelay = 50; // 50ms延迟批处理
  }

  // 添加调用到批处理队列
  async addCall(target, functionName, params = [], options = {}) {
    return new Promise((resolve, reject) => {
      const call = {
        target,
        functionName,
        params,
        options,
        resolve,
        reject,
        timestamp: Date.now()
      };

      this.pendingCalls.push(call);
      this.scheduleBatch();
    });
  }

  scheduleBatch() {
    if (this.batchTimeout) return;
    
    this.batchTimeout = setTimeout(() => {
      this.executeBatch();
      this.batchTimeout = null;
    }, this.batchDelay);
  }

  async executeBatch() {
    if (this.pendingCalls.length === 0) return;

    const calls = this.pendingCalls.splice(0, this.batchSize);
    
    try {
      // 构建Multicall参数
      const multicallData = calls.map(call => ({
        target: call.target,
        callData: this.encodeCallData(call)
      }));

      // 执行批量调用
      const multicall = new ethers.Contract(
        this.multicallAddress,
        MULTICALL_ABI,
        this.provider
      );

      const results = await multicall.callStatic.aggregate(multicallData);
      
      // 解析结果并分发给对应的Promise
      calls.forEach((call, index) => {
        try {
          const result = this.decodeResult(call, results.returnData[index]);
          call.resolve(result);
        } catch (error) {
          call.reject(error);
        }
      });

    } catch (error) {
      // 批量调用失败，逐个执行
      this.fallbackToIndividualCalls(calls);
    }

    // 如果还有待处理的调用，继续处理
    if (this.pendingCalls.length > 0) {
      this.scheduleBatch();
    }
  }

  async fallbackToIndividualCalls(calls) {
    for (const call of calls) {
      try {
        const contract = new ethers.Contract(
          call.target,
          call.options.abi || [],
          this.provider
        );
        
        const result = await contract[call.functionName](...call.params);
        call.resolve(result);
      } catch (error) {
        call.reject(error);
      }
    }
  }

  encodeCallData(call) {
    const iface = new ethers.utils.Interface(call.options.abi || []);
    return iface.encodeFunctionData(call.functionName, call.params);
  }

  decodeResult(call, returnData) {
    const iface = new ethers.utils.Interface(call.options.abi || []);
    return iface.decodeFunctionResult(call.functionName, returnData);
  }
}

React性能优化Hook：

// 优化的合约数据Hook
function useOptimizedContractData(contractAddress, abi, method, params = [], options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  const cacheManager = useMemo(() => new SmartCacheManager(), []);
  const multicallManager = useMemo(() => new MulticallManager(
    MULTICALL_ADDRESS,
    provider
  ), []);

  // 生成缓存键
  const cacheKey = useMemo(() => {
    const paramsStr = JSON.stringify(params);
    return `${contractAddress}_${method}_${paramsStr}`;
  }, [contractAddress, method, params]);

  // 配置缓存策略
  useEffect(() => {
    cacheManager.setCacheConfig(cacheKey, {
      ttl: options.ttl || 300000,
      refreshThreshold: 0.8,
      staleWhileRevalidate: true
    });
  }, [cacheKey, options.ttl]);

  // 数据获取函数
  const fetchData = useCallback(async () => {
    if (options.useBatch) {
      // 使用批量调用
      return await multicallManager.addCall(
        contractAddress,
        method,
        params,
        { abi }
      );
    } else {
      // 单独调用
      const contract = new ethers.Contract(contractAddress, abi, provider);
      return await contract[method](...params);
    }
  }, [contractAddress, method, params, options.useBatch]);

  // 加载数据
  useEffect(() => {
    let mounted = true;

    const loadData = async () => {
      setLoading(true);
      setError(null);

      try {
        const result = await cacheManager.get(cacheKey, fetchData);
        
        if (mounted) {
          setData(result);
        }
      } catch (err) {
        if (mounted) {
          setError(err);
        }
      } finally {
        if (mounted) {
          setLoading(false);
        }
      }
    };

    loadData();

    return () => {
      mounted = false;
    };
  }, [cacheKey, fetchData]);

  // 手动刷新
  const refresh = useCallback(async () => {
    setLoading(true);
    try {
      const result = await fetchData();
      setData(result);
      return result;
    } catch (err) {
      setError(err);
      throw err;
    } finally {
      setLoading(false);
    }
  }, [fetchData]);

  return { data, loading, error, refresh };
}

// 批量数据获取Hook
function useBatchContractData(requests, options = {}) {
  const [results, setResults] = useState({});
  const [loading, setLoading] = useState(true);
  const [errors, setErrors] = useState({});

  useEffect(() => {
    let mounted = true;

    const loadBatchData = async () => {
      setLoading(true);

      const batchPromises = requests.map(async (request) => {
        const { key, contractAddress, abi, method, params } = request;
        
        try {
          const contract = new ethers.Contract(contractAddress, abi, provider);
          const result = await contract[method](...(params || []));
          
          return { key, result, error: null };
        } catch (error) {
          return { key, result: null, error };
        }
      });

      try {
        const batchResults = await Promise.allSettled(batchPromises);
        
        if (mounted) {
          const newResults = {};
          const newErrors = {};
          
          batchResults.forEach((settledResult, index) => {
            const request = requests[index];
            
            if (settledResult.status === 'fulfilled') {
              const { key, result, error } = settledResult.value;
              newResults[key] = result;
              if (error) newErrors[key] = error;
            } else {
              newErrors[request.key] = settledResult.reason;
            }
          });
          
          setResults(newResults);
          setErrors(newErrors);
        }
      } finally {
        if (mounted) {
          setLoading(false);
        }
      }
    };

    loadBatchData();

    return () => {
      mounted = false;
    };
  }, [JSON.stringify(requests)]);

  return { results, loading, errors };
}

预加载策略：

// 数据预加载管理器
class DataPreloader {
  constructor(cacheManager) {
    this.cacheManager = cacheManager;
    this.preloadQueue = [];
    this.isPreloading = false;
  }

  // 添加预加载任务
  addPreloadTask(key, fetcher, priority = 1) {
    this.preloadQueue.push({
      key,
      fetcher,
      priority,
      timestamp: Date.now()
    });

    // 按优先级排序
    this.preloadQueue.sort((a, b) => b.priority - a.priority);

    if (!this.isPreloading) {
      this.startPreloading();
    }
  }

  async startPreloading() {
    this.isPreloading = true;

    while (this.preloadQueue.length > 0) {
      const task = this.preloadQueue.shift();
      
      try {
        // 检查缓存中是否已存在
        const existing = await this.cacheManager.get(task.key, null);
        
        if (!existing) {
          // 预加载数据
          await this.cacheManager.get(task.key, task.fetcher);
        }
      } catch (error) {
        console.warn(`预加载失败: ${task.key}`, error);
      }

      // 避免阻塞主线程
      await new Promise(resolve => setTimeout(resolve, 10));
    }

    this.isPreloading = false;
  }

  // 预加载用户可能需要的数据
  preloadUserData(userAddress, tokenAddresses = []) {
    // 预加载ETH余额
    this.addPreloadTask(
      `eth_balance_${userAddress}`,
      async () => {
        return await provider.getBalance(userAddress);
      },
      10
    );

    // 预加载代币余额
    tokenAddresses.forEach(tokenAddress => {
      this.addPreloadTask(
        `token_balance_${tokenAddress}_${userAddress}`,
        async () => {
          const contract = new ethers.Contract(tokenAddress, ERC20_ABI, provider);
          return await contract.balanceOf(userAddress);
        },
        8
      );
    });

    // 预加载交易历史
    this.addPreloadTask(
      `transaction_history_${userAddress}`,
      async () => {
        // 这里可以调用区块链浏览器API或子图
        return await fetchTransactionHistory(userAddress);
      },
      5
    );
  }
}

性能监控和分析：

// 性能监控工具
class DAppPerformanceMonitor {
  constructor() {
    this.metrics = {
      blockchainCalls: 0,
      cacheHits: 0,
      cacheMisses: 0,
      averageResponseTime: 0,
      slowQueries: []
    };
  }

  trackBlockchainCall(method, startTime, endTime, fromCache = false) {
    const duration = endTime - startTime;
    
    this.metrics.blockchainCalls++;
    
    if (fromCache) {
      this.metrics.cacheHits++;
    } else {
      this.metrics.cacheMisses++;
    }

    // 更新平均响应时间
    this.updateAverageResponseTime(duration);

    // 记录慢查询
    if (duration > 5000) { // 5秒以上的查询
      this.metrics.slowQueries.push({
        method,
        duration,
        timestamp: Date.now()
      });
    }

    // 定期清理旧的慢查询记录
    if (this.metrics.slowQueries.length > 100) {
      this.metrics.slowQueries = this.metrics.slowQueries.slice(-50);
    }
  }

  updateAverageResponseTime(newDuration) {
    const totalCalls = this.metrics.blockchainCalls;
    const currentAvg = this.metrics.averageResponseTime;
    
    this.metrics.averageResponseTime = 
      (currentAvg * (totalCalls - 1) + newDuration) / totalCalls;
  }

  getPerformanceReport() {
    const cacheHitRate = this.metrics.cacheHits / 
      (this.metrics.cacheHits + this.metrics.cacheMisses);

    return {
      ...this.metrics,
      cacheHitRate: (cacheHitRate * 100).toFixed(2) + '%',
      averageResponseTime: this.metrics.averageResponseTime.toFixed(0) + 'ms'
    };
  }
}

最佳实践总结：

• 智能缓存： 根据数据特性设计不同的缓存策略
• 批量处理： 尽可能将多个调用合并为批量操作
• 预加载： 预测用户需求，提前加载可能需要的数据
• 性能监控： 持续监控和优化应用性能
• 网络优化： 使用CDN和多节点提高网络访问速度

What is optimistic update? How to implement optimistic UI updates in DApp?

考察点：用户体验优化。

答案：

乐观更新是一种用户体验优化策略，即在等待服务器响应之前就先更新UI界面，假设操作会成功。在DApp中，由于区块链交易确认需要时间，乐观更新能显著改善用户体验，让界面响应更加流畅。

乐观更新应用场景：

• 代币转账： 立即更新余额显示，等待链上确认
• 合约交互： 预先更新合约状态显示
• 投票操作： 即时显示投票结果变化
• NFT交易： 立即更新所有权显示
• 流动性操作： 预先计算和显示流动性变化

乐观更新架构实现：

// 乐观更新管理器
class OptimisticUpdateManager {
  constructor() {
    this.optimisticStates = new Map();
    this.pendingOperations = new Map();
    this.rollbackHistory = new Map();
    this.eventBus = new EventTarget();
  }

  // 执行乐观更新
  async executeOptimisticUpdate(operationId, optimisticState, actualOperation, rollbackFn) {
    try {
      // 保存当前状态用于回滚
      this.rollbackHistory.set(operationId, {
        rollbackFn,
        timestamp: Date.now()
      });

      // 立即应用乐观状态
      this.applyOptimisticState(operationId, optimisticState);
      
      // 执行实际操作
      const result = await actualOperation();
      
      // 操作成功，清理乐观状态
      this.confirmOptimisticUpdate(operationId, result);
      
      return result;
      
    } catch (error) {
      // 操作失败，回滚状态
      this.rollbackOptimisticUpdate(operationId, error);
      throw error;
    }
  }

  applyOptimisticState(operationId, optimisticState) {
    this.optimisticStates.set(operationId, {
      state: optimisticState,
      timestamp: Date.now(),
      status: 'pending'
    });

    this.notifyStateChange(operationId, optimisticState, 'optimistic');
  }

  confirmOptimisticUpdate(operationId, actualResult) {
    const optimisticData = this.optimisticStates.get(operationId);
    
    if (optimisticData) {
      optimisticData.status = 'confirmed';
      optimisticData.actualResult = actualResult;
      
      this.notifyStateChange(operationId, actualResult, 'confirmed');
      
      // 清理资源
      setTimeout(() => {
        this.cleanup(operationId);
      }, 5000);
    }
  }

  rollbackOptimisticUpdate(operationId, error) {
    const rollbackData = this.rollbackHistory.get(operationId);
    
    if (rollbackData) {
      // 执行回滚
      rollbackData.rollbackFn();
      
      this.notifyStateChange(operationId, null, 'rollback', error);
    }

    this.cleanup(operationId);
  }

  notifyStateChange(operationId, state, type, error = null) {
    this.eventBus.dispatchEvent(new CustomEvent('optimisticStateChange', {
      detail: {
        operationId,
        state,
        type,
        error,
        timestamp: Date.now()
      }
    }));
  }

  cleanup(operationId) {
    this.optimisticStates.delete(operationId);
    this.rollbackHistory.delete(operationId);
    this.pendingOperations.delete(operationId);
  }

  // 获取当前的乐观状态
  getOptimisticState(operationId) {
    return this.optimisticStates.get(operationId);
  }

  // 检查是否有待处理的乐观更新
  hasPendingUpdates(filter = null) {
    if (!filter) {
      return this.optimisticStates.size > 0;
    }

    for (const [id, data] of this.optimisticStates.entries()) {
      if (filter(id, data)) {
        return true;
      }
    }
    return false;
  }
}

代币转账乐观更新实现：

// 代币转账乐观更新
class TokenTransferOptimistic {
  constructor(tokenContract, optimisticManager) {
    this.contract = tokenContract;
    this.optimistic = optimisticManager;
    this.balanceCache = new Map();
  }

  async optimisticTransfer(to, amount, userAddress) {
    const operationId = `transfer_${Date.now()}_${Math.random()}`;
    
    // 获取当前余额
    const currentBalance = await this.getCurrentBalance(userAddress);
    const currentRecipientBalance = await this.getCurrentBalance(to);
    
    // 计算乐观状态
    const optimisticState = {
      type: 'TOKEN_TRANSFER',
      sender: userAddress,
      recipient: to,
      amount,
      senderNewBalance: currentBalance.sub(amount),
      recipientNewBalance: currentRecipientBalance.add(amount),
      timestamp: Date.now()
    };

    // 乐观更新函数
    const applyOptimistic = () => {
      this.balanceCache.set(userAddress, optimisticState.senderNewBalance);
      this.balanceCache.set(to, optimisticState.recipientNewBalance);
    };

    // 回滚函数
    const rollback = () => {
      this.balanceCache.set(userAddress, currentBalance);
      this.balanceCache.set(to, currentRecipientBalance);
    };

    // 实际转账操作
    const actualTransfer = async () => {
      const tx = await this.contract.transfer(to, amount);
      
      // 等待交易确认
      const receipt = await tx.wait();
      
      // 获取实际的最新余额
      const [actualSenderBalance, actualRecipientBalance] = await Promise.all([
        this.contract.balanceOf(userAddress),
        this.contract.balanceOf(to)
      ]);

      return {
        txHash: tx.hash,
        receipt,
        senderBalance: actualSenderBalance,
        recipientBalance: actualRecipientBalance
      };
    };

    // 立即应用乐观更新
    applyOptimistic();

    // 执行乐观更新
    return await this.optimistic.executeOptimisticUpdate(
      operationId,
      optimisticState,
      actualTransfer,
      rollback
    );
  }

  async getCurrentBalance(address) {
    // 优先使用缓存的乐观余额
    if (this.balanceCache.has(address)) {
      return this.balanceCache.get(address);
    }

    // 从合约获取实际余额
    const balance = await this.contract.balanceOf(address);
    this.balanceCache.set(address, balance);
    return balance;
  }

  // 清除地址的缓存余额
  clearBalanceCache(address) {
    this.balanceCache.delete(address);
  }
}