Support onchain transaction references in your app built with XMTP

This package provides an XMTP content type to support onchain transaction references. It is a reference to an onchain transaction sent as a message. This content type facilitates sharing transaction hashes or IDs, thereby providing a direct link to onchain activities. Transaction references serve to display transaction details, facilitating the sharing of onchain activities, such as token transfers, between users.

Configure the content type

For Browser SDK (v6.0.0+) and Node SDK (v5.0.0+), transaction references are built-in and do not require codec registration. Skip this step for these SDKs.

For other SDKs, register the codec:

import org.xmtp.android.library.Client
import org.xmtp.android.library.Signer
import org.xmtp.android.library.codecs.ContentTypeTransactionReference
import org.xmtp.android.library.codecs.TransactionReferenceCodec
 
Client.register(codec = TransactionReferenceCodec())
 
// Create the XMTP client (assume account is a Signer)
val xmtp = Client.create(account)

Send a transaction reference

With XMTP, a transaction reference is represented as an object with the following keys:

const transactionReference = {
  namespace: "eip155",
  networkId: 1,
  reference: "0x123...abc",
  metadata: {
    transactionType: "transfer",
    currency: "USDC",
    amount: 100000,
    decimals: 6,
    fromAddress: "0x456...def",
    toAddress: "0x789...ghi"
  }
};

Once you have a transaction reference, you can send it as part of your conversation:

await conversation.sendTransactionReference(transactionReference);

Receive a transaction reference

To receive and process a transaction reference, you can use the following code samples.

To handle unsupported content types, refer to the fallback section.

import { contentTypesAreEqual } from '@xmtp/content-type-primitives';
import { contentTypeTransactionReference } from '@xmtp/browser-sdk';
 
const messages = await conversation.messages();
const message = messages[0];
 
if (contentTypesAreEqual(message.contentType, await contentTypeTransactionReference())) {
  const transactionRef = message.content;
  // Process the transaction reference here
  console.log('Network:', transactionRef.networkId);
  console.log('Transaction:', transactionRef.reference);
}

Display the transaction reference

Displaying a transaction reference typically involves rendering details such as the transaction hash, network ID, and any relevant metadata. Because the exact UI representation can vary based on your app's design, you might want to fetch onchain data before showing it to the user.