Create Publication

We are looking for publications that demonstrate building dApps or smart contracts!
See the full list of Gitcoin bounties that are eligible for rewards.

Solution Thumbnail

Track your ALGO balance on Facebook using Manychat

Overview

Facebook is the most popular social platform on the web, with more than 2.8 billion active monthly users reaching 59% of the total social media users. While most of the users like to stay on the platform and communicate through Facebook Messenger. From this, I got the idea of implementing a chatbot capable of providing ALGO balance at any time quickly and effortlessly without requiring the users to leave Facebook and go to other websites to check for their balance. Also, if you have multiple wallets this solution will take the burden of checking the balance in each wallet. Another application for this solution is if you do a transaction to someone and he wants to quickly ensure that he received it, he can ask the bot directly and scope the balance changes.

Requirements:
1- Manychat account
2- Algorand account

Background

Youtube Demo Video

1- Create your own integration:

After Manychat registration, click on this link to create your app.
EditorImages/2021/06/02 13:18/pasted_image_0.png
Figure 1.1 - Creating your own application

Click on the “Create New Application” button. Then, you will redirected to this screen

EditorImages/2021/06/02 13:18/pasted_image_0_1.png
Figure 1.2 - Setting up your app

Name your app and upload your avatar as well
Type this code in JSON section:

{
  "auth": null,
  "actions": [
    {
      "name": "account_details",
      "forms": [
        {
          "name": "wallet",
          "type": "string",
          "title": "Your Wallet"
        }
      ],
      "title": "Get Your Wallet Balance",
      "guidance": "",
      "requests": [
        {
          "url": "https://api.algoexplorer.io/v2/accounts/[[wallet]]",
          "method": "GET",
          "headers": [
            "Content-Type: application/json"
          ],
          "mapping": [
            {
              "name": "amount",
              "path": "$.amount",
              "type": "string",
              "title": "Balance"
            }
          ],
          "payload": null
        }
      ],
      "description": "Get your wallet balance"
    }
  ]
}

EditorImages/2021/06/02 13:20/unnamed.png
Figure 1.3 - Algorand app completed

Click on “Save”

Install your application on your account by open this link in new tap
EditorImages/2021/06/02 13:20/pasted_image_0_2.png
Figure 1.4 - install your application on your account

2- Create your Own Custom Fields

Congratulations!, you have created your application. Now, let me show you how we will create custom fields in order to use this integration.
EditorImages/2021/06/02 13:21/pasted_image_0_3.png
Figure 2.1 - creating custom fields

From the left bar, select “Settings” then Click on “Fields”.
Click on “New User Field” button.

We will create 2 custom fields:
EditorImages/2021/06/02 13:22/pasted_image_0_4.png
Figure 2.2 - Creating Algo Balance custom fields

The first custom field is named by “Algo balance” and type is Number.
EditorImages/2021/06/02 13:23/pasted_image_0_5.png

Figure 2.3 - Creating AlgoWallet custom field

The second one is named by “AlgoWallet” and type is Text.

3- Using Integration In Chatbot Flows:

After you create your own flow, save user’s wallet in AlgoWallet field.

EditorImages/2021/06/02 13:24/pasted_image_0_6.png

Figure 3.1 - mapping response with custom fields

After this step, create an action to get the balance:
EditorImages/2021/06/02 13:24/pasted_image_0_7.png

Figure 3.2 - Connecting with Algorand blockchain

From actions list, select Algorand or “Your app name” to get the balance:
EditorImages/2021/06/02 13:25/pasted_image_0_8.png

Figure 3.3 - Setting up the integration

Map your Api response with custom fields to save the results.

Divide the response by 1,000,000 to get the result in Algo.
EditorImages/2021/06/02 13:25/pasted_image_0_9.png

Figure 3.4 - Getting balance in Algos

Now, you can show the balance to user by adding new message:
EditorImages/2021/06/02 13:26/pasted_image_0_10.png

Figure 3.5 - Sending response to the user

Click on “Publish” then click on preview to try your bot
EditorImages/2021/06/02 13:26/pasted_image_0_11.png
Figure 3.6 - Testing your integration

Now, you have everything on track! , you will be able to get you balance whenever you need without leaving your Facebook account

4- Get last transaction details using indexer API

In case you want to get the last transaction details, you should use indexer API and your final code must be like this:

{
  "auth": null,
  "actions": [
    {
      "name": "account_details",
      "forms": [
        {
          "name": "wallet",
          "type": "string",
          "title": "Your Wallet"
        }
      ],
      "title": "Get Your Wallet Balance",
      "guidance": "",
      "requests": [
        {
          "url": "https://api.algoexplorer.io/v2/accounts/[[wallet]]",
          "method": "GET",
          "headers": [
            "Content-Type: application/json"
          ],
          "mapping": [
            {
              "name": "amount",
              "path": "$.amount",
              "type": "string",
              "title": "Balance"
            }
          ],
          "payload": null
        }
      ],
      "description": "Get your wallet balance"
    },
    {
      "name": "last_transaction",
      "forms": [
        {
          "name": "wallet",
          "type": "string",
          "title": "Your Wallet"
        }
      ],
      "title": "Get Your Last Transaction",
      "guidance": "",
      "requests": [
        {
          "url": "https://algoexplorerapi.io/idx2/v2/accounts/[[wallet]]/transactions",
          "method": "GET",
          "headers": [
            "Content-Type: application/json"
          ],
          "mapping": [
            {
              "name": "amount",
              "path": "$.transactions[0].asset-transfer-transaction.amount",
              "type": "string",
              "title": "Transaction Amount"
            },
            {
              "name": "asset",
              "path": "$.transactions[0].asset-transfer-transaction.asset-id",
              "type": "string",
              "title": "Asset ID"
            },
            {
              "name": "receiver",
              "path": "$.transactions[0].asset-transfer-transaction.receiver",
              "type": "string",
              "title": "Receiver"
            },
            {
              "name": "transactionid",
              "path": "$.transactions[0].id",
              "type": "string",
              "title": "Transaction ID"
            },
            {
              "name": "fees",
              "path": "$.transactions[0].fee",
              "type": "string",
              "title": "Transaction Fee"
            }
          ],
          "payload": null
        }
      ],
      "description": "Get your wallet balance"
    }
  ]
}

After updating your app, you can review your changes by heading to flows builder and selecting “Get last transaction” action from menu:
EditorImages/2021/06/18 00:12/algo1.jpg Figure 4.1 - mapping the new action in order to get the last transaction

Now, just map your API response with a pre-made custom fields then click on “Save”

Test your flow and if you done everything correctly, you will get this response:
EditorImages/2021/06/18 00:17/algo2.jpg
Figure 4.2 - Bot response after successful implementation

Conclusion

The integration between Social media platforms and blockchain network will create a new way for millions of users to check the their blockchain assets using their preferred platform. Through this solution, users has the ability to check the balance of their ALGO wallets anytime by asking the chatbot and getting the result instantly.