feat(4173): Send flow with contextual chain selector

app/actions/transaction/index.js

@@ -171,3 +171,13 @@ export function setTransactionValue(value) {
     value,
   };
 }
+
+export const SET_TRANSACTION_SEND_FLOW_CONTEXTUAL_CHAIN_ID =
+  'SET_TRANSACTION_SEND_FLOW_CONTEXTUAL_CHAIN_ID';
+
+export function setTransactionSendFlowContextualChainId(chainId) {
+  return {
+    type: SET_TRANSACTION_SEND_FLOW_CONTEXTUAL_CHAIN_ID,
+    chainId,
+  };
+}

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 {
-  selectNetworkImageSource,
-  selectNetworkName,
-} 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,29 @@ 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(selectNetworkName);
+  // FIXME: this could be the wrong selector, probably needs to be per dapp (per origin)
+  // console.log('>>> AddressFrom origin', origin);
+  const { networkName, networkImageSource } = useNetworkInfo(origin);
 
   const useBlockieIcon = useSelector(
     // TODO: Replace "any" with type
@@ -74,7 +75,7 @@ const AddressFrom = ({
     }
   }, [accountsByChainId, internalAccounts, activeAddress, origin]);
 
-  const networkImage = useSelector(selectNetworkImageSource);
+  // const networkImage = useSelector(selectNetworkImageSource);
 
   const accountTypeLabel = getLabelTextByAddress(activeAddress);
 
@@ -95,7 +96,7 @@ const AddressFrom = ({
         badgeProps={{
           variant: BadgeVariant.Network,
           name: networkName,
-          imageSource: networkImage,
+          imageSource: networkImageSource,
         }}
         useBlockieIcon={useBlockieIcon}
       />

app/components/UI/Navbar/index.js

@@ -557,6 +557,9 @@ export function getSendFlowTitle(
   themeColors,
   resetTransaction,
   transaction,
+  disableNetwork = true,
+  showSelectedNetwork = false,
+  sendFlowContextualChainId = '',
 ) {
   const innerStyles = StyleSheet.create({
     headerButtonText: {
@@ -594,7 +597,15 @@ export function getSendFlowTitle(
   const titleToRender = title;
 
   return {
-    headerTitle: () => <NavbarTitle title={titleToRender} disableNetwork />,
+    headerTitle: () => (
+      <NavbarTitle
+        title={titleToRender}
+        disableNetwork={disableNetwork}
+        showSelectedNetwork={showSelectedNetwork}
+        networkName={sendFlowContextualChainId}
+        source="SendFlow"
+      />
+    ),
     headerRight: () => (
       // eslint-disable-next-line react/jsx-no-bind
       <TouchableOpacity

app/components/UI/NavbarTitle/index.js

@@ -71,6 +71,10 @@ class NavbarTitle extends PureComponent {
      * Content to display inside text element
      */
     children: PropTypes.node,
+    /**
+     * Source of the network selector
+     */
+    source: PropTypes.string,
   };
 
   static defaultProps = {
@@ -86,13 +90,18 @@ class NavbarTitle extends PureComponent {
         this.animating = true;
         this.props.navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
           screen: Routes.SHEET.NETWORK_SELECTOR,
+          params: {
+            source: this.props.source,
+          },
         });
 
         this.props.metrics.trackEvent(
           this.props.metrics
             .createEventBuilder(MetaMetricsEvents.NETWORK_SELECTOR_PRESSED)
             .addProperties({
+              // TODO: if contextual chainId is used, the providerConfig is the chain needed for this tracking
               chain_id: getDecimalChainId(this.props.providerConfig.chainId),
+              source: this.props.source,
             })
             .build(),
         );

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';
@@ -48,6 +51,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,
@@ -80,7 +89,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 = '';
@@ -111,12 +120,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}
@@ -361,7 +420,7 @@ const PermissionsSummary = ({
                       </TextComponent>
                       <TextComponent variant={TextVariant.BodySMMedium}>
                         {isNonDappNetworkSwitch
-                          ? networkInfo?.networkName || providerConfig.nickname
+                          ? networkName || providerConfig.nickname
                           : chainName}
                       </TextComponent>
                     </TextComponent>
@@ -371,7 +430,7 @@ const PermissionsSummary = ({
                     size={AvatarSize.Xs}
                     name={
                       isNonDappNetworkSwitch
-                        ? networkInfo?.networkName || providerConfig.nickname
+                        ? networkName || providerConfig.nickname
                         : chainName
                     }
                     imageSource={

app/components/UI/PermissionsSummary/PermissionsSummary.types.ts

@@ -26,6 +26,7 @@ export interface PermissionsSummaryProps {
   accounts?: Account[];
   accountAddresses?: string[];
   networkAvatars?: ({ name: string; imageSource: string } | null)[];
+  // TODO: remove isNonDappNetworkSwitch prop once the per-dapp network switch is implemented
   isNonDappNetworkSwitch?: boolean;
   onChooseFromPermittedNetworks?: () => void;
 }

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

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

app/components/Views/AccountPermissions/AccountPermissions.types.ts

@@ -25,6 +25,7 @@ export interface AccountPermissionsProps {
       };
       isRenderedAsBottomSheet?: boolean;
       initialScreen?: AccountPermissionsScreens;
+      // TODO: remove isNonDappNetworkSwitch prop once the per-dapp network switch is implemented
       isNonDappNetworkSwitch?: boolean;
     };
   };