feat(deposit): webview navigation improvements by AxelGes · Pull Request #17388 · MetaMask/metamask-mobile

AxelGes · 2025-07-18T19:08:41Z

Description

Navigation now happens faster. It starts as soon as we have the orderId instead of waiting to fetch the actual order
Fixed the 'double navigation' issue which also resolved the duplicated notification error

Changelog

CHANGELOG entry:

Related issues

Fixes:

Manual testing steps

Go to this page...

Screenshots/Recordings

Screen.Recording.2025-07-18.at.4.27.27.PM.mov

Pre-merge author checklist

I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). 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.

…to feat/deposit/transactions-analytics

github-actions · 2025-07-18T19:08:52Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

github-actions · 2025-07-18T19:44:45Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: a6112e9
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/508cbcaa-cb69-4985-bb01-4fae8909b750

Note

You can rerun any failed steps by opening the Bitrise build, tapping Rebuild on the upper right then Rebuild unsuccessful Workflows
You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

…to feat/deposit/transactions-analytics

github-actions · 2025-07-18T22:49:17Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: d8029b2
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/68e1a5a2-24fd-4dd0-8582-fa6a6e480e44

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

- Merged analytics tracking functionality into webview improvements - Combined Loader component with analytics tracking in OrderProcessing - Added RAMPS_TRANSACTION_CONFIRMED and RAMPS_TRANSACTION_COMPLETED events - Updated tests to include analytics tracking coverage - Resolved conflicts while preserving both features

…to feat/deposit/webview-improvements

github-actions · 2025-07-21T18:17:18Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: e9fd5eb
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/128c3761-ef60-4aee-a5dc-68fd4c5466b3

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

cursor

Bug: Order ID Mismatch Causes Infinite Loading

The OrderProcessing screen now displays an infinite loading spinner when an order is not found, removing the previous error state and "Back to Wallet" button. This is compounded by an order ID mismatch: the screen is navigated to with a transformed order ID, but the order is subsequently fetched and stored in Redux using the original ID. This prevents the OrderProcessing component from finding the order, leaving users stuck on a perpetual loading screen with no recovery mechanism.

app/components/UI/Ramp/Deposit/hooks/useDepositRouting.ts#L216-L267

metamask-mobile/app/components/UI/Ramp/Deposit/hooks/useDepositRouting.ts

Lines 216 to 267 in e9fd5eb

    
           try { 
        
             const transformedOrderId = 
        
               OrderIdTransformer.transakOrderIdToDepositOrderId( 
        
                 orderId, 
        
                 DEPOSIT_ENVIRONMENT, 
        
               ); 
        
             navigateToOrderProcessingCallback({ 
        
               orderId: transformedOrderId, 
        
             }); 
        
             const order = await getOrder(orderId, selectedWalletAddress); 
        
             if (!order) { 
        
               throw new Error('Missing order'); 
        
             } 
        
             const cryptoCurrency = getCryptoCurrencyFromTransakId( 
        
               order.cryptoCurrency, 
        
             ); 
        
             const processedOrder = { 
        
               ...depositOrderToFiatOrder(order), 
        
               account: selectedWalletAddress || order.walletAddress, 
        
               network: cryptoCurrency?.chainId || order.network, 
        
             }; 
        
             await handleNewOrder(processedOrder); 
        
             trackEvent('RAMPS_TRANSACTION_CONFIRMED', { 
        
               ramp_type: 'DEPOSIT', 
        
               amount_source: Number(order.fiatAmount), 
        
               amount_destination: Number(order.cryptoAmount), 
        
               exchange_rate: Number(order.exchangeRate), 
        
               gas_fee: order.networkFees ? Number(order.networkFees) : 0, 
        
               processing_fee: order.partnerFees 
        
                 ? Number(order.partnerFees) 
        
                 : 0, 
        
               total_fee: Number(order.totalFeesFiat), 
        
               payment_method_id: order.paymentMethod, 
        
               country: selectedRegion?.isoCode || '', 
        
               chain_id: cryptoCurrency?.chainId || '', 
        
               currency_destination: 
        
                 selectedWalletAddress || order.walletAddress, 
        
               currency_source: order.fiatCurrency, 
        
             }); 
        
           } catch (error) { 
        
             throw new Error( 
        
               error instanceof Error && error.message 
        
                 ? error.message 
        
                 : 'Failed to process order from navigation', 
        
             ); 
        
           }

app/components/UI/Ramp/Deposit/Views/OrderProcessing/OrderProcessing.tsx#L145-L152

metamask-mobile/app/components/UI/Ramp/Deposit/Views/OrderProcessing/OrderProcessing.tsx

Lines 145 to 152 in e9fd5eb

    
           if (!order) { 
        
             return ( 
        
               <ScreenLayout> 
        
                 <Loader size="large" color={theme.colors.primary.default} /> 
        
               </ScreenLayout> 
        
             ); 
        
           }

Fix in Cursor • Fix in Web

Was this report helpful? Give feedback by reacting with 👍 or 👎

sonarqubecloud · 2025-07-21T18:34:14Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

AxelGes added 13 commits July 17, 2025 00:57

feat: deposit transactions analytics WIP

1072367

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

f388692

…to feat/deposit/transactions-analytics

feat: add tests for analytics in depositRouting and orderProcessing

1ddd5db

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

a3fd8bf

…to feat/deposit/transactions-analytics

fix: track error msg

cb9fafc

fix: linting

d744471

feat: use fee values

b4edaf5

feat: handle fee parameters optional

4f85bf8

feat: remove duplication

e0f8a6a

feat: upgrade native ramps sdk

c953d0e

feat: check if fees exist

d125ef0

feat: navigate to processing before fetching order

4b2847c

feat: webview modal navigation deduplication url

0c428ec

metamaskbot added the team-money-movement issues related to Money Movement features label Jul 18, 2025

chore: update orderprocessing snapshot

c4a102a

AxelGes marked this pull request as ready for review July 18, 2025 19:18

AxelGes requested a review from a team as a code owner July 18, 2025 19:18