From 53c11d3b28a946a56cb78d264fe0693687dd5785 Mon Sep 17 00:00:00 2001 From: dominhquang Date: Mon, 14 Aug 2023 17:36:43 +0700 Subject: [PATCH] [Issue-941]: Fix bug related to WalletConnect feature --- src/AppNavigator.tsx | 6 ++-- src/AppNew.tsx | 32 +++++++++---------- src/components/Field/Password.tsx | 7 ++-- .../Modal/common/ValidatorSelector.tsx | 1 + src/components/ScreenContainer.tsx | 3 +- .../WalletConnect/ConnectionItem.tsx | 9 +++--- .../Network/WCNetworkAvatarGroup.tsx | 18 ++++++++++- .../Account/AccountActionButton/index.tsx | 10 ++++-- .../AccountActionButton/style/index.ts | 2 ++ src/components/common/AvatarGroup/index.tsx | 10 ++++-- .../common/Modal/ConfirmModal/index.tsx | 5 ++- .../common/Modal/ConfirmModal/styles/index.ts | 4 +-- .../common/Modal/DeleteModal/styles/index.ts | 3 +- .../design-system-ui/button/index.tsx | 4 +-- .../screen/Transaction/useTransactionV2.ts | 4 +-- src/screens/Home/Browser/BrowserTab.tsx | 32 +++++++++++++++++++ .../CreateMasterPassword/index.tsx | 6 ++-- .../CreateMasterPassword/style/index.ts | 2 +- src/screens/Transaction/SendFundV2/Amount.tsx | 1 + 19 files changed, 110 insertions(+), 49 deletions(-) diff --git a/src/AppNavigator.tsx b/src/AppNavigator.tsx index ff2bede23..b7b6b708b 100644 --- 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 index 837e889bc..4eab99e7f 100644 --- a/src/AppNew.tsx +++ b/src/AppNew.tsx @@ -170,23 +170,23 @@ export const AppNew = () => { - - - + + + - - - + + + diff --git a/src/components/Field/Password.tsx b/src/components/Field/Password.tsx index 75958f8fd..cc6aee5ce 100644 --- 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 - + {!!(errorMessages && errorMessages.length) && - errorMessages.map((message, index) => )} + errorMessages.map((message, index) => ( + + ))} ); @@ -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 index 8ba5c7f00..e8ad020ab 100644 --- a/src/components/Modal/common/ValidatorSelector.tsx +++ b/src/components/Modal/common/ValidatorSelector.tsx @@ -271,6 +271,7 @@ export const ValidatorSelector = ({ renderCustomItem={renderSortingItem}> { ); diff --git a/src/components/common/Account/AccountActionButton/style/index.ts b/src/components/common/Account/AccountActionButton/style/index.ts index ffc41cc42..b457bc422 100644 --- 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 index 91744d8d0..6e58aa2df 100644 --- 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 = [_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) 0 && _style.mlStrong]}> {noAllAccount.slice(0, 3).map((account, index) => { return ( - + = ({ }: Props) => { const theme = useSubWalletTheme().swThemes; const styles = useMemo(() => createStyle(theme), [theme]); - const insets = useSafeAreaInsets(); return ( = ({ modalVisible={visible} modalTitle={title} titleTextAlign="center" + isUseModalV2 footer={ <> - + diff --git a/src/components/common/Modal/ConfirmModal/styles/index.ts b/src/components/common/Modal/ConfirmModal/styles/index.ts index 0f784fa45..5b13e2dad 100644 --- 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 index 50463885e..652f81be3 100644 --- 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 index ef325648a..60c404df4 100644 --- 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 = props => { onPressOut={_onPressOut} onShowUnderlay={_onShowUnderlay} onHideUnderlay={_onHideUnderlay}> - + {iconNode} {typeof children === 'string' ? ( - + {children} ) : ( diff --git a/src/hooks/screen/Transaction/useTransactionV2.ts b/src/hooks/screen/Transaction/useTransactionV2.ts index d1818ce72..d51be6030 100644 --- a/src/hooks/screen/Transaction/useTransactionV2.ts +++ b/src/hooks/screen/Transaction/useTransactionV2.ts @@ -118,8 +118,8 @@ export const useTransaction = { - 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 index de2bdae7b..a87263eaf 100644 --- 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 index 8b9951555..930d4f23e 100644 --- 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%' }}> - + {i18n.createPassword.createPasswordMessage} @@ -149,7 +149,7 @@ const CreateMasterPassword = ({ description={i18n.warning.warningPasswordMessage} title={i18n.warning.warningPasswordTitle} /> - +