Desktop Launcher Connect support (#132)

WyattMufson · web-flow · commit 7ef9a60441a5 · 2024-10-08T15:19:48.000-04:00
* Started launcher package

* Use launcher package in react package

* prevent useConnect when using launcher

* fixing launcher package

* set auth token and user with launcher token

* README

* package fix

* improve search function

* works in electron

* README

* refactoring getAuthTokenOverride

* moving launcher code from treasure.tsx to useLauncher.tsx

* moving everything into useLauncher

* fix

* Add setup for adding a modal for launcher account

* Launcher account modal

* Use electron icon, remove log

* Update README

* make changes

* remove TODO

* Added changeset

* Address additional changes

* memoize onAuthTokenUpdated
diff --git a/.changeset/large-ears-rhyme.md b/.changeset/large-ears-rhyme.md
@@ -0,0 +1,6 @@
+---
+"@treasure-dev/launcher": patch
+"@treasure-dev/tdk-react": patch
+---
+
+Added @treasure-dev/launcher package for usage with the launcher
diff --git a/examples/connect-electron/.env.example b/examples/connect-electron/.env.example
@@ -3,3 +3,4 @@ VITE_TDK_CLIENT_ID=
 VITE_TDK_ECOSYSTEM_ID=ecosystem.treasure
 VITE_TDK_ECOSYSTEM_PARTNER_ID=
 VITE_TDK_BACKEND_WALLET=
+VITE_TDK_AUTH_TOKEN=
diff --git a/examples/connect-electron/package.json b/examples/connect-electron/package.json
@@ -9,7 +9,8 @@
     "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
     "typecheck": "pnpm typecheck:node && pnpm typecheck:web",
     "start": "pnpm install:electron && electron-vite preview",
-    "dev": "pnpm install:electron && electron-vite dev",
+    "dev:vite": "electron-vite dev -- --tdk-auth-token=$VITE_TDK_AUTH_TOKEN",
+    "dev": "pnpm install:electron && dotenv -e .env -- pnpm dev:vite",
     "build": "pnpm typecheck && electron-vite build",
     "build:unpack": "pnpm build && electron-builder --dir",
     "build:win": "pnpm build && electron-builder --win",
@@ -28,6 +29,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@vitejs/plugin-react": "catalog:",
+    "dotenv-cli": "catalog:",
     "electron": "catalog:",
     "electron-builder": "catalog:",
     "electron-vite": "catalog:",
diff --git a/examples/connect-electron/src/main/index.ts b/examples/connect-electron/src/main/index.ts
@@ -1,5 +1,6 @@
 import { join } from "node:path";
 import { electronApp, is, optimizer } from "@electron-toolkit/utils";
+import { getTreasureLauncherAuthToken } from "@treasure-dev/launcher";
 import { BrowserWindow, app, ipcMain, shell } from "electron";
 import icon from "../../resources/icon.png?asset";
 import { startRedirectApp } from "./app";
@@ -66,6 +67,10 @@ app.whenReady().then(() => {
   startRedirectApp(mainWindow);
 });
 
+ipcMain.on("get-auth-token", (event, _arg) => {
+  event.returnValue = getTreasureLauncherAuthToken();
+});
+
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
diff --git a/examples/connect-electron/src/renderer/src/main.tsx b/examples/connect-electron/src/renderer/src/main.tsx
@@ -8,12 +8,17 @@ import { ThirdwebProvider } from "thirdweb/react";
 
 import { toWei } from "thirdweb";
 import App from "./App";
+import icon from "./assets/electron.svg";
+
+const getAuthToken = () =>
+  window.electron.ipcRenderer.sendSync("get-auth-token");
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <ThirdwebProvider>
       <TreasureProvider
         appName="Electron App"
+        appIconUri={icon}
         apiUri={import.meta.env.VITE_TDK_API_URL}
         defaultChainId={421614}
         clientId={import.meta.env.VITE_TDK_CLIENT_ID}
@@ -29,6 +34,9 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
           ],
           nativeTokenLimitPerTransaction: toWei("1"),
         }}
+        launcherOptions={{
+          getAuthTokenOverride: getAuthToken,
+        }}
       >
         <App />
       </TreasureProvider>
diff --git a/package.json b/package.json
@@ -2,15 +2,17 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "pnpm build:auth && pnpm build:core && pnpm build:react && pnpm build:api",
+    "build": "pnpm build:auth && pnpm build:core && pnpm build:launcher && pnpm build:react && pnpm build:api",
     "build:auth": "pnpm --filter ./packages/auth build",
     "build:core": "pnpm --filter ./packages/core build",
+    "build:launcher": "pnpm --filter ./packages/launcher build",
     "build:react": "pnpm --filter ./packages/react build",
     "build:api": "pnpm --filter ./apps/api build",
     "generate": "pnpm -r generate",
-    "dev": "concurrently \"pnpm dev:auth\" \"pnpm dev:core\" \"pnpm dev:api\" \"pnpm dev:react\"",
+    "dev": "concurrently \"pnpm dev:auth\" \"pnpm dev:core\" \"pnpm dev:launcher\" \"pnpm dev:api\" \"pnpm dev:react\"",
     "dev:auth": "pnpm --filter ./packages/auth dev",
     "dev:core": "pnpm --filter ./packages/core dev",
+    "dev:launcher": "pnpm --filter ./packages/launcher dev",
     "dev:api": "pnpm --filter ./apps/api dev",
     "dev:react": "pnpm --filter ./packages/react dev",
     "dev:connect-electron": "pnpm --filter ./examples/connect-electron dev",
@@ -23,7 +25,7 @@
     "test": "TZ=UTC vitest run",
     "package:changeset": "changeset",
     "package:version": "changeset version",
-    "package:publish": "pnpm build:auth && pnpm build:core && pnpm build:react && changeset publish",
+    "package:publish": "pnpm build:auth && pnpm build:core && pnpm build:launcher && pnpm build:react && changeset publish",
     "prepare": "husky"
   },
   "devDependencies": {
diff --git a/packages/launcher/README.md b/packages/launcher/README.md
@@ -0,0 +1,89 @@
+# Treasure Launcher
+
+Treasure Launcher utilities for the Treasure ecosystem
+
+## Prerequisites
+
+- [>= Node 20.11.0](https://nodejs.org/en)
+
+## Installation
+
+```bash
+pnpm add @treasure-dev/launcher
+```
+
+## Usage
+
+### Using vanilla JavaScript
+
+#### Get auth token
+
+```ts
+import { getTreasureLauncherAuthToken } from "@treasure-dev/launcher";
+
+const authToken = getTreasureLauncherAuthToken();
+```
+
+#### Check if using Treasure Launcher
+
+```ts
+import { isUsingTreasureLauncher } from "@treasure-dev/launcher";
+
+const usingLauncher = isUsingTreasureLauncher();
+```
+
+#### Start user session
+
+```ts
+import { startUserSessionViaLauncher } from "@treasure-dev/launcher";
+
+await startUserSessionViaLauncher({
+    backendWallet: "0x...",
+    approvedTargets: ["0x..."],
+    nativeTokenLimitPerTransaction: 100,
+    sessionDurationSec: 60 * 60 * 24 * 7,
+    sessionMinDurationLeftSec: 60 * 60 * 24 * 3,
+});
+```
+
+### Using React
+
+#### Check if using Treasure Launcher
+
+```ts
+import { useTreasure } from "@treasure-dev/react";
+
+const { isUsingTreasureLauncher } = useTreasure();
+```
+
+#### Start user session via Treasure Launcher
+
+Use `startUserSession` as usual:
+
+```ts
+import { useTreasure } from "@treasure-dev/react";
+
+const { startUserSession } = useTreasure();
+```
+
+### Using Electron + React
+
+```ts Main.ts
+ipcMain.on("get-auth-token", (event, _arg) => {
+    event.returnValue = getTreasureLauncherAuthToken();
+});
+```
+
+```ts Main.tsx
+const getAuthToken = () =>
+  window.electron.ipcRenderer.sendSync("get-auth-token");
+
+<TreasureProvider
+ ...
+ getAuthTokenOverride={getAuthToken}
+>
+```
+
+## Deployment
+
+Merge [changeset-bot](https://github.com/apps/changeset-bot)'s versioning PR to the `main` branch to push a new package version to npm.
diff --git a/packages/launcher/package.json b/packages/launcher/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@treasure-dev/launcher",
+  "version": "1.0.0",
+  "description": "Treasure Launcher utilities for the Treasure ecosystem",
+  "keywords": [
+    "treasure"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TreasureProject/tdk-js.git",
+    "directory": "packages/launcher"
+  },
+  "bugs": {
+    "url": "https://github.com/TreasureProject/tdk-js/issues",
+    "email": "engineering@treasure.lol"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "./dist"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "pnpm typecheck && tsup",
+    "dev": "pnpm build --watch"
+  },
+  "dependencies": {
+    "@treasure-dev/tdk-core": "*"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}
diff --git a/packages/launcher/src/index.ts b/packages/launcher/src/index.ts
@@ -0,0 +1,2 @@
+export { getTreasureLauncherAuthToken, isUsingTreasureLauncher } from "./utils";
+export { startUserSessionViaLauncher } from "./session";
diff --git a/packages/launcher/src/session.ts b/packages/launcher/src/session.ts
@@ -0,0 +1,36 @@
+import type { SessionOptions } from "@treasure-dev/tdk-core";
+import { isUsingTreasureLauncher } from "./utils";
+
+export function startUserSessionViaLauncher({
+  backendWallet,
+  approvedTargets,
+  nativeTokenLimitPerTransaction,
+  sessionDurationSec,
+  sessionMinDurationLeftSec,
+}: SessionOptions): Promise<void> {
+  if (!isUsingTreasureLauncher()) {
+    return Promise.reject(
+      new Error(
+        "startUserSessionViaLauncher can only be used with Treasure Launcher",
+      ),
+    );
+  }
+
+  return fetch("http://localhost:16001/tdk-start-session", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      backendWallet,
+      approvedTargets,
+      nativeTokenLimitPerTransaction,
+      sessionDurationSec,
+      sessionMinDurationLeftSec,
+    }),
+  }).then((response) => {
+    if (!response.ok) {
+      throw new Error("Failed to start session");
+    }
+  });
+}
diff --git a/packages/launcher/src/utils.ts b/packages/launcher/src/utils.ts
@@ -0,0 +1,22 @@
+export function getTreasureLauncherAuthToken(): string | undefined {
+  let args: string[] | undefined;
+
+  if (typeof process !== "undefined" && Array.isArray(process.argv)) {
+    args = process.argv;
+  } else if (
+    typeof window !== "undefined" &&
+    window.process &&
+    Array.isArray(window.process.argv)
+  ) {
+    args = window.process.argv;
+  } else {
+    return undefined;
+  }
+
+  const arg = args.find((arg) => arg.startsWith("--tdk-auth-token="));
+  return arg ? arg.split("=")[1] : undefined;
+}
+
+export function isUsingTreasureLauncher(): boolean {
+  return !!getTreasureLauncherAuthToken();
+}
diff --git a/packages/launcher/tsconfig.json b/packages/launcher/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src/**/*.ts", "./src/**/*.d.ts"]
+}
diff --git a/packages/launcher/tsup.config.ts b/packages/launcher/tsup.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  clean: true,
+});
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -44,6 +44,7 @@
     "@radix-ui/react-dialog": "catalog:",
     "@radix-ui/react-visually-hidden": "catalog:",
     "@treasure-dev/tdk-core": "workspace:*",
+    "@treasure-dev/launcher": "workspace:*",
     "clsx": "catalog:",
     "i18next": "catalog:",
     "i18next-browser-languagedetector": "catalog:",
diff --git a/packages/react/src/components/launcher/AccountModal.tsx b/packages/react/src/components/launcher/AccountModal.tsx
diff --git a/packages/react/src/contexts/treasure.tsx b/packages/react/src/contexts/treasure.tsx
diff --git a/packages/react/src/hooks/useConnect.tsx b/packages/react/src/hooks/useConnect.tsx
diff --git a/packages/react/src/hooks/useLauncher.tsx b/packages/react/src/hooks/useLauncher.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { getTreasureLauncherAuthToken, isUsingTreasureLauncher } from "./utils";`
	`2`	`+export { startUserSessionViaLauncher } from "./session";`