[Issue-281]: Implement Wallet Connect

Koniverse · Aug 10, 2023 · 5db32e4 · 5db32e4
1 parent 01d093b
commit 5db32e4
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 63 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/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
@@ -119,7 +119,6 @@ function _BasicSelectModal<T>(selectModalProps: Props<T>, ref: ForwardedRef<any>
             width: '100%',
             paddingHorizontal: theme.padding,
             ...MarginBottomForSubmitButton,
-            marginTop: theme.padding,
           }}
           disabled={applyBtn?.disabled}
           icon={color => <Icon phosphorIcon={applyBtn?.icon} size={'lg'} iconColor={color} />}

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/modal/ModalBaseV2.tsx b/src/components/design-system-ui/modal/ModalBaseV2.tsx
@@ -1,9 +1,10 @@
-import React, { useCallback, useEffect, useImperativeHandle } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useState } from 'react';
 import { Dimensions, StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import ModalStyles from './styleV2';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
+import useConfirmationsInfo from 'hooks/screen/Confirmation/useConfirmationsInfo';
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
 
 const MAX_TRANSLATE_Y = -SCREEN_HEIGHT;
@@ -17,6 +18,7 @@ export interface SWModalProps {
   isFullHeight?: boolean;
   level?: number;
   onChangeModalVisible?: () => void;
+  isUseForceHidden?: boolean;
 }
 
 export type SWModalRefProps = {
@@ -27,46 +29,68 @@ export type SWModalRefProps = {
 
 const ModalBaseV2 = React.forwardRef<SWModalRefProps, SWModalProps>(
   (
-    { isVisible, setVisible, height, children, wrapperStyle, isFullHeight = false, level = 1, onChangeModalVisible },
+    {
+      isVisible,
+      setVisible,
+      height,
+      children,
+      wrapperStyle,
+      isFullHeight = false,
+      level = 1,
+      onChangeModalVisible,
+      isUseForceHidden,
+    },
     ref,
   ) => {
     const translateY = useSharedValue(0);
     const active = useSharedValue(false);
     const theme = useSubWalletTheme().swThemes;
     const _styles = ModalStyles(theme, level);
+    const { numberOfConfirmations } = useConfirmationsInfo();
+    const [isForcedHidden, setForcedHidden] = useState<boolean>(false);
     useEffect(() => {
-      if (isVisible) {
+      if (isUseForceHidden && !!numberOfConfirmations) {
+        setForcedHidden(true);
+      } else {
+        setForcedHidden(false);
+      }
+    }, [isUseForceHidden, numberOfConfirmations]);
+
+    useEffect(() => {
+      if (!isForcedHidden && isVisible) {
         scrollTo(-height);
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isVisible, height]);
-    const timeout = (destination: number) => {
-      setTimeout(() => {
-        if (destination === 0 && setVisible) {
-          setVisible(false);
-          onChangeModalVisible && onChangeModalVisible();
-        }
-      }, 50);
-    };
+    }, [isVisible, height, isForcedHidden]);
+    // const timeout = () => {
+    //   setTimeout(() => {
+    //     setVisible(false);
+    //     onChangeModalVisible && onChangeModalVisible();
+    //   }, 50);
+    // };
     const scrollTo = useCallback((destination: number) => {
       'worklet';
       active.value = destination !== 0;
 
-      runOnJS(timeout)(destination);
+      // if (destination === 0) {
+      //   runOnJS(timeout)();
+      //   runOnJS(setVisible)(false);
+      // }
+
       translateY.value = withTiming(
         destination,
         {
-          duration: 350,
-        },
-        () => {
-          destination === 0 && runOnJS(setVisible)(false);
+          duration: 250,
         },
+        () => {},
       );
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const onClose = useCallback(() => {
       scrollTo(0);
+      onChangeModalVisible && onChangeModalVisible();
+      setVisible(false);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -107,7 +131,7 @@ const ModalBaseV2 = React.forwardRef<SWModalRefProps, SWModalProps>(
 
     return (
       <>
-        {isVisible && (
+        {!isForcedHidden && isVisible && (
           <>
             <TouchableOpacity activeOpacity={0.8} style={_styles.backDropButton} onPress={onClose} />
             <GestureDetector gesture={gesture}>

diff --git a/src/components/design-system-ui/modal/SwModal.tsx b/src/components/design-system-ui/modal/SwModal.tsx
@@ -130,19 +130,20 @@ const SwModal = React.forwardRef<ModalRefProps, SWModalProps>(
               setVisible={setVisible}
               height={childrenHeight}
               ref={modalBaseV2Ref}
+              isUseForceHidden={Platform.OS === 'android'}
               onChangeModalVisible={onChangeModalVisible}
               level={level}>
               <View
                 style={{ paddingHorizontal: 16, paddingTop: 22 }}
                 onLayout={event => {
                   let { height } = event.nativeEvent.layout;
-                  !!height && setContentHeight(height + (Platform.OS === 'ios' ? 16 : 0));
+                  !!height && setContentHeight(height + (Platform.OS === 'ios' ? 16 : -16));
                 }}>
                 {renderTitle()}
                 {children}
 
                 {footer}
-                {isUseSafeAreaView && <SafeAreaView edges={['bottom']} />}
+                {isUseSafeAreaView && <SafeAreaView edges={['bottom']} style={{ marginBottom: theme.margin }} />}
               </View>
             </ModalBaseV2>
           </Portal>

diff --git a/src/screens/Confirmations/index.tsx b/src/screens/Confirmations/index.tsx
@@ -13,7 +13,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { RootStackParamList } from 'routes/index';
 import { ConfirmationType } from 'stores/base/RequestState';
 import useConfirmationsInfo from 'hooks/screen/Confirmation/useConfirmationsInfo';
-import { KeyboardAvoidingView, Platform, SafeAreaView, StyleProp, View } from 'react-native';
+import { KeyboardAvoidingView, Platform, StyleProp, View } from 'react-native';
 import { RootState } from 'stores/index';
 import { useSelector } from 'react-redux';
 import { ConfirmationDefinitions, ExtrinsicType } from '@subwallet/extension-base/background/KoniTypes';
@@ -35,10 +35,11 @@ import { STATUS_BAR_HEIGHT } from 'styles/sharedStyles';
 import i18n from 'utils/i18n/i18n';
 import { WalletConnectSessionRequest } from '@subwallet/extension-base/services/wallet-connect-service/types';
 import { ConnectWalletConnectConfirmation } from 'screens/Confirmations/variants/ConnectWalletConnectConfirmation';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 const getConfirmationPopupWrapperStyle = (isShowSeparator: boolean): StyleProp<any> => {
   return {
-    maxHeight: '100%',
+    height: isShowSeparator ? '80%' : '100%',
     width: '100%',
     backgroundColor: ColorMap.dark1,
     borderTopLeftRadius: 32,
@@ -237,7 +238,7 @@ export const Confirmations = () => {
             isFullHeight={confirmation && confirmation.item.isInternal}
           />
           {content}
-          <SafeAreaView />
+          <SafeAreaView edges={['bottom']} />
         </View>
       </View>
     </KeyboardAvoidingView>