diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.tsx b/app/components/UI/PermissionsSummary/PermissionsSummary.tsx index dd2dc42532b..93eb266c8ff 100644 --- a/app/components/UI/PermissionsSummary/PermissionsSummary.tsx +++ b/app/components/UI/PermissionsSummary/PermissionsSummary.tsx @@ -80,10 +80,15 @@ const PermissionsSummary = ({ const providerConfig = useSelector(selectProviderConfig); const chainId = useSelector(selectEvmChainId); - const hostname = useMemo( - () => new URL(currentPageInformation.url).hostname, - [currentPageInformation.url], - ); + const hostname = useMemo(() => { + try { + return new URL(currentPageInformation.url).hostname; + } catch (e) { + // Handle invalid URL, default to the original string or an empty string + return currentPageInformation.url || ''; + } + }, [currentPageInformation.url]); + const networkInfo = useNetworkInfo(hostname); // if network switch, we get the chain name from the customNetworkInformation diff --git a/app/components/Views/AccountConnect/AccountConnect.test.tsx b/app/components/Views/AccountConnect/AccountConnect.test.tsx index 1a4d3d78274..852c6a18a0c 100644 --- a/app/components/Views/AccountConnect/AccountConnect.test.tsx +++ b/app/components/Views/AccountConnect/AccountConnect.test.tsx @@ -171,65 +171,6 @@ describe('AccountConnect', () => { expect(toJSON()).toMatchSnapshot(); }); - describe('Renders different screens based on SDK URL status', () => { - it('should render SingleConnect screen when isSdkUrlUnknown is true', () => { - const mockPropsForUnknownUrl = { - route: { - params: { - hostInfo: { - metadata: { - id: 'mockId', - // Using an invalid/unknown format for origin - origin: '', - }, - permissions: { - eth_accounts: { - parentCapability: 'eth_accounts', - }, - }, - }, - permissionRequestId: 'test', - }, - }, - }; - - const { getByTestId } = renderWithProvider( - , - { state: mockInitialState }, - ); - - expect(getByTestId('connect-account-modal')).toBeDefined(); - }); - - it('should render PermissionsSummary screen when isSdkUrlUnknown is false', () => { - const mockPropsForKnownUrl = { - route: { - params: { - hostInfo: { - metadata: { - id: 'mockId', - // Using a valid URL format - origin: 'https://example.com', - }, - permissions: { - eth_accounts: { - parentCapability: 'eth_accounts', - }, - }, - }, - permissionRequestId: 'test', - }, - }, - }; - - const { getByTestId } = renderWithProvider( - , - { state: mockInitialState }, - ); - - expect(getByTestId('permission-summary-container')).toBeDefined(); - }); - }); describe('AccountConnectMultiSelector handlers', () => { it('invokes onPrimaryActionButtonPress property and renders permissions summary', async () => { diff --git a/app/components/Views/AccountConnect/AccountConnect.tsx b/app/components/Views/AccountConnect/AccountConnect.tsx index b7ae1780b57..b7734009c1a 100644 --- a/app/components/Views/AccountConnect/AccountConnect.tsx +++ b/app/components/Views/AccountConnect/AccountConnect.tsx @@ -31,7 +31,6 @@ import { selectPreviouslySelectedEvmAccount, selectSelectedInternalAccountFormattedAddress, } from '../../../selectors/accountsController'; -import { isDefaultAccountName } from '../../../util/ENSUtils'; import Logger from '../../../util/Logger'; import { getAddressAccountType, @@ -43,12 +42,15 @@ import { prefixUrlWithProtocol, } from '../../../util/browser'; import { getActiveTabUrl } from '../../../util/transactions'; -import { Account, useAccounts } from '../../hooks/useAccounts'; +import { useAccounts } from '../../hooks/useAccounts'; // Internal dependencies. import { PermissionsRequest } from '@metamask/permission-controller'; -import { ImageURISource, ImageSourcePropType, StyleSheet } from 'react-native'; +import { ImageSourcePropType, StyleSheet } from 'react-native'; import URLParse from 'url-parse'; +import { AvatarSize } from '../../../component-library/components/Avatars/Avatar'; +import PermissionsSummary from '../../../components/UI/PermissionsSummary'; +import { PermissionsSummaryProps } from '../../../components/UI/PermissionsSummary/PermissionsSummary.types'; import PhishingModal from '../../../components/UI/PhishingModal'; import { useMetrics } from '../../../components/hooks/useMetrics'; import Routes from '../../../constants/navigation/Routes'; @@ -58,33 +60,29 @@ import { MM_PHISH_DETECT_URL, } from '../../../constants/urls'; import AppConstants from '../../../core/AppConstants'; +import { getFormattedAddressFromInternalAccount } from '../../../core/Multichain/utils'; +import { CaveatTypes } from '../../../core/Permissions/constants'; +import { PermissionKeys } from '../../../core/Permissions/specifications'; import SDKConnect from '../../../core/SDKConnect/SDKConnect'; import DevLogger from '../../../core/SDKConnect/utils/DevLogger'; +import { isUUID } from '../../../core/SDKConnect/utils/isUUID'; import { RootState } from '../../../reducers'; +import { selectIsEvmNetworkSelected } from '../../../selectors/multichainNetworkController'; +import { selectEvmNetworkConfigurationsByChainId } from '../../../selectors/networkController'; +import { useNetworkInfo } from '../../../selectors/selectedNetworkController'; import { trackDappViewedEvent } from '../../../util/metrics'; +import { getNetworkImageSource } from '../../../util/networks'; +import { getPhishingTestResult } from '../../../util/phishingDetection'; import { useTheme } from '../../../util/theme'; import useFavicon from '../../hooks/useFavicon/useFavicon'; +import useOriginSource from '../../hooks/useOriginSource'; +import NetworkConnectMultiSelector from '../NetworkConnect/NetworkConnectMultiSelector'; import { AccountConnectProps, AccountConnectScreens, } from './AccountConnect.types'; import AccountConnectMultiSelector from './AccountConnectMultiSelector'; -import AccountConnectSingle from './AccountConnectSingle'; import AccountConnectSingleSelector from './AccountConnectSingleSelector'; -import { PermissionsSummaryProps } from '../../../components/UI/PermissionsSummary/PermissionsSummary.types'; -import PermissionsSummary from '../../../components/UI/PermissionsSummary'; -import { getNetworkImageSource } from '../../../util/networks'; -import NetworkConnectMultiSelector from '../NetworkConnect/NetworkConnectMultiSelector'; -import { PermissionKeys } from '../../../core/Permissions/specifications'; -import { CaveatTypes } from '../../../core/Permissions/constants'; -import { useNetworkInfo } from '../../../selectors/selectedNetworkController'; -import { AvatarSize } from '../../../component-library/components/Avatars/Avatar'; -import { selectEvmNetworkConfigurationsByChainId } from '../../../selectors/networkController'; -import { isUUID } from '../../../core/SDKConnect/utils/isUUID'; -import useOriginSource from '../../hooks/useOriginSource'; -import { selectIsEvmNetworkSelected } from '../../../selectors/multichainNetworkController'; -import { getPhishingTestResult } from '../../../util/phishingDetection'; -import { getFormattedAddressFromInternalAccount } from '../../../core/Multichain/utils'; const createStyles = () => StyleSheet.create({ @@ -173,11 +171,8 @@ const AccountConnect = (props: AccountConnectProps) => { const isOriginWalletConnect = !isOriginMMSDKRemoteConn && wc2Metadata?.id && wc2Metadata?.id.length > 0; - const dappIconUrl = sdkConnection?.originatorInfo?.icon; const dappUrl = sdkConnection?.originatorInfo?.url ?? ''; - const [isSdkUrlUnknown, setIsSdkUrlUnknown] = useState(false); - const { domainTitle, hostname } = useMemo(() => { let title = ''; let dappHostname = dappUrl || channelIdOrHostname; @@ -197,7 +192,6 @@ const AccountConnect = (props: AccountConnectProps) => { dappHostname = inappBrowserOrigin; } else { title = strings('sdk.unknown'); - setIsSdkUrlUnknown(true); } return { domainTitle: title, hostname: dappHostname }; @@ -311,25 +305,6 @@ const AccountConnect = (props: AccountConnectProps) => { inappBrowserOrigin || (!isChannelId ? channelIdOrHostname : ''), ); - const actualIcon = useMemo(() => { - // Priority to dappIconUrl - if (dappIconUrl) { - return { uri: dappIconUrl }; - } - - if (isOriginWalletConnect) { - // fetch icon from store - return { uri: wc2Metadata?.icon ?? '' }; - } - - const favicon = faviconSource as ImageURISource; - if ('uri' in favicon) { - return faviconSource; - } - - return { uri: '' }; - }, [dappIconUrl, wc2Metadata, faviconSource, isOriginWalletConnect]); - const secureIcon = useMemo( () => (getUrlObj(hostname) as URLParse).protocol === 'https:' @@ -548,8 +523,17 @@ const AccountConnect = (props: AccountConnectProps) => { [networkConfigurations, setScreen], ); - const hideSheet = (callback?: () => void) => - sheetRef?.current?.onCloseBottomSheet?.(callback); + const hideSheet = useCallback( + (callback?: () => void) => + sheetRef?.current?.onCloseBottomSheet?.(callback), + [sheetRef], + ); + + const handleConfirm = useCallback(async () => { + hideSheet(); + await handleUpdateNetworkPermissions(); + await handleConnect(); + }, [handleUpdateNetworkPermissions, hideSheet, handleConnect]); /** * User intent is set on AccountConnectSingle, @@ -566,9 +550,7 @@ const AccountConnect = (props: AccountConnectProps) => { const handleUserActions = (action: USER_INTENT) => { switch (action) { case USER_INTENT.Confirm: { - handleConnect(); - handleUpdateNetworkPermissions(); - hideSheet(); + handleConfirm(); break; } case USER_INTENT.Create: { @@ -622,62 +604,20 @@ const AccountConnect = (props: AccountConnectProps) => { sheetRef, cancelPermissionRequest, permissionRequestId, + hideSheet, handleCreateAccount, handleConnect, + handleConfirm, trackEvent, handleUpdateNetworkPermissions, createEventBuilder, ]); - const handleSheetDismiss = () => { + const handleSheetDismiss = useCallback(() => { if (!permissionRequestId || userIntent !== USER_INTENT.None) return; cancelPermissionRequest(permissionRequestId); - }; - - const renderSingleConnectScreen = useCallback(() => { - const selectedAddress = selectedAddresses[0]; - const selectedAccount = accounts.find( - (account) => - safeToChecksumAddress(account.address) === - safeToChecksumAddress(selectedAddress), - ); - const ensName = ensByAccountAddress[selectedAddress]; - const defaultSelectedAccount: Account | undefined = selectedAccount - ? { - ...selectedAccount, - name: - isDefaultAccountName(selectedAccount.name) && ensName - ? ensName - : selectedAccount.name, - } - : undefined; - return ( - - ); - }, [ - accounts, - ensByAccountAddress, - selectedAddresses, - isLoading, - setScreen, - setSelectedAddresses, - actualIcon, - secureIcon, - sdkConnection, - urlWithProtocol, - setUserIntent, - ]); + }, [cancelPermissionRequest, permissionRequestId, userIntent]); const renderPermissionsSummaryScreen = useCallback(() => { const permissionsSummaryProps: PermissionsSummaryProps = { @@ -832,9 +772,7 @@ const AccountConnect = (props: AccountConnectProps) => { const renderConnectScreens = useCallback(() => { switch (screen) { case AccountConnectScreens.SingleConnect: - return isSdkUrlUnknown - ? renderSingleConnectScreen() - : renderPermissionsSummaryScreen(); + return renderPermissionsSummaryScreen(); case AccountConnectScreens.SingleConnectSelector: return renderSingleConnectSelectorScreen(); case AccountConnectScreens.MultiConnectSelector: @@ -844,8 +782,6 @@ const AccountConnect = (props: AccountConnectProps) => { } }, [ screen, - isSdkUrlUnknown, - renderSingleConnectScreen, renderPermissionsSummaryScreen, renderSingleConnectSelectorScreen, renderMultiConnectSelectorScreen,