11 | Comprehensive documentation for the useElven SDK integrated within 12 | our Next.js Dapp Template. 13 |
14 |20 | The Next.js Dapp Template is a complete solution for building 21 | decentralized applications on the MultiversX blockchain. Built with 22 | Next.js, Shadcn UI, and Tailwind CSS, it leverages the useElven SDK 23 | for seamless blockchain interactions. 24 |
25 |26 | It supports the new Next.js App Router architecture and includes 27 | built-in tools for user authentication, wallet connections, 28 | transaction processing, and more. 29 |
30 |36 | The useElven SDK provides a set of React hooks and utilities 37 | designed to facilitate interactions with the MultiversX blockchain. 38 | It includes support for: 39 |
40 |LoginModalButton, Authenticated,{' '}
44 | ProtectedPageWrapper)
45 | 50 | For more detailed information, check out the official{' '} 51 | 56 | useElven SDK documentation 57 | 58 | . 59 |
60 |68 | This template integrates the useElven SDK seamlessly with Next.js, 69 | taking advantage of modern React patterns and the App Router for 70 | improved performance and developer experience. 71 |
72 |73 | The starter kit includes examples of various components and hooks to 74 | initiate wallet connections, handle user authentication, and 75 | interact with smart contracts, making it easy to build and scale 76 | your dapp. 77 |
78 |84 | You can run the project locally using one of the following methods: 85 |
86 |87 | Option 1: Using buildo-begins CLI 88 |
89 |
90 | {`npx buildo-begins@latest init`}
91 |
92 | Choose Next.js dapp template from the list.
93 |Option 2: Manual Setup
94 |cd nextjs-dapp-template
99 | npm install.
102 | cp .env.example .env.local.
106 | npm run dev.
109 | npm run build and start
112 | with npm start.
113 |
123 | The project uses a set of environment variables defined in an{' '}
124 | .env file to manage configuration for different
125 | environments. Variables prefixed with NEXT_PUBLIC_ are
126 | exposed to the frontend.
127 |
129 | Copy the .env.example file to .env.local{' '}
130 | and modify the values as needed. Key variables include:
131 |
NEXT_PUBLIC_MULTIVERSX_CHAIN: Set this to{' '}
135 | devnet, testnet, or mainnet
136 | NEXT_PUBLIC_WC_PROJECT_ID: Your WalletConnect 2
139 | Project ID
140 | NEXT_PUBLIC_DAPP_HOST: The main URL of your dapp
143 | NEXT_PUBLIC_TRANSFER_ADDRESS: The address used for
146 | demo EGLD transfers
147 | NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS: Smart
150 | contract address for NFT minting
151 | NEXT_PUBLIC_MINT_FUNCTION_NAME and{' '}
154 | NEXT_PUBLIC_QUERY_FUNCTION_NAME: Function names for
155 | minting operations and token queries
156 | NEXT_PUBLIC_MINT_PAYMENT_PER_TOKEN and{' '}
159 | NEXT_PUBLIC_EGLD_TRANSFER_AMOUNT: Define token prices
160 | and transfer amounts
161 |
164 | {`# .env.local example
165 | NEXT_PUBLIC_MULTIVERSX_CHAIN=devnet
166 | NEXT_PUBLIC_WC_PROJECT_ID=your_walletconnect_project_id
167 | NEXT_PUBLIC_DAPP_HOST=http://localhost:3000
168 | NEXT_PUBLIC_TRANSFER_ADDRESS=your_demo_transfer_address
169 | NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS=your_mint_contract_address
170 | NEXT_PUBLIC_MINT_FUNCTION_NAME=mint
171 | NEXT_PUBLIC_QUERY_FUNCTION_NAME=getTotalTokensLeft
172 | NEXT_PUBLIC_MINT_PAYMENT_PER_TOKEN=0.01
173 | NEXT_PUBLIC_EGLD_TRANSFER_AMOUNT=0.001`}
174 |
175 | 176 | Ensure these values are properly configured for your deployed 177 | environment to securely manage both public and private settings. 178 |
179 |{signature}
45 |