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

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Adds support for copying the token block explorer link in the address
text under the token icon of the bridge page. Also displays a toast to
let the user know this link has been copied.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/31498?quickstart=1)

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MMS-2106

## **Manual testing steps**

1. Go to the bridge page.
2. Select a toToken that is not a native token.
3. Click the address under the token icon.
4. Observe the toast and verify the link is correct.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: ghgoodreau

app/_locales/en/messages.json

@@ -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>

app/_locales/en_GB/messages.json

@@ -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/__snapshots__/index.test.tsx.snap

@@ -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,
+          );
+        }
+      } 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 &&