Skip to content

injective-dev/dapp-react-temp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Logo

Injective dApp React Template

A minimal React starter for building dApps on Injective EVM Testnet.

Stack: Vite · React 18 · TypeScript · Tailwind CSS · wagmi v2

Docs · Testnet Explorer · Faucet


🚀 Quick Start

Clone and run:

# Clone this template
git clone https://github.com/injective-dev/dapp-react-temp.git my-dapp
cd my-dapp/frontend

# Install dependencies
npm install

# Set up environment (vault address is already deployed!)
cp .env.example .env

# Start the dev server
npm run dev

Open http://localhost:5173 — you're ready to go!


📦 What's Included

USDC Vault Contract (Already Deployed!)

A simple custodial vault on Injective EVM Testnet:

  • Deposit USDC — users deposit Circle USDC into the vault
  • Withdraw USDC — users can withdraw their own funds at any time
  • View balance — see total USDC held by the vault

Deployed Contract:

  • Address: 0xc79efba3814eedb4b8b85651bc6668198e46ac5a
  • Network: Injective EVM Testnet (Chain ID: 1439)
  • Explorer: View on Blockscout

Frontend Features

  • Wallet connection — MetaMask, WalletConnect, Coinbase Wallet via wagmi
  • Network detection — auto-detects Injective Testnet
  • Deposit/Withdraw UI — simple forms for vault interactions
  • Real-time balance — shows wallet balance, deposited balance, and total vault balance
  • Transaction history — track your deposits and withdrawals

🛠 Project Structure

├── frontend/               # React app
│   ├── src/
│   │   ├── components/     # VaultForm, ConnectWallet, etc.
│   │   ├── config/         # wagmi + contract ABIs
│   │   ├── hooks/          # useWallet, useUSDCVault
│   │   └── pages/          # Home, Dashboard
│   └── .env.example        # Environment template
│
├── contracts/              # Solidity contracts (reference only)
│   └── contracts/USDCVault.sol
│
└── README.md

🔧 Configuration

Environment Variables

Create frontend/.env:

# USDC Vault address (already deployed on testnet)
VITE_VAULT_ADDRESS=0xc79efba3814eedb4b8b85651bc6668198e46ac5a

# Optional: override default USDC address
# VITE_USDC_ADDRESS=0x0C382e685bbeeFE5d3d9C29e29E341fEE8E84C5d

The vault contract is already deployed — you don't need to deploy anything yourself!


💳 Get Testnet Tokens

1. Get INJ (for gas)

Visit the Injective Testnet Faucet:

  1. Connect your wallet
  2. Request testnet INJ
  3. Wait ~30 seconds

2. Get USDC (Circle testnet USDC)

Visit faucet.circle.com:

  1. Select Injective Testnet
  2. Enter your wallet address
  3. Receive 10 testnet USDC

📖 How It Works

Deposit Flow

  1. User approves the vault to spend USDC (one-time)
  2. User enters deposit amount
  3. Contract transfers USDC from user to vault
  4. Balance updates instantly

Withdraw Flow

  1. User enters withdrawal amount (up to their deposited balance)
  2. Contract transfers USDC back to user
  3. Balance updates instantly

No admin fees, no lock-up period — users have full control over their funds.


🌐 Network Details

Testnet
Chain ID 1439
RPC https://k8s.testnet.json-rpc.injective.network/
Explorer testnet.blockscout.injective.network
USDC Contract 0x0C382e685bbeeFE5d3d9C29e29E341fEE8E84C5d
Vault Contract 0xc79efba3814eedb4b8b85651bc6668198e46ac5a

🧪 Smart Contract (Reference)

The vault contract source is in contracts/contracts/USDCVault.sol.

Key functions:

function deposit(uint256 amount) external;
function withdraw(uint256 amount) external;
function withdrawAll() external;
function getVaultBalance() external view returns (uint256);
function getUserDeposit(address user) external view returns (uint256);

Security features:

  • ✅ ReentrancyGuard on all state-changing functions
  • ✅ SafeERC20 for token transfers
  • ✅ No admin/owner — fully permissionless
  • ✅ Users can only withdraw their own funds

🤖 MCP Integration (Optional)

This template includes MCP (Model Context Protocol) integration for AI-powered on-chain operations.

Use Claude, Cursor, or VS Code to interact with Injective using natural language:

"Check my USDC balance"
"Deposit 5 USDC into the vault"
"What's the total vault balance?"

See mcp/README.md for setup instructions.


🚢 Deployment (Advanced)

The vault contract is already deployed for you. If you want to deploy your own version:

cd contracts
npm install

# Deploy (needs a funded wallet — add PRIVATE_KEY to contracts/.env)
npx hardhat run scripts/deploy.ts --network injectiveTestnet

📚 Learn More


📄 License

MIT


Built with ❤️ for Injective

Discord · Twitter · GitHub

About

Template for your React dApp

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors