[Issue-281]: Implement Wallet Connect

Koniverse · Aug 10, 2023 · 3f307f1 · 3f307f1
1 parent 01d093b
commit 3f307f1
Show file tree

Hide file tree

Showing 20 changed files with 155 additions and 99 deletions.
diff --git a/src/AppNew.tsx b/src/AppNew.tsx
@@ -5,7 +5,7 @@ import { QrSignerContextProvider } from 'providers/QrSignerContext';
 import { ScannerContextProvider } from 'providers/ScannerContext';
 import { SigningContextProvider } from 'providers/SigningContext';
 import React, { useEffect } from 'react';
-import { AppState, Dimensions, Platform, StatusBar, StyleProp, View } from 'react-native';
+import { AppState, Platform, StatusBar, StyleProp, View } from 'react-native';
 import { ThemeContext } from 'providers/contexts';
 import { THEME_PRESET } from 'styles/themes';
 import { ToastProvider } from 'react-native-toast-notifications';
@@ -20,12 +20,11 @@ import { LoadingScreen } from 'screens/LoadingScreen';
 import { ColorMap } from 'styles/color';
 import { AutoLockState } from 'utils/autoLock';
 import useStoreBackgroundService from 'hooks/store/useStoreBackgroundService';
-import { HIDE_MODAL_DURATION, statusBarHeight, TOAST_DURATION } from 'constants/index';
+import { HIDE_MODAL_DURATION, TOAST_DURATION } from 'constants/index';
 import AppNavigator from './AppNavigator';
 import { keyringLock } from 'messaging/index';
 import { updateShowZeroBalanceState } from 'stores/utils';
 import { setBuildNumber } from './stores/AppVersion';
-// import { hasMigratedFromAsyncStorage, migrateFromAsyncStorage } from 'utils/storage';
 import { getBuildNumber } from 'react-native-device-info';
 import { AppModalContextProvider } from './providers/AppModalContext';
 import { CustomToast } from 'components/design-system-ui/toast';
@@ -177,8 +176,10 @@ export const AppNew = () => {
                             position: 'absolute',
                             top: 0,
                             left: 0,
-                            width: Dimensions.get('window').width,
-                            height: Dimensions.get('window').height + (Platform.OS === 'ios' ? 0 : statusBarHeight),
+                            bottom: 0,
+                            right: 0,
+                            width: '100%',
+                            height: '100%',
                             zIndex: 9999,
                           }}>
                           <PortalProvider>

diff --git a/src/components/ContainerWithSubHeader.tsx b/src/components/ContainerWithSubHeader.tsx
@@ -3,6 +3,7 @@ import { KeyboardAvoidingView, Platform, SafeAreaView, StyleProp, View } from 'r
 import { SubHeader, SubHeaderProps } from 'components/SubHeader';
 import { Header } from 'components/Header';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import DeviceInfo from 'react-native-device-info';
 
 export interface ContainerWithSubHeaderProps extends SubHeaderProps {
   children: JSX.Element | JSX.Element[];
@@ -20,7 +21,7 @@ const getContainerStyle: (insetTop: number, backgroundColor?: string) => StylePr
   return {
     flex: 1,
     backgroundColor: backgroundColor || '#0C0C0C',
-    paddingTop: insetTop + (Platform.OS === 'ios' ? 0 : 8),
+    paddingTop: insetTop + (DeviceInfo.hasNotch() ? 0 : 8),
   };
 };
 

diff --git a/src/components/Modal/ConnectWebsiteModal.tsx b/src/components/Modal/ConnectWebsiteModal.tsx
@@ -253,7 +253,7 @@ export const ConnectWebsiteModal = ({ setVisible, modalVisible, isNotConnected,
       onBackButtonPress={onChangeModalVisible}
       contentContainerStyle={stylesheet.modalContentContainerStyle}
       footer={<View style={stylesheet.footer}>{actionButtons}</View>}>
-      <ScrollView style={stylesheet.scrollView}>
+      <ScrollView style={stylesheet.scrollView} showsVerticalScrollIndicator={false}>
         <TouchableOpacity activeOpacity={1}>
           <ConfirmationGeneralInfo
             request={{

diff --git a/src/components/Modal/common/PoolSelector.tsx b/src/components/Modal/common/PoolSelector.tsx
@@ -246,7 +246,6 @@ export const PoolSelector = ({ chain, onSelectItem, from, poolLoading, selectedP
             renderCustomItem={renderSortingItem}>
             {
               <Button
-                style={{ marginTop: 16 }}
                 icon={<Icon phosphorIcon={ArrowCounterClockwise} size={'md'} />}
                 onPress={() => {
                   setSortSelection(SortKey.DEFAULT);

diff --git a/src/components/Modal/common/ValidatorSelector.tsx b/src/components/Modal/common/ValidatorSelector.tsx
@@ -268,7 +268,6 @@ export const ValidatorSelector = ({
             renderCustomItem={renderSortingItem}>
             {
               <Button
-                style={{ marginTop: 16 }}
                 icon={<Icon phosphorIcon={ArrowCounterClockwise} size={'md'} />}
                 onPress={() => {
                   setSortSelection(SortKey.DEFAULT);

diff --git a/src/components/Modal/style/ConnectWebsiteModal.ts b/src/components/Modal/style/ConnectWebsiteModal.ts
@@ -32,7 +32,7 @@ export default (theme: ThemeTypes) => {
       gap: theme.sizeSM,
     },
     scrollView: {
-      // maxHeight: (70 * DEVICE.height) / 100,
+      height: '60%',
       width: '100%',
     },
   });

diff --git a/src/components/ScreenContainer.tsx b/src/components/ScreenContainer.tsx
@@ -3,6 +3,7 @@ import { Platform, SafeAreaView, StatusBar, StyleProp, StyleSheet, View, ViewSty
 import { ColorMap } from 'styles/color';
 import { sharedStyles, STATUS_BAR_HEIGHT, STATUS_BAR_LIGHT_CONTENT } from 'styles/sharedStyles';
 import LinearGradient from 'react-native-linear-gradient';
+import DeviceInfo from 'react-native-device-info';
 
 interface Props {
   children: React.ReactNode | React.ReactNode[];
@@ -39,7 +40,7 @@ export const ScreenContainer = ({
         colors={backgroundColor ? [backgroundColor, backgroundColor] : gradientBackground}
         style={styles.gradientWrapper}
       />
-      <SafeAreaView style={statusBarStyle}>
+      <SafeAreaView style={[statusBarStyle, { marginTop: DeviceInfo.hasNotch() ? 0 : 8 }]}>
         <StatusBar barStyle={STATUS_BAR_LIGHT_CONTENT} translucent={true} backgroundColor={'transparent'} />
       </SafeAreaView>
       <View style={styles.contentContainer}>{children}</View>

diff --git a/src/components/WalletConnect/Account/WCAccountSelect.tsx b/src/components/WalletConnect/Account/WCAccountSelect.tsx
@@ -12,7 +12,6 @@ import AccountItemWithName from 'components/common/Account/Item/AccountItemWithN
 import { ALL_ACCOUNT_KEY } from '@subwallet/extension-base/constants';
 import { CheckCircle } from 'phosphor-react-native';
 import { ModalRef } from 'types/modalRef';
-import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 
 interface Props {
   selectedAccounts: string[];
@@ -35,7 +34,6 @@ export const WCAccountSelect = ({
   selectedAccounts,
   useModal,
 }: Props) => {
-  const theme = useSubWalletTheme().swThemes;
   const modalRef = useRef<ModalRef>();
 
   const onCloseModal = useCallback(() => {
@@ -91,7 +89,7 @@ export const WCAccountSelect = ({
           renderSelected={() => <WCAccountInput accounts={availableAccounts} selected={appliedAccounts} />}
           renderCustomItem={renderItem}>
           <Button
-            style={{ marginTop: theme.margin }}
+            style={{ marginTop: 16 }}
             disabled={!selectedAccounts.length}
             icon={renderButtonIcon}
             onPress={_onApply}>

diff --git a/src/components/common/Account/AccountCreationArea/index.tsx b/src/components/common/Account/AccountCreationArea/index.tsx
@@ -122,11 +122,13 @@ export const AccountCreationArea = ({
     (keyTypes: KeypairType[]) => {
       createAccountRef && createAccountRef.current?.onCloseModal();
       selectTypeRef && selectTypeRef.current?.onCloseModal();
-      if (hasMasterPassword) {
-        navigation.navigate('CreateAccount', { keyTypes: keyTypes });
-      } else {
-        navigation.navigate('CreatePassword', { pathName: 'CreateAccount', state: keyTypes });
-      }
+      setTimeout(() => {
+        if (hasMasterPassword) {
+          navigation.navigate('CreateAccount', { keyTypes: keyTypes });
+        } else {
+          navigation.navigate('CreatePassword', { pathName: 'CreateAccount', state: keyTypes });
+        }
+      }, 300);
     },
     [createAccountRef, hasMasterPassword, navigation],
   );
@@ -154,11 +156,14 @@ export const AccountCreationArea = ({
       if (allowToShowSelectType) {
         selectTypeRef && selectTypeRef.current?.onOpenModal();
       } else {
-        if (hasMasterPassword) {
-          navigation.navigate('CreateAccount', {});
-        } else {
-          navigation.navigate('CreatePassword', { pathName: 'CreateAccount' });
-        }
+        createAccountRef?.current?.onCloseModal();
+        setTimeout(() => {
+          if (hasMasterPassword) {
+            navigation.navigate('CreateAccount', {});
+          } else {
+            navigation.navigate('CreatePassword', { pathName: 'CreateAccount' });
+          }
+        }, 3000);
       }
     } else {
       deriveAccModalRef && deriveAccModalRef.current?.onOpenModal();
@@ -178,11 +183,15 @@ export const AccountCreationArea = ({
       pathName = 'ImportQrCode';
     }
 
-    if (hasMasterPassword) {
-      navigation.navigate(pathName);
-    } else {
-      navigation.navigate('CreatePassword', { pathName: pathName });
-    }
+    setTimeout(() => {
+      if (hasMasterPassword) {
+        // @ts-ignore
+        navigation.navigate(pathName);
+      } else {
+        // @ts-ignore
+        navigation.navigate('CreatePassword', { pathName: pathName });
+      }
+    }, 300);
   };
 
   const attachAccountFunc = (item: ActionItemType) => {
@@ -200,11 +209,15 @@ export const AccountCreationArea = ({
     }
 
     attachAccountRef && attachAccountRef.current?.onCloseModal();
-    if (hasMasterPassword) {
-      navigation.navigate(pathName);
-    } else {
-      navigation.navigate('CreatePassword', { pathName: pathName });
-    }
+    setTimeout(() => {
+      if (hasMasterPassword) {
+        // @ts-ignore
+        navigation.navigate(pathName);
+      } else {
+        // @ts-ignore
+        navigation.navigate('CreatePassword', { pathName: pathName });
+      }
+    }, 300);
   };
 
   return (
@@ -214,11 +227,11 @@ export const AccountCreationArea = ({
         modalTitle={i18n.header.createNewAcc}
         items={createAccountAction}
         onSelectItem={createAccountFunc}>
-        <SelectAccountTypeModal selectTypeRef={selectTypeRef} onConfirm={onSelectAccountTypes} />
-
         <DeriveAccountModal deriveAccModalRef={deriveAccModalRef} goHome={goHome} navigation={navigation} />
       </AccountActionSelectModal>
 
+      <SelectAccountTypeModal selectTypeRef={selectTypeRef} onConfirm={onSelectAccountTypes} />
+
       <AccountActionSelectModal
         accActionRef={importAccountRef}
         modalTitle={i18n.header.importAcc}

diff --git a/src/components/common/Confirmation/ConfirmationContent/index.tsx b/src/components/common/Confirmation/ConfirmationContent/index.tsx
@@ -10,14 +10,12 @@ type Props = {
 };
 
 const ConfirmationContent: React.FC<Props> = (props: Props) => {
-  const { children, gap, isFullHeight } = props;
+  const { children, gap } = props;
   const theme = useSubWalletTheme().swThemes;
   const styles = useMemo(() => createStyle(theme, gap), [theme, gap]);
 
   return (
-    <ScrollView
-      style={[styles.container, isFullHeight ? { height: '100%' } : { maxHeight: '70%' }]}
-      contentContainerStyle={styles.content}>
+    <ScrollView style={[styles.container]} contentContainerStyle={styles.content}>
       {children}
     </ScrollView>
   );

diff --git a/src/components/common/SelectModal/BasicSelectModal.tsx b/src/components/common/SelectModal/BasicSelectModal.tsx
@@ -8,7 +8,6 @@ import { FilterSelectItem } from 'components/common/SelectModal/parts/FilterSele
 import { ActionItemType } from 'components/Modal/AccountActionSelectModal';
 import { OptionType } from 'components/common/FilterModal';
 import { SWModalRefProps } from 'components/design-system-ui/modal/ModalBaseV2';
-import { MarginBottomForSubmitButton } from 'styles/sharedStyles';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 
 interface Props<T> {
@@ -118,7 +117,7 @@ function _BasicSelectModal<T>(selectModalProps: Props<T>, ref: ForwardedRef<any>
           style={{
             width: '100%',
             paddingHorizontal: theme.padding,
-            ...MarginBottomForSubmitButton,
+            // ...MarginBottomForSubmitButton,
             marginTop: theme.padding,
           }}
           disabled={applyBtn?.disabled}

diff --git a/src/components/common/SelectModal/index.tsx b/src/components/common/SelectModal/index.tsx
@@ -1,7 +1,7 @@
 import React, { ForwardedRef, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Button, Icon, SwFullSizeModal } from 'components/design-system-ui';
 import { FlatListScreen, RightIconOpt } from 'components/FlatListScreen';
-import { ListRenderItemInfo, Platform, View } from 'react-native';
+import { Keyboard, ListRenderItemInfo, Platform, View } from 'react-native';
 import { MarginBottomForSubmitButton } from 'styles/sharedStyles';
 import { OptionType } from 'components/common/FilterModal';
 import { AccountSelectItem } from 'components/common/SelectModal/parts/AccountSelectItem';
@@ -141,6 +141,15 @@ function _SelectModal<T>(selectModalProps: Props<T>, ref: ForwardedRef<any>) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items, defaultValue]);
 
+  const _onSelectItem = useCallback(
+    (_item: T) => {
+      selectModalType === 'single' && Keyboard.dismiss();
+      // setTimeout(() => onSelectItem && onSelectItem(_item), 50);
+      onSelectItem && onSelectItem(_item);
+    },
+    [onSelectItem, selectModalType],
+  );
+
   useImperativeHandle(
     ref,
     () => ({
@@ -183,7 +192,7 @@ function _SelectModal<T>(selectModalProps: Props<T>, ref: ForwardedRef<any>) {
           <AccountSelectItem
             item={item}
             selectedValueMap={selectedValueMap}
-            onSelectItem={onSelectItem}
+            onSelectItem={_onSelectItem}
             onCloseModal={() => closeModalAfterSelect && modalBaseV2Ref?.current?.close()}
           />
         </>
@@ -193,7 +202,7 @@ function _SelectModal<T>(selectModalProps: Props<T>, ref: ForwardedRef<any>) {
         <_TokenSelectItem
           item={item}
           selectedValueMap={selectedValueMap}
-          onSelectItem={onSelectItem}
+          onSelectItem={_onSelectItem}
           onCloseModal={() => closeModalAfterSelect && modalBaseV2Ref?.current?.close()}
         />
       );
@@ -202,7 +211,7 @@ function _SelectModal<T>(selectModalProps: Props<T>, ref: ForwardedRef<any>) {
         <ChainSelectItem
           item={item}
           selectedValueMap={selectedValueMap}
-          onSelectItem={onSelectItem}
+          onSelectItem={_onSelectItem}
           onCloseModal={() => closeModalAfterSelect && modalBaseV2Ref?.current?.close()}
         />
       );

diff --git a/src/components/design-system-ui/button/index.tsx b/src/components/design-system-ui/button/index.tsx
@@ -130,7 +130,13 @@ const Button: React.FC<ButtonProps> = props => {
       onHideUnderlay={_onHideUnderlay}>
       <View style={[_style.container, { paddingVertical: 16 }]}>
         {iconNode}
-        {typeof children === 'string' ? <Text style={textStyle}>{children}</Text> : children}
+        {typeof children === 'string' ? (
+          <Text numberOfLines={1} style={textStyle}>
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
       </View>
     </TouchableHighlight>
   );