Write DApps frontends without web3 tools using Eyepto + TheGraph (Transactions with QR codes only)

Write DApps frontends without web3 tools using Eyepto + TheGraph (Transactions with QR codes only)
dev_zl
0
0

Write DApps frontends without web3 tools using Eyepto + TheGraph (Transactions with QR codes only)

Supporting various wallets is a pain. As someone who has been working on DApps frontends for the past 5 years, I did my fair share of it. Blocknative’s web3-onboard, WalletConnect’s web3-modal, Trufflesuite’s Drizzle, RainbowKit, web3-react, wagmi.sh etc. are all tools that tried to handle wallets at different stages of the user journey and with different flows and experience for developers. All are either buggy, limited, or no longer maintained.

Currently all DApps want to connect to a wallet, and there is no need for that. Since all blockchain data is public, anyone can just input their address or ENS name in a DApp and the DApp would be able to load all their blockchain data¹. For example, Zapper.fi does this well.

The only reason to want a wallet connection would be for that sweet sweet free RPC connection, which could be replaced by TheGraph.

Web3 transactions only need a few pieces of data to be executed. If you are calling a function within a smart contract. You only need the network ID, the target address, the snippet of the ABI containing the function to call, its payload, and optionally a value in the native token if it’s a payable function. All this data can easily fit in a QR code.

Let’s build a demo frontend to showcase this.

Things we need

A smart contract A subgraph A frontend to generate a QR code and read data from the subgraph.

Smart contract

For this demo project, I deployed a basic ERC721 contract on Polygon mainnet at this address:

Anyone can mint an NFT from it if they call the mint method.

Subgraph

In order to read data from a smart contract using TheGraph, you need to setup a subgraph to listen to emitted events. Once an event is emitted, you can save the data you want.

I created one and it’s serving data from this endpoint:

Whenever a minting happens, a transfer event is emitted. So we will listen to these transfer events, and save the tokenURI (url containing the metadata of our NFT) and tokenId.

If you want to learn how to build a subgraph, the easiest way to get started is by following this tutorial:

You can find the subgraph code for this tutorial here:

Our frontend

For the demo frontend, we would like to let the user mint an NFT and then be able to see it.

The frontend needs to do two things then, display a QR code with all the info necessary to make a transaction, and read the NFTs data from TheGraph.

For this demo, I started from TheGraph’s example on how to make live queries (live queries are one of the ways to keep data fresh with GraphQL).

You can check it out at this link:

I mainly modified it to read data from the subgraph of our demo NFT.

The repo for our demo front-end can be found here:

Now to the most important part

We want to put our smart contract ABI and payload in a QR code.

Thankfully, we don’t need to put all of the ABI in it, but just the method we want to call on, in our case it’s the mint one.

Here is the full specification for calling a function with Eyepto wallet:

In this example, I made it so anyone can mint an NFT if they simply call the mint function, so it will look like this:

Notice that the input array is empty, and thus we have no input data.

You can see the full specification at this link:

We can use any module to generate the QR code, for our example react-qr-code will do the job.

Voilà, our QR code is generated.

QR code to mint an NFT

Protip 1: There should be enough contrast between the QR code and the background, the default is generally black on white.

Protip 2: there should be a wide enough border around the QR code to make it possible for devices to recognize it, the border should be preferably in the same color as the background.

The Eyepto wallet app can be found here:

For IOS: ios.eyepto.com

For Android: android.eyepto.com

After setting up your wallet, you can just use the QR code camera option within Eyepto to read the QR code.

Press the QR code camera button Press send transaction after reviewing your transaction Input your password and then press submit You can see that we just minted token with the ID number 5 Our token shows up on our frontend! We will se below how to display the NFT images.

Now it’s time to show the NFTs

Here are the main things we need to do in order to display the images of the NFTs:

Reading data from our subgraph Use the URI to retrieve the metadata Display the NFT’s image

Reading data from our subgraph

So in order to use TheGraph in a JS/TS project, we would need to set it up.

The first file you need is .graphclientrc.yml, it links to our subgraph and configure the plugin for using live queries.

Next we need to specify our GraphQL queries, in transfers-query.graphql:

With these two files, we can run the following command to generate some handy methods, using the graphclient module.

We just need to run:

npm build-client

A .graphclient folder is now generated!

In a react hook, we can call on its methods, and retrieve our data:

Use the URI to retrieve the metadata

Now that we have our live data, we can use it to retrieve the metadata of each token, a simple fetch call is enough, see useRetrieveNFTImages.tsx.

For this demo, I used some NFTs I had previously made for the Devcon, so the metadata looks like this, example for the first one:

Display the NFT’s image

We can simply use the img tag once we have the imageURL from the metadata.

And it will look like this:

How to get custom data for a user?

We can simply let the user input their address (or ideally their ENS or similar).

Under the hood, we use the transfersOfUser query with the inputted address as a filter.

And that’s it, our demo frontend is complete.

Final thoughts

In this example, we saw how without needing to support any wallet, and without needing to make any RPC calls, we managed to make a DApp and make transactions with a live network (Polygon mainnet).

While Eyepto is still in an experimental phase, transactions are already safe to make for the supported networks (Mainnet, Polygon, Optimism, Arbitrum), and more networks are being tested and added.

If you want to integrate Eyepto QR codes to your DApp, feel free to join the discord if you have any questions!

For existing DApps supporting other wallets, the main things to change would be to allow the user to select Eyepto wallet and input their address, and once they want to make a transaction, just show a QR code with the transaction data (see the specification here) instead of sending the transaction with web3.