Merge pull request #54 from trilitech/feat/web3-auth

SocialAuth Integration

package.json

@@ -1,6 +1,7 @@
 {
-  "name": "umami-ui",
-  "version": "0.1.0",
+  "name": "umami",
+  "productName": "umami",
+  "version": "2.0.0",
   "private": true,
   "author": "Trilitech <umami-admin@trili.tech>",
   "description": "Tezos Wallet",
@@ -19,6 +20,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@toruslabs/customauth": "^11.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.14",
     "@types/react": "^18.0.28",
@@ -100,7 +102,7 @@
     "babel-plugin-named-exports-order": "^0.0.2",
     "concurrently": "^7.6.0",
     "cross-env": "^7.0.3",
-    "electron": "^23.1.3",
+    "electron": "^23.2.0",
     "electron-builder": "^23.6.0",
     "electronmon": "^2.0.2",
     "eslint": "^8.38.0",
@@ -143,13 +145,41 @@
       "buildResources": "public"
     },
     "mac": {
-      "target": "dmg"
+      "icon": "./public/logo512.png",
+      "hardenedRuntime": true,
+      "gatekeeperAssess": false,
+      "target": [
+        {
+          "target": "dmg",
+          "arch": [
+            "arm64",
+            "x64"
+          ]
+        }
+      ]
     },
     "win": {
-      "target": "nsis"
+      "icon": "build/logo512.png",
+      "target": [
+        {
+          "target": "portable",
+          "arch": [
+            "x64"
+          ]
+        }
+      ]
     },
     "linux": {
-      "target": "deb"
+      "target": "AppImage",
+      "mimeTypes": [
+        "x-scheme-handler/umami"
+      ]
+    },
+    "protocols": {
+      "name": "umami",
+      "schemes": [
+        "umami"
+      ]
     }
   }
 }

public/electron.js

@@ -1,16 +1,36 @@
 // Module to control the application lifecycle and the native browser window.
-const { app, BrowserWindow, protocol } = require("electron");
+const { app, BrowserWindow } = require("electron");
 const path = require("path");
 const url = require("url");
 
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow;
+let deeplinkURL;
+
+// Assure single instance
+if (!app.requestSingleInstanceLock()) {
+  app.quit();
+  return;
+}
+
+// Temporary fix broken high-dpi scale factor on Windows (125% scaling)
+// info: https://github.com/electron/electron/issues/9691
+if (process.platform === "win32") {
+  app.commandLine.appendSwitch("high-dpi-support", "true");
+  app.commandLine.appendSwitch("force-device-scale-factor", "1");
+}
+
 // Create the native browser window.
 function createWindow() {
-  const mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    // Set the path of an additional "preload" script that can be used to
-    // communicate between node-land and browser-land.
+  mainWindow = new BrowserWindow({
+    width: 1440,
+    height: 1024,
+    show: false,
+    icon: path.join(__dirname, "icon.ico"),
     webPreferences: {
+      // Set the path of an additional "preload" script that can be used to
+      // communicate between node-land and browser-land.
       preload: path.join(__dirname, "preload.js"),
     },
   });
@@ -27,34 +47,91 @@ function createWindow() {
     : "http://localhost:3000";
   mainWindow.loadURL(appURL);
 
-  // Automatically open Chrome's DevTools in development mode.
-  if (!app.isPackaged) {
-    mainWindow.webContents.openDevTools();
-  }
-}
+  mainWindow.once("ready-to-show", () => {
+    mainWindow.show();
 
-// Setup a local proxy to adjust the paths of requested files when loading
-// them from the local production bundle (e.g.: local fonts, etc...).
-function setupLocalFilesNormalizerProxy() {
-  protocol.registerHttpProtocol(
-    "file",
-    (request, callback) => {
-      const url = request.url.substr(8);
-      callback({ path: path.normalize(`${__dirname}/${url}`) });
-    },
-    (error) => {
-      if (error) console.error("Failed to register protocol");
+    if (deeplinkURL) {
+      mainWindow.webContents.send("deeplinkURL", deeplinkURL);
+      deeplinkURL = null;
+    } else if (process.platform === "win32" || process.platform === "linux") {
+      // Protocol handler for windows & linux
+      const argv = process.argv;
+      const index = argv.findIndex((arg) => arg.startsWith("umami://"));
+      if (index !== -1) {
+        mainWindow.webContents.send("deeplinkURL", argv[index]);
+      }
+    }
+  });
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    if (details.frameName === "_blank") {
+      require("electron").shell.openExternal(details.url);
+      return { action: "deny" };
+    } else {
+      return { action: "allow" };
     }
-  );
+  });
+
+  // Emitted when the window is closed.
+  mainWindow.on("closed", () => {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null;
+  });
+}
+
+app.commandLine.appendSwitch("disable-features", "OutOfBlinkCors");
+
+if (!app.isDefaultProtocolClient("umami")) {
+  // Define custom protocol handler. Deep linking works on packaged versions of the application!
+  app.setAsDefaultProtocolClient("umami");
 }
 
+// Quit when all windows are closed.
+app.on("window-all-closed", () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+
+app.on("second-instance", (event, argv, cwd) => {
+  if (mainWindow) {
+    if (mainWindow.isMinimized()) {
+      mainWindow.restore();
+    }
+    mainWindow.focus();
+    // Protocol handler for win32
+    // argv: An array of the second instance’s (command line / deep linked) arguments
+    if (process.platform === "win32" || process.platform === "linux") {
+      // Protocol handler for windows & linux
+      const index = argv.findIndex((arg) => arg.startsWith("umami://"));
+      if (index !== -1) {
+        mainWindow.webContents.send("deeplinkURL", argv[index]);
+      }
+    }
+  } else {
+    createWindow();
+  }
+});
+
+app.on("open-url", (event, url) => {
+  console.log("open-url", url);
+  if (mainWindow) {
+    mainWindow.webContents.send("deeplinkURL", url);
+  } else {
+    deeplinkURL = url;
+    createWindow();
+  }
+});
+
 // This method will be called when Electron has finished its initialization and
 // is ready to create the browser windows.
 // Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
   createWindow();
-  setupLocalFilesNormalizerProxy();
-
   app.on("activate", function () {
     // On macOS it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.
@@ -63,29 +140,3 @@ app.whenReady().then(() => {
     }
   });
 });
-
-// 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.
-app.on("window-all-closed", function () {
-  if (process.platform !== "darwin") {
-    app.quit();
-  }
-});
-
-// If your app has no need to navigate or only needs to navigate to known pages,
-// it is a good idea to limit navigation outright to that known scope,
-// disallowing any other kinds of navigation.
-const allowedNavigationDestinations = "https://my-electron-app.com";
-app.on("web-contents-created", (event, contents) => {
-  contents.on("will-navigate", (event, navigationUrl) => {
-    const parsedUrl = new URL(navigationUrl);
-
-    if (!allowedNavigationDestinations.includes(parsedUrl.origin)) {
-      event.preventDefault();
-    }
-  });
-});
-
-// In this file you can include the rest of your app's specific main process
-// code. You can also put them in separate files and require them here.

public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/icon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -27,7 +27,7 @@
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/icon.ico" or "icon.ico", "%PUBLIC_URL%/icon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->

public/manifest.json

@@ -1,9 +1,9 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Umami",
+  "name": "Umami Wallet",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "icon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },

public/preload.js

@@ -1,10 +1,14 @@
 // All of the Node.js APIs are available in the preload process.
 // It has the same sandbox as a Chrome extension.
-const { contextBridge } = require("electron");
+const { contextBridge, ipcRenderer } = require("electron");
 
 // As an example, here we use the exposeInMainWorld API to expose the browsers
 // and node versions to the main window.
 // They'll be accessible at "window.versions".
 process.once("loaded", () => {
   contextBridge.exposeInMainWorld("versions", process.versions);
 });
+
+contextBridge.exposeInMainWorld("electronAPI", {
+  onDeeplink: (callback) => ipcRenderer.on("deeplinkURL", callback),
+});