DEV Community: Jennifer K. Tran

How to Token Gate with POAP

Jennifer K. Tran — Fri, 17 Dec 2021 00:51:17 +0000

This article outlines how to utilize Proof of Attendance Protocol’s (POAP) APIs to create a natively token gated application. Note that MintGate has a direct integration with POAP via the same APIs for our no-code token gating solution.

What is Proof of Attendance or POAP?

Proof of Attendance Protocol (POAP) provides event nomads with a way to verify their attendance through collecting digital badges, all of which live on-chain.

What is token gating?

Token gating is when ownership of an NFT or social token is required to access content. Think of it as a creator or community creates a blockchain token and then sets up a paywall that only
accepts that token to access exclusive content.

Other terms to describe token gating include NFT access and NFT tickets.

Why token gating with POAP? (Use Cases)

Token gating with POAP means that an event host only allows event attendees who own a POAP badge to access certain content post-event. Gating content with a POAP badge enables event hosts to create unique experiences and build longer term relationships with event attendees.

Several use cases include:

Only virtual call attendees can access the recorded call
Attendees of an IRL event can access a site to claim swag
Only attendees of a past event can RSVP to attend another event
And More!

How to Utilize POAP’s APIs?

Note that MintGate has a direct integration with POAP via the same APIs for our no-code token gating solution. Try it out at app.mintgate.io/create_link -> Input your URL and description -> Choose POAP as the blockchain.

How Creating a Token Gating App Works
In order to develop a token gated content platform, you ask a user for a wallet address, store the wallet address, and then pass it into an API that can check the user’s balance of the NFT or
token.

With Ethereum and EVM-based chains, you can utilize a wallet connection modal such as BlockNative Onboard or Web3Modal, store the wallet address that is returned, and use a blockchain connection API such as Infura to check token balances.

Working with POAP
Though POAPs are minted on xDAI, an EVM-based chain, POAP holders of the same event can have various different NFTs. As a result, it is difficult to check all of the NFTs using an API that can connect to the blockchain.

Instead, you can should check if a user owns a POAP by the POAP Event ID. The POAP Event ID is a set of numbers that identifies the event.

You can find a POAP Event ID by going to poap.gallery, searching for the POAP, and the event ID is the numbers with the # in front.

You can utilize POAP’s {address}/{eventID} endpoint to check if a wallet address owns a wallet by a POAP Event ID.

Here is an example code to check if a wallet address owns a POAP by Event ID:

             async checkBalance(wallet:string, eventID:string, req, res):Promise<boolean> {
    const url = 
       `http://api.poap.xyz/actions/scan/${wallet}/${eventID}`

            const result = await fetch(url).then(x=>x.json());

            if(!result) {
                 console.error('No POAP Information available');
                 return false;
             }

            const message = result.message;
            const eventValid = result.event;

    if (result.status == '404' || message == 'Address does not have token for this event') {
        return false;`
    } else if (eventValid) {
        return true;
    }

The API enables you to easily check balances of a POAP without utilizing more complicated APIs that connect to the blockchain.

Token gating post-event assets by POAP enables event hosts to create unique experiences for event attendees. Hope that you consider token gating via POAP soon!

How to Add Custom Rally Login into an Ethereum Wallet Modal

Jennifer K. Tran — Wed, 06 Oct 2021 02:46:09 +0000

This article outlines how to add Rally.io login to Onboard.js, a modal integration that allows users to login into decentralized apps using various Ethereum wallets.

Since Rally is not an Ethereum Virtual Machine (EVM) compatible blockchain, developers must separate the Rally and Ethereum wallet authentications on their dapps.

However, Onboard.js simplifies the UI and allows dapps to easily add new Ethereum wallets and custom logins as user login options.

To learn more about the key differences between Rally and Ethereum, check out this article here.

Getting Started

Step 1: Set up Onboard.js (if you have not already)

You will need to add the Onboard.js as a package and initialize the library in your Javascript project.

You can follow the documentation to add Onboard.js to your project here.

As noted in the docs, to initialize the built-in wallet modules, you must pass an array of wallet initialization objects to the walletSelect.wallets parameter of the Onboard initialization object.

Step 2: Create a Rally.io login module

Create a new Javascript module. In the module, you will need to add the following:

An constant variable that stores the Rally starlight logo SVG:

const rallySVG = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{clip-path:url(#SVGID_2_);}
</style>
<g>
<path class="st0" d="M57.52,63.66"/>
<path class="st0" d="M72.92,35.95c0.33,0,0.6,0.27,0.6,0.6c0,14.02,8.64,24.87,25.39,25.22c0.33,0,0.6,0.27,0.6,0.6
 s-0.27,0.6-0.6,0.6C82.15,63.3,73.51,74.15,73.51,88.17c0,0.33-0.27,0.6-0.6,0.6c-0.33,0-0.6-0.27-0.6-0.6
 c0-14.02-8.64-24.87-25.39-25.22c-0.33,0-0.6-0.27-0.6-0.6s0.27-0.6,0.6-0.6c16.75-0.34,25.39-11.19,25.39-25.22
 C72.32,36.22,72.59,35.95,72.92,35.95z"/>
<g>
 <g>
   <defs>
     <path id="SVGID_1_" d="M46.93,62.96c16.75,0.34,25.39,11.19,25.39,25.22c0,0.33-0.27,0.6-0.6,0.6H1.1c-0.33,0-0.6-0.27-0.6-0.6
       V11.83c0-0.33,0.27-0.6,0.6-0.6h45.78c13.96,0.29,25.44,11.29,25.44,25.32s-8.64,24.87-25.39,25.22c-0.33,0-0.6,0.27-0.6,0.6
       S46.6,62.96,46.93,62.96z"/>
   </defs>
   <clipPath id="SVGID_2_">
     <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
   </clipPath>
   <g class="st1">
     <g>
       <defs>
         <rect id="SVGID_3_" x="-4.5" y="6.23" width="81.82" height="87.54"/>
       </defs>
       <clipPath id="SVGID_4_">
         <use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
       </clipPath>
       <g style="clip-path:url(#SVGID_4_);">

           <image style="overflow:visible;" width="172" height="184" xlink:href="data:image/jpeg;base64,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
Ox+w5PN+V1d2tz87sn//2Q==" transform="matrix(0.48 0 0 0.48 -4.8 5.76)">
         </image>
       </g>
     </g>
   </g>
 </g>
</g>
</g>
</svg>`

Create an export module that will direct the user to the callback that you stored the Rally.io login logic to.

Note: You will still need to add backend logic that will handle the Rally.io login. To learn more about how to set up Rally.io login, review the docs here or subscribe to my account for upcoming articles!

export const customRallyLogin = {
  name: 'Rally', //display name of the wallet
  preferred: true, //lists Rally login as a top login option
  svg: rallySVG,
  wallet: async helpers => {
    window.location.href = 'yourcallback';
    await new Promise(resolve => setTimeout(resolve, 10000));
    return null;
  },
  desktop: true,
  mobile: true
}

Step 3: Import the Rally Login module to Onboard.js

Import the Rally Login module into the Onboard initialization.

For example:

import { customRallyLogin } from "../../utils/logins/Rally";

Add the module name under the walletSelect.wallets parameter of the Onboard initialization object, alongside the other wallet integrations.

For example:

    { walletName: "metamask", preferred: true },
    { walletName: "torus", preferred: true },
    { walletName: "coinbase", preferred: true }, 
    customRallyLogin

Step 4: End Result

Once you add the wallet model to an onClick method to a Login button, the Onboard.js module will popup and Rally is listed as a login option.

How is Rally different from Ethereum Mainnet?

Jennifer K. Tran — Fri, 01 Oct 2021 01:51:20 +0000

This article outlines the key differences between the Rally network and Ethereum mainnet, two blockchains widely used to create "social tokens" or cryptocurrencies that represent artists, creators, and communities.

What is Rally and Ethereum?

Ethereum

Ethereum is the most popular built-upon blockchain. Developers have built thousands of applications, tools, protocols, and cryptocurrencies on the Ethereum blockchain, more than any blockchain by far.

Hundreds of creators and communities have created their own social tokens on Ethereum, most notably with Roll and Coinvise.

Ethereum Virtual Machine (EVM) compatible sidechains

Most recently, Ethereum Virtual Machine (EVM) compatible sidechains or secondary blockchains based on the Ethereum network have formed. The most popular include xDai and Polygon.

These sidechains allow users to create tokens that are compatible with the Ethereum blockchain. Since EVM compatible chains are based off of Ethereum, many tools, applications, and protocols built on Ethereum can utilize the same templates to integrate with EVM compatible chains.

Rally

The Rally network is a non-EVM compatible blockchain that is widely-known for social tokens. Currently, dozens of major creators, from Grammy Award winning producer !llmind and popular Twitch streamer Alliestrasza, have created their social token via Rally.

What are the key differences between Ethereum, EVM compatible chains, and Rally?

1. How to Identify the Blockchains

Ethereum and EVM compatible chains

The Ethereum blockchain and each EVM compatible chain is assigned a positive number unique network, chain ID, and an RPC method.

Rally

The Rally network is built on top of a larger blockchain ecosystem named Forte. The Rally network is identified as Rally and does not have a numeric network or chain ID.

2. How to Identify Tokens

Ethereum and EVM compatible chains

A non-fungible or cryptocurrency-like token on the Ethereum blockchain and EVM compatible chains have the following attributes:

Contract address (numeric identifier of token)
Name of the token (symbol/name of the token)

Since different tokens can have the same name but not the same contract address, developers must rely on the contract address to identify tokens.

Rally

A social token on Rally identified by its symbol, starting with $.

Unlike on Ethereum or EVM chains, the social token symbol is unique and is the sole identifier.

3. How A User Interacts with the Blockchain

Ethereum and EVM compatible chains

To interact with the Ethereum and EVM compatible blockchains, users create a digital wallet that is assigned a 42-character identifier called a wallet address.

A user can utilize the same wallet with the same wallet address across any Ethereum or EVM compatible chain.

Rally

To interact with the Rally blockchain, users create an email login with a username and password on Rally.io.

A username is assigned an number-alpha identifier named a Rally ID on the backend. The Rally ID is often needed to develop login capabilities on the apps. The user often only needs their username and does not need the Rally ID to interact with the Rally chain.

Unlike on Ethereum and side-chains, the Rally login system is more friendly to users. Depending on how you set up the authentication of your app, the Rally login is less cumbersome. Since there is only one login method for users on Rally, developers do not need to keep track of hundreds of wallets that can connect to the chain.

4. How A Developer Integrates with Wallet Login

Ethereum and EVM compatible chains

To integrate digital wallet login on an app, a developer must receive an object with the following:

Wallet provider (the name of the wallet i.e. Metamask)
Wallet address (the specific identifier of wallet account)
User signature (the hash confirmation that returns when the user "signs" their wallet prompt or confirms that they own the wallet)
Network (identifier for blockchain)

Wallet modal SDKs such as Web3Modal and BlockNative Onboard enable simpler integrations with a wide variety of Ethereum and EVM compatible wallets.

Rally

To integrate Rally login, a developer must register their app callback and account credentials with Rally and integrate their specific Rally Authentication system.

Current Steps:

Once the app and account credentials are registered, the developer will pass in their account credentials to the v1/oauth/register API to obtain a bearer token.
They will then pass the bearer token and callback of their application registered to Rally to v1/oauth/authorize. This API will return a Rally.io login link that your app must direct the user to sign in.
Once the Rally user signs in, they will redirect back to the callback that you registered with Rally in in Step 2 with an additional param named code.
You will pass in the value in the code param into v1/oauth/userinfo to receive the Rally username.

This Rally username is the equivalent of a user "wallet address" in Ethereum.

5. How Access Data on Chain

Ethereum and EVM compatible chains

Since the Ethereum and EVM chains are completely open, there are numerous ways to access and index data on their chains.

Several marketplaces create their own APIs specific to tokens minted on their platforms. Indexers such as The Graph allow you to create your own APIs to index specific contract addresses or created tokens.

Rally

Rally is the sole provider of APIs on its blockchain. You can find the API docs here.

Though there are less options to get data from the chain, a single source provider can streamline the returned data format.

The Conclusion

The Ethereum and Rally blockchains are the two most widely known chains to minting social tokens, a new use case for blockchain tokens that enables creators and communities to become independent. Ethereum and its EVM side chains have strong support and compatibility that allows for rapid mass integration. Though Rally follows a different process to accessing its chain, Rally enables a streamlined approach that is more user friendly to users.

How to access data from a subgraph on The Graph

Jennifer K. Tran — Tue, 17 Aug 2021 20:02:42 +0000

This article outlines how to access data from a subgraph or API created on The Graph, as well as how to combine subgraph results using a React hook.

What is The Graph?

The Graph is an indexing protocol for querying networks. One of its core features is that anyone can use The Graph to build APIs of smart contract data.

Our Use Case

MintGate is a platform that allows creators and communities to set up gated videos and web content using NFTs or social tokens. Unlock Protocol is an open source, blockchain-based protocol that allows anyone to create membership, time-based NFTs.

A MintGate and Unlock Protocol integration would allow creators and communities to require an end fan to purchase an NFT to access content for a certain period of time. In our UI, we needed to detect if a user set up gated content using an NFT smart contract created on Unlock Protocol.

Development

Using Unlock Protocol's subgraphs on The Graph

We utilized Unlock Protocol's subgraphs on The Graph to get the contract addresses of all "locks" or NFT collections created using the protocol. You can view all of Unlock Protocol's subgraph information in their docs.

Step One

We created a new Javascript file and wrapped a React UseAsync hook in a const.

import { useAsync } from 'react-use';

const useUnlock = () => {
    const unlock = useAsync(async () => {
    }
}

export { useUnlock };

Step Two

We analyzed the subgraphs and outlined how to structure the fetch call.

Here's link to the Unlock Protocol mainnet subgraph on The Graph: https://thegraph.com/legacy-explorer/subgraph/unlock-protocol/unlock.

Notes on subgraphs:

The fetch API URL is the API link under "Queries (HTTP)".

Subgraphs are POST APIs.
In The Graph Playground, under Example Query box, there are examples of a request body.

In The Graph Playground, under the Schema, it lists the entries that you can index in the API.

Step Three

Now that we analyzed the subgraph, we constructed our fetch call.

For us, since we wanted to get the lock or NFT collection name, we used this request body:

query {
        locks {
          address
          name
        }
    }

Our params are as follows:

const result = await fetch(`https://api.thegraph.com/subgraphs/name/unlock-protocol/unlock`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `
      query {
        locks {
          address
          name
        }
    }`
      }),
    }),

Step Four

After we set up the params, we set up returning the result of the API.

We added this to the end of const containing the params:

then((res) => res.json());
    return result;

Wrapping Up

You returned the const the contained the fetch call.

}, []);
  return [unlock];
}

And exported the const the wraps around the entire React hook.

export { useUnlock };

Our end result looked something similar to this:

import { useAsync } from 'react-use';

const useUnlockMainnet = () => {
  const unlockMainnet = useAsync(async () => {
    const result = await fetch(`https://api.thegraph.com/subgraphs/name/unlock-protocol/unlock`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `
      query {
        locks {
          address
        }
    }
  }`
      }),
    }).then((res) => res.json());
    return result;
  }, []);
  return [unlockMainnet];
}

export { useUnlockMainnet };

Bonus Points: How to call multiple subgraph results

In addition, we needed a way to check if a user gated content using an Unlock Protocol lock or smart contract on other chains besides Ethereum mainnet.

We needed to utilize the subgraphs on xDai and Polygon.

Using Promise.All, you fetched all of the responses and had them return in an array. Here was our end result:

import { useAsync } from 'react-use';

const useUnlock = () => {
  const unlock = useAsync(async () => {
    const result = await Promise.all([await fetch(`https://api.thegraph.com/subgraphs/name/unlock-protocol/unlock`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `
      query {
        locks {
          address
          name
        }
    }`
      }),
    }),
    await fetch(`https://api.thegraph.com/subgraphs/name/unlock-protocol/xdai
      `, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `
        query {
          locks {
            address
            name
          }
      }`
      }),
    }),
    await fetch(`https://api.thegraph.com/subgraphs/name/unlock-protocol/polygon
      `, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `
        query {
          locks {
            address
            name
          }
      }`
      }),
    })]);
    const data = await Promise.all(result.map(res => res.json()))
    return data;
  }, []);
  return [unlock];
}

export { useUnlock };

You can try to create an Unlock lock and set up token gated content on MintGate today!