Building dApp

Learn how to build a DApp on Onyx.

Quickstart: Building a Decentralized Application (dApp) on Onyx (Solidity)

Introduction

This guide is designed for web developers seeking to build decentralized applications (dApps) on Onyx. No prior knowledge of Ethereum, Onyx, or Solidity is required, but a basic understanding of JavaScript and Yarn is expected. If you are new to Ethereum, it may be beneficial to review the Ethereum documentation before proceeding.

Learning Objectives

In this tutorial, developers will learn:

• The differences between Ethereum’s decentralized architecture and traditional client-server models.

• The fundamentals of Solidity smart contracts.

• How to compile and deploy a smart contract on Onyx.

• The functionality of an Ethereum-compatible Web3 wallet.

To demonstrate these concepts, we will create a decentralized token dispenser using Solidity smart contracts. This dispenser will operate under the following constraints:

1. A user can receive a token only if they have not received one recently.

2. The contract rules are immutable and cannot be modified after deployment.

This guide will walk through transitioning from a centralized Web2 implementation to a decentralized Web3 version on Onyx.

Prerequisites

Before starting, ensure you have the following installed:

• VS Code (or any preferred IDE)

• A Web3-compatible wallet (e.g., MetaMask)

• Yarn

• Foundry (for smart contract development)

• Remix (for contract compilation and testing)

Additional dependencies will be introduced throughout the guide.

Overview of Ethereum and Onyx

Ethereum

Ethereum is a decentralized network that maintains a shared blockchain ledger across a global network of nodes. Smart contracts execute within the Ethereum Virtual Machine (EVM) and facilitate trustless, programmable transactions.

Key features include:

• Smart contracts: Self-executing programs that enforce business logic.

• Decentralized identity and data portability: Users retain control over their assets and identities.

• Transaction fees: Users pay gas fees in ETH to incentivize network validators.

However, Ethereum transactions can become costly during high network congestion, necessitating scaling solutions such as Onyx.

Onyx

Onyx is an advanced Layer 3 blockchain built using Arbitrum Orbit and secured by Coinbase’s Base Layer 2. It provides developers with:

• EVM compatibility, enabling Solidity smart contracts to run seamlessly.

• Higher transaction throughput and lower fees compared to Ethereum.

• Optimistic rollup technology for efficient data processing.

Transitioning from a Web2 to a Web3 Application

A conventional Web2 application relies on centralized servers, leading to risks such as downtime, censorship, and security vulnerabilities. By migrating to Web3, smart contract logic is executed on the Onyx blockchain, ensuring:

• Immutable business logic

• Decentralized data storage

• Trustless interactions between users

Example: Token Dispenser Implementation

We will first examine a JavaScript-based token dispenser and then implement its Web3 equivalent using Solidity.

Web2 Implementation:

class TokenDispenser {
  constructor() {
    this.users = {};
  }
  requestToken(user) {
    if (!this.users[user] || this._canReceive(user)) {
      this.users[user] = Date.now();
      return 'Token Granted';
    }
    return 'Token Request Denied';
  }
  _canReceive(user) {
    return Date.now() - this.users[user] > 86400000;
  }
}
Web3 Implementation (Solidity):
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;


contract TokenDispenser {
    mapping(address => uint256) public lastRequest;
    uint256 public cooldown = 1 days;
    
    function requestToken() public returns (bool) {
        require(block.timestamp - lastRequest[msg.sender] > cooldown, "Cooldown period active");
        lastRequest[msg.sender] = block.timestamp;
        return true;
    }
}
 

Compiling and Deploying the Smart Contract

Smart contracts need to be compiled into bytecode before they can be deployed on-chain. We will use Remix, a browser-based IDE, for this step.

1. Open Remix: Remix IDE

2. Create a new workspace.

3. Copy the Solidity contract into a new file.

4. Compile the contract in Remix.

5. Deploy the contract using a local Ethereum test network.