onboarding prompt

pow-co · Feb 1, 2023 · e242a60 · e242a60
1 parent a4e7dbb
commit e242a60
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   "scripts": {
     "start": "parcel watch --no-hmr src/manifest.json",
     "build": "parcel build src/manifest.json",
+    "build-release": "rm -rf dist .parcel-cache && parcel build --no-source-maps src/manifest.json",
     "release": "cross-env NODE_ENV=production rollup -c"
   },
   "dependencies": {
@@ -21,6 +22,8 @@
   },
   "devDependencies": {
     "@parcel/config-webextension": "^2.8.3",
+    "@parcel/optimizer-data-url": "2.8.3",
+    "@parcel/transformer-inline-string": "2.8.3",
     "@types/node": "^18.11.18",
     "@types/webextension-polyfill": "^0.10.0",
     "buffer": "^5.5.0",

diff --git a/src/inject.ts b/src/inject.ts
@@ -29,11 +29,13 @@ window.addEventListener('message', (message: MessageEvent) => {
     }
 })
 
+let authRedirectUrl: string | undefined = void 0
 
 async function checkAndCall<T>(method: string, params: T): Promise<any> {
     const linked = await RelayOneClient.isLinked();
     if (!linked) {
-        await send("onboard", {})
+        showSignupPopup(authRedirectUrl || window.location.toString())
+        return new Promise(() => { });
     }
     const result = await send(method, params);
     if (result.error) {
@@ -50,14 +52,15 @@ async function unLinkedCall<T>(method: string, params: T): Promise<any> {
     return result;
 }
 
+
 const RelayOneClient = {
     p2p: true,
     extension: true,
     authRedirectUrl: (url: string) => {
         if (typeof url !== "string") {
             return false;
         }
-        // RELAY_STATE.authRedirect = url;
+        authRedirectUrl = url;
         return true;
     },
 
@@ -159,3 +162,121 @@ const RelayOneClient = {
 console.log("INJECTED");
 
 (window as any)['relayone'] = RelayOneClient
+
+const image = require('data-url:./logo-header.png')
+const POPUP = `
+<div style="
+margin: 0 auto; padding: 20px; width: 300px; min-height: 250px; 
+background: rgb(47, 59, 82);border-radius: 10px;
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',sans-serif; display: flex; flex-direction: column;
+justify-content: space-between;
+box-sizing: border-box;
+position: relative;
+">
+<img
+  style="
+    width: 120px;
+    height: 20px;
+    display: block;
+    margin: 20px auto;
+  "
+  src="${image}"
+  alt=""
+/>
+<div
+  style="
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+    boxSizing: content-box;
+  "
+  class="relay-one-close"
+>
+  <span
+    style="
+      display: block;
+      box-sizing: content-box;
+      cursor: pointer;
+      background: rgb(101, 125, 149);
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      text-align: center;
+      padding: 2px;
+      font-size: 12px;
+      color: rgb(17, 26, 44);
+      line-height: 16px;
+    "
+  >
+    ✕
+  </span>
+</div>
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  "
+>
+  <div
+    style="
+      color: white;
+      font-size: 16px;
+      width: 197px;
+      text-align: center;
+    "
+  >
+    Please sign in with RelayX to enable spending
+  </div>
+  <a
+    style="
+      color: white;
+      display: block;
+      box-sizing: content-box;
+      text-decoration: none;
+      background-color: rgb(38, 105, 255);
+      padding: 10px;
+      border-radius: 5px;
+      width: 130;
+      margin-top: 10;
+      text-align: center;
+    "
+    rel="noopener noreferrer"
+    href="#"
+  >
+    Sign in
+  </a>
+</div>
+<div style="margin: 0 auto; width: 200px"></div>
+</div>
+`
+
+function showSignupPopup(redirectUrl: string) {
+    const popup = document.createElement('div')
+    popup.setAttribute('style', `
+   display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color = rgb(0, 0, 0, 0.2);
+  z-index = 99999;
+    `)
+    popup.innerHTML = POPUP;
+    const a = popup.querySelector('a')!
+    a.addEventListener('click', () => {
+        window.location = `https://relayx.com/wallet/auth#${redirectUrl}`
+    })
+    const close = popup.querySelector('.relay-one-close')!
+    close.addEventListener('click', () => {
+        document.body.removeChild(popup)
+    })
+
+    document.body.appendChild(popup)
+}
diff --git a/src/manifest.json b/src/manifest.json
@@ -25,8 +25,7 @@
   ],
   "web_accessible_resources": [
     "inject.ts",
-    "background/popup.html",
-    "background/popup_.ts"
+    "background/popup.html"
   ],
   "permissions": [
     "activeTab",

diff --git a/yarn.lock b/yarn.lock
@@ -472,6 +472,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/optimizer-data-url@npm:2.8.3":
+  version: 2.8.3
+  resolution: "@parcel/optimizer-data-url@npm:2.8.3"
+  dependencies:
+    "@parcel/plugin": 2.8.3
+    "@parcel/utils": 2.8.3
+    isbinaryfile: ^4.0.2
+    mime: ^2.4.4
+  checksum: 5df8d888269f7f3dfaa7bd3fb4f11d2d02ab8665404c50e99534231664fb4fd0b5be3f80cab513ef217e29cda9f91d77f5c649cfe6d227c34d48d422df52901f
+  languageName: node
+  linkType: hard
+
 "@parcel/optimizer-htmlnano@npm:2.8.3":
   version: 2.8.3
   resolution: "@parcel/optimizer-htmlnano@npm:2.8.3"
@@ -781,6 +793,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/transformer-inline-string@npm:2.8.3":
+  version: 2.8.3
+  resolution: "@parcel/transformer-inline-string@npm:2.8.3"
+  dependencies:
+    "@parcel/plugin": 2.8.3
+  checksum: 23fa279e1fb0acb0439bfa03d908362796f2c81e911c52f38b8818f4240f4c35b4c236e4e46550def9140c4269456bba104f63ed8f1b713d08ef0276f2758e6b
+  languageName: node
+  linkType: hard
+
 "@parcel/transformer-js@npm:2.8.3":
   version: 2.8.3
   resolution: "@parcel/transformer-js@npm:2.8.3"
@@ -1940,6 +1961,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isbinaryfile@npm:^4.0.2":
+  version: 4.0.10
+  resolution: "isbinaryfile@npm:4.0.10"
+  checksum: a6b28db7e23ac7a77d3707567cac81356ea18bd602a4f21f424f862a31d0e7ab4f250759c98a559ece35ffe4d99f0d339f1ab884ffa9795172f632ab8f88e686
+  languageName: node
+  linkType: hard
+
 "isexe@npm:^2.0.0":
   version: 2.0.0
   resolution: "isexe@npm:2.0.0"
@@ -2164,6 +2192,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime@npm:^2.4.4":
+  version: 2.6.0
+  resolution: "mime@npm:2.6.0"
+  bin:
+    mime: cli.js
+  checksum: 1497ba7b9f6960694268a557eae24b743fd2923da46ec392b042469f4b901721ba0adcf8b0d3c2677839d0e243b209d76e5edcbd09cfdeffa2dfb6bb4df4b862
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^3.1.1":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
@@ -2636,6 +2673,8 @@ __metadata:
   resolution: "relayone-extension@workspace:."
   dependencies:
     "@parcel/config-webextension": ^2.8.3
+    "@parcel/optimizer-data-url": 2.8.3
+    "@parcel/transformer-inline-string": 2.8.3
     "@relayx/crypto": ^6.1.5
     "@relayx/frame-messaging": ^1.1.1
     "@relayx/wallet": ^5.0.4