Keystone<>Core Mobile integration

package.json

@@ -57,5 +57,13 @@
     "node": ">=20.18.0",
     "yarn": ">=3.6.4"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@ethereumjs/util": "9.1.0",
+    "@keystonehq/animated-qr": "0.10.0",
+    "@keystonehq/keystone-sdk": "0.11.3",
+    "@ngraveio/bc-ur": "1.1.13",
+    "react-native-popover-view": "6.1.0",
+    "react-native-progress": "5.0.1"
+  }
 }

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

@@ -0,0 +1,136 @@
+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)
+
+            setTimeout(() => {
+              setUrDecoder(new URDecoder())
+              setProgress(0)
+            })
+          } 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

@@ -69,6 +69,7 @@ export const NavigationRedirect = (): null => {
         } else if (
           pathName === '/onboarding/mnemonic/confirmation' ||
           pathName === '/onboarding/seedless/confirmation' ||
+          pathName === '/onboarding/keystone/confirmation' ||
           (pathName === '/loginWithPinOrBiometry' && !isSignedIn)
         ) {
           // @ts-ignore TODO: make routes typesafe

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 (

packages/core-mobile/app/new/common/hooks/useCombinedPrimaryNetworks.ts

@@ -9,6 +9,8 @@ import {
 } from 'services/network/consts'
 import { selectIsSolanaSupportBlocked } from 'store/posthog/slice'
 import { selectIsDeveloperMode } from 'store/settings/advanced'
+import { WalletType } from 'services/wallet/types'
+import { useActiveWallet } from './useActiveWallet'
 
 /**
  * Hook to get the combined primary networks (networks are merged together with same address)
@@ -21,20 +23,24 @@ export function useCombinedPrimaryNetworks(): {
 } {
   const isDeveloperMode = useSelector(selectIsDeveloperMode)
   const isSolanaSupportBlocked = useSelector(selectIsSolanaSupportBlocked)
+  const wallet = useActiveWallet()
 
   const networks = useMemo(() => {
+    const blockSolana =
+      isSolanaSupportBlocked || wallet.type === WalletType.KEYSTONE
+
     // Test networks
     if (isDeveloperMode) {
-      return isSolanaSupportBlocked
+      return blockSolana
         ? (TEST_PRIMARY_NETWORKS as Network[])
         : [...TEST_PRIMARY_NETWORKS, NETWORK_SOLANA_DEVNET]
     }
 
     // Main networks
-    return isSolanaSupportBlocked
+    return blockSolana
       ? (MAIN_PRIMARY_NETWORKS as Network[])
       : [...MAIN_PRIMARY_NETWORKS, NETWORK_SOLANA]
-  }, [isDeveloperMode, isSolanaSupportBlocked])
+  }, [isDeveloperMode, isSolanaSupportBlocked, wallet.type])
 
   return { networks }
 }

packages/core-mobile/app/new/common/hooks/useManageWallet.ts

@@ -125,13 +125,18 @@ export const useManageWallet = (): {
       // 1. Seedless wallets cannot be removed
       if (wallet.type === WalletType.SEEDLESS) return false
 
-      // 2. Mnemonic wallets can be removed if there are multiple mnemonic or seedless wallets
+      // 2. Mnemonic wallets can be removed if there are multiple mnemonic/seedless/keystone wallets
       const walletCount = Object.values(wallets).filter(
-        w => w.type === WalletType.MNEMONIC || w.type === WalletType.SEEDLESS
+        w =>
+          w.type === WalletType.MNEMONIC ||
+          w.type === WalletType.SEEDLESS ||
+          w.type === WalletType.KEYSTONE
       ).length
 
       const isLastRemovableMnemonic =
-        walletCount === 1 && wallet.type === WalletType.MNEMONIC
+        walletCount === 1 &&
+        (wallet.type === WalletType.MNEMONIC ||
+          wallet.type === WalletType.KEYSTONE)
 
       return !isLastRemovableMnemonic
     },
@@ -155,7 +160,13 @@ export const useManageWallet = (): {
         })
       }
 
-      if ([WalletType.MNEMONIC, WalletType.SEEDLESS].includes(wallet.type)) {
+      if (
+        [
+          WalletType.MNEMONIC,
+          WalletType.SEEDLESS,
+          WalletType.KEYSTONE
+        ].includes(wallet.type)
+      ) {
         baseItems.push({
           id: 'add_account',
           title: 'Add account to this wallet'