Get Started
Learn how to build a universal resolver with Airstack APIs and integrate it into your React application.
Last updated
Learn how to build a universal resolver with Airstack APIs and integrate it into your React application.
Last updated
Airstack provides an AI solution for you to build a GraphQL query efficiently. You can access Airstack AI on the Explorer page.
For example, if you like to get the web3 identity of a user, e.g. all the web3 identities of the 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 address, then you can simply type:
After clicking enter, the Airstack AI will output a GraphQL query that will return the web3 identities of the given address:
Use Airstack AI's Best Practices to get the best and most accurate result for your query.
Now that you have your basic query, you can build more complex queries on top of it to resolve any web3 identities to another. For this, you can simply stay in the Airstack Explorer to make the modifications.
Since Airstack provides GraphQL API to query blockchain data, it is very easy and developer friendly to see what inputs and outputs are available to you.
For example, here you can see on the sidebar of Airstack Explorer from the previous query, the Wallet API has identity as one of the inputs and a variety of response fields to be chosen from.
Airstack provides an Identity API out-of-the-box that you can use to filter queries using web3 identities instead of an Ethereum address.
Thus, with Airstack Identity API, you can instead replace the query input with other web3 identities such as ENS:
In GraphQL, you have the option to choose which response field to receive. Thus, you will only receive the necessary data for your application. In addition, there will not be any unexpected field returned from your query that can potentially break your application.
To modify the responses, it is also very simple to do from the Airstack Explorer. All you need to do is simply tick the field that you want. If a field has its own subfield then you can select the subfield to be received in your responses.
For example, letâs take the query from the Step 1 section above and add domain data to the responses to know whether the user queried has any ENS domain available under its web3 identity. Then, you can check on several additional fields in your responses:
Here, domains.name will provide an array of results of all the ENS names that are held under the given wallet address, while primaryDomains.name will provide the primary ENS name that is set to this wallet address.
The query end result will look like this:
In production, you will likely need to have the input value change constantly. This is where you can add variables to your query to accept input values from your application.
To add variables to your query, simply replace the input with variables, represented by $ followed by the variable names. For example, an address variable would be written as $variable in the GraphQL query.
First, create an empty React project if you donât have any. Otherwise, you can skip this part and jump to getting your API key below.
First, use Vite to generate a new React project:
After the process is successfully completed, an airstack-demo folder containing the empty React project will be created. Now, you can enter the folder and download some dependencies:
First, login to your Airstack account and go to Settings. Under the Default Key, you can find and copy your API key.
Then, create a .env file if you donât have any by running the following command:
And, paste your API key to your environment variable .env file.
To use Airstack in your React project, install the Airstack React SDK.
Once the installation is complete, you should see that it has been added to your package.json as a dependency and is ready to be imported.
Now that all the basic setups are complete, letâs go to src/App.jsx file and add Airstack to your React application.
First, letâs delete all the original template contents inside src/App.jsx and add new code for Airstack integration.
To use the Airstack React SDK, first, initialize the SDK by adding the following code in App.jsx.
Then, add a basic component with useQuery hook added to call the query that you constructed in previous sections to resolve web3 identities:
With this simple code, you essentially just integrated Airstack APIs that resolve the vitalik.eth identity address input into its Farcaster, Lens Profile, and other ENS names that exist. The app will output the JSON result on the UI and will look like this:
At its current state, you have successfully loaded Airstack and its data responses to the UI. However, it is a very bare minimum and the data is loaded still in its JSON stringified format.
As an improvement, letâs add an input box so that your user can input any Ethereum address, Farcaster, Lens Profile, or ENS and a button that the user can click to call the query manually. Once the button is clicked, the app will render the resolved identities in a table format.
To do so, modify the components code as follows:
With the new UI looking as follows:
As you can see, aside from having a component that renders the data in a table format, you also added several new aspects.
First, since the app needs to call the API manually instead of every first render, it is essential to replace useQuery with useLazyQuery, which provides you with an additional function that is named as `resolveWeb3Identities` to call the API on each button clicked.
In order to make sure that the resolveWeb3Identities is called accordingly to the user input, the input value in the input element is toggled to the identity React state such that each time the value in the input box changes the state will be changed.
Thus, when the user clicks the button, resolveWeb3Identities will always call the Airstack API with the variables provided by the user input directly and the user will be able to resolve any web3 identities that they provide into the input box.
Congratulations! đYouâve just learned how to use Airstack as a universal web3 resolver and integrate the APIs into your React application.
