How to Integrate OpenBlock Wallet With Mantle Network
10/24/234 min read
by Mantle
DeFi
Developers
Tutorials
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
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
- 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;
- 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 Name | Summary | type | Required |
---|---|---|---|
blockNumber | blockNumber/blockNumberTag | string | TRUE |
includeTransactions | If true it returns the full transaction objects, if false only the hashes of the transactions. | boolean | TRUE |
- 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! 👋🏼