# Overview

**FYI We are still working on completing this documentation.**

This is a plugin for bubble.io platform made by [NovaBloq](https://novabloq.com/)\
It allows to use web3.js and MetaMask SDK without code to build a modern web3 app.\
Despite the name, it also can connect to other Web3 wallets besides the MetaMask.\
See details about it [here](https://docs.novabloq.com/web3-metamask/use-with-other-wallets-and-plugins)

{% hint style="success" %}
In case you are new to Bubble, see the video tutorial below before continuing.
{% endhint %}

{% embed url="<https://youtu.be/E2kpCecHmK8>" %}

{% embed url="<https://discord.gg/HWfg853N6d>" %}
Our team is active on Discord. Join for discussions and support
{% endembed %}

## Here you will find all demo pages for this plugin:

<https://web3-demo.bubbleapps.io/version-test/>

This page contains a list of all available demo pages for this plugin. We did a separate page for each mostly requested feature. Take a look on how it works, also open it in the app editor to see the workflow.

## Plugin Features

The plugin has 2 elements to separate the main features from the optional additional features.

<details>

<summary>Web3 &#x26; MetaMask - main element</summary>

All Features in this element:

* [Connect to MetaMask wallet](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/connect-to-metamask)
* [Disconnect MetaMask](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/disconnect-metamask)
* [Send any token to an address](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/send-token-with-metamask)
* [Get Balance of any token](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/get-balance-of-a-token)
* [Get Balance of a list of tokens](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/get-balance-of-multiple-tokens)
* [Check NFT Balance](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/check-nft-balance)
* Check multiple NFTs Balance at once
* [Get Token Symbol](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/get-token-symbol)
* Check Allowance
* Approve (Set Allowance)
* [Revoke Allowance](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/revoke-allowance)
* Transfer From
* [Smart Contract Interaction - Read](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/smart-contract-read)
* [Smart Contract Interaction - Write](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/smart-contract-write)
* Deploy a Smart Contract
* Detect connected chain and on chain changed
* [Sign](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/sign)
* [Sign Typed Data (EIP-712) (v.4)](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/sign-typed-data)
* [Check signature](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/check-signature)
* Send Transaction
* [Get NFT Metadata](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/get-nft-metadata)
* Transfer NFT to another wallet
* [Trigger change network popup in MetaMask](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/trigger-switch-chain)
* Import a custom token
* Wrap/Unwrap ETH to WETH
* [Trigger Switch Chain](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/trigger-switch-chain)
* [Request to add a Chain to MetaMask](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask/add-chain-to-metamask)

See details for each feature in the [Elements section](https://docs.novabloq.com/web3-metamask/elements-details/web3-and-metamask)

</details>

<details>

<summary>Web3 Utils - optional element</summary>

Optional element, it will add additional useful features to your app\
\
All Features in this element:

* [Convert To Wei](https://docs.novabloq.com/web3-metamask/elements-details/web3-utils/to-wei)
* [Convert From Wei](https://docs.novabloq.com/web3-metamask/elements-details/web3-utils/from-wei)
* Check Is Address
* Get Gas Price
* Get Latest Block Number
* Extract contract ABI
* [Get Transaction confirmations](https://docs.novabloq.com/web3-metamask/elements-details/web3-utils/get-transaction-confirmations)
* [Get Transaction Details](https://docs.novabloq.com/web3-metamask/elements-details/web3-utils/get-transaction-details)
* Get Unix Timestamp
* Open MetaMask App (Deep link for mobile)
* Convert Hex to Number and vice versa.
* Convert List of Numbers to Hex
* Convert Ascii to Hex
* Subscribe to Smart Contract Events
* Subscribe to New Block mined event (Can be used as a timer to check for changes on the blockchain)
* [Request to add custom token to MetaMask](https://docs.novabloq.com/web3-metamask/elements-details/web3-utils/add-token-to-metamask)
* [Get Transaction Details](https://docs.novabloq.com/web3-metamask/elements-details/web3-utils/get-transaction-details) (Amount sent, Receiver, Contract used, Timestamp, Full JSON data)
* Get Avatar from MetaMask Wallet
* [Get ENS Domain from Address](https://docs.novabloq.com/web3-metamask/elements-details/web3-utils/get-ens-domain-from-address)
* [Get All text records from an ENS name (Email, Avatar, Url, Twitter, etc.)](https://docs.novabloq.com/web3-metamask/elements-details/web3-utils/get-ens-data)

See details for each feature in the [Elements section](https://docs.novabloq.com/web3-metamask/elements-details/web3-utils)

</details>

{% hint style="info" %}
Make sure to **add the element on the page** **not inside a group** or popup!
{% endhint %}

{% hint style="info" %}
Adding more than 1 of each element on the page may result in errors.
{% endhint %}