Mantle Network

https://docs.mantle.xyz
Admin
Mantle Network is an EVM-compatible scaling solution for Ethereum, utilizing an optimistic rollup...
Tokens:134,041
Snippets:1,288
Trust Score:9.7
Update:9 months ago
Show doc for...
Tokens:
Raw
### Clone and Install Tutorial Dependencies

Source: https://docs.mantle.xyz/network/for-developers/how-to-guides/how-to-use-mantle-sdk/bridging-eth-with-the-mantle-sdk

This sequence of commands clones the Mantle tutorial repository, navigates into the specific cross-domain bridge example directory, and installs the necessary Node.js packages using Yarn. This prepares the environment for running the bridge script.

```sh
git clone https://github.com/mantlenetworkio/mantle-tutorial.git
cd mantle-tutorial/cross-dom-bridge-eth
yarn
```

--------------------------------

### Setup Local Development Environment

Source: https://docs.mantle.xyz/network/for-developers/how-to-guides/how-to-use-mantle-sdk/bridging-eth-with-the-mantle-sdk

This snippet clones the Mantle v2 repository, navigates to the ops directory, and uses `make up` to start the local L1 and L2 environments. It also includes a command to check the status of the running services. Ensure Docker is installed and running.

```sh
git clone https://github.com/mantlenetworkio/mantle-v2.git
cd mantle/ops
make up
# check status
make ps
```

--------------------------------

### Clone Mantle Tutorial Repository

Source: https://docs.mantle.xyz/network/network/for-devs/tutorials/bridging-usdmnt-using-mantle-sdk

Fetches the example JS scripts for Mantle SDK invocations from the Mantle Github repository. This requires Git to be installed.

```bash
git clone https://github.com/mantlenetworkio/mantle-tutorial.git
```

--------------------------------

### Create React App and Install Etherspot SDK

Source: https://docs.mantle.xyz/network/for-developers/resources-and-tooling/account-abstraction/create-a-smart-account-by-using-etherspot

This section provides commands to create a new React Native application and install the necessary Etherspot Prime SDK and ethers.js libraries. Ensure Node.js and npm are installed.

```bash
npx create-react-app etherspot-starter
cd etherspot-starter/
npm i @etherspot/prime-sdk --save
npm i ethers --save
```

--------------------------------

### Install Reown AppKit and Dependencies

Source: https://docs.mantle.xyz/network/for-developers/resources-and-tooling/wallet/reown

Installs the necessary Reown AppKit packages and related dependencies, including wagmi adapter and react-query, for Ethereum integration within a Next.js application.

```bash
npm install @reown/appkit @reown/appkit-wagmi-adapter wagmi @tanstack/react-query
```

--------------------------------

### Run Development Server using npm

Source: https://docs.mantle.xyz/network/for-developers/resources-and-tooling/wallet/reown

This command is used to start the development server for the application. It allows for live-reloading and hot module replacement during development.

```bash
npm run dev
```

--------------------------------

### Install Foundry using Docker

Source: https://docs.mantle.xyz/network/network/for-devs/tutorials/debugging-contracts-with-foundry

Pulls the latest Foundry Docker image from GitHub Container Registry. This is a convenient way to use Foundry without local installation.

```SQL
docker pull ghcr.io/foundry-rs/foundry:latest
```

--------------------------------

### Install Thirdweb CLI

Source: https://docs.mantle.xyz/network/for-developers/how-to-guides/how-to-deploy-smart-contracts/use-thirdweb-to-deploy-smart-contracts

Installs the Thirdweb command-line interface globally on your machine using npm. This tool is essential for managing and deploying smart contracts with Thirdweb.

```bash
npm i -g @thirdweb-dev/cli
```

--------------------------------

### Clone Tutorial Repository and Install Dependencies

Source: https://docs.mantle.xyz/network/for-developers/how-to-guides/how-to-use-mantle-sdk/bridging-mnt-with-the-mantle-sdk

This shell script clones the Mantle tutorial repository, navigates into the cross-domain bridge for MNT directory, and installs the necessary project dependencies using Yarn. This is a prerequisite for running the sample code.

```shell
git clone https://github.com/mantlenetworkio/mantle-tutorial.git
cd mantle-tutorial/cross-dom-bridge-mnt
yarn
```

--------------------------------

### Install Foundry on Windows

Source: https://docs.mantle.xyz/network/network/for-devs/tutorials/debugging-contracts-with-foundry

Installs the Foundry framework on Windows systems using Cargo, the Rust package manager. Ensure Rust is installed from rustup.rs before running this command.

```Bash
cargo install --git https://github.com/foundry-rs/foundry --bins --locked
```

--------------------------------

### Install Foundry on Linux/Mac

Source: https://docs.mantle.xyz/network/network/for-devs/tutorials/debugging-contracts-with-foundry

Installs the Foundry framework on Linux and macOS systems using a curl command and the foundryup utility. This is the recommended method for these operating systems.

```Bash
curl -L https://foundry.paradigm.xyz | bash
foundryup
```

--------------------------------

### Install Mantle Viem Library

Source: https://docs.mantle.xyz/network/for-developers/how-to-guides/how-to-use-mantle-viem/bridging-eth-with-mantle-viem

Installs the necessary mantle-viem library using npm or yarn. This is a prerequisite for using Mantle Viem functionalities.

```bash
npm i @mantleio/viem
```

--------------------------------

### Install Thirdweb into Existing Project

Source: https://docs.mantle.xyz/network/network/for-devs/resources-and-tooling/thirdweb-sdk

Adds the Thirdweb SDK to an existing project. This command allows developers to integrate Thirdweb functionalities into their current codebase.

```bash
npx thirdweb install
```

--------------------------------

### Create New Thirdweb Project

Source: https://docs.mantle.xyz/network/network/for-devs/resources-and-tooling/thirdweb-sdk

Initializes a new project with Thirdweb SDK pre-installed and configured. This command simplifies the setup process for new web3 applications.

```bash
npx thirdweb create
```

--------------------------------

### Create Next.js App for AppKit

Source: https://docs.mantle.xyz/network/for-developers/resources-and-tooling/wallet/reown

Command to create a new Next.js application. This command initializes a basic Next.js project structure that will be used to integrate Reown AppKit.

```bash
npx create-next-app@latest appkit-example
```

--------------------------------

### Initialize Hardhat with Older Version - Bash

Source: https://docs.mantle.xyz/network/network/for-devs/troubleshooting

Provides a command to install an older version of Hardhat (v2.14.0) to resolve contract deployment errors. This is a fallback if specifying the gas limit does not resolve the issue.

```bash
npx hardhat@2.14.0
```

--------------------------------

### Example Output of Contract Verification

Source: https://docs.mantle.xyz/network/for-developers/how-to-guides/how-to-verify-smart-contracts/use-foundry-to-verify-smart-contracts

This is a sample output demonstrating the process and status of a smart contract verification using Foundry. It shows the submission status, GUID, and final verification result.

```text
Start verifying contract `0xad4736AE3DB1E71375a27b7d8A634994921E3c04` deployed on mainnet

Submitting verification for [src/Counter.sol:Counter] 0xad4736AE3DB1E71375a27b7d8A634994921E3c04.
Submitted contract for verification:
        Response: `OK`
        GUID: `d5s2dhvr62tahsjez9cypxkxdcmpjagkkxxuqcp6dkyaizbp8n`
        URL:
        https://etherscan.io/address/0xad4736ae3db1e71375a27b7d8a634994921e3c04
Contract verification status:
Response: `NOTOK`
Details: `Pending in queue`
Contract verification status:
Response: `OK`
Details: `Pass - Verified`
Contract successfully verified
```

--------------------------------

### Create Wallet and Network Buttons using Reown AppKit (TypeScript)

Source: https://docs.mantle.xyz/network/for-developers/resources-and-tooling/wallet/reown

This snippet shows how to set up a basic UI for an application using Reown AppKit and Mantle. It includes a 'Connect Wallet' button and a 'Network selection' button which appears only after a wallet is connected. It utilizes the `useAccount` hook from `wagmi` to check the connection status.

```typescript
"use client";
import { useAccount } from "wagmi";

export default function Home() {
  const { isConnected } = useAccount();

  return (
    <main className="min-h-screen px-8 py-0 pb-12 flex-1 flex flex-col items-center">
      <header className="w-full py-4 flex justify-between items-center">
        <div className="flex items-center">
          <img src="/walletconnect.png" alt="logo" className="w-10 h-10 mr-2" />
          <div className="hidden sm:inline text-xl font-bold">Reown - AppKit + Mantle</div>
        </div>
      </header>
      <h2 className="my-8 text-2xl font-bold leading-snug text-center">Examples</h2>
      <div className="max-w-4xl">
        <div className="grid bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
          <h3 className="text-sm font-semibold bg-gray-100 p-2 text-center">Connect your wallet</h3>
          <div className="flex justify-center items-center p-4">
          <w3m-button />
          </div>
        </div> 
        <br></br>
        {isConnected && (
          <div className="grid bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
            <h3 className="text-sm font-semibold bg-gray-100 p-2 text-center">Network selection button</h3>
            <div className="flex justify-center items-center p-4">
              <w3m-network-button />
            </div>
          </div>
        )}
      </div>
    </main>
  );
}
```

--------------------------------

### Install Foundry using Foundryup

Source: https://docs.mantle.xyz/network/for-developers/how-to-guides/how-to-deploy-smart-contracts/use-foundry-to-deploy-smart-contracts

Installs Foundry, a toolkit for EVM development, using the Foundryup installer script. This is a prerequisite for using Forge and Cast.

```javascript
curl -L https://foundry.paradigm.xyz | bash

```

--------------------------------

### Install Node.js Dependencies

Source: https://docs.mantle.xyz/network/for-developers/how-to-guides/how-to-use-mantle-sdk/bridging-erc-721-tokens-with-the-mantle-sdk

This command installs the necessary Node.js packages for the project using Yarn, as defined in the package.json file.

```bash
yarn
```

--------------------------------

### Create a new Foundry project

Source: https://docs.mantle.xyz/network/for-developers/how-to-guides/how-to-deploy-smart-contracts/use-foundry-to-deploy-smart-contracts

Initializes a new Foundry project named 'hello_mantle' and sets up the necessary directory structure and configuration files for smart contract development.

```sh
forge init hello_mantle

```

--------------------------------

### Create AppKit Context Provider with Wagmi and React Query

Source: https://docs.mantle.xyz/network/for-developers/resources-and-tooling/wallet/reown

Initializes AppKit for Mantle network integration, sets up Wagmi for blockchain interactions, and provides React Query context. It requires a project ID and optional metadata. The provider wraps the application to manage wallet connections and blockchain state.

```typescript
'use client'

import { wagmiAdapter, projectId } from '@/config'
import { createAppKit } from '@reown/appkit/react'
import { mantle, mantleSepoliaTestnet } from '@reown/appkit/networks'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import React, { type ReactNode } from 'react'
import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi'

// Set up queryClient
const queryClient = new QueryClient()

if (!projectId) {
  throw new Error('Project ID is not defined')
}

// Set up metadata
const metadata = { //this is optional
  name: "appkit-example-mantle",
  description: "AppKit Example - Mantle",
  url: "https://mantleapp.com", // origin must match your domain & subdomain
  icons: ["https://avatars.githubusercontent.com/u/179229932"]
}

// Create the modal
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mantle, mantleSepoliaTestnet],
  metadata: metadata,
  features: {
    analytics: true, // Optional - defaults to your Cloud configuration
  },
  themeMode: 'light'
})

function ContextProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) {
  const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies)

  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig as Config} initialState={initialState}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  )
}

export default ContextProvider

```

--------------------------------

### Install Mantle Contracts Package

Source: https://docs.mantle.xyz/network/network/for-devs/tutorials/bridging-custom-erc20-tokens-using-standard-bridge

Installs the '@mantleio/contracts' package, which provides standard contract implementations for Mantle, including the L2StandardERC20 contract.

```bash
npm install @mantleio/contracts
```

```bash
yarn install @mantleio/contracts
```

--------------------------------

### Start Mantle Node using Docker Compose

Source: https://docs.mantle.xyz/network/for-node-operators/deployment-guides/mainnet-v1.4.2/deploying-a-rollup-verifier-replica-node-from-docker

This command starts a Mantle node using the `docker-compose-mainnetv2.yml` configuration file in detached mode. It's a straightforward way to bring the node services online.

```bash
docker-compose -f docker-compose-mainnetv2.yml up -d
```

--------------------------------

### Setup Gasless Transaction Environment with Viem and Biconomy

Source: https://docs.mantle.xyz/network/for-developers/resources-and-tooling/account-abstraction/how-to-send-gasless-transaction-by-using-biconomy

Imports necessary libraries from Viem and Biconomy to set up the environment for gasless transactions. This includes creating wallet clients, smart account clients, and defining chain configurations. Requires Biconomy API keys and Bundler URL.

```javascript
import {Hex, createWalletClient, http, parseEther} from 'viem';
import {privateKeyToAccount} from 'viem/accounts';
import {
  createSmartAccountClient,
  PaymasterMode,
  SupportedSigner,
} from '@biconomy/account';
import {mantle, mantleSepoliaTestnet} from 'viem/chains';

const biconomyTestPaymasterApiKey = 'Your Paymaster API Key';
const bundlerTestUrl = 'Your Bundler URL';

const privateKey = '0xxxxxxxx';
```

--------------------------------

### Deploy Smart Contracts with Foundry

Source: https://docs.mantle.xyz/network/network/for-devs/tutorials/deploying-contracts

This bash command deploys a smart contract to the Mantle testnet using Foundry's Forge tool. You need to provide the RPC URL, your private key, the contract path, and the contract name. The --legacy flag can be used if required for specific deployment scenarios.

```bash
forge create --rpc-url https://rpc.testnet.mantle.xyz --private-key <your-private-key> src/Storage.sol:Storage --legacy 
[⠢] Compiling...
No files changed, compilation skipped
Deployer: 0x...
Deployed to: 0x...
Transaction hash: 0x...
```

--------------------------------

### Create New Thirdweb Application (EVM)

Source: https://docs.mantle.xyz/network/network/for-devs/resources-and-tooling/thirdweb-sdk

Creates a new application pre-configured with Thirdweb's SDKs for EVM-compatible networks. This command streamlines the setup for applications targeting networks like Mantle.

```bash
npx thirdweb create app --evm
```

--------------------------------

### Install dotenv Dependency

Source: https://docs.mantle.xyz/network/for-developers/how-to-guides/how-to-deploy-smart-contracts/use-hardhat-to-deploy-smart-contracts

Installs the 'dotenv' library as a development dependency using npm. This library is used to load environment variables from a .env file into process.env.

```sh
npm install dotenv --save-dev

```

--------------------------------

### Create Thirdweb Contract Project

Source: https://docs.mantle.xyz/network/for-developers/how-to-guides/how-to-deploy-smart-contracts/use-thirdweb-to-deploy-smart-contracts

Initiates a new smart contract project using the Thirdweb CLI. It prompts the user for project name, framework (e.g., Hardhat), contract name, and contract type.

```bash
npx thirdweb create contract
```
Tokens:
Raw