Embed widget (#10)

* create logs & add build envs * add widget visibility Co-authored-by: Yuri Ardila <[email protected]>
upbond · Jan 20, 2023 · bc3d1a8 · bc3d1a8
1 parent 94692b3
commit bc3d1a8
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 42 deletions.
diff --git a/examples/react/src/App.js b/examples/react/src/App.js
@@ -4,7 +4,6 @@ import upbondServices from "lib/UpbondEmbed";
 import { useEffect, useState } from "react";
 import { toast, Toaster } from "react-hot-toast";
 import Web3 from "web3";
-import asobiAbi from './asobiMint.json';
 
 /* 
   Read this:
@@ -13,9 +12,6 @@ import asobiAbi from './asobiMint.json';
   We're using this example because we're usually using this method for implementing the @upbond/upbond-embed lib
 */
 
-const erc20FactoryContract = '0xc80101fA4E473F47Fea06288FbF0D2ff8C9fF9e7'
-const mintContract = '0x9008347b7b15C99cA963A750e03cAb4801620188'
-
 const App = () => {
   const [loading, setLoading] = useState(false);
   const [account, setAccount] = useState(null);
@@ -31,6 +27,7 @@ const App = () => {
     balance: 0
   })
   const _upbond = upbondServices.upbond.provider;
+  const _upbondInstance = upbondServices.upbond;
 
   useEffect(() => {
     const initUpbond = async () => {
@@ -160,6 +157,22 @@ const App = () => {
     }
   }
 
+  const showButtonBeforeLoggedIn = () => {
+    _upbondInstance.showWidget()
+  }
+
+  const hideButtonBeforeLoggedIn = () => {
+    _upbondInstance.hideWidget()
+  }
+
+  const openHomeWallet = () => {
+    _upbondInstance.showWallet("home")
+  }
+
+  const openMenu = () => {
+    _upbondInstance.showMenu()
+  }
+
   useEffect(() => {
     const init = async () => {
       if (upbondServices.upbond) {
@@ -284,6 +297,34 @@ const App = () => {
                 >
                   Send Transaction
                 </button>
+                <button
+                  type="button"
+                  className="mx-auto px-4 py-2 border border-transparent text-sm font-medium rounded-xl shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  w-1/4"
+                  onClick={showButtonBeforeLoggedIn}
+                >
+                  Show widget
+                </button>
+                <button
+                  type="button"
+                  className="mx-auto px-4 py-2 border border-transparent text-sm font-medium rounded-xl shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  w-1/4"
+                  onClick={hideButtonBeforeLoggedIn}
+                >
+                  Hide widget
+                </button>
+                <button
+                  type="button"
+                  className="mx-auto px-4 py-2 border border-transparent text-sm font-medium rounded-xl shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  w-1/4"
+                  onClick={openHomeWallet}
+                >
+                  Open home
+                </button>
+                <button
+                  type="button"
+                  className="mx-auto px-4 py-2 border border-transparent text-sm font-medium rounded-xl shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  w-1/4"
+                  onClick={openMenu}
+                >
+                  Open menu
+                </button>
               </div>
               <p className="text-black mt-5">Output: </p>
               <div className="overflow-hidden rounded-lg bg-white shadow mt-2">
@@ -330,6 +371,20 @@ const App = () => {
                 >
                   Login 3.0
                 </button>
+                <button
+                  type="button"
+                  className="mx-auto px-4 py-2 border border-transparent text-sm font-medium rounded-xl shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  w-1/4"
+                  onClick={showButtonBeforeLoggedIn}
+                >
+                  Show widget before logged in
+                </button>
+                <button
+                  type="button"
+                  className="mx-auto px-4 py-2 border border-transparent text-sm font-medium rounded-xl shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500  w-1/4"
+                  onClick={hideButtonBeforeLoggedIn}
+                >
+                  Hide widget before logged in
+                </button>
               </div>
             )}
           </div>

diff --git a/examples/react/src/lib/UpbondEmbed.js b/examples/react/src/lib/UpbondEmbed.js
@@ -14,7 +14,7 @@ class UpbondEmbed {
   web3 = null
 
   // you can also using another envs.
-  env = "v2_local"
+  env = "local"
 
   provider
 
@@ -35,28 +35,26 @@ class UpbondEmbed {
         // isUsingDirect: false,
         skipDialog: false,
         dappRedirectUri: `${window.location.origin}/sapi`,
+        showUpbondButton: true,
+        widgetConfig: {
+          showAfterLoggedIn: true,
+          showBeforeLoggedIn: false,
+        },
         network: {
-          host: "https://matic-testnet-archive-rpc.bwarelabs.com",
+          host: "mumbai",
           chainId: 80001,
           networkName: "Mumbai",
           blockExplorer: "",
           ticker: "MUMBAI",
           tickerName: "MUMBAI",
+          rpcUrl: "https://rpc.ankr.com/polygon_mumbai"
         },
-        // selectedVerifier: 'upbond-wallet-tesnet-line',
         loginConfig: {
-          "upbond-wallet-tesnet-line": {
-            name: "Upbond",
-            description: "LINE with UPBOND Identity",
+          "upbond-line": {
+            name: "Login With LINE",
+            description: "LINE",
             typeOfLogin: "line",
-            jwtParams: {
-              domain: "https://lzg2dndj.auth.dev.upbond.io",
-              connection: "line",
-              client_id: "FoQ_Ri8rKSXkHf82GRzZK",
-              clientId: 'FoQ_Ri8rKSXkHf82GRzZK',
-              scope: "openid email profile offline_access",
-              // redirect_uri: "http://localhost:3000/auth",
-            },
+            loginProvider: "upbond-line",
             jwtParameters: {
               domain: "https://lzg2dndj.auth.dev.upbond.io",
               connection: "line",
@@ -71,8 +69,8 @@ class UpbondEmbed {
             showOnMobile: true,
             mainOption: true,
             priority: 1,
-            buttonBgColor: '#faf',
-            buttonTextColor: '#FFF'
+            buttonBgColor: "#289B2A",
+            buttonTextColor: "#f3f3f3",
           }
         },
         whiteLabel: {

diff --git a/src/PopupHandler.ts b/src/PopupHandler.ts
@@ -15,11 +15,10 @@ class PopupHandler extends EventEmitter {
 
   iClosedWindow: boolean;
 
-  constructor({ url, target, features }: { url: URL; target?: string; features?: string }) {
+  constructor({ url, features }: { url: URL; target?: string; features?: string }) {
     super();
     this.url = url;
-    this.target = target || "_blank";
-    // eslint-disable-next-line no-console
+    this.target = "_blank";
     this.features = features || getPopupFeatures();
     this.window = undefined;
     this.windowTimer = undefined;
@@ -44,7 +43,7 @@ class PopupHandler extends EventEmitter {
   }
 
   open(): Promise<void> {
-    this.window = window.open(this.url.href, this.target, this.features);
+    this.window = window.open(this.url.href, "_blank");
     if (this.window?.focus) this.window.focus();
     return Promise.resolve();
   }

diff --git a/src/embed.ts b/src/embed.ts
@@ -108,8 +108,6 @@ class Upbond {
 
   isInitialized: boolean;
 
-  torusWidgetVisibility: boolean;
-
   torusAlert: HTMLDivElement;
 
   apiKey: string;
@@ -154,13 +152,14 @@ class Upbond {
 
   buildEnv: typeof UPBOND_BUILD_ENV[keyof typeof UPBOND_BUILD_ENV];
 
+  widgetConfig: { showAfterLoggedIn: boolean; showBeforeLoggedIn: boolean };
+
   constructor({ buttonPosition = BUTTON_POSITION.BOTTOM_LEFT, buttonSize = 56, modalZIndex = 99999, apiKey = "torus-default" }: TorusCtorArgs = {}) {
     this.buttonPosition = buttonPosition;
     this.buttonSize = buttonSize;
     this.torusUrl = "";
     this.isLoggedIn = false; // ethereum.enable working
     this.isInitialized = false; // init done
-    this.torusWidgetVisibility = true;
     this.requestedVerifier = "";
     this.currentVerifier = "";
     this.apiKey = apiKey;
@@ -170,6 +169,10 @@ class Upbond {
     this.isIframeFullScreen = false;
     this.isUsingDirect = false;
     this.buildEnv = "production";
+    this.widgetConfig = {
+      showAfterLoggedIn: true,
+      showBeforeLoggedIn: false,
+    };
   }
 
   async init({
@@ -186,7 +189,7 @@ class Upbond {
       tickerName: "",
     },
     loginConfig = defaultLoginParam,
-    showUpbondButton = true,
+    widgetConfig,
     integrity = {
       check: false,
       hash: iframeIntegrity,
@@ -206,21 +209,21 @@ class Upbond {
     let buildTempEnv = buildEnv;
     if (buildEnv === "v2_development") {
       log.warn(
-        `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL' instead to point wallet on ${window.location.origin}.`
+        `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.DEVELOPMENT' instead to point wallet on DEVELOPMENT environment.`
       );
       log.warn(`More information, please visit https://github.com/upbond/embed`);
       buildTempEnv = "development";
     }
     if (buildEnv === "v2_production") {
       log.warn(
-        `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL' instead to point wallet on ${window.location.origin}.`
+        `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.PRODUCTION' instead to point wallet on PRODUCTION environment.`
       );
       log.warn(`More information, please visit https://github.com/upbond/embed`);
       buildTempEnv = "production";
     }
     if (buildEnv === "v2_new-dev-local") {
       log.warn(
-        `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL' instead to point wallet on ${window.location.origin}.`
+        `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL' instead to point wallet on LOCAL environment.`
       );
       log.warn(`More information, please visit https://github.com/upbond/embed`);
       buildTempEnv = "new-dev-local";
@@ -229,13 +232,19 @@ class Upbond {
 
     if (buildEnv.includes("v1")) {
       log.warn(
-        `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL' instead to point wallet on ${window.location.origin}`
+        `[UPBOND-EMBED] WARNING! This buildEnv is deprecating soon. Please use 'UPBOND_BUILD_ENV.LOCAL|DEVELOPMENT|STAGING|PRODUCTION' instead to point wallet on each environment`
       );
       log.warn(`More information, please visit https://github.com/upbond/embed`);
     }
 
     log.info(`Url Loaded: ${torusUrl} with log: ${logLevel}`);
 
+    if (!widgetConfig) {
+      log.info(`widgetConfig is not configured. Now using default widget configuration`);
+    } else {
+      this.widgetConfig = widgetConfig;
+    }
+
     if (selectedVerifier) {
       try {
         const isAvailableOnLoginConfig = loginConfig[selectedVerifier];
@@ -261,7 +270,6 @@ class Upbond {
 
     if (enableLogging) log.enableAll();
     else log.disableAll();
-    this.torusWidgetVisibility = showUpbondButton;
     const upbondIframeUrl = new URL(torusUrl);
     if (upbondIframeUrl.pathname.endsWith("/")) upbondIframeUrl.pathname += "popup";
     else upbondIframeUrl.pathname += "/popup";
@@ -317,10 +325,10 @@ class Upbond {
               whiteLabel: this.whiteLabel,
               buttonPosition: this.buttonPosition,
               buttonSize: this.buttonSize,
-              torusWidgetVisibility: this.torusWidgetVisibility,
               apiKey: this.apiKey,
               skipTKey,
               network,
+              widgetConfig: this.widgetConfig,
               mfaLevel,
               skipDialog,
               selectedVerifier,
@@ -422,18 +430,26 @@ class Upbond {
     this.isInitialized = false;
   }
 
-  hideTorusButton(): void {
-    this.torusWidgetVisibility = false;
+  hideWidget(): void {
     this._sendWidgetVisibilityStatus(false);
     this._displayIframe();
   }
 
-  showUpbondButton(): void {
-    this.torusWidgetVisibility = true;
+  showWidget(): void {
     this._sendWidgetVisibilityStatus(true);
     this._displayIframe();
   }
 
+  showMenu(): void {
+    this._sendWidgetMenuVisibilityStatus(true);
+    this._displayIframe(true);
+  }
+
+  hideMenu(): void {
+    this._sendWidgetMenuVisibilityStatus(false);
+    this._displayIframe(false);
+  }
+
   setProvider({ host = "mainnet", chainId = null, networkName = "", ...rest }: NetworkInterface): Promise<void> {
     return new Promise((resolve, reject) => {
       const providerChangeStream = this.communicationMux.getStream("provider_change") as Substream;
@@ -689,18 +705,26 @@ class Upbond {
   }
 
   protected _sendWidgetVisibilityStatus(status: boolean): void {
-    const torusWidgetVisibilityStream = this.communicationMux.getStream("torus-widget-visibility") as Substream;
-    torusWidgetVisibilityStream.write({
+    const upbondButtonVisibilityStream = this.communicationMux.getStream("widget-visibility") as Substream;
+    upbondButtonVisibilityStream.write({
+      data: status,
+    });
+  }
+
+  protected _sendWidgetMenuVisibilityStatus(status: boolean): void {
+    const upbondButtonVisibilityStream = this.communicationMux.getStream("menu-visibility") as Substream;
+    upbondButtonVisibilityStream.write({
       data: status,
     });
   }
 
   protected _displayIframe(isFull = false): void {
+    console.log("onDisplay: ", isFull);
     const style: Partial<CSSStyleDeclaration> = {};
     const size = this.buttonSize + 14; // 15px padding
     // set phase
     if (!isFull) {
-      style.display = this.torusWidgetVisibility ? "block" : "none";
+      style.display = this.isLoggedIn ? "block" : !this.isLoggedIn ? "block" : "none";
       style.height = `${size}px`;
       style.width = `${size}px`;
       switch (this.buttonPosition) {

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -146,7 +146,7 @@ export type EMBED_TRANSLATION_ITEM = {
 
 export type BUTTON_POSITION_TYPE = typeof BUTTON_POSITION[keyof typeof BUTTON_POSITION];
 
-export type WALLET_PATH = "transfer" | "topup" | "home" | "settings" | "history" | "discover";
+export type WALLET_PATH = "home" | "account";
 export type ETHEREUM_NETWORK_TYPE =
   | "ropsten"
   | "rinkeby"
@@ -756,8 +756,28 @@ export interface IUpbondEmbedParams {
    */
   buildEnv?: BuildEnv;
 
+  /**
+   * If using direct upbond embed will not going to open the window
+   * @defaultValue true
+   * @type {boolean}
+   * @memberof IUpbondEmbedParams
+   */
   isUsingDirect?: boolean;
 
+  /**
+   * Upbond button state, you can configure the button will be shown after or before loggedIn
+   *
+   * @type {{
+   *     showAfterLoggedIn: boolean;
+   *     showBeforeLoggedIn: boolean;
+   *   }}
+   * @memberof IUpbondEmbedParams
+   */
+  widgetConfig?: {
+    showAfterLoggedIn: boolean;
+    showBeforeLoggedIn: boolean;
+  };
+
   /**
    * Enables or disables logging.
    *