video1.0<iframe src="https://www.loom.com/embed/a48e4620e9324c72a19306cd90e0ff5e" frameborder="0" width="1152" height="864" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>8641152Loomhttps://www.loom.com8641152https://cdn.loom.com/sessions/thumbnails/a48e4620e9324c72a19306cd90e0ff5e-1717082643606.gif972.332Turn your app into Web3 app by creating a bagpipe that queries the blockchain, for a balance and feeds that balance to a front-end web app. ------ Ramsey, product engineer and co-founder @ https://bagpipes.io ----- 🔗 Get a template link to the Bagpipe created: https://alpha.bagpipes.io/#/create/?diagramData=ylbpK0NN1 🔗 Frontend mini app: https://replit.com/@decentration/ReactWithBagpipes#src/frontendConfig.js 🔗 Server: https://replit.com/@decentration/ReactWithBagpipesServer#index.js Creating a Bagpipe for Querying Blockchain Balance ### Objective: To create a bagpipe that queries the blockchain, specifically the Polkadot chain, for a balance and feeds that balance to a front-end web app. ### Key Steps: 1. **Create Webhook Endpoint**: - Create a webhook and copy the webhook endpoint link provided. - Then activate the webhook by clicking "Start listening" and sending data to it. 2. **Fork the Frontend and Backend with Repl.it**: - Connect a frontend web app and a Node.js server via the webhook. - Provide the frontend URL in the server config and the server URL and webhook endpoint in the frontend config. 3. **Send Data to Webhook**: - Use the frontend to send data to the webhook. - Activate the webhook by sending it initial data. 4. **Create Execution**: - Create an execution to fetch the balance. - Run the scenario to produce pills based on the data structure of the execution. 5. **Send Response to Frontend**: - Use the (downstream) HTTP Request node to send the response back to the website's Node.js server. - Make a POST request with the free balance pill to the server URL with necessary headers (content type, accept). ### Notes: - Ensure proper data flow from frontend to webhook to query chain node to backend server. - Check for errors in data transmission and response handling. - Verify the correctness of URLs, endpoints, and headers for smooth operation. ### Tips: - Use the provided templates for frontend and backend connections. - Test the process in a controlled environment before deploying to production. - Optimize the display of balance data for better user experience. - Reach out for support or clarification if needed via comments or email. By following these steps, you can efficiently create a "Bagpipe" to query blockchain balances and integrate them into your web application.