feat: cross chain swaps - tx status - UI #28657

infiniteflower · 2024-11-22T17:33:27Z

Description

This PR is a collection of all the UI related code from #27740 (no UI changes). It has been split up in order to make it easier to review.

The main addition is the Bridge Transaction Details and its supporting code.

Related issues

Related to #27740, #28636

Manual testing steps

Add BRIDGE_USE_DEV_APIS=1 to .metamaskrc to enable Bridge

Refer to to #27740

Screenshots/Recordings

Refer to to #27740

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension 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.

github-actions · 2024-11-22T17:33:40Z

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.

metamaskbot · 2024-11-22T18:05:51Z

Builds ready [3f3864f]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1976 ± 63 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	246	2193	1897	401	192
		domContentLoaded	1746	2132	1931	122	59
		load	1757	2190	1976	132	63
		domInteractive	15	77	48	20	10
		backgroundConnect	13	178	46	43	21
		firstReactRender	88	365	168	82	39
		getState	6	92	26	26	12
		initialActions	0	1	0	0	0
		loadScripts	1245	1595	1420	102	49
		setupStore	6	90	14	20	9
		uiStartup	1966	2887	2336	263	126

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 11.32 KiB (0.19%)
ui: 36.22 KiB (0.47%)
common: 2.61 KiB (0.03%)

metamaskbot · 2024-11-22T19:22:20Z

Builds ready [74b114e]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1933 ± 118 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1661	2785	1935	246	118
		domContentLoaded	1619	2692	1903	231	111
		load	1660	2793	1933	245	118
		domInteractive	22	89	45	22	10
		backgroundConnect	11	103	30	22	11
		firstReactRender	48	163	112	29	14
		getState	4	59	15	18	8
		initialActions	0	1	0	0	0
		loadScripts	1170	1957	1403	179	86
		setupStore	6	61	19	21	10
		uiStartup	1824	3356	2166	317	152

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 11.27 KiB (0.19%)
ui: 36.25 KiB (0.47%)
common: 2.7 KiB (0.03%)

metamaskbot · 2024-11-22T21:14:13Z

Builds ready [47a8853]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2138 ± 114 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	427	2776	2050	439	211
		domContentLoaded	1767	2730	2085	217	104
		load	1839	2779	2138	237	114
		domInteractive	30	83	41	13	6
		backgroundConnect	20	145	60	31	15
		firstReactRender	75	288	113	44	21
		getState	6	97	27	24	12
		initialActions	0	1	0	0	0
		loadScripts	1295	2160	1543	194	93
		setupStore	7	63	19	18	9
		uiStartup	2053	3007	2386	263	126

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 11.27 KiB (0.19%)
ui: 36.52 KiB (0.47%)
common: 2.77 KiB (0.03%)

metamaskbot · 2024-11-22T22:43:04Z

Builds ready [ac773b7]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1893 ± 85 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	327	2554	1824	390	187
		domContentLoaded	1642	2469	1863	166	80
		load	1650	2556	1893	178	85
		domInteractive	22	135	48	26	12
		backgroundConnect	10	86	36	23	11
		firstReactRender	63	166	102	25	12
		getState	5	54	20	17	8
		initialActions	0	0	0	0	0
		loadScripts	1222	1847	1366	133	64
		setupStore	6	50	10	9	5
		uiStartup	1846	2775	2098	190	91

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 11.27 KiB (0.19%)
ui: 35.8 KiB (0.46%)
common: 2.77 KiB (0.03%)

## **Description**  This PR is a collection of all the background related code from #27740 (no UI changes). It has been split up in order to make it easier to review. A follow up PR containing all the UI changes from #27740 is here: #28657 The main addition is the `BridgeStatusController` and its supporting code. If you would like to test the functionality of this PR through the UI, please do so through #27740. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28636?quickstart=1) ## **Related issues** Branched off from #27740 ## **Manual testing steps** Refer to #27740 ## **Screenshots/Recordings** Refer to #27740 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] 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](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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.

metamaskbot · 2024-11-26T19:58:38Z

Builds ready [569b06f]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1778 ± 93 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1540	2126	1772	189	91
		domContentLoaded	1522	2117	1740	192	92
		load	1544	2156	1778	194	93
		domInteractive	25	82	45	18	9
		backgroundConnect	9	85	37	23	11
		firstReactRender	17	99	46	31	15
		getState	5	89	28	25	12
		initialActions	0	1	0	0	0
		loadScripts	1070	1631	1277	170	82
		setupStore	6	77	21	22	11
		uiStartup	1719	2803	2060	257	124

jclancy93 · 2024-11-27T13:33:33Z

I'm noticing an issue where I'm seeing the transaction pending on both the Lifi and socket explorers but it's returning pending in the UI and LiFi because of dest transaction despite the transaction being complete

https://www.loom.com/share/f66dec23c63b4353aa289a2723e3d984

It does look like it was executed through lifi based on the calldata for the transaction. So seems like it may just be an issue on Lifi side

Update: once Lifi was correctly resolving the transaction status, I could see the bridge showing up correctly in the UI

jclancy93 · 2024-11-27T13:40:54Z

I also see issues sometimes when submitting bridge transactions. I know it's not directly related to status but thought I'd flag here anyway

jclancy93

Apart from some edge cases I'm seeing here, the polling and status fetching seems to work correctly

infiniteflower · 2024-11-27T15:40:23Z

I also see issues sometimes when submitting bridge transactions. I know it's not directly related to status but thought I'd flag here anyway

This Action must be plain objects error is fixed in #28460

Specifically this commit: 8f699a3

infiniteflower · 2024-11-27T15:43:45Z

I'm noticing an issue where I'm seeing the transaction pending on both the Lifi and socket explorers but it's returning pending in the UI and LiFi because of dest transaction despite the transaction being complete

https://www.loom.com/share/f66dec23c63b4353aa289a2723e3d984

It does look like it was executed through lifi based on the calldata for the transaction. So seems like it may just be an issue on Lifi side

Update: once Lifi was correctly resolving the transaction status, I could see the bridge showing up correctly in the UI

So is the issue here that the MM UI is not updating fast enough given that the Socket Explorer said that both source + dest txs were confirmed?

metamaskbot · 2024-11-27T22:52:05Z

Builds ready [b44c49f]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1910 ± 83 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1688	2354	1910	171	82
		domContentLoaded	1651	2311	1876	169	81
		load	1703	2353	1910	173	83
		domInteractive	25	73	37	14	7
		backgroundConnect	8	96	33	26	12
		firstReactRender	16	54	23	10	5
		getState	51	112	86	18	9
		initialActions	0	1	0	0	0
		loadScripts	1240	1850	1436	158	76
		setupStore	7	28	9	5	2
		uiStartup	1953	2667	2161	203	97

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: -1.04 KiB (-0.02%)
ui: 36.18 KiB (0.46%)
common: 2.61 KiB (0.03%)

darkwing · 2024-11-27T23:00:23Z

Most of the UI functions pretty well but I never get a quote or am able to execute the bridge:

Screen.Recording.2024-11-27.at.4.59.25.PM.mov

infiniteflower · 2024-11-28T15:48:33Z

Most of the UI functions pretty well but I never get a quote or am able to execute the bridge:

Screen.Recording.2024-11-27.at.4.59.25.PM.mov

Spoke to the team, the UI for "no quotes received" is still in development.

darkwing

Just nits but I won't block on them provided they are fixed shortly thereafter.

Also, I'd prefer that Confirmations look at the transaction math.

darkwing · 2024-12-02T18:52:26Z

ui/pages/bridge/transaction-details/index.scss

+    transition: width 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+
+    &--pending {
+      width: 50%;


nit: These width values are likely available via a prop for Box

darkwing · 2024-12-02T18:52:39Z

ui/pages/bridge/transaction-details/index.scss

+  }
+
+  &__step-grid {
+    display: grid;


This could also be constructed with props instead of CSS.

darkwing · 2024-12-02T18:57:52Z

ui/pages/bridge/transaction-details/transaction-details.tsx

+import { getTransactionBreakdownData } from '../../../components/app/transaction-breakdown/transaction-breakdown-utils';
+import { MetaMaskReduxState } from '../../../store/store';
+import { hexToDecimal } from '../../../../shared/modules/conversion.utils';
+import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display/user-preferenced-currency-display.component';


Is there a better path for this?

darkwing · 2024-12-02T18:57:59Z

ui/pages/bridge/transaction-details/transaction-details.tsx

+import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display/user-preferenced-currency-display.component';
+import { EtherDenomination } from '../../../../shared/constants/common';
+import { PRIMARY } from '../../../helpers/constants/common';
+import CurrencyDisplay from '../../../components/ui/currency-display/currency-display.component';


Is there a better path for this?

infiniteflower · 2024-12-02T21:04:01Z

Just nits but I won't block on them provided they are fixed shortly thereafter.

Will fix all your comments in a follow up PR, thanks so much for the approve 🙏 !

Also, I'd prefer that Confirmations look at the transaction math.

If you're referring to getTransactionBreakdownData, that was just pulling existing logic into a reusable function. No logic has been changed.

infiniteflower changed the base branch from develop to cross-chain-swaps-bridgeStatusController November 22, 2024 17:33

metamaskbot added the team-swaps label Nov 22, 2024

infiniteflower changed the title ~~Cross chain swaps status UI~~ feat: cross chain swaps - tx status - UI Nov 22, 2024

infiniteflower added the team-bridge label Nov 22, 2024

infiniteflower force-pushed the cross-chain-swaps-status-ui branch from 3f3864f to e522a06 Compare November 22, 2024 18:47

infiniteflower mentioned this pull request Nov 22, 2024

feat: cross chain swaps - tx status - BridgeStatusController #28636

Merged

7 tasks

Base automatically changed from cross-chain-swaps-bridgeStatusController to develop November 26, 2024 15:04

infiniteflower force-pushed the cross-chain-swaps-status-ui branch from ac773b7 to 98cd8d4 Compare November 26, 2024 18:05

infiniteflower marked this pull request as ready for review November 26, 2024 20:02

infiniteflower requested review from a team as code owners November 26, 2024 20:02

jclancy93 previously approved these changes Nov 27, 2024

View reviewed changes

micaelae previously approved these changes Nov 27, 2024

View reviewed changes

infiniteflower mentioned this pull request Nov 27, 2024

feat: cross chain swaps - tx status #27740

Closed

7 tasks

infiniteflower added 5 commits November 27, 2024 15:59

chore: commit all UI related code for cross chain swaps status

81d5ecb

chore: consume dec to prefixed hex in ui code

3853f4e

chore: add source and dest network names when bridge complete

c2b4ae4

fix: text alignment issues with bridge tx details, remove fiat values

3cc0cae

fix: lint errors

4369d90

infiniteflower added 2 commits November 27, 2024 15:59

fix: broken tests

eb44fa7

fix: incorrect import

0077794

infiniteflower dismissed stale reviews from micaelae and jclancy93 via 0077794 November 27, 2024 20:59

infiniteflower force-pushed the cross-chain-swaps-status-ui branch from 569b06f to 0077794 Compare November 27, 2024 20:59

infiniteflower requested a review from micaelae November 27, 2024 21:00

micaelae previously approved these changes Nov 27, 2024

View reviewed changes

infiniteflower added 3 commits November 27, 2024 17:14

chore: rename txHash to txMetaId

4b3c452

chore: rename sourceChainTxHash to sourceChainTxMetaId

b802fec

fix: broken import

b44c49f

infiniteflower dismissed micaelae’s stale review via b44c49f November 27, 2024 22:17

darkwing approved these changes Dec 2, 2024

View reviewed changes

micaelae approved these changes Dec 2, 2024

View reviewed changes

infiniteflower added this pull request to the merge queue Dec 2, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Dec 2, 2024

infiniteflower added this pull request to the merge queue Dec 2, 2024

Merged via the queue into main with commit 19d5637 Dec 2, 2024
75 checks passed

infiniteflower deleted the cross-chain-swaps-status-ui branch December 2, 2024 22:29

github-actions bot locked and limited conversation to collaborators Dec 2, 2024

metamaskbot added the release-12.10.0 Issue or pull request that will be included in release 12.10.0 label Dec 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: cross chain swaps - tx status - UI #28657

feat: cross chain swaps - tx status - UI #28657

infiniteflower commented Nov 22, 2024 •

edited

Loading

github-actions bot commented Nov 22, 2024

metamaskbot commented Nov 22, 2024

metamaskbot commented Nov 22, 2024

metamaskbot commented Nov 22, 2024

metamaskbot commented Nov 22, 2024

metamaskbot commented Nov 26, 2024

jclancy93 commented Nov 27, 2024 •

edited

Loading

jclancy93 commented Nov 27, 2024

jclancy93 left a comment

infiniteflower commented Nov 27, 2024

infiniteflower commented Nov 27, 2024

metamaskbot commented Nov 27, 2024

darkwing commented Nov 27, 2024

infiniteflower commented Nov 28, 2024

darkwing left a comment

darkwing Dec 2, 2024

darkwing Dec 2, 2024

darkwing Dec 2, 2024

darkwing Dec 2, 2024

infiniteflower commented Dec 2, 2024 •

edited

Loading

feat: cross chain swaps - tx status - UI #28657

feat: cross chain swaps - tx status - UI #28657

Conversation

infiniteflower commented Nov 22, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Nov 22, 2024

metamaskbot commented Nov 22, 2024

metamaskbot commented Nov 22, 2024

metamaskbot commented Nov 22, 2024

metamaskbot commented Nov 22, 2024

metamaskbot commented Nov 26, 2024

jclancy93 commented Nov 27, 2024 • edited Loading

jclancy93 commented Nov 27, 2024

jclancy93 left a comment

Choose a reason for hiding this comment

infiniteflower commented Nov 27, 2024

infiniteflower commented Nov 27, 2024

metamaskbot commented Nov 27, 2024

darkwing commented Nov 27, 2024

infiniteflower commented Nov 28, 2024

darkwing left a comment

Choose a reason for hiding this comment

darkwing Dec 2, 2024

Choose a reason for hiding this comment

darkwing Dec 2, 2024

Choose a reason for hiding this comment

darkwing Dec 2, 2024

Choose a reason for hiding this comment

darkwing Dec 2, 2024

Choose a reason for hiding this comment

infiniteflower commented Dec 2, 2024 • edited Loading

infiniteflower commented Nov 22, 2024 •

edited

Loading

jclancy93 commented Nov 27, 2024 •

edited

Loading

infiniteflower commented Dec 2, 2024 •

edited

Loading