Skip to main content

Wallet connectors with XMTP

In this tutorial, we will explore how to integrate different wallets into XMTP, allowing users to securely interact with the XMTP ecosystem. We will cover the integration process using various wallet connectors, including Dynamic, ThirdWeb, and Rainbow. By following this tutorial, you will be able to offer a seamless and user-friendly wallet integration experience within your XMTP applications.

When you build with XMTP, there’s no cold start for your app and your users. As soon as your app plugs into the XMTP network, it's able to reach today’s most popular and meaningful identities.

XMTP’s interoperability and composability help ensure that the network can continue to grow and bring messaging to every identity—via your app.

In this context, identity refers to:

  • Wallet addresses, such as raw 0x addresses like 0x4b70d04124c2996De29e0caa050A49822Faec6Cc
  • Human-readable domain names associated with wallet addresses. These domain names are provided by name services, such as Ethereum Name Service (ENS) and Unstoppable Domains (UNS).

As a UX best practice, build your app to enable a user to enter a domain name in the To field and have it resolve to its associated raw wallet address.

For example, a user should be able to enter prxshant.eth in your To field and have your app forward-resolve and display its associated wallet address 0x4b70d04124c2996De29e0caa050A49822Faec6Cc.

Entering prxshant.eth in a to field and having it resolve to 0x4b70d04124c2996De29e0caa050A49822Faec6Cc

And certainly, your app should also be able to accept a raw wallet address and reverse-resolve and display the associated domain name, if available.

When displaying a name, also look for and display its associated avatar. For example, when displaying a .lens name, look for and display a Lens profile photo. Display blockies as avatars for raw 0x addresses.

Resolve identities

In this tutorial, you will learn how to use Airstack as a universal resolver to resolve various web3 identities (e.g. Farcaster, Lens, and ENS) and Ethereum addresses to other web3 identities. Airstack provides JSON APIs and SDKs for React and Python.

To access the Airstack APIs, use https://api.airstack.xyz/gql as your JSON endpoint.

Prerequisites

🤖 AI Natural Language

Airstack provides an AI solution for you to build a JSON query to fulfill your use case easily.

Reverse resolution

For example, if you would like to get the web3 identity of a user, e.g. all the web3 socials and ENS of the 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 address, then you can simply type into the prompt:

For the 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 address, get all web3 socials and ENS

After clicking enter, the Airstack AI will output a JSON query that will fetch the web3 identities of the given address that will look as follows:

With this query, you can get all web3 identities of the given user wallet, which will include the wallet address, ENS names, Farcaster username, and Lens profile.

query web3Data {
Wallet(
input: {
identity: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
blockchain: ethereum
}
) {
socials {
dappName
profileName
}
primaryDomain {
name
}
domains {
name
}
}
}

The same query can be done starting from an ENS name, Lens profile, or Farcaster username to resolve the other identities all at once. Example:

For vitalik.eth, get all web3 socials and ENS

After clicking enter, the Airstack AI will output a JSON query that will fetch the web3 identities of the given address that will look as follows:

With this query, you can get all web3 identities of the given user wallet, which will include the wallet address, ENS names, Farcaster username, and Lens profile.

query vitalikSocialsAndENS {
Wallet(input: { identity: "vitalik.eth", blockchain: ethereum }) {
socials {
dappName
profileName
profileCreatedAtBlockTimestamp
userAssociatedAddresses
}
primaryDomain {
name
owner
resolvedAddress
isPrimary
}
domains {
name
owner
resolvedAddress
}
}
}

Identity resolution

Get the address of an ENS domain, Lens handle, or Farcaster user.

AI Prompt:

get the wallet address of vitalik.eth
query {
Wallet(input: { identity: "vitalik.eth", blockchain: ethereum }) {
addresses
}
}

Get the Lens name of a Farcaster user

For Farcaster user vbuterin, fetch their Lens name
query {
Wallet(input: { identity: "fc_fname:vbuterin", blockchain: ethereum }) {
socials {
dappName
profileName
}
}
}

Bulk resolution queries

If you have multiple inputs to call the same query, you can use Airstack to make a single bulk query call to get all the responses more efficiently instead of making multiple calls with each individual input.

To create a bulk query, your query will need to have a filter input with the comparison operations of _in or _nin. A quick look at how it looks in the Airstack Explorer is shown below with the resolveAddress.

These two comparison operations accept an array of inputs. _in filters responses where the specified field's value is within the provided array of values. On the other hand, _nin filters responses where the specified field's value is not within the provided array of values.

For example, if you were to create a bulk query to fetch the ENS of an array of resolvedAddress, then you can utilize _in filter input to accept an array of resolvedAddress and get all the ENS names held all address in the resolvedAddress array by in a single call. The bulk query for this will look as follows:

query FetchBulkENS($resolvedAddresses: [Address!]) {
Domains(
input: {
filter: {
isPrimary: { _eq: true }
resolvedAddress: { _in: $resolvedAddresses }
}
blockchain: ethereum
limit: 200
}
) {
Domain {
name
resolvedAddress
}
}
}

Learn more

Resolving POAPs, NFTs

To learn about wallet addresses and chains that are compatible with XMTP, see Chains.

To learn about name services, or decentralized IDs, that work with XMTP, see Decentralized identifiers.

Was the information on this page helpful?
powered by XMTP