Docs

# Integrating bApps to Palettes

A key feature of any dapp is the ability to make transactions on the blockchain, such as transferring tokens or making a swap. In Blockwell Palettes, this is done through Blockwell's bApp system.

We'll use the simple public Palette in this guide.

# Adding a bApp Block

You can create a bApp (opens new window) or find an existing bApp (opens new window) to use in your Palette, but for this guide we'll use a standard bApp for sending ERC-20 tokens.

Whatever bApp you're using, the main thing you'll need to integrate it into your Palette is its shortcode. This is 6 random numbers and letters that identifies the bApp. For sending ERC-20 tokens, the shortcode is send20.

First, click Edit Palette in the top-left corner to open the Palette editor, and then click the blocks tab Blocks in the top-right corner. Drag the bApp block to the palette:

Add bApp Block

The bApp block is actually a combination of multiple blocks that get added as a group:

bApp Block

The group consists of a layout that holds three different components:

  • The bApp submit button is on the left.
  • A Completed text and explorer link.
  • A spinner to indicate the transaction has been submitted.

You'll notice that the completed and spinner components have a gray striped Blocks background. This indicates that those pieces would be hidden in the Palette if you weren't in the editor. You can verify that by closing the editor:

Hidden Blocks

The two hidden pieces are inside conditional blocks that only show up when the specified condition is met. With the dumbapp blocks, the Completed is only shown when a transaction has been completed and the spinner is only shown when the transaction is still pending.

TIP

The bApp is added as a group in order to allow you to make any changes you'd like to it, you can even delete the parts you don't need.

# bApp Configuration

Configuring the bApp itself is done by selecting the "Submit" button itself, which is the main bApp block, and opening the Block Settings Blocks Settings tab in the top-right corner.

TIP

The internal name for bApps is dumbapp, which you will see in a few places.

# Shortcode

send20 bApp

The first configuration is the shortcode of the bApp, which we'll set to send20. After typing it, the purple Current Value box will update to reflect the name of the bApp, which in this case is Transfer Tokens.

# Arguments

After entering the shortcode, the Arguments for the referenced bApp will be listed. The first argument for the send20 bApp is the "chain", which specifies what chain the token is on.

Chain Argument

Every argument has a type, which can be one of four values:

  • Form leaves the value for the user to enter when they're using the bApp.
  • Fill is the same as Form, but lets the user edit the value before submitting.
  • Variable will load the argument from a Palette variable.
  • Constant uses a value you set in this argument configuration.

The "chain" and "contract" arguments tell the bApp which ERC-20 token is being sent. We'll use the existing contract variable for both values as follows:

Chain and Contract

The purple Current Value boxes will update to show that the variables are being loaded correctly.

The "to" and "value" arguments we'll leave for the user to fill, so they can specify where and how many tokens to send:

To and Value

# Label

The label for the button is just "Submit" by default, but that can be changed:

To and Value

# bApp Submission Variable

The last configuration in a bApp is the name of the variable to store data in when the user uses the bApp:

To and Value

The submission variable has all the available details of both the bApp submission and the corresponding transaction on the blockchain. Use the auto-complete features of the Palette editor to explore all the different values available, but there is also a list in the block reference.

# Next Up