Note: This documentation version is aimed at dApp developers who would like to connect to Metawallet. The code snippets are included as examples to facilitate quick integration. Tutorial links were added for beginners who may be interested to use Metawallet for their future dApps.
The Acent Metawallet is the native multi-crypto wallet of Decenternet which is tightly integrated to Decenternet's Osiris browser, a secure, blockchain-based web 3.0 browser with dApp rendering capabilities and multi-crypto wallet integration. Metawallet features multi-blockchain support and allows users to transact crypto through its user interface (UI) supporting wallet transactions such as send, receive, and view wallet balance.
This API aims to simplify the process of transacting and authorizing crypto financial transactions for web-based decentralized Apps (dApps).
The sections below detail Ethereum dApp development and interaction with the Ethereum blockchain. More blockchains and dApp capabilities will be integrated into Metawallet and documented here in the future.
When you install and run Metawallet, Metawallet creates "window.ethereum" object in the browser tabs which you can see in the developer console. This object allows websites to interact with Metawallet.
- Verifying If Metawallet is installed
With the "window.ethereum" object, you can verify whether the Metawallet is installed with the following Javascript snippet:
if (typeof window.ethereum !== 'undefined') {
// Metawallet is installed, add your logic here
} else {
// Metawallet is not installed, add your logic here to inform user to install Metawallet.
}
- Connecting to Metawallet
Your website can interact with Metawallet by connecting to it. This will give your website access to the Metawallet of the browser user with the user confirming transactions and actions to his Ethereum accounts via Metawallet.
We recommend that you provide a button to connect to Metawallet with the following sample snippets:
HTML:
<button class="metawalletButton">Connect to Metawallet</button>
Javascript:
const metaButton = document.querySelector('.metawalletButton');
metaButton.addEventListener('click', () => {
//Will activate Metawallet
ethereum.request({ method: 'eth_requestAccounts' });
});
You can try this snippet in JSfiddle (https://jsfiddle.net/decenternet/Lad9q27p/4/)
Here are some recommendations when connecting with Metawallet:
- Initiate a connection request in response to direct user action, such as clicking a button.
- Always disable the "connect" button while the connection request is pending
- Never initiate a connection request on page load.
- Displaying Metawallet Account
Once you are connected to Metawallet, the API method "eth_requestAccounts" will return a promise which will resolve to an array of Ethereum addresses once connected toMetawallet. The array's first entry is the active Ethereum account connected, which can be used as the reference account when sending transactions and processing actions.
The following snippets show how to get the active Ethereum account connected:
HTML
<button class="metawalletButton">Connect to Metawallet</button>
<h2>Account: <span class="showAccount"></span></h2>
Javascript
const metaButton = document.querySelector('.metawalletButton');
const showAccount = document.querySelector('.showAccount');
metaButton.addEventListener('click', () => {
getAccount();
});
async function getAccount() {
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
const account = accounts[0];
showAccount.innerHTML = account;
}
You can try this in this snippet in JSfiddle (https://jsfiddle.net/decenternet/3qjor1bL/6/)
The Ethereum blockchain provides low-level JSON-RPC APIs for dApps to communicate with it. There are Ethereum libraries that simplify creation/formatting of these low-level API messages into simpler and easier APIs. Some of these well-known libraries and frameworks are web3.js, ethers, truffle and embark. The most commonly used library is the web3.js.
Multi Wallet is compatible with the web3 APIs that are being used for metamask. You can use these APIs to create Ethereum web3 dApps.
See the official Web3 API documentation for a detailed usage of web3.js APis.
- Uniswap
Uniswap is a decentralized finance (DeFi) protocol that is used to facilitate the exchange of cryptocurrency tokens in the Ethereum blockchain.
Visit: Uniswap
- CryptoKitties
CryptoKitties is a dApp game that allows players to collect, breed, and trade (buy and sell) NFT cats.
Visit: CryptoKitties
New to dApps? Start learning using any of the tutorials below:
- Create A Simple Dapp
https://docs.metamask.io/guide/create-dapp.html#project-setup
- The Ultimate Ethereum Dapp Tutorial (How to Build a Full Stack Decentralized Application Step-By-Step)
https://www.dappuniversity.com/articles/the-ultimate-ethereum-dapp-tutorial
- Tutorial for building an Ethereum DApp with Integrated Web3 Monitoring
- Building a Decentralized Application (DApp) on the Ethereum Blockchain With JavaScript and Solidity