fix(mobile): add keyboard accessory view for check backup

tonkeeper · Nov 30, 2023 · 92652d4 · 92652d4
1 parent 13cccf2
commit 92652d4
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 45 deletions.
diff --git a/packages/@core-js/src/Wallet.ts b/packages/@core-js/src/Wallet.ts
@@ -180,7 +180,7 @@ export class Wallet {
     const timestamp = await this.storage.getItem('lastBackupTimestamp');
 
     if (timestamp !== null) {
-      this.state.set({ lastBackupTimestamp: timestamp });
+      this.state.set({ lastBackupTimestamp: Number(timestamp) });
     }
   }
 

diff --git a/packages/mobile/src/core/Settings/Settings.tsx b/packages/mobile/src/core/Settings/Settings.tsx
@@ -285,48 +285,52 @@ export const Settings: FC = () => {
             />
           </List>
           <Spacer y={16} />
-          <List>
-            {shouldShowTokensButton && (
-              <List.Item
-                value={
-                  <Icon
-                    style={styles.icon.static}
-                    color="accentPrimary"
-                    name={'ic-jetton-28'}
+          {(shouldShowTokensButton || hasSubscriptions || isAppearanceVisible) && (
+            <>
+              <List>
+                {shouldShowTokensButton && (
+                  <List.Item
+                    value={
+                      <Icon
+                        style={styles.icon.static}
+                        color="accentPrimary"
+                        name={'ic-jetton-28'}
+                      />
+                    }
+                    title={t('settings_jettons_list')}
+                    onPress={handleManageTokens}
                   />
-                }
-                title={t('settings_jettons_list')}
-                onPress={handleManageTokens}
-              />
-            )}
-            {hasSubscriptions && (
-              <List.Item
-                value={
-                  <Icon
-                    style={styles.icon.static}
-                    color="accentPrimary"
-                    name={'ic-ticket-28'}
+                )}
+                {hasSubscriptions && (
+                  <List.Item
+                    value={
+                      <Icon
+                        style={styles.icon.static}
+                        color="accentPrimary"
+                        name={'ic-ticket-28'}
+                      />
+                    }
+                    title={t('settings_subscriptions')}
+                    onPress={handleSubscriptions}
                   />
-                }
-                title={t('settings_subscriptions')}
-                onPress={handleSubscriptions}
-              />
-            )}
-            {isAppearanceVisible && (
-              <List.Item
-                value={
-                  <Icon
-                    style={styles.icon.static}
-                    color="accentPrimary"
-                    name={'ic-appearance-28'}
+                )}
+                {isAppearanceVisible && (
+                  <List.Item
+                    value={
+                      <Icon
+                        style={styles.icon.static}
+                        color="accentPrimary"
+                        name={'ic-appearance-28'}
+                      />
+                    }
+                    title={t('settings_appearance')}
+                    onPress={handleAppearance}
                   />
-                }
-                title={t('settings_appearance')}
-                onPress={handleAppearance}
-              />
-            )}
-          </List>
-          <Spacer y={16} />
+                )}
+              </List>
+              <Spacer y={16} />
+            </>
+          )}
           <List>
             {!!wallet && showNotifications && (
               <List.Item

diff --git a/packages/mobile/src/screens/BackupCheckPhraseScreen.tsx b/packages/mobile/src/screens/BackupCheckPhraseScreen.tsx
@@ -1,10 +1,19 @@
 import { useRecoveryPhraseInputs } from '@tonkeeper/shared/hooks/useRecoveryPhraseInputs';
-import { Screen, Steezy, View, Text, Input, Spacer, Button } from '@tonkeeper/uikit';
 import { InputNumberPrefix } from '@tonkeeper/shared/components/InputNumberPrefix';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams } from '@tonkeeper/router/src/imperative';
 import { useNavigation } from '@tonkeeper/router';
 import { tk } from '@tonkeeper/shared/tonkeeper';
+import {
+  Screen,
+  Steezy,
+  View,
+  Text,
+  Input,
+  Spacer,
+  Button,
+  KeyboardAccessoryView,
+} from '@tonkeeper/uikit';
 
 export const BackupCheckPhraseScreen = memo(() => {
   const { words } = useParams<{ words: { index: number; word: string }[] }>();
@@ -60,7 +69,7 @@ export const BackupCheckPhraseScreen = memo(() => {
   return (
     <Screen>
       <Screen.Header />
-      <Screen.KeyboardAwareScrollView
+      <Screen.ScrollView
         style={styles.scrollViewContnet.static}
         keyboardShouldPersistTaps="handled"
         keyboardDismissMode="none"
@@ -100,13 +109,15 @@ export const BackupCheckPhraseScreen = memo(() => {
             </View>
           ))}
         </View>
+      </Screen.ScrollView>
+      <KeyboardAccessoryView style={styles.keyboardAccessory} height={104}>
         <Button onPress={handleSubmit} title="Done" disabled={!isValid} />
-      </Screen.KeyboardAwareScrollView>
+      </KeyboardAccessoryView>
     </Screen>
   );
 });
 
-const styles = Steezy.create({
+const styles = Steezy.create(({ colors }) => ({
   input: {
     paddingLeft: 50,
   },
@@ -116,4 +127,10 @@ const styles = Steezy.create({
   scrollViewContnet: {
     paddingHorizontal: 32,
   },
-});
+  keyboardAccessory: {
+    paddingHorizontal: 32,
+    paddingBottom: 32,
+    paddingTop: 16,
+    backgroundColor: colors.backgroundPage,
+  },
+}));
diff --git a/packages/uikit/src/components/KeyboardAccessoryView.tsx b/packages/uikit/src/components/KeyboardAccessoryView.tsx
@@ -0,0 +1,42 @@
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useReanimatedKeyboardHeight } from '../utils/keyboard';
+import { StyleProp } from '@bogoslavskiy/react-native-steezy';
+import { ViewStyle, StyleSheet } from 'react-native';
+import { View } from './View';
+import { memo } from 'react';
+
+interface KeyboardAccessoryViewProps {
+  style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
+  height: number;
+}
+
+export const KeyboardAccessoryView = memo<KeyboardAccessoryViewProps>((props) => {
+  const { children, style, height } = props;
+  const keyboard = useReanimatedKeyboardHeight();
+  const safeArea = useSafeAreaInsets();
+
+  const heightStyle = useAnimatedStyle(
+    () => ({
+      height: keyboard.height.value + height + safeArea.bottom,
+    }),
+    [keyboard.height, height, safeArea.bottom],
+  );
+
+  return (
+    <Animated.View style={[styles.keyboardAccessory, heightStyle]}>
+      <View style={style}>{children}</View>
+    </Animated.View>
+  );
+});
+
+const styles = StyleSheet.create({
+  keyboardAccessory: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 3,
+  },
+});
diff --git a/packages/uikit/src/index.ts b/packages/uikit/src/index.ts
@@ -26,6 +26,7 @@ export { SegmentedControl } from './components/SegmentedControl';
 export { TransitionOpacity } from './components/TransitionOpacity';
 export { Switch } from './components/Switch';
 export * from './components/Flash';
+export { KeyboardAccessoryView } from './components/KeyboardAccessoryView';
 
 // Containers
 export { HeaderButtonHitSlop } from './containers/Screen/utils/constants';