Merge pull request #946 from Koniverse/issue-941

[Issue-941]: Fix bug related to WalletConnect feature
Koniverse · Aug 16, 2023 · b03d663 · b03d663
2 parents e17b2a3 + 53c11d3
commit b03d663
Show file tree

Hide file tree

Showing 19 changed files with 110 additions and 49 deletions.
diff --git a/src/AppNavigator.tsx b/src/AppNavigator.tsx
@@ -54,7 +54,7 @@ import { AddProvider } from 'screens/AddProvider';
 import TransactionScreen from 'screens/Transaction/TransactionScreen';
 import SendNFT from 'screens/Transaction/NFT';
 import changeNavigationBarColor from 'react-native-navigation-bar-color';
-import { Platform, StatusBar } from 'react-native';
+import { Keyboard, Platform, StatusBar } from 'react-native';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { Home } from 'screens/Home';
 import { deviceWidth } from 'constants/index';
@@ -170,8 +170,8 @@ const AppNavigator = ({ isAppReady }: Props) => {
     if (hasConfirmations && currentRoute && amount) {
       if (currentRoute.name !== 'Confirmations' && amount) {
         if (!['CreateAccount', 'CreatePassword', 'Login', 'UnlockModal'].includes(currentRoute.name) && amount) {
-          appModalContext.hideConfirmModal();
-          setTimeout(() => navigationRef.current?.navigate('Confirmations'), 1000);
+          Keyboard.dismiss();
+          navigationRef.current?.navigate('Confirmations');
         }
       }
     }

diff --git a/src/AppNew.tsx b/src/AppNew.tsx
@@ -170,23 +170,23 @@ export const AppNew = () => {
                 <ExternalRequestContextProvider>
                   <QrSignerContextProvider>
                     <ScannerContextProvider>
-                      <AppModalContextProvider>
-                        <GestureHandlerRootView
-                          style={{
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            bottom: 0,
-                            right: 0,
-                            width: '100%',
-                            height: '100%',
-                            zIndex: 9999,
-                          }}>
-                          <PortalProvider>
+                      <GestureHandlerRootView
+                        style={{
+                          position: 'absolute',
+                          top: 0,
+                          left: 0,
+                          bottom: 0,
+                          right: 0,
+                          width: '100%',
+                          height: '100%',
+                          zIndex: 9999,
+                        }}>
+                        <PortalProvider>
+                          <AppModalContextProvider>
                             <AppNavigator isAppReady={isAppReady} />
-                          </PortalProvider>
-                        </GestureHandlerRootView>
-                      </AppModalContextProvider>
+                          </AppModalContextProvider>
+                        </PortalProvider>
+                      </GestureHandlerRootView>
                     </ScannerContextProvider>
                   </QrSignerContextProvider>
                 </ExternalRequestContextProvider>

diff --git a/src/components/Field/Password.tsx b/src/components/Field/Password.tsx
@@ -104,9 +104,11 @@ export const PasswordField = forwardRef((passwordFieldProps: Props, ref: React.R
         </View>
       </View>
 
-      <View style={{ gap: 8 }}>
+      <View style={{ marginTop: 8 }}>
         {!!(errorMessages && errorMessages.length) &&
-          errorMessages.map((message, index) => <Warning key={index} isDanger message={message} />)}
+          errorMessages.map((message, index) => (
+            <Warning style={{ marginBottom: 8 }} key={index} isDanger message={message} />
+          ))}
       </View>
     </>
   );
@@ -119,7 +121,6 @@ function createStyle(theme: ThemeTypes, hasLabel: boolean, isValid: boolean, rea
       backgroundColor: theme.colorBgSecondary,
       width: '100%',
       position: 'relative',
-      marginBottom: 8,
       height: hasLabel ? 72 : 48,
     },
     inputLabel: {

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

diff --git a/src/components/ScreenContainer.tsx b/src/components/ScreenContainer.tsx
@@ -40,7 +40,8 @@ export const ScreenContainer = ({
         colors={backgroundColor ? [backgroundColor, backgroundColor] : gradientBackground}
         style={styles.gradientWrapper}
       />
-      <SafeAreaView style={[statusBarStyle, { marginTop: DeviceInfo.hasNotch() ? 0 : 8 }]}>
+      <SafeAreaView
+        style={[statusBarStyle, { marginTop: DeviceInfo.hasNotch() ? 0 : Platform.OS === 'android' ? 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/ConnectionItem.tsx b/src/components/WalletConnect/ConnectionItem.tsx
@@ -60,12 +60,13 @@ export const ConnectionItem = ({ session, onPress }: Props) => {
         }}
         leftItem={<Image src={getImageSource(currentDomain)} shape={'circle'} style={{ width: 28, height: 28 }} />}
         middleItem={
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, justifyContent: 'space-between' }}>
-            <Typography.Text ellipsis size={'md'} style={{ ...FontSemiBold, color: theme.colorWhite, maxWidth: 96 }}>
+          <View
+            style={{ flexDirection: 'row', alignItems: 'center', gap: 8, justifyContent: 'space-between', flex: 1 }}>
+            <Typography.Text ellipsis size={'md'} style={{ ...FontSemiBold, color: theme.colorWhite, flex: 1 }}>
               {dAppInfo.name}
             </Typography.Text>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
-              <Typography.Text ellipsis style={{ ...FontMedium, color: theme.colorTextTertiary, maxWidth: 132 }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16, justifyContent: 'flex-end', flex: 1 }}>
+              <Typography.Text ellipsis style={{ ...FontMedium, color: theme.colorTextTertiary, maxWidth: '80%' }}>
                 {currentDomain}
               </Typography.Text>
               <Typography.Text size={'md'} style={{ ...FontSemiBold, color: theme.colorWhite }}>

diff --git a/src/components/WalletConnect/Network/WCNetworkAvatarGroup.tsx b/src/components/WalletConnect/Network/WCNetworkAvatarGroup.tsx
@@ -69,7 +69,23 @@ export const WCNetworkAvatarGroup = ({ networks }: Props) => {
           </View>
         );
       })}
-      {countMore > 0 && <Typography.Text>+{countMore}</Typography.Text>}
+      {countMore > 0 && (
+        <Typography.Text
+          style={{
+            color: theme.colorWhite,
+            ...FontBold,
+            position: 'absolute',
+            right: 4,
+            bottom: 0,
+            textAlign: 'center',
+            shadowOpacity: 1,
+            shadowColor: '#000000',
+            shadowRadius: 5,
+          }}
+          size={'sm'}>
+          +{countMore}
+        </Typography.Text>
+      )}
     </View>
   );
 };

diff --git a/src/components/common/Account/AccountActionButton/index.tsx b/src/components/common/Account/AccountActionButton/index.tsx
@@ -35,9 +35,13 @@ const AccountActionButton = ({ item }: Props) => {
       onPress={item.onPress}
       style={{ marginBottom: 8 }}
       contentAlign={'left'}>
-      <View>
-        <Text style={_style.titleStyle}>{item.title}</Text>
-        <Text style={_style.subTitleStyle}>{item.subTitle}</Text>
+      <View style={{ flex: 1 }}>
+        <Text numberOfLines={1} style={_style.titleStyle}>
+          {item.title}
+        </Text>
+        <Text numberOfLines={1} style={_style.subTitleStyle}>
+          {item.subTitle}
+        </Text>
       </View>
     </Button>
   );

diff --git a/src/components/common/Account/AccountActionButton/style/index.ts b/src/components/common/Account/AccountActionButton/style/index.ts
@@ -15,11 +15,13 @@ export default (theme: ThemeTypes) =>
       color: theme.colorTextLight1,
       ...FontSemiBold,
       paddingBottom: theme.paddingXXS,
+      maxWidth: '100%',
     },
     subTitleStyle: {
       fontSize: theme.fontSize,
       lineHeight: theme.fontSize * theme.lineHeight,
       color: theme.colorTextLight3,
       ...FontSemiBold,
+      maxWidth: '100%',
     },
   });
diff --git a/src/components/common/AvatarGroup/index.tsx b/src/components/common/AvatarGroup/index.tsx
@@ -40,11 +40,15 @@ const AvatarGroup = ({ addresses: _addresses, avatarSize: _avatarSize }: Props)
   }, [noAllAccount]);
 
   const getAvatarStyle = useCallback(
-    (index: number) => {
+    (index: number, arrLength: number) => {
       let avatarStyles: StyleProp<ViewStyle> = [_style.avatarContent];
 
       if (index === 0) {
-        avatarStyles.push({ marginLeft: 0, opacity: 0.5 });
+        if (index === arrLength - 1) {
+          avatarStyles.push({ marginLeft: 0, opacity: 1 });
+        } else {
+          avatarStyles.push({ marginLeft: 0, opacity: 0.5 });
+        }
       }
 
       if (index === 2) {
@@ -64,7 +68,7 @@ const AvatarGroup = ({ addresses: _addresses, avatarSize: _avatarSize }: Props)
     <View style={[_style.container, countMore > 0 && _style.mlStrong]}>
       {noAllAccount.slice(0, 3).map((account, index) => {
         return (
-          <View key={index} style={getAvatarStyle(index)}>
+          <View key={index} style={getAvatarStyle(index, noAllAccount.length)}>
             <Avatar
               size={avatarSize}
               value={account}

diff --git a/src/components/common/Modal/ConfirmModal/index.tsx b/src/components/common/Modal/ConfirmModal/index.tsx
@@ -7,7 +7,6 @@ import { VoidFunction } from 'types/index';
 import i18n from 'utils/i18n/i18n';
 import createStyle from './styles';
 import { noop } from 'utils/function';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface Props {
   message: string;
@@ -28,7 +27,6 @@ const ConfirmModal: React.FC<Props> = ({
 }: Props) => {
   const theme = useSubWalletTheme().swThemes;
   const styles = useMemo(() => createStyle(theme), [theme]);
-  const insets = useSafeAreaInsets();
 
   return (
     <SwModal
@@ -37,9 +35,10 @@ const ConfirmModal: React.FC<Props> = ({
       modalVisible={visible}
       modalTitle={title}
       titleTextAlign="center"
+      isUseModalV2
       footer={
         <>
-          <View style={[styles.footerModalStyle, { marginBottom: insets.bottom + 16 }]}>
+          <View style={styles.footerModalStyle}>
             <Button type="secondary" style={{ flex: 1, marginRight: 12 }} onPress={onCancelModal}>
               {i18n.common.cancel}
             </Button>

diff --git a/src/components/common/Modal/ConfirmModal/styles/index.ts b/src/components/common/Modal/ConfirmModal/styles/index.ts
@@ -1,6 +1,6 @@
 import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
 import { ThemeTypes } from 'styles/themes';
-import { ContainerHorizontalPadding, FontMedium, FontSemiBold } from 'styles/sharedStyles';
+import { FontMedium, FontSemiBold } from 'styles/sharedStyles';
 
 export interface ModalStyle {
   container: ViewStyle;
@@ -15,7 +15,7 @@ export default (theme: ThemeTypes) =>
     footerModalStyle: {
       width: '100%',
       flexDirection: 'row',
-      ...ContainerHorizontalPadding,
+      marginTop: theme.margin,
     },
     deleteModalConfirmationStyle: {
       fontSize: theme.fontSizeLG,

diff --git a/src/components/common/Modal/DeleteModal/styles/index.ts b/src/components/common/Modal/DeleteModal/styles/index.ts
@@ -1,6 +1,6 @@
 import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
 import { ThemeTypes } from 'styles/themes';
-import { ContainerHorizontalPadding, FontMedium, FontSemiBold, MarginBottomForSubmitButton } from 'styles/sharedStyles';
+import { FontMedium, FontSemiBold, MarginBottomForSubmitButton } from 'styles/sharedStyles';
 
 export interface ModalStyle {
   container: ViewStyle;
@@ -14,7 +14,6 @@ export default (theme: ThemeTypes) =>
     container: { width: '100%' },
     footerModalStyle: {
       width: '100%',
-      ...ContainerHorizontalPadding,
       ...MarginBottomForSubmitButton,
       paddingTop: theme.paddingXS,
     },

diff --git a/src/components/design-system-ui/button/index.tsx b/src/components/design-system-ui/button/index.tsx
@@ -128,10 +128,10 @@ const Button: React.FC<ButtonProps> = props => {
       onPressOut={_onPressOut}
       onShowUnderlay={_onShowUnderlay}
       onHideUnderlay={_onHideUnderlay}>
-      <View style={[_style.container, { paddingVertical: 16 }]}>
+      <View style={[_style.container, { maxWidth: '100%', paddingHorizontal: theme.padding - 4 }]}>
         {iconNode}
         {typeof children === 'string' ? (
-          <Text numberOfLines={1} style={textStyle}>
+          <Text numberOfLines={1} style={[textStyle]}>
             {children}
           </Text>
         ) : (

diff --git a/src/hooks/screen/Transaction/useTransactionV2.ts b/src/hooks/screen/Transaction/useTransactionV2.ts
@@ -118,8 +118,8 @@ export const useTransaction = <T extends TransactionFormValues = TransactionForm
               appModalContext.hideConfirmModal();
             },
             onCompleteModal: () => {
-              appModalContext.hideConfirmModal();
-              setTimeout(() => turnOnChain(chain), 200);
+              turnOnChain(chain);
+              setTimeout(() => appModalContext.hideConfirmModal(), 300);
             },
             messageIcon: chain,
           });

diff --git a/src/screens/Home/Browser/BrowserTab.tsx b/src/screens/Home/Browser/BrowserTab.tsx
@@ -43,6 +43,9 @@ import createStylesheet from './styles/BrowserTab';
 import TabIcon from 'screens/Home/Browser/Shared/TabIcon';
 import { RootState } from 'stores/index';
 import { useSelector } from 'react-redux';
+import urlParse from 'url-parse';
+import { connectWalletConnect } from 'utils/walletConnect';
+import { useToast } from 'react-native-toast-notifications';
 
 export interface BrowserTabRef {
   goToSite: (siteInfo: SiteInfo) => void;
@@ -148,6 +151,7 @@ const Component = ({ tabId, onOpenBrowserTabs, connectionTrigger }: Props, ref:
   const hostname = siteUrl.current ? getHostName(siteUrl.current) : null;
   const isNetConnected = useContext(WebRunnerContext).isNetConnected;
   const isWebviewReady = !!(initWebViewSource && injectedScripts);
+  const toast = useToast();
 
   const clearCurrentBrowserSv = () => {
     browserSv.current?.onDisconnect();
@@ -413,6 +417,34 @@ const Component = ({ tabId, onOpenBrowserTabs, connectionTrigger }: Props, ref:
       });
       return false;
     }
+    const urlParsed = new urlParse(url);
+
+    if (url.startsWith('wc:')) {
+      if (urlParsed.query.startsWith('?requestId')) {
+        return false;
+      }
+      connectWalletConnect(url, toast);
+      return false;
+    }
+
+    if (urlParsed.href.includes('wc?uri=wc')) {
+      Linking.canOpenURL(url)
+        .then(supported => {
+          if (supported) {
+            return Linking.openURL(url);
+          }
+          console.warn(`Can't open url: ${url}`);
+          return null;
+        })
+        .catch(e => {
+          console.warn(`Error opening URL: ${e}`);
+        });
+      return false;
+    }
+
+    if (urlParsed.href.startsWith('itms-appss://')) {
+      return false;
+    }
 
     return true;
   };

diff --git a/src/screens/MasterPassword/CreateMasterPassword/index.tsx b/src/screens/MasterPassword/CreateMasterPassword/index.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { ContainerWithSubHeader } from 'components/ContainerWithSubHeader';
-import { View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { CheckCircle, Info } from 'phosphor-react-native';
 import { Button, Icon, Typography } from 'components/design-system-ui';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
@@ -116,7 +116,7 @@ const CreateMasterPassword = ({
       disableRightButton={isBusy}
       title={i18n.header.createAPassword}
       style={{ width: '100%' }}>
-      <View style={_style.bodyWrapper}>
+      <ScrollView style={_style.bodyWrapper} keyboardShouldPersistTaps={'handled'} showsVerticalScrollIndicator={false}>
         <Typography.Text style={_style.instructionTextStyle}>
           {i18n.createPassword.createPasswordMessage}
         </Typography.Text>
@@ -149,7 +149,7 @@ const CreateMasterPassword = ({
           description={i18n.warning.warningPasswordMessage}
           title={i18n.warning.warningPasswordTitle}
         />
-      </View>
+      </ScrollView>
 
       <View style={_style.footerAreaStyle}>
         <Button

diff --git a/src/screens/MasterPassword/CreateMasterPassword/style/index.ts b/src/screens/MasterPassword/CreateMasterPassword/style/index.ts
@@ -21,7 +21,7 @@ export default (theme: ThemeTypes) =>
       paddingBottom: theme.paddingLG,
     },
     footerAreaStyle: {
-      marginTop: theme.marginXS,
+      marginTop: theme.margin,
       marginHorizontal: theme.margin,
       ...MarginBottomForSubmitButton,
     },

diff --git a/src/screens/Transaction/SendFundV2/Amount.tsx b/src/screens/Transaction/SendFundV2/Amount.tsx
@@ -152,6 +152,7 @@ const Component = (props: InputAmountProps, ref: ForwardedRef<any>) => {
         onChangeText={_onInputChange}
         defaultValue={inputValue}
         maxLength={getMaxLengthText(inputValue)}
+        autoFocus={true}
         {...inputProps}
         inputStyle={[stylesheet.input, inputStyle]}
         containerStyle={[stylesheet.container, containerStyle]}