feat: Integrate deeplink and dapp initated transfer confirmations (#14916)

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

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

This PR aims to integrate deeplink and dapp initated redesigned transfer
confirmations.

**Labels:**
Note that transfer confirmations can only be activated by setting env
variable. Since this indicates feature is not yet released -
`no-changelog` `No QA Needed` is added to the PR.

## **Related issues**

Fixes: MetaMask/MetaMask-planning#4771

## **Manual testing steps**

- Deeplink and dapp initiated transfer confirmations will show
redesigned transfer confirmation.

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

Deeplink native transfer



https://github.com/user-attachments/assets/855dfe42-f69d-472e-8625-46460b8e5350


Deeplink ETH USDC transfer



https://github.com/user-attachments/assets/49d28788-e36c-4d4f-bea9-a65bda5ddc7b



Deeplink Linea USDC transfer




https://github.com/user-attachments/assets/26408d45-6876-46e1-bdf5-ab52e995b336



DApp initiated transfers




https://github.com/user-attachments/assets/fc79886a-2c4c-49f4-bb79-e54b64007812




## **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.

---------

Co-authored-by: Nico MASSART <[email protected]>

Author: OGPoyraz

app/components/UI/SimulationDetails/SimulationDetails.tsx

@@ -140,8 +140,8 @@ export const SimulationDetails: React.FC<SimulationDetailsProps> = ({
   isTransactionsRedesign = false,
 }: SimulationDetailsProps) => {
   const { styles } = useStyles(styleSheet, { isTransactionsRedesign });
-  const { chainId, id: transactionId, simulationData } = transaction;
-  const balanceChangesResult = useBalanceChanges({ chainId, simulationData });
+  const { chainId, id: transactionId, simulationData, networkClientId } = transaction;
+  const balanceChangesResult = useBalanceChanges({ chainId, simulationData, networkClientId });
   const loading = !simulationData || balanceChangesResult.pending;
 
   useSimulationMetrics({

app/components/UI/SimulationDetails/useBalanceChanges.test.ts

@@ -43,7 +43,7 @@ const mockFetchTokenContractExchangeRates =
   fetchTokenContractExchangeRates as jest.Mock;
 
 const ETH_TO_FIAT_RATE = 3;
-
+const NETWORK_CLIENT_ID_MOCK = 'mainnet';
 const ERC20_TOKEN_ADDRESS_1_MOCK: Hex = '0x0erc20_1';
 const ERC20_TOKEN_ADDRESS_2_MOCK: Hex = '0x0erc20_2';
 const ERC20_TOKEN_ADDRESS_3_MOCK: Hex = '0x0erc20_3';
@@ -103,6 +103,7 @@ describe('useBalanceChanges', () => {
         useBalanceChanges({
           chainId: CHAIN_ID_MOCK,
           simulationData: undefined,
+          networkClientId: NETWORK_CLIENT_ID_MOCK,
         }),
       );
       expect(result.current).toEqual({ pending: true, value: [] });
@@ -127,6 +128,7 @@ describe('useBalanceChanges', () => {
         useBalanceChanges({
           chainId: CHAIN_ID_MOCK,
           simulationData,
+          networkClientId: NETWORK_CLIENT_ID_MOCK,
         }),
       );
 
@@ -154,6 +156,7 @@ describe('useBalanceChanges', () => {
         useBalanceChanges({
           chainId: CHAIN_ID_MOCK,
           simulationData,
+          networkClientId: NETWORK_CLIENT_ID_MOCK,
         }),
       );
 
@@ -174,6 +177,7 @@ describe('useBalanceChanges', () => {
         useBalanceChanges({
           chainId: CHAIN_ID_MOCK,
           simulationData,
+          networkClientId: NETWORK_CLIENT_ID_MOCK,
         }),
       );
     };
@@ -327,6 +331,7 @@ describe('useBalanceChanges', () => {
         useBalanceChanges({
           chainId: CHAIN_ID_MOCK,
           simulationData,
+          networkClientId: NETWORK_CLIENT_ID_MOCK,
         }),
       );
     };
@@ -394,6 +399,7 @@ describe('useBalanceChanges', () => {
       useBalanceChanges({
         chainId: CHAIN_ID_MOCK,
         simulationData,
+        networkClientId: NETWORK_CLIENT_ID_MOCK,
       }),
     );
 

app/components/UI/SimulationDetails/useBalanceChanges.ts

@@ -60,9 +60,9 @@ function getAssetAmount(
 }
 
 // Fetches the decimals for the given token address.
-async function fetchErc20Decimals(address: Hex): Promise<number> {
+async function fetchErc20Decimals(address: Hex, networkClientId: string): Promise<number> {
   try {
-    const { decimals } = await getTokenDetails(address);
+    const { decimals } = await getTokenDetails(address,undefined,undefined,networkClientId);
     return decimals ? parseInt(decimals, 10) : ERC20_DEFAULT_DECIMALS;
   } catch {
     return ERC20_DEFAULT_DECIMALS;
@@ -72,12 +72,13 @@ async function fetchErc20Decimals(address: Hex): Promise<number> {
 // Fetches token details for all the token addresses in the SimulationTokenBalanceChanges
 async function fetchAllErc20Decimals(
   addresses: Hex[],
+  networkClientId: string,
 ): Promise<Record<Hex, number>> {
   const uniqueAddresses = [
     ...new Set(addresses.map((address) => address.toLowerCase() as Hex)),
   ];
   const allDecimals = await Promise.all(
-    uniqueAddresses.map(fetchErc20Decimals),
+    uniqueAddresses.map((address) => fetchErc20Decimals(address, networkClientId)),
   );
   return Object.fromEntries(
     allDecimals.map((decimals, i) => [uniqueAddresses[i], decimals]),
@@ -183,9 +184,11 @@ function getTokenBalanceChanges(
 export default function useBalanceChanges({
   chainId,
   simulationData,
+  networkClientId,
 }: {
   chainId: Hex;
   simulationData?: SimulationData;
+  networkClientId: string;
 }): { pending: boolean; value: BalanceChange[] } {
   const nativeFiatRate = useSelector((state: RootState) => selectConversionRateByChainId(state, chainId)) as number;
   const fiatCurrency = useSelector(selectCurrentCurrency);
@@ -202,7 +205,7 @@ export default function useBalanceChanges({
     .map((tbc: any) => tbc.address);
 
   const erc20Decimals = useAsyncResultOrThrow(
-    () => fetchAllErc20Decimals(erc20TokenAddresses),
+    () => fetchAllErc20Decimals(erc20TokenAddresses, networkClientId),
     [JSON.stringify(erc20TokenAddresses)],
   );
 

app/components/Views/confirmations/components/confirm/confirm-component.test.tsx

@@ -87,6 +87,9 @@ jest.mock('../../../../../core/Engine', () => ({
         },
       },
     },
+    TokenListController: {
+      fetchTokenList: jest.fn(),
+    },
   },
   controllerMessenger: {
     subscribe: jest.fn(),

app/components/Views/confirmations/components/confirm/confirm-root.test.tsx

@@ -19,6 +19,14 @@ jest.mock('@react-navigation/native', () => ({
   }),
 }));
 
+jest.mock('../../../../../core/Engine', () => ({
+  context: {
+    TokenListController: {
+      fetchTokenList: jest.fn(),
+    },
+  },
+}));
+
 describe('Confirm', () => {
   beforeEach(() => {
     jest.clearAllMocks();

app/components/Views/confirmations/components/footer/footer.test.tsx

@@ -51,6 +51,14 @@ const mockTrackAlertMetrics = jest.fn();
   trackAlertMetrics: mockTrackAlertMetrics,
 });
 
+jest.mock('../../../../../core/Engine', () => ({
+  context: {
+    TokenListController: {
+      fetchTokenList: jest.fn(),
+    },
+  },
+}));
+
 const ALERT_MESSAGE_MOCK = 'This is a test alert message.';
 const ALERT_DETAILS_MOCK = ['Detail 1', 'Detail 2'];
 const mockAlerts = [

app/components/Views/confirmations/components/info/transfer/transfer.test.tsx

@@ -16,6 +16,9 @@ jest.mock('../../../../../../core/Engine', () => ({
       startPolling: jest.fn(),
       stopPollingByPollingToken: jest.fn(),
     },
+    TokenListController: {
+      fetchTokenList: jest.fn(),
+    },
   },
 }));
 

app/components/Views/confirmations/components/rows/transactions/advanced-details-row/advanced-details-row.test.tsx

@@ -25,6 +25,14 @@ jest.mock('../../../../../../hooks/useEditNonce', () => ({
   useEditNonce: jest.fn(),
 }));
 
+jest.mock('../../../../../../../core/Engine', () => ({
+  context: {
+    TokenListController: {
+      fetchTokenList: jest.fn(),
+    },
+  },
+}));
+
 describe('AdvancedDetailsRow', () => {
   const mockUseEditNonce = {
     setShowNonceModal: jest.fn(),

app/components/Views/confirmations/components/rows/transactions/from-to/from-to.test.tsx

@@ -17,6 +17,9 @@ jest.mock('../../../../../../../core/Engine', () => ({
     NetworkController: {
       getNetworkConfigurationByNetworkClientId: jest.fn(),
     },
+    TokenListController: {
+      fetchTokenList: jest.fn(),
+    },
   },
 }));
 

app/components/Views/confirmations/components/rows/transactions/gas-fee-details/gas-fee-details.test.tsx

@@ -19,6 +19,9 @@ jest.mock('../../../../../../../core/Engine', () => ({
     NetworkController: {
       getNetworkConfigurationByNetworkClientId: jest.fn(),
     },
+    TokenListController: {
+      fetchTokenList: jest.fn(),
+    },
   },
 }));