feat(4144): per-dapp-selected-networks

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx

@@ -169,7 +169,12 @@ const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => {
   return (
     <View style={styles.container}>
       {fromAddress && (
-        <AddressFrom asset={selectedAsset} from={fromAddress} origin={origin} />
+        <AddressFrom
+          chainId={transactionState?.chainId}
+          asset={selectedAsset}
+          from={fromAddress}
+          origin={origin}
+        />
       )}
       {existingToAddress === undefined && confusableCollection.length ? (
         <TouchableOpacity onPress={() => setShowWarningModal(true)}>

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.types.tsx

@@ -18,6 +18,7 @@ export interface Transaction {
   transactionFromName: string;
   selectedAsset: SelectedAsset;
   ensRecipient?: string;
+  chainId?: string;
 }
 
 export interface AccountFromToInfoCardProps {

app/components/UI/AccountFromToInfoCard/AddressFrom.tsx

@@ -9,17 +9,14 @@ import { BadgeVariant } from '../../../component-library/components/Badges/Badge
 import Text from '../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../component-library/hooks';
 import { selectAccountsByChainId } from '../../../selectors/accountTrackerController';
-import {
-  selectEvmNetworkImageSource,
-  selectEvmNetworkName,
-} from '../../../selectors/networkInfos';
 import {
   getLabelTextByAddress,
   renderAccountName,
 } from '../../../util/address';
 import useAddressBalance from '../../hooks/useAddressBalance/useAddressBalance';
 import stylesheet from './AddressFrom.styles';
 import { selectInternalAccounts } from '../../../selectors/accountsController';
+import { useNetworkInfo } from '../../../selectors/selectedNetworkController';
 
 interface Asset {
   isETH?: boolean;
@@ -37,25 +34,32 @@ interface AddressFromProps {
   dontWatchAsset?: boolean;
   from: string;
   origin?: string;
+  chainId?: string;
 }
 
 const AddressFrom = ({
   asset,
+  chainId,
   dontWatchAsset,
   from,
   origin,
 }: AddressFromProps) => {
   const [accountName, setAccountName] = useState('');
 
   const { styles } = useStyles(stylesheet, {});
-  const { addressBalance } = useAddressBalance(asset, from, dontWatchAsset);
+  const { addressBalance } = useAddressBalance(
+    asset,
+    from,
+    dontWatchAsset,
+    chainId,
+  );
 
   const accountsByChainId = useSelector(selectAccountsByChainId);
 
   const internalAccounts = useSelector(selectInternalAccounts);
   const activeAddress = toChecksumAddress(from);
 
-  const networkName = useSelector(selectEvmNetworkName);
+  const { networkName, networkImageSource } = useNetworkInfo(origin);
 
   const useBlockieIcon = useSelector(
     // TODO: Replace "any" with type
@@ -74,7 +78,7 @@ const AddressFrom = ({
     }
   }, [accountsByChainId, internalAccounts, activeAddress, origin]);
 
-  const networkImage = useSelector(selectEvmNetworkImageSource);
+  // const networkImage = useSelector(selectNetworkImageSource);
 
   const accountTypeLabel = getLabelTextByAddress(activeAddress);
 
@@ -95,7 +99,7 @@ const AddressFrom = ({
         badgeProps={{
           variant: BadgeVariant.Network,
           name: networkName,
-          imageSource: networkImage,
+          imageSource: networkImageSource,
         }}
         useBlockieIcon={useBlockieIcon}
       />

app/components/UI/Notification/TransactionNotification/index.js

@@ -25,7 +25,7 @@ import { collectibleContractsSelector } from '../../../../reducers/collectibles'
 import { useTheme } from '../../../../util/theme';
 import {
   selectChainId,
-  selectEvmTicker,
+  selectTickerByChainId,
 } from '../../../../selectors/networkController';
 import {
   selectConversionRate,
@@ -36,6 +36,7 @@ import { selectContractExchangeRates } from '../../../../selectors/tokenRatesCon
 import { selectAccounts } from '../../../../selectors/accountTrackerController';
 import { speedUpTransaction } from '../../../../util/transaction-controller';
 import { selectSelectedInternalAccountFormattedAddress } from '../../../../selectors/accountsController';
+import { selectCurrentTransactionMetadata } from '../../../../selectors/confirmTransaction';
 
 const WINDOW_WIDTH = Dimensions.get('window').width;
 const ACTION_CANCEL = 'cancel';
@@ -219,7 +220,9 @@ function TransactionNotification(props) {
       const tx = transactions.find(
         ({ id }) => id === currentNotification.transaction.id,
       );
+
       if (!tx) return;
+
       const {
         selectedAddress,
         ticker,
@@ -234,6 +237,7 @@ function TransactionNotification(props) {
         swapsTransactions,
         swapsTokens,
       } = props;
+
       const [transactionElement, transactionDetails] = await decodeTransaction({
         ...props,
         tx,
@@ -431,7 +435,7 @@ TransactionNotification.propTypes = {
   primaryCurrency: PropTypes.string,
 };
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
   const chainId = selectChainId(state);
 
   const {
@@ -445,11 +449,14 @@ const mapStateToProps = (state) => {
       chainId
     ] || [];
 
+  const tx = TransactionController.transactions.find(
+    ({ id }) => id === ownProps?.currentNotification.transaction.id,
+  );
   return {
     accounts: selectAccounts(state),
     selectedAddress: selectSelectedInternalAccountFormattedAddress(state),
     transactions: TransactionController.transactions,
-    ticker: selectEvmTicker(state),
+    ticker: selectTickerByChainId(state, tx.chainId),
     chainId,
     tokens: selectTokensByAddress(state),
     collectibleContracts: collectibleContractsSelector(state),

app/components/UI/PermissionsSummary/PermissionsSummary.tsx

@@ -39,7 +39,10 @@ import Routes from '../../../constants/navigation/Routes';
 import ButtonIcon, {
   ButtonIconSizes,
 } from '../../../component-library/components/Buttons/ButtonIcon';
-import { getNetworkImageSource } from '../../../util/networks';
+import {
+  getNetworkImageSource,
+  isPerDappSelectedNetworkEnabled,
+} from '../../../util/networks';
 import Engine from '../../../core/Engine';
 import { SDKSelectorsIDs } from '../../../../e2e/selectors/Settings/SDK.selectors';
 import { useSelector } from 'react-redux';
@@ -51,6 +54,12 @@ import { useNetworkInfo } from '../../../selectors/selectedNetworkController';
 import { ConnectedAccountsSelectorsIDs } from '../../../../e2e/selectors/Browser/ConnectedAccountModal.selectors';
 import { PermissionSummaryBottomSheetSelectorsIDs } from '../../../../e2e/selectors/Browser/PermissionSummaryBottomSheet.selectors';
 import { NetworkNonPemittedBottomSheetSelectorsIDs } from '../../../../e2e/selectors/Network/NetworkNonPemittedBottomSheet.selectors';
+import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrapper';
+import Badge, {
+  BadgeVariant,
+} from '../../../component-library/components/Badges/Badge';
+import AvatarFavicon from '../../../component-library/components/Avatars/Avatar/variants/AvatarFavicon';
+import AvatarToken from '../../../component-library/components/Avatars/Avatar/variants/AvatarToken';
 
 const PermissionsSummary = ({
   currentPageInformation,
@@ -84,7 +93,7 @@ const PermissionsSummary = ({
     () => new URL(currentPageInformation.url).hostname,
     [currentPageInformation.url],
   );
-  const networkInfo = useNetworkInfo(hostname);
+  const { networkName, networkImageSource } = useNetworkInfo(hostname);
 
   // if network switch, we get the chain name from the customNetworkInformation
   let chainName = '';
@@ -115,12 +124,62 @@ const PermissionsSummary = ({
     onEditNetworks?.();
   };
 
+  const switchNetwork = useCallback(() => {
+    navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.NETWORK_SELECTOR,
+    });
+  }, [navigate]);
+
   const renderTopIcon = () => {
     const { currentEnsName, icon } = currentPageInformation;
     const url = currentPageInformation.url;
     const iconTitle = getHost(currentEnsName || url);
 
-    return (
+    if (!isAlreadyConnected) {
+      return (
+        <WebsiteIcon
+          style={styles.domainLogoContainer}
+          viewStyle={styles.assetLogoContainer}
+          title={iconTitle}
+          url={currentEnsName || url}
+          icon={typeof icon === 'string' ? icon : icon?.uri}
+        />
+      );
+    }
+
+    return isPerDappSelectedNetworkEnabled() ? (
+      <View style={[styles.domainLogoContainer, styles.assetLogoContainer]}>
+        <TouchableOpacity
+          onPress={switchNetwork}
+          testID={ConnectedAccountsSelectorsIDs.NETWORK_PICKER}
+        >
+          <BadgeWrapper
+            badgeElement={
+              <Badge
+                variant={BadgeVariant.Network}
+                name={networkName}
+                imageSource={networkImageSource}
+              />
+            }
+          >
+            {icon ? (
+              <AvatarFavicon
+                imageSource={{
+                  uri: typeof icon === 'string' ? icon : icon?.uri,
+                }}
+                size={AvatarSize.Md}
+              />
+            ) : (
+              <AvatarToken
+                name={iconTitle}
+                isHaloEnabled
+                size={AvatarSize.Md}
+              />
+            )}
+          </BadgeWrapper>
+        </TouchableOpacity>
+      </View>
+    ) : (
       <WebsiteIcon
         style={styles.domainLogoContainer}
         viewStyle={styles.assetLogoContainer}
@@ -370,7 +429,7 @@ const PermissionsSummary = ({
                       </TextComponent>
                       <TextComponent variant={TextVariant.BodySMMedium}>
                         {isNonDappNetworkSwitch
-                          ? networkInfo?.networkName || providerConfig.nickname
+                          ? networkName || providerConfig.nickname
                           : chainName}
                       </TextComponent>
                     </TextComponent>
@@ -380,7 +439,7 @@ const PermissionsSummary = ({
                     size={AvatarSize.Xs}
                     name={
                       isNonDappNetworkSwitch
-                        ? networkInfo?.networkName || providerConfig.nickname
+                        ? networkName || providerConfig.nickname
                         : chainName
                     }
                     imageSource={

app/components/UI/Tabs/TabThumbnail/TabThumbnail.tsx

@@ -59,6 +59,7 @@ const TabThumbnail = ({
     (account) => account.address.toLowerCase() === activeAddress?.toLowerCase(),
   );
   const { networkName, networkImageSource } = useNetworkInfo(tabTitle);
+
   const faviconSource = useFavicon(tab.url);
 
   return (