Implement new transaction list design #8564

brad-decker · 2020-05-09T04:10:07Z

Main View ScreenShot

Demo Videos

New hooks added - useCancelTransaction: a hook for both determining if a transaction can be canceled (account has enough funds to cover cancelation fee) and creating a memoized function for kicking off the cancelation workflow - useRetryTransaction: a hook for determining the eligibility of retrying a transaction and creating a memoized function to kick off the retry workflow - useI18nContext: a hook that is just a shortcut for importing both `useContext` and `I18nContext` - useMethodData: a hook for tapping into token method data. Includes an effect to make sure that method data is requested if it is not already in `knownMethodData` - useTokenData: a hook for memoized computation of transaction params data on token transfers - useTransactionDisplayData: A hook for analyzing a transaction group and deriving a data shape that can be used for displaying a transaction to the user.

added utility methods

formatDateWithYearContext: the new design calls for displaying the transaction year only if it did not occur this year. This method just provides a way for specifying two different format strings, one to use for current year transactions and a fallback to use for previous years transactions

refactored ListItem component

Previously the ListItem component was very specific to transactions
Moved all of the transaction-related logic into transaction-list-item
Added new props to make the list item component more versatile
Refactored component to be a stateless functional component

refactored TransactionList component

Refactored to a functional component
Combined container logic into component using hooks
Updated the instantiation of TransactionListItems to match new component API

refactored TransactionListItem component

Refactored to a functional component
Combined and greatly modified container logic into the component using hooks
Prepares all props needed to render a ListItem with transaction data

moved TransactionListItemDetails into a Popover

Very minimal changes
Dropped some media queries that adapted the detail view to larger display sizes as its always now in a Popover
the new design of this view is not yet implemented, will do that in a new PR
Modified tests so that the existing tests are run against the first child of the primary wrapper (Runs tests against the original intended target instead of the new Popover)

NEW UX FEATURES

Queued Transactions

When users have more than one pending transaction now all items beyond the first that aren't "Unapproved" transactions will have a "Queued" label and will not have the Loading indicator behind them.

Incremental loading of history

As pointed out in #8572 we are eagerly loading transactions into the history view, but we don't need to. We now have an incremental loader that shows 10 items at a time with a view more button to load more.

updated e2e test selectors for finding currency amounts in the list

Bugs fixed

fixes #8572

whymarrh · 2020-05-12T14:18:07Z

@brad-decker do you think it would be possible to address #8572 here?

brad-decker · 2020-05-12T14:55:12Z

I’ll see what can be done @whymarrh I was thinking the same when I saw the issue report

brad-decker · 2020-05-12T22:47:36Z

@whymarrh this now includes a resolution for #8572 - transaction-list.component now includes a limit for completed transactions and slices through the array of completed transactions. A new "View More" (pending @rachelcope 's feedback) button at the bottom of the transaction list loads an increment of transactions. I have created a constant PAGE_INCREMENT value of 10 for this purpose, but I expect that we could add a new user preference for this in the future (or perhaps 100 is a more reasonable default?)

pictured with a PAGE_INCREMENT of 1:

metamaskbot · 2020-05-13T20:54:06Z

Builds ready [562a1c7]

builds: chrome, firefox, opera
bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
dep viz: background
all artifacts

Page Load Metrics (623 ± 51 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	31	80	39	10	5
		domContentLoaded	371	730	621	106	51
		load	372	731	623	106	51
		domInteractive	370	729	621	106	51

metamaskbot · 2020-05-13T21:44:57Z

Builds ready [9e4cd4b]

builds: chrome, firefox, opera
bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
dep viz: background
all artifacts

Page Load Metrics (671 ± 52 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	35	99	51	21	10
		domContentLoaded	394	806	669	111	53
		load	414	808	671	109	52
		domInteractive	394	806	668	111	53

Co-authored-by: Mark Stacey <[email protected]>

whymarrh · 2020-05-26T17:04:43Z

ui/app/hooks/useMethodData.js

+import { getKnownMethodData } from '../selectors/selectors'
+
+/**
+ * useMethodData


Nit: can we add a single line description of the function here instead? Maybe extracted from the larger description below.

Do you like:
* Access known method data and attempt to resolve unknown method data for this?

whymarrh · 2020-05-26T17:05:44Z

ui/app/hooks/useRetryTransaction.js

+
+
+/**
+ * useRetryTransaction


Nit: can we add a single line description of the function here instead? Maybe extracted from the larger description below.

the description is now short enough to meet this need. Should I just omit the name? new:

/** * Provides a reusable hook that, given a transactionGroup, will return * a method for beginning the retry process * @param {Object} transactionGroup - the transaction group * @return {Function} */

whymarrh · 2020-05-26T17:06:50Z

ui/app/hooks/useTransactionDisplayData.js

+ */
+
+/**
+ * useTransactionDisplayData


Nit: can we add a single line description of the function here instead? Maybe extracted from the larger description below.

/** * Get computed values used for displaying transaction data to a user *

whymarrh · 2020-05-26T17:07:26Z

ui/app/hooks/useCancelTransaction.js

+import { getConversionRate, getSelectedAccount } from '../selectors'
+
+/**
+ * useCancelTransaction


Nit: can we add a single line description of the function here instead? Maybe extracted from the larger description below.

/** * Determine whether a transaction can be cancelled and provide a method to * kick off the process of cancellation.

metamaskbot · 2020-05-26T18:19:27Z

Builds ready [b695366]

builds: chrome, firefox, opera
bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
dep viz: background
all artifacts

Page Load Metrics (877 ± 81 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	39	117	66	20	10
		domContentLoaded	433	1064	875	170	82
		load	441	1065	877	169	81
		domInteractive	432	1064	874	170	82

metamaskbot · 2020-05-26T19:57:53Z

Builds ready [7966975]

builds: chrome, firefox, opera
bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
dep viz: background
all artifacts

Page Load Metrics (587 ± 62 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	31	116	43	20	10
		domContentLoaded	339	729	585	130	62
		load	340	730	587	130	62
		domInteractive	338	728	585	130	62

brad-decker · 2020-05-26T19:58:46Z

@whymarrh and @Gudahtt -- that last change was made and tests passing. 🤞

Gudahtt

LGTM!

whymarrh

Thanks for championing this across the finish line! This is a huge improvement. 🎉

The display logic from this component was inlined into the `TransactionList` component in #8564.

brad-decker changed the base branch from develop to use-currency-hooks May 9, 2020 04:10

brad-decker force-pushed the transaction-detail-and-history branch from d8617f5 to cb5b5b4 Compare May 9, 2020 04:11

brad-decker force-pushed the use-currency-hooks branch from 6b5177b to 5ed3ab5 Compare May 11, 2020 11:08

brad-decker force-pushed the transaction-detail-and-history branch from cb5b5b4 to 982911d Compare May 11, 2020 11:16

brad-decker force-pushed the use-currency-hooks branch 5 times, most recently from 382ce91 to aea45cf Compare May 11, 2020 20:23

brad-decker force-pushed the use-currency-hooks branch 5 times, most recently from ef91741 to 08cb87d Compare May 12, 2020 17:31

brad-decker force-pushed the transaction-detail-and-history branch from 982911d to c6281ec Compare May 12, 2020 22:34

brad-decker changed the base branch from use-currency-hooks to develop May 12, 2020 22:47

brad-decker force-pushed the transaction-detail-and-history branch 2 times, most recently from ee27a7c to 0b730ed Compare May 12, 2020 23:10

brad-decker mentioned this pull request May 13, 2020

broaden usage options for list-item #8587

Merged

brad-decker changed the base branch from develop to refactor-list-item May 13, 2020 19:23

brad-decker force-pushed the transaction-detail-and-history branch 2 times, most recently from 32d55e8 to 562a1c7 Compare May 13, 2020 20:19

brad-decker force-pushed the transaction-detail-and-history branch from 562a1c7 to 9e4cd4b Compare May 13, 2020 21:22

brad-decker force-pushed the transaction-detail-and-history branch from 9e4cd4b to 444aed1 Compare May 13, 2020 21:45

brad-decker marked this pull request as ready for review May 13, 2020 21:47

brad-decker and others added 11 commits May 26, 2020 09:16

Update ui/app/hooks/useTransactionDisplayData.js

cf22a07

Co-authored-by: Mark Stacey <[email protected]>

address change requests

df66632

add transferfrom, care for lack of origin on sig req

dea9843

add categories and tokens to integration tests

a05cf75

use constants and I18n on strings

e6cc7e8

show the last page of results

3c4c26d

make token related logic clearer

6a1c2d5

reword comment

5a8f1b4

add fallback for missing token data

7ff0609

use correct category for approve

93d59cc

approval uses tokenData

d9b4b83

whymarrh reviewed May 26, 2020

View reviewed changes

resolving feedback items from 5/26

b695366

brad-decker force-pushed the transaction-detail-and-history branch from c702933 to b695366 Compare May 26, 2020 17:58

restore original logic of setting selected token

7966975

brad-decker requested review from whymarrh and Gudahtt May 26, 2020 19:58

Gudahtt approved these changes May 26, 2020

View reviewed changes

whymarrh approved these changes May 26, 2020

View reviewed changes

brad-decker merged commit 706dc02 into develop May 26, 2020

brad-decker deleted the transaction-detail-and-history branch May 26, 2020 20:49

Gudahtt added a commit that referenced this pull request May 28, 2020

Remove unused TransactionTimeRemaining component

0107804

The display logic from this component was inlined into the `TransactionList` component in #8564.

Gudahtt mentioned this pull request May 28, 2020

Remove unused TransactionTimeRemaining component #8672

Closed

This was referenced Jun 1, 2020

Add nonce to transaction details #8716

Merged

Show sent token amounts in transaction list when ETH is selected #6055

Closed

Make "speed up" and "cancel" more visible #5374

Closed

tmashuang mentioned this pull request Nov 10, 2020

History of failed transactions buried #6950

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement new transaction list design #8564

Implement new transaction list design #8564

brad-decker commented May 9, 2020 •

edited

Loading

whymarrh commented May 12, 2020

brad-decker commented May 12, 2020

brad-decker commented May 12, 2020 •

edited

Loading

metamaskbot commented May 13, 2020

metamaskbot commented May 13, 2020

whymarrh May 26, 2020

brad-decker May 26, 2020

whymarrh May 26, 2020

brad-decker May 26, 2020

whymarrh May 26, 2020

brad-decker May 26, 2020

whymarrh May 26, 2020

brad-decker May 26, 2020

metamaskbot commented May 26, 2020

metamaskbot commented May 26, 2020

brad-decker commented May 26, 2020

Gudahtt left a comment

whymarrh left a comment



		/**
		* useRetryTransaction

Implement new transaction list design #8564

Implement new transaction list design #8564

Conversation

brad-decker commented May 9, 2020 • edited Loading

NEW UX FEATURES

Bugs fixed

whymarrh commented May 12, 2020

brad-decker commented May 12, 2020

brad-decker commented May 12, 2020 • edited Loading

metamaskbot commented May 13, 2020

metamaskbot commented May 13, 2020

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

metamaskbot commented May 26, 2020

metamaskbot commented May 26, 2020

brad-decker commented May 26, 2020

Gudahtt left a comment

Choose a reason for hiding this comment

whymarrh left a comment

Choose a reason for hiding this comment

brad-decker commented May 9, 2020 •

edited

Loading

brad-decker commented May 12, 2020 •

edited

Loading