Viction
  • Getting Started
  • General
    • Overview
    • Viction Blockchain
      • PoSV Consensus
      • Comparison
    • Staking
      • Staking Requirements
      • Staking Rewards
      • How to stake on Viction Wallet
    • Network Information
      • Viction Mainnet
      • Viction Testnet
    • Viction RPC API
  • Smart Contract Development
    • Solidity
      • A Simple Smart Contract
      • Solidity by Example
    • Standards & Specification
      • VRC25 Specification
      • VRC725 Specification
    • IDEs and Tools
      • Remix
      • Ethers.js
      • web3.js
      • thirdweb CLI
    • Deployment & Verification
      • Hardhat
      • Foundry
  • DApp Development
    • Integration
      • Exchange/Wallet integration
      • VRC25 Exchange/Wallet integration
      • Viction Staking Governance
      • VIC ZeroGas
      • VRRF
    • Data and analytics
    • Embedded Wallet (MPC)
    • Walkthrough: Build a Dapp on Viction
      • Setup Environment
      • Write the Smart Contract
      • Interacting with the Dapp in a browser
  • Masternode
    • Requirements
    • Run a Full Node
      • Binary
      • Create a Viction Masternode
      • Tmn
      • Docker
    • Apply Your Node
    • Slashing Mechanism
    • Chain Data Snapshots
    • Troubleshooting
  • Viction Wallet
    • User Guide
      • Authentication
      • How to create a new wallet
      • How to restore a wallet?
      • Wallet settings
      • Send & Receive Tokens
      • Add custom token
      • Manage Tokens
      • Send NFT
      • General settings
    • Developer Guide
    • Privacy Policy
    • Term and Services
  • Viction Bridge
    • Spacegate
    • Arken Bridge
    • Hyperlane
  • Viction Data Availability
    • Viction DA RPC API
    • DA Integration Use cases
      • Simple Guide for Integrating OP Stack Rollup with Viction DA Layer
  • How to
    • How to Connect to Viction Blockchain
      • Coin98 Super Wallet
      • Metamask
      • Ledger
    • How to troubleshoot when the node is up but couldn't begin to sync block
    • How to Vote for Viction Saigon Network Upgrade Proposal
    • How to issue a token via VICIssuer
    • How to verify if a contract has been issued via VICIssuer
    • How to deploy the VRC725 contract
    • How to apply ZeroGas for VRC725 contract
    • How to Migrate Dapps from Ethereum
    • How to register Token or NFT logo on Vicscan
    • How to verify a contract on Vicscan
    • How to confirm a project on Vicscan
    • How to check if a token is gas sponsored on Viction
    • How to verify gas sponsored transactions
    • How to create Telegram Mini Apps
    • How to use VictionSafe (Multisig)
  • FAQ
    • APIs
    • General
      • Viction
      • Ecosystem
      • VIC - Economics
      • Contact & Support
    • Masternodes and Voting
      • Masternodes
      • Voter
    • Products
      • VicScan (Explorer)
      • VicMaster
      • VicStats
      • VicIssuer
        • How to Verify & Publish Contract Source Code on VicScan
      • Viction Wallet
      • Viction Data Availability Network
  • Legal
    • Terms of Use
    • Privacy Policy
  • Whitepaper and Research
  • Archive
    • TOMOE
    • How to Deploy a VRC25 Token on Viction
    • How to deploy an ICO smart contract on Viction
    • How to deploy an NFT token
    • An Example of Building a Dapp on Viction
    • Migrate Ethereum Dapp to Viction
    • TomoMasterDAO
      • Introduction
      • Governance model
        • On-Chain vs Off-Chain Voting
        • Board
        • Proposals
        • Voting and Outcome
      • Tokenomics
      • How to utilize and trade tDAO
      • Proposal guidelines for TomoMasterDAO
    • Old Viction Testnet
    • Deploy on Viction
      • CLI Commands
      • Viction Private Testnet Setup
Powered by GitBook
On this page
  • Install and configure MetaMask
  • Using the Dapp
  • Front End App
  1. DApp Development
  2. Walkthrough: Build a Dapp on Viction

Interacting with the Dapp in a browser

PreviousWrite the Smart ContractNextMasternode

Last updated 1 year ago

Now we’re ready to use our Dapp!

Install and configure MetaMask

  1. Install the MetaMask browser extension in Chrome or FireFox.

  2. Once installed, you’ll see the MetaMask fox icon next to your address bar. Click the icon and MetaMask will open up.

  3. Create a New password. Then, write down the Secret Backup Phrase and accept the terms. By default, MetaMask will create a new Ethereum address for you.

Initiating MetaMask

4. Now we’re connected to the Ethereum network, with a brand new wallet with 0 ETH.

5. Let’s now connect MetaMask to Viction (testnet). Click the menu with the “Main Ethereum Network” and select Custom RPC. Use the Networks data from Viction (testnet) and click Save

Connecting MetaMask to Viction (testnet)

6. The network name at the top will switch to say “Viction testnet”. Now that we are on Viction network we can import Viction wallets.

We could use the VIC wallet we created previously, but better let’s create a new VIC wallet and add a few VIC tokens — you know how to do it.

7. Once you have created your new VIC wallet, copy the private key. Back to MetaMask, click on the top-right circle and select Import Account. Paste the private key and voilà! Your VIC wallet is loaded in MetaMask

Importing a wallet

Using the Dapp

If you want to get started with your dApp quickly or see what this whole project looks like with a frontend, you can use Hardhat's boilerplate repo.

The first things you need to do are cloning this repository and installing its dependencies:

git clone https://github.com/NomicFoundation/hardhat-boilerplate.git
cd hardhat-boilerplate
npm install

Front End App

In frontend you'll find a simple app that allows the user to do two things:

  • Check the connected wallet's balance.

  • Send tokens to an address.

It's a separate npm project and it was created using create-react-app, so this means that it uses webpack and babel.

npx hardhat node

Once installed, let's run Hardhat's testing network:

npx hardhat run scripts/deploy.js --network localhost

Then, on a new terminal, go to the repository's root folder and run this to deploy your contract:

npx hardhat run scripts/deploy.js --network localhost

Finally, we can run the frontend with:

cd frontend
npm install
npm start

Open http://localhost:3000/ to see your Dapp. You will need to have Coinbase Wallet or Metamask installed and listening tolocalhost 8545.(Example)