logo

How to Use the IBC Idea Builder to Visualize IBC-Powered Workflows

avatar
IBC Protocol
October 3, 2024
8 Min
article cover image

Introduction

The IBC Idea Builder is an easy-to-use, no-code flowchart maker that helps you visualize and ideate your IBC-powered cross-chain ideas. In this walkthrough guide, you will learn how to access the Idea Builder, use its helpful templates to jumpstart your idea, and other tips and tricks to help you ideate on IBC-powered workflows.

For IBC Ideathon participants, an exported idea link from the IBC Idea Builder is required in your DoraHacks BUIDL to be eligible for prizes. Dorahacks BUIDL submissions are handled on the Dorahacks site.

Step 1: Access the IBC Idea Builder

Go to ideabuilder.ibcprotocol.dev and you will see a brief tutorial showing how to use the menus to drag and drop components onto the canvas, how to rename, delete, and save your idea, and how to export your idea as a link and as an image. You will also see a list of key commands to help navigate the Idea Builder and make creating your design as simple as possible.

how-to-use-the-ibc-idea-builder-step-1.png
The tutorial appears the first time you visit ideabuilder.ibcprotocol.dev.

Step 2: Select a Template

You will see a default view when you first start your idea. Delete this so you can start with a clean slate and browse through the IBC workflow templates we’ve provided in the Idea Builder at the bottom left of your screen. These templates are all features that are inherently available with IBC. We’ve mapped them out for you so you can easily see how they work. Choose from:

  • Token Transfer
  • Transfer + Action
  • Cross-Chain Account Control
  • Query Data

Each template comes with a tooltip description when you mouse over the “i” sign and a link to GitHub if you want to explore the feature further or analyze the code.

how-to-use-the-ibc-idea-builder-step-2.png
How to select a template for a cross-chain workflow.

Step 3: Familiarize Yourself with the Idea Builder Menu

Before you begin to modify the template, familiarize yourself with the actions and components of the Idea Builder in the menu at the bottom. In “Cross-Chain,” you will find additional simple cross-chain actions, such as “NFT Transfer,” “Callback,” or “Rate Limits” depicted with a simple line and title. In the “Component” section, you can add shapes to your idea, and click on “Lines” to connect the shapes using lines and curves. The “Text” section allows you to add titles and text to your idea, and in “Images” you can upload a custom image, such as a logo, from your computer.

how-to-use-the-ibc-idea-builder-step-3.png
Cross-chain actions you can select from the Builder.

Step 4: Modify a Template

Modifying the template is easy. Simply mouse over the area you want to change and select the three-dot option at the top. This will drop down the actions you can take to modify the template, such as changing the color or its position on the canvas.

how-to-use-the-ibc-idea-builder-step-4.png
Clicking the three dots will open a style menu.

Step 5: Save and Export Your Idea

Your ideas are automatically saved in your browser cache. Do not delete your cache, as you will lose your idea, or simply save your idea and export it for storage outside of your cache.

Once your idea is ready, you will need to create an export link to submit to DoraHacks. First, rename your idea from the default title to the title of your idea. You can do this at the top left-hand side of your screen by clicking on the pencil icon, deleting the existing text, and writing your idea name. Click “Save.”

how-to-use-the-ibc-idea-builder-step-5.png
Rename your idea at the top left of the screen.

Next, click on the three-line drop-down at the top-left of the screen and select “Share Idea.” The Idea Builder will ask you if you are sure. Click “Yes, share” and an IPFS link will be generated. Click on the blue icon on the right-hand side to copy the link.

how-to-use-the-ibc-idea-builder-step-5-bis.png
Get a shareable link by heading to the file menu > share idea.

Finally, you will need to add the IPFS link to your DoraHacks BUIDL as a social link. We set it up this way so that you don’t have to create a social account for your idea. Be sure to fill out all the other required information in your DoraHacks submission and make sure that your idea meets the rest of the judging criteria.

Other Helpful Tips and Tricks

The Idea Builder also lets you import an idea as an image or a link. Simply navigate to the three-line dropdown and click on “Import” to select your idea. You can reset the Idea Builder at any time to start from the beginning and restart the tutorial. Select “Reset Application” from the dropdown. You can also create new flows and have multiple flows in your Builder by clicking on the current idea at the top and selecting “Create New Flow.”

That’s it! We’re thrilled to have you take part in Ideahacker’s Guide to IBC and look forward to receiving your submission. You can get support for the Ideathon in the Interchain Discord in the Ideahackers channel. Register for Ideahacker's Guide to IBC on Dorahacks and visit the main Ideahacker's Guide to IBC site for more information on the event, prizes, and tracks.

avatar
IBC Protocol
The Inter-Blockchain Communication Protocol (IBC) is the most widely adopted trust-minimized, permissionless, and general messaging-passing protocol.

Recent Articles

Cover for Getting Started With IBC: Understanding the Interchain Stack and the Main IBC ImplementationsGetting Started With IBC: Understanding the Interchain Stack and the Main IBC Implementations
This article aims to provide an overview of IBC and its main implementations, ibc-go and ibc-rs, as well as other components of the Interchain stack, namely CometBFT and the Cosmos SDK.
avatar
Adi Ravi Raj
October 16, 2023
5 Min
Cover for Winners of the IBC Ideathon, Ideahacker's Guide to IBCWinners of the IBC Ideathon, Ideahacker's Guide to IBC
Announcing the winners of the first-ever IBC Ideathon, Ideahacker's Guide to IBC!
avatar
IBC Protocol
November 15, 2024
4 Min
Head to our Github to begin.

Ready to get started?