feat: window and toast features (#94)

* feat: window and toast features

* refactor: showToast param names; open/closeWindow

* chore: version bump

Author: Austin Fay

npm/sdk/examples/react-basic/package-lock.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@trufflehq/sdk": "^0.2.2",
+    "@trufflehq/sdk": "^0.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

npm/sdk/examples/react-basic/package.json

@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import reactLogo from './assets/react.svg';
-import './App.css';
-import { getEmbed } from '@trufflehq/sdk';
+import { useState } from "react";
+import reactLogo from "./assets/react.svg";
+import "./App.css";
+import { getEmbed } from "@trufflehq/sdk";
 
 const embed = getEmbed();
 
@@ -13,30 +13,41 @@ function App() {
 
   const setSize = () => {
     if (isSmall) {
-      embed.setSize('800px', '800px');
+      embed.setSize("800px", "800px");
       setIsSmall(false);
     } else {
-      embed.setSize('600px', '600px');
+      embed.setSize("600px", "600px");
       setIsSmall(true);
     }
   };
 
   const setBorder = () => {
     if (hasBorder) {
       embed.setStyles({
-        border: 'none',
+        border: "none",
       });
       setHasBorder(false);
     } else {
       embed.setStyles({
-        border: '5px solid red',
+        border: "5px solid red",
       });
       setHasBorder(true);
     }
   };
 
   const setContainer = () => {
-    embed.setContainer('#title.ytd-watch-metadata', 'prepend');
+    embed.setContainer("#title.ytd-watch-metadata", "prepend");
+  };
+
+  const hideWindow = () => {
+    embed.setWindowVisibility(false);
+  };
+
+  const showToast = () => {
+    embed.showToast({
+      message: "Hello World!",
+      header: "A message from Truffle",
+    });
   };
 
   return (
@@ -66,6 +77,8 @@ function App() {
       <button onClick={setSize}>Toggle Size</button>
       <button onClick={setBorder}>Toggle Border</button>
       <button onClick={setContainer}>Set Container</button>
+      <button onClick={hideWindow}>Hide Window</button>
+      <button onClick={showToast}>Show Toast</button>
     </div>
   );
 }

npm/sdk/examples/react-basic/src/App.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@trufflehq/sdk",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "description": "The official javascript SDK for Truffle",
   "keywords": [
     "truffle",

npm/sdk/package.json

@@ -1,5 +1,5 @@
-import { TransframeConsumer } from '@trufflehq/transframe';
-import { EmbedSourceApi, getEmbedConsumer } from '../transframe/embed-consumer';
+import { TransframeConsumer } from "@trufflehq/transframe";
+import { EmbedSourceApi, getEmbedConsumer } from "../transframe/embed-consumer";
 
 type Styles = Record<string, unknown>;
 
@@ -12,7 +12,7 @@ export class Embed {
   }
 
   private _setIframeStyles(styles: Styles) {
-    this._embedConsumer.call('embedSetStyles', styles);
+    this._embedConsumer.call("embedSetStyles", styles);
     this._currentStyles = styles;
   }
 
@@ -58,7 +58,7 @@ export class Embed {
    */
   public setVisibility(isVisible: boolean) {
     this.setStyles({
-      display: isVisible ? 'block' : 'none',
+      display: isVisible ? "block" : "none",
     });
   }
 
@@ -67,12 +67,12 @@ export class Embed {
    */
   public setContainer(
     querySelector: string,
-    insertionMethod?: 'append' | 'prepend'
+    insertionMethod?: "append" | "prepend",
   ) {
     this._embedConsumer.call(
-      'embedSetContainer',
+      "embedSetContainer",
       querySelector,
-      insertionMethod
+      insertionMethod,
     );
   }
 
@@ -89,4 +89,53 @@ export class Embed {
   public show() {
     this.setVisibility(true);
   }
+
+  /**
+   * Set the visibility of the window.
+   */
+  public setWindowVisibility(isVisible: boolean) {
+    this._embedConsumer.call("embedWindowSetVisibility", isVisible);
+  }
+
+  /**
+   * Get the visibility state of the window.
+   */
+  public async getWindowVisibility() {
+    return await this._embedConsumer.call("embedWindowGetVisibility");
+  }
+
+  /**
+   * Open the window.
+   */
+  public openWindow() {
+    this.setWindowVisibility(true);
+  }
+
+  /**
+   * Close the window.
+   */
+  public closeWindow() {
+    this.setWindowVisibility(false);
+  }
+
+  /**
+   * Shows a toast message.
+   */
+  public showToast(options: {
+    body: string;
+    title?: string;
+    iconUrl?: string;
+    onClick?: () => void;
+  }) {
+    return this._embedConsumer.call(
+      "embedShowToast",
+      {
+        body: options.body,
+        title: options.title,
+        iconUrl: options.iconUrl,
+      },
+      // transframe callbacks only work if they're passed as top level arguments to a function
+      options.onClick,
+    );
+  }
 }