Skip to content

Token Gated Chat Tutorial

Jump to bottom
Mike M edited this page May 19, 2022 · 6 revisions

This token gate chat tutorial aims to showcase how a non fungible token can be used to grant or refuse user access to a chatroom.

Prerequisites

  • A crypto wallet installed on an iOS device
  • Etherscan API key
  • Access and familiarity with LiveLike CMS

Enable Token Gating on a Chatroom

Token gating on a chatroom can be toggled at any point in the LiveLike Producer CMS. Once enabled on the CMS, chatroom token gate data can be observed in the ChatRoomInfo object by utilizing the getChatRoomInfo() function (more info). In addition, any change made to the chatroom mid session can be observed in the didRecieveRoomUpdate method of the ChatSessionDelegate

Sample App

Using the Token Gated Chat Use Case in the sample app, a sample token gated chat can be observed and studied. The use case utilizes WalletConnectSwift framework in order to connect user’s wallet to the app. A successful connection exposes information about user’s wallet, specifically their wallet address.

All the Token Gated Chat integration code can be found in the following files.

  • WalletConnect.swift
  • EtherscanAPI.swift
  • TokenGatedChatUseCase.swift

WalletConnectSwift

WalletConnect is an industry standard that defines a blockchain wallet connection. WalletConnectSwift is a pure swift library that implements the WalletConnect protocol.

In order to effectively token gate a chatroom, we require the knowledge of a user’s wallet address. This means that at some point you will want to ask your user to connect their blockchain wallet to your app. This can be done by utilizing the WalletConnectSwift library.

EtherscanAPI

At some point of your integration you will need a way to query the Etherium blockchain to see if the token you are interested in lives in the user’s wallet. This can be accomplished in many ways, using Etherscan is the simplest.

Etherscan is a service that allows you to explore and search the Ethereum blockchain for transactions, addresses, tokens, prices and other activities taking place on Ethereum. In addition they offer an API which can be utilized to perform appropriate queries on the blockchain.

In order to use their API, an API Key is required. To create an API Key, see the following instructions. Once an API key is acquired, pass it in the EtherscanAPI constructor in TokenGatedChatUseCase.swift:147

Integration

1. Connecting to a Wallet on your iOS device

Connecting a user’s wallet to your application is the crucial first step in achieving the token gated chat use case. Once a wallet is connected, information about the wallet can be retrieved. Specifically the wallet address is what we are interested in.

We can achieve this by utilizing the WalletConnectSwift library. Feel free to copy the WalletConnect.swift file to help you with WalletConnectSwift library.

Because WalletConnectSwift library uses deep linking functionality to establish a connection with an installed wallet, you must add the LSApplicationQueriesSchemes to your Info.plist file.

Screen_Shot_2022-05-16_at_12 32 09_PM

Once deep linking with WalletConnectSwift framework is set up, you can then instantiate the WalletConnect class and trigger the connection with a blockchain wallet.

ex. TokenGatedChatUseCase: 78

Screen_Shot_2022-05-16_at_3 49 20_PM

ex. TokenGatedChatUseCase: 197 - 210

Screen_Shot_2022-05-16_at_3 50 01_PM

After a wallet connection is established and the wallet address is retrieved, the Sample app will store the wallet address in UserDefaults for later use.

ex. WalletConnect: 84-86

Screen_Shot_2022-05-16_at_3 55 26_PM

2. Retrieving Chat Room Information

Now that we have the user’s wallet address handy, we can then see if a chatroom requires any tokens to enter it. This can be achieved by utilizing the EngagementSDK getChatRoomInfo() function (more info).

ex. TokenGatedChatUseCase: 130

Screen_Shot_2022-05-16_at_3 59 36_PM

As a response you will receive the ChatRoomInfo object which contains the tokenGates property. When a CMS producer changes token gate information on a chatroom while chat is in session, you can utilize the didRecieveRoomUpdate delegate function of the ChatSessionDelegate to observe the changes.

3. Query the blockchain

Now that we have the user’s wallet address and a smart contract address from which a key token was minted, we can query the blockchain to see if a valid token is present in the user’s wallet.

Querying the blockchain can be done in many different ways, third party services like Infura and Alchemy can be utilized to get access to a public node. For the simplicity of this use case, we chose to use Etherscan, which is a service that lets users scan the Etherium blockchain for free.

In the EtherscanAPI.swift class we utilize Etherscan’s getERC20TokenBalance() function in order to retrieve a token balance based on the provided wallet and contract address.

Reminder: Pass the Etherscan API Key into the EtherscanAPI constructor in TokenGatedChatUseCase.swift:147

ex. TokenGatedChatUseCase: 145 - 183

Screen_Shot_2022-05-16_at_5 10 52_PM

If the result is bigger than zero, that means the user’s wallet contains at least one token required to enter the chatroom.

4. Allow or decline user access to the chatroom

Now that we know whether the user is allowed to enter a chatroom, we can utilize the EngagementSDK connectChatRoom() function.

ex. TokenGatedChatUseCase: 108

Screen_Shot_2022-05-16_at_5 18 49_PM

Conclusion

We hope this walkthrough shed some light into how a chatroom can be token gated. In the future we hope to show even more examples of utilizing NFT’s within our ecosystem. Stay tuned.

Clone this wiki locally