Toolblox plugin for Bubble™

Toolblox plugin for Bubble™ offers deep integration:

• Connect to any blockchain wallet
• Upload images to (free) decentralized storage
• Execute actions of smart-contracts or query data of smart-contracts.

Example templates

Check out some of the examples here

Configuration

Configure connections

1. Click on Plugins -> Toolblox
2. Configure
   • WalletConnect Project Id (mandatory) - can be found here: https://cloud.walletconnect.com/
   • Web3Storage Token (optional) - can be found here: https://web3.storage/docs/how-tos/generate-api-token/
   • Toolblox API key (mandatory) - can be found here: https://app.toolblox.net/profile

Configure items

In Bubble™ to use items properties it needs to be first declared. For example if you wish to display "Diploma's name" in a Text element, Diploma needs to be declared as a type.

1. Open Plugins tab
2. Click on API Connector. If it is missing please add the free official Bubble™ plugin by clicking "Add Plugins"
3. Add API
   • API Name: Toolblox
   • Authentication: None
4. Add call
   • Name: <your item name here, for example Certificate>
   • GET: https://toolbloxfunctions-api.azure-api.net/api/Workflow/ItemDescription
   • Add parameter:
     • Key: url
     • Value: <your workflow name here - must match the name in Toolblox>
     • Private:
5. Click on "Initialize call". Check that all data-types make sense - correct if not detected properly.

Toolblox WalletConnect element

1. Drag and drop the "Toolblox WalletConnect" element onto your page.
2. Click on the element.
3. Choose "Insert dynamic data" -> "Get data from external API"
4. Choose "Toolblox API - Workflow configuration". Enter the Workflow URL, for example 'my_workflow_123' or use the full URL (starting with https:// etc). This workflow will only be used to load the correct blockchain. If on the page different smart contracts are used then the blockchain has to match.
5. Update the design as you see fit.

Toolblox Web3Storage element

1. Drag and drop the "Toolblox Web3Storage" element onto your page.
2. Update the design as you see fit.

Toolblox Workflow element

This is the main element which allows you to execute blockchain methods. Either to load or change data on blockchain. There can be multiple different Toolblox Workflow elements on a page.

1. Drag and drop the "Toolblox Workflow" element onto your page.
2. Choose the item configured in step Configure items.
3. Choose "Insert dynamic data" -> "Get data from external API".
4. Choose "Toolblox API - Workflow configuration". Enter the Workflow URL, for example 'my_workflow_123' or use the full URL (starting with https:// etc).

Usage

Available properties

These are the properties of the elements which can be used:

• Toolblox Workflow's Current item Set after action Execute transition or Load item has been executed.
• Toolblox Workflow's Item list Set after action Load latest items or Load page has been executed.
• Toolblox Workflow's Current cursor Updated during Load page action.
• Toolblox Workflow's Execution error Any errors occured during execution.
• Toolblox Web3Storage's CID Set after action Execute transition or Load item has been executed.
• Toolblox Web3Storage's URL Set after action Load latest items or Load page has been executed.
• Toolblox Web3Storage's error Any errors occured during upload.
• Toolblox WalletConnect's Wallet address Current users wallet address.
• Toolblox WalletConnect's Verified wallet Set after Verify wallet action.
• Toolblox WalletConnect's Verified digest Set after Verify wallet action.
• Toolblox WalletConnect's Verified signature Set after Verify wallet action.

Available events (to be used in Bubble workflows)

• Toolblox Workflow is ready Useful to load data on page open.
• Toolblox Workflow Transaction executed successfully
• Toolblox Workflow Transaction execution error
• Toolblox WalletConnect Wallet connected Useful to load data after wallet has been successfully attached.
• Toolblox Web3Storage Starting to upload
• Toolblox Web3Storage Uploading has finished
• Toolblox Web3Storage Error occured

Available actions (to be used in Bubble workflows)

• Toolblox Workflow Execute transition Executes smart-contract transactions and fills the Current item property. The parameters needed to run the action should be in the same order as defined in Toolblox:
• Toolblox Workflow Load latest items Loads latest items and fills the Item list property
• Toolblox Workflow Load item Loads one item and fills the Current item property
• Toolblox Workflow Load page Loads items as a page and fills the Item list and the Current cursor property
• Toolblox Workflow View Executes the view method of the smart-contract and fills the generic JSON result property.
• Toolblox WalletConnect Verify address Cryptographically proves the current user has read/write access to active wallet and fills Verified address, Verified digest and Verified signatureproperties. Can be used to store a verified address to Bubble.io User object to use in offline scenarios or to show verified metainfo about a wallet.

note

The Transition name in the action Toolblox Workflow Execute transition might not be the same as seen in Toolblox. The broad logic is that the first letter is not capitalized and all spaces are removed.

Some examples:

Transition name	->	'Transition name' in Bubble.io
Accept		accept
accept		accept
Accept proposal		acceptProposal
Accept Proposal		acceptProposal