CR fixes

oasisprotocol · Nov 8, 2022 · 4e3c61f · 4e3c61f
1 parent bf2f1c6
commit 4e3c61f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/src/app/pages/ConnectDevicePage/index.tsx b/src/app/pages/ConnectDevicePage/index.tsx
@@ -4,6 +4,9 @@ import { useDispatch } from 'react-redux'
 import { Box, Button, Spinner, Text } from 'grommet'
 import { StatusCritical, StatusGood } from 'grommet-icons'
 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 logotype from '../../../../public/logo192.png'
@@ -12,11 +15,18 @@ type ConnectionStatus = 'connected' | 'disconnected' | 'connecting' | 'error'
 type ConnectionStatusIconPros = {
   success?: boolean
   label: string
+  withMargin?: boolean
 }
 
-function ConnectionStatusIcon({ success = true, label }: ConnectionStatusIconPros) {
+function ConnectionStatusIcon({ success = true, label, withMargin = false }: ConnectionStatusIconPros) {
   return (
-    <Box align="center" direction="row" gap="small" justify="center">
+    <Box
+      align="center"
+      direction="row"
+      gap="small"
+      justify="center"
+      margin={{ bottom: withMargin ? 'large' : 'none' }}
+    >
       {success ? (
         <StatusGood color="successful-label" size="30px" />
       ) : (
@@ -38,15 +48,11 @@ export function ConnectDevicePage() {
     try {
       const device = await requestDevice()
       if (device) {
-        setConnection(device ? 'connected' : 'disconnected')
+        setConnection('connected')
         dispatch(importAccountsActions.enumerateAccountsFromLedger())
       }
-    } catch (error: any) {
-      if (error.message.match(/No device selected/)) {
-        setConnection('disconnected')
-      } else {
-        setConnection('error')
-      }
+    } catch {
+      setConnection('error')
     }
   }
 
@@ -101,7 +107,16 @@ export function ConnectDevicePage() {
             <ConnectionStatusIcon label={t('ledger.extension.succeed', 'Device connected')} />
           )}
           {connection === 'error' && (
-            <ConnectionStatusIcon success={false} label={t('ledger.extension.failed', 'Connection failed')} />
+            <Box margin={{ bottom: 'medium' }}>
+              <ConnectionStatusIcon
+                success={false}
+                label={t('ledger.extension.failed', 'Connection failed')}
+                withMargin
+              />
+              <AlertBox color="status-error">
+                <ErrorFormatter code={WalletErrors.LedgerNoDeviceSelected} />
+              </AlertBox>
+            </Box>
           )}
           {connection !== 'connected' && (
             <Box justify="center">

diff --git a/src/app/pages/OpenWalletPage/__tests__/index.test.tsx b/src/app/pages/OpenWalletPage/__tests__/index.test.tsx
@@ -34,6 +34,7 @@ describe('<SelectOpenMethod />', () => {
     const { container } = renderComponent()
 
     expect(container).toMatchSnapshot()
+    expect(screen.getByText('errors.usbTransportNotSupported')).toBeInTheDocument()
   })
 
   it('should render component with an access button', () => {