đLens Resolver
Learn how to build a Lens resolver with Airstack APIs and integrate it into your React application.
Last updated
Learn how to build a Lens resolver with Airstack APIs and integrate it into your React application.
Last updated
This demo is a variation of Universal Resolver that only accepts Lens profiles as input.
If you are looking to resolve other identities than Lens, check out Universal Resolver demo.
To clone the starter code, simply copy the following code to clone in your preferred directory:
You can find all the starter code in GItHub.
Install the dependencies using your preferred package manager with one of the following commands:
Once the installation is complete, a new node_modules will be generated
You should also see that Airstack React SDK has been added to your package.json as one of your dependency:
Copy and rename .env.example to .env.local
And, paste your API key to your environment variable .env.local file.
To run the app locally, simply run one of the following command:
Then, you can go to http://localhost:5173:
Here you have the UI all given to you out-of-the-box as part of the starter code.
However, the resolving has not been included as no Airstack query is found in the code. You can see in src/graphql/resolve.js with it's empty query:
In order to fill in this, the next steps will be dedicated to constructing your queries for the lens resolver.
Use Airstack AI's Best Practices to get the best and most accurate result for your query.
Airstack provides an AI solution for you to build a GraphQL query efficiently. You can access Airstack AI on the API Studio.
For example, let's try the following prompt to resolve vitalik.lens:
After clicking enter, the Airstack AI will output a GraphQL query as follows:
You can go to the API Studio to test out the query yourself:
Now that you have your basic query, you can build more complex queries on top of it to resolve a Lens profile to any web3 identities.
For this, you can simply stay in the API Studio to make the modifications.
The responses has already included everything that you need to resolve a Lens profile to any web3 identities. However, it is missing a primary ENS domain to highlight domains that is primary or not.
To add primary ENS domain, you will need this one field:
primaryDomains.name
string
primary ENS name
Adding the additional field, the last query with the changes highlighted will be as follows:
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.
Simply replace the input with variables, represented by $ followed by the variable names:
Now that you have the query constructed, all you need is just paste it directly into the codebase.
Simply go to src/graphql/resolve.js again and paste the query to LENS_RESOLVER variable:
To call this query, use the useQuery hook from the Airstack React SDK to src/App.jsx:
With this simple code, you essentially just integrated Airstack query that you constructed for universally resolving web3 identities.
Since the code now hardcode vitalik.lens as the query input, the app will universally resolve vitalik.lens and have the UI look like this:
At its current state, you have successfully loaded Airstack and its data responses to the UI.
However, the query call is not toggled to the button click and is not dependent on the user input.
This is because you only use useQuery which automatically calls the API for every render. To do a manual call, swap useQuery with useLazyQuery in src/App.jsx as follows:
The end result is as follows:
Congratulations! đYouâve just learned how to use Airstack to build a Lens resolver and integrate Airstack API into your React application.
If you have any questions or need help regarding Lens resolver, please join our Airstack's Telegram group.
