fix: fix pr comments

helium · Sep 4, 2024 · a02171f · a02171f
1 parent 92dad87
commit a02171f
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 90 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -125,9 +125,7 @@ const App = () => {
                     <WalletOnboardingProvider
                       baseUrl={Config.ONBOARDING_API_URL}
                     >
-                      <KeystoneOnboardingProvider
-                        baseUrl={Config.ONBOARDING_API_URL}
-                      >
+                      <KeystoneOnboardingProvider>
                         <WalletConnectProvider>
                           <HotspotOnboardingProvider
                             baseUrl={Config.ONBOARDING_API_URL}

diff --git a/src/assets/images/[email protected] b/src/assets/images/[email protected]
diff --git a/src/assets/images/[email protected] b/src/assets/images/[email protected]
diff --git a/src/components/CameraScannerLayout.tsx b/src/components/CameraScannerLayout.tsx
@@ -11,7 +11,7 @@ import Box from './Box'
 const SCANNER_SIZE = 300
 const SCANNER_LINE_HEIGHT = 43
 const SCAN_DURATION = 2000
-
+const BORDER_SEGMENT_SIZE = 40
 export const CameraScannerLayout = () => {
   const linePosition = useSharedValue<number>(-SCANNER_LINE_HEIGHT)
   const animatedStyle = useAnimatedStyle(() => ({
@@ -51,8 +51,8 @@ export const CameraScannerLayout = () => {
         <Box
           position="absolute"
           borderColor="hntBlue"
-          width={40}
-          height={40}
+          width={BORDER_SEGMENT_SIZE}
+          height={BORDER_SEGMENT_SIZE}
           borderTopWidth={4}
           borderLeftWidth={4}
           top={0}
@@ -62,8 +62,8 @@ export const CameraScannerLayout = () => {
         <Box
           position="absolute"
           borderColor="hntBlue"
-          width={40}
-          height={40}
+          width={BORDER_SEGMENT_SIZE}
+          height={BORDER_SEGMENT_SIZE}
           borderTopWidth={4}
           borderRightWidth={4}
           top={0}
@@ -73,8 +73,8 @@ export const CameraScannerLayout = () => {
         <Box
           position="absolute"
           borderColor="hntBlue"
-          width={40}
-          height={40}
+          width={BORDER_SEGMENT_SIZE}
+          height={BORDER_SEGMENT_SIZE}
           borderBottomWidth={4}
           borderLeftWidth={4}
           bottom={0}
@@ -84,8 +84,8 @@ export const CameraScannerLayout = () => {
         <Box
           position="absolute"
           borderColor="hntBlue"
-          width={40}
-          height={40}
+          width={BORDER_SEGMENT_SIZE}
+          height={BORDER_SEGMENT_SIZE}
           borderBottomWidth={4}
           borderRightWidth={4}
           bottom={0}

diff --git a/src/components/DaynamicQrScanner.tsx → src/components/DynamicQrScanner.tsx b/src/components/DaynamicQrScanner.tsx → src/components/DynamicQrScanner.tsx
@@ -17,7 +17,7 @@ type Props = {
   progress: number
   onBarCodeScanned: (data: string) => void
 }
-const DaynamicQrScanner = ({ onBarCodeScanned, progress }: Props) => {
+const DynamicQrScanner = ({ onBarCodeScanned, progress }: Props) => {
   const [hasPermission, setHasPermission] = useState<boolean>()
   const navigation = useNavigation()
   const { showOKCancelAlert } = useAlert()
@@ -32,12 +32,14 @@ const DaynamicQrScanner = ({ onBarCodeScanned, progress }: Props) => {
   useAsync(async () => {
     if (hasPermission !== false) return
 
+    // if permission is not granted, show alert to open settings
     const decision = await showOKCancelAlert({
       title: t('qrScanner.deniedAlert.title'),
       message: t('qrScanner.deniedAlert.message'),
       ok: t('qrScanner.deniedAlert.ok'),
     })
 
+    // if user clicks ok, open settings
     if (decision) {
       if (Platform.OS === 'ios') {
         Linking.openURL('app-settings:')
@@ -46,7 +48,10 @@ const DaynamicQrScanner = ({ onBarCodeScanned, progress }: Props) => {
       }
     }
 
-    navigation.goBack()
+    // if user clicks cancel, go back to the previous screen
+    if (decision === false) {
+      navigation.goBack()
+    }
   }, [hasPermission, navigation, showOKCancelAlert])
 
   const barCodeScannerSettings = useMemo(
@@ -59,38 +64,38 @@ const DaynamicQrScanner = ({ onBarCodeScanned, progress }: Props) => {
     onBarCodeScanned(result.data)
   }
 
-  if (!hasPermission) {
-    return (
-      <BackScreen>
-        <Box />
-      </BackScreen>
-    )
-  }
   return (
     <BackScreen padding="none">
-      <Camera
-        onBarCodeScanned={handleBarCodeScanned}
-        barCodeScannerSettings={barCodeScannerSettings}
-        style={StyleSheet.absoluteFillObject}
-        ratio="16:9"
-      />
-      <CameraScannerLayout />
+      {/* if permission is not granted, show a black screen and notice alert modal */}
+      {hasPermission !== true && <Box />}
+
+      {hasPermission === true && (
+        <Box flex={1}>
+          <Camera
+            onBarCodeScanned={handleBarCodeScanned}
+            barCodeScannerSettings={barCodeScannerSettings}
+            style={StyleSheet.absoluteFillObject}
+            ratio="16:9"
+          />
+          <CameraScannerLayout />
 
-      <Box position="absolute" bottom="20%" width="70%" alignSelf="center">
-        <ProgressBar progress={progress} />
-      </Box>
+          <Box position="absolute" bottom="20%" width="70%" alignSelf="center">
+            <ProgressBar progress={progress} />
+          </Box>
 
-      <Box
-        position="absolute"
-        bottom="10%"
-        alignSelf="center"
-        paddingHorizontal="s"
-      >
-        <Text variant="subtitle3" marginTop="xxxl" textAlign="center">
-          {t('keystone.payment.scanTxQrcodeScreenSubtitle3')}
-        </Text>
-      </Box>
+          <Box
+            position="absolute"
+            bottom="10%"
+            alignSelf="center"
+            paddingHorizontal="s"
+          >
+            <Text variant="subtitle3" marginTop="xxxl" textAlign="center">
+              {t('keystone.payment.scanTxQrcodeScreenSubtitle3')}
+            </Text>
+          </Box>
+        </Box>
+      )}
     </BackScreen>
   )
 }
-export default DaynamicQrScanner
+export default DynamicQrScanner
diff --git a/src/features/keystone/ConnectKeystoneStartScreen.tsx b/src/features/keystone/ConnectKeystoneStartScreen.tsx
@@ -20,7 +20,7 @@ import useBackHandler from '@hooks/useBackHandler'
 import { useTheme } from '@shopify/restyle'
 import { t } from 'i18next'
 import { RootNavigationProp } from 'src/navigation/rootTypes'
-import { Image } from 'react-native'
+import { Image, Linking, Platform } from 'react-native'
 
 type CameraPermissionBottomSheetAlertRef = {
   show: () => void
@@ -82,7 +82,14 @@ const CameraPermissionBottomSheetAlert = forwardRef(
   },
 )
 
-const WarningContent = ({ handleDismiss }: { handleDismiss: () => void }) => {
+const WarningContent = () => {
+  const handleOpenSettings = () => {
+    if (Platform.OS === 'ios') {
+      Linking.openURL('app-settings:')
+    } else {
+      Linking.openSettings()
+    }
+  }
   return (
     <SafeAreaBox
       flex={1}
@@ -100,7 +107,7 @@ const WarningContent = ({ handleDismiss }: { handleDismiss: () => void }) => {
       </Box>
       <ButtonPressable
         borderRadius="round"
-        onPress={handleDismiss}
+        onPress={handleOpenSettings}
         backgroundColor="primaryText"
         backgroundColorOpacityPressed={0.7}
         backgroundColorDisabled="surfaceSecondary"
@@ -150,11 +157,7 @@ const ConnectKeystoneStart = () => {
       <CameraPermissionBottomSheetAlert
         ref={cameraPermissionBottomSheetAlertRef}
       >
-        <WarningContent
-          handleDismiss={
-            cameraPermissionBottomSheetAlertRef.current?.dismiss as () => void
-          }
-        />
+        <WarningContent />
       </CameraPermissionBottomSheetAlert>
       <ButtonPressable
         borderRadius="round"

diff --git a/src/features/keystone/KeystoneOnboardingProvider.tsx b/src/features/keystone/KeystoneOnboardingProvider.tsx
@@ -1,11 +1,8 @@
 import { NetTypes as NetType } from '@helium/address'
-import OnboardingClient, { Maker } from '@helium/onboarding'
 import React, {
   createContext,
   ReactNode,
-  useCallback,
   useContext,
-  useEffect,
   useMemo,
   useState,
 } from 'react'
@@ -18,65 +15,39 @@ type KeystoneResolvedPath = {
 }
 
 type KeystoneOnboardingData = {
-  netType: NetType.NetType
   accounts: KeystoneResolvedPath[]
 }
 
-const useKeystoneOnboardingHook = ({ baseUrl }: { baseUrl: string }) => {
+const useKeystoneOnboardingHook = () => {
   const initialState = useMemo(() => {
     return {
-      netType: NetType.MAINNET,
       accounts: [],
     } as KeystoneOnboardingData
   }, [])
   const [keystoneOnboardingData, setKeystoneOnboardingData] =
     useState<KeystoneOnboardingData>(initialState)
 
-  const [makers, setMakers] = useState<Maker[]>([])
-
-  const reset = useCallback(() => {
-    setKeystoneOnboardingData(initialState)
-  }, [initialState])
-
-  useEffect(() => {
-    new OnboardingClient(`${baseUrl}/v3`)
-      .getMakers()
-      .then(({ data }) => setMakers(data || []))
-  }, [baseUrl])
-
   return {
     keystoneOnboardingData,
     setKeystoneOnboardingData,
-    reset,
-    makers,
   }
 }
 
 const initialState = {
-  makers: [] as Maker[],
   keystoneOnboardingData: {
     netType: NetType.MAINNET,
     accounts: [] as KeystoneResolvedPath[],
   },
-  reset: () => undefined,
   setNetType: () => undefined,
   setKeystoneOnboardingData: () => undefined,
 }
 
 const KeystoneOnboardingContext =
   createContext<ReturnType<typeof useKeystoneOnboardingHook>>(initialState)
 
-const KeystoneOnboardingProvider = ({
-  children,
-  baseUrl,
-}: {
-  children: ReactNode
-  baseUrl: string
-}) => {
+const KeystoneOnboardingProvider = ({ children }: { children: ReactNode }) => {
   return (
-    <KeystoneOnboardingContext.Provider
-      value={useKeystoneOnboardingHook({ baseUrl })}
-    >
+    <KeystoneOnboardingContext.Provider value={useKeystoneOnboardingHook()}>
       {children}
     </KeystoneOnboardingContext.Provider>
   )

diff --git a/src/features/keystone/ScanQrCodeScreen.tsx b/src/features/keystone/ScanQrCodeScreen.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import DaynamicQrScanner from '@components/DaynamicQrScanner'
+import DynamicQrScanner from '@components/DynamicQrScanner'
 import SafeAreaBox from '@components/SafeAreaBox'
 import { URDecoder } from '@ngraveio/bc-ur'
 import KeystoneSDK, { MultiAccounts, UR } from '@keystonehq/keystone-sdk'
@@ -48,7 +48,7 @@ const ScanQrCodeScreen = () => {
   }, [isScanQrCodeComplete])
   return (
     <SafeAreaBox flex={1}>
-      <DaynamicQrScanner
+      <DynamicQrScanner
         onBarCodeScanned={handleBarCodeScanned}
         progress={progress}
       />

diff --git a/src/features/keystone/SelectKeystoneAccountsScreen.tsx b/src/features/keystone/SelectKeystoneAccountsScreen.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable no-restricted-syntax */
 import React, { useCallback, useEffect, useState } from 'react'
-import { NetTypes as NetType } from '@helium/address'
 import Box from '@components/Box'
 import SafeAreaBox from '@components/SafeAreaBox'
 import Text from '@components/Text'
@@ -22,6 +21,7 @@ import { ellipsizeAddress } from '@utils/accountUtils'
 import base58 from 'bs58'
 import { retryWithBackoff } from '@utils/retryWithBackoff'
 import { PublicKey } from '@solana/web3.js'
+import { useTranslation } from 'react-i18next'
 import { useSolana } from '../../solana/SolanaProvider'
 import { useKeystoneOnboarding } from './KeystoneOnboardingProvider'
 
@@ -47,6 +47,7 @@ const SelectKeystoneAccountsScreen = () => {
   const [selected, setSelected] = React.useState<Set<string>>(
     new Set(derivationAccounts.map((item) => item.path)),
   )
+  const { t } = useTranslation()
   const [loading, setLoading] = useState<boolean>(true)
   const { connection } = useSolana()
   // storage the selected accounts
@@ -65,7 +66,6 @@ const SelectKeystoneAccountsScreen = () => {
     )
     setKeystoneOnboardingData({
       accounts: selectedAccounts,
-      netType: NetType.MAINNET,
     })
   }
   // next page
@@ -212,12 +212,10 @@ const SelectKeystoneAccountsScreen = () => {
           lineHeight={44}
           mb="s"
         >
-          Select Keystone Accounts
+          {t('keystone.selectKeystoneAccounts.title')}
         </Text>
         <Text textAlign="center" p="s" variant="body1" mb="l">
-          A secret phrase can be used to generate multiple wallets by using
-          derivation paths. The following derivation paths have been
-          automatically detected. Select the wallets you would like to import.
+          {t('keystone.selectKeystoneAccounts.subtitle')}
         </Text>
         <FlatList
           refreshControl={

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -772,6 +772,11 @@ export default {
       warning: 'Please enable your camera permission via [Settings]',
       ok: 'OK',
     },
+    selectKeystoneAccounts: {
+      subtitle:
+        'A secret phrase can be used to generate multiple wallets by using derivation paths. The following derivation paths have been automatically detected. Select the wallets you would like to import.',
+      title: 'Select Keystone Accounts',
+    },
     scanQrCode: 'Scan the QR Code',
     payment: {
       scanTxQrcodeScreenTitle: 'Scan the QR Code',