Merge pull request #691 from xmtp/rygine/browser-sdk

Add browser SDK, example
xmtp · Oct 28, 2024 · 850f061 · 850f061
2 parents 4613f60 + c3a2a72
commit 850f061
Show file tree

Hide file tree

Showing 51 changed files with 9,903 additions and 249 deletions.
diff --git a/.github/workflows/browser-sdk.yml b/.github/workflows/browser-sdk.yml
@@ -0,0 +1,79 @@
+name: Browser SDK
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    paths:
+      - "sdks/browser-sdk/**"
+      - ".github/workflows/browser-sdk.yml"
+      - "dev/**"
+      - ".node-version"
+      - ".nvmrc"
+      - ".yarnrc.yml"
+      - "turbo.json"
+      - "yarn.lock"
+
+jobs:
+  typecheck:
+    name: Typecheck
+    runs-on: warp-ubuntu-latest-x64-8x
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+        env:
+          SKIP_YARN_COREPACK_CHECK: "1"
+      - name: Enable corepack
+        run: corepack enable
+      - name: Install dependencies
+        run: yarn
+      - name: Typecheck
+        run: yarn turbo run typecheck --filter='./sdks/browser-sdk'
+
+  test:
+    name: Test
+    runs-on: warp-ubuntu-latest-x64-8x
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+        env:
+          SKIP_YARN_COREPACK_CHECK: "1"
+      - name: Enable corepack
+        run: corepack enable
+      - name: Install dependencies
+        run: yarn
+      - name: Install playwright browsers
+        working-directory: ./sdks/browser-sdk
+        run: yarn playwright install
+      - name: Start dev environment
+        run: ./dev/up
+      - name: Sleep for 5 seconds
+        run: sleep 5s
+      - name: Run tests
+        run: yarn turbo run test --filter='./sdks/browser-sdk'
+
+  build:
+    name: Build
+    runs-on: warp-ubuntu-latest-x64-8x
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+        env:
+          SKIP_YARN_COREPACK_CHECK: "1"
+      - name: Enable corepack
+        run: corepack enable
+      - name: Install dependencies
+        run: yarn
+      - name: Build
+        run: yarn turbo run build --filter='./sdks/browser-sdk'
diff --git a/examples/react-vite-browser-sdk/README.md b/examples/react-vite-browser-sdk/README.md
@@ -0,0 +1,24 @@
+# React Vite example app
+
+Use this React Vite example app as a tool to start building an app with XMTP. This basic messaging app has an intentionally unopinionated UI to help make it easier for you to build with.
+
+The app is built using the [XMTP client SDK for browsers](/sdks/browser-sdk/README.md), [React](https://react.dev/), and [Vite](https://vitejs.dev/).
+
+To keep up with the latest example app developments, see the [Issues tab](https://github.com/xmtp/xmtp-js/issues) in this repo.
+
+To learn more about XMTP and get answers to frequently asked questions, see the [XMTP documentation](https://xmtp.org/docs).
+
+## Limitations
+
+This example app isn't a complete solution. For example, the list of conversations doesn't update when new messages arrive in existing conversations.
+
+## Developing
+
+1. In `sdks/browser-sdk`, run `yarn build` to build the browser SDK.
+2. In `examples/react-vite-browser-sdk`, run `yarn dev` to start the development server.
+
+## Useful commands
+
+- `yarn clean`: Removes `node_modules`, `dist`, and `.turbo` folders
+- `yarn dev`: Launches the example app and watches for changes, which will trigger a rebuild
+- `yarn typecheck`: Runs `tsc`
diff --git a/examples/react-vite-browser-sdk/index.html b/examples/react-vite-browser-sdk/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>XMTP V3 Browser SDK Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react-vite-browser-sdk/package.json b/examples/react-vite-browser-sdk/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@xmtp/react-vite-browser-sdk-example",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf .turbo && rm -rf node_modules && yarn clean:dist",
+    "clean:dist": "rm -rf dist",
+    "dev": "vite",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@rainbow-me/rainbowkit": "^2.1.3",
+    "@tanstack/react-query": "^5.51.1",
+    "@wagmi/core": "^2.11.7",
+    "@xmtp/browser-sdk": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "viem": "^2.17.4",
+    "wagmi": "^2.10.10"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "postcss-preset-env": "^9.6.0",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.9"
+  }
+}
diff --git a/examples/react-vite-browser-sdk/postcss.config.cjs b/examples/react-vite-browser-sdk/postcss.config.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-env": {},
+  },
+};
diff --git a/examples/react-vite-browser-sdk/public/xmtp-icon.png b/examples/react-vite-browser-sdk/public/xmtp-icon.png