Skip to content

Commit f380121

Browse files
committed
refactor: clean up imports and optimize AccountConnect component
- Removed unused imports and consolidated necessary ones for better readability. - Refactored the `hideSheet` and `handleConfirm` functions to use `useCallback` for performance optimization. - Simplified the rendering logic in `renderConnectScreens` by removing unnecessary conditions. - Enhanced overall code structure for improved maintainability.
1 parent a6c46e6 commit f380121

File tree

1 file changed

+33
-97
lines changed

1 file changed

+33
-97
lines changed

app/components/Views/AccountConnect/AccountConnect.tsx

+33-97
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ import {
3131
selectPreviouslySelectedEvmAccount,
3232
selectSelectedInternalAccountFormattedAddress,
3333
} from '../../../selectors/accountsController';
34-
import { isDefaultAccountName } from '../../../util/ENSUtils';
3534
import Logger from '../../../util/Logger';
3635
import {
3736
getAddressAccountType,
@@ -43,12 +42,15 @@ import {
4342
prefixUrlWithProtocol,
4443
} from '../../../util/browser';
4544
import { getActiveTabUrl } from '../../../util/transactions';
46-
import { Account, useAccounts } from '../../hooks/useAccounts';
45+
import { useAccounts } from '../../hooks/useAccounts';
4746

4847
// Internal dependencies.
4948
import { PermissionsRequest } from '@metamask/permission-controller';
50-
import { ImageURISource, ImageSourcePropType, StyleSheet } from 'react-native';
49+
import { ImageSourcePropType, StyleSheet } from 'react-native';
5150
import URLParse from 'url-parse';
51+
import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
52+
import PermissionsSummary from '../../../components/UI/PermissionsSummary';
53+
import { PermissionsSummaryProps } from '../../../components/UI/PermissionsSummary/PermissionsSummary.types';
5254
import PhishingModal from '../../../components/UI/PhishingModal';
5355
import { useMetrics } from '../../../components/hooks/useMetrics';
5456
import Routes from '../../../constants/navigation/Routes';
@@ -58,33 +60,29 @@ import {
5860
MM_PHISH_DETECT_URL,
5961
} from '../../../constants/urls';
6062
import AppConstants from '../../../core/AppConstants';
63+
import { getFormattedAddressFromInternalAccount } from '../../../core/Multichain/utils';
64+
import { CaveatTypes } from '../../../core/Permissions/constants';
65+
import { PermissionKeys } from '../../../core/Permissions/specifications';
6166
import SDKConnect from '../../../core/SDKConnect/SDKConnect';
6267
import DevLogger from '../../../core/SDKConnect/utils/DevLogger';
68+
import { isUUID } from '../../../core/SDKConnect/utils/isUUID';
6369
import { RootState } from '../../../reducers';
70+
import { selectIsEvmNetworkSelected } from '../../../selectors/multichainNetworkController';
71+
import { selectEvmNetworkConfigurationsByChainId } from '../../../selectors/networkController';
72+
import { useNetworkInfo } from '../../../selectors/selectedNetworkController';
6473
import { trackDappViewedEvent } from '../../../util/metrics';
74+
import { getNetworkImageSource } from '../../../util/networks';
75+
import { getPhishingTestResult } from '../../../util/phishingDetection';
6576
import { useTheme } from '../../../util/theme';
6677
import useFavicon from '../../hooks/useFavicon/useFavicon';
78+
import useOriginSource from '../../hooks/useOriginSource';
79+
import NetworkConnectMultiSelector from '../NetworkConnect/NetworkConnectMultiSelector';
6780
import {
6881
AccountConnectProps,
6982
AccountConnectScreens,
7083
} from './AccountConnect.types';
7184
import AccountConnectMultiSelector from './AccountConnectMultiSelector';
72-
import AccountConnectSingle from './AccountConnectSingle';
7385
import AccountConnectSingleSelector from './AccountConnectSingleSelector';
74-
import { PermissionsSummaryProps } from '../../../components/UI/PermissionsSummary/PermissionsSummary.types';
75-
import PermissionsSummary from '../../../components/UI/PermissionsSummary';
76-
import { getNetworkImageSource } from '../../../util/networks';
77-
import NetworkConnectMultiSelector from '../NetworkConnect/NetworkConnectMultiSelector';
78-
import { PermissionKeys } from '../../../core/Permissions/specifications';
79-
import { CaveatTypes } from '../../../core/Permissions/constants';
80-
import { useNetworkInfo } from '../../../selectors/selectedNetworkController';
81-
import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
82-
import { selectEvmNetworkConfigurationsByChainId } from '../../../selectors/networkController';
83-
import { isUUID } from '../../../core/SDKConnect/utils/isUUID';
84-
import useOriginSource from '../../hooks/useOriginSource';
85-
import { selectIsEvmNetworkSelected } from '../../../selectors/multichainNetworkController';
86-
import { getPhishingTestResult } from '../../../util/phishingDetection';
87-
import { getFormattedAddressFromInternalAccount } from '../../../core/Multichain/utils';
8886

8987
const createStyles = () =>
9088
StyleSheet.create({
@@ -173,11 +171,8 @@ const AccountConnect = (props: AccountConnectProps) => {
173171
const isOriginWalletConnect =
174172
!isOriginMMSDKRemoteConn && wc2Metadata?.id && wc2Metadata?.id.length > 0;
175173

176-
const dappIconUrl = sdkConnection?.originatorInfo?.icon;
177174
const dappUrl = sdkConnection?.originatorInfo?.url ?? '';
178175

179-
const [isSdkUrlUnknown, setIsSdkUrlUnknown] = useState(false);
180-
181176
const { domainTitle, hostname } = useMemo(() => {
182177
let title = '';
183178
let dappHostname = dappUrl || channelIdOrHostname;
@@ -197,7 +192,6 @@ const AccountConnect = (props: AccountConnectProps) => {
197192
dappHostname = inappBrowserOrigin;
198193
} else {
199194
title = strings('sdk.unknown');
200-
setIsSdkUrlUnknown(true);
201195
}
202196

203197
return { domainTitle: title, hostname: dappHostname };
@@ -311,25 +305,6 @@ const AccountConnect = (props: AccountConnectProps) => {
311305
inappBrowserOrigin || (!isChannelId ? channelIdOrHostname : ''),
312306
);
313307

314-
const actualIcon = useMemo(() => {
315-
// Priority to dappIconUrl
316-
if (dappIconUrl) {
317-
return { uri: dappIconUrl };
318-
}
319-
320-
if (isOriginWalletConnect) {
321-
// fetch icon from store
322-
return { uri: wc2Metadata?.icon ?? '' };
323-
}
324-
325-
const favicon = faviconSource as ImageURISource;
326-
if ('uri' in favicon) {
327-
return faviconSource;
328-
}
329-
330-
return { uri: '' };
331-
}, [dappIconUrl, wc2Metadata, faviconSource, isOriginWalletConnect]);
332-
333308
const secureIcon = useMemo(
334309
() =>
335310
(getUrlObj(hostname) as URLParse<string>).protocol === 'https:'
@@ -548,8 +523,17 @@ const AccountConnect = (props: AccountConnectProps) => {
548523
[networkConfigurations, setScreen],
549524
);
550525

551-
const hideSheet = (callback?: () => void) =>
552-
sheetRef?.current?.onCloseBottomSheet?.(callback);
526+
const hideSheet = useCallback(
527+
(callback?: () => void) =>
528+
sheetRef?.current?.onCloseBottomSheet?.(callback),
529+
[sheetRef],
530+
);
531+
532+
const handleConfirm = useCallback(async () => {
533+
hideSheet();
534+
await handleUpdateNetworkPermissions();
535+
await handleConnect();
536+
}, [handleUpdateNetworkPermissions, hideSheet, handleConnect]);
553537

554538
/**
555539
* User intent is set on AccountConnectSingle,
@@ -566,9 +550,7 @@ const AccountConnect = (props: AccountConnectProps) => {
566550
const handleUserActions = (action: USER_INTENT) => {
567551
switch (action) {
568552
case USER_INTENT.Confirm: {
569-
handleConnect();
570-
handleUpdateNetworkPermissions();
571-
hideSheet();
553+
handleConfirm();
572554
break;
573555
}
574556
case USER_INTENT.Create: {
@@ -622,62 +604,20 @@ const AccountConnect = (props: AccountConnectProps) => {
622604
sheetRef,
623605
cancelPermissionRequest,
624606
permissionRequestId,
607+
hideSheet,
625608
handleCreateAccount,
626609
handleConnect,
610+
handleConfirm,
627611
trackEvent,
628612
handleUpdateNetworkPermissions,
629613
createEventBuilder,
630614
]);
631615

632-
const handleSheetDismiss = () => {
616+
const handleSheetDismiss = useCallback(() => {
633617
if (!permissionRequestId || userIntent !== USER_INTENT.None) return;
634618

635619
cancelPermissionRequest(permissionRequestId);
636-
};
637-
638-
const renderSingleConnectScreen = useCallback(() => {
639-
const selectedAddress = selectedAddresses[0];
640-
const selectedAccount = accounts.find(
641-
(account) =>
642-
safeToChecksumAddress(account.address) ===
643-
safeToChecksumAddress(selectedAddress),
644-
);
645-
const ensName = ensByAccountAddress[selectedAddress];
646-
const defaultSelectedAccount: Account | undefined = selectedAccount
647-
? {
648-
...selectedAccount,
649-
name:
650-
isDefaultAccountName(selectedAccount.name) && ensName
651-
? ensName
652-
: selectedAccount.name,
653-
}
654-
: undefined;
655-
return (
656-
<AccountConnectSingle
657-
onSetSelectedAddresses={setSelectedAddresses}
658-
connection={sdkConnection}
659-
onSetScreen={setScreen}
660-
onUserAction={setUserIntent}
661-
defaultSelectedAccount={defaultSelectedAccount}
662-
isLoading={isLoading}
663-
favicon={actualIcon}
664-
secureIcon={secureIcon}
665-
urlWithProtocol={urlWithProtocol}
666-
/>
667-
);
668-
}, [
669-
accounts,
670-
ensByAccountAddress,
671-
selectedAddresses,
672-
isLoading,
673-
setScreen,
674-
setSelectedAddresses,
675-
actualIcon,
676-
secureIcon,
677-
sdkConnection,
678-
urlWithProtocol,
679-
setUserIntent,
680-
]);
620+
}, [cancelPermissionRequest, permissionRequestId, userIntent]);
681621

682622
const renderPermissionsSummaryScreen = useCallback(() => {
683623
const permissionsSummaryProps: PermissionsSummaryProps = {
@@ -832,9 +772,7 @@ const AccountConnect = (props: AccountConnectProps) => {
832772
const renderConnectScreens = useCallback(() => {
833773
switch (screen) {
834774
case AccountConnectScreens.SingleConnect:
835-
return isSdkUrlUnknown
836-
? renderSingleConnectScreen()
837-
: renderPermissionsSummaryScreen();
775+
return renderPermissionsSummaryScreen();
838776
case AccountConnectScreens.SingleConnectSelector:
839777
return renderSingleConnectSelectorScreen();
840778
case AccountConnectScreens.MultiConnectSelector:
@@ -844,8 +782,6 @@ const AccountConnect = (props: AccountConnectProps) => {
844782
}
845783
}, [
846784
screen,
847-
isSdkUrlUnknown,
848-
renderSingleConnectScreen,
849785
renderPermissionsSummaryScreen,
850786
renderSingleConnectSelectorScreen,
851787
renderMultiConnectSelectorScreen,

0 commit comments

Comments
 (0)