Web3 & MetaMask - Bubble plugin
Get PluginAll our plugins
  • Overview
  • Quick Start Example
  • Elements details
    • Web3 & MetaMask
      • Connect To MetaMask
      • Disconnect MetaMask
      • Send token With MetaMask
      • Get Balance of a Token
      • Get Balance of Multiple Tokens
      • Get Token Symbol
      • Sign
      • Check signature
      • Sign Typed Data
      • Check signature-Typed Data
      • Smart Contract - Read
        • Example - CAKE/BUSD rate on Pancaksewap
      • Smart Contract - Write
        • Example - Write a function
      • Trigger Switch Chain
      • Approve - Set Allowance
      • Revoke Allowance
      • Deploy Contract
      • Add Chain to MetaMask
      • Get NFT Metadata
      • Check NFT Balance
      • Smart Contract - Read
      • Smart Contract - Write
    • Web3 Utils
      • Get Transaction confirmations
      • Get Transaction Details
      • To Wei
      • From Wei
      • Add Token to MetaMask
      • Get ENS data
      • Get ENS Domain from Address
  • Use with other Wallets & Plugins
  • Sign up a user with signature
  • How to use on Mobile
Powered by GitBook
On this page
  • Connect to MetaMask
  • Sign and save Signature

Quick Start Example

Simple example of how to connect the plugin and sign a message to get the signature.

PreviousOverviewNextWeb3 & MetaMask

Last updated 2 years ago

This is a simple example of how to connect MetaMask and sign a message, you don't have to do it in the exact same way.

Connect to MetaMask

1. Add the Web3&MetaMask plugin element on the page.

2. Add a button, open workflow on Button click and add Connect To Metamask action

3. Add a text element on the page, to show the connected wallet address.

4. In the text element, click on Insert dynamic data

5. Find Web3&Metamask element in the list and select it. A dropdown with all element states will open, choose Wallet Address

Done! You can now connect your app to MetaMask!

Sign and save Signature

Let's say you need to save the users signature somewhere for later use. You can run the action to sign a message similar to how we did the connection, on button click, or, for example, when an event is triggered. Most real-world use case is to sign a message right after the wallet connection so that's what we will do 1. In the Workflows, add the event MetaMask Connected from Web3&MetaMask element

2. In the actions, similar to how we added Connect action earlier, find the Sign action and add it. You need to add a message to be signed, it can be anything, including dynamic data like today's date or app name.

3. Add another event called, Signed this will trigger only after the user will sign the message 4. Now here the signature will be available to you, let's save it in a custom state to use later. Add an action to Set state, select any element on the page where the state will be "attached to", and create a custom state of text type.

Creating custom states is a Bubble standard feature, it is not related to the plugin

5. In the state value, select This Web3&Metamask Sign: Signature state

For this example, I will add the saved signature in the text element to be shown to the user.

Saving signature in your own custom state or database is important because the plugin signature state will be re-written if you will run the sign action again somewhere else.

Done! This example is available If you have questions or need additional help, feel free to ask in our Discord:

here
https://discord.com/invite/HWfg853N6d