fix: allow reattaching forgotten ledger device (#16)

Co-authored-by: ryanml <[email protected]>

Author: meeh0w

.github/workflows/e2e_testing.yaml

@@ -9,7 +9,7 @@ on:
     types: [opened, reopened, 'synchronize', 'ready_for_review']
 jobs:
   build:
-    runs-on: ubuntu-latest-16-cores
+    runs-on: ubuntu-latest-16-cores-core-extension
     if: ${{ !github.event.pull_request.draft }}
     environment: alpha
     steps:

src/localization/locales/en/translation.json

@@ -183,7 +183,6 @@
   "Connect the Ledger device to your computer.": "Connect the Ledger device to your computer.",
   "Connect your Ledger": "Connect your Ledger",
   "Connect your Ledger device and open the <bold>Avalanche App</bold> to approve this transaction": "Connect your Ledger device and open the <bold>Avalanche App</bold> to approve this transaction",
-  "Connect your Ledger device and open the Avalanche App to approve this transaction": "Connect your Ledger device and open the Avalanche App to approve this transaction",
   "Connect your Wallet": "Connect your Wallet",
   "Connect your wallet via the <br /> \"Connect Wallet\" button on the site": "Connect your wallet via the <br /> \"Connect Wallet\" button on the site",
   "Connected": "Connected",
@@ -212,6 +211,7 @@
   "Core estimates the maximum gas (maxFeePerGas) a transaction could consume based on network conditions. This transaction will likely consume less gas than estimated.": "Core estimates the maximum gas (maxFeePerGas) a transaction could consume based on network conditions. This transaction will likely consume less gas than estimated.",
   "Core functionality may be unstable with custom RPC URLs.": "Core functionality may be unstable with custom RPC URLs.",
   "Core is committed to protecting your privacy. We will <b>never</b> sell or share your data. If you wish, you can disable this at any time in the settings menu.": "Core is committed to protecting your privacy. We will <b>never</b> sell or share your data. If you wish, you can disable this at any time in the settings menu.",
+  "Core is no longer connected to your Ledger device. Reconnect your Ledger to continue.": "Core is no longer connected to your Ledger device. Reconnect your Ledger to continue.",
   "Core supports Bitcoin via Fireblocks with a few extra steps. If you choose to skip, you will not be able to bridge or use the Bitcoin Network.": "Core supports Bitcoin via Fireblocks with a few extra steps. If you choose to skip, you will not be able to bridge or use the Bitcoin Network.",
   "Core will <b>never</b> sell or share data.": "Core will <b>never</b> sell or share data.",
   "Core would like to gather data using local storage and similar technologies to help us understand how our users interact with Core.": "Core would like to gather data using local storage and similar technologies to help us understand how our users interact with Core.",
@@ -646,6 +646,7 @@
   "Recents": "Recents",
   "Recipient": "Recipient",
   "Recipients": "Recipients",
+  "Reconnect": "Reconnect",
   "Recovery Methods": "Recovery Methods",
   "Recovery Phrase": "Recovery Phrase",
   "Recovery Phrase {{number}}": "Recovery Phrase {{number}}",
@@ -767,6 +768,7 @@
   "Subnet ID": "Subnet ID",
   "Success!": "Success!",
   "Successfully imported the keystore file.": "Successfully imported the keystore file.",
+  "Successfully reconnected!": "Successfully reconnected!",
   "Successfully swapped {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}": "Successfully swapped {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}",
   "Suggested slippage – your transaction will fail if the price changes unfavorably more than this percentage": "Suggested slippage – your transaction will fail if the price changes unfavorably more than this percentage",
   "Supplied": "Supplied",
@@ -882,6 +884,7 @@
   "Turkish": "Turkish",
   "URI": "URI",
   "Unable to connect. View the troubleshoot guide <linkText>here</linkText>": "Unable to connect. View the troubleshoot guide <linkText>here</linkText>",
+  "Unable to connect?": "Unable to connect?",
   "Unable to set TOTP configuration": "Unable to set TOTP configuration",
   "Unauthorized": "Unauthorized",
   "Unavailable": "Unavailable",

src/pages/Ledger/LedgerDisconnected.tsx

@@ -3,10 +3,21 @@ import {
   Box,
   Stack,
   CircularProgress,
+  Button,
 } from '@avalabs/core-k2-components';
-import { Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
+import { useCallback } from 'react';
+import { tabs } from 'webextension-polyfill';
 
 export const LedgerDisconnected = () => {
+  const { t } = useTranslation();
+  const openTroubleshootingPopup = useCallback(() => {
+    // Open in a full screen tab to avoid popup hell
+    tabs.create({
+      url: '/fullscreen.html#/ledger/troubleshooting',
+    });
+  }, []);
+
   return (
     <>
       <Typography
@@ -27,6 +38,14 @@ export const LedgerDisconnected = () => {
       <Stack sx={{ mt: '48px', mb: '16px', alignItems: 'center' }}>
         <CircularProgress size={48} />
       </Stack>
+      <Button
+        variant="text"
+        color="primary"
+        onClick={openTroubleshootingPopup}
+        sx={{ mt: 2 }}
+      >
+        {t('Unable to connect?')}
+      </Button>
     </>
   );
 };

src/pages/Ledger/LedgerTroubleshooting.tsx

@@ -0,0 +1,70 @@
+import { useTranslation } from 'react-i18next';
+import { Button, Stack, Typography } from '@avalabs/core-k2-components';
+
+import { Overlay } from '@src/components/common/Overlay';
+import { useLedgerContext } from '@src/contexts/LedgerProvider';
+import { useState } from 'react';
+
+export const LedgerTroubleshooting = () => {
+  const { t } = useTranslation();
+  const { popDeviceSelection } = useLedgerContext();
+
+  const [isConnected, setIsConnected] = useState(false);
+
+  return (
+    <Overlay isBackgroundFilled>
+      <Stack
+        sx={{
+          width: 375,
+          p: 3,
+          gap: 2,
+          alignSelf: 'center',
+          backgroundColor: 'grey.900',
+          borderRadius: 1,
+          textAlign: 'center',
+        }}
+      >
+        {isConnected && (
+          <>
+            <Typography variant="h5">
+              {t('Successfully reconnected!')}
+            </Typography>
+            <Button
+              color="primary"
+              size="large"
+              sx={{ mt: 3 }}
+              onClick={window.close}
+            >
+              {t('Close')}
+            </Button>
+          </>
+        )}
+        {!isConnected && (
+          <>
+            <Typography variant="h5">{t('Ledger Disconnected')}</Typography>
+            <Typography variant="body2">
+              {t(
+                'Core is no longer connected to your Ledger device. Reconnect your Ledger to continue.'
+              )}
+            </Typography>
+            <Button
+              color="primary"
+              size="large"
+              onClick={async () => {
+                try {
+                  await popDeviceSelection();
+                  setIsConnected(true);
+                } catch {
+                  setIsConnected(false);
+                }
+              }}
+              sx={{ mt: 3 }}
+            >
+              {t('Reconnect')}
+            </Button>
+          </>
+        )}
+      </Stack>
+    </Overlay>
+  );
+};

src/pages/SignTransaction/components/LedgerDisconnectDialog.tsx

@@ -193,8 +193,19 @@ const DefiProtocolDetails = lazy(() => {
   }));
 });
 
+const LedgerTroubleshootingPopup = lazy(() => {
+  return import('../pages/Ledger/LedgerTroubleshooting').then((m) => ({
+    default: m.LedgerTroubleshooting,
+  }));
+});
+
 export const AppRoutes = () => (
   <Switch>
+    <Route path="/ledger/troubleshooting">
+      <Suspense fallback={<CircularProgress />}>
+        <LedgerTroubleshootingPopup />
+      </Suspense>
+    </Route>
     <Route path="/token/add">
       <Suspense fallback={<CircularProgress />}>
         <AddToken />