## 要求
在开始之前，您需要：
1. **Moralis API 密钥**：从 [Moralis 仪表板](https://admin.moralis.io/)获取
2. **Reown Project ID**：从 [Reown Cloud](https://cloud.reown.com/)获取
* 您也可以查看 [Monad 的 Reown AppKit 指南](http://docs.monad.xyz/guides/reown-guide)
## 步骤 1：初始化项目
### 创建 Nextjs 应用
```
npx create-next-app@latest portfolio-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
```
### 安装 ShadCN 组件
```
npx shadcn@latest add button card tabs
```
### 安装 Tanstack React Query（用于更好的异步状态管理）
```
npm install @tanstack/react-query
```
## 步骤 2：环境设置
将您的 Moralis API 密钥和 Reown Project ID 添加到 `.env.local`：
```bash theme={null}
MORALIS_API_KEY=
NEXT_PUBLIC_PROJECT_ID=
```
## 步骤 3：连接钱包功能
### 创建 `ContextProvider` 组件
在 `src` 目录下创建一个名为 `context` 的文件夹，在该文件夹内创建一个名为 `index.ts` 的文件。
```ts title="src/context/index.ts" theme={null}
"use client";
import { wagmiAdapter, projectId } from "@/config";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createAppKit } from "@reown/appkit/react";
import { monad } from "@reown/appkit/networks";
import React, { type ReactNode } from "react";
import { WagmiProvider, type Config } from "wagmi";
// Set up queryClient
const queryClient = new QueryClient();
if (!projectId) {
throw new Error("NEXT_PUBLIC_PROJECT_ID is not set");
}
// Set up metadata
const metadata = {
name: "Portfolio Viewer",
description: "View your crypto portfolio on Monad blockchain",
url: "your-app-url",
icons: ["your-app-icon"],
};
// Create the modal
const modal = createAppKit({
adapters: [wagmiAdapter],
projectId,
networks: [monad],
defaultNetwork: monad,
metadata: metadata,
features: {
analytics: true,
},
});
export function ContextProvider({ children }: { children: ReactNode }) {
return (
在 `src/components/layout` 文件夹中创建一个名为 `Header.tsx` 的文件，并将新创建的 `ConnectButton` 组件导入其中。
```tsx title="src/components/layout/Header.tsx" theme={null}
"use client";
import { ConnectButton } from "../wallet/ConnectButton";
import { ExternalLink } from "lucide-react";
export function Header() {
return (
`TokenRow` 组件将显示代币详情，例如名称、符号、logo、美元价格、已连接钱包中的代币数量以及美元价值。
在文件夹 `src/components/portfolio/tokens/` 中创建一个名为 `TokenRow.tsx` 的文件
```tsx title="src/components/portfolio/tokens/TokenRow.tsx" theme={null}
import Image from "next/image";
export function TokenRow({ token }) {
return (
{token.symbol}
{token.name}
${formatCurrency(token.usdPrice, 4)}
) : (-
)}{formatCurrency(token.balanceFormatted, 2)}
{formatUSD(token.usdValue)}
) : (-
)}
在 `src/components/portfolio` 文件夹中创建 `TokenList.tsx` 文件，并将新创建的 `TokenRow.tsx` 组件导入其中。
```tsx title="src/components/portfolio/TokenList.tsx" theme={null}
import { TokenRow } from "./tokens/TokenRow";
export function TokenList({
tokens,
isLoading,
error,
showLowValueTokens = false,
}) {
if (isLoading) {
return (
// Loading state
);
}
if (error) {
return (
// Error state
);
}
if (tokens.length === 0) {
return (
// Empty state
);
}
return (
`PortfolioDashboard` 组件将显示 `TokenList`，并可以进一步修改以包含更多组件，展示您希望用户看到的信息。
```tsx title="src/components/portfolio/PortfolioDashboard.tsx" theme={null}
"use client";
import { useState, useEffect } from "react";
import { useAccount } from "wagmi";
import { useTokenBalances } from "@/hooks/useTokenBalances";
import { TokenList } from "./TokenList";
export function PortfolioDashboard() {
const { address, isConnected } = useAccount();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const {
data: tokens = [],
isLoading,
error,
refetch,
isFetching,
} = useTokenBalances(address, isConnected);
// Prevent hydration mismatch - don't render until mounted
if (!mounted) {
return null;
}
// Not connected state
if (!isConnected) {
return (
// UI for wallet not connected state
);
}
return (