Monad Portfolio Viewer using Moralis API

A comprehensive crypto portfolio tracker built for Monad blockchain. View your tokens, NFTs, DeFi positions, token approvals, and transaction history all in one beautiful dashboard. Built with Next.js 14, Moralis API, and Reown AppKit (WalletConnect v3).

Features

• 🔗 Wallet connection via Reown/WalletConnect
• 💰 Display token balances (native MON + ERC20 tokens)
• 📊 Portfolio total value summary with asset allocation
• 🖼️ NFT gallery with spam filtering
• 🔐 Token approvals
• 📈 DeFi positions tracking
• 📜 Transaction history viewer
• 🔄 Real-time refresh capability
• 🎚️ Low-value token filtering
• 🎨 Beautiful, responsive UI with Tailwind CSS and animations

Tech Stack

• Framework: Next.js 14 (App Router) + TypeScript
• Styling: Tailwind CSS + Framer Motion (animations)
• Blockchain Data: Moralis API
• Wallet Connection: Reown AppKit (WalletConnect v3)
• Target Chain: Monad Mainnet (Chain ID: 143)
• State Management: TanStack Query (React Query)
• UI Components: Custom components with Radix UI primitives

Prerequisites

Before you begin, you'll need:

1. Moralis API Key: Get it from Moralis Dashboard
2. Reown Project ID: Get it from Reown Cloud

Setup Instructions

1. Install Dependencies

npm install

2. Configure Environment Variables

Update the .env.local file with your API keys:

# Moralis API Configuration
MORALIS_API_KEY=your_moralis_api_key_here

# Reown/WalletConnect Configuration
NEXT_PUBLIC_PROJECT_ID=your_reown_project_id_here

# Monad RPC Configuration (already configured)
NEXT_PUBLIC_MONAD_RPC_URL=https://rpc.monad.xyz
NEXT_PUBLIC_MONAD_CHAIN_ID=143

3. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

How to Use

1. Connect Wallet: Click the "Connect Wallet" button in the header
2. Select Monad: Make sure you're connected to Monad mainnet (Chain ID: 143)
3. View Portfolio: Your portfolio summary with total value and asset allocation will load automatically
4. Explore Tabs:
   • Tokens: View your token balances with USD values and asset allocation. Toggle to show/hide low-value tokens.
   • Positions: Track your DeFi positions across protocols
   • NFTs: Browse your NFT collection with spam filtering
   • Approvals: Manage token approvals and revoke if needed
   • History: View your transaction history
5. Refresh Data: Click the refresh button in the portfolio summary to update all data

API Endpoints

The app uses Next.js API routes to interact with the Moralis API. All endpoints are located in src/app/api/wallet/:

• /api/wallet/balances - Fetches ERC20 token balances for a wallet
• /api/wallet/nfts - Retrieves NFTs owned by a wallet
• /api/wallet/approvals - Gets token approvals granted by the wallet
• /api/wallet/defi-positions - Fetches DeFi positions across protocols
• /api/wallet/history - Retrieves transaction history for the wallet

Each endpoint:

• Accepts wallet address as a query parameter
• Uses server-side Moralis API key for security
• Returns formatted data with error handling
• Supports optional pagination and filtering parameters

Project Structure

moralis-portfolio-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx                           # Root layout with providers
│   │   ├── page.tsx                             # Dashboard page
│   │   ├── globals.css                          # Tailwind imports
│   │   └── api/
│   │       └── wallet/
│   │           ├── balances/route.ts            # Token balances API
│   │           ├── nfts/route.ts                # NFTs API
│   │           ├── approvals/route.ts           # Token approvals API
│   │           ├── defi-positions/route.ts      # DeFi positions API
│   │           └── history/route.ts             # Transaction history API
│   │
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Header.tsx                       # Header with connect button
│   │   │   ├── Footer.tsx                       # Footer component
│   │   │   └── Container.tsx                    # Max-width wrapper
│   │   │
│   │   ├── wallet/
│   │   │   └── ConnectButton.tsx                # Reown connect button
│   │   │
│   │   ├── portfolio/
│   │   │   ├── PortfolioDashboard.tsx           # Main dashboard with tabs
│   │   │   ├── PortfolioSummary.tsx             # Total value card
│   │   │   ├── PortfolioTabNavigation.tsx       # Tab navigation
│   │   │   ├── TokenList.tsx                    # Token list container
│   │   │   ├── NFTGrid.tsx                      # NFT grid container
│   │   │   ├── NFTCard.tsx                      # Individual NFT card
│   │   │   ├── TokenApprovalsList.tsx           # Approvals list
│   │   │   ├── DefiPositionsList.tsx            # DeFi positions list
│   │   │   ├── DefiPositionCard.tsx             # DeFi position card
│   │   │   ├── TransactionList.tsx              # Transaction history
│   │   │   ├── tokens/
│   │   │   │   ├── TokenRow.tsx                 # Token table row
│   │   │   │   ├── TokenTableHeader.tsx         # Token table header
│   │   │   │   ├── TokenSkeleton.tsx            # Token loading state
│   │   │   │   └── AssetAllocation.tsx          # Asset allocation chart
│   │   │   ├── approvals/
│   │   │   │   ├── ApprovalRow.tsx              # Approval table row
│   │   │   │   ├── ApprovalTableHeader.tsx      # Approval table header
│   │   │   │   └── ApprovalSkeleton.tsx         # Approval loading state
│   │   │   └── transactions/
│   │   │       ├── TransactionRow.tsx           # Transaction table row
│   │   │       ├── TransactionTableHeader.tsx   # Transaction table header
│   │   │       ├── TransactionSkeleton.tsx      # Transaction loading state
│   │   │       └── TransactionIcon.tsx          # Transaction type icon
│   │   │
│   │   └── ui/
│   │       ├── Card.tsx                         # Card component
│   │       ├── Button.tsx                       # Button component
│   │       ├── Skeleton.tsx                     # Skeleton loader
│   │       ├── EmptyState.tsx                   # Empty state component
│   │       ├── Tabs.tsx                         # Tab components
│   │       ├── Switch.tsx                       # Toggle switch
│   │       ├── ConnectIcon.tsx                  # Connect wallet icon
│   │       └── CheckIcon.tsx                    # Check icon
│   │
│   ├── config/
│   │   └── index.tsx                            # Wagmi/Reown config
│   │
│   ├── context/
│   │   └── index.tsx                            # App context provider
│   │
│   ├── lib/
│   │   ├── moralis.ts                           # Moralis API client
│   │   └── utils.ts                             # Utilities
│   │
│   ├── hooks/
│   │   ├── useTokenBalances.ts                  # Token data hook
│   │   ├── useNFTs.ts                           # NFT data hook
│   │   ├── useTokenApprovals.ts                 # Approvals data hook
│   │   ├── useDefiPositions.ts                  # DeFi positions hook
│   │   └── useWalletHistory.ts                  # Transaction history hook
│   │
│   └── types/
│       ├── moralis.ts                           # Moralis types
│       └── portfolio.ts                         # Portfolio types

Important Notes

Build Errors

• Run npm install to ensure all dependencies are installed
• Delete .next folder and rebuild: rm -rf .next && npm run build

Development

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linter
npm run lint

Deployment

This app is ready to deploy to Vercel:

1. Push your code to GitHub
2. Import the repository in Vercel
3. Add your environment variables in Vercel dashboard
4. Deploy!

License

MIT

Support

For issues or questions, please open an issue on GitHub.