Build a Frontend dApp

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;
 
import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Burnable.sol";
import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Permit.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
 
/**
 * @title MyToken
 * @dev Implementation of a basic ERC20 token with additional safety features
 * Uses OpenZeppelin's secure and tested contracts
 */
contract MyToken is ERC20, ERC20Burnable, ERC20Permit, Ownable {
    /**
     * @dev Constructor that mints initial supply to the deployer
     * @notice Creates 1,000,000 tokens with 18 decimals
     */
    constructor()
        ERC20("My Token", "MTK")
        ERC20Permit("My Token")
        Ownable(msg.sender)
    {
        _mint(msg.sender, 1_000_000 * 10 ** decimals());
    }
 
    /**
     * @dev Allows owner to mint additional tokens if needed
     * @param to Address to receive the minted tokens
     * @param amount Amount of tokens to mint (in wei)
     */
    function mint(address to, uint256 amount) public onlyOwner {
        _mint(to, amount);
    }
}

mkdir shardeum-contract
cd shardeum-contract
npm init -y
npm install --save-dev hardhat

npx hardhat
# Choose: "Create a TypeScript project"
npm install --save-dev @nomicfoundation/hardhat-toolbox
npm install @openzeppelin/contracts
npm install dotenv

PRIVATE_KEY=0xYOUR_PRIVATE_KEY_HERE

node_modules
.env
.env.*
artifacts
cache

import { HardhatUserConfig } from "hardhat/config";
import "@nomicfoundation/hardhat-toolbox";
import "dotenv/config";
 
// Normalize private key to ensure it has 0x prefix
function getAccounts(): string[] {
  if (!process.env.PRIVATE_KEY) {
    console.warn(
      "⚠️  WARNING: No PRIVATE_KEY found in .env file!\n" +
      "Deployment will fail. Please add your private key to .env:\n" +
      "PRIVATE_KEY=your_private_key_here"
    );
    return [];
  }
 
  const key = process.env.PRIVATE_KEY.trim();
  const normalizedKey = key.startsWith('0x') ? key : `0x${key}`;
 
  return [normalizedKey];
}
 
const config: HardhatUserConfig = {
  solidity: "0.8.20",
  networks: {
    shardeumTestnet: {
      url: "https://api-mezame.shardeum.org",
      chainId: 8119,
      accounts: getAccounts(),
    },
  },
};
 
export default config;

import { ethers } from "hardhat";
import fs from "fs";
import path from "path";
 
async function main() {
  console.log("Deploying MyToken contract...");
 
  const Token = await ethers.getContractFactory("MyToken");
  const token = await Token.deploy();
  await token.waitForDeployment();
 
  const address = await token.getAddress();
  console.log("✅ Token deployed to:", address);
 
  // Write the deployed address to the frontend config
  const configPath = path.join(__dirname, "../src/config/networks.ts");
  const configContent = `import { ethers } from 'ethers';
 
export const SHARDEUM_TESTNET = {
  chainId: "0x1fb7", // 8119
  chainName: "Shardeum EVM Testnet",
  nativeCurrency: {
    name: "SHM",
    symbol: "SHM",
    decimals: 18,
  },
  rpcUrls: ["https://api-mezame.shardeum.org"],
  blockExplorerUrls: ["https://explorer-mezame.shardeum.org"],
};
 
export const TOKEN_ADDRESS = "${address}";
 
// Runtime validation for TOKEN_ADDRESS
if (TOKEN_ADDRESS === "0xYOUR_CONTRACT_ADDRESS_HERE" || !ethers.isAddress(TOKEN_ADDRESS)) {
  console.warn(
    "⚠️  WARNING: TOKEN_ADDRESS is not configured!\\n" +
    "Please update TOKEN_ADDRESS in src/config/networks.ts with your deployed contract address.\\n" +
    "Deploy your contract with: npm run deploy:testnet"
  );
}
`;
 
  fs.writeFileSync(configPath, configContent);
  console.log("✅ Contract address written to src/config/networks.ts");
  console.log("\nNext steps:");
  console.log("1. Run 'npm run dev' to start the frontend");
  console.log("2. Connect your wallet and interact with your token!");
  console.log(`\nView your contract on the explorer: https://explorer-mezame.shardeum.org/address/${address}`);
}
 
main().catch((err) => {
  console.error(err);
  process.exit(1);
});

npx hardhat run scripts/deploy.ts --network shardeumTestnet

{
  "scripts": {
    "deploy:testnet": "npx hardhat run scripts/deploy.ts --network shardeumTestnet"
  }
}

npm run deploy:testnet

npm create vite@latest shardeum-dapp -- --template react-ts
cd shardeum-dapp
npm install
npm install ethers

import { ethers } from 'ethers';
 
export const SHARDEUM_TESTNET = {
  chainId: "0x1fb7", // 8119
  chainName: "Shardeum EVM Testnet",
  nativeCurrency: {
    name: "SHM",
    symbol: "SHM",
    decimals: 18,
  },
  rpcUrls: ["https://api-mezame.shardeum.org"],
  blockExplorerUrls: ["https://explorer-mezame.shardeum.org"],
};
 
export const TOKEN_ADDRESS = "0xYOUR_CONTRACT_ADDRESS_HERE";
 
// Runtime validation for TOKEN_ADDRESS
if (TOKEN_ADDRESS === "0xYOUR_CONTRACT_ADDRESS_HERE" || !ethers.isAddress(TOKEN_ADDRESS)) {
  console.warn(
    "⚠️  WARNING: TOKEN_ADDRESS is not configured!\n" +
    "Please update TOKEN_ADDRESS in src/config/networks.ts with your deployed contract address.\n" +
    "Deploy your contract with: npm run deploy:testnet"
  );
}

/**
 * Complete ERC20 ABI with additional OpenZeppelin extensions
 * Includes: ERC20, ERC20Burnable, ERC20Permit, and Ownable functions
 */
export const ERC20_ABI = [
  // Standard ERC20 Functions
  "function name() view returns (string)",
  "function symbol() view returns (string)",
  "function decimals() view returns (uint8)",
  "function totalSupply() view returns (uint256)",
  "function balanceOf(address account) view returns (uint256)",
  "function transfer(address to, uint256 amount) returns (bool)",
  "function allowance(address owner, address spender) view returns (uint256)",
  "function approve(address spender, uint256 amount) returns (bool)",
  "function transferFrom(address from, address to, uint256 amount) returns (bool)",
 
  // ERC20Burnable Functions
  "function burn(uint256 amount)",
  "function burnFrom(address account, uint256 amount)",
 
  // Ownable Functions
  "function owner() view returns (address)",
  "function renounceOwnership()",
  "function transferOwnership(address newOwner)",
 
  // Custom Functions (from MyToken contract)
  "function mint(address to, uint256 amount)",
 
  // ERC20Permit Functions (EIP-2612 - Gasless Approvals)
  "function permit(address owner, address spender, uint256 value, uint256 deadline, uint8 v, bytes32 r, bytes32 s)",
  "function nonces(address owner) view returns (uint256)",
  "function DOMAIN_SEPARATOR() view returns (bytes32)",
 
  // Events
  "event Transfer(address indexed from, address indexed to, uint256 value)",
  "event Approval(address indexed owner, address indexed spender, uint256 value)",
  "event OwnershipTransferred(address indexed previousOwner, address indexed newOwner)"
];

import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import { ethers, BrowserProvider, Eip1193Provider } from 'ethers';
import { SHARDEUM_TESTNET } from '../config/networks';
 
interface WalletContextType {
  account: string | null;
  chainId: string | null;
  provider: BrowserProvider | null;
  error: string | null;
  connectWallet: () => Promise<void>;
  disconnectWallet: () => Promise<void>;
  switchNetwork: () => Promise<void>;
  clearError: () => void;
}
 
const WalletContext = createContext<WalletContextType | undefined>(undefined);
 
export function WalletProvider({ children }: { children: ReactNode }) {
  const [account, setAccount] = useState<string | null>(null);
  const [chainId, setChainId] = useState<string | null>(null);
  const [provider, setProvider] = useState<BrowserProvider | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  // Check if wallet is connected on mount
  useEffect(() => {
    const checkConnection = async () => {
      if (window.ethereum) {
        const provider = new ethers.BrowserProvider(window.ethereum as Eip1193Provider);
        const accounts = await provider.send('eth_accounts', []);
 
        if (accounts.length > 0) {
          setAccount(accounts[0]);
          setProvider(provider);
 
          const network = await provider.getNetwork();
          setChainId('0x' + network.chainId.toString(16));
        }
      }
    };
 
    // Store handler references for proper cleanup
    const handleAccountsChanged = (accounts: string[]) => {
      if (accounts.length > 0) {
        setAccount(accounts[0]);
      } else {
        disconnectWallet();
      }
    };
 
    const handleChainChanged = async (newChainId: string) => {
      setChainId(newChainId);
      // Re-initialize provider instead of full page reload
      if (window.ethereum) {
        try {
          const newProvider = new ethers.BrowserProvider(window.ethereum as Eip1193Provider);
          setProvider(newProvider);
          const accounts = await newProvider.send('eth_accounts', []);
          if (accounts.length > 0) {
            setAccount(accounts[0]);
          }
        } catch (err) {
          console.error('Failed to reinitialize provider:', err);
        }
      }
    };
 
    checkConnection();
 
    // Listen for account and chain changes
    if (window.ethereum) {
      window.ethereum.on('accountsChanged', handleAccountsChanged);
      window.ethereum.on('chainChanged', handleChainChanged);
    }
 
    return () => {
      if (window.ethereum) {
        window.ethereum.removeListener('accountsChanged', handleAccountsChanged);
        window.ethereum.removeListener('chainChanged', handleChainChanged);
      }
    };
  }, []);
 
  const connectWallet = async () => {
    if (!window.ethereum) {
      setError('Please install MetaMask to use this dApp!');
      return;
    }
 
    try {
      const provider = new ethers.BrowserProvider(window.ethereum as Eip1193Provider);
      const accounts = await provider.send('eth_requestAccounts', []);
 
      setAccount(accounts[0]);
      setProvider(provider);
 
      const network = await provider.getNetwork();
      setChainId('0x' + network.chainId.toString(16));
      setError(null);
    } catch (err: any) {
      console.error('Failed to connect wallet:', err);
      setError(err.message || 'Failed to connect wallet');
    }
  };
 
  const disconnectWallet = async () => {
    // Try to properly revoke permissions (MetaMask 11.0+)
    try {
      await window.ethereum?.request({
        method: 'wallet_revokePermissions',
        params: [{ eth_accounts: {} }],
      });
    } catch (err) {
      // Fallback for wallets that don't support revokePermissions
      // Note: This only clears local state. MetaMask will still consider the site connected
      // and will auto-reconnect on page reload. This is a MetaMask limitation.
      console.log('wallet_revokePermissions not supported, clearing local state only');
    }
 
    setAccount(null);
    setProvider(null);
    setChainId(null);
    setError(null);
  };
 
  const switchNetwork = async () => {
    if (!window.ethereum) return;
 
    try {
      await window.ethereum.request({
        method: 'wallet_switchEthereumChain',
        params: [{ chainId: SHARDEUM_TESTNET.chainId }],
      });
      setError(null);
    } catch (switchError: any) {
      // This error code indicates that the chain has not been added to MetaMask
      if (switchError.code === 4902) {
        try {
          await window.ethereum.request({
            method: 'wallet_addEthereumChain',
            params: [SHARDEUM_TESTNET],
          });
          setError(null);
        } catch (addError: any) {
          console.error('Failed to add network:', addError);
          setError(addError.message || 'Failed to add network');
        }
      } else {
        console.error('Failed to switch network:', switchError);
        setError(switchError.message || 'Failed to switch network');
      }
    }
  };
 
  const clearError = () => {
    setError(null);
  };
 
  return (
    <WalletContext.Provider
      value={{
        account,
        chainId,
        provider,
        error,
        connectWallet,
        disconnectWallet,
        switchNetwork,
        clearError
      }}
    >
      {children}
    </WalletContext.Provider>
  );
}
 
export function useWallet() {
  const context = useContext(WalletContext);
  if (context === undefined) {
    throw new Error('useWallet must be used within a WalletProvider');
  }
  return context;
}
 
// Extend Window type for TypeScript with proper event listener support
declare global {
  interface Window {
    ethereum?: Eip1193Provider & {
      on(event: string, handler: (...args: any[]) => void): void;
      removeListener(event: string, handler: (...args: any[]) => void): void;
      removeAllListeners(event: string): void;
    };
  }
}

import { useState, useEffect, useCallback } from 'react';
import { ethers, Contract } from 'ethers';
import { useWallet } from '../context/WalletContext';
import { TOKEN_ADDRESS } from '../config/networks';
import { ERC20_ABI } from '../config/erc20Abi';
 
export function TokenInterface() {
  const { account, provider } = useWallet();
  const [tokenName, setTokenName] = useState('');
  const [tokenSymbol, setTokenSymbol] = useState('');
  const [balance, setBalance] = useState('0');
  const [recipient, setRecipient] = useState('');
  const [amount, setAmount] = useState('');
  const [loading, setLoading] = useState(false);
  const [loadingTokenInfo, setLoadingTokenInfo] = useState(true);
  const [txHash, setTxHash] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
 
  const loadTokenInfo = useCallback(async () => {
    if (!provider) return;
 
    setLoadingTokenInfo(true);
    setError(null);
 
    try {
      const contract = new Contract(TOKEN_ADDRESS, ERC20_ABI, provider);
      const name = await contract.name();
      const symbol = await contract.symbol();
 
      setTokenName(name);
      setTokenSymbol(symbol);
    } catch (err: any) {
      console.error('Failed to load token info:', err);
      setError(
        'Failed to load token information. Please ensure the contract is deployed and you are on the correct network.'
      );
    } finally {
      setLoadingTokenInfo(false);
    }
  }, [provider]);
 
  const loadBalance = useCallback(async () => {
    if (!provider || !account) return;
 
    try {
      const contract = new Contract(TOKEN_ADDRESS, ERC20_ABI, provider);
      const balance = await contract.balanceOf(account);
      setBalance(ethers.formatEther(balance));
    } catch (err: any) {
      console.error('Failed to load balance:', err);
      setError('Failed to load balance. Please check your connection.');
    }
  }, [provider, account]);
 
  useEffect(() => {
    if (account && provider) {
      loadTokenInfo();
      loadBalance();
    }
  }, [account, provider, loadTokenInfo, loadBalance]);
 
  const validateTransfer = (): string | null => {
    // Validate recipient address
    if (!ethers.isAddress(recipient)) {
      return 'Invalid recipient address';
    }
 
    // Validate amount is a positive number
    const parsedAmount = parseFloat(amount);
    if (isNaN(parsedAmount) || parsedAmount <= 0) {
      return 'Amount must be greater than 0';
    }
 
    // Validate sufficient balance
    if (parsedAmount > parseFloat(balance)) {
      return 'Insufficient balance';
    }
 
    return null;
  };
 
  const handleTransfer = async (e: React.FormEvent) => {
    e.preventDefault();
 
    if (!provider || !account) return;
 
    // Clear previous messages
    setError(null);
    setSuccess(null);
    setTxHash('');
 
    // Validate inputs
    const validationError = validateTransfer();
    if (validationError) {
      setError(validationError);
      return;
    }
 
    setLoading(true);
 
    try {
      const signer = await provider.getSigner();
      const contract = new Contract(TOKEN_ADDRESS, ERC20_ABI, signer);
 
      const tx = await contract.transfer(
        recipient,
        ethers.parseEther(amount)
      );
 
      setTxHash(tx.hash);
      setSuccess('Transaction submitted! Waiting for confirmation...');
 
      await tx.wait();
 
      setSuccess(`Successfully transferred ${amount} ${tokenSymbol} to ${recipient.slice(0, 6)}...${recipient.slice(-4)}`);
      loadBalance();
      setRecipient('');
      setAmount('');
    } catch (err: any) {
      console.error('Transfer failed:', err);
 
      // Parse common error messages
      let errorMessage = 'Transfer failed';
      if (err.code === 'ACTION_REJECTED') {
        errorMessage = 'Transaction was rejected by user';
      } else if (err.message.includes('insufficient funds')) {
        errorMessage = 'Insufficient funds for gas';
      } else if (err.message) {
        errorMessage = `Transfer failed: ${err.message}`;
      }
 
      setError(errorMessage);
      setTxHash('');
    } finally {
      setLoading(false);
    }
  };
 
  if (!account) {
    return (
      <div className="card">
        <h2>Token Interface</h2>
        <p>Please connect your wallet to use the token interface.</p>
      </div>
    );
  }
 
  if (loadingTokenInfo) {
    return (
      <div className="card">
        <h2>Token Interface</h2>
        <p>Loading token information...</p>
      </div>
    );
  }
 
  if (error && !tokenName) {
    return (
      <div className="card">
        <h2>Token Interface</h2>
        <div className="error-box">
          <p>❌ {error}</p>
          <button onClick={loadTokenInfo} className="retry-btn">
            Retry
          </button>
        </div>
      </div>
    );
  }
 
  return (
    <div className="card">
      <h2>{tokenName || 'Token'} ({tokenSymbol || '---'})</h2>
 
      <div className="balance">
        <p>Your Balance:</p>
        <h3>{balance} {tokenSymbol}</h3>
      </div>
 
      {error && (
        <div className="error-box">
          <p>❌ {error}</p>
          <button onClick={() => setError(null)} className="close-btn">✕</button>
        </div>
      )}
 
      {success && (
        <div className="success-box">
          <p>✅ {success}</p>
          <button onClick={() => setSuccess(null)} className="close-btn">✕</button>
        </div>
      )}
 
      <form onSubmit={handleTransfer} className="transfer-form">
        <h3>Transfer Tokens</h3>
 
        <div className="form-group">
          <label>Recipient Address:</label>
          <input
            type="text"
            value={recipient}
            onChange={(e) => setRecipient(e.target.value)}
            placeholder="0x..."
            required
          />
        </div>
 
        <div className="form-group">
          <label>Amount:</label>
          <input
            type="number"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            placeholder="0.0"
            step="0.000001"
            required
          />
        </div>
 
        <button type="submit" disabled={loading}>
          {loading ? 'Processing...' : 'Transfer'}
        </button>
 
        {txHash && (
          <div className="tx-hash">
            <p>Transaction Hash:</p>
            <a
              href={`https://explorer-mezame.shardeum.org/tx/${txHash}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {txHash.slice(0, 10)}...{txHash.slice(-8)}
            </a>
          </div>
        )}
      </form>
    </div>
  );
}

import { useWallet } from './context/WalletContext';
import { TokenInterface } from './components/TokenInterface';
import { SHARDEUM_TESTNET } from './config/networks';
import './App.css';
 
function App() {
  const { account, chainId, connectWallet, disconnectWallet, switchNetwork } = useWallet();
 
  const isCorrectNetwork = chainId?.toLowerCase() === SHARDEUM_TESTNET.chainId.toLowerCase();
 
  return (
    <div className="App">
      <header className="App-header">
        <h1>Shardeum dApp</h1>
 
        <div className="wallet-controls">
          {!account ? (
            <button onClick={connectWallet} className="connect-btn">
              Connect Wallet
            </button>
          ) : (
            <div className="wallet-info">
              <p>Connected: {account.slice(0, 6)}...{account.slice(-4)}</p>
              <button onClick={disconnectWallet} className="disconnect-btn">
                Disconnect
              </button>
            </div>
          )}
        </div>
 
        {account && !isCorrectNetwork && (
          <div className="network-warning">
            <p>⚠️ Wrong Network</p>
            <button onClick={switchNetwork}>Switch to Shardeum Testnet</button>
          </div>
        )}
      </header>
 
      <main>
        {account && isCorrectNetwork && <TokenInterface />}
      </main>
    </div>
  );
}
 
export default App;

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import { WalletProvider } from './context/WalletContext.tsx';
import './index.css';
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <WalletProvider>
      <App />
    </WalletProvider>
  </React.StrictMode>,
);

.App {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
}
 
@media (min-width: 768px) {
  .App {
    padding: 2rem;
  }
}
 
.App-header {
  text-align: center;
  margin-bottom: 2rem;
}
 
.wallet-controls {
  margin-top: 1rem;
}
 
.connect-btn,
.disconnect-btn {
  background: #646cff;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}
 
.connect-btn:hover,
.disconnect-btn:hover {
  background: #535bf2;
}
 
.wallet-info {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: #1a1a1a;
  padding: 0.5rem 1rem;
  border-radius: 8px;
}
 
.network-warning {
  background: #ff6b6b;
  color: white;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem auto;
  max-width: 600px;
  text-align: center;
}
 
.network-warning button {
  margin-top: 0.5rem;
  background: white;
  color: #ff6b6b;
  font-weight: 600;
}
 
.network-warning button:hover {
  background: #f0f0f0;
  border-color: white;
}
 
.card {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 2rem;
  margin: 1rem 0;
}
 
.balance {
  text-align: center;
  padding: 1.5rem;
  background: #2a2a2a;
  border-radius: 8px;
  margin: 1rem 0;
}
 
.balance h3 {
  font-size: 2rem;
  margin: 0.5rem 0;
  color: #646cff;
}
 
.transfer-form {
  margin-top: 2rem;
}
 
.form-group {
  margin-bottom: 1rem;
}
 
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #888;
}
 
.form-group input {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem;
  border: 1px solid #333;
  border-radius: 6px;
  background: #2a2a2a;
  color: white;
  font-size: 1rem;
  box-sizing: border-box;
}
 
.form-group input:focus {
  outline: none;
  border-color: #646cff;
}
 
button[type="submit"] {
  width: 100%;
  background: #646cff;
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
  transition: background 0.3s;
}
 
button[type="submit"]:hover:not(:disabled) {
  background: #535bf2;
}
 
button[type="submit"]:disabled {
  background: #333;
  cursor: not-allowed;
}
 
.tx-hash {
  margin-top: 1rem;
  padding: 1rem;
  background: #2a2a2a;
  border-radius: 6px;
}
 
.tx-hash a {
  color: #646cff;
  word-break: break-all;
}

npm run dev

npm run build

npm install -g vercel
vercel --prod

npm install -g netlify-cli
netlify deploy --prod --dir=dist

npm install -g ipfs-deploy
ipfs-deploy dist

pip3 install slither-analyzer

slither .

cargo install aderyn
# Or: cargo binstall aderyn

aderyn .

aderyn . --output report.md

if (!window.ethereum) {
  alert('Please install MetaMask!');
  window.open('https://metamask.io/download/', '_blank');
  return;
}

if (chainId?.toLowerCase() !== SHARDEUM_TESTNET.chainId.toLowerCase()) {
  await switchNetwork();
}

try {
  const tx = await contract.transfer(recipient, ethers.parseUnits(amount, decimals));
  await tx.wait();
} catch (error: any) {
  if (error.code === 'ACTION_REJECTED') {
    alert('Transaction rejected in wallet.');
  } else {
    alert(error?.message || 'Transaction failed.');
  }
}

git clone https://github.com/shardeum/shardeum-dapp-boilerplate.git
cd shardeum-dapp-boilerplate
npm install

cp .env.example .env
# Edit .env and add your PRIVATE_KEY

# Deploy to Shardeum Testnet
npx hardhat run scripts/deploy.js --network shardeumTestnet
 
# Start the frontend
npm run dev