chore(runway): cherry-pick fix: cp-7.60.0 Generate correct blockchain explorer urls on bridge txs (#23311)

- fix: cp-7.60.0 Generate correct blockchain explorer urls on bridge txs
(#23273)

<!--
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**

Fix an issue where the blockchain explorer urls were not generated
successfully when bridging assets.

<!--
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?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Generate correct blockchain explorer URLs when bridging
assets

## **Related issues**

Fixes: #23171

## **Manual testing steps**

```gherkin
Ensure that the correct blockchain URLs are generated when visiting the transaction
details screen after bridging/swapping assets. 

Also ensure that the correct URLs are also generated for old bridge/swaps transactions (no regressions).
```

## **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 Mobile
Coding

Standards](https://github.com/MetaMask/metamask-mobile/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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Fixes bridge transaction explorer URL generation across EVM and
non‑EVM chains with proper fallbacks and updates tests accordingly.
> 
> - **Bridge Hook (`useMultichainBlockExplorerTxUrl`)**:
> - Switches to `useBlockExplorer` from `app/components/hooks` and uses
`getEvmBlockExplorerUrl` to derive EVM explorer base URLs.
> - Falls back to `getEtherscanBaseUrl` and builds links via
`@metamask/etherscan-link` when custom explorer is unavailable.
> - Determines explorer names via URL for non‑EVM and via
`blockExplorer.getBlockExplorerName` for EVM.
> - Keeps network image sourcing and chain name resolution, handling
unknown networks gracefully.
> - **Hook Tests** (`useMultichainBlockExplorerTxUrl.test.tsx`):
> - Comprehensive coverage for parameter validation, EVM (mainnet,
Optimism, Polygon) and non‑EVM (Solana) paths, fallbacks, explorer name
resolution, network image sourcing, and edge cases.
> - **Modal Test** (`BlockExplorersModal.test.tsx`):
> - Updates expectations to one `Etherscan` and one `Optimistic` button.
> - **Block Explorer Hook** (`useBlockExplorer.ts`):
>   - Exposes `getEvmBlockExplorerUrl` in returned API.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
4b8a441. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[f93f627](f93f627)

Co-authored-by: George Gkasdrogkas <georgegkas@gmail.com>

Author: runway-github[bot]

app/components/UI/Bridge/components/TransactionDetails/BlockExplorersModal.test.tsx

@@ -71,8 +71,11 @@ describe('BlockExplorersModal', () => {
       },
       { state: mockState },
     );
-    const etherscanButtons = getAllByText('Etherscan');
-    expect(etherscanButtons).toHaveLength(2);
+    const etherscanButton = getAllByText('Etherscan');
+    expect(etherscanButton).toHaveLength(1);
+
+    const optimisticButton = getAllByText('Optimistic');
+    expect(optimisticButton).toHaveLength(1);
   });
 
   it('should handle missing destination chain transaction hash', () => {

app/components/UI/Bridge/hooks/useMultichainBlockExplorerTxUrl/index.ts

@@ -3,23 +3,23 @@ import {
   formatChainIdToCaip,
   isNonEvmChainId,
 } from '@metamask/bridge-controller';
+import etherscanLink from '@metamask/etherscan-link';
 import { useSelector } from 'react-redux';
 import {
   createProviderConfig,
   selectEvmNetworkConfigurationsByChainId,
 } from '../../../../../selectors/networkController';
 import { useMemo } from 'react';
 import { NetworkConfiguration } from '@metamask/network-controller';
-import useBlockExplorer from '../../../Swaps/utils/useBlockExplorer';
+import useBlockExplorer from '../../../../hooks/useBlockExplorer';
 import { getTransactionUrl } from '../../../../../core/Multichain/utils';
 import {
   getBlockExplorerName,
   getNetworkImageSource,
 } from '../../../../../util/networks';
 import { Hex } from '@metamask/utils';
 import { selectNonEvmNetworkConfigurationsByChainId } from '../../../../../selectors/multichainNetworkController';
-
-const useEvmBlockExplorer = useBlockExplorer;
+import { getEtherscanBaseUrl } from '../../../../../util/etherscan';
 
 const getProviderConfigForNetwork = (networkConfig: NetworkConfiguration) => {
   const rpcEndpoint =
@@ -66,10 +66,7 @@ export const useMultichainBlockExplorerTxUrl = ({
     [evmNetworkConfig],
   );
 
-  const evmExplorer = useEvmBlockExplorer(
-    evmNetworkConfigurations,
-    evmProviderConfig,
-  );
+  const blockExplorer = useBlockExplorer();
 
   // Handle undefined cases
   if (!chainId || !txHash) {
@@ -85,7 +82,11 @@ export const useMultichainBlockExplorerTxUrl = ({
     explorerTxUrl = getTransactionUrl(txHash, formatChainIdToCaip(chainId));
   } else {
     // EVM
-    explorerTxUrl = evmExplorer.tx(txHash);
+    const baseUrl =
+      blockExplorer.getEvmBlockExplorerUrl(formatChainIdToHex(chainId)) ??
+      getEtherscanBaseUrl(evmProviderConfig?.type ?? '');
+
+    explorerTxUrl = etherscanLink.createCustomExplorerLink(txHash, baseUrl);
   }
 
   // Get network image source
@@ -97,7 +98,7 @@ export const useMultichainBlockExplorerTxUrl = ({
   const explorerName =
     isNonEvm && explorerTxUrl
       ? getBlockExplorerName(explorerTxUrl)
-      : evmExplorer.name;
+      : blockExplorer.getBlockExplorerName(formatChainIdToCaip(chainId));
 
   const chainName =
     isNonEvm && formattedChainId