canvasxyz · rjwebb · Feb 12, 2025 · Feb 12, 2025 · Feb 12, 2025 · Feb 12, 2025
diff --git a/examples/document/.gitignore b/examples/document/.gitignore
@@ -0,0 +1 @@
+data/
diff --git a/examples/document/README.md b/examples/document/README.md
@@ -0,0 +1,54 @@
+# Document Editor Example
+
+[Github](https://github.com/canvasxyz/canvas/tree/main/examples/document)
+
+This example app demonstrates collaborative document editing using the CRDT provided by [Yjs](https://github.com/yjs/yjs). It allows users to collaboratively edit a single text document with persistence over libp2p.
+
+```ts
+export const models = {
+  documents: {
+    id: "primary",
+    content: "yjs-doc",
+  },
+}
+
+export const actions = {
+  async applyDeltaToDoc(db, index, text) {
+    await db.ytext.applyDelta("documents", "0", index, text)
+  },
+}
+```
+
+## Server
+
+Run `npm run dev:server` to start a temporary in-memory server, or
+`npm run start:server` to persist data to a `.cache` directory.
+
+To deploy the replication server:
+
+```
+$ cd server
+$ fly deploy
+```
+
+If you are forking this example, you should change:
+
+- the Fly app name
+- the `ANNOUNCE` environment variable to match your Fly app name
+
+## Running the Docker container locally
+
+Mount a volume to `/data`. Set the `PORT`, `LISTEN`, `ANNOUNCE`, and
+`BOOTSTRAP_LIST` environment variables if appropriate.
+
+## Deploying to Railway
+
+Create a Railway space based on the root of this Github workspace (e.g. canvasxyz/canvas).
+
+- Custom build command: `npm run build && VITE_CANVAS_WS_URL=wss://chat-example.canvas.xyz npm run build --workspace=@canvas-js/example-chat`
+- Custom start command: `./install-prod.sh && canvas run /tmp/canvas-example-chat --port 8080 --static examples/chat/dist --topic chat-example.canvas.xyz --init examples/chat/src/contract.ts`
+- Watch paths: `/examples/chat/**`
+- Public networking:
+  - Add a service domain for port 8080.
+  - Add a service domain for port 4444.
+- Watch path: `/examples/chat/**`. (Only build when chat code is updated, or a chat package is updated.)
diff --git a/examples/document/index.html b/examples/document/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta charset="utf-8" />
+  <title>Canvas Document Editor</title>
+  <script type="module" src="/src/index.tsx"></script>
+
+  <meta name="fc:frame" content='{
+      "version": "next",
+      "imageUrl": "https://document-example.canvas.xyz/image.png",
+      "button":{
+        "title": "Canvas Document Editor",
+        "action": {
+          "type": "launch_frame",
+          "name": "Open document",
+          "url": "https://document-example.canvas.xyz",
+          "splashImageUrl": "https://document-example.canvas.xyz/image.png",
+          "splashBackgroundColor": "#ddd"
+        }
+      }
+    }' />
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/examples/document/package.json b/examples/document/package.json
@@ -0,0 +1,51 @@
+{
+	"private": true,
+	"name": "@canvas-js/document",
+	"version": "0.14.0-next.1",
+	"type": "module",
+	"scripts": {
+		"build": "npx vite build",
+		"dev": "npx vite",
+		"dev:server": "canvas run --port 8080 --static dist --network-explorer --topic document-example.canvas.xyz src/contract.ts"
+	},
+	"dependencies": {
+		"@canvas-js/chain-atp": "0.14.0-next.1",
+		"@canvas-js/chain-cosmos": "0.14.0-next.1",
+		"@canvas-js/chain-ethereum": "0.14.0-next.1",
+		"@canvas-js/chain-ethereum-viem": "0.14.0-next.1",
+		"@canvas-js/chain-solana": "0.14.0-next.1",
+		"@canvas-js/chain-substrate": "0.14.0-next.1",
+		"@canvas-js/cli": "0.14.0-next.1",
+		"@canvas-js/core": "0.14.0-next.1",
+		"@canvas-js/gossiplog": "0.14.0-next.1",
+		"@canvas-js/hooks": "0.14.0-next.1",
+		"@canvas-js/interfaces": "0.14.0-next.1",
+		"@canvas-js/modeldb-sqlite-wasm": "0.14.0-next.1",
+		"@farcaster/auth-kit": "^0.6.0",
+		"@farcaster/frame-sdk": "^0.0.26",
+		"@libp2p/interface": "^2.7.0",
+		"@multiformats/multiaddr": "^12.3.5",
+		"@noble/hashes": "^1.7.1",
+		"@types/react": "^18.3.9",
+		"@types/react-dom": "^18.3.0",
+		"buffer": "^6.0.3",
+		"comlink": "^4.4.1",
+		"ethers": "^6.13.5",
+		"idb": "^8.0.2",
+		"multiformats": "^13.3.2",
+		"near-api-js": "^2.1.4",
+		"process": "^0.11.10",
+		"quill": "^2.0.3",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"vite-plugin-wasm": "^3.3.0"
+	},
+	"devDependencies": {
+		"autoprefixer": "^10.4.19",
+		"postcss": "^8.4.38",
+		"tailwindcss": "^3.4.4",
+		"typescript": "~5.6.0",
+		"vite": "^5.4.8",
+		"vite-plugin-node-polyfills": "^0.22.0"
+	}
+}
diff --git a/examples/document/postcss.config.js b/examples/document/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}
diff --git a/examples/document/src/App.tsx b/examples/document/src/App.tsx
@@ -0,0 +1,99 @@
+import React, { useRef, useState } from "react"
+
+import type { SessionSigner } from "@canvas-js/interfaces"
+import { Eip712Signer, SIWESigner, SIWFSigner } from "@canvas-js/chain-ethereum"
+import { ATPSigner } from "@canvas-js/chain-atp"
+import { CosmosSigner } from "@canvas-js/chain-cosmos"
+import { SolanaSigner } from "@canvas-js/chain-solana"
+import { SubstrateSigner } from "@canvas-js/chain-substrate"
+
+import { useCanvas } from "@canvas-js/hooks"
+
+import { AuthKitProvider } from "@farcaster/auth-kit"
+import { JsonRpcProvider } from "ethers"
+
+import { AppContext } from "./AppContext.js"
+import { ControlPanel } from "./ControlPanel.js"
+import { SessionStatus } from "./SessionStatus.js"
+import { ConnectEIP712Burner } from "./connect/ConnectEIP712Burner.js"
+import { ConnectionStatus } from "./ConnectionStatus.js"
+import { LogStatus } from "./LogStatus.js"
+import * as contract from "./contract.js"
+import { Editor } from "./Editor.js"
+import { useQuill } from "./useQuill.js"
+
+export const topic = "document-example.canvas.xyz"
+
+const wsURL = import.meta.env.VITE_CANVAS_WS_URL ?? null
+console.log("websocket API URL:", wsURL)
+
+const config = {
+	// For a production app, replace this with an Optimism Mainnet
+	// RPC URL from a provider like Alchemy or Infura.
+	relay: "https://relay.farcaster.xyz",
+	rpcUrl: "https://mainnet.optimism.io",
+	domain: "document-example.canvas.xyz",
+	siweUri: "https://document-example.canvas.xyz",
+	provider: new JsonRpcProvider(undefined, 10),
+}
+
+export const App: React.FC<{}> = ({}) => {
+	const [sessionSigner, setSessionSigner] = useState<SessionSigner | null>(null)
+	const [address, setAddress] = useState<string | null>(null)
+
+	const topicRef = useRef(topic)
+
+	const { app, ws } = useCanvas(wsURL, {
+		topic: topicRef.current,
+		contract,
+		signers: [
+			new SIWESigner(),
+			new Eip712Signer(),
+			new SIWFSigner(),
+			new ATPSigner(),
+			new CosmosSigner(),
+			new SubstrateSigner({}),
+			new SolanaSigner(),
+		],
+	})
+
+	const quillRef = useQuill({ modelName: "documents", modelKey: "0", app })
+
+	return (
+		<AppContext.Provider value={{ address, setAddress, sessionSigner, setSessionSigner, app: app ?? null }}>
+			<AuthKitProvider config={config}>
+				{app && ws ? (
+					<main>
+						<div className="flex flex-row gap-4 h-full">
+							<div
+								id="quill-editor"
+								className="sm:min-w-[300px] md:min-w-[480px] flex-1 flex flex-col justify-stretch gap-2"
+							>
+								<Editor
+									ref={quillRef}
+									readOnly={false}
+									defaultValue={app.getYDoc("documents", "0").getText().toDelta()}
+									onSelectionChange={() => {}}
+									onTextChange={async (delta, oldContents, source) => {
+										if (source === "user") {
+											await app.actions.applyDeltaToDoc(JSON.stringify(delta))
+										}
+									}}
+								/>
+							</div>
+							<div className="flex flex-col gap-4 w-[480px] break-all">
+								<ConnectEIP712Burner />
+								<SessionStatus />
+								<ConnectionStatus topic={topicRef.current} ws={ws} />
+								<LogStatus />
+								<ControlPanel />
+							</div>
+						</div>
+					</main>
+				) : (
+					<div className="text-center my-20">Connecting to {wsURL}...</div>
+				)}
+			</AuthKitProvider>
+		</AppContext.Provider>
+	)
+}
diff --git a/examples/document/src/AppContext.ts b/examples/document/src/AppContext.ts
@@ -0,0 +1,28 @@
+import { createContext } from "react"
+
+import type { SessionSigner } from "@canvas-js/interfaces"
+import { Canvas } from "@canvas-js/core"
+
+export type AppContext = {
+	app: Canvas | null
+
+	address: string | null
+	setAddress: (address: string | null) => void
+
+	sessionSigner: SessionSigner | null
+	setSessionSigner: (signer: SessionSigner | null) => void
+}
+
+export const AppContext = createContext<AppContext>({
+	app: null,
+
+	address: null,
+	setAddress: (address: string | null) => {
+		throw new Error("AppContext.Provider not found")
+	},
+
+	sessionSigner: null,
+	setSessionSigner: (signer) => {
+		throw new Error("AppContext.Provider not found")
+	},
+})
diff --git a/examples/document/src/ConnectionStatus.tsx b/examples/document/src/ConnectionStatus.tsx
@@ -0,0 +1,90 @@
+import React, { useContext, useEffect, useState } from "react"
+
+import type { Canvas, NetworkClient } from "@canvas-js/core"
+
+import { AppContext } from "./AppContext.js"
+
+export interface ConnectionStatusProps {
+	topic: string
+	ws: NetworkClient<any>
+}
+
+export const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ topic, ws }) => {
+	const { app } = useContext(AppContext)
+
+	const [, setTick] = useState(0)
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setTick(t => t + 1)
+		}, 1000)
+		return () => clearInterval(timer)
+	}, [])
+
+	if (app === null) {
+		return null
+	}
+
+	return (
+		<div className="p-2 border rounded flex flex-col gap-2">
+			<div>
+				<span className="text-sm">Topic</span>
+			</div>
+			<div>
+				<code className="text-sm">{topic}</code>
+			</div>
+
+			<hr />
+			<div>
+				<span className="text-sm">Connection</span>
+			</div>
+			<div>
+				<code className="text-sm">{import.meta.env.VITE_CANVAS_WS_URL}</code>
+				<span className="text-sm ml-2 text-gray-500">({ws.isConnected() ? 'Connected' : 'Disconnected'})</span>
+			</div>
+		</div>
+	)
+}
+
+interface ConnectionListProps {
+	app: Canvas
+}
+
+// const ConnectionList: React.FC<ConnectionListProps> = ({ app }) => {
+// 	const [peers, setPeers] = useState<string[]>([])
+
+// 	useEffect(() => {
+// 		if (app === null) {
+// 			return
+// 		}
+
+// 		const handleConnectionOpen = ({ detail: { peer } }: CustomEvent<{ peer: string }>) =>
+// 			void setPeers((peers) => [...peers, peer])
+
+// 		const handleConnectionClose = ({ detail: { peer } }: CustomEvent<{ peer: string }>) =>
+// 			void setPeers((peers) => peers.filter((id) => id !== peer))
+
+// 		app.messageLog.addEventListener("connect", handleConnectionOpen)
+// 		app.messageLog.addEventListener("disconnect", handleConnectionClose)
+
+// 		return () => {
+// 			app.messageLog.removeEventListener("connect", handleConnectionOpen)
+// 			app.messageLog.removeEventListener("disconnect", handleConnectionClose)
+// 		}
+// 	}, [app])
+
+// 	if (peers.length === 0) {
+// 		return <div className="italic">No connections</div>
+// 	} else {
+// 		return (
+// 			<ul className="list-disc pl-4">
+// 				{peers.map((peer) => {
+// 					return (
+// 						<li key={peer}>
+// 							<code className="text-sm">{peer}</code>
+// 						</li>
+// 					)
+// 				})}
+// 			</ul>
+// 		)
+// 	}
+// }