Redirect user to Ledger account modal in extension

src/app/pages/OpenWalletPage/__tests__/index.test.tsx

@@ -1,12 +1,21 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { when } from 'jest-when'
+import { selectShowAccountsSelectionModal } from 'app/state/importaccounts/selectors'
 import { SelectOpenMethod } from '..'
 
 jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }))
 
+const mockNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}))
+
 const renderComponent = (webExtensionLedgerAccess?: () => void) =>
   render(
     <MemoryRouter>
@@ -27,4 +36,14 @@ describe('<SelectOpenMethod />', () => {
     expect(screen.queryByText('openWallet.method.ledger')).not.toBeInTheDocument()
     expect(screen.getByText('ledger.extension.grantAccess')).toBeInTheDocument()
   })
+
+  it('should redirect user to ledger page', () => {
+    when(useSelector as any)
+      .calledWith(selectShowAccountsSelectionModal)
+      .mockReturnValue(true)
+
+    renderComponent(() => {})
+
+    expect(mockNavigate).toHaveBeenCalledWith('/open-wallet/ledger')
+  })
 })

src/app/pages/OpenWalletPage/index.tsx

@@ -4,17 +4,28 @@
  *
  */
 import { Anchor, Box, Button } from 'grommet'
-import * as React from 'react'
+import React, { useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import { ButtonLink } from 'app/components/ButtonLink'
 import { Header } from 'app/components/Header'
+import { selectShowAccountsSelectionModal } from 'app/state/importaccounts/selectors'
 
 type SelectOpenMethodProps = {
   webExtensionLedgerAccess?: () => void
 }
 
 export function SelectOpenMethod({ webExtensionLedgerAccess }: SelectOpenMethodProps) {
   const { t } = useTranslation()
+  const navigate = useNavigate()
+  const showAccountsSelectionModal = useSelector(selectShowAccountsSelectionModal)
+
+  useEffect(() => {
+    if (webExtensionLedgerAccess && showAccountsSelectionModal) {
+      navigate('/open-wallet/ledger')
+    }
+  }, [navigate, showAccountsSelectionModal, webExtensionLedgerAccess])
 
   return (
     <Box