Merge pull request #301 from buberdds/mz/webusb

Avoid web usb permission issue in the latest Chrome
oasisprotocol · Mar 17, 2023 · 3e252a2 · 3e252a2
2 parents 91feea8 + b5098b1
commit 3e252a2
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 21 deletions.
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -124,13 +124,10 @@
     "step1":"Step 1",
     "step2":"Step 2",
     "step3":"Step 3",
-    "step4":"Step 4",
     "pleaseConnectLedger":"Connect your Ledger to the computer",
     "pleaseCloseLedgerLive": "Close Ledger Live app on the computer",
     "pleaseOpenInLedger":"Open the Oasis app on your Ledger device",
-    "pleaseConfirmPendingReview": "Press both buttons on Ledger device to confirm `Pending Ledger review`",
     "back2extension": "Please continue the operation in the wallet app.",
-    "dontCloseWindow": "And <bold>do not close</bold> this window.",
     "ledgerConnect":"Connect Ledger" ,
     "inputFeeError":"Please enter a valid fee",
     "inputNonceError":"Please enter a valid nonce",

diff --git a/src/i18n/zh_CN.json b/src/i18n/zh_CN.json
@@ -119,11 +119,9 @@
   "step1": "第一步",
   "step2": "第二步",
   "step3": "第三步",
-  "step4": "第四步",
   "pleaseConnectLedger":"将Ledger连接到电脑",
   "pleaseOpenInLedger":"在Ledger硬件中打开Oasis的App",
   "back2extension": "请返回钱包应用中继续操作。",
-  "dontCloseWindow": "在此之前<bold>请勿关闭</bold>此窗口。",
   "confirmInfoLedger":"请在Ledger钱包中进行确认",
   "ledgerConnect":"连接 Ledger",
   "inputFeeError":"请输入有效的矿工费",

diff --git a/src/popup/App.scss b/src/popup/App.scss
@@ -15,6 +15,7 @@
   flex-direction: column;
   width: $app-width;
   height:$app-height;
+  margin: 0 auto;
 }
 body {
   margin: 0;

diff --git a/src/popup/pages/AccountManage/index.js b/src/popup/pages/AccountManage/index.js
@@ -15,6 +15,7 @@ import CustomView from "../../component/CustomView";
 import Toast from "../../component/Toast";
 import AccountItem from "./AccountItem";
 import "./index.scss";
+import { checkLedgerConnect } from "../../../utils/ledger";
 
 class AccountManagePage extends React.Component {
   constructor(props) {
@@ -74,15 +75,16 @@ class AccountManagePage extends React.Component {
       pathname: "/import_page",
     });
   }
-  goAddLedger = () => {
+  goAddLedger = async () => {
     const isLedgerCapable = (!window || window && !window.USB)
     if (isLedgerCapable) {
       Toast.info(getLanguage("ledgerNotSupport"))
       return
     }
-    this.props.updateAccountType(ACCOUNT_NAME_FROM_TYPE.LEDGER)
+    const ledgerConnection = await checkLedgerConnect();
+    this.props.updateAccountType(ACCOUNT_NAME_FROM_TYPE.LEDGER);
     this.props.history.push({
-      pathname: "/account_name",
+      pathname: ledgerConnection ? "/account_name" : "/ledger_import",
     });
   }
   onClickAccount = (item) => {

diff --git a/src/popup/pages/LedgerConnect/index.js b/src/popup/pages/LedgerConnect/index.js
@@ -127,12 +127,6 @@ class LedgerConnect extends React.Component {
         bool: this.state.opened,
         img: ledger_open_little
       },
-      {
-        title: getLanguage("step4"),
-        content: getLanguage('pleaseConfirmPendingReview'),
-        bool: this.state.opened,
-        img: ledger_confirm_little
-      }
     ]
     return (
       <>
@@ -166,7 +160,7 @@ class LedgerConnect extends React.Component {
         <div>
           {
             this.state.connectCompleted ?
-              <LedgerConnected tips={['back2extension', 'dontCloseWindow']} /> :
+              <LedgerConnected tips={['back2extension']} /> :
               this.renderSteps()
           }
         </div>

diff --git a/src/popup/pages/LedgerConnect/index.scss b/src/popup/pages/LedgerConnect/index.scss
@@ -1,6 +1,5 @@
 @import "../../common.scss";
 .ledger-container {
-    background: #f3f6ff;
     width: 100%;
     height: 100%;
     display: flex;

diff --git a/src/utils/ledger.js b/src/utils/ledger.js
@@ -6,8 +6,8 @@ import { LEDGER_CONNECTED_SUCCESSFULLY } from "../constant/types";
 import { getLanguage } from "../i18n";
 import Loading from "../popup/component/Loading";
 import Toast from "../popup/component/Toast";
-import { closePopupWindow, openPopupWindow } from "./popup";
 import { publicKeyToAddress, uint2hex } from "./utils";
+import { openTab } from './commonMsg';
 
 function initLedgerWindowListener() {
   return new Promise((resolve) => {
@@ -25,7 +25,10 @@ function initLedgerWindowListener() {
   })
 }
 async function openLedgerWindow() {
-  openPopupWindow('./popup.html#/ledger_connect', 'ledger')
+  // Using tabs because Chrome no longer shows permissions dialog in popups
+  // Mentioned in https://bugs.chromium.org/p/chromium/issues/detail?id=1415183#c14
+  // Maybe related to https://bugs.chromium.org/p/chromium/issues/detail?id=1360960
+  openTab('./popup.html#/ledger_connect')
   await initLedgerWindowListener()
   Toast.info(getLanguage('ledgerConnectSuccess'))
   return { connected: true }
@@ -77,9 +80,7 @@ export async function getApp() {
     await openLedgerWindow()
     return { manualConnected: true, app: null }
   }
-  if (app) {
-    closePopupWindow('ledger')
-  }
+
   return { app }
 }