MetaMask

In this doc, dapp developers can learn about the integration of MetaMask into their Rangers Protocol dapp with web3.js.

MetaMask is an open source Ethereum wallet that helps users easily manage their digital assets.In addition, it can help test smart contract functions, support most Dapps, be compatible with hardware wallets, and send coins with one click.

MetaMask holds a dialogue with Web3 RPC or API on the Rangers Protocol node, and the MetaMask connection is based on a similar Ethereum function, it is possible to reconfigure MetaMask in a way similar to Ethereum. That is, in the settings of MetaMask, you can access a node based on the Rangers Protocol by adding a new network.

web3.js config

Step 1 Install web3

In order to better serve the dapps on Rangers Protocol, it is recommended that you install web3 under your DApp. Learn how to add web3.js into your dapp here.

npm install web3 --save

Step 2 Web3 Call

Create a new file named “web3.js” and paste the following code into it

 const web3 = new Web3(Web3.givenProvider || "<https://robin.rangersprotocol.com/api/jsonrpc>");


 export const contractDeploy = async (abi) => {
  let contract0Binary = '608060405234801561001057600080fd5b507f1f61fd9dd9c9696ab5bc318a94aa0b166e72294a1f6fb73fb544ef66dc92dd576040518080602001828103825260038152602001807f616263000000000000000000000000000000000000000000000000000000000081525060200191505060405180910390a1610316806100886000396000f3fe608060405234801561001057600080fd5b50600436106100575760003560e01c80630a8e8e011461005c5780631ad7be821461007a57806366e41cb71461010f5780636b59084d146101315780638f0d282d1461014f575b600080fd5b6100646101d2565b6040518082815260200191505060405180910390f35b6100826101db565b604051808481526020018060200183151515158152602001828103825284818151815260200191508051906020019080838360005b838110156100d25780820151818401526020810190506100b7565b50505050905090810190601f1680156100ff5780820380516001836020036101000a031916815260200191505b5094505050505060405180910390f35b61011761022a565b604051808215151515815260200191505060405180910390f35b610139610263565b6040518082815260200191505060405180910390f35b6101576102a4565b6040518080602001828103825283818151815260200191508051906020019080838360005b8381101561019757808201518184015260208101905061017c565b50505050905090810190601f1680156101c45780820380516001836020036101000a031916815260200191505b509250505060405180910390f35b6000607b905090565b600060606000607b60018191506040518060400160405280600481526020017f617364660000000000000000000000000000000000000000000000000000000081525090925092509250909192565b6000600115157f80255c575434223f7207fd83b26cb59a897298231ad7ac818ae3495e741e4d4160405160405180910390a26001905090565b60007f8e117c8dc7842a9f68ac9c5b765eb834d357ef0d2d0b6a834e5e0613d29f3b836101c86040518082815260200191505060405180910390a142905090565b60606040518060400160405280600581526020017f313233343500000000000000000000000000000000000000000000000000000081525090509056fea265627a7a7231582070566f81f81535fc569d6931966a5d0f2539b5f2d0910c71f4b71fd14853ff7564736f6c63430005110032';
  let contract = new web3.eth.Contract(abi);
  try {
    const address = await web3.eth.accounts.wallet.add('f987bba2f33643549b1b621f0570724***cbae8ca750388c6edaca67a1ddd410');
    const newContractInstance = await contract
          .deploy({data: contract0Binary})
          .send({
              from: address.address,
              gasLimit:666000,
          }); 
    console.log(newContractInstance)
  } catch (error) {
    console.log(error);
  }
}

The web3 instance in the above code requests access to the MetaMask account by detecting a global object (ethereum or web3) injected by MetaMask. According to the Metamask API Documentation : MetaMask injects a global API into websites visited by its users at window.ethereum. This API allows websites to request users' Ethereum accounts, read data from blockchains the user is connected to, and suggest that the user sign messages and transactions. The presence of the provider object indicates an Ethereum user. In simple terms, it can help instantiate our web3 object.

Metamask Wallet Setup

Set MetaMask on your browser

• Metamask provides plug-in functions that can be used in the browser, which greatly frees up your computer memory. It supports chrome, firefox, edge and Brave. The following will use chrome as a tutorial. In the chrome web store, search for MetaMask in the chrome web store

• click “add to chrome” , then MetaMask will be download automatically Create a wallet

• Create password

• Secure your wallet, watch a video to learn how to keep your wallet safe.

• Reveal and remember your secret recovery phrase

• Test

• Confirm and All done!

Export private key

• Enter the MetaMask homepage and click“Account details”

• Export the private key

• Enter your password and get private key

Add the Rangers Protocol into MetaMask

• The necessary step of sending transaction is to add the Rangers Protocol into the MetaMask, and the detailed demonstration instructions would be helpful when in practice.