VibeAgent 前端开发指南#

// stores/walletStore.ts
import { create } from 'zustand';

interface WalletState {
  address: string | null;
  chainId: number | null;
  isConnected: boolean;
  setAddress: (address: string | null) => void;
  setChainId: (chainId: number | null) => void;
}

export const useWalletStore = create<WalletState>((set) => ({
  address: null,
  chainId: null,
  isConnected: false,
  setAddress: (address) => set({ address, isConnected: !!address }),
  setChainId: (chainId) => set({ chainId }),
}));

// config/wagmi.ts
import { createConfig, http } from 'wagmi';
import { baseSepolia } from 'wagmi/chains';
import { walletConnect, injected, coinbaseWallet } from 'wagmi/connectors';

export const wagmiConfig = createConfig({
  chains: [baseSepolia],
  connectors: [
    injected(),
    walletConnect({ projectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID }),
    coinbaseWallet({ appName: 'VibeAgent' }),
  ],
  transports: {
    [baseSepolia.id]: http(),
  },
});

// hooks/useContract.ts
import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
import { AgentNFTABI } from '@vibeagent/shared/contracts';

export function useMintAgent() {
  const { writeContract, data: hash, isPending } = useWriteContract();
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash });

  const mint = (metadataURI: string) => {
    writeContract({
      address: CONTRACTS.AgentNFT,
      abi: AgentNFTABI,
      functionName: 'mint',
      args: [metadataURI],
    });
  };

  return { mint, isPending, isConfirming, isSuccess, hash };
}

interface AgentCardProps {
  tokenId: number;
  name: string;
  avatar: string;
  skills: string[];
  rating: number;
  status: 'online' | 'offline' | 'busy';
  onHire?: () => void;
}

// config/theme.ts
import type { ThemeConfig } from 'antd';

export const darkTheme: ThemeConfig = {
  token: {
    colorPrimary: '#6366f1',     // Indigo
    colorBgContainer: '#1a1a2e',
    colorBgElevated: '#16213e',
    borderRadius: 8,
    fontFamily: 'Inter, system-ui, sans-serif',
  },
  components: {
    Button: { controlHeight: 40 },
    Card: { paddingLG: 20 },
  },
};

// services/api.ts
import axios from 'axios';
import { useAuthStore } from '../stores/authStore';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL + '/api/v1',
});

api.interceptors.request.use((config) => {
  const token = useAuthStore.getState().token;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default api;