feat: SOL-80 transaction details #29323

zone-live · 2024-12-18T14:46:54Z

Description

This PR adds the new transaction details modal for the non-evm networks, BTC and SOL.

Screen.Recording.2024-12-17.at.12.27.40.mov

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/SOL-80

Manual testing steps

Testing this is a bit extensive, but if you still want to give it a go these are the steps:

Checkout this branch and run yarn
Update the file shared/lib/accounts/solana-wallet-snap.ts with:
export const SOLANA_WALLET_SNAP_ID: SnapId = 'local:http://localhost:8080' as SnapId;
Update the filtering code in MultichainTransactionsController under node modules to return transactions for devnet, currently only returns for mainnet. It's under node_modules/@metamask/multichain-transactions-controller/dist/MultichainTransactionsController.mjs and node_modules/@metamask/multichain-transactions-controller/dist/MultichainTransactionsController.cjs with:

MultichainNetwork.SolanaDevnet
instead of
MultichainNetwork.Solana

Run the extension with yarn start:flask
Run the Snap: https://github.com/MetaMask/snap-solana-wallet
- Clone it
- Run yarn
- Run yarn start
Go to http://localhost:3000/
Install the Snap
In the extension, go to the Settings > Experimental > Enable Solana account
Create a Solana account from the account-list menu
Fund the new Solana account with some SOL, use a faucet like https://faucet.solana.com/
the initial Tx with funds from the faucet will display in the activity tab
Click in it and you will see the Tx details modal
Thats it! 🎉

Screenshots/Recordings

Before

Didn't exist.

After

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.

…roller

…github.com:MetaMask/metamask-extension into SOL-46-adds-the-multichain-transactions-controller

…roller

github-actions · 2024-12-18T14:47:08Z

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.

…o SOL-80-transaction-details

metamaskbot · 2025-01-29T15:09:27Z

Builds ready [d6d7a16]

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

Page Load Metrics (1613 ± 64 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1429	1925	1614	134	64
		domContentLoaded	1421	1869	1588	126	61
		load	1429	1918	1613	134	64
		domInteractive	22	99	47	23	11
		backgroundConnect	8	83	29	22	10
		firstReactRender	15	74	36	24	11
		getState	5	50	13	13	6
		initialActions	0	0	0	0	0
		loadScripts	1005	1404	1145	114	55
		setupStore	8	58	16	17	8
		uiStartup	1602	2107	1833	139	67

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

zone-live · 2025-01-29T17:37:32Z

metamaskbot · 2025-01-29T18:07:16Z

Builds ready [3403374]

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

Page Load Metrics (1800 ± 93 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	282	2298	1734	389	187
		domContentLoaded	1535	2285	1764	195	94
		load	1544	2291	1800	194	93
		domInteractive	26	92	44	22	11
		backgroundConnect	10	90	39	29	14
		firstReactRender	16	99	43	27	13
		getState	5	64	16	15	7
		initialActions	0	0	0	0	0
		loadScripts	1113	1723	1304	175	84
		setupStore	9	91	33	26	13
		uiStartup	1770	2637	2107	277	133

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-01-30T10:15:34Z

Builds ready [6996ee1]

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

Page Load Metrics (1539 ± 44 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1382	1768	1538	86	41
		domContentLoaded	1377	1708	1521	81	39
		load	1381	1771	1539	91	44
		domInteractive	23	94	39	21	10
		backgroundConnect	8	66	21	18	8
		firstReactRender	14	68	29	20	10
		getState	4	47	9	12	6
		initialActions	0	1	0	0	0
		loadScripts	972	1287	1103	75	36
		setupStore	7	57	22	22	10
		uiStartup	1553	1964	1734	95	45

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

ui/components/app/transaction-list/transaction-list.component.js

ui/components/app/multichain-transaction-details-modal/multichain-transaction-details-modal.tsx

…mask-extension into SOL-80-transaction-details

metamaskbot · 2025-02-04T10:28:06Z

Builds ready [684e9b6]

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

Page Load Metrics (1819 ± 62 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	377	2088	1615	512	246
		domContentLoaded	1543	2076	1799	134	64
		load	1598	2090	1819	128	62
		domInteractive	26	99	47	27	13
		backgroundConnect	9	60	26	18	8
		firstReactRender	16	103	43	26	13
		getState	4	63	16	18	8
		initialActions	0	44	2	10	5
		loadScripts	1114	1578	1318	115	55
		setupStore	7	58	15	14	7
		uiStartup	1776	2964	2127	245	117

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

ccharly

LGTM (I will update the URL handling in another PR, as mentionned in some comments).

I've only tested the storybook part, but the video shows everything and the storybook displays properly.

ccharly · 2025-02-04T10:47:42Z

ui/components/app/multichain-transaction-details-modal/helpers.ts

+ * @param chainId - Network chain ID
+ * @returns Full URL to transaction in block explorer, or empty string if no explorer URL
+ */
+export const getTransactionUrl = (txId: string, chainId: string): string => {


As discussed internally, I think this kind of logic will not scale well in the future.

I have prepared another PR that will use format-strings instead to build block explorer URLs:

feat(multichain): add block explorer format URLs #30085

I'll make the changes to support transactions once we have merged this PR!

ccharly · 2025-02-04T10:47:47Z

ui/components/app/multichain-transaction-details-modal/helpers.ts

+ * @param chainId - Network chain ID
+ * @returns Full URL to address in block explorer, or empty string if no explorer URL
+ */
+export const getAddressUrl = (address: string, chainId: string): string => {


ccharly · 2025-02-04T11:24:46Z

ui/components/app/multichain-transaction-details-modal/helpers.ts

+
+  // It's typical for Solana timestamps to use seconds, while JS Dates and most EVM chains use milliseconds.
+  // Hence we needed to use the conversion `timestamp < 1e12 ? timestamp * 1000 : timestamp` for it to work.
+  const timestampMs = timestamp < 1e12 ? timestamp * 1000 : timestamp;


Since timestamps must be UNIX timestamp, they should be using "seconds" already, so I think we should just use timestamp * 1000.

However, since only the Solana Snap implements this for now, I'll keep it as is and we will revisit this later once we have stabilized everything!

ccharly · 2025-02-04T11:26:31Z

...nents/app/multichain-transaction-details-modal/multichain-transaction-details-modal.test.tsx

+  it('shows transaction ID in shortened format', () => {
+    renderComponent();
+    const txId = mockTransaction.id;
+    const shortenedTxId = screen.getByText(shortenAddress(txId));


Nit: But this should have been shortenTransactionId here.

Will add in an other PR

zone-live and others added 25 commits December 9, 2024 10:16

chore: controllers and selector

0f5ffe2

chore: ui display

2b86780

chore: adds activity list and code fences

38e51f3

chore: adds tests and lint fixes

e7174a4

Merge branch 'main' into SOL-46-adds-the-multichain-transactions-cont…

7a853df

…roller

Merge branch 'main' into SOL-46-adds-the-multichain-transactions-cont…

3a2c370

…roller

chore: clean yarn lock file

b6efd42

chore: clean up

1c86b76

Update LavaMoat policies

a6a92d6

chore: adds missing code fences

f79963d

chore: update with main

13a361c

Merge branch 'SOL-46-adds-the-multichain-transactions-controller' of …

181c5ee

…github.com:MetaMask/metamask-extension into SOL-46-adds-the-multichain-transactions-controller

chore: updates yarn lock

b1be837

chore: remove unused locale

6637880

chore: remove unnecessary assert

c8af9bc

chore: update

f567362

chore: remove unnecessary assert

a1f3d21

chore: adds the ability to filter by mainnet txs only

c465217

chore: lint fix

f39282a

chore: lint undo

e6543dc

Merge branch 'main' into SOL-46-adds-the-multichain-transactions-cont…

43a89fb

…roller

chore: adds tests

0fb59a4

chore: lint fix

128e4a6

Merge branch 'main' into SOL-46-adds-the-multichain-transactions-cont…

8bb949c

…roller

chore: reset to main the policies and yarn lock, fix prettier

08c396f

metamaskbot added the INVALID-PR-TEMPLATE PR's body doesn't match template label Dec 18, 2024

chore: lint fix

6ad4665

metamaskbot removed the INVALID-PR-TEMPLATE PR's body doesn't match template label Dec 18, 2024

Merge branch 'SOL-46-adds-the-multichain-transactions-controller' int…

915a0e9

…o SOL-80-transaction-details

zone-live and others added 4 commits January 29, 2025 15:41

chore: small update for solana timestaps

4be87de

Merge branch 'main' into SOL-80-transaction-details

14dd87f

chore: test

af5bb11

chore: update privacy snapshot

3403374

zone-live requested a review from a team as a code owner January 29, 2025 17:32

zone-live requested review from aganglada and ccharly January 29, 2025 17:52

aganglada previously approved these changes Jan 30, 2025

View reviewed changes

chore: reset file

5d0d442

zone-live dismissed aganglada’s stale review via 5d0d442 January 30, 2025 09:38

Merge branch 'main' into SOL-80-transaction-details

6996ee1

aganglada previously approved these changes Jan 30, 2025

View reviewed changes

ccharly reviewed Feb 3, 2025

View reviewed changes

ccharly mentioned this pull request Feb 4, 2025

feat(multichain): add block explorer format URLs #30085

Draft

7 tasks

zone-live added 2 commits February 4, 2025 09:51

chore: review points

c29d881

Merge branch 'SOL-80-transaction-details' of github.com:MetaMask/meta…

684e9b6

…mask-extension into SOL-80-transaction-details

zone-live dismissed aganglada’s stale review via 684e9b6 February 4, 2025 09:52

aganglada approved these changes Feb 4, 2025

View reviewed changes

ccharly approved these changes Feb 4, 2025

View reviewed changes

zone-live added this pull request to the merge queue Feb 4, 2025

Merged via the queue into main with commit 86334eb Feb 4, 2025
71 checks passed

zone-live deleted the SOL-80-transaction-details branch February 4, 2025 12:40

github-actions bot locked and limited conversation to collaborators Feb 4, 2025

metamaskbot added the release-12.13.0 Issue or pull request that will be included in release 12.13.0 label Feb 4, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: SOL-80 transaction details #29323

feat: SOL-80 transaction details #29323

zone-live commented Dec 18, 2024 •

edited

Loading

github-actions bot commented Dec 18, 2024

metamaskbot commented Jan 29, 2025

zone-live commented Jan 29, 2025

metamaskbot commented Jan 29, 2025

metamaskbot commented Jan 30, 2025

metamaskbot commented Feb 4, 2025

ccharly left a comment

ccharly Feb 4, 2025

ccharly Feb 4, 2025

ccharly Feb 4, 2025

ccharly Feb 4, 2025

zone-live Feb 4, 2025

feat: SOL-80 transaction details #29323

feat: SOL-80 transaction details #29323

Conversation

zone-live commented Dec 18, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Dec 18, 2024

metamaskbot commented Jan 29, 2025

zone-live commented Jan 29, 2025

metamaskbot commented Jan 29, 2025

metamaskbot commented Jan 30, 2025

metamaskbot commented Feb 4, 2025

ccharly left a comment

Choose a reason for hiding this comment

ccharly Feb 4, 2025

Choose a reason for hiding this comment

ccharly Feb 4, 2025

Choose a reason for hiding this comment

ccharly Feb 4, 2025

Choose a reason for hiding this comment

ccharly Feb 4, 2025

Choose a reason for hiding this comment

zone-live Feb 4, 2025

Choose a reason for hiding this comment

zone-live commented Dec 18, 2024 •

edited

Loading