The UI would crash upon deleting a contact from the contact list. This
happened for two reasons: the deletion could result in a re-render
before the `history.push` finished navigating back to the contact list
(it was a race condition), and the contact entry left behind an invalid
`identities` entry when it was removed.
The first problem was fixed by making the container components for view
and edit contact more tolerant of being passed an `address` that
doesn't correspond to a contact. If they are given an address without a
contact, `null` is passed to the component via the `address` prop. The
component will redirect back to the list when this happens instead
rendering. This is more awkward than I'd like, but it was the most
sensible way of handling this I could think of without making much more
drastic changes to how we're handling routing here.
The second problem was caused by the `setAccountLabel` call, which was
used to ensure the contact entry for any wallet accounts was kept
in-sync with the account label. This was being called even for non-
wallet accounts though, which is where this problem arose. This step is
now skipped for non-wallet accounts.
Fixes#9019
There were two cases where bad gas estimate data was resulting in
crashes. These two places have been wrapped in a `try ... catch` to
handle the absence of gas estimate data.
The errors are still reported to Sentry so that we can track down the
root cause of this corrupted gas estimate data at some point in the
future. We plan on adding additional context to Sentry soon that should
help with this.
Fixes#8992
The Home page component is responsible for closing the notification
window and triggering redirects in various situations. When this
happens, the home page is briefly rendered before the redirect/close
happens. This is a waste of cycles, and is distracting for users.
We now render nothing if the page is in the process of redirecting or
reloading. None of the redirects handled in this component are for sub-
pages, so we don't need the Home page to render in any of these cases.
We were already doing this for redirects to transaction confirmations,
but now we're taking the same approach for all redirects, and for the
cases where the window is closed.
The notification window is now kept open after the connect flow if
there are still pending confirmations. Previously, the notification
window would be closed after the connect flow no matter what, and any
pending confirmations would never be shown to the user.
This was accomplished by redirecting to the home screen after the
connect flow. The logic for deciding whether or not to close the window
is already handled by the home page. This does have the unfortunate
side-effect of briefly rendering the home page before the window
closes, but this is a minor problem that exists already in a number of
other scenarios, and it will be fixed in a subsequent PR.
Fixes#8973
The loading indication had remained after successfully signing with
`personal_sign`. This mistake was introduced accidentally in #8434.
This is noticeable if you confirm the signature in the popup UI or
fullscreen UI, as they remain open after signing. The notification UI
closes after signing without waiting for this loading indicator to be
removed.
The styles for the `ListItem` component were recently broken in #8989
because of a change made by `stylelint`. It incorrectly removed the
`fr` unit because of the `length-zero-no-unit` rule. This was a bug
that has since been fixed in `stylelint`; it should have left the `fr`
unit in this case.
The vendored CSS required by `react-tippy` is now imported instead of
inlined. This should result in no functional changes, and it makes it
easier to lint our styles.
This was originally inlined in #3120 when `react-tippy` was first added
to the project. It has not been updated since then, so I don't think
there's any risk this has gotten out-of-sync.
This tests the `personal_sign` method using the test dapp. This test
reflects part of the `confirm-sig-requests` integration test, which
tests the confirmation of a `personal_sign` signature request.
A `data-testid` prop was added to the 'Sign' button on the signature
request confirmation page, to make it easier to select the 'Sign'
button reliably.
Both the primary and secondary balance components on `EthOverview` now
have `data-testid` props, so that they can be more easily referenced in
e2e tests.
This required the addition of a `data-testid` prop to the component
`UserPreferencedCurrencyDisplay`, which is passed through to the
underlying `CurrencyDisplay` component.
When a suggested token was resolved in a different window, the popup
or notification UI could get stuck with an empty suggested token list,
where either action would throw an error.
This case is now handled by either redirecting or closing the window,
in the popup and notification cases respectively. This check is
performed on both component mount and update.
The "confirm suggested token" page allowed the confirm button to be
pressed even when there were no tokens to confirm. This can happen
sometimes when the page is in the process of redirecting.
The inline speedup and speedup cancellation buttons in the activity log
were broken. An exception would be thrown upon either button being
clicked, and nothing would happen from the user's perspective.
Both handlers were being passed a transaction id, which was a holdover
from before the transaction list redesign. The handlers passed for
these two actions now have the transaction id embedded, so it doesn't
need to be passed in anymore. They expect the click event to be passed
through instead.
The handlers passed also didn't handle closing the transaction details
modal when clicked. After fixing the first problem, they still didn't
work because the speedup/cancel dialog was shown behind the transaction
details modal.
Both issues are now fixed. Both buttons now close the transaction
details modal, and trigger the appropriate action.
Previously the `getMessage` function would throw if a substitution was
falsey. Now it will accept any substitution, including `undefined`.
A substitution of `null` or `undefined` will still be reported to
Sentry and printed to the console as an error, but it will not
interrupt execution. Any `null` or `undefined` substitutions will be
rendered as empty strings.
Ideally we'd never pass in `null` or `undefined` as a substitution, but
in practice this sometimes just occurs breifly between renders, which
isn't a severe enough problem to justify crashing the UI.
The detection of React component substitutions has been updated as
well, to ensure that `null` values aren't counted as React
substitutions.
The CSS `opacity` rule accepts percentages on newer browsers, but some
older browser versions we support (e.g. Firefox v60) doesn't support
them. A number is now used instead, which is supported by all browsers
we support.
We were including the polyfill for the `Intl.RelativeTimeFormat` API,
but we weren't including any locale data. This polyfill doesn't work
without the locale data for whichever locale you're formatting.
The data for all locales we support is now included. The locale data
is loaded from disk as-needed (during app startup, and upon each change
in locale).
The `getMessage` function in `i18n-helper` was assuming that any
substitutions passed into the transaction function were used by the
corresponding localized message. However, some messages are
intentionally ignoring substitutions passed in. This was done to
simplify the UI logic, so the same substitutions could be passed in for
many different messages, even if some don't use them.
For example, `transactionCancelSuccess` is passed two substitutions but
only uses the second one. `transactionErrored` is passed in two, but
uses neither.
`getMessage` has been updated to no longer make that assumption. It
will now only throw an error if the localized message expects a
substitution that was not given. A given substitution that is unused
results in no error.
There was a case where the `activeTab.origin` was not set, yet the user
could still navigate to the "Connected accounts" modal, which assumes
that `activeTab.origin` is set. This would happen in Firefox when the
user opened the popup on a page internal to Firefox (e.g.
`about:blank`). The connected status indicator would still be shown,
but the UI would crash when it was clicked.
The connected status indicator is now hidden whenever
`activeTab.origin` is falsy. The 'Unconnected account' alert has also
been made impossible to trigger in that circumstance.
The designs for the connect flow show the site `origin` below the site
icon rather than the site name. This was done for security reasons,
and because the site name is often set to an unwieldy long string.
This was accidentally undone in #8815 in the process of fixing a
separate bug. The origin has now been restored. More specific PropTypes
have been set on each use of the `domainMetadata` prop as well.
The account list on the unconnected account alert was in the wrong
order; they were in the order provided by the permissions controller
rather than by last active.
The accounts are now sorted correctly; first by last active, second by
the keyring controller order.
The `getPermittedIdentitiesForCurrentTab` selector was removed because
it is no longer used.
The mobile sync redirect was failing due to a typo in a prop. It would
fail to redirect correctly in the event of a timeout, or after pressing
'Cancel'.
The 'copy-to-clipboard' icon was removed in #8190, and replaced with a
new 'Copy' icon component. It was still being used in two places
though, on the confirmation page for decryption and on the reveal seed
phrase screen..
The new Copy icon is now used in these two places instead. It has been
given a size of '17' to match the old icon size.
We were showing exported private keys in all upper case. This is
atypical, and many other wallets (e.g. MyCrypto) expect private keys
for imported accounts to be lower-cased. Our own account import is
tolerant of either case.
in both permission flows the checkboxes were using the fa-check icon, and in the case
of the connected accounts popover the color of the icon was wrong. It occurred to me
while simply fixing that color would have been easier, we will be adding permissions
at some point in the future that a user will be able to 'uncheck'. This PR replaces
the usages of those icons with the Checkbox component that is equipped to handle the
interactivity of checking/unchecking.
Fixes#8835
In cases where the registry failed to load, and the sig is set to `{}` on this line: e85b162651/ui/app/helpers/utils/transactions.util.js (L78) this proceeds to set the method prefix to `{}` in knownMethodData.
Additionally check if the method prefix object is empty to proceed call getMethodDataAsync again.
I could only reproduce by intentionally failing the method registry lookup and found this solution. I could not find an instance where the registry consistently failed to lookup even on slow/throttled/high latency networks.
The connected status indicator had been moved left since this popup was
first written. The position of the highlighted portion of the
background has been updated reflect this.
* fix overflowing contract names and origins
Moves heading and subtitle into divs with h3/h2 children so that the
div can be display flex and still have ellipses overflow. Only the
heading was display flex but I wanted the two to have similar structure.
this allows subheading to be display flex in the future.
Also uses stripHttpSchemes to remove that from origin in the subheading
* rtl ellipses on domain
* Update ui/app/components/app/transaction-list-item/index.scss
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
The 'Expand view' button in the 'Account Options' menu was still being
shown on the fullscreen UI. This button is not useful in fullscreen, as
all it does is open the fullscreen UI. It is now hidden on the
fullscreen UI.
The letter chosen for the fallback site icon was being set
inconsistently throughout the extension. The connect flow was using the
first letter of the `origin` for the letter (which was always `H`,
because `HTTP`), but the connect sites list and the account menu were
using the `name` from the domain metadata.
The `name` is now used for the fallback icon everywhere. A selector
that supplied a default domain metadata object has also been augmented
to use the `hostname` rather than the `origin` as a fallback name, to
match the behavior of the inpage provider.
A new `SiteIcon` component has been created for showing icons
representing web3 sites. The icon has a border and background, and it
has a fallback in case no icon is given. This new component accepts a
`size` prop that controls the size of the icon.
The old `IconWithFallback` component had a hard-coded size in the
SCSS styles for the icon, which was being overridden in a few places.
It was difficult to customize, and overly complicated.
The old `IconWithFallback` component is still used, but it's now
simpler. It only handles rendering the underlying `img` for the icon,
or the fallback letter if no image is given.
A separate `IconBorder` component has been created for the border and
white background used. It's solely used by `SiteIcon` for now, but I
intend to use it elsewhere as well, where this same pattern of a white
background is embedded.
* update connected accounts appearance
* consolidate account alerts
* UnconnectedAccountAlert: use ConnectedAccountsList
* move switch account action out of menu in all views
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Imported accounts can be removed, but the permissions controller is not
informed when this happens. Permissions are now removed as part of the
account removal process.
Additionally, the `getPermittedIdentitiesForCurrentTab` selector now
filters out any non-existent accounts, in case a render occurs in the
middle of an account removal.
This was resulting in a render crash upon opening the popup on a site
that was connected to the removed account.
Token transfers will now be hidden on the ETH asset page. Arguably
token transfers are still relevant to show on the ETH asset page
because the gas for token transfers is paid in ETH, but they weren't
being displayed in a way that highlighted this (only the token amount
was shown inline - not the gas price).
We will likely restore token transfers to the ETH asset page at a later
date, after designs have been updated to highlight their relevance to
this page.
Editing the name of an account was accidentally made impossible when
FontAwesome was updated in #8256, because the icon we used to use for
the edit button (`fa fa-pencil`) was no longer free. The icon has been
switched to `fas fa-pencil-alt`, which is free.
The list of accounts shown on the first page of the connect flow takes
up the entire height of the window, even if there aren't enough
accounts to fill the space. This looks strange because of the border
around the account list, especially in the case where there are three
accounts in the list.
The list now cedes space to the footer if it can't fill the space
itself. The extra space is taken by whitespace between the footer and
the list.
* restore and enhance the time est feature
background: we had a feature for showing a time estimate on pending txs
that was accidently removed during the redesign implementation. This PR
restores that feature and also enhances it:
1. Displays the time estimate on all views instead of just fullscreen
2. Uses Intl.RelativeTimeFormat to format the time
3. Adds a way to toggle the feature flag.
4. Uses a hook to calculate the time remaining instead of a component
* Update app/_locales/en/messages.json
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* do not display on test nets
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Fiat amounts are now shown inline on token transfers in the transaction
list, where possible (i.e. where the conversion rates are known).
The logic for this hook is pretty tangled because it's used for so many
fundamentally different types of items (eth transactions, token
transactions, signature requests). In the future we should split these
into different components.
The documentation for the `useTokenFiatAmount` hook was updated to make
`tokenAmount` optional, but in practice it already worked as expected
without the amount being passed in.
The asset page component has been split into three parts: the main
asset page wrapper, and a component for the content (either token or
native currency). This makes it easier to add functionality that is
specific to either token asset pages or native currency asset pages.
'Activity' is a better name for this tab because it contains more than
just transactions. Signature requests are also included, and more non-
transaction activity may be included in the future.
initially set out to add the failed tooltip back to the transaction list, but
in the process rediscovered the transaction-status component which illuminated
a fair number of statuses that were not properly handled by the refactor of the
list. These statuses were discussed with UX and engineering team members to come
up with a definitive list of statuses that should be reflected in the UI
Changes:
1. normalized the color of status labels to use Red-500 and Orange-500 where applicable
2. added a new color of icon for pending transactions -- grey
3. added support for dropped and rejected labels
4. failed, dropped, rejected and cancelled all have red icons now.
5. cancelled transactions will reflect a change in the user's balance
6. tooltip displayed for failed transactions
7. Icon logic isolated to a new component.
This hook is responsible for converting a token balance to fiat. It has
been extracted from the `TokenCell` component, and will be used
elsewhere in a future PR.
The conversion of token amounts to fiat amounts was extracted from the
`TokenCell` component, and moved to a utility function. This will be
used elsewhere in an upcoming PR.
The `eth-contracts-metadata` export was mutated in `token-list.js` to
add the token address to the contract metadata, and this was taken
advantage of in the token search component.
Instead, the address is now added to a copy of the token metadata in
the one place it's used. The module export is no longer mutated, and
the unused `defaultTokens` variable in `token-list.js` has been
removed.
The `confirm-approve` page has been converted from a set of container/
component components to a functional component. The `withTokenTracker`
higher-order component has been deleted, as it was replaced by the
`useTokenTracker` hook.
Using flex was getting out of hand, I noticed on develop that when
a pending transaction is coming in the speed up and cancel buttons
cause the icon to center according ot their height as well. A grid
is really what is needed. This seemingly greatly simplifies the CSS
AND html (removes unnecessary nesting of divs)
The entry for imported accounts in the account menu looked wrong with
the new connected site icon - there was no padding between the site
icon and the 'imported' label. The entry was pretty crowded with these
three symbols as well (the third being the 'x' used to remove the
account).
The site icon has been made the right-most icon, so that it lines up
with the site icons shown for other accounts, and spacing has been
added between the site icon and the 'imported' label.
The 'x' used to remove accounts has been removed. Accounts can still be
removed from the 'Account Options' menu on the Home screen. This seemed
like the wrong place for this button to exist, as it's the only action
that can be taken from that menu aside from navigation.
The `TokenBalance` component now uses the new `useTokenTracker` hook
instead of the `withTokenTracker` higher-order component. The component
was converted from a split container/component to a functional
component so that the hook could be used.
The prop `withSymbol` was removed from a few call sites, as it was no
longer used. An empty string was substituted for any falsy `string` or
`symbol` because that's what the `withTokenTracker` higher-order
component did.
The asset list item and transaction list item do not make great use of
screen realestate when in fullscreen mode on larger displays/windows.
This PR adds in a new prop for list-item for displaying content in the
middle of the list-item when on these types of screens. To facilitate
this, some updates were made to styling to allow for the list item to
better control how items are laid out in various breakpoints.
This works makes it possible to display the outdated balance warning
inline in the middle section of the list item, and convert to a tooltip
when on small displays.
The "Connected accounts" modal was throwing an exception when
attempting to render an account that has no `lastActive` time. The
component and related selector has been updated to no longer expect
the `lastActive` time to be set.
Prior to #8653 there was a guarantee that all connected accounts had a
`lastActive` time set, as the time would be set on any account returned
from the `eth_requestAccounts` call. But after #8653 only the primary
account was returned, so only the primary account had a `lastActive`
time set.
Fixes#8733
Each "message" requiring a user confirmation has a unique `type`
property. These `type` properties have all been added as enums, and the
enum is now used wherever the literal string was used previously.
This matches the box shadow on the asset page. Some CSS specificity
hijinks were required to override the base `Tabs` CSS rules, and a new
`tabsClassName` prop was added to the `Tabs` component.
* refactor asset items to use list-item
Refactors the asset-list-item and token-cell to rely on the list-item
component for UI. Little changes were needed to the list-item code
to make this work! The result should be lots of eliminated code
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
The "the transaction has the expected gas price" test was assuming the
fifth element with the `transaction-breakdown__value` class was the
element with the gas price. In practice that was sometimes not the
case, because some transaction detail fields would not be present, or
would appear after the first render.
The field is now looked up with a test id, ensuring it always finds the
correct field.
The e2e test for the "Hide token" functionality was incorrectly
clicking "Cancel" on the "Hide token" modal, thus not actually testing
that that token was hidden at all.
The "Confirm" button is now selected using a test id, to ensure the
wrong button isn't selected.
The `disabled` prop being passed to the `PageContainer` component in
the render function for the `AddToken` component was a string in some
cases. It should always be a boolean. It has been cast to a boolean in
the one case where it was a string.
A new page has been created for viewing assets. This replaces the old
`selectedToken` state, which previously would augment the home page
to show token-specific information.
The new asset page shows the standard token overview as seen previously
on the home page, plus a history filtered to show just transactions
relevant to that token.
The actions that were available in the old token list menu have been
moved to a "Token Options" menu that mirrors the "Account Options"
menu.
The `selectedTokenAddress` state has been removed, as it is no longer
being used for anything.
`getMetaMetricState` has been renamed to `getBackgroundMetaMetricState`
because its sole purpose is extracting data from the background state
to send metrics from the background. It's not really a selector, but
it was convenient for it to use the same selectors the UI uses to
extract background data, so I left it there for now.
A new Redux store has been added to track state related to browser history.
The most recent "overview" page (i.e. the home page or the asset page) is
currently being tracked, so that actions taken from the asset page can return
the user back to the asset page when the action has finished.
The third and fourth parameters were unused, so they have been removed.
The tests descriptions for both `getToErrorObject` and
`getToWarningObject` have been improved as well.
The chosen token in the `send` flow was set from one of two places:
`metamask.selectedTokenAddress` or `metamask.send.token`. The former is
used most of the time, but the latter is used for the 'Edit' button
shown in the upper-left of the confirmation UI.
The send flow will now exclusively use `metamask.send.token` for the
token state during the send flow. `metamask.selectedTokenAddress` is
now only used for the selected token state on the Home screen. This
simplifies the Redux state, as the send token is now in one place
instead of two, and `metamask.selectedTokenAddress` has only one
purpose.
