---
# System prepended metadata

title: Bagpipes

---

---
type: slide
description: ​""
---

# Bagpipes: build cross-chain flows in a no-code playground

* W3F grant to kickstart development
* Funded by Polkadot community grant in January
* https://x.com/BagpipesOrg

Goal is to be the no-code/ "Zapier for web3".
Connect ethereum to Polkadot for eg.

---

Team: Ramsey (Decentration) and Filip (Flipchan)

X: https://x.com/BagpipesOrg
Site: https://bagpipes.io/
Forum post: https://forum.polkadot.network/t/powerful-no-code-cross-chain-xcm-dapp-builder/4767

---

## What is it? 👀

- Tool to compose cross chain transactions
- Polkadot js on steroids
- Web2 no-code tool
- Drag and drop your next on-chain scenario
- interact with blockchains with no-code
- build dynamic workflows with no-code

---

## Scenario 1: "transfer > swap > transfer" all in one 

Send funds to HydraDx from Polkadot 
...swap DOT to USDT
...send USDT to Asset Hub. 

🔗: https://alpha.bagpipes.io/#/create/?diagramData=xTZV7yDcH

Note:
In Asset Hub "assets" we need to make sure we select the correct DOT, which is id: 1000, there is a fake DOT which is id: 5

---

## Step 1: Transfer 💳

Send DOT from Polkadot to HydraDx

### Step 2: swap 🫂

* Swap DOT for USDT
* _Usually, you'd have to go to two different platforms: hydra dx, asset hub and signing on all these platforms_
* With bagpipes we can do this in one workflow.

Note:
Select the chain. Tool bar of nodes. Select one node which can be any chain. Query a chain.

But the goal is not just that. It’s to query and to make extrinsics that you
Let’s you build workflows. Transaction scenarios.

---

### ... Step 2 steps

1. Drop a chain node and action node and a chain node
2. Connect them together chain > action > chain
3. Select action: "Swap" 
4. Fill in all the fields
5. Run the workflow 

Note:



---

### Step 3: Transfer

Tranfer from DOT to USDT

---

Note: Persist: soon you can persist a scenario meaning it can run constantly in the background. 
You can decide how you want it to persist it, scehduled jobs, or some kind of external trigger, such as a webhook at the beginningn of the workflow.  

---

### Finally: Run the workflow 

Click play

Note:MAKE SURE TO CLICK FETCH ON EACH ACTION

---


## Scenario 2: web hooks

* E.g you have a website that fetches data. You can use the webhook in your app. You can trigger a workflow based on someone sending data. HTTP GET or POST request. It allows you to make an API call.

Note:
We’re creating an endpoint so we can send data.
You create a key that can be used.

---

### Steps

1. Drag'n'drop a Webhook node from the Toolbar. 
2. Also drop a Query Chain node, for some balance change for e.g.
3. Now we need to execute this scenario to populate the pill. Then it can be used downstream
4. Create a tx that when webhook is called gets generated, eg system.remark_with_event
5. Run the workflow 

Note:
Webhook is receiving, it’s waiting to be triggered. And https request can make POST request. 

You can create template links! 

Query chain for referendum votes. Persist it so that every hour it will query the chain. Eg listen for a referendum. Get the proposal information. Tweet once its reached a certain threshold.

Pills: 
They get filled to be used for future tasks
Eg you query something and then you can use it in a transaction

No code for Web3. Like sending an email with variable.


---

## Scenario 3: Hello Bagpipe!

Web app queries blockchain for balance 

...using a bagpipe

🔗: http://alpha.bagpipes.io/#/create/?diagramData=mgEFz_P1m

---

### Step 1: webhook

1. Setting Up the Webhook
- Create a webhook with a name and an endpoint.
- Start listening for requests on the webhook.
- Send a test request to populate initial data.


Note: Webhook is receiving, it’s waiting to be triggered. And https request can make POST request. 

You can create template links! 

Query chain for referendum votes. Persist it so that every hour it will query the chain. Eg listen for a referendum. Get the proposal information. Tweet once its reached a certain threshold.

Pills: 
They get filled to be used for future tasks
Eg you query something and then you can use it in a transaction

No code for Web3. Like sending an email with variable.

---

### Step 2: Query Chain

- connect a Chain Query node to the webhook node.
- Select Polkadot > System > Account in the query chain node.
- Obtain the address and add into method field.

---

### Step 3: HTTP Request

- Call the ReactWithBagpipeServer with a response
- The body of the http request contains the free balance (free: {{free}})

---

### Step 4: Running the React with Bagpipe Project

- Fork the React with Bagpipe frontend and server repositories.
- Run both repositories.
- Update the frontend URL in the server's app.js CORS options.
- Update the API endpoint and port of the server in the frontend config file (app.jsx), and in the HTTP Node of the Bagpipe.

---