Skip to main content

Building a Frontend Interface

Now let's build a web interface for users to interact with our donation contract. The frontend example uses Next.js with NEAR Wallet Selector to create a complete donation experience.

Project Structure​

The frontend directory contains a complete Next.js application:

Configuration​

Configure your contract address and network settings:

Wallet Integration​

The app supports multiple wallet types through NEAR Wallet Selector:

Complete wallet configuration with all supported wallet types:

Donation Form Component​

The donation form allows users to select preset amounts or enter custom donations:

The form includes USD-to-NEAR conversion using CoinGecko API:

Handling Donation Transactions​

The submit handler processes donations and updates the UI:

Displaying Donation History​

The donations table shows all contributions with pagination:

The component handles pagination and fetches donation data:

User's Personal Donations​

Track and display the current user's total donations:

Provide wallet connection functionality:

Main Page Layout​

The home page combines all components:

Donation Box Component​

The donation box handles wallet connection states:

Running the Frontend​

Start the development server:

cd frontend
yarn install
yarn dev

Visit http://localhost:3000 to see your donation interface.

Key Frontend Features​

Multi-Wallet Support: Supports NEAR native wallets and Ethereum wallets through Chain Abstraction.

Real-time Price Conversion: Converts USD amounts to NEAR using live price feeds.

Transaction Handling: Graceful error handling and transaction state management.

Responsive Design: Mobile-friendly interface using Bootstrap.

Pagination: Efficient handling of large donation lists.

Production Deployment​

The frontend is configured for GitHub Pages deployment:

Deploy with GitHub Actions:

Styling​

The application uses Bootstrap for consistent styling:

Testing the Interface​

Test the complete user flow:

  1. Wallet Connection: Try different wallet types from the selector
  2. Donation Flow: Test preset amounts and custom donations
  3. Price Conversion: Verify USD-to-NEAR conversion accuracy
  4. Transaction States: Test loading, success, and error states
  5. Data Updates: Confirm donation tables update after transactions
  6. Mobile Experience: Test responsive design on various devices

Live Demo​

The frontend is deployed and available at:

Next Steps​

With your complete donation application, you can extend it with:

  • Donation Goals: Set funding targets and progress tracking
  • Donor Recognition: Leaderboards and achievement systems
  • Recurring Donations: Subscription-based giving
  • Multi-Currency: Support for NEAR fungible tokens
  • Analytics Dashboard: Detailed donation metrics and insights
  • Mobile App: React Native version for mobile users

This donation pattern serves as a foundation for crowdfunding platforms, tip jars, charity applications, and many other token-handling use cases on NEAR.