1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Commit Graph

2412 Commits

Author SHA1 Message Date
Whymarrh Whitby
983e32274c Fix array-callback-return issues
See [`array-callback-return`](https://eslint.org/docs/rules/array-callback-return) for more information.

This change enables `array-callback-return` and fixes the issues raised by the
rule.
2020-07-17 16:03:33 -02:30
Brad Decker
549eb320e8
Narrow usages of 037DD6 to 'primary-blue' (#9008) 2020-07-17 13:11:04 -05:00
Mark Stacey
fd2e02274a
Catch gas estimate errors (#9025)
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
2020-07-16 20:29:22 -03:00
Mark Stacey
acaa648779
Fix ListItem styles (#9002)
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.
2020-07-15 17:13:33 -03:00
Mark Stacey
f46dda0195
Uncomment and fix all auto-fixable stylelint rules (#8989)
All stylelint rules that can be automatically fixed have been uncommented. The rules are:

* `at-rule-empty-line-before`
* `block-closing-brace-empty-line-before`
* `block-closing-brace-newline-before`
* `block-opening-brace-space-before`
* `color-hex-case`
* `color-hex-length`
* `comment-empty-line-before`
* `declaration-block-semicolon-newline-after`
* `declaration-block-semicolon-space-after`
* `declaration-block-trailing-semicolon`
* `declaration-colon-space-after`
* `declaration-empty-line-before`
* `function-comma-space-after`
* `function-comma-space-before`
* `indentation`
* `length-zero-no-unit`
* `no-eol-whitespace`
* `no-missing-end-of-source-newline`
* `number-leading-zero`
* `number-no-trailing-zeros`
* `rule-empty-line-before`
* `selector-list-comma-newline-after`
* `selector-pseudo-element-colon-notation`
2020-07-15 10:13:40 -03:00
Whymarrh Whitby
4f0a205369
Use eslint@6.8.0 (#8978)
* Use eslint@6.8.0
* yarn lint:fix
2020-07-14 12:50:41 -02:30
Mark Stacey
670ae111f0
Remove unnecessary optional chaining operator (#8892)
`state.activeTab` is always guaranteed to be set to an object before
the UI is initialized. This happens in `app/ui.js`.
2020-07-10 12:46:54 -03:00
Mark Stacey
d53c4f824e
Add personal_sign e2e test (#8958)
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.
2020-07-10 11:35:52 -03:00
Brad Decker
3cbcc913e9
update material-ui/core (#8950) 2020-07-09 16:05:44 -05:00
Mark Stacey
b485a9afb3
Add data-testid to the EthOverview balances (#8951)
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.
2020-07-09 17:33:37 -03:00
Erik Marks
652db3fd36
Use string network and chain IDs (#8628)
* convert network id enums to string

* stringify appropriate chain/network ids in tests

Co-authored-by: Mark Stacey <markjstacey@gmail.com>
2020-07-08 14:05:09 -07:00
Brad Decker
cd4903f65e
remove ramda (#8932) 2020-07-08 15:17:53 -05:00
Thomas Huang
15d713f0ee
Standardize transaction activity conversion's currency to 'ETH' (#8934) 2020-07-07 15:15:42 -07:00
Mark Stacey
4a989c339a
Fix activity log inline buttons (#8908)
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.
2020-07-03 13:03:13 -03:00
Mark Stacey
3832d694a4
Replace percentage opacity value (#8898)
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.
2020-07-02 21:51:41 -03:00
Mark Stacey
d9a27fcf52
Prevent showing connected accounts without origin (#8891)
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.
2020-07-02 18:26:30 -03:00
Mark Stacey
e4410724e9
Show origin in connect flow rather than site name (#8885)
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.
2020-07-02 14:08:43 -03:00
Dan J Miller
14fa80c105
Set min-height: 0 on page-container__bottom to fix overflow behaviour of add token list (#8874) 2020-07-01 05:52:36 -02:30
Mark Stacey
2dbb151e0b
Fix account order on unconnected account alert (#8863)
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.
2020-06-25 21:05:42 -03:00
Brad Decker
83fbf6608b
Restore list item title attributes (#8858) 2020-06-24 19:41:30 -03:00
Mark Stacey
1d2644423e
Replace removed 'copy-to-clipboard' icon (#8853)
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.
2020-06-24 12:10:29 -03:00
Brad Decker
41c8e486af
replace icons with Checkbox component (#8830)
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.
2020-06-23 09:26:33 -05:00
Brad Decker
c07bf62a73
fix overflowing contract names and origins (#8823)
* 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>
2020-06-17 11:38:15 -05:00
Mark Stacey
dafc5046ff
Hide 'Expand view' button in fullscreen (#8826)
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.
2020-06-17 00:40:56 -03:00
Erik Marks
b0187d3247
Fix permissions domain metadata retrieval (#8821)
* delete targetDomainMetadata selector

* fix permissions connect target domain metadata handling
2020-06-16 13:48:35 -07:00
Erik Marks
28cf728067 delete targetDomainMetadata selector 2020-06-16 11:34:08 -07:00
Brad Decker
4f3e9d70fa
remove top/bottom margin on info icon (#8822) 2020-06-16 13:05:03 -05:00
Brad Decker
61d9fcde35
add send token button on fullscreen asset list (#8812) 2020-06-16 13:04:51 -05:00
Mark Stacey
ec10323495
Fix site icon fallback letter (#8815)
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.
2020-06-16 09:57:21 -03:00
Brad Decker
a6ee23cf9a
add hover style to list-item (#8813) 2020-06-15 17:36:32 -05:00
Mark Stacey
ad5e16cfa7
Fix site icon size (#8814)
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.
2020-06-15 19:24:23 -03:00
Erik Marks
4dfe4e7463
Consolidate connected account alerts (#8802)
* 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>
2020-06-15 12:08:53 -07:00
Brad Decker
955625278b
update button styling on home/asset page (#8800) 2020-06-15 12:02:38 -05:00
Mark Stacey
bb087e3749
Hide token transfers on ETH asset page (#8799)
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.
2020-06-12 23:06:33 -03:00
Mark Stacey
31bb86c596
Fix account name editing (#8801)
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.
2020-06-12 23:06:19 -03:00
Mark Stacey
53769a7b3a
Update color of menu item icons (#8797)
Menu item icons are now grey instead of black, as requested in design
QA feedback.
2020-06-12 17:09:47 -03:00
Mark Stacey
cf08131b49
Show fiat balance on token page (#8791)
The token page overview now shows the balance in fiat.
2020-06-12 15:47:39 -03:00
Mark Stacey
a100c55e64
Hide token fiat amounts on testnets (#8792)
The token amount is no longer shown in fiat on testnets, unless the
user has enabled the "Show fiat on testnets" setting.
2020-06-12 15:47:23 -03:00
Brad Decker
2f50e9fd72
Restore timing function (#8774)
* 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>
2020-06-12 13:46:01 -05:00
Erik Marks
1323233cfa
Make permission approval redirect flow consistent (#8755)
* make redirect flow consistent

* remove cancel redirect

* extract redirect component into own file
2020-06-12 09:38:20 -07:00
Brad Decker
73ba992125
use UI button for add token functionality (#8781) 2020-06-12 11:22:00 -05:00
Erik Marks
d8e7fb4c42 address review feedback 2020-06-11 14:11:50 -07:00
Erik Marks
ea398abc5d make redirect flow consistent 2020-06-10 16:44:09 -07:00
Brad Decker
a4e5fc934d
restore status tooltip (#8745)
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.
2020-06-10 15:38:34 -05:00
Mark Stacey
0b86283c10
Create useTokenFiatAmount hook (#8778)
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.
2020-06-10 16:04:29 -03:00
Brad Decker
13d6803698
Adds the rule of hooks eslint rule (#8779) 2020-06-10 13:31:14 -05:00
Mark Stacey
e4a77ea631
Extract token to fiat conversion (#8777)
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.
2020-06-10 15:04:56 -03:00
Mark Stacey
cfadc7592e
Avoid mutating module export (#8775)
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.
2020-06-10 13:27:35 -03:00
Erik Marks
a84eedb7da
Permissions: Do not display HTTP/HTTPS URL schemes for unique hosts (#8768)
* only show URL.host in connected-accounts component

* strip scheme from URL for unique hosts

Co-authored-by: Mark Stacey <markjstacey@gmail.com>
2020-06-09 13:56:24 -07:00
Brad Decker
e82a8a5f52
Fix prop type mismatch (#8754) 2020-06-05 15:06:15 -07:00
Brad Decker
1eed8dc167
use grid template to position list item (#8753)
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)
2020-06-05 16:33:51 -05:00
Mark Stacey
f5ec16c65a
Fix account menu entry for imported accounts (#8747)
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.
2020-06-05 17:24:51 -03:00
Mark Stacey
9a1f27fe04
Refactor TokenBalance component (#8752)
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.
2020-06-05 17:19:27 -03:00
Mark Stacey
799536c35f
Fix 'Remove account' in Account Options menu (#8748)
The 'Remove account' button in the Account Options menu was broken.
Clicking it would crash the UI. It now correctly opens the 'Remove
Account' modal.
2020-06-05 16:01:06 -03:00
Brad Decker
7fcf625549
asset outdated warning inline on full screen (#8734)
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.
2020-06-05 13:36:40 -05:00
Mark Stacey
8e1f40aedb
Handle connected accounts with no last active time (#8746)
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
2020-06-05 13:07:23 -03:00
Mark Stacey
e85b162651
Add MESSAGE_TYPE enum (#8743)
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.
2020-06-04 16:22:45 -03:00
Brad Decker
ab06595a5d
refactor token list (#8726)
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
2020-06-04 13:13:11 -05:00
Mark Stacey
b96eb55c76
Add box shadow to Home screen tabs (#8739)
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.
2020-06-04 13:42:45 -03:00
Mark Stacey
cac3bf5c56
Increase padding of empty transaction list (#8738)
The top padding of the empty transaction list now mirrors the space
below the buttons in the overview.
2020-06-04 12:52:21 -03:00
Brad Decker
591d84d2bb
refactor asset-list-item to use list-item component (#8725)
* 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>
2020-06-03 12:50:12 -05:00
Brad Decker
c6b77c9734
fix grid repositioning on label change (#8713) 2020-06-03 09:47:12 -05:00
Mark Stacey
171704d980
Fix gas price intermittent test failure (#8728)
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.
2020-06-03 10:54:55 -03:00
Mark Stacey
56b157f692
Fix hide token e2e test (#8724)
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.
2020-06-02 18:47:55 -03:00
Erik Marks
8afb295e1d
Fix connect long URL styling (#8719)
* fix connect long URL styling
2020-06-01 15:28:05 -07:00
Brad Decker
c8de0b70fa
Add nonce to transaction details (#8716) 2020-06-01 17:19:49 -05:00
Thomas Huang
fb906e2150
Consistent rounded corners on tx details modal/popup (#8714) 2020-06-01 13:04:39 -07:00
Mark Stacey
df85ab6e10
Implement asset page (#8696)
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.
2020-06-01 14:54:32 -03:00
Erik Marks
9193522bd5
Fix accounts menu styling (#8707)
* fix accounts menu styling
2020-06-01 10:01:51 -07:00
Brad Decker
c3b29e192a
hide connected-status on metamask ext (#8703)
Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>
2020-05-29 13:14:25 -05:00
Mark Stacey
ddaa492751
Use send state for send flow token (#8695)
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.
2020-05-29 14:46:10 -03:00
Whymarrh Whitby
ad85382824
Fix tab content disappearing during scrolling on macOS Firefox (#8702) 2020-05-29 14:41:34 -02:30
Brad Decker
68f8abbbca
close details when button is pressed (#8694) 2020-05-29 11:15:33 -05:00
Erik Marks
606618ee28
Update eth_accounts permission description (#8693)
* update eth_accounts permission description

* make it easier to find permission name locale message

* handle longer permissions descriptions in UI
2020-05-28 15:53:11 -07:00
Mark Stacey
7ff3b4c928
Extract selected token from token input (#8692)
The `TokenInput` component now takes the token as a prop, instead of
using the `selectedTokenAddress` state. The `UserPreferencedTokenInput`
component that wrapped `TokenInput` has also been updated to take the
token as a prop.
2020-05-28 19:08:11 -03:00
Mark Stacey
795676d3ec
Remove getTxParams (#8676)
This function primarily ensured that there was a reasonable fallback
for `txParams` if the given transaction was missing it. This fallback
was only used in one place: the customize gas modal, during the send
flow specifically.

The helper function has been removed, and the default `txParams` is set
in the one place it was needed. In the future we should attempt to
simplify this modal so it doesn't need to know details about the
context in which it's being used.
2020-05-28 16:39:33 -03:00
Brad Decker
00834f5de6
do not show account mismatch alert on details (#8678) 2020-05-28 14:20:56 -05:00
Erik Marks
b34ccbb904
Fix Firefox account menu styling (#8681)
* Fix Firefox account menu styling
2020-05-28 11:02:59 -07:00
Brad Decker
fbe16e8a5f
various fixes to transaction list (#8673) 2020-05-28 13:00:51 -05:00
Whymarrh Whitby
93c2184bd9
Add metrics events for Wyre and CoinSwitch (#8677) 2020-05-28 13:54:52 -02:30
Whymarrh Whitby
f8137b7a66
Fix height of connect screen (#8675) 2020-05-28 12:22:16 -02:30
Mark Stacey
95a95ee4bc
Refactor transaction list token filtering (#8669)
The transaction list now filters by token in the `TransactionList`
component instead of in the transaction selector. This was done in
preparation for the asset page work.

Technically this approach is slightly less efficient than before, as
we're now filtering the transactions after they've been grouped
together rather than beforehand. The difference is minimal though, and
this method is more correct.

The old filtering was broken because it inappropriately filtered out
cancel transactions. Cancel transactions always have the `to` address
set to the same as the `from` address, and the token filter only
returned transactions where the `to` address was set to the token
address.

Now that we're only filtering by the `to` address of the initial
transaction, token transaction groups will be included in their
entirety, including any cancel transactions.
2020-05-28 00:11:15 -03:00
Whymarrh Whitby
3931427db8
Show hostname in the disconnect confirmation (#8663) 2020-05-27 19:39:14 -02:30
Whymarrh Whitby
34adccec7c
Fix JSDoc for Tabs#_findChildByName (#8664) 2020-05-27 19:10:26 -02:30
Mark Stacey
cc1170f577
Remove unused isWideViewport prop (#8662)
This prop is no longer required, now that the new fullscreen redesign
has been implemented. This was unused before the redesign as well,
seemingly by accident.
2020-05-27 18:36:55 -03:00
Whymarrh Whitby
4802ed1df5
Localize permission descriptions (#8661) 2020-05-27 18:15:10 -02:30
Mark Stacey
a0d64c7932
Implement new fullscreen design (#8657)
The fullscreen UI now shows roughly the same design as the popup UI.
A few additional changes depicted in the new fullscreen designs will
be implemented in subsequent PRs (e.g. the inline buttons on assets)

This was done now to make asset pages easier to implement. Implementing
asset pages solely for the popup UI would have been complicated by the
fact that we use viewport size to switch between the two layouts, so we
would have had to re-route upon resizing the window.
2020-05-27 17:28:33 -03:00
Brad Decker
398f2647c0
resolve remaining issues with transaction list (#8659) 2020-05-27 14:45:20 -05:00
Mark Stacey
a6f2156386
Update account options menu design (#8654)
The `AccountDetailsDropdown` component has been rewritten to use the
new `Menu` component, and to follow the latest designs.

This should be functionally equivalent. A couple of the icons have
changed, but that's about it.

Support for a subtitle was added to `MenuItem` to support the `origin`
subtitle used for the explorer link for custom RPC endpoints.

A few adjustments were required to `test/helper.js` to accommodate
the use of `Menu` from a JSDOM context (this is the first time it's
been used in a unit test). A `popover-content` element was added to the
fake DOM, and another global was added that `react-popper` used
internally.

An additional driver method (`clickPoint`) was added to the e2e driver
to allow clicking the background behind the menu to dismiss it. This
wasn't possible using the `clickElement` method, because that method
would refuse to click an obscured element. The only non-obscured
element to click was the menu backdrop, and that didn't work either
because the center was obscured by the menu (Selenium clicks the center
of whichever element is targeted).
2020-05-27 12:31:53 -03:00
Brad Decker
706dc02cb4
Implement new transaction list design (#8564)
Co-authored-by: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
2020-05-26 15:49:11 -05:00
Whymarrh Whitby
ab11e0b623
Rename preferencesSelector selector to getPreferences (#8647) 2020-05-26 03:41:58 -02:30
Whymarrh Whitby
835386bf35
Persist home tab state (#8612) 2020-05-25 16:31:28 -02:30
Mark Stacey
3cedf708e9
Remove duplicate 'Account options' tooltip (#8644)
The `title` HTML attribute already resulted in this having a tooltip.
We didn't need to add an extra one.
2020-05-22 14:42:09 -03:00
Mark Stacey
8379dd6a07
Refactor MenuBar component (#8643)
The `MenuBar` component has been converted to a functional component.
This was done to make upcoming changes related to the home screen
redesign easier to implement.
2020-05-22 14:11:42 -03:00
Brad Decker
684c58b94e
fix prop name for disconnect icon (#8641) 2020-05-21 16:12:38 -05:00
Brad Decker
389df9dd37
warn user when sending from different account (#8601) 2020-05-21 15:21:34 -05:00
Mark Stacey
dd41870f1d
Split TransactionViewBalance component (#8637)
The `TransactionViewBalance` component has been split into three
separate components. This was done primarily to make the asset page
easier to implement. Also the name `TransactionViewBalance` didn't
describe this component very well anymore.

Instead of the Ethereum and token-specific logic being in the same
component, the two cases were split into the `EthOverview` and
`TokenOverview` components respectively. They both use the
`WalletOverview` component, which has the structure shared by both
cases.
2020-05-21 14:33:48 -03:00
Mark Stacey
57531ad100
Fix AssetList metric events (#8639)
The metric events in the `AssetList` component were using the
`useMetricEvent` hook incorrectly.
2020-05-21 13:06:06 -03:00
Brad Decker
f9ea9b541a
add useI18nContext shortcut hook (#8635) 2020-05-21 10:26:49 -05:00
Brad Decker
ec99cc82b8
Design QA fixes for v8 (#8630) 2020-05-20 15:42:18 -05:00
Mark Stacey
f886686db2
Extract Menu component from ConnectedAccountsListOptions (#8632)
A `Menu` component has been extracted from the
`ConnectedAccountsListOptions` component. The menu and the menu items
are now the `Menu` and `MenuItem` components respectively.

A custom body was added to the Storybook preview to ensure that the
`popover-content` element was present in the DOM before the Menu was
constructed.
2020-05-20 14:52:23 -03:00
Mark Stacey
91953f062b
Remove unused network prop (#8633)
The `Identicon` component was being passed a `network` prop, despite
not accepting a `network` prop.

A duplicate set of `token-cell` tests have also been deleted, as they
used this prop. The tests were never run, because the file was misnamed
(it needs to be named `.test.js`).
2020-05-20 13:51:21 -03:00
Erik Marks
f748664638
Cleanup network enums (#8627)
* cleanup & consolidate network enums
2020-05-20 08:57:45 -07:00
Whymarrh Whitby
9e8f922c10
Remove unused index for dropdowns (#8615) 2020-05-18 19:14:40 -02:30
Whymarrh Whitby
3485bfbc5c
Sticky position the tabs at the top (#8609) 2020-05-18 16:22:42 -02:30
Mark Stacey
ce11fad81c
Improve account options menu (#8607)
The account options menu is now much faster, and it correctly closes
when 'Switch account' is selected.

A static width had to be set on the menu so that it could be positioned
reliably. Without this width set, it was rendered as a different size
before positioning than after, which resulted in it being positioned
incorrectly. A `z-index` had to be added (equal to the `z-index` used
by the popover component) to ensure it wasn't rendered beneath the
popover.

The menu is automatically positioned relative to the account options
button, appearing below the button by default but above it instead if
there isn't room below. It is positioned to be inside the bounds of the
popover as well.

The account options button is now a `<button>` rather than a `<i>`.
This required a few additional style rules to overrule the default
button styles. Additionally the size was increased so that it matches
the designs more closely.

The callbacks for connecting, disconnecting, and switching accounts
have been updated to use state and props to determine the correct
address to use, rather than being bound to the correct address
parameter in the render function. This means we aren't creating a new
function upon each render anymore.

The `showAccountOptions` method still needs to be bound once per
account, but this was switched to use more readable syntax (`.bind`,
instead of the double arrow function).

`react-popper` and `@popperjs/core` were both added as dependencies.
These should be used for any UI requiring relative positioning (e.g.
tooltips, menus, etc.). Older versions of these libraries are already
in our codebase as transitive dependencies of the tooltip library we're
using.
2020-05-18 14:51:29 -03:00
Whymarrh Whitby
d488c16df5
Add Connected Accounts modal (#8313) 2020-05-15 15:53:52 -03:00
Whymarrh Whitby
320804bb71
Delete unused DisconnectAll modal (#8599) 2020-05-15 15:32:46 -02:30
Mark Stacey
74007e054b
Update asset list styles (#8591)
The asset list has been updated to more closely match the new designs.
There are still a few major differences (e.g. the selection state, the
token menu) that can't be implemented until the asset screen has been
implemented.

The background color of the selected asset has been lightened, so that
it's less jarring until we remove it.
2020-05-14 09:49:50 -03:00
Mark Stacey
095eeab881
Update Home tab styles to match new designs (#8590)
The tabs on the Home page have been updated to match the new home
screen designs.

A new `activeClassName` prop was added to the `Tab` component to allow
applying different styles to the active tab state.

I ran into specificity problems when overriding the default `Tab` styles
because the import order of our CSS is bizarre and wrong. For now I've
used a crude workaround, but we can fix this properly later by changing
the import order to place styles likely to be overridden first.
2020-05-14 00:16:47 -03:00
Mark Stacey
204d197996
Convert AssetList to functional component (#8588)
The `AssetList` component is now a function rather than a class, and it
makes use of the new `useMetricsEvent` and `useUserPreferencedCurrency`
hooks.
2020-05-14 00:16:30 -03:00
Brad Decker
73272124b3
broaden usage options for list-item (#8587) 2020-05-13 16:19:14 -05:00
Mark Stacey
0ca5d1dc8a
Refactor asset list items (#8586)
All asset list items now use the same component (`AssetListItem`).
Previously the tokens and the Ethereum balance were totally separate
components, despite being styled similarly.

Various unnecessary DOM elements and style rules were removed, but the
overall list looks identical to how it looked before.
2020-05-13 17:41:15 -03:00
Mark Stacey
797ee2f4de
Remove redundant .scss file extension from SCSS imports (#8581)
The `.scss` file extension is not required when importing SCSS files.
It has been removed from all imports, for consistency. I chose to
remove it rather than add it everywhere because imports without the
extension seem to be more common.
2020-05-13 09:28:06 -03:00
Mark Stacey
a6d8d3d76e
Refactor identicon styles (#8580)
The CSS class for the fallback Ethereum logo used in the identicon
component was with the `AssetList` styles, and was confusingly named
`balance-icon`. It has been migrated to the identicon styles, and
renamed `identicon__eth-logo`.

A few redundant rules have been removed as well (they were always
overridden by inline styles).
2020-05-13 09:27:34 -03:00
Mark Stacey
fab049b1b0
Fix PropType of network prop of TokenMenuDropdown. (#8582)
The `network` prop of the `TokenMenuDropdown` component was mistakenly
set to "number" in #7779.
2020-05-13 09:26:57 -03:00
Brad Decker
0aa41e397e
factor out containers for currency components (#8543) 2020-05-12 14:07:35 -05:00
Mark Stacey
53ec42d95f
Add switch to connected account alert (#8532)
Add alert suggesting that the user switch to a connected account. This
alert is displayed when the popup is opened over an active tab that is
connected to some account, but not the current selected account. The
user can choose to switch to a connected account, or dismiss the alert.

This alert is only shown once per account switch. So if the user
repeatedly opens the popup on a dapp without switching accounts, it'll
only be shown the first time. The alert also won't be shown if the user
has just dismissed an "Unconnected account" alert on this same dapp
and account, as that would be redundant.

The alert has a "Don't show me this again" checkbox that allows the
user to disable the alert. It can be re-enabled again on the Alerts
settings page.
2020-05-12 10:01:52 -03:00
Mark Stacey
6868688a03
Remove unused Balance component props (#8570)
This component was indended to show both ETH/fiat and token balance,
but today is not used for token balance. As a result, large pieces of
this component and many props were unused in practice. The condition
about `formattedBalance` returning a falsy or `None` or `...` result
was also removed, as that doesn't seem to be possible.

The `balanceValue` passed into the `Balance` component in the asset
list has also been removed, as it isn't used.
2020-05-11 19:20:32 -03:00
Mark Stacey
c4fb514f3d
Allow disabling alerts (#8550)
The unconnected account alert can now be disabled. A "don't show this
again" checkbox has been added to the alert, which prevents that alert
from being shown in the future.

An alert settings page has been added to the settings as well. This
page allows the user to disable or enable any alert.
2020-05-08 16:45:52 -03:00
Mark Stacey
abf2294bf3
Update menu bar account hover background color (#8555)
The hover state background color of the "Account" in the popup home
screen menu bar has been updated to match the hover state background
color of the connected status indicator. Both hover state backgrounds
now match.
2020-05-07 23:36:48 -03:00
Mark Stacey
0688426b7c
Fix checkbox color when checked or indeterminate (#8552)
The checkbox color was sometimes incorrect after it was checked. I'm
not sure how to consistently reproduce this issue, but I was able to
make this happen most of the time if I clicked the checkbox while some
text was highlighted.

It seems that the `:checked` and `:indeterminate` pseudo-selectors were
not being applied right away for some reason. Either that or React
wasn't setting the `checked` state of the `input` element right away.

This problem has been worked around by using CSS classes instead of
pseudo-selectors. I am no longer able to reproduce the issue now.
2020-05-07 23:25:19 -03:00
Mark Stacey
5e5215f907
Add Checkbox id prop (#8553)
This prop allows associating the checkbox with a label.
2020-05-07 23:25:06 -03:00
Thomas Huang
39dad370c8
Fixes #8492 (#8533)
Adds min value for input in the advanced-gas-inputs component to prevent users from entering negative values on keypress, change, etc.
2020-05-06 09:59:34 -07:00
Mark Stacey
8a12257f8e
Add dropdown component (#8524)
This new dropdown component uses a native `select` element, thus
avoiding various issues encountered in attempting to reuse our existing
dropdown components for the new permission system alert modal.

The prefixed forms of `appearance` have been added temporarily so that
the component can be used in Storybook, as our Storybook config isn't
setup to do autoprefixing yet. Our real build system does handle
autoprefixing for this rule correctly already.
2020-05-06 11:48:38 -03:00
Mark Stacey
48d29e679b
Add Popover contentClassName prop (#8514)
This class is set on the Popover content. This was required for an
upcoming PR (the last permissions system alert).
2020-05-05 15:02:53 -03:00
Dan J Miller
fda4c94670
Design improvements for the Connect flow (#8494)
* Design improvements for the Connect flow

* Make new-account-modal close a button

* Update e2e tests for auto select account on connect flow
2020-05-04 18:10:09 -02:30
Erik Marks
e8fa0b7b5d
Consolidate and dedupe send selectors (#8506)
* consolidate & dedupe send selectors
2020-05-04 12:06:28 -07:00
Erik Marks
eacdb5d920
Move send selectors to selectors dir (#8505) 2020-05-04 11:27:14 -07:00
Erik Marks
5b06bf795b
Delete amountConversionRate and selectors (#8503) 2020-05-04 10:54:54 -07:00
Erik Marks
898f8458a2
Consolidate send, onboarding selectors (#8501)
* reorganize & dedupe send selectors
2020-05-04 08:22:34 -07:00
Brad Decker
eaa9f759f9
Fix connection modal style issues (#8433)
Resolves three different style issues due to overflow of content
and addresses an issue where UI was being squished due to available
screen real estate.

- On the choose account modal, when a user has enough accounts to need
to scroll within the account chooser, the last-connected data column
was squished. This is resolved by using a tooltip and icon for this data
rather than text printed in column.
- On the connection permission result screen where it shows the Dapp icon ->
Metamask icon, the bottom of the logos and dropshadows were being cut off
this was resolved by removing the height set on this element and allowing
it to fill the available space.
- On the confirmation screen the content appeared off center due to the scrollbar being overlayed instead of auto. This was resolved by removing some of the setting of manual overflow controls on the body element.
2020-05-04 12:04:41 -03:00
Erik Marks
786e82791e
Reorganize selectors directory (#8497) 2020-05-02 12:41:17 -07:00
Erik Marks
b397aa5725 review fixup 2020-05-01 18:52:23 -07:00
Erik Marks
15958683e5 enable disconnecting single or all accounts 2020-05-01 16:50:26 -07:00
Mark Stacey
165666b315
Remove unnecessary tx meta properties (#8489)
* Remove `estimatedGas` property from `txMeta`

The `estimatedGas` property was a cache of the gas value estimated for
a transaction when the default gas limit was set. This property wasn't
used anywhere. It may have been useful for debugging purposes, but the
same gas estimate is already stored on the `history` property so it
should be present in state logs regardless.

* Remove `gasLimitSpecified` txMeta property

The `gasLimitSpecified` property of `txMeta` wasn't used for anything.
It might have been useful for debugging purposes, but whether or not
the gas limit was specified can also be determined from looking at the
transaction history, so it's not a huge loss.

* Remove `gasPriceSpecified` txMeta property

The `gasPriceSpecified` property of `txMeta` wasn't used for anything.
It might have been useful for debugging purposes, but whether or not
the gas price was specified can also be determined from looking at the
transaction history, so it's not a huge loss.

* Remove `simpleSend` txMeta property

The `simpleSend` property of `txMeta` was used to ensure a buffer was
not added to the gas limit during gas estimation for simple send
transactions. It was made redundant by #8484, which accomplishes this
without the use of this property.
2020-05-01 08:44:05 -03:00
Brad Decker
ee5e84af61
Convert connected-status-indicator to button (#8428) 2020-04-29 16:25:15 -05:00
Mark Stacey
53feb20803
Alert user upon switching to unconnected account (#8312)
An alert is now shown when the user switches from an account that is
connected to the active tab to an account that is not connected. The
alert prompts the user to dismiss the alert or connect the account
they're switching to.

The "loading" state is handled by disabling the buttons, and the error
state is handled by displaying a generic error message and disabling
the connect button.

The new reducer for this alert has been created with `createSlice` from
the Redux Toolkit. This utility is recommended by the Redux team, and
represents a new style of writing reducers that I hope we will use more
in the future (or at least something similar). `createSlice` constructs
a reducer, actions, and action creators automatically. The reducer is
constructed using their `createReducer` helper, which uses Immer to
allow directly mutating the state in the reducer but exposing these
changes as immutable.
2020-04-29 14:10:51 -03:00
Mark Stacey
e20ca4668e
Return Promise from addToAddressBook thunk (#8450)
`addToAddressBook` returned a thunk that didn't return a Promise,
despite doing async work. It now returns a Promise.

The callers of this action creator were updated to `await` the
completion of the operation. It was called just before redirecting the
user to a different page or closing a modal, and it seemed appropriate
to wait before doing those things.
2020-04-29 01:59:49 -03:00
Whymarrh Whitby
eb06394dd9
Delete Dai/Sai migration notification (#8418) 2020-04-27 16:23:43 -02:30
Erik Marks
40cd976e8c
Fix connected sites modal styling; add shortenUrl function (#8409)
* fix content row styling

* fix border styling

* handle long domain names
2020-04-27 08:36:08 -07:00
Erik Marks
266d6e67fe
Rename addressSlicer function to shortenAddress (#8408) 2020-04-24 09:52:09 -07:00
Mark Stacey
bace02ad02
Remove unused ShapeShift components (#8402)
The `shift-list-item` component for displaying ShapeShift transactions
has been removed, along with three other components that were used
solely by that component (`copyButton`, `eth-balance`, and
`fiat-value`).

This component hasn't been used in some time, as ShapeShift
transactions no longer exist to display. The controller that ShapeShift
transactions originated from was removed in #8118, and it became
impossible to create new ShapeShift transactions from within MetaMask
in #6746
2020-04-24 12:33:24 -03:00
Mark Stacey
cc41dee92c
Remove leftover references to Coinbase (#8403)
Coinbase was removed as a deposit option some time ago.
2020-04-23 20:32:15 -03:00
Mark Stacey
5fe25e41b7
Remove unused network nonce state (#8395)
This state hasn't been used since #5886. The nonce we display in our UI
is now from the background, rather than queried directly from the
front-end.

This also means we save making this network call each time a pending
transaction is added, and each time the transaction list is mounted.
2020-04-23 13:23:22 -03:00
Dan J Miller
01985b2cff
Connected indicator info popup (#8293)
* Add popover for informing user about the connected status indicator

* Ensure user only sees connected status info popover once

* Default connectedStatusPopoverHasBeenShown to true and set it to false in a migration

* Add unit test for migration 42

* Initialize AppStateController if it does not exist in migration 42

* Update connect indicator popup locale text

* Code cleanup for connected-indicator-info-popup

* Code cleanup for connected-indicator-info-popup
2020-04-22 14:41:36 -02:30
Erik Marks
1f49772ca3
Create new tabs instead of windows in most cases (#8347)
* openExtensionInBrowser: create tab, not window

* open tabs instead of windows in most cases
2020-04-16 14:34:40 -07:00
Mark Stacey
8e03a96470
Rename non-existent selectedAccount prop to fromAccount (#8337)
The prop passed into the SignatureRequestHeader was changed from
`selectedAccount` to `fromAccount` in #8079, but the header component
itself was never updated to use the new prop name.
2020-04-15 11:41:34 -03:00
Mark Stacey
ec40c1fdeb
Remove undeclared name variable from render (#8336)
The header component for the new Signature Request screen has an
undeclared variable called `name` in it. This was present in the
original implementation of this component in #6891. It's unclear what
this was supposed to be, and it doesn't seem to reference anything that
exists.
2020-04-15 11:41:11 -03:00
Mark Stacey
b628ff05d1
Rewrite checkbox component (#8305)
This new checkbox component uses a plain `input` component internally,
so the browser treats it like a native checkbox. It is styled by hiding
the native checkbox and replacing it with Font Awesome icons (the same
that we are using in Figma).

Support for a 'disabled' state and an indeterminate state has been
added as well. The `onClick` prop has been made optional, as it may not
be required if the parent component is intercepting the click instead.

The `regular` Font Awesome font style needed to be added so that we
could use the `far fa-square` icon for the unchecked checkbox.
2020-04-09 18:51:12 -03:00