MAGNE Layer1 Blockchain

Build an App

A guide to building a next.js app on MAGNE Layer1 Blockchain using OnchainKit

Welcome to the MAGNE Layer1 Blockchain quickstart guide! In this walkthrough, we'll create a simple onchain app from start to finish. Whether you're a seasoned developer or just starting out, this guide has got you covered.

What You'll Achieve

By the end of this quickstart, you'll have built an onchain app by:

Configuring your development environment
Deploying your smart contracts to MagicalHash
Interacting with your deployed contracts from the frontend

Our simple app will be an onchain tally app which lets you add to a total tally, stored onchain, by pressing a button.

Why MAGNE Layer1 Blockchain?

MAGNE Layer1 Blockchain is a mobile-first, EVM-compatible, PoW-based Layer1 chain where smartphones and edge devices can participate in mining and consensus, ensuring security, decentralization, and performance.

Set Up Your Development Environment

OnchainKit is a library of ready-to-use React components and Typescript utilities for building onchain apps. Run the following command in your terminal and follow the prompts to bootstrap your project.

```bash Terminal
npm create onchain@latest

Once you've gone through the prompts, you'll have a new project directory with a basic OnchainKit app. Run the following to see it live.

cd my-onchainkit-app
npm install
npm run dev

You should see the following screen.

Once we've deployed our contracts, we'll add a button that lets us interact with our contracts.


The total tally will be stored onchain in a smart contract. We'll use the Foundry framework to deploy our contract to the MAGNE Layer1 Testnet.

Create a new "contracts" folder in the root of your project

mkdir contracts && cd contracts

Install and initialize Foundry

curl -L https://foundry.paradigm.xyz | bash
foundryup
forge init --no-git

Open the project and find the Counter.sol contract file in the /contracts/src folder. You'll find the simple logic for our tally app.

Because contracts is a folder in our project, we don't want to initialize a separate git repository for it, so we add the --no-git flag.


To deploy your smart contracts to MAGNE Layer1 Testnet, you need two key components:

A node connection to interact with the MAGNE Layer1 Testnet network
A funded private key to deploy the contract

Let's set up both of these:

Create a .env file in your contracts directory and add the MAGNE Layer1 and MAGNE Layer1 Testnet RPC URLs

MAGICAL_RPC_URL="https://rpc.testnet.magicalhash.com"

-Load your environment variables

source .env

A private key with testnet funds is required to deploy the contract. You can generate a fresh private key here.

1. Store your private key in Foundry's secure keystore

```bash Terminal
cast wallet import deployer --interactive

When prompted enter your private key and a password.

Your private key is stored in ~/.foundry/keystores which is not tracked by git.

Deploy Your Contracts

Now that your environment is set up, let's deploy your contracts to MAGNE Layer1 Testnet. The foundry project provides a deploy script that will deploy the Counter.sol contract.

Use the following command to compile and deploy your contract

```bash Terminal
forge create ./src/Counter.sol:Counter --rpc-url $MAGICAL_SEPOLIA_RPC_URL --account deployer

Note the format of the contract being deployed is <contract-path>:<contract-name>.


After successful deployment, the transaction hash will be printed to the console output

Copy the deployed contract address and add it to your .env file

COUNTER_CONTRACT_ADDRESS="0x..."


```bash Terminal
source .env
```To ensure your contract was deployed successfully:

Check the transaction on explorer.
Use the cast command to interact with your deployed contract from the command line

This will return the initial value of the Counter contract's number storage variable, which will be 0.


Now lets connect the frontend to interact with your recently deployed contract.

# **Interacting with your contract**

To interact with the smart contract logic, we need to submit an onchain transaction. We can do this easily with the `Transaction` component. This is a simplified version of the `Transaction` component, designed to streamline the integration process. Instead of manually defining each subcomponent and prop, we can use this shorthand version which renders our suggested implementation of the component and includes the `TransactionButton` and `TransactionToast` components.

Lets add the `Transaction` component to our `page.tsx` file. Delete the existing content in the `main` tag and replace it with the snippet below.

// @noErrors: 2307 - Cannot find module '@/calls'
import { Transaction } from '@coinbase/onchainkit/transaction';
import { calls } from '@/calls';

<main className="flex flex-grow items-center justify-center">
  <div className="w-full max-w-4xl p-4">
    <div className="mx-auto mb-6 w-1/3">
      <Transaction calls={calls} />
    </div>
  </div>
</main>;


In the previous code snippet, you'll see we imported `calls` from the `calls.ts` file. This file provides the details needed to interact with our contract and call the `increment` function. Create a new `calls.ts` file in the same folder as your `page.tsx` file and add the following code.

const counterContractAddress = '0x...'; // add your contract address here
const counterContractAbi = [
  {
    type: 'function',
    name: 'increment',
    inputs: [],
    outputs: [],
    stateMutability: 'nonpayable',
  },
] as const;

export const calls = [
  {
    address: counterContractAddress,
    abi: counterContractAbi,
    functionName: 'increment',
    args: [],
  },
];

The calls.ts file contains the details of the contract interaction, including the contract address, which we saved in the previous step.


Now, when you connect a wallet and click on the `Transact` button and approve the transaction, it will increment the tally onchain by one.

We can verify that the onchain count took place onchain by once again using cast to call the number function on our contract.

cast call $COUNTER_CONTRACT_ADDRESS "number()(uint256)" --rpc-url $MAGNE_RPC_URL

If the transaction was successful, the tally should have incremented by one!


We now have a working onchain tally app! While the example is simple, it illustrates the end to end process of building on onchain app. We:

- Configured a project with frontend and onchain infrastructure
- Interacted with the contract from the frontend

# M Hash Layer2 Blockchain

# **Build an App**

> A guide to building a next.js app on M Hash Layer2 Blockchain using OnchainKit
> 

Welcome to the M Hash Layer2 Blockchain quickstart guide! In this walkthrough, we'll create a simple onchain app from start to finish. Whether you're a seasoned developer or just starting out, this guide has got you covered.

# **What You'll Achieve**

By the end of this quickstart, you'll have built an onchain app by:

- Configuring your development environment
- Deploying your smart contracts to MagicalHash
- Interacting with your deployed contracts from the frontend

Our simple app will be an onchain tally app which lets you add to a total tally, stored onchain, by pressing a button.

- Why M Hash Layer2 Blockchain?

M Hash Layer2 Blockchain is a high-performance Layer 2 network built on opStack with an asynchronous consensus mechanism, separating consensus from execution to significantly boost throughput and efficiency while ensuring security and low-cost transactions.

# **Set Up Your Development Environment**

OnchainKit is a library of ready-to-use React components and Typescript utilities for building onchain apps. Run the following command in your terminal and follow the prompts to bootstrap your project.

npm create onchain@latest