diff --git a/README.md b/README.md index c403366..5c9ad14 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,37 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# Set up an example subscribe-broadcast web page -## Getting Started +This repo provides an example subscribe-broadcast web page that demonstrates an implementation of a Subscribe button with [built-in user consent](https://docs.xmtp.org/consent/subscribe) provided by XMTP. -First, run the development server: +Follow these steps to set up an example subscribe-broadcast page like the one [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 [broadcast-example-api repo](https://github.com/xmtp/broadcast-example-api). The broadcast-example-api repo provides an example broadcast API that you can use with the example subscribe-broadcast page 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 is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Install dependencies + +```bash +npm install +``` + +## Get a WalletConnect project ID + +If you don’t already have one, generate a WalletConnect AppKit project ID by visiting WalletConnect's project dashboard at `https://cloud.walletconnect.com/`. + +You’ll need the project ID in the next step. + +## Create .env file + +At the root of the `subscribe-broadcast` directory, create a `.env` file with the following contents. Replace `` with your WalletConnect project ID from the previous step. + +`NEXT_PUBLIC_API_HOST=http://localhost:6989` is a value based on the **broadcast-example-api** repo. + +``` +NEXT_PUBLIC_WALLET_CONNECT_ID= +NEXT_PUBLIC_API_HOST=http://localhost:6989 +``` + +## Start the development server ```bash npm run dev @@ -14,23 +43,12 @@ pnpm dev bun dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +Go to [http://localhost:3000/subscribe/button](http://localhost:3000/subscribe/button) to see the example subscribe-broadcast page running. -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! +![subscribe-broadcast web page](subscribe-broadcast-page.png) -## Deploy on Vercel +You can edit the page by modifying `app/page.tsx`. -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +To use this subscribe-broadcast page to try out the flow to subscribe to a broadcast with built-in consent, use it with the [broadcast-example-api repo](https://github.com/xmtp/broadcast-example-api). -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +To learn how, see [Try the subscribe with built-in consent and broadcast flow](https://docs.xmtp.org/consent/subscribe-broadcast). diff --git a/subscribe-broadcast-page.png b/subscribe-broadcast-page.png new file mode 100644 index 0000000..3d5515e Binary files /dev/null and b/subscribe-broadcast-page.png differ