From 142edf4f3493ce82f36b1eba449506bbe425aa5e Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Tue, 12 Nov 2024 17:27:40 +0700
Subject: [PATCH 1/5] Rename ledger popup prop

---
 .../pages/OpenWalletPage/Features/FromLedger/index.tsx    | 8 ++++----
 src/app/pages/OpenWalletPage/FromLedgerWebExtension.tsx   | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
index 3faa0a1a03..19d32e75b4 100644
--- a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
+++ b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
@@ -9,10 +9,10 @@ import { useTranslation } from 'react-i18next'
 import { Capacitor } from '@capacitor/core'
 
 type SelectOpenMethodProps = {
-  webExtensionUSBLedgerAccess?: () => void
+  openLedgerAccessPopup?: () => void
 }
 
-export function FromLedger({ webExtensionUSBLedgerAccess }: SelectOpenMethodProps) {
+export function FromLedger({ openLedgerAccessPopup }: SelectOpenMethodProps) {
   const { t } = useTranslation()
   const [supportsUsbLedger, setSupportsUsbLedger] = React.useState<boolean | undefined>(true)
   const [supportsBleLedger, setSupportsBleLedger] = React.useState<boolean | undefined>(true)
@@ -46,11 +46,11 @@ export function FromLedger({ webExtensionUSBLedgerAccess }: SelectOpenMethodProp
       <Box direction="row-responsive" justify="start" margin={{ top: 'medium' }} gap="medium">
         <div>
           <div>
-            {webExtensionUSBLedgerAccess ? (
+            {openLedgerAccessPopup ? (
               <Button
                 disabled={!supportsUsbLedger}
                 style={{ width: 'fit-content' }}
-                onClick={webExtensionUSBLedgerAccess}
+                onClick={openLedgerAccessPopup}
                 label={t('ledger.extension.grantAccess', 'Grant access to your USB Ledger')}
                 primary
               />
diff --git a/src/app/pages/OpenWalletPage/FromLedgerWebExtension.tsx b/src/app/pages/OpenWalletPage/FromLedgerWebExtension.tsx
index 225d6ba0e2..e463496323 100644
--- a/src/app/pages/OpenWalletPage/FromLedgerWebExtension.tsx
+++ b/src/app/pages/OpenWalletPage/FromLedgerWebExtension.tsx
@@ -9,7 +9,7 @@ export function FromLedgerWebExtension() {
 
   return (
     <FromLedger
-      webExtensionUSBLedgerAccess={() => {
+      openLedgerAccessPopup={() => {
         navigate('/open-wallet/ledger/usb')
         openLedgerAccessPopup(href)
       }}

From 4df43783aab5aadd95f6f9c43410d38e4192cc14 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Tue, 12 Nov 2024 17:28:30 +0700
Subject: [PATCH 2/5] Refactor how extension requests ledger access (don't rely
 on state sync)

Before:
- redux was shared between persistent popup (can request USB permissions) and
  default popup
- persistent popup listed ledger accounts into store
- when reopening default popup listed accounts were kept
- when reopening default popup after clearing listed accounts: all steps repeat

After:
- persistent popup requests permissions
- this gives permissions to default popup too
- when reopening default popup: use new permissions to list accounts from ledger
---
 .changelog/2118.internal.md                   |  1 +
 .../ExtLedgerAccessPopup.tsx                  |  7 +-----
 .../__tests__/index.test.tsx                  | 14 -----------
 .../Features/FromLedger/index.tsx             | 23 ++++++++++++++++++-
 .../OpenWalletPage/FromLedgerWebExtension.tsx |  4 +---
 5 files changed, 25 insertions(+), 24 deletions(-)
 create mode 100644 .changelog/2118.internal.md

diff --git a/.changelog/2118.internal.md b/.changelog/2118.internal.md
new file mode 100644
index 0000000000..65c2a90cdc
--- /dev/null
+++ b/.changelog/2118.internal.md
@@ -0,0 +1 @@
+Refactor how extension requests ledger access (don't rely on state sync)
diff --git a/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx b/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
index d4606e6143..e1fec2ccf8 100644
--- a/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
+++ b/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
@@ -1,6 +1,5 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useDispatch } from 'react-redux'
 import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
 import { Spinner } from 'grommet/es6/components/Spinner'
@@ -11,9 +10,7 @@ import { Header } from 'app/components/Header'
 import { ErrorFormatter } from 'app/components/ErrorFormatter'
 import { AlertBox } from 'app/components/AlertBox'
 import { WalletErrors } from 'types/errors'
-import { importAccountsActions } from 'app/state/importaccounts'
 import { requestDevice } from 'app/lib/ledger'
-import { WalletType } from '../../../src/app/state/wallet/types'
 import logotype from '../../../public/Icon Blue 192.png'
 
 type ConnectionStatus = 'connected' | 'disconnected' | 'connecting' | 'error'
@@ -46,7 +43,6 @@ function ConnectionStatusIcon({ success = true, label, withMargin = false }: Con
 
 export function ExtLedgerAccessPopup() {
   const { t } = useTranslation()
-  const dispatch = useDispatch()
   const [connection, setConnection] = useState<ConnectionStatus>('disconnected')
   const handleConnect = async () => {
     setConnection('connecting')
@@ -54,7 +50,6 @@ export function ExtLedgerAccessPopup() {
       const device = await requestDevice()
       if (device) {
         setConnection('connected')
-        dispatch(importAccountsActions.enumerateAccountsFromLedger(WalletType.UsbLedger))
       }
     } catch {
       setConnection('error')
diff --git a/extension/src/ExtLedgerAccessPopup/__tests__/index.test.tsx b/extension/src/ExtLedgerAccessPopup/__tests__/index.test.tsx
index 8bfc8908d9..4bb04a3341 100644
--- a/extension/src/ExtLedgerAccessPopup/__tests__/index.test.tsx
+++ b/extension/src/ExtLedgerAccessPopup/__tests__/index.test.tsx
@@ -2,18 +2,10 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { requestDevice } from 'app/lib/ledger'
-import { importAccountsActions } from 'app/state/importaccounts'
 import { ExtLedgerAccessPopup } from '../ExtLedgerAccessPopup'
-import { WalletType } from '../../../../src/app/state/wallet/types'
 
 jest.mock('app/lib/ledger')
 
-const mockDispatch = jest.fn()
-jest.mock('react-redux', () => ({
-  useSelector: jest.fn(),
-  useDispatch: () => mockDispatch,
-}))
-
 describe('<ExtLedgerAccessPopup />', () => {
   it('should render component', () => {
     const { container } = render(<ExtLedgerAccessPopup />)
@@ -30,11 +22,6 @@ describe('<ExtLedgerAccessPopup />', () => {
 
     expect(await screen.findByText('ledger.extension.succeed')).toBeInTheDocument()
     expect(screen.getByLabelText('Status is okay')).toBeInTheDocument()
-    expect(screen.queryByRole('button')).not.toBeInTheDocument()
-    expect(mockDispatch).toHaveBeenCalledWith({
-      payload: WalletType.UsbLedger,
-      type: importAccountsActions.enumerateAccountsFromLedger.type,
-    })
   })
 
   it('should render error state', async () => {
@@ -46,6 +33,5 @@ describe('<ExtLedgerAccessPopup />', () => {
 
     expect(await screen.findByText('ledger.extension.failed')).toBeInTheDocument()
     expect(screen.getByLabelText('Status is critical')).toBeInTheDocument()
-    expect(mockDispatch).not.toHaveBeenCalled()
   })
 })
diff --git a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
index 19d32e75b4..f0317248b4 100644
--- a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
+++ b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
@@ -7,6 +7,7 @@ import { Text } from 'grommet/es6/components/Text'
 import { canAccessBle, canAccessNavigatorUsb } from '../../../../lib/ledger'
 import { useTranslation } from 'react-i18next'
 import { Capacitor } from '@capacitor/core'
+import TransportWebUSB from '@ledgerhq/hw-transport-webusb'
 
 type SelectOpenMethodProps = {
   openLedgerAccessPopup?: () => void
@@ -15,6 +16,7 @@ type SelectOpenMethodProps = {
 export function FromLedger({ openLedgerAccessPopup }: SelectOpenMethodProps) {
   const { t } = useTranslation()
   const [supportsUsbLedger, setSupportsUsbLedger] = React.useState<boolean | undefined>(true)
+  const [hasUsbLedgerAccess, setHasUsbLedgerAccess] = React.useState<boolean | undefined>(undefined)
   const [supportsBleLedger, setSupportsBleLedger] = React.useState<boolean | undefined>(true)
 
   useEffect(() => {
@@ -31,6 +33,25 @@ export function FromLedger({ openLedgerAccessPopup }: SelectOpenMethodProps) {
     getLedgerSupport()
   }, [])
 
+  useEffect(() => {
+    if (openLedgerAccessPopup) {
+      // In default ext popup this gets auto-accepted / auto-rejected. In a tab or persistent popup it would
+      // prompt user to select a ledger device. TransportWebUSB.create seems to match requestDevice called in
+      // openLedgerAccessPopup.
+      // If TransportWebUSB.create() is rejected then call openLedgerAccessPopup and requestDevice. When user
+      // confirms the prompt tell them to come back here. TransportWebUSB.create() will resolve.
+      TransportWebUSB.create()
+        .then(() => setHasUsbLedgerAccess(true))
+        .catch(() => setHasUsbLedgerAccess(false))
+    } else {
+      // Assume true in web app. enumerateAccountsFromLedger will call TransportWebUSB.create in next steps
+      // and will prompt user to select a ledger device.
+      setHasUsbLedgerAccess(true)
+    }
+  }, [openLedgerAccessPopup])
+
+  const shouldOpenUsbLedgerAccessPopup = openLedgerAccessPopup && !hasUsbLedgerAccess
+
   return (
     <Box
       round="5px"
@@ -46,7 +67,7 @@ export function FromLedger({ openLedgerAccessPopup }: SelectOpenMethodProps) {
       <Box direction="row-responsive" justify="start" margin={{ top: 'medium' }} gap="medium">
         <div>
           <div>
-            {openLedgerAccessPopup ? (
+            {shouldOpenUsbLedgerAccessPopup ? (
               <Button
                 disabled={!supportsUsbLedger}
                 style={{ width: 'fit-content' }}
diff --git a/src/app/pages/OpenWalletPage/FromLedgerWebExtension.tsx b/src/app/pages/OpenWalletPage/FromLedgerWebExtension.tsx
index e463496323..6bc79136e8 100644
--- a/src/app/pages/OpenWalletPage/FromLedgerWebExtension.tsx
+++ b/src/app/pages/OpenWalletPage/FromLedgerWebExtension.tsx
@@ -1,16 +1,14 @@
 import React from 'react'
-import { useHref, useNavigate } from 'react-router-dom'
+import { useHref } from 'react-router-dom'
 import { openLedgerAccessPopup } from 'utils/webextension'
 import { FromLedger } from './Features/FromLedger'
 
 export function FromLedgerWebExtension() {
   const href = useHref('/open-wallet/connect-device')
-  const navigate = useNavigate()
 
   return (
     <FromLedger
       openLedgerAccessPopup={() => {
-        navigate('/open-wallet/ledger/usb')
         openLedgerAccessPopup(href)
       }}
     />

From 97c7d7e483b02ca3373d031bcc8585147e05df32 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Tue, 21 Jan 2025 22:20:32 +0700
Subject: [PATCH 3/5] Remove unneeded instructions in extension ledger access
 flow

Ledger doesn't even need to be unlocked to grant USB access.
---
 extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx b/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
index e1fec2ccf8..96794a689a 100644
--- a/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
+++ b/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
@@ -85,8 +85,6 @@ export function ExtLedgerAccessPopup() {
                 'Connect your USB Ledger device to the computer',
               )}
             </li>
-            <li>{t('ledger.instructionSteps.closeLedgerLive', 'Close Ledger Live app on the computer')}</li>
-            <li>{t('ledger.instructionSteps.openOasisApp', 'Open the Oasis App on your Ledger device')}</li>
             <li>
               {t(
                 'ledger.extension.instructionStep',

From 9fdcec8efdc84900b601b253ddedd6ef1f3d2c00 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Wed, 22 Jan 2025 20:06:41 +0700
Subject: [PATCH 4/5] Automatically close ledger access popups

This makes it clearer what user should interact with.
---
 .../ExtLedgerAccessPopup.tsx                  | 32 +++++++++----------
 .../__snapshots__/index.test.tsx.snap         | 29 ++++++-----------
 .../Features/FromLedger/index.tsx             |  5 ++-
 src/locales/en/translation.json               |  2 +-
 4 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx b/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
index 96794a689a..4bc9c466d9 100644
--- a/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
+++ b/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
@@ -12,6 +12,7 @@ import { AlertBox } from 'app/components/AlertBox'
 import { WalletErrors } from 'types/errors'
 import { requestDevice } from 'app/lib/ledger'
 import logotype from '../../../public/Icon Blue 192.png'
+import { CountdownButton } from 'app/components/CountdownButton'
 
 type ConnectionStatus = 'connected' | 'disconnected' | 'connecting' | 'error'
 type ConnectionStatusIconPros = {
@@ -50,6 +51,7 @@ export function ExtLedgerAccessPopup() {
       const device = await requestDevice()
       if (device) {
         setConnection('connected')
+        setTimeout(() => window.close(), 5_000)
       }
     } catch {
       setConnection('error')
@@ -60,8 +62,8 @@ export function ExtLedgerAccessPopup() {
     <Box
       style={{ minHeight: '100dvh' }}
       justify="center"
-      align="center"
-      pad="medium"
+      align="stretch"
+      pad="xlarge"
       background="background-back"
     >
       <Box
@@ -78,20 +80,9 @@ export function ExtLedgerAccessPopup() {
           {t('ledger.extension.grantAccess', 'Grant access to your Ledger')}
         </Header>
         <Box gap="medium">
-          <ol>
-            <li>
-              {t(
-                'ledger.instructionSteps.connectUsbLedger',
-                'Connect your USB Ledger device to the computer',
-              )}
-            </li>
-            <li>
-              {t(
-                'ledger.extension.instructionStep',
-                'Once device is connected continue the operation in the wallet app',
-              )}
-            </li>
-          </ol>
+          <p>
+            {t('ledger.instructionSteps.connectUsbLedger', 'Connect your USB Ledger device to the computer')}
+          </p>
 
           {connection === 'connecting' && (
             <Box
@@ -107,7 +98,14 @@ export function ExtLedgerAccessPopup() {
             </Box>
           )}
           {connection === 'connected' && (
-            <ConnectionStatusIcon label={t('ledger.extension.succeed', 'Device connected')} />
+            <Box>
+              <ConnectionStatusIcon label={t('ledger.extension.succeed', 'Device connected')} withMargin />
+
+              <CountdownButton
+                onClick={() => window.close()}
+                label={t('ledger.extension.closingPopup', 'Closing... Please re-open the wallet app')}
+              />
+            </Box>
           )}
           {connection === 'error' && (
             <Box margin={{ bottom: 'medium' }}>
diff --git a/extension/src/ExtLedgerAccessPopup/__tests__/__snapshots__/index.test.tsx.snap b/extension/src/ExtLedgerAccessPopup/__tests__/__snapshots__/index.test.tsx.snap
index 08154447cf..c6ffb4596b 100644
--- a/extension/src/ExtLedgerAccessPopup/__tests__/__snapshots__/index.test.tsx.snap
+++ b/extension/src/ExtLedgerAccessPopup/__tests__/__snapshots__/index.test.tsx.snap
@@ -8,10 +8,10 @@ exports[`<ExtLedgerAccessPopup /> should render component 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   background-color: #EDEDED;
   color: #444444;
   min-width: 0;
@@ -23,7 +23,7 @@ exports[`<ExtLedgerAccessPopup /> should render component 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding: 24px;
+  padding: 96px;
 }
 
 .c1 {
@@ -190,7 +190,7 @@ exports[`<ExtLedgerAccessPopup /> should render component 1`] = `
 
 @media only screen and (max-width:768px) {
   .c0 {
-    padding: 12px;
+    padding: 48px;
   }
 }
 
@@ -253,20 +253,9 @@ exports[`<ExtLedgerAccessPopup /> should render component 1`] = `
       <div
         class="c4"
       >
-        <ol>
-          <li>
-            ledger.instructionSteps.connectUsbLedger
-          </li>
-          <li>
-            ledger.instructionSteps.closeLedgerLive
-          </li>
-          <li>
-            ledger.instructionSteps.openOasisApp
-          </li>
-          <li>
-            ledger.extension.instructionStep
-          </li>
-        </ol>
+        <p>
+          ledger.instructionSteps.connectUsbLedger
+        </p>
         <div
           class="c5"
         />
diff --git a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
index f0317248b4..135de9caca 100644
--- a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
+++ b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
@@ -71,7 +71,10 @@ export function FromLedger({ openLedgerAccessPopup }: SelectOpenMethodProps) {
               <Button
                 disabled={!supportsUsbLedger}
                 style={{ width: 'fit-content' }}
-                onClick={openLedgerAccessPopup}
+                onClick={() => {
+                  openLedgerAccessPopup()
+                  window.close()
+                }}
                 label={t('ledger.extension.grantAccess', 'Grant access to your USB Ledger')}
                 primary
               />
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 8d1ed578cf..02abed3925 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -233,10 +233,10 @@
   "language": "Language",
   "ledger": {
     "extension": {
+      "closingPopup": "Closing... Please re-open the wallet app",
       "connect": "Connect Ledger device",
       "failed": "Connection failed",
       "grantAccess": "Grant access to your Ledger",
-      "instructionStep": "Once device is connected continue the operation in the wallet app",
       "succeed": "Device connected"
     },
     "instructionSteps": {

From 7ed4a6e2982f444f60607b403d6c445f5737b545 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Fri, 24 Jan 2025 00:14:02 +0700
Subject: [PATCH 5/5] After granting usb access to ext, navigate next popup to
 ledger import

Improves UX after ConnectDevice popup closes and user has to re-open the normal
popup to continue the flow.
---
 .../ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx    |  2 ++
 src/app/useRouteRedirects.tsx                        | 12 +++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx b/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
index 4bc9c466d9..602c8eb251 100644
--- a/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
+++ b/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx
@@ -51,6 +51,8 @@ export function ExtLedgerAccessPopup() {
       const device = await requestDevice()
       if (device) {
         setConnection('connected')
+        // Used to redirect after reopening wallet
+        window.localStorage.setItem('oasis_wallet_granted_usb_ledger_timestamp', Date.now().toString())
         setTimeout(() => window.close(), 5_000)
       }
     } catch {
diff --git a/src/app/useRouteRedirects.tsx b/src/app/useRouteRedirects.tsx
index 1a1d7e1560..30752d69df 100644
--- a/src/app/useRouteRedirects.tsx
+++ b/src/app/useRouteRedirects.tsx
@@ -9,7 +9,17 @@ export const useRouteRedirects = () => {
   const navigate = useNavigate()
 
   useEffect(() => {
-    if (address) {
+    const hasRecentlyGrantedUsbAccess =
+      Date.now() - parseInt(window.localStorage.getItem('oasis_wallet_granted_usb_ledger_timestamp') ?? '0') <
+      5 * 60 * 1000
+
+    if (hasRecentlyGrantedUsbAccess) {
+      // When we implement auto-locking, this won't correctly redirect if wallet
+      // gets locked within 5min (useEffect called with address=undefined before unlocking).
+      navigate(`/open-wallet/ledger`)
+      // Delay is needed as workaround for React.StrictMode.
+      setTimeout(() => window.localStorage.removeItem('oasis_wallet_granted_usb_ledger_timestamp'), 1000)
+    } else if (address) {
       navigate(`/account/${address}`)
     }
   }, [address, navigate])