Feature: Transaction Insights #12881

alaahd · 2021-11-29T16:29:02Z

Explanation:

This PR adds the Transactions Insights feature and supporting functionality. This will give users more information about what is happening when sending a transaction to a contract. The core of the functionality is displayed below:

transactioninsights.mp4

To achieve this, this PR uses https://github.com/trufflesuite/truffle/tree/develop/packages/decoder to decode transaction details which are retrieved from a codefi api

The above screen capture demonstrates the transaction decoding feature and the use of the new modals for viewing and editing account and nickname information.

In addition, the PR adds the transaction decoding to the transaction details modal that is opened when clicking list items in the transaction activity list. This addition also updates the styles/layouts of that modal.

Manual testing steps:

This can be done on the Kovan network.

Create a transaction that requires interaction with a contract. Uniswap is a good example
Inspect the "Data" tab to see the transaction details
Click an address in the transaction details and edit the nickname
Confirm the transaction
Click the transaction in the activity list
View the transaction information
Click "Transaction Data"
See the Transaction Data including the nickname you previously edited.

Screenshots and videos:

transaction-insights-activity-list.mp4

github-actions · 2021-11-29T16:29:17Z

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.

danjm

So there are few changes we need to this PR.

Here is how I would handle them, in order of priority:

Rebase onto develop, so that the changes from this PR are not duplicated Created a Nickname popover #12632
Refactor to use the current "Popover" pattern for showing modals, and then refactor to use react-redux hooks within functional components instead of "container" components. The "Popover" pattern is to import the respective popover component into the appropriate parent, pass the props from that parent directly to the component, and then conditionally render the component (and not to use redux for storing the data or indicating whether the popover should be shown). ui/components/app/qr-hardware-popover/qr-hardware-popover.js is an example
It is probably best to have the confirm screen changes and the transaction details changes in separate PRs. This PR is big. Separate PRs will help code reviewers focus and it is possible that some of the code review can be parallelized if in separate PRs
Move the logic in the useEffect of the transaction-decoding component to help methods in a util file
Address the small comments

There is also some clean up that needs to happen of css, but that can be separate.

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

ui/components/ui/nickname-popover/nickname-popover.component.js

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

ui/components/app/transaction-decoding/components/ui/copy-raw-data/index.scss

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

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

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

ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js

gnidan · 2021-11-30T10:03:24Z

I have read the CLA Document and I hereby sign the CLA

gnidan · 2021-11-30T14:38:19Z

Gabe raised the issue that the "copy transaction button" copies the text "[object Object]"

ui/components/app/transaction-decoding/components/decoding/address/address.component.js

alaahd · 2021-11-30T16:36:33Z

I have read the CLA Document and I hereby sign the CLA

danjm · 2021-12-01T13:11:14Z

ui/components/app/modals/nickname-popovers/nickname-popovers.component.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';


This file controls the display of the two nickname popovers:

danjm · 2021-12-01T13:12:22Z

ui/components/app/transaction-decoding/components/decoding/address/address.component.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';


This component controls the display and behaviour of each icon+address in the decoded transaction information:

danjm · 2021-12-01T13:13:16Z

ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';


This is for the "Copy raw transaction data" component in the hex tab:

danjm · 2021-12-01T13:14:26Z

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

@@ -0,0 +1,224 @@
+import React, { useContext, useEffect, useState } from 'react';


This component is responsible for decoded transaction data, the primarily highlight of this feature/PR:

danjm · 2021-12-01T13:16:09Z

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

@@ -4,16 +4,17 @@ import copyToClipboard from 'copy-to-clipboard';
 import { getBlockExplorerLink } from '@metamask/etherscan-link';


The changes in this file are responsible for the layout changes in the transaction details modal:

danjm · 2021-12-01T13:18:18Z

ui/components/ui/disclosure/disclosure.js

@@ -0,0 +1,51 @@
+import React, { useState, useRef, useEffect } from 'react';


This component handles the togglable dropdown ux and functionality shown below:

disclosure.mp4

danjm · 2021-12-01T13:20:17Z

ui/components/ui/sender-to-recipient/sender-to-recipient.component.js

@@ -8,6 +8,7 @@ import { shortenAddress } from '../../../helpers/utils/util';
 import AccountMismatchWarning from '../account-mismatch-warning/account-mismatch-warning.component';


The changes in this file account for the new behaviour of clicking the address shown at the top of the confirm screen (and in the transaction details modal):

sendertorecipientnew.mp4

ui/components/ui/nickname-popover/nickname-popover.component.js

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

app/images/icons/collapse.svg

app/images/icons/expand.svg

jpuri

👍 nice work

Please address feedbacks before merging.

darkwing · 2021-12-01T15:50:08Z

ui/components/app/transaction-decoding/components/decoding/address/address.component.js

+        className="address__name"
+        onClick={() => setShowNicknamePopovers(true)}
+      >
+        {addressOnly


Not a blocker but I'd prefer if this was assigned as a variable above the JSX.

done in 671e006

darkwing · 2021-12-01T15:50:40Z

ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js

+
+  return (
+    <div className="copy-raw-data">
+      <Tooltip position="right" title={copied ? 'Copied!' : ''}>


We should use copiedExclamation localization here

darkwing · 2021-12-01T15:51:47Z

ui/components/app/transaction-decoding/components/ui/copy-raw-data/index.scss

+  }
+
+  &__icon {
+    padding-right: 6px;


padding-inline-end would be more friend to RTL.

darkwing · 2021-12-01T15:55:05Z

ui/components/app/transaction-decoding/index.scss

+      font-size: 14px;
+      position: relative;
+      margin: 12px 0 4px;
+      padding-left: 22px;


padding-inline-start would be good here.

darkwing · 2021-12-01T16:08:40Z

ui/components/app/transaction-decoding/index.scss

+      cursor: pointer;
+
+      & + .tx-insight-content {
+        padding-left: 14px;


padding-inline-start would be good here.

alaahd requested a review from a team as a code owner November 29, 2021 16:29

alaahd requested a review from adonesky1 November 29, 2021 16:29

danjm requested changes Nov 29, 2021

View reviewed changes

alaahd force-pushed the feature/address-nicknames branch from a0c309d to 3ca30e9 Compare November 30, 2021 10:02

gnidan reviewed Nov 30, 2021

View reviewed changes

ui/components/app/transaction-decoding/components/decoding/address/address.component.js Outdated Show resolved Hide resolved

gnidan force-pushed the feature/address-nicknames branch from 70b4e64 to 851af60 Compare November 30, 2021 20:05

Alaa Hadad and others added 20 commits November 30, 2021 20:03

integration for tx decoding confirmation and history view

afab4e0

upgrading @truffle/decoder to latest release 5.1.0

20ed62a

Update acorn and colors patches

9d4c034

feat: remove redundant styling

74a7dc0

feat: basic integration for nickname components

a06ad01

feat: wiring functionality of adding new nickname

dcbbc30

feat: wire functionality of showing nickname modal

0402942

feat: link the nickname popover with add/update popover

bd66a83

feat: moving forward with address nicknames integration

8e65fa4

feat: fixing a bug related to passing chainId in addressBook

73aefb5

feat: populating memo prop in addressbook entry

6a3ee2f

feat: add explorer link

c5c3cc3

feat: bug fixing update nickname component

f4d0d9e

feat: fix proptypes

f0714a1

feat: adding tooltip for copying nickname address

77b2c63

featL fix styling for tx-details page

3d9f0e4

feat: optimize code for error handling

56cc3b9

feat: limiting transaction decoding to tx with data

6037bbd

feat: remove tree UI component

eaf6001

feat: adding request to check for tx decoding supported networks

f781f92

danjm reviewed Dec 1, 2021

View reviewed changes

jpuri reviewed Dec 1, 2021

View reviewed changes

ui/components/ui/nickname-popover/nickname-popover.component.js Show resolved Hide resolved

segun reviewed Dec 1, 2021

View reviewed changes

ui/components/app/transaction-decoding/transaction-decoding.component.js Outdated Show resolved Hide resolved

jpuri reviewed Dec 1, 2021

View reviewed changes

app/images/icons/collapse.svg Show resolved Hide resolved

jpuri reviewed Dec 1, 2021

View reviewed changes

app/images/icons/expand.svg Show resolved Hide resolved

Remove fake await

5ffefd4

danjm dismissed their stale review via 5ffefd4 December 1, 2021 14:57

jpuri previously approved these changes Dec 1, 2021

View reviewed changes

segun previously approved these changes Dec 1, 2021

View reviewed changes

darkwing reviewed Dec 1, 2021

View reviewed changes

adonesky1 dismissed jpuri’s stale review via 5ffefd4 December 1, 2021 16:10

danjm added 2 commits December 1, 2021 12:40

Clean up

1efaa13

Clean up

671e006

danjm dismissed segun’s stale review via 671e006 December 1, 2021 16:13

danjm approved these changes Dec 1, 2021

View reviewed changes

jpuri approved these changes Dec 1, 2021

View reviewed changes

darkwing approved these changes Dec 1, 2021

View reviewed changes

danjm merged commit e056c88 into MetaMask:develop Dec 1, 2021

github-actions bot locked and limited conversation to collaborators Dec 1, 2021

gnidan deleted the feature/address-nicknames branch December 1, 2021 19:33

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Transaction Insights #12881

Feature: Transaction Insights #12881

alaahd commented Nov 29, 2021 •

edited by danjm

Loading

github-actions bot commented Nov 29, 2021 •

edited

Loading

danjm left a comment

gnidan commented Nov 30, 2021

gnidan commented Nov 30, 2021

alaahd commented Nov 30, 2021

danjm Dec 1, 2021

danjm Dec 1, 2021

danjm Dec 1, 2021

danjm Dec 1, 2021

danjm Dec 1, 2021

danjm Dec 1, 2021

danjm Dec 1, 2021

jpuri left a comment

darkwing Dec 1, 2021

danjm Dec 1, 2021

darkwing Dec 1, 2021

danjm Dec 1, 2021

darkwing Dec 1, 2021

danjm Dec 1, 2021

darkwing Dec 1, 2021

danjm Dec 1, 2021

darkwing Dec 1, 2021

danjm Dec 1, 2021

		@@ -0,0 +1,224 @@
		import React, { useContext, useEffect, useState } from 'react';

		@@ -4,16 +4,17 @@ import copyToClipboard from 'copy-to-clipboard';
		import { getBlockExplorerLink } from '@metamask/etherscan-link';

		@@ -0,0 +1,51 @@
		import React, { useState, useRef, useEffect } from 'react';

		@@ -8,6 +8,7 @@ import { shortenAddress } from '../../../helpers/utils/util';
		import AccountMismatchWarning from '../account-mismatch-warning/account-mismatch-warning.component';

Feature: Transaction Insights #12881

Feature: Transaction Insights #12881

Conversation

alaahd commented Nov 29, 2021 • edited by danjm Loading

Explanation:

Manual testing steps:

Screenshots and videos:

github-actions bot commented Nov 29, 2021 • edited Loading

danjm left a comment

Choose a reason for hiding this comment

gnidan commented Nov 30, 2021

gnidan commented Nov 30, 2021

alaahd commented Nov 30, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jpuri left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alaahd commented Nov 29, 2021 •

edited by danjm

Loading

github-actions bot commented Nov 29, 2021 •

edited

Loading