Documentation

Comprehensive documentation for the useElven SDK integrated within our Next.js Dapp Template.

Project Overview

The Next.js Dapp Template is a complete solution for building decentralized applications on the MultiversX blockchain. Built with Next.js, Shadcn UI, and Tailwind CSS, it leverages the useElven SDK for seamless blockchain interactions.

It supports the new Next.js App Router architecture and includes built-in tools for user authentication, wallet connections, transaction processing, and more.

useElven SDK Reference

The useElven SDK provides a set of React hooks and utilities designed to facilitate interactions with the MultiversX blockchain. It includes support for:

Authentication and wallet connection (e.g., LoginModalButton, Authenticated, ProtectedPageWrapper)
Fetching user data and blockchain state
Performing transactions like EGLD transfers and NFT minting

For more detailed information, check out the official useElven SDK documentation.

Next.js Dapp Template Integration

This template integrates the useElven SDK seamlessly with Next.js, taking advantage of modern React patterns and the App Router for improved performance and developer experience.

The starter kit includes examples of various components and hooks to initiate wallet connections, handle user authentication, and interact with smart contracts, making it easy to build and scale your dapp.

Running Locally

You can run the project locally using one of the following methods:

Option 1: Using buildo-begins CLI

npx buildo-begins@latest init

Choose Next.js dapp template from the list.

Option 2: Manual Setup

Clone or download the repo.
Navigate to the project directory: cd nextjs-dapp-template
Install dependencies with npm install.
Copy the environment example file: cp .env.example .env.local.
Run the development server with npm run dev.
For production, build with npm run build and start with npm start.

Environment Variables and Configuration

The project uses a set of environment variables defined in an .env file to manage configuration for different environments. Variables prefixed with NEXT_PUBLIC_ are exposed to the frontend.

Copy the .env.example file to .env.local and modify the values as needed. Key variables include:

NEXT_PUBLIC_MULTIVERSX_CHAIN: Set this to devnet, testnet, or mainnet
NEXT_PUBLIC_WC_PROJECT_ID: Your WalletConnect 2 Project ID
NEXT_PUBLIC_DAPP_HOST: The main URL of your dapp
NEXT_PUBLIC_TRANSFER_ADDRESS: The address used for demo EGLD transfers
NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS: Smart contract address for NFT minting
NEXT_PUBLIC_MINT_FUNCTION_NAME and NEXT_PUBLIC_QUERY_FUNCTION_NAME: Function names for minting operations and token queries
NEXT_PUBLIC_MINT_PAYMENT_PER_TOKEN and NEXT_PUBLIC_EGLD_TRANSFER_AMOUNT: Define token prices and transfer amounts

# .env.local example
NEXT_PUBLIC_MULTIVERSX_CHAIN=devnet
NEXT_PUBLIC_WC_PROJECT_ID=your_walletconnect_project_id
NEXT_PUBLIC_DAPP_HOST=http://localhost:3000
NEXT_PUBLIC_TRANSFER_ADDRESS=your_demo_transfer_address
NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS=your_mint_contract_address
NEXT_PUBLIC_MINT_FUNCTION_NAME=mint
NEXT_PUBLIC_QUERY_FUNCTION_NAME=getTotalTokensLeft
NEXT_PUBLIC_MINT_PAYMENT_PER_TOKEN=0.01
NEXT_PUBLIC_EGLD_TRANSFER_AMOUNT=0.001

Ensure these values are properly configured for your deployed environment to securely manage both public and private settings.