Building a Custom Content Type for Multiplication Operations

This tutorial will walk you through the process of building a custom content type dedicated to multiplying numbers. For demonstration purposes, we'll create a MultiplyCodec custom content type.

Step 1: Creating the MultiplyCodec Content Type

Let's start by creating a new file xmtp-content-type-multiply-number.tsx. This file will host the MultiplyCodec class which is responsible for encoding and decoding our custom content type.

JavaScript

import { ContentTypeId } from "@xmtp/xmtp-js";

// Create a unique identifier for your content type
const ContentTypeMultiplyNumbers = new ContentTypeId({
  authorityId: "your.domain",
  typeId: "multiply-number",
  versionMajor: 1,
  versionMinor: 0,
});

// Define the MultiplyCodec class
class ContentTypeMultiplyNumberCodec {
  get contentType() {
    return ContentTypeMultiplyNumbers;
  }

  // The encode method accepts an object with two numbers (a, b) and encodes it as a byte array
  encode({ a, b }) {
    return {
      type: ContentTypeMultiplyNumbers,
      parameters: {},
      content: new TextEncoder().encode(JSON.stringify({ a, b })),
    };
  }

  // The decode method decodes the byte array, parses the string into numbers (a, b), and returns their product
  decode(content: { content: any }) {
    const uint8Array = content.content;
    const { a, b } = JSON.parse(new TextDecoder().decode(uint8Array));
    return a * b;
  }
}

Step 2: Using the Custom Content Type

Once the MultiplyCodec content type is defined, it's time to put it to use.

Import and Register Custom Content Type

Begin by importing and registering the MultiplyCodec content type.

JavaScript

import {
  ContentTypeMultiplyNumber,
  ContentTypeMultiplyNumberCodec,
} from "./xmtp-content-type-multiply-number";

const xmtp = await Client.create(wallet, {
  env: "dev",
});
xmtp.registerCodec(new ContentTypeMultiplyNumberCodec());

Sending a Message Using Custom Content Type

With your custom content type registered, you can now utilize it to send messages. This code snippet shows how to use the MultiplyCodec content type to perform multiplication operations.

JavaScript

const numbersToMultiply = { a: 3, b: 7 };

conversation.send(numbersToMultiply, {
  contentType: ContentTypeMultiplyNumbers,
});

Rendering the Custom Content Type

To make use of the result of the multiplication operation, you need to add a renderer for your custom content type.

JavaScript

if (message.contentType.sameAs(ContentTypeMultiplyNumber)) {
  return message.content; // 21
}

Keep in mind that any other application that intends to use your custom content type must implement it as per your definition.

If your MultiplyCodec content type generates interest within the developer community, consider proposing it as a standard through the XIP process.

To sum up, creating a custom content type opens up new avenues for handling data within the XMTP framework, giving you the power to manage data in a more personalized or specialized way.