How to Integrate OpenBlock Wallet With Mantle Network

10/24/234 min read

Mantleby Mantle

DeFi

Developers

Tutorials

How to Integrate OpenBlock Wallet With Mantle Network

This guide is intended for developers looking to integrate Open Block wallet functions for various use cases.

A quick shoutout to the OpenBlock team for their official documentation which served as the reference for this integration guide.

Before we begin, please use the link below for updated testnet and mainnet addresses. https://docs.mantle.xyz/network/for-devs/developing-on-mantle#network-details

EVM

OpenBlock DappSDK inject window.openblock into website。

Integration DappSDK

NPM

yarn add @openblockhq/dappsdk

View Documentation

CDN

    // load dappsdk at document start to speed up the initialization process
    // It is recommended to directly reference the following CDN link to facilitate instant SDK update. Developers are not recommended to download this JS file to their own server for use

    <div>
        <button id="sendETHButton">Send ETH</button>
    </div>
    <script type="text/javascript" charset="UTF-8" src="https://obstatic.243096.com/download/dapp/sdk/index.js">
    </script>
    <script type="text/javascript">=
        const sendETHButton = document.getElementById('sendETHButton');
        sendETHButton.onclick = async () => {
            const result = await openblock.request({
                method: 'eth_sendTransaction',
                params: [
                {
                    from: accounts[0],
                    to: '0xEC4fD89cf3aCf436Fe3be0310C3caa5834A04FE4',
                    value: '0x0',
                    gasLimit: '0x5028',
                    gasPrice: '0x2540be400',
                    type: '0x0',
                },
                ],
            });
            console.log(result);
        };
    </script>

TIP

  1. Use only the OpenBlock wallet and block other plugin wallets. For example, you can directly replace the global variable window.ethereum injected by the Metamask plugin with Window.OpenBlock:
window.ethereum = window.openblock;
  1. The OpenBlock wallet co-exists with other plug-in wallets. You can create a new Provider object when switching wallets, avoiding contamination of OpenBlock or Ethereum with assignment operations:
   let provider = Object.create(window.openblock);
   const OpenblockWallet = document.getElementById('OpenblockWallet');
   const MetaMaskWallet = document.getElementById('MetaMaskWallet');
   OpenblockWallet.onclick = async () => {
   provider = Object.create(window.openblock);
   ethersProvider = new ethers.providers.Web3Provider(provider, 'any');
   };
   MetaMaskWallet.onclick = async () => {
   if (window.ethereum) {
       provider = Object.create(window.ethereum);
   }
   ethersProvider = new ethers.providers.Web3Provider(provider, 'any');
   };
   const accounts = await provider.request({
       method: 'eth_requestAccounts',
   });

sdkLoaded

    const sdkLoaded = window.openblock.sdkLoaded;

version

    const version = window.openblock.version;

OpenBlock RPC API Methods

net_version

Returns the network ID associated with the current network.

  • Result: Network ID associated with the current network.
title:networkId
type:string

Examples:

  • Request:
{
    id: 1,
    method: "net_version "
}
  • Response:
{
    id: 1,
    result: "1"
}

eth_chainId

Returns the currently configured chain id, a value used in replay-protected transaction signing as introduced by EIP-155.

  • Result: hex format integer of the current chain id.
title:chainId
type:string

Examples:

  • Request:
{
    id: 0,
    method: "eth_chainId "
}
  • Response:
{
    "id": 0,
    "result": "0x1",
}

eth_getBlockByNumber

Gets a block for a given number

  • Params:
Parameter NameSummarytypeRequired
blockNumberblockNumber/blockNumberTagstringTRUE
includeTransactionsIf true it returns the full transaction objects, if false only the hashes of the transactions.booleanTRUE
  • Result: hex format integer of the current chain id.
type:object

Examples:

  • Request:
{
"method": "eth_getBlockByNumber",
"params": ["latest",false],
"id": 0
}

Response:

{
 "result": {
    "baseFeePerGas": "0x4a5418aba",
    "difficulty": "0x2f2e440990cb01",
    "extraData": "0x4b75436f696e506f6f6c21ad7e9019ea55b4aa",
    "gasLimit": "0x1c9c364",
    "gasUsed": "0x4638a1",
    "hash": "0x10be226bf192ab42155db0a0e946533fda9113b141f81dea915fd95da547d81d",
    "logsBloom": "0x2c282036744004824045898a80182228000a0000008001009890008210cb000260040800008808844908220020104105422048820a4418802a542d8a02390704281060374016180008005208025100a8820806481090603025000141e2c0048800048042c282300000a00140118098322031181080020442101114101090810028069010222e020140088402210823c50100240901200058006000d0005024029a00261f08813080009ae0800a0000400510004100000a820501042540c800004119c00e010a0ec02c080120007401d0006112c20317201400110900004a200000196020152308858198040890004d89412000042808885600000b8020202008",
    "miner": "0xd757fd54b273bb1234d4d9993f27699d28d0edd2",
    "mixHash": "0xd9746f14bdc78c7cfc1b0a7b63415f4ed9a9e5ad362abd18095f433c17cc1851",
    "nonce": "0xa5f534cb95eb17db",
    "number": "0xe4c1c3",
    "parentHash": "0xd9d8e92dc738abc931e812a9f04f8053d9bd5c6f33ac48a6d40bee4b394619ff",
    "receiptsRoot": "0xa56de219bd79cbab4b5d9ac91f4effb03c29f3796f472261e0e3a76558771fb0",
    "sha3Uncles": "0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347",
    "size": "0x46cb",
    "stateRoot": "0x9b8db6e9bf2be2459e5417b8264f7dd2b8e76336f2abedaab2c6125fc597eaf6",
    "timestamp": "0x62af5421",
    "totalDifficulty": "0xb083fd230e5ddc3f495",
    "transactions": [
        "0x2fc199d50601ef95b7048f5301eea3f54c0ad0f5bc735dabf35127af1c90adf3",
    ],
    "transactionsRoot": "0x4b2bfa207d13e692f83dea70031f7f0bb6c6b93f5824be91a6118ac6daf63fa9",
    "uncles": []
},
"id": 0
}

eth_requestAccounts

Returns an array of a single, hexadecimal Ethereum address string. Examples:

  • Request:
{
    id: 1,
    method: "eth_requestAccounts"
}
  • Response:
{
    id: 1,
    result: ["0xa6384d65b40afe4b3ad44c49fa65b55988109997"]
}

eth_accounts Returns an array of a single, hexadecimal Ethereum address string.

  • Examples:
  • Request:
{
    id: 1,
    method: "eth_accounts"
}
  • Response:
{
    id: 1,
    result: ["0xa6384d65b40afe4b3ad44c49fa65b55988109997"]
}

eth_sendTransaction

Creates new message call transaction or a contract creation, if the data field contains code.

  • Params: | Parameter Name | Summary | type | Required | | ------ | ------ | ------ | ------ | | transaction | | object | TRUE |

  • Examples:

  • Request:

{
    id: 1,
    "method": "eth_sendTransaction",
    "params": [
        {
        from: accounts[0],
        to: '0x0c54FcCd2e384b4BB6f2E405Bf5Cbc15a017AaFb',
        value: '0x0',
        gasLimit: '0x5028',
        gasPrice: '0x2540be400',
        type: '0x0',
        },
    ],
}
  • Response:
{
    id: 1,
    result: "0x8f8f2a230c9a4a49d4a78105ca2d7152496463673ddc3200aa43344818087717"
}

eth_estimateGas

Generates and returns an estimate of how much gas is necessary to allow the transaction to complete. The transaction will not be added to the blockchain. Note that the estimate may be significantly more than the amount of gas actually used by the transaction, for a variety of reasons including EVM mechanics and node performance.

  • Params: | Parameter Name | Summary | type | Required | | ------ | ------ | ------ | ------ | | transaction | | object | TRUE |

  • Examples:

  • Request:

{
    id: 1,
    "method": "eth_sendTransaction",
    "params": [
        {
        data: "0x5ae401dc",
        from: "0xe2101f6b5fe0855f7e5809766fcc2e6a985c2f00",
        to: "0x68b3465833fb72a70ecdf485e0e4c7bd8665fc45",
        value: "0x46651311744350",
        },
    ],
}
  • Response:
{
    id: 1,
    result: "0x25a48",
}

eth_getTransactionReceipt

Returns the receipt information of a transaction by its hash.

  • Params: | Parameter Name | Summary | type | Required | | ------ | ------ | ------ | ------ | | transactionHash | Keccak 256 Hash of the RLP encoding of a transaction | string | TRUE |
  • Examples:
  • request:
js
{
    id: 1,
    method: "eth_getTransactionReceipt",
    params: ['0x5151e5ba317753cdbbfab896f3eabdb01e3577f78d37398578198cf01ac6278e']
}

response:

js
{
    id: 1,
    result: {
        blockHash: "0xa59b17ecfe56635063b7d0427b528810bbf2f2886587b087e8f4cebf6a255f1b",
        blockNumber: "0xbda3c8",
        contractAddress: null,
        cumulativeGasUsed: "0x15e623",
        effectiveGasPrice: "0x3b9aca07",
        from: "0xe2101f6b5fe0855f7e5809766fcc2e6a985c2f00",
        gasUsed: "0x1f9fc",
        logs: (4) [{}, {}, {}, {}],
        logsBloom: ,"0x00000000000000000000000000000000000000004000000000000000000000400000000000000000000000200000001000000000000020000000000000000000040000000000000800000008100000008000000000000000000000008000000008000000000000000000000000000000000000000000000000000010000800000000000000000000000800000010000000000001000000000000000000000000000000000000100000000000000200000000000000000000000004000000000000000002000000000000000000000000000000000000000000001100000000000000200000000000000000000000080000002000000000400000000000000000",
        status: "0x1",
        to: "0x68b3465833fb72a70ecdf485e0e4c7bd8665fc45",
        transactionHash: "0x5151e5ba317753cdbbfab896f3eabdb01e3577f78d37398578198cf01ac6278e",
        transactionIndex: "0x11",
        type: "0x2"
    },
  }

eth_getTransactionByHash

Returns the information about a transaction requested by transaction hash.

  • Params: | Parameter Name | Summary | type | Required | | ------ | ------ | ------ | ------ | | transactionHash | Keccak 256 Hash of the RLP encoding of a transaction | string | TRUE |

eth_sign

  • Examples
  • Request:
{
    id: 1,
    "method":"eth_sign"
    "params":[accounts[0], '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0']
}
  • Response:
{
    id: 1,
    "result":'',
}

personal_sign

Presents a plain text signature challenge to the user.

  • Params: | Parameter Name | Summary | type | Required | | ------ | ------ | ------ | ------ | | Challenge | A hex-encoded UTF-8 string to present to the user. You can see how to encode a string like this in the module browser-string-hexer. | string | TRUE | | Address | The address of the requested signing account. | string | TRUE |
  • Examples
  • Request:
const from = accounts[0];
const msg = `0x${Buffer.from(exampleMessage, 'utf8').toString('hex')}`;
{
    id: 1,
    "method":"personal_sign"
    "params":[msg, from]
}
  • response:
{
    id: 1,
    "result":'',
}

wallet_switchEthereumChain

Creates a confirmation asking the user to switch to the chain with the specified chainId.

  • Examples
  • Request:
{
    id: 1,
    "method":"wallet_switchEthereumChain"
    "params":[
        {
            chainId: "5001",
        },
    ]
}
  • Response:
{
    id: 1,
    "result":null,
}

Wrap 🛑 Have doubts and need support? Join our Discord Server and ping the Dev Rel team for support or interact with other blockchain developers and fellow builders!

💪🏼 Not tired and want to keep building? Head over to https://www.mantle.xyz/blog/developers and check out an amazing list of tutorials to keep building cool dApps on Mantle Network!

Ciao! 👋🏼


Join the Community