Cryptance - Crypto Wallet Block

About this Template


Introduction

Crypto is going mainstream with an explosion of financial services providers, and other institutions getting on board with cryptocurrency and blockchain.
A crypto wallet is a place where you can securely keep your cryptocurrency. It lets you buy, sell or transfer assets on the blockchain. A majority of crypto users use Metamask as their go-to exchange wallet for transacting cryptocurrency across the globe.
All wallet transactions and activity is public and transparent on the blockchain. Our Cryptance template allows one to connect one’s Metamask wallet and displays these records, making it easy to keep track of everything. It shows the user’s Metamask wallet total assets, as well as the balance of all the chains that Metamask supports. The users will also see all up-to-date transactions that happened to their wallets and a history of transactions.
Users can as well add chains and tokens right from the template to their Metamask wallet.
This block can be used as part of any no-code crypto platform, dashboard, etc.
Metamask is a chrome-based cryptocurrency wallet used to interact with the Ethereum and ERC-20 compatible blockchains. This plugin allows users to access their Ethereum wallet through a browser extension or mobile app, which can then be used to interact with decentralized applications. It's like a bridge that allows you to interact with blockchain-based applications
Note: Please first install the Metamask extension for your browser to start working with the Cryptance Template.

Features

  • Gets one’s Metamask wallet total assets
  • Shows the user’s balance of all the chains that Metamask supports
  • Displays detailed transactions history (transaction type & amount, date, sender, receiver, tx hash)
  • Possibility to add/choose a chain or token.
  • The template is made using the new Bubble responsive engine
Note: This template is using Login with Metamask and Metamask Advanced plugins by Zeroqode.

Video Overview

Demo

Give it a try here: https://zqcrypto1.bubbleapps.io/🤩

Setup Guide

Once you have bought or added a block to your account, you will see a dropdown in the New Application popup that lets you pick a template as the basis for the new application.
Note: This can only be done when you create a new app.
Image without caption
After you’ve selected a block you bought, complete the other fields with necessary data (i.e: Name of the new app, What kind of application you are building, etc) and press Create a new app.
💡
Tip: A template isn’t a theme for your app, but a pre-built set of elements and workflows. You can modify the template as you would modify another app.
Wait for Bubble to load the application with all the data.
Image without caption
After the application has loaded, you’ll see the Bubble assistant on the left side for New Application. You can close it or follow the assistant steps to adjust different settings.
Image without caption
Now you’re ready to go and dive into Bubble no-code development toolset.
Image without caption
Congrats! You have successfully created a Bubble app based on your block. Now, you can proceed with the setups.

API Connector setup

For set up, go to Plugins -> API Connector and hit to expand it, here:
Image without caption
The API will expand, where you will be able to configure it with your own API 🔑 keys, namely:
  • DeBank - We use Debank API in the template to display the user's balance. After purchasing the template, please:
    • register an account on Debank: https://open.debank.com/ ,
    • get your personal access key,
    • and insert it into AccessKey field.
The access key can be found on the admin tab of the open.debank.com profile.
Image without caption
Image without caption
Note: In case you would like to add additional API calls, please find supporting documentation here: https://docs.open.debank.com/en/reference/api-pro-reference/user
  • CoinGeko - We use Coingeko API in the template to display chains and coins. Their free API is freely accessible. No API call adjustment is required, all calls have been set up in accordance with the platform supporting documentation: https://www.coingecko.com/api/documentations/v3
  • Zapper - We use Zapper API in the template to display the history of transactions. After purchasing the template, please register an account on Zapper, get your own access key, and use it in the template.
General note: In the template, we have added 50 tokens only (due to the number of things limits for the templates), but we’ve prepared a .csv file with all the chains you can download and use to add them to the template.

Algolia Search V2.0

The searching feature within this block is powered by the Algolia Search V2.0 plugin by Zeroqode.

Prerequisites

For using the plugin you’ll need to get the API credentials from Algolia. Create your development account at: https://www.algolia.com/developers/
Note: For plugin setup, check out the plugin video Tutorial
Note: For more related information and API keys setup, please follow the plugin supporting documentation: https://docs.zeroqode.com/plugins/algolia-search-plugin/algolia-20-simple-search

Remove Banner

This template comes with a promotional banner above the Header element. Feel free to remove it from your app.
💡
Banner: See the instructions on how to remove the Zeroqode Banner in your template.

Things to Note

Note: If you would like to use this block within another app, please note that for proper functioning, it is required to create all relevant data types within your application database, and add required plugins. For reference, use the purchased block’s default template editor (Data -> Data Types) and Plugins tab.

MetaMask plugins

Metamask is a chrome-based cryptocurrency wallet used to interact with the Ethereum and ERC-20 compatible blockchains.
Note: For proper use, please be sure to have Metamask Extension installed on your browser and Metamask registered account.
A warning pop-up in this regard has been added to the index page, shown on page load.
To remove it, edit/delete the popup element and related workflows:
Image without caption
Image without caption

Login with Metamask plugin

We use the “Login with MetaMask” plugin to enable users to connect the user’s Metamask wallet to the template (using Metamask browser extension).
Note: find more information about the plugin on Zeroqode: https://zeroqode.com/plugin/login-with-metamask-1640735573319x248395696048814270

Advanced MetaMask Plugin

We use the MetaMask Advanced plugin to interact with the user’s Metamask wallet and add coins and chains to the wallet directly from the Cryptance Template interface.
This plugin made by Zeroqode allows users to access their Ethereum wallet through a browser extension or mobile app, which can then be used to interact with decentralised applications. It’s like a bridge that allows you to interact with blockchain-based applications.
Note: find more information about the plugin on Zeroqode: https://zeroqode.com/plugin/metamask-advanced-1646308227725x374792546591918200
Note: It is a paid plugin. To be able to use it, the plugin needs to be purchased (one-time payment or a monthly subscription) via Bubble’s marketplace.
If you do not want to use it, simply remove the plugin from the template.

Pages Overview

index

This is the main page of the template. Here, users can view the balance of their Metamask wallet as well as the list of all their recent transactions and Metamask actions tab (it enables to add network and add custom coins from the template right to the Metamask wallet).
Image without caption

Data Types

Blockchain

This data type is used to add new chains.
Field Name
Type
Notes
algoliaChainID
text
This field is used to display the name of chain in Algolia search.
blockExplorerURL
text
This field is used to redirect user to a site with details of transactions.
chainID
text
This field stores chain ID.
currencySymbol
text
This field is used to display currency symbols.
logo
image
This field contains the currency’s logo.
name
text
This field stores the blockchain’s name.
newRPCurl
text
This field contains the chain’s RPC url.
Note: The data type has a privacy rule applied. See the 💬 in the database under the privacy section for details.

Coinslist

This data type stores a list of coins.
Field Name
Type
Notes
chain
List of Blockchains
This field is used to display list of Blockchains
coinBlockchain
List of Token Smart Contractses
This field contains List of Token Smart Contracts
name
text
This field is used to display coin’s name
symbol
text
This field is used to display coin’s symbol.
Note: The data type has a privacy rule applied. See the 💬 in the database under the privacy section for details.

Contact

This data type is used to display the user’s name and wallet ID for transaction details.
Field Name
Type
Notes
name
text
This field displays the user’s name.
walletsId
List of texts
This field contains the list of user’s wallet IDs.

Token Start Contracts

This data type contains token smart contracts.
Field Name
Type
Notes
address
text
This field is used to display contract’s address
blockchain
text
This field is used to display blockchain.
Note: The data type has a privacy rule applied. See the 💬 in the database under the privacy section for details.

User

This data type contains information about the user.
Field Name
Type
Notes
contact
List of Contacts
This field contains the list of user’s contacts.
metamaskID
text
This field contains the user’s Metamask ID.
wallets
List of User’s Wallets
This field contains the list of users’ wallets.
Note: The data type has a privacy rule applied. See the 💬 in the database under the privacy section for details.

User’s Wallet

This data type stores information about the user’s wallet.
Field Name
Type
Notes
walletID
text
This field stores user’s wallet ID.

Release Notes

Update: 10 August 2022

LOTS OF GOOD STUFF🎉
  • 🎉 New block documentation
  • 🔌 Added instructions for all plugins
  • 💳 Added payment setup guidance
Note: Block updates don’t apply to the apps which were built on the template prior to updates becoming available.
💡
Tip: To check changes in workflows and design, you can create a new block copy and compare the settings (design/workflow) of the new copy and the app you have. So you don’t have to “move” your customizations from your already edited template to the new block copy.

Ready to move further?

Enhance your app with powerful plugins

🔌 Zeroqode Plugins: add Superpowers to your App

Zeroqode Air Native plugin

Note: This template has Zeroqode Air Native plugin installed. With the plugin you will be able to integrate all the native features into your Bubble app: Touch ID & Face ID, Push Notifications, Camera & Gallery Access, and many others. To be able to use all the native features, the plugin needs to be purchased (one-time payment or a monthly subscription) via Bubble’s marketplace.
The Air Native plugin allows you to implement the native features within your Bubble editor, but in order to convert the Bubble app into native Android and iOS, it is required to use the Air Native service.
If you do not want to use it, simply remove the plugin from the template.

Zeroqode Air Bundle plugin

Note: This template has Zeroqode Air Bundle plugin installed. It contains six most commonly used and complex plugins that will easily extend your application. To be able to use it, the plugin needs to be purchased (one-time payment or a monthly subscription) via Bubble’s marketplace.
If you do not want to use it, simply remove the plugin from the template.

Boost your Bubble skills within our Lab

🎓 Zeroqode Lab: no-code Courses and Tutorials