feat: (MMS-2106) supports copying block explorer link in bridge page

ui/pages/bridge/__snapshots__/index.test.tsx.snap

@@ -141,6 +141,7 @@ exports[`Bridge renders the component with initial props 1`] = `
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md mm-box--display-flex mm-box--gap-1 mm-box--color-text-alternative-soft"
+                style="cursor: default; text-decoration: none;"
               />
             </div>
           </div>
@@ -209,6 +210,7 @@ exports[`Bridge renders the component with initial props 1`] = `
                 </div>
                 <a
                   class="mm-box mm-text mm-text--body-md mm-box--display-flex mm-box--gap-1 mm-box--color-text-alternative-soft"
+                  style="cursor: pointer; text-decoration: underline;"
                 />
               </div>
             </div>

ui/pages/bridge/prepare/__snapshots__/prepare-bridge-page.test.tsx.snap

@@ -90,6 +90,7 @@ exports[`PrepareBridgePage should render the component, with initial state 1`] =
         </div>
         <p
           class="mm-box mm-text mm-text--body-md mm-box--display-flex mm-box--gap-1 mm-box--color-text-alternative-soft"
+          style="cursor: default; text-decoration: none;"
         />
       </div>
     </div>
@@ -158,6 +159,7 @@ exports[`PrepareBridgePage should render the component, with initial state 1`] =
           </div>
           <a
             class="mm-box mm-text mm-text--body-md mm-box--display-flex mm-box--gap-1 mm-box--color-text-alternative-soft"
+            style="cursor: pointer; text-decoration: underline;"
           />
         </div>
       </div>
@@ -281,6 +283,7 @@ exports[`PrepareBridgePage should render the component, with inputs set 1`] = `
         </div>
         <p
           class="mm-box mm-text mm-text--body-md mm-box--display-flex mm-box--gap-1 mm-box--color-text-alternative-soft"
+          style="cursor: default; text-decoration: none;"
         />
       </div>
     </div>
@@ -349,6 +352,7 @@ exports[`PrepareBridgePage should render the component, with inputs set 1`] = `
           </div>
           <a
             class="mm-box mm-text mm-text--body-md mm-box--display-flex mm-box--gap-1 mm-box--color-text-alternative-soft"
+            style="cursor: pointer; text-decoration: underline;"
           />
         </div>
       </div>

ui/pages/bridge/prepare/bridge-input-group.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { BigNumber } from 'bignumber.js';
-import { isNativeAddress } from '@metamask/bridge-controller';
+import {
+  formatChainIdToCaip,
+  isNativeAddress,
+} from '@metamask/bridge-controller';
 import type { BridgeToken } from '@metamask/bridge-controller';
+import { getAccountLink } from '@metamask/etherscan-link';
 import {
   Text,
   TextField,
@@ -35,6 +39,11 @@ import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { MINUTE } from '../../../../shared/constants/time';
 import { getIntlLocale } from '../../../ducks/locale/locale';
 import { useIsMultichainSwap } from '../hooks/useIsMultichainSwap';
+import {
+  MULTICHAIN_NETWORK_BLOCK_EXPLORER_FORMAT_URLS_MAP,
+  MultichainNetworks,
+} from '../../../../shared/constants/multichain/networks';
+import { formatBlockExplorerAddressUrl } from '../../../../shared/lib/multichain/networks';
 import { BridgeAssetPickerButton } from './components/bridge-asset-picker-button';
 
 const sanitizeAmountInput = (textToSanitize: string) => {
@@ -60,6 +69,7 @@ export const BridgeInputGroup = ({
   amountInFiat,
   onMaxButtonClick,
   isMultiselectEnabled,
+  onBlockExplorerClick,
   buttonProps,
 }: {
   amountInFiat?: BigNumber;
@@ -71,6 +81,7 @@ export const BridgeInputGroup = ({
     'testId' | 'autoFocus' | 'value' | 'readOnly' | 'disabled' | 'className'
   >;
   onMaxButtonClick?: (value: string) => void;
+  onBlockExplorerClick?: (token: BridgeToken) => void;
 } & Pick<
   React.ComponentProps<typeof AssetPicker>,
   | 'networkProps'
@@ -110,6 +121,45 @@ export const BridgeInputGroup = ({
 
   const isSwap = useIsMultichainSwap();
 
+  const handleAddressClick = () => {
+    if (token && selectedChainId) {
+      const caipChainId = formatChainIdToCaip(selectedChainId);
+      const isSolana = caipChainId === MultichainNetworks.SOLANA;
+
+      let blockExplorerUrl = '';
+      if (isSolana) {
+        const blockExplorerUrls =
+          MULTICHAIN_NETWORK_BLOCK_EXPLORER_FORMAT_URLS_MAP[caipChainId];
+        if (blockExplorerUrls) {
+          blockExplorerUrl = formatBlockExplorerAddressUrl(
+            blockExplorerUrls,
+            token.address.split(':').at(-1) ?? token.address,
+          );
+        }
+      } else {
+        const explorerUrl =
+          networkProps?.network?.blockExplorerUrls?.[
+            networkProps?.network?.defaultBlockExplorerUrlIndex ?? 0
+          ];
+        if (explorerUrl) {
+          blockExplorerUrl = getAccountLink(
+            token.address,
+            selectedChainId,
+            {
+              blockExplorerUrl: explorerUrl,
+            },
+            undefined,
+          );
+        }
+      }
+
+      if (blockExplorerUrl) {
+        handleCopy(blockExplorerUrl);
+        onBlockExplorerClick?.(token);
+      }
+    }
+  };
+
   return (
     <Column paddingInline={6} gap={1}>
       <Row gap={4}>
@@ -239,10 +289,16 @@ export const BridgeInputGroup = ({
           }
           onClick={() => {
             if (isAmountReadOnly && token && selectedChainId) {
+              handleAddressClick();
+            } else if (token && selectedChainId) {
               handleCopy(token.address);
             }
           }}
           as={isAmountReadOnly ? 'a' : 'p'}
+          style={{
+            cursor: isAmountReadOnly ? 'pointer' : 'default',
+            textDecoration: isAmountReadOnly ? 'underline' : 'none',
+          }}
         >
           {isAmountReadOnly &&
             token &&