A simple decentralized application (dApp) built with Next.js that interacts with a counter smart contract on the Nexus Testnet.
This project demonstrates a basic integration between a web application and the Nexus blockchain. It features a smart contract that maintains a counter which can only be incremented, showcasing fundamental blockchain interactions like:
- Smart contract deployment and interaction
- Wallet connection
- Transaction signing
- Event listening
- State updates
- Node.js (v18 or higher)
- MetaMask browser extension
- NEX for gas fees (get from the Nexus faucet)
- A code editor (VS Code or Cursor recommended)
To interact with the Nexus testnet, you'll need testnet NEX tokens for gas fees. These can be obtained from the Nexus Testnet Faucet at https://hub.nexus.xyz.
The Counter smart contract (contracts/src/Counter.sol) implements:
- A private counter variable
- An increment function that adds 1 to the counter
- A getter function to read the current count
- An event emission after each increment
The current Counter contract is deployed to the Nexus testnet at address 0x6DDc7dd77CbeeA3445b70CB04E0244BBa245e011. See the code below for the contract's source code.
First get ur own smart contract:
- Go to: https://remix.ethereum.org/
- Create new file name it (
contracts/src/Counter.sol) - paste solidity code below
- Connect your MetaMask, deploy your smart contract, and save it from the transaction below.
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract Counter {
uint256 private count;
event CountIncremented(uint256 newCount);
function increment() public {
count += 1;
emit CountIncremented(count);
}
function getCount() public view returns (uint256) {
return count;
}
}- Clone and install dependencies:
git clone https://github.com/Gmhax/nexus-counter-app
cd nexus-counter-app
npm install- locate the hardhat/frontend:
Configure the hardhat/frontend.
Modify the contracts/hardhat.config.ts file:
const PRIVATE_KEY = process.env.PRIVATE_KEY || "ur private key" ;Modify the frontend/src/app/page.tsx file to use the deployed contract address:
const CONTRACT_ADDRESS = 'your_deployed_contract_address' // You'll need to update this after deploying to Nexus- Deploy the smart contract:
cd contracts
npx hardhat run scripts/deploy.ts --network nexus- Start the NextJS development server:
cd /workspaces/codespaces-blank/nexus-counter-app/frontend
npm run dev-
Connect Your Wallet:
- Ensure MetaMask is installed
- Switch to the Nexus testnet network
- Click "Connect Wallet" in the dApp
- Approve the connection in MetaMask
-
Interact with the Counter:
- View the current count
- Click "Increment Counter" to increase the value
- Confirm the transaction in MetaMask
- Wait for transaction confirmation
- See the updated count
- Next.js 13+ (React framework)
- TypeScript for type safety
- Tailwind CSS for styling
- ethers.js for blockchain interaction
- web3modal for wallet connection
- Network: Nexus Testnet
- Smart Contract Language: Solidity ^0.8.0
- Contract Framework: Hardhat
- Contract Interaction: ethers.js
-
Transaction Failures:
- Ensure you have enough NEX for gas
- Check if MetaMask is connected to Nexus testnet
-
Wallet Connection Issues:
- Try refreshing the page
- Ensure MetaMask is unlocked
- Clear browser cache if persistent
this-repo/
├── contracts/
│ └── contracts/
│ └── Counter.sol
├── frontend/
│ ├── pages/
│ │ └── index.tsx
│ └── package.json
└── package.json
- Make code changes
- Test contracts with
npx hardhat test - Deploy to Nexus testnet
- Test frontend with
npm run dev - Ensure MetaMask is connected to Nexus testnet
- Fork the repository
- Create a feature branch
- Commit changes
- Push to the branch
- Open a pull request
This project is licensed under the MIT License - see the LICENSE file for details.