LogoLogo
  • Welcome
    • About ENI
  • Getting Started
    • Quickstart
      • Account Structure
      • Token Standards
      • Gas
    • Divergence from Ethereum
    • Transactions
      • Creating Transaction
    • Governance
      • Proposals
    • Oracles
  • Build
    • Setup and Installation
    • Smart Contracts
      • EVM (General)
      • EVM (CLI)
      • Querying State
    • Frontend Development
      • Overview
      • How to Deploy Your First dApp
    • Ecosystem
      • Tools and Resources
      • Resources
  • Node
    • Getting Started
    • Node Operators Guide
    • Validator Operations Guide
    • Advanced Configuration & Monitoring
    • Technical Reference
  • Reference
    • Overview
    • enid
    • CLI
      • enid add-genesis-account
      • enid blocktest
      • enid collect-gentxs
      • enid compact
      • enid config
      • enid debug
      • enid export
      • enid gentx
      • enid help
      • enid init
      • enid keys
        • enid keys delete
        • enid keys add
        • enid keys export
        • enid keys import
        • enid keys list
        • enid keys mnemonic
        • enid keys parse
        • enid keys show
      • enid latest_version
      • enid migrate
      • enid prune
      • enid query
        • enid query accesscontrol
        • enid query upgrade
        • enid query account
        • enid query auth
        • enid query bank
        • enid query block
        • enid query authz
        • enid query distribution
        • enid query epoch
        • enid query evidence
        • enid query evm
        • enid query feegrant
        • enid query ibc-transfer
        • enid query gov
        • enid query ibc
        • enid query mint
        • enid query oracle
        • enid query params
        • enid query slashing
        • enid query staking
        • enid query tendermint-validator-set
        • enid query tokenfactory
        • enid query tx
        • enid query txs
      • enid rollback
      • enid start
      • enid status
      • enid tendermint
      • enid tools
      • enid tx
      • enid validate-genesis
      • enid version
Powered by GitBook
On this page
  • 1. Environment Setup and Toolchain Configuration
  • 2. Smart Contract Development and Deployment
  • 3. Frontend Integration Development
  • 4. Testing and Validation
  • 5. Advanced Deployment Options
  • 6. Best Practice Recommendations
  1. Build
  2. Frontend Development

How to Deploy Your First dApp

1. Environment Setup and Toolchain Configuration

1.1 Development Environment Requirements

  • Node.js v18+ (recommended to use nvm for version management)

  • Go 1.23+ (for Cosmos SDK-related toolchain)

  • MetaMask wallet (configured with custom RPC)

  • Git (version control)

1.2 Chain Node Configuration

git clone https://github.com/eni-chain/go-eni
cd go-eni
make install

1.3 MetaMask Network Configuration

  1. Open MetaMask -> Networks -> Add Network

  2. Fill in the parameters:

  • Network Name: ENI Mainnet

  • RPC URL: https://rpc.eniac.network

  • ChainID: 173

  • Symbol: ENI

  • Block Explorer: https://scan.eniac.network

1.4 Development Tools Installation

# Install Hardhat
npm install --save-dev hardhat
npx hardhat init
# Select TypeScript template

2. Smart Contract Development and Deployment

2.1 Creating a Sample Contract

// contracts/MoodDiary.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

contract MoodDiary {
    string private mood;

    event MoodUpdated(address indexed user, string newMood);

    function setMood(string memory _mood) public {
        mood = _mood;
        emit MoodUpdated(msg.sender, _mood);
    }

    function getMood() public view returns (string memory) {
        return mood;
    }
}

2.2 Deployment Configuration (hardhat.config.ts)

import { HardhatUserConfig } from "hardhat/config";

const config: HardhatUserConfig = {
  solidity: "0.8.20",
  networks: {
    yourchain: {
      url: "https://rpc.eniac.network",
      accounts: [process.env.PRIVATE_KEY!],
      chainId: 173,
    }
  }
};

2.3 Deployment Script

// scripts/deploy.ts
import { ethers } from "hardhat";

async function main() {
  const MoodDiary = await ethers.getContractFactory("MoodDiary");
  const moodDiary = await MoodDiary.deploy();

  await moodDiary.waitForDeployment();
  console.log("Contract deployed to:", await moodDiary.getAddress());
}

main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

2.4 Execute Deployment

# Compile the contract
npx hardhat compile

# Deploy to mainnet (requires PRIVATE_KEY environment variable configured beforehand)
npx hardhat run scripts/deploy.ts --network $NETWORK_NAME

Example output: Contract deployed to: 0x3c45B8...dC7


3. Frontend Integration Development

3.1 Initialize React Project

npx create-react-app dapp-frontend --template typescript
cd dapp-frontend
npm install ethers @metamask/providers

3.2 Core Interaction Logic

// src/services/contract.ts
import { ethers } from "ethers";

const contractAddress = "0x3c45B8...dC7";
const abi = [...]; // Obtained from artifacts/contracts/MoodDiary.sol/MoodDiary.json

export async function getMood() {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const contract = new ethers.Contract(contractAddress, abi, provider);
  return await contract.getMood();
}

export async function setMood(newMood: string) {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  const contract = new ethers.Contract(contractAddress, abi, signer);
  const tx = await contract.setMood(newMood);
  return tx.wait();
}

3.3 Wallet Connection Component

// src/components/WalletConnect.tsx
import { useState } from 'react';
import { ethers } from 'ethers';

export default function WalletConnect() {
  const [account, setAccount] = useState<string>("");

  const connectWallet = async () => {
    if (window.ethereum) {
      try {
        await window.ethereum.request({ method: 'eth_requestAccounts' });
        const provider = new ethers.BrowserProvider(window.ethereum);
        const signer = await provider.getSigner();
        setAccount(await signer.getAddress());
      } catch (error) {
        console.error("User denied account access");
      }
    } else {
      alert("Please install MetaMask!");
    }
  };

  return (
    <button onClick={connectWallet}>
      {account ? `Connected: ${account.slice(0,6)}...` : "Connect Wallet"}
    </button>
  );
}

4. Testing and Validation

4.1 Claim Test Tokens

  1. Visit the chain’s test faucet website

  2. Enter your wallet address to receive test ENI tokens

4.2 Functional Testing Process

  1. Start the frontend: npm start

  2. Connect the wallet (switch to ENI Testnet)

  3. Test scenarios:

  • Set Mood: Enter any string and submit

  • Get Mood: Verify the return value matches the blockchain state

  • Check Transaction Hash: Verify transaction details on the block explorer


5. Advanced Deployment Options

5.1 Deploying Contracts Using Cosmos CLI (Alternative)

# Upload contract ABI and bytecode to the chain
enid tx evm deploy <bytecode> --from <key-name> --chain-id $CHAIN_ID

5.2 Calling Chain-Specific Enhanced Features

// Example of accessing Cosmos SDK features
interface ICosmosPrecompile {
    function queryValidator(address valAddr) external view returns (uint256 votingPower);
}

contract ValidatorInfo {
    function getVotingPower(address valAddr) public view returns (uint256) {
        return ICosmosPrecompile(0x000000000000000000001).queryValidator(valAddr);
    }
}

6. Best Practice Recommendations

  1. Security Auditing: Use Slither or MythX for static contract analysis

  2. Gas Optimization: Leverage Cosmos SDK’s batch transaction features to reduce fees

  3. State Monitoring: Integrate Tendermint RPC for real-time event subscriptions

  4. Cross-Chain Integration: Interact with other Cosmos ecosystem chains via the IBC protocol

PreviousOverviewNextEcosystem

Last updated 2 months ago