diff --git a/README.md b/README.md index 72207b4..214ed4e 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,196 @@ -# broadcast-api +# Set up an example broadcast API -To install dependencies: +The **broadcast-example-api** repo provides an example broadcast API to help demonstrate an implementation of a Subscribe button with [built-in consent](https://docs.xmtp.org/consent/subscribe) provided by XMTP. + +Follow these steps to set up an example broadcast API like the one backing the example subscribe-broadcast web page [deployed here](https://subscribe-broadcast.vercel.app/subscribe/button) and connected to the XMTP `dev` network. + +To get the most out of this repo, use it with the [subscribe-broadcast repo](https://github.com/xmtp/subscribe-broadcast). The subscribe-broadcast repo provides an example subscribe-broadcast web page that you can use with the example broadcast API to send broadcast messages and provide broadcast statuses. To learn how, see [Try the subscribe with built-in consent and broadcast flow](https://docs.xmtp.org/consent/subscribe-broadcast). + +**Note**: This project was created using `bun init` in bun v1.0.25. [Bun](https://bun.sh/) is a fast all-in-one JavaScript runtime. + +## Install dependencies ```bash bun install ``` -To run: +## Get a broadcast key bundle + +For this example, you can use this script to get a key bundle for the wallet address you want to use to broadcast the message. + +First, pick the wallet address you want to use as the broadcast sending address. Ensure that it is enabled on the XMTP `dev` network. + +### Install the XMTP SDK + +If not already installed, install the XMTP JavaScript SDK. You must be using Node.js >=20. ```bash -yarn dev +yarn add @xmtp/xmtp-js ethers +``` + +### Install TSX + +If not already installed, install TSX. + +```bash +npm install -g tsx +``` + +### Create the script to generate the key bundle + +In the `broadcast-example-api` directory, create a `generateAndPrintKeys.ts` file with the following contents. + +Replace `` with the private key for the wallet address you want to use as the broadcast address. + +```tsx +import { Wallet } from "ethers"; +import { Client } from "@xmtp/xmtp-js"; +import type { Signer } from "ethers"; + +const ENCODING = "base64"; // Use base64 encoding for a clean text output + +export const generateAndPrintKeys = async (signer: Signer) => { + const clientOptions = { + env: "production", // this works even if in .env, XMTP_ENV=dev. if set this to dev, key bundle doesn't work. + }; + + const address = await signer.getAddress(); + let keys: Uint8Array | null = null; + + keys = await Client.getKeys(signer, { + ...clientOptions, + skipContactPublishing: true, + persistConversations: false, + }); + + // Output the keys in Base64 format for .env storage + console.log(`XMTP_KEY_BUNDLE=${Buffer.from(keys).toString(ENCODING)}`); + + // Example of how you might use these keys in creating the client + const client = await Client.create(null, { + ...clientOptions, + privateKeyOverride: keys, + }); + + return client; +}; + +// Example usage +const main = async () => { + const privateKey = ""; // Replace with your private key + const wallet = new Wallet(privateKey); + + console.log(`Using Wallet Address: ${wallet.address}`); + + await generateAndPrintKeys(wallet); +}; + +main().catch(console.error); ``` -This project was created using `bun init` in bun v1.0.25. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime. -## Example Env -An example Env File could look something like: +### Run the script + +Run the script to get the key bundle. Make a note of the key bundle. You’ll need it in the next step. + +```bash +tsx generateAndPrintKeys.ts +``` + +## Set up the environment + +In the `broadcast-example-api` directory, create an `.env` file with the following contents, for example. + +Replace `` with the key bundle you got from the `generateAndPrintKeys.ts` script. + ``` XMTP_ENV=dev PORT=6989 -# XMTP Broadcast specific configuration +# XMTP Broadcast-specific configuration XMTP_RATE_LIMIT_AMOUNT=1000 XMTP_RATE_LIMIT_DURATION=300000 -XMTP_KEY_BUNDLE= +XMTP_KEY_BUNDLE= XMTP_FILE_PERSISTENCE_PATH=/tmp/xmtp ``` + +### Update the CORS policy + +In `index.ts` at the root of the `broadcast-example-api` directory, add `"http://localhost:3000"` as shown in the following example. + +This addition enables the broadcast API to accept requests from `http://localhost:3000` , which will be the URL of the example subscribe-broadcast page that you’ll use with the broadcast API in an upcoming step. + +```tsx +app.use( + cors({ + origin: ["http://localhost:3000", "https://subscribe-broadcast.vercel.app"], + }) +); +``` + +## Install dotenv + +If not already installed, install dotenv. + +```bash +yarn add dotenv +``` + +### Load environment variables to your app + +At the top of the `src/index.ts` file, add the following line. This will load all variables from your `.env` file into `process.env`. + +```tsx +import "dotenv/config"; +``` + +## Install and start Redis + +If not already installed, install Redis. + +### Install Redis + +```bash +brew install redis +``` + +### Start Redis + +```bash +redis-server +``` + +### Verify Redis is running + +```bash +redis-cli ping +``` + +## Define a broadcast welcome message + +In `src/lib/broadcasterConfigs.ts`, remove all but the first object in the broadcast configuration array. When you are done, the array should look like this: + +```ts +const broadcastConfigs: BroadcastConfig[] = [ + { + address: "0x85583261a4c3ad6785Ac90BD8880393831F97F54", + greeting: "Welcome to Hello World Wild Web broadcasts", + id: "XMTP", + }, +]; +``` + +Set the **address** key to the broadcast sending address. + +Set the **greeting** key to the welcome message you want to send when someone subscribes to the broadcast. + +For the purposes of this example, you can leave the **id** key as-is. + +## Run the broadcast API + +```bash +yarn dev +``` + +To use this example broadcast API to try out the flow to subscribe to a broadcast with built-in consent, use it with the [subscribe-broadcast repo](https://github.com/xmtp/subscribe-broadcast). + +To learn how, see [Try the subscribe with built-in consent and broadcast flow](https://docs.xmtp.org/consent/subscribe-broadcast).