Multichain: Change Chain from Asset Details

MetaMask · Oct 9, 2024 · 719e5e5 · 719e5e5
1 parent 65e656c
commit 719e5e5
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 1 deletion.
diff --git a/ui/components/app/wallet-overview/coin-buttons.tsx b/ui/components/app/wallet-overview/coin-buttons.tsx
@@ -39,6 +39,9 @@ import {
   ///: END:ONLY_INCLUDE_IF
   getUseExternalServices,
   getSelectedAccount,
+  getUseRequestQueue,
+  getOriginOfCurrentTab,
+  getAllDomains,
 } from '../../../selectors';
 import Tooltip from '../../ui/tooltip';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
@@ -67,6 +70,7 @@ import useRamps from '../../../hooks/ramps/useRamps/useRamps';
 import useBridging from '../../../hooks/bridge/useBridging';
 ///: END:ONLY_INCLUDE_IF
 import { ReceiveModal } from '../../multichain/receive-modal';
+import { setActiveNetwork, setNetworkClientIdForDomain } from '../../../store/actions';
 
 const CoinButtons = ({
   chainId,
@@ -230,7 +234,33 @@ const CoinButtons = ({
   const { openBridgeExperience } = useBridging();
   ///: END:ONLY_INCLUDE_IF
 
+  const useRequestQueue = useSelector(getUseRequestQueue);
+  const selectedTabOrigin = useSelector(getOriginOfCurrentTab);
+  const domains = useSelector(getAllDomains);
+  const switchNetworkIfNecessary = () => {
+    // If we aren't presently on the chain of the asset, change to it
+    if (chainId !== token.chainId) {
+      // TODO: Look up networkClientId of destination token
+
+      // Start network switch
+      dispatch(setActiveNetwork(networkClientId));
+      // If presently on a dapp, communicate a change to
+      // the dapp via silent switchEthereumChain that the
+      // network has changed due to user action
+      if (
+        useRequestQueue &&
+        selectedTabOrigin &&
+        domains[selectedTabOrigin]
+      ) {
+        setNetworkClientIdForDomain(selectedTabOrigin, networkClientId);
+      }
+    }
+  };
+
   const handleSendOnClick = useCallback(async () => {
+    // If we aren't presently on the chain of the asset, change to it
+    switchNetworkIfNecessary();
+
     trackEvent(
       {
         event: MetaMetricsEventName.NavSendButtonClicked,
@@ -249,6 +279,9 @@ const CoinButtons = ({
   }, [chainId]);
 
   const handleSwapOnClick = useCallback(async () => {
+    // If we aren't presently on the chain of the asset, change to it
+    switchNetworkIfNecessary();
+
     ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
     global.platform.openTab({
       url: `${mmiPortfolioUrl}/swap`,

diff --git a/ui/pages/asset/components/token-buttons.tsx b/ui/pages/asset/components/token-buttons.tsx
@@ -27,14 +27,17 @@ import {
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   getIsBridgeChain,
   getCurrentKeyring,
+  getUseRequestQueue,
+  getOriginOfCurrentTab,
+  getAllDomains,
   ///: END:ONLY_INCLUDE_IF
 } from '../../../selectors';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import useBridging from '../../../hooks/bridge/useBridging';
 ///: END:ONLY_INCLUDE_IF
 
 import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
-import { showModal } from '../../../store/actions';
+import { setActiveNetwork, setNetworkClientIdForDomain, showModal } from '../../../store/actions';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
   MetaMetricsEventCategory,
@@ -102,6 +105,29 @@ const TokenButtons = ({
   };
   ///: END:ONLY_INCLUDE_IF
 
+  const useRequestQueue = useSelector(getUseRequestQueue);
+  const selectedTabOrigin = useSelector(getOriginOfCurrentTab);
+  const domains = useSelector(getAllDomains);
+  const switchNetworkIfNecessary = () => {
+    // If we aren't presently on the chain of the asset, change to it
+    if (chainId !== token.chainId) {
+      // TODO: Look up networkClientId of destination token
+
+      // Start network switch
+      dispatch(setActiveNetwork(networkClientId));
+      // If presently on a dapp, communicate a change to
+      // the dapp via silent switchEthereumChain that the
+      // network has changed due to user action
+      if (
+        useRequestQueue &&
+        selectedTabOrigin &&
+        domains[selectedTabOrigin]
+      ) {
+        setNetworkClientIdForDomain(selectedTabOrigin, networkClientId);
+      }
+    }
+  };
+
   useEffect(() => {
     if (token.isERC721) {
       dispatch(
@@ -211,6 +237,9 @@ const TokenButtons = ({
             { excludeMetaMetricsId: false },
           );
           try {
+            // If we aren't presently on the chain of the asset, change to it
+            switchNetworkIfNecessary();
+
             await dispatch(
               startNewDraftTransaction({
                 type: AssetType.token,
@@ -265,6 +294,9 @@ const TokenButtons = ({
                 chain_id: chainId,
               },
             });
+            // If we aren't presently on the chain of the asset, change to it
+            switchNetworkIfNecessary();
+
             dispatch(
               setSwapsFromToken({
                 ...token,