feat: Embedded SDK

.gitignore

@@ -1,5 +1,5 @@
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 
@@ -28,7 +28,8 @@ yarn-error.log*
 out/
 build/
 dist/
-
+sdk-dist
+wander-embedded-sdk/wallet-api-dist/
 # plasmo - https://www.plasmo.com
 .plasmo
 
@@ -39,4 +40,4 @@ keys.json
 .tsbuildinfo
 
 # temporary remove development icon
-assets/icon.development.png
+assets/icon.development.png

.vscode/settings.json

@@ -0,0 +1 @@
+{}

README.md

@@ -0,0 +1,135 @@
+# WanderEmbedded SDK Documentation
+
+WanderEmbedded SDK provides a seamless way to integrate Wander functionality into your web application.
+
+## Installation
+
+```bash
+npm install wander-embedded-sdk
+# or
+yarn add wander-embedded-sdk
+```
+
+## Quick Start
+
+```javascript
+import { WanderEmbedded } from "wander-embedded-sdk";
+
+// Initialize with default options
+const wander = new WanderEmbedded();
+
+// Or initialize with custom options
+const wander = new WanderEmbedded({
+  buttonStyles: "custom",
+  iframeStyles: {
+    /* custom styles */
+  },
+  logo: "custom-logo-url"
+});
+```
+
+## API Reference
+
+### Constructor Options
+
+The `WanderEmbedded` constructor accepts an optional configuration object with the following properties:
+
+| **Option**     | **Type**                     | **Default** | **Description**                                                                                                     |
+| -------------- | ---------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------- |
+| `buttonStyles` | object \| 'none'             | `undefined` | Customize the button’s appearance: - **object**: inline style object ; **'none'**: hide the button                  |
+| `iframeRef`    | `HTMLIFrameElement`          | `undefined` | Use an existing iframe element instead of creating a new one.                                                       |
+| `iframeStyles` | `object`                     | `undefined` | Inline styles for the iframe (e.g., `{ border: 'none', borderRadius: '12px' }`).                                    |
+| `logo`         | `string`                     | `undefined` | URL for a custom logo displayed on the Wander button.                                                               |
+| `balance`      | `string`                     | `undefined` | Show balance information on the button.                                                                             |
+| `onOpen`       | `() => void`                 | `undefined` | Callback fired when the Wander iframe is opened.                                                                    |
+| `onClose`      | `() => void`                 | `undefined` | Callback fired when the Wander iframe is closed.                                                                    |
+| `onResize`     | `(data: ResizeData) => void` | `undefined` | Callback fired when the Wander iframe is resized. The `data` object typically includes new width and height values. |
+
+### Methods
+
+#### `open()`
+
+Opens the Wander iframe.
+
+```javascript
+wander.open();
+```
+
+#### `close()`
+
+Closes the Wander iframe.
+
+```javascript
+wander.close();
+```
+
+#### `destroy()`
+
+Removes all Wander elements from the DOM and cleans up resources.
+
+```javascript
+wander.destroy();
+```
+
+## Examples
+
+### Basic Integration
+
+```javascript
+const wander = new WanderEmbedded();
+```
+
+### Custom Styling
+
+```javascript
+const wander = new WanderEmbedded({
+  buttonStyles: {
+    backgroundColor: "#000000",
+    color: "#ffffff"
+    // Add more custom styles
+  },
+  iframeStyles: {
+    border: "none",
+    borderRadius: "12px"
+    // Add more custom styles
+  }
+});
+```
+
+### With Event Handlers
+
+```javascript
+const wander = new WanderEmbedded({
+  onOpen: () => {
+    console.log("Wander iframe opened");
+  },
+  onClose: () => {
+    console.log("Wander iframe closed");
+  },
+  onResize: (data) => {
+    console.log("Iframe resized:", data);
+  }
+});
+```
+
+### Using Custom iframe
+
+```javascript
+const customIframe = document.getElementById("my-iframe");
+const wander = new WanderEmbedded({
+  iframeRef: customIframe
+});
+```
+
+### Button-less Integration
+
+```javascript
+const wander = new WanderEmbedded({
+  buttonStyles: "none"
+});
+```
+
+## Notes
+
+- The SDK automatically injects necessary elements into your webpage unless custom references are provided.
+- Make sure to call `destroy()` when cleaning up to prevent memory leaks.

assets/popup.js

@@ -1,5 +1,5 @@
-const backgroundColor = localStorage.getItem("ARCONNECT_THEME_BACKGROUND_COLOR");
-const textColor = localStorage.getItem("ARCONNECT_THEME_TEXT_COLOR");
+const backgroundColor = localStorage.getItem("APP_THEME_BACKGROUND_COLOR");
+const textColor = localStorage.getItem("APP_THEME_TEXT_COLOR");
 
 if (backgroundColor) document.documentElement.style.setProperty('--backgroundColor', backgroundColor);
 if (textColor) document.documentElement.style.setProperty('--textColor', textColor);

package.json

@@ -14,6 +14,7 @@
     "dev:iframe": "vite",
     "build:iframe": "vite build",
     "preview:iframe": "vite preview",
+    "build:wallet-api": "vite build --config vite.wallet-config.js",
     "nuke": "rm -rf node_modules build .plasmo",
     "fmt": "prettier --write .",
     "fmt:check": "prettier --check .",
@@ -99,6 +100,7 @@
     "styled-components": "^5.3.6",
     "typed-assert": "^1.0.9",
     "uuid": "^9.0.0",
+    "vite-plugin-dts": "^4.5.0",
     "webextension-polyfill": "^0.10.0",
     "wouter": "^3.3.5"
   },

shim.d.ts

@@ -60,13 +60,10 @@ declare module "@arconnect/webext-bridge" {
 
     // EMBEDDED:
 
-    embedded_open: any;
-    embedded_close: any;
-    embedded_resize: any;
-    // TODO: Maybe yes, maybe not (we should not drift too far away from the BE wallet API)
-    // embedded_auth: any;
-    // embedded_balance: any;
-    // embedded_info: any;
+    embedded_auth: EmbeddedAuthMessageData;
+    embedded_balance: EmbeddedBalanceMessageData;
+    embedded_resize: EmbeddedResizeMessageData;
+    embedded_close: void;
 
     // OTHER:
 
@@ -78,9 +75,11 @@ declare module "@arconnect/webext-bridge" {
 }
 
 interface ApiCall<DataType = any> extends JsonValue {
+  app: "wander" | "wanderEmbedded";
+  version: string;
+  callID: number | string;
   type: string;
   data?: DataType;
-  callID: number | string;
 }
 
 interface ApiResponse<DataType = any> extends ApiCall<DataType> {

src/api/background/background-setup.ts

@@ -28,6 +28,7 @@ import {
 } from "~api/background/handlers/browser/tabs/tabs.handler";
 import { log, LOG_GROUP } from "~utils/log/log.utils";
 import { handleAuthStateChange } from "./handlers/storage/auth-state-change/auth-state-change.handler";
+import { EMBEDDED_PARENT_ORIGIN } from "~utils/embedded/sdk/utils/url/sdk-url.utils";
 
 export function setupBackgroundService() {
   log(
@@ -42,6 +43,48 @@ export function setupBackgroundService() {
   onMessage("api_call", handleApiCallMessage);
   onMessage("chunk", handleChunkMessage);
 
+  if (import.meta.env?.VITE_IS_EMBEDDED_APP === "1") {
+    window.addEventListener("message", (event: MessageEvent) => {
+      if (
+        !event.data ||
+        event.data.app !== "wanderEmbedded" ||
+        event.origin !== EMBEDDED_PARENT_ORIGIN
+      )
+        return;
+
+      console.log("MESSAGE FROM PARENT =", event.data);
+
+      handleApiCallMessage({
+        id: "",
+        timestamp: Date.now(),
+        data: event.data,
+        sender: {
+          tabId: 0,
+          context: "content-script"
+        }
+      });
+
+      // Example: check if the message is from our SDK
+
+      /*
+      if (event.data.type === "FROM_SDK") {
+        const incomingMsg = event.data.payload;
+        console.log(
+          "Iframe received message from WanderEmbedded:",
+          incomingMsg
+        );
+
+        // Respond back
+        event.source?.postMessage({
+          type: "FROM_IFRAME",
+          payload: `Got your message: ${incomingMsg}`
+        });
+      }
+      */
+    });
+  } else {
+  }
+
   // LIFECYCLE:
 
   // Open welcome page on extension install.

src/api/background/handlers/message/api-call-message/api-call-message.handler.ts

@@ -28,7 +28,7 @@ export const handleApiCallMessage: OnMessageCallback<
     isExactly(
       sender.context,
       "content-script",
-      "Chunk calls are only accepted from the injected-script -> content-script"
+      "API call messages are only accepted from the injected-script -> content-script"
     );
     isApiCall(data);
 

src/api/background/handlers/message/chunk-message/chunk-message.handler.ts

@@ -23,7 +23,7 @@ export const handleChunkMessage: OnMessageCallback<
     isExactly(
       sender.context,
       "content-script",
-      "Chunk calls are only accepted from the injected-script -> content-script"
+      "Chunk messages are only accepted from the injected-script -> content-script"
     );
     isChunk(data.data);