## Requirements
Before you begin, you'll need:
1. **Moralis API Key**: Get it from [Moralis Dashboard](https://admin.moralis.io/)
2. **Reown Project ID**: Get it from [Reown Cloud](https://cloud.reown.com/)
* You can also check out the [Reown AppKit guide for Monad](http://docs.monad.xyz/guides/reown-guide)
## Step 1: Initializing the project
### Create Nextjs app
```
npx create-next-app@latest portfolio-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
```
### Install ShadCN components
```
npx shadcn@latest add button card tabs
```
### Install Tanstack React Query (for better async state management)
```
npm install @tanstack/react-query
```
## Step 2: Environment Setup
Add your Moralis API key and Reown Project ID to `.env.local`:
```bash theme={null}
MORALIS_API_KEY=
NEXT_PUBLIC_PROJECT_ID=
```
## Step 3: Connect Wallet functionality
### Create the `ContextProvider` component
Create a folder named `context` in the `src` directory, inside the folder create a file named `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 (
Create a file named `Header.tsx` in `src/components/layout` folder and import the newly created `ConnectButton` component into it.
```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` component will display token details like name, symbol, logo, usd price, amount of tokens in connected wallet and the usd value.
Create a file named `TokenRow.tsx` in the folder `src/components/portfolio/tokens/`
```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)}
) : (-
)}
Create a `TokenList.tsx` file in `src/components/portfolio` folder and import the newly created `TokenRow.tsx` component in it.
```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 (
The `PortfolioDashboard` component will display the `TokenList` and can be further modified to have more components presenting information that you would like your user to see.
```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 (