Keystone<>Core Mobile integration

packages/core-mobile/app/hardware/services/KeystoneService.ts

@@ -0,0 +1,39 @@
+import { UR } from '@ngraveio/bc-ur'
+import KeystoneSDK from '@keystonehq/keystone-sdk'
+import { fromPublicKey } from 'bip32'
+import { KeystoneDataStorage } from 'features/keystone/storage/KeystoneDataStorage'
+
+class KeystoneService {
+  private walletInfo = {
+    evm: '',
+    xp: '',
+    mfp: ''
+  }
+
+  init(ur: UR): void {
+    const sdk = new KeystoneSDK()
+    const accounts = sdk.parseMultiAccounts(ur)
+    const mfp = accounts.masterFingerprint
+    const ethAccount = accounts.keys.find(key => key.chain === 'ETH')
+    const avaxAccount = accounts.keys.find(key => key.chain === 'AVAX')
+    if (!ethAccount || !avaxAccount) {
+      throw new Error('No ETH or AVAX account found')
+    }
+
+    this.walletInfo.evm = fromPublicKey(
+      Buffer.from(ethAccount.publicKey, 'hex'),
+      Buffer.from(ethAccount.chainCode, 'hex')
+    ).toBase58()
+    this.walletInfo.xp = fromPublicKey(
+      Buffer.from(avaxAccount.publicKey, 'hex'),
+      Buffer.from(avaxAccount.chainCode, 'hex')
+    ).toBase58()
+    this.walletInfo.mfp = mfp
+  }
+
+  async save(): Promise<void> {
+    await KeystoneDataStorage.save(this.walletInfo)
+  }
+}
+
+export default new KeystoneService()

packages/core-mobile/app/hardware/wallet/keystoneSigner.ts

@@ -0,0 +1,21 @@
+import { UR } from '@ngraveio/bc-ur'
+import { requestKeystoneSigner } from 'features/keystone/utils'
+
+export const signer = async (
+  request: UR,
+  responseURTypes: string[],
+  handleResult: (cbor: Buffer) => Promise<string>
+): Promise<string> => {
+  return new Promise<string>((resolve, reject) => {
+    requestKeystoneSigner({
+      request,
+      responseURTypes,
+      onReject: (message?: string) => {
+        reject(message ?? 'User rejected')
+      },
+      onApprove: (cbor: Buffer) => {
+        return handleResult(cbor).then(resolve).catch(reject)
+      }
+    })
+  })
+}

packages/core-mobile/app/new/common/components/KeystoneQrScanner.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useCallback, useEffect } from 'react'
+import { UR, URDecoder } from '@ngraveio/bc-ur'
+import * as Progress from 'react-native-progress'
+import { View, Text, SCREEN_WIDTH, useTheme } from '@avalabs/k2-alpine'
+import { showKeystoneTroubleshooting } from 'features/keystone/utils'
+import { QrCodeScanner } from './QrCodeScanner'
+import { Space } from './Space'
+
+const SCANNER_WIDTH = SCREEN_WIDTH - 64
+
+interface Props {
+  urTypes: string[]
+  onSuccess: (ur: UR) => void
+  onError?: () => void
+  info?: string
+}
+
+export const KeystoneQrScanner: (props: Props) => JSX.Element = ({
+  info,
+  urTypes,
+  onSuccess,
+  onError
+}) => {
+  const [urDecoder, setUrDecoder] = useState(new URDecoder())
+  const [progress, setProgress] = useState<number>(0)
+  const [showTroubleshooting, setShowTroubleshooting] = useState(false)
+  const { theme } = useTheme()
+
+  const progressColor = theme.isDark ? theme.colors.$white : theme.colors.$black
+  const handleError = useCallback(() => {
+    setUrDecoder(new URDecoder())
+    setShowTroubleshooting(true)
+    if (onError) {
+      onError()
+    }
+  }, [onError])
+
+  const showErrorSheet = useCallback(() => {
+    showKeystoneTroubleshooting({
+      errorCode: -1,
+      retry: () => {
+        setShowTroubleshooting(false)
+        setProgress(0)
+      }
+    })
+  }, [])
+
+  useEffect(() => {
+    if (showTroubleshooting && !onError) {
+      showErrorSheet()
+    }
+  }, [showTroubleshooting, showErrorSheet, onError])
+
+  const handleScan = useCallback(
+    (code: string) => {
+      if (showTroubleshooting) {
+        return
+      }
+      try {
+        urDecoder.receivePart(code)
+        if (!urDecoder.isComplete()) {
+          setProgress(urDecoder.estimatedPercentComplete())
+          return
+        }
+
+        if (urDecoder.isError()) {
+          handleError()
+        }
+
+        if (urDecoder.isSuccess()) {
+          const ur = urDecoder.resultUR()
+
+          if (urTypes.includes(ur.type)) {
+            setProgress(1)
+
+            onSuccess(ur)
+          } else {
+            throw new Error('Invalid qr code')
+          }
+        }
+      } catch (error) {
+        handleError()
+      }
+    },
+    [
+      setProgress,
+      onSuccess,
+      urDecoder,
+      urTypes,
+      handleError,
+      showTroubleshooting
+    ]
+  )
+
+  return (
+    <View sx={{ alignItems: 'center', height: '100%' }}>
+      <QrCodeScanner
+        paused={showTroubleshooting}
+        onSuccess={handleScan}
+        vibrate={progress !== 1}
+        sx={{
+          width: SCANNER_WIDTH,
+          height: SCANNER_WIDTH
+        }}
+      />
+      <View
+        sx={{
+          alignItems: 'center',
+          flexDirection: 'column'
+        }}>
+        <Space y={70} />
+        <Progress.Bar
+          borderRadius={8}
+          color={progressColor}
+          width={290}
+          height={16}
+          progress={progress}
+          style={{
+            opacity: [0, 1].includes(progress) ? 0 : 1
+          }}
+        />
+        {info && (
+          <>
+            <Space y={32} />
+            <Text>{info}</Text>
+          </>
+        )}
+      </View>
+    </View>
+  )
+}

packages/core-mobile/app/new/common/components/NavigationRedirect.tsx

@@ -68,6 +68,7 @@ export const NavigationRedirect = (): null => {
       } else if (
         pathName === '/onboarding/mnemonic/confirmation' ||
         pathName === '/onboarding/seedless/confirmation' ||
+        pathName === '/onboarding/keystone/confirmation' ||
         (pathName === '/loginWithPinOrBiometry' && !isSignedIn)
       ) {
         // must call dismissAll() here

packages/core-mobile/app/new/common/components/QrCodeScanner.tsx

@@ -24,12 +24,14 @@ type Props = {
   onSuccess: (data: string) => void
   vibrate?: boolean
   sx?: SxProp
+  paused?: boolean
 }
 
 export const QrCodeScanner = ({
   onSuccess,
   vibrate = false,
-  sx
+  sx,
+  paused = false
 }: Props): React.JSX.Element | undefined => {
   const {
     theme: { colors }
@@ -40,20 +42,27 @@ export const QrCodeScanner = ({
   )
   const [data, setData] = useState<string>()
 
-  const handleSuccess = (scanningResult: BarcodeScanningResult): void => {
-    // expo-camera's onBarcodeScanned callback is not debounced, so we need to debounce it ourselves
-    setData(scanningResult.data)
-  }
+  useEffect(() => {
+    if (paused) {
+      setData(undefined)
+    }
+  }, [paused, setData])
 
   useEffect(() => {
-    if (data) {
+    if (data && !paused) {
       onSuccess(data)
 
       if (vibrate) {
         notificationAsync(NotificationFeedbackType.Success)
       }
     }
-  }, [data, onSuccess, vibrate])
+  }, [data, onSuccess, vibrate, paused])
+
+  const handleSuccess = (scanningResult: BarcodeScanningResult): void => {
+    if (paused) return
+    // expo-camera's onBarcodeScanned callback is not debounced, so we need to debounce it ourselves
+    setData(scanningResult.data)
+  }
 
   const checkIosPermission = useCallback(async () => {
     if (