feat(keystone-usb):CP-11865 keystone usb approval overlay (#485)

Author: frichards

apps/next/src/hooks/useIsUsingHardwareWallet.ts

@@ -48,12 +48,12 @@ const getSignerType = ({
   if (isUsingLedgerWallet) {
     return 'ledger';
   }
-  if (isUsingKeystoneWallet) {
-    return 'keystone-qr';
-  }
   if (isUsingKeystone3Wallet) {
     return 'keystone-usb';
   }
+  if (isUsingKeystoneWallet) {
+    return 'keystone-qr';
+  }
 
   throw new Error('Unknown signer type');
 };

apps/next/src/localization/locales/en/translation.json

@@ -170,6 +170,7 @@
   "Core functionality may be unstable with custom RPC URLs": "Core functionality may be unstable with custom RPC URLs",
   "Core has entered an unexpected state. Please restart the browser if the issue persists.": "Core has entered an unexpected state. Please restart the browser if the issue persists.",
   "Core is committed to protecting your privacy. We will never 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 never 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 Keystone device. Reconnect to continue.": "Core is no longer connected to your Keystone device. Reconnect to continue.",
   "Core.app": "Core.app",
   "Could not connect.": "Could not connect.",
   "Could not swap {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}": "Could not swap {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}",
@@ -341,9 +342,11 @@
   "Invalid transaction data": "Invalid transaction data",
   "Invalid transfer parameters": "Invalid transfer parameters",
   "Investment": "Investment",
+  "It seems that Core no longer has access to your Keystone device. Please click the button below to reconnect it.": "It seems that Core no longer has access to your Keystone device. Please click the button below to reconnect it.",
   "It seems that Core no longer has access to your Ledger device. Please click the button below to reconnect it.": "It seems that Core no longer has access to your Ledger device. Please click the button below to reconnect it.",
   "It will take 2 days to retrieve your recovery phrase. You will only have 48 hours to copy your recovery phrase once the 2 day waiting period is over": "It will take 2 days to retrieve your recovery phrase. You will only have 48 hours to copy your recovery phrase once the 2 day waiting period is over",
   "Japanese": "Japanese",
+  "Keystone disconnected": "Keystone disconnected",
   "Keystone request was cancelled.": "Keystone request was cancelled.",
   "Keystone support": "Keystone support",
   "Keystone {{number}}": "Keystone {{number}}",
@@ -423,6 +426,7 @@
   "Oops! \n Something went wrong": "Oops! \n Something went wrong",
   "Oops! It seems like you have no internet connection. Please try again later.": "Oops! It seems like you have no internet connection. Please try again later.",
   "Open any authenticator app and scan the QR code below or enter the code manually": "Open any authenticator app and scan the QR code below or enter the code manually",
+  "Open the Avalanche app on your Keystone device in order to continue with this transaction": "Open the Avalanche app on your Keystone device in order to continue with this transaction",
   "Open the Solana app on your Ledger device": "Open the Solana app on your Ledger device",
   "Open the {{appName}} app on your Ledger device in order to continue with this transaction": "Open the {{appName}} app on your Ledger device in order to continue with this transaction",
   "Options": "Options",
@@ -459,6 +463,7 @@
   "Please provide a valid X-Chain address as the recipient.": "Please provide a valid X-Chain address as the recipient.",
   "Please provide all the required information to send.": "Please provide all the required information to send.",
   "Please refer to Active Transfers list in your Fireblocks Console for a detailed explanation.": "Please refer to Active Transfers list in your Fireblocks Console for a detailed explanation.",
+  "Please review the transaction on your Keystone": "Please review the transaction on your Keystone",
   "Please review the transaction on your Ledger": "Please review the transaction on your Ledger",
   "Please switch to the {{appName}} app on your Ledger device to continue": "Please switch to the {{appName}} app on your Ledger device to continue",
   "Please try again": "Please try again",
@@ -495,6 +500,7 @@
   "Recents": "Recents",
   "Recipient": "Recipient",
   "Reconnect": "Reconnect",
+  "Reconnect your Keystone": "Reconnect your Keystone",
   "Reconnect your Ledger": "Reconnect your Ledger",
   "Reconnect your Ledger device to continue": "Reconnect your Ledger device to continue",
   "Recovery Phrase": "Recovery Phrase",

apps/next/src/pages/Approve/components/hardware/HardwareApprovalOverlay.tsx

@@ -41,6 +41,12 @@ export const HardwareApprovalOverlay = ({
       />
     );
   } else if (deviceType === 'keystone-usb') {
-    return <KeystoneUSBApprovalOverlay />;
+    return (
+      <KeystoneUSBApprovalOverlay
+        action={action}
+        reject={reject}
+        approve={approve}
+      />
+    );
   }
 };

apps/next/src/pages/Approve/components/hardware/ledger/components/Styled.tsx renamed to apps/next/src/pages/Approve/components/hardware/common/PendingCircles.tsx

@@ -1,12 +1,26 @@
-import { getHexAlpha, Box, styled, LedgerIcon } from '@avalabs/k2-alpine';
+import { Box, styled } from '@avalabs/k2-alpine';
+import { getHexAlpha } from '@avalabs/k2-alpine';
+import { FC, ComponentType } from 'react';
 
-export const PendingLedgerCircles = () => (
+export type IconProps = {
+  size?: string | number;
+};
+
+export type PendingCirclesProps = {
+  Icon: ComponentType<IconProps>;
+  size?: number;
+};
+
+export const PendingCircles: FC<PendingCirclesProps> = ({
+  Icon,
+  size = 24,
+}) => (
   <ConcentricCirclesBox>
     <Circle delay="6s" />
     <Circle delay="4s" />
     <Circle delay="2s" />
     <Circle delay="0s" />
-    <LedgerIcon size={24} />
+    <Icon size={size} />
   </ConcentricCirclesBox>
 );
 

apps/next/src/pages/Approve/components/hardware/keystone-usb/KeystoneUSBApprovalOverlay.tsx

@@ -1,5 +1,39 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
+import { DisplayData } from '@avalabs/vm-module-types';
+import { Action } from '@core/types';
+import { HardwareApprovalDrawer } from '../common/ApprovalDrawer';
+import { useKeystoneUsbApprovalState } from './useKeystoneUsbApprovalState';
+import { StateComponentMapper } from './types';
+import { useKeystoneUsbContext } from '@core/ui';
+import { Loading } from './components/Loading';
 
-export const KeystoneUSBApprovalOverlay: FC = () => {
-  return <div>KeystoneUSBApprovalOverlay</div>;
+type KeystoneUSBApprovalOverlayProps = {
+  action: Action<DisplayData>;
+  reject: () => void;
+  approve: () => Promise<unknown>;
+};
+
+export const KeystoneUSBApprovalOverlay: FC<
+  KeystoneUSBApprovalOverlayProps
+> = ({ action, reject, approve }) => {
+  const state = useKeystoneUsbApprovalState();
+  const { initKeystoneTransport } = useKeystoneUsbContext();
+
+  useEffect(() => {
+    // Initialize transport to check availability (required for state detection)
+    initKeystoneTransport();
+  }, [initKeystoneTransport]);
+
+  const Component = StateComponentMapper[state] || Loading;
+
+  return (
+    <HardwareApprovalDrawer reject={reject}>
+      <Component
+        state={state}
+        approve={approve}
+        reject={reject}
+        action={action}
+      />
+    </HardwareApprovalDrawer>
+  );
 };

apps/next/src/pages/Approve/components/hardware/keystone-usb/components/Disconnected.tsx

@@ -0,0 +1,89 @@
+import { FC, useCallback, useEffect } from 'react';
+import { StateComponentProps } from '../types';
+import { Box, Stack, Typography, Button } from '@avalabs/k2-alpine';
+import { useTranslation } from 'react-i18next';
+import { useKeystoneUsbContext, isSpecificContextContainer } from '@core/ui';
+import { tabs } from 'webextension-polyfill';
+import { ContextContainer } from '@core/types';
+import { FiAlertCircle } from 'react-icons/fi';
+
+export const Disconnected: FC<StateComponentProps> = ({ state }) => {
+  const { t } = useTranslation();
+  const {
+    popDeviceSelection,
+    initKeystoneTransport,
+    retryConnection,
+    wasTransportAttempted,
+  } = useKeystoneUsbContext();
+
+  // Auto-retry connection when in disconnected state (device might be locked)
+  useEffect(() => {
+    if (state === 'disconnected' && wasTransportAttempted) {
+      const interval = setInterval(() => {
+        retryConnection();
+      }, 2000);
+
+      return () => {
+        clearInterval(interval);
+      };
+    }
+  }, [state, wasTransportAttempted, retryConnection]);
+
+  const onReconnect = useCallback(async () => {
+    if (isSpecificContextContainer(ContextContainer.CONFIRM)) {
+      await popDeviceSelection();
+    } else {
+      // Open in a full screen tab, the extension window does not support the device selection popup.
+      const tab = await tabs.create({
+        url: '/fullscreen.html#/keystone-usb/reconnect',
+      });
+
+      const initTransport = (tabId) => {
+        if (tabId === tab.id) {
+          initKeystoneTransport();
+        }
+
+        tabs.onRemoved.removeListener(initTransport);
+      };
+
+      tabs.onRemoved.addListener(initTransport);
+    }
+  }, [popDeviceSelection, initKeystoneTransport]);
+
+  if (state !== 'disconnected') {
+    return null;
+  }
+
+  return (
+    <Stack width="100%" height="100%" gap={2}>
+      <Stack
+        gap={1}
+        flexGrow={1}
+        alignItems="center"
+        justifyContent="center"
+        textAlign="center"
+        color="error.main"
+        px={5}
+      >
+        <Box flexShrink={0}>
+          <FiAlertCircle size={24} color="red" />
+        </Box>
+        <Stack gap={0.5}>
+          <Typography variant="body3" fontWeight={500}>
+            {t('Keystone disconnected')}
+          </Typography>
+          <Stack gap={1.5}>
+            <Typography variant="caption">
+              {t(
+                'Core is no longer connected to your Keystone device. Reconnect to continue.',
+              )}
+            </Typography>
+            <Button onClick={onReconnect} fullWidth>
+              {t('Unable to connect?')}
+            </Button>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};

apps/next/src/pages/Approve/components/hardware/keystone-usb/components/Loading.tsx

@@ -0,0 +1,11 @@
+import { LoadingScreen } from '@/components/LoadingScreen';
+import { FC } from 'react';
+import { StateComponentProps } from '../types';
+
+export const Loading: FC<StateComponentProps> = ({ state }) => {
+  if (state !== 'loading') {
+    return null;
+  }
+
+  return <LoadingScreen />;
+};

apps/next/src/pages/Approve/components/hardware/keystone-usb/components/Pending.tsx

@@ -0,0 +1,83 @@
+import { FC, useEffect, useRef } from 'react';
+import { Stack, Typography } from '@avalabs/k2-alpine';
+import { Action, ActionStatus } from '@core/types';
+import { DisplayData } from '@avalabs/vm-module-types';
+import { StateComponentProps } from '../types';
+import { PendingKeystoneCircles } from './PendingKeystoneCircles';
+import { useTranslation } from 'react-i18next';
+import { useKeystoneUsbContext } from '@core/ui';
+import { createKeystoneTransport } from '@keystonehq/hw-transport-webusb';
+import { resolve } from '@core/common';
+
+type PendingProps = StateComponentProps & {
+  action: Action<DisplayData>;
+};
+
+export const Pending: FC<PendingProps> = ({ state, approve, action }) => {
+  const { t } = useTranslation();
+  const { hasKeystoneTransport } = useKeystoneUsbContext();
+  const hasApprovedRef = useRef(false);
+
+  useEffect(() => {
+    // Reset flag when state is not pending or action is not pending
+    if (state !== 'pending' || action.status !== ActionStatus.PENDING) {
+      hasApprovedRef.current = false;
+      return;
+    }
+
+    // Only call approve when device is ready and we haven't called it yet
+    if (hasKeystoneTransport && !hasApprovedRef.current) {
+      // Verify device is actually ready by testing transport creation
+      // This ensures the device can handle signing requests
+      const verifyAndApprove = async () => {
+        try {
+          // Make sure that the transport is available and the device is ready
+          const [usbTransport] = await resolve(createKeystoneTransport());
+          if (!usbTransport) {
+            throw new Error('Transport not available');
+          }
+
+          // Device is ready, now call approve
+          hasApprovedRef.current = true;
+          await approve();
+        } catch (error) {
+          console.error('Approval error:', error);
+          hasApprovedRef.current = false;
+        }
+      };
+
+      if (
+        state === 'pending' &&
+        action.status === ActionStatus.PENDING &&
+        hasKeystoneTransport &&
+        !hasApprovedRef.current
+      ) {
+        verifyAndApprove();
+      } else {
+        hasApprovedRef.current = false;
+      }
+    }
+  }, [state, approve, action.status, hasKeystoneTransport]);
+
+  if (state !== 'pending') {
+    return null;
+  }
+
+  return (
+    <Stack width="100%" height="100%" gap={2}>
+      <Stack px={6} flexGrow={1} alignItems="center" justifyContent="center">
+        <PendingKeystoneCircles />
+        <Stack gap={1} textAlign="center">
+          <Typography variant="body3" fontWeight={500}>
+            {t('Please review the transaction on your Keystone')}
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            {t(
+              'Open the Avalanche app on your Keystone device in order to continue with this transaction',
+            )}
+          </Typography>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};

apps/next/src/pages/Approve/components/hardware/keystone-usb/components/PendingKeystoneCircles.tsx

@@ -0,0 +1,6 @@
+import { KeystoneIcon } from '@avalabs/k2-alpine';
+import { PendingCircles } from '../../common/PendingCircles';
+
+export const PendingKeystoneCircles = () => (
+  <PendingCircles Icon={KeystoneIcon} />
+);

apps/next/src/pages/Approve/components/hardware/keystone-usb/types.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Action } from '@core/types';
+import { Disconnected } from './components/Disconnected';
+import { Loading } from './components/Loading';
+import { Pending } from './components/Pending';
+import { DisplayData } from '@avalabs/vm-module-types';
+
+export type StateComponentProps = {
+  state: KeystoneUsbApprovalState;
+  approve: () => Promise<unknown>;
+  reject: () => void;
+  action: Action<DisplayData>;
+};
+
+export type KeystoneUsbApprovalState = 'loading' | 'disconnected' | 'pending';
+
+export const StateComponentMapper: Record<
+  KeystoneUsbApprovalState,
+  React.ComponentType<StateComponentProps>
+> = {
+  loading: Loading,
+  disconnected: Disconnected,
+  pending: Pending,
+};