fix:fix keystone ui (#819)

* fix: fix keystone account assign screen ui * fix: remove unused code when reimport account * fix: fix text color * chore: refactor keystone reimport accounts logic --------- Co-authored-by: ZhenQian <[email protected]>
helium · Oct 31, 2024 · 3933796 · 3933796
1 parent 587d0ee
commit 3933796
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 44 deletions.
diff --git a/src/features/keystone/ConnectKeystoneStartScreen.tsx b/src/features/keystone/ConnectKeystoneStartScreen.tsx
@@ -102,8 +102,8 @@ const WarningContent = () => {
         <Box alignItems="center">
           <WarningKeystone />
           <Text
-            color="primaryText"
             variant="textSmRegular"
+            color="secondaryText"
             textAlign="center"
             marginVertical="4"
           >

diff --git a/src/features/keystone/KeystoneAccountAssignScreen.tsx b/src/features/keystone/KeystoneAccountAssignScreen.tsx
@@ -105,32 +105,34 @@ const KeystoneAccountAssignScreen = () => {
     <SafeAreaBox
       backgroundColor="secondaryBackground"
       flex={1}
-      paddingHorizontal="xl"
+      paddingHorizontal="8"
     >
       <KeyboardAvoidingView
-        keyboardVerticalOffset={insets.top + spacing.xl}
+        keyboardVerticalOffset={insets.top + spacing[6]}
         behavior={Platform.OS === 'android' ? undefined : 'padding'}
         style={styles.container}
       >
         <Box alignItems="center" flex={1}>
           <Text
-            color="primaryText"
-            variant="displayMdSemibold"
+            variant="displayMdRegular"
             textAlign="center"
             fontSize={44}
             lineHeight={44}
-            marginTop="xl"
+            marginTop="8"
+            color="primaryText"
           >
             {t('accountAssign.title')}
           </Text>
 
           <Box
-            backgroundColor="transparent10"
-            borderRadius="xl"
+            backgroundColor="cardBackground"
+            borderRadius="4xl"
             padding="4"
             width="100%"
-            marginTop="xl"
+            marginTop="8"
             flexDirection="row"
+            borderColor="border.primary"
+            borderWidth={1}
           >
             <AccountIcon
               size={40}
@@ -141,27 +143,30 @@ const KeystoneAccountAssignScreen = () => {
                 )
               }
             />
-            <TextInput
-              textColor="primaryText"
-              fontSize={24}
-              marginLeft="4"
-              marginRight="xl"
-              textInputProps={{
-                placeholder: t('accountAssign.AccountNamePlaceholder'),
-                autoCorrect: false,
-                autoComplete: 'off',
-                autoCapitalize: 'words',
-                onChangeText: setAlias,
-                value: alias,
-                autoFocus: true,
-              }}
-            />
+            <Box backgroundColor="cardBackground">
+              <TextInput
+                textColor="primaryText"
+                fontSize={24}
+                marginLeft="4"
+                marginRight="8"
+                variant="transparentSmall"
+                textInputProps={{
+                  placeholder: t('accountAssign.AccountNamePlaceholder'),
+                  autoCorrect: false,
+                  autoComplete: 'off',
+                  autoCapitalize: 'words',
+                  onChangeText: setAlias,
+                  value: alias,
+                  autoFocus: true,
+                }}
+              />
+            </Box>
           </Box>
 
           <Box
             flexDirection="row"
             alignItems="center"
-            marginTop="xl"
+            marginTop="8"
             opacity={hasAccounts ? 100 : 0}
           >
             <CheckBox
@@ -183,7 +188,7 @@ const KeystoneAccountAssignScreen = () => {
             />
 
             <Text
-              variant="textMdMedium"
+              variant="textMdRegular"
               color={setAsDefault ? 'primaryText' : 'secondaryText'}
               marginLeft="4"
             >
@@ -193,19 +198,21 @@ const KeystoneAccountAssignScreen = () => {
 
           <Box flex={1} />
           {!loading && existingNames?.has(alias) ? (
-            <Text mb="4" color="error.500">
+            <Text variant="textSmSemibold" mb="4" color="error.500">
               {t('accountAssign.nameExists')}
             </Text>
           ) : null}
           {loading ? (
-            <CircleLoader />
+            <CircleLoader color="primaryText" />
           ) : (
             <FabButton
               onPress={handlePress}
               icon="arrowRight"
               iconColor="primaryBackground"
               disabled={!alias || existingNames?.has(alias)}
               backgroundColor="primaryText"
+              backgroundColorPressed="primaryBackground"
+              backgroundColorOpacityPressed={0.1}
             />
           )}
         </Box>

diff --git a/src/features/keystone/SelectKeystoneAccountsScreen.tsx b/src/features/keystone/SelectKeystoneAccountsScreen.tsx
@@ -73,26 +73,18 @@ const SelectKeystoneAccountsScreen = () => {
 
   const onNext = useCallback(() => {
     storageSelectedAccounts()
-    if (hasAccounts) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      navigation.replace('TabBarNavigator', {
-        screen: 'Home',
-        params: {
-          screen: 'KeystoneAccountAssignScreen',
-        },
-      })
-    } else {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      navigation.replace('OnboardingNavigator', {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    navigation.replace('ServiceSheetNavigator', {
+      screen: 'AccountsService',
+      params: {
         screen: 'KeystoneNavigator',
         params: {
           screen: 'KeystoneAccountAssignScreen',
         },
-      })
-    }
-  }, [hasAccounts, navigation, selected])
+      },
+    })
+  }, [navigation, selected])
 
   const fetchBalance = async (publicKey: string) => {
     if (connection) {

diff --git a/src/services/AccountsService/index.tsx b/src/services/AccountsService/index.tsx
@@ -9,6 +9,7 @@ import AddNewAccountNavigator from '@features/home/addNewAccount/AddNewAccountNa
 import AccountAssignScreen from '@features/onboarding/AccountAssignScreen'
 import { RouteAccount } from '@features/onboarding/create/createAccountNavTypes'
 import ImportAccountNavigator from '@features/onboarding/import/ImportAccountNavigator'
+import KeystoneNavigator from '@features/keystone/KeystoneNavigator'
 import YourWalletsPage from './pages/YourWalletsPage'
 
 export type AccountsServiceStackParamList = {
@@ -24,6 +25,12 @@ export type AccountsServiceStackParamList = {
           accountAddress?: string
         }
       }
+  KeystoneNavigator: {
+    screen: 'KeystoneNavigator'
+    params: {
+      screen: string
+    }
+  }
 }
 
 export type AccountsServiceNavigationProp =
@@ -60,6 +67,10 @@ const AccountsService = () => {
         name="ReImportAccountNavigator"
         component={ImportAccountNavigator}
       />
+      <AccountsServiceStack.Screen
+        name="KeystoneNavigator"
+        component={KeystoneNavigator}
+      />
     </AccountsServiceStack.Navigator>
   )
 }