项目介绍(推流) - GDYG/DeFi-Dashboard GitHub Wiki
在Web3时代,如何构建一个既美观又实用的去中心化金融应用?本文将带你深入了解一个完整的DeFi Dashboard项目,从技术选型到实现细节,全面解析现代Web3应用的开发之道。
在区块链技术日益成熟的今天,DeFi(去中心化金融)已经成为Web3生态中最重要的应用场景之一。然而,大多数用户在管理自己的数字资产时,往往需要在多个平台间切换,体验并不理想。
为了解决这个痛点,我开发了一个现代化的DeFi资产管理面板,它不仅能够连接用户的钱包,还能实时显示真实的资产余额、交易记录和投资组合概览。
同时,本文主要目的是帮助你从零开发一个DAPP,让你对目前主流的DAPP开发流程有一个清晰的认识,能够让你学习和上手实践。
- 🔗 无缝钱包集成:支持MetaMask、WalletConnect等主流钱包
- 💰 真实链上数据:直接从以太坊网络获取用户资产信息
- 📊 智能投资组合分析:实时计算总资产价值和持仓分布
- 📝 完整交易历史:展示ETH和ERC20代币的转账记录
- 🌙 现代化UI设计:深色主题配合响应式布局
- ⚡ 高性能数据获取:集成多个API确保数据准确性
{
"核心框架": "Next.js 15 + TypeScript",
"样式方案": "Tailwind CSS",
"Web3集成": "wagmi + RainbowKit",
"状态管理": "Zustand",
"数据获取": "Etherscan API + CoinGecko API,备选:Alchemy和Infura",
"UI组件": "Lucide React"
}
Next.js 15作为React的生产级框架,为我们提供了:
- 服务端渲染(SSR):提升首屏加载速度和SEO表现
- API路由:内置API处理能力,便于集成第三方服务,BFF便于存储RPC服务的私钥key,避免报漏给客户端
- 自动代码分割:优化包体积,提升用户体验
- TypeScript原生支持:类型安全,减少运行时错误
wagmi + RainbowKit组合是目前最优雅的Web3集成方案:
// 钱包连接配置示例
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { mainnet, sepolia } from 'wagmi/chains';
const config = getDefaultConfig({
appName: 'DeFi Dashboard',
projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
chains: [mainnet, sepolia],
});
- wagmi:提供React Hooks形式的Web3功能,类型安全且易于使用
- RainbowKit:美观的钱包连接UI组件,支持多种钱包
- viem:现代化的以太坊客户端库,性能优异
为了确保数据的准确性和可靠性,采用了多API源聚合的策略:
// API服务抽象层
async getAssets(address: string) {
// 2. 从Etherscan获取ETH余额和ERC20代币余额
ethService.getAccountBalance(address)
ethService.getTokenBalance(address, tokenContracts.USDC),
ethService.getTokenBalance(address, tokenContracts.UNI),
ethService.getTokenBalance(address, tokenContracts.LINK),
// 3. 从CoinGecko获取实时价格
coinGeckoService.getEthereumPrice()
coinGeckoService.getTokenPrices(['uniswap', 'chainlink'])
}
// 同时,RPC服务支持添加其他服务提供商服务以及Hardhat本地网络
createStrategyOnClient(chainId: number): Promise<EtherscanService> {
if (chainId === parseInt(process.env.NEXT_PUBLIC_HARDHAT_CHAIN_ID || '31337', 10)) {
return new EtherscanService(new RpcService());
}
const network = chainId === 11155111 ? 'SEPOLIA' : 'MAINNET'
return new EtherscanService(new EtherscanStrategy(API_ENDPOINTS[ETHERSCAN_NETWORK[network]]));
}
使用Zustand进行轻量级状态管理:
interface WalletStore {
address: string | null;
balance: string;
assets: Asset[];
transactions: Transaction[];
isLoading: boolean;
setAddress: (address: string) => void;
updateAssets: (assets: Asset[]) => void;
refreshData: () => Promise<void>;
}
const useWalletStore = create<WalletStore>((set, get) => ({
// 状态定义和方法实现
}));
钱包连接是Web3应用的入口,项目通过RainbowKit实现了优雅的连接体验:
// 钱包连接组件
export function WalletConnection() {
const { address, isConnected } = useAccount();
const { disconnect } = useDisconnect();
return (
<div className="flex items-center gap-4">
{isConnected ? (
<div className="flex items-center gap-2">
<span className="text-sm text-gray-400">
{formatAddress(address)}
</span>
<button onClick={() => disconnect()}>
断开连接
</button>
</div>
) : (
<ConnectButton />
)}
</div>
);
}
通过集成多个API源,确保数据的准确性:
// 资产数据获取逻辑
async function fetchUserAssets(address: string) {
try {
// 并行获取数据以提升性能
const [ethBalance, tokenBalances, prices] = await Promise.all([
getETHBalance(address),
getTokenBalances(address),
getTokenPrices()
]);
// 数据聚合和计算
const assets = tokenBalances.map(token => ({
...token,
price: prices[token.symbol],
value: calculateValue(token.balance, prices[token.symbol])
}));
return { ethBalance, assets };
} catch (error) {
console.error('获取资产数据失败:', error);
throw error;
}
}
通过Etherscan API获取完整的交易历史:
// 交易记录组件
export function TransactionHistory({ address }: { address: string }) {
const [transactions, setTransactions] = useState<Transaction[]>([]);
useEffect(() => {
async function loadTransactions() {
const [ethTxs, tokenTxs] = await Promise.all([
getETHTransactions(address),
getTokenTransactions(address)
]);
// 合并并排序交易记录
const allTxs = [...ethTxs, ...tokenTxs]
.sort((a, b) => b.timestamp - a.timestamp);
setTransactions(allTxs);
}
loadTransactions();
}, [address]);
return (
<div className="space-y-4">
{transactions.map(tx => (
<TransactionCard key={tx.hash} transaction={tx} />
))}
</div>
);
}
项目采用了现代化的深色主题设计。
通过Tailwind CSS的响应式工具类,确保在各种设备上都有良好的体验:
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{assets.map(asset => (
<AssetCard
key={asset.symbol}
asset={asset}
className="transform hover:scale-105 transition-transform"
/>
))}
</div>
优雅的加载状态和错误处理提升用户体验:
// 加载状态组件
export function LoadingSpinner() {
return (
<div className="flex items-center justify-center p-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
<span className="ml-2 text-gray-400">加载中...</span>
</div>
);
}
// 错误边界处理(未使用)
export function ErrorBoundary({ children }: { children: React.ReactNode }) {
return (
<ErrorBoundaryComponent
fallback={<ErrorMessage message="出现了一些问题,请刷新页面重试" />}
>
{children}
</ErrorBoundaryComponent>
);
}
// 使用React Query进行数据缓存
const { data: assets, isLoading } = useQuery({
queryKey: ['assets', address],
queryFn: () => fetchUserAssets(address),
staleTime: 30000, // 30秒内数据视为新鲜
cacheTime: 300000, // 5分钟缓存时间
});
// 动态导入大型组件
const TransactionHistory = lazy(() => import('./TransactionHistory'));
function Dashboard() {
return (
<Suspense fallback={<LoadingSpinner />}>
<TransactionHistory address={address} />
</Suspense>
);
}
BFF保障私钥不会报漏管费客户端,客户端只获取公开的区块链数据,不涉私钥及签名操作,均放在服务端调用:
// 安全的数据获取方式
clientApi.ts
src/app/api/xxx
敏感信息通过环境变量管理:
# .env.local
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_project_id
ETHERSCAN_API_KEY=your_api_key
NEXT_PUBLIC_ALCHEMY_API_KEY=your_alchemy_key
// 地址格式验证
function isValidAddress(address: string): boolean {
return /^0x[a-fA-F0-9]{40}$/.test(address);
}
// 安全的API调用
async function safeApiCall<T>(apiCall: () => Promise<T>): Promise<T | null> {
try {
return await apiCall();
} catch (error) {
console.error('API调用失败:', error);
return null;
}
}
可以使用Hardhat启用本地网络,本地网络测试合约和交互,便于多钱包账户测试和交易测试。
与许多演示项目不同,本项目的Dashboard展示的是真实的区块链数据,用户连接钱包后能看到实际的资产余额和交易记录。
通过整合Etherscan、Alchemy、Infura和CoinGecko等多个数据源,确保数据的准确性和可靠性。
采用最新的Web3技术栈,代码结构清晰,易于维护和扩展。
从钱包连接到数据展示,每个环节都经过精心设计,提供流畅的用户体验。
- 🔄 支持更多ERC20代币
- 📈 集成价格图表和历史数据
- 🔄 添加DeFi协议集成(Uniswap、Compound等)
- 🤖 AI驱动的投资建议
- 🔗 跨链资产管理
- 📊 高级分析工具
- 🛡️ 安全监控和风险评估
这个项目对于想要学习Web3开发的开发者来说具有很高的学习价值:
- 完整的Web3技术栈:从前端到区块链集成的完整实现
- 真实项目经验:处理真实数据和用户场景
- 最佳实践示例:代码结构、错误处理、性能优化等
- 现代化开发流程:TypeScript、ESLint、自动化部署等
想要体验或学习这个项目?只需几个简单步骤:
# 1. 克隆项目
git clone <repository-url>
cd dapp-demo
# 2. 安装依赖
npm install
# 3. 配置环境变量
cp env.example中的.env.local到.env.local
# 编辑 .env.local 填入API密钥
# 4. 启动开发服务器
npm run dev
在Web3技术快速发展的今天,构建一个既实用又美观的DeFi应用需要综合考虑技术选型、用户体验、安全性等多个方面。这个DeFi Dashboard项目展示了如何使用现代化的技术栈来构建高质量的Web3应用。
无论你是Web3开发的新手还是经验丰富的开发者,这个项目都能为你提供有价值的参考和学习材料。让我们一起学习Web3生态的发展,构建更好的去中心化应用!
项目地址: GitHub Repository 在线演示: Live Demo 技术交流: 欢迎提交Issue和PR
如果这个项目对你有帮助,别忘了给个⭐️支持一下!,努力积攒⭐️中...