1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-23 03:36:18 +02:00
Commit Graph

644 Commits

Author SHA1 Message Date
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
Thomas Huang
a67ac8dd61
Change fa-refresh to fa-sync (#8301)
fa-sync has replaces fa-refresh in version 5 of font-awsome
https://fontawesome.com/icons/sync?style=solid
2020-04-07 14:51:22 -07:00
Dan J Miller
d8179ff030
Connect Screen Multi Select (#8078)
* Add UI for selecting multiple accounts on the first permissions connect screen

* Make accounts list scrollable on connect screen

* Change title wording on connect screen to 'select your accounts'

* Add select all tooltip to info circle on top of connect screen account list

* Add security info footer to the first screen of the connect flow

* Apply redesigns to page 2 of connect flow

* Display number of accounts on connect flow second screen if there are multiple to connect

* Update e2e tests for connect screen multi-select changes

* Remove unused chooseAnAcount message

* Fix styling/display of redirect elements on second page of connect flow

* Assorted small fixes in permissions connect

* Remove unnecessary tiny delays in spec files

* Remove incorrect use of bem modified in choose-account

* Remove unused locale

* Use Set for managing selected accounts in choose-acount and permissions-connect componets

* Compone!

* Move connect flow header into a reusable component, and implement new header designs

* Update locales and add missing locales

* Improve permission list item design (second screen of connect flow)

* Check box component improvements

* Fixes in variables.scss

* Simplfy code in selectAll of choose-account.component

* Hide checkboxes on first pages on connect flow when there is only one account

* Allow autofill of default new account modal text with right arrow

* Disable next button on first screen of connect flow when no accounts selected

* Improve choose-account/index.scss

* Remove metamask secure graphic

* Fix connect flow redirect screen

* Fix connectToMultiple locale

* Remove locales no longer used after connect flow multiple connect updates

* Fix size of dapp icon on redirect screen of connect flow

* Clean up choose-account code

* Stop using placeholder in new-account-modal

* Remove unused styles in permission-page-container/index.scss

* Pass origin instead of site name to PermissionsConnectHeader in connect flow

* Make iconName a required prop in permissions-connect-header

* Show checkbox in cases where there is one account in the choose-account list

* Do not render select all checkbox when only 1 list item, instead of just hiding it

* Small cleanup in choose-account/index.scss
2020-04-02 06:39:53 -02:30
Whymarrh Whitby
4229892fca
Refactor Menubar and AccountDetailsDropdown styles (#8278) 2020-04-02 00:08:45 -02:30
Dan J Miller
d1cd2bb618
Fix centering of account info in menu bar (#8274) 2020-04-01 17:11:26 -02:30
Mark Stacey
dbc7446b9a
Fix popup view expanding when expanding transaction (#8271)
The popup view would expand beyond the width of the viewport when
expanding a transaction. This bug was introduced in #8139 when I
removed the `min-width: 0` property from the `home__container` class;
this property was giving the parent permission to shrink that div below
the size of its content.

Instead of restoring that property, the parent component is no longer
using `display: flex`. Flexbox was never useful here, as this is just a
wrapper div around a wrapper div, both with identical sizes. The
default display type of `block` produces the desired behaviour with
less rules.
2020-04-01 13:18:36 -03:00
Mark Stacey
2d66e90d07
Refactor asset list into separate component (#8263)
The pieces that we'll be referring to as the "Asset List" in the near
future have been extracted from WalletView into a separate AssetList
component. This list includes ETH, the tokens, and the 'Add Token'
button.

The styles were moved alongside this new component as well.
2020-03-31 16:48:11 -03:00
Mark Stacey
f7504d153e
Move TokenCell styles alongside component (#8257)
The styles for the TokenCell component have been moved to be alongside
the component. They have also been renamed from `token-list-item` to
match the component name.
2020-03-30 23:44:10 -03:00
Mark Stacey
b30a352acb
Use @fortawesome/fontawesome-free npm package (#8256)
The official npm package for Font Awesome Free is now used instead of
the vendored styles. Previously we had been using v4.4.0, now we're
using v5.13.0.

We're now importing the Font Awesome SCSS modules instead of using the
minified CSS bundle. This integrates more cleanly into our build
system, and it lets us use their mixins directly in the future if we
need to.

The variable `fa-font-path` has been set to reference our font
directory, as instructed here:
https://fontawesome.com/how-to-use/on-the-web/using-with/sass#compile
2020-03-30 20:05:51 -03:00
ricky
84806bed9b
Add border none for moz-focus-inner (#8217) 2020-03-19 12:44:20 -04:00
ricky
ba18f600fb
Tx popover (#8210)
* Add minimal working popover

* Fix styling of popover component

* Use lorem ipsum

* Update classnames and remove unrelated styles

* Remove unused components

* Add SVG close icon

* Add Close icon to icon stories

* Use div

* Use `addon-actions`

* Use `<button>` for close

* Fix button wobble in Firefox

* Remove border
2020-03-19 12:07:12 -04:00
ricky
8ba35f673e
Add tx list-item component (#8195)
* Add tx list-item component

New list item compoent for transaction history

* Simplify component logic and remove type checks

* Address remaining feedback

* Remove extra line

* Place className prop on its own line

* Rename to primaryCurrency and secondaryCurrency

* Make the title `isRequired`

* Fix no-undef

* Remove more + buttons to be implemented in seperate PR

* Add minimal store and I18nProvider to storybook

* Use Component to support translations

* Add `metamask` to store

* Rename decorator
2020-03-17 15:15:53 -04:00
Brad Decker
7d374ab8d8
feat - add down caret on asset list (#8198) 2020-03-16 19:50:07 -03:00
ricky
3cd35fe0ae
Add tx history icons (#8180)
* Add tx history icons

* Make size `isRequired`

* Use classnames

* Include keyframes
2020-03-11 14:05:47 -04:00
Dan J Miller
5c4831bdee
Notifications Icon Circles (#7830)
* Adds notification icon circles and associated storybook stories

* Fix image paths in circle-icon.stories and message-circle-icon.component

* Code improvements for icon circles PR: remove additional z-index, make iconSource required

* Use component story format in circle-icon.stories and message-circle-icon.stories

* Remove success and info circle icons, as not presently needed

* Rename message-circle-icon to alert-circle-icon

* Small code fix ups for alert-circle-icons
2020-03-11 12:30:39 -02:30
Mark Stacey
f4c279e6ff
Extract style for Home component into separate module (#8139)
The styles used for the Home component were in the huge
"newui-sections" SCSS file. Instead they've been moved into an SCSS
module alongside the component, to follow our conventions.

The `main-container` class was left as-is because it is shared between
here and the settings page.
2020-02-28 16:27:22 -04:00
Erik Marks
5d1f3c1436
Delete shapeshift functionality; retain state and display (#8118)
* delete shapeshift functionality; retain state and display
2020-02-26 09:34:46 -08:00
Mark Stacey
35941f34dd
Move default white background from body to root element (#8110)
In our base stylesheets we set the `body` background color to white.
This unfortunately also affected the preview area of Storybook. The
Storybook preview only renders isolated components, but it does
include all styles.

To avoid this problem, the white background color has been moved to
the `#app-content` div instead. All of our UI is inside this div.
2020-02-26 09:33:58 -04:00
Whymarrh Whitby
5eb95625ca
Remove react-tooltip-component (#8099) 2020-02-25 09:11:56 -03:30
Konstantin
6f47fece56
Implementation encrypt/decrypt feature (#7831)
Implement `eth_decrypt` and `eth_getEncryptionPublicKey`. This allows decryption backed by the user's private key. The message decryption uses a confirmation flow similar to the messaging signing flow, where the message to be decrypted is also able to be decrypted inline for the user to read directly before confirming.
2020-02-19 14:24:16 -04:00
Mark Stacey
dac83f6188
Make account details modal close button easier to click (#7797)
The account details close button is difficult to click from the e2e
tests because it has a size of zero. The actual icon is added via CSS
as an `::after` pseudo-element.

The CSS has been adjusted to give the icon a size, and it the markup
is now a `button` rather than a `div`.
2020-01-10 10:43:53 -04:00
ricky
1c4f2aab8f React 16 upgrade (#7476)
* Use arrow property initializer functions

* Use pure components where applicable

* Add UNSAFE_ prefix for deprecated lifecycle hooks

* Add allow UNSAFE_

* Removed unused "Component"

* Replace boron with 'fade-modal'

* Upgrade react/no-deprecated to an error

* Paste react-tooltip-component source directly

* Use arrow functions to bind `this`

* Add UNSAFE_ prefix

* Update react-redux, react-router-dom

* Remove things from inlined 'fade-modal'

* Adjust mountWithRouter to get unit tests passing again

* Remove domkit

* Add Wrapper to render-helpers

* Upgrade @storybook/addon-knobs
2019-12-06 11:40:06 -04:00
Dan Finlay
f519fa1ed3
Connect distinct accounts per site (#7004)
* add PermissionsController

remove provider approval controller
integrate rpc-cap
create PermissionsController
move provider approval functionality to permissions controller
add permissions approval ui, settings page
add permissions activity and history
move some functionality to metamask-inpage-provider
rename siteMetadata -> domainMetadata

add accountsChange notification to inpage provider
move functionality to inpage provider
update inpage provider
Remove 'Connections' settings page (#7369)
add hooks for exposing accounts in settings
rename unused messages in non-English locales

Add external extension id to metadata (#7396)

update inpage provider, rpc-cap
add eth_requestAccounts handling to background
prevent notifying connections if extension is locked
update inpage provider
Fix lint errors
add migration
review fixes
transaction controller review updates
removed unused messages

* Login Per Site UI (#7368)

* LoginPerSite original UI changes to keep

* First commit

* Get necessary connected tab info for redirect and icon display for permissioned sites

* Fix up designs and add missing features

* Some lint fixes

* More lint fixes

* Ensures the tx controller + tx-state-manager orders transactions in the order they are received

* Code cleanup for LoginPerSite-ui

* Update e2e tests to use new connection flow

* Fix display of connect screen and app header after login when connect request present

* Update metamask-responsive-ui.spec for new item in accounts dropdown

* Fix approve container by replacing approvedOrigins with domainMetaData

* Adds test/e2e/permissions.spec.js

* Correctly handle cancellation of a permissions request

* Redirect to home after disconnecting all sites / cancelling all permissions

* Fix display of site icons in menu

* Fix height of permissions page container

* Remove unused locale messages

* Set default values for openExternalTabs and tabIdOrigins in account-menu.container

* More code cleanup for LoginPerSite-ui

* Use extensions api to close tab in permissions-connect

* Remove unnecessary change in domIsReady() in contentscript

* Remove unnecessary private function markers and class methods (for background tab info) in metamask-controller.

* Adds getOriginOfCurrentTab selector

* Adds IconWithFallback component and substitutes for appropriate cases

* Add and utilize font mixins

* Remove unused  method in disconnect-all.container.js

* Simplify buttonSizeLarge code in page-container-footer.component.js

* Add and utilize getAccountsWithLabels selector

* Remove console.log in ui/app/store/actions.js

* Change last connected time format to yyyy-M-d

* Fix css associated with IconWithFallback change

* Ensure tracked openNonMetamaskTabsIDs are correctly set to inactive on tab changes

* Code cleanup for LoginPerSite-ui

* Use reusable function for modifying openNonMetamaskTabsIDs in background.js

* Enables automatic switching to connected account when connected domain is open

* Prevent exploit of tabIdOriginMap in background.js

* Remove unneeded code from contentscript.js

* Simplify current tab origin and window opener logic using remotePort listener tabs.queryTabs

* Design and styling fixes for LoginPerSite-ui

* Fix permissionHistory and permission logging for eth_requestAccounts and eth_accounts

* Front end changes to support display of lastConnected time in connected and permissions screens

* Fix lint errors

* Refactor structure of permissionsHistory

* Fix default values and object modifications for domain and permissionsHistory related data

* Fix connecting to new accounts from modal

* Replace retweet.svg with connect-white.svg

* Fix signature-request.spec

* Update metamask-inpage-provider version

* Fix permissions e2e tests

* Remove unneeded delay from test/e2e/signature-request.spec.js

* Add delay before attempting to retrieve network id in dapp in ethereum-on=.spec

* Use requestAccountTabIds strategy for determining tab id that opened a given window

* Improve default values for permissions requests

* Add some message descriptions to app/_locales/en/messages.json

* Code clean up in permission controller

* Stopped deep cloning object in mapObjectValues

* Bump metamask-inpage-provider version

* Add missing description in app/_locales/en/messages.json

* Return promises from queryTabs and switchToTab of extension.js

* Remove unused getAllPermissions function

* Use default props in icon-with-fallback.component.js

* Stop passing  to permissions controller

* Delete no longer used clear-approved-origins modal code

* Remove duplicate imports in ui/app/components/app/index.scss

* Use URL instead of regex in getOriginFromUrl()

* Add runtime error checking to platform, promise based extension.tab methods

* Support permission requests from external extensions

* Improve font size and colour of the domain origin on the permission confirmation screen

* Add support for toggling permissions

* Ensure getRenderablePermissionsDomains only returns domains with exposedAccount caveat permissions

* Remove unused code from LoginPerSite-ui branch

* Ensure modal closes on Enter press for new-account-modal.component.js

* Lint fix

* fixup! Login Per Site UI (#7368)

* Some code cleanup for LoginPerSite

* Adds UX for connecting to dapps via the connected sites screen (#7593)

* Adds UX for connecting to dapps via the connected sites screen

* Use openMetaMaskTabIds from background.js to determine if current active tab is MetaMask

* Delete unused permissions controller methods

* Fixes two small bugs in the LoginPerSite ui (#7595)

* Restore `providerRequest` message translations (#7600)

This message was removed, but it was replaced with a very similar
message called `likeToConnect`. The only difference is that the new
message has "MetaMask" in it. Preserving these messages without
"MetaMask" is probably better than deleting them, so these messages
have all been restored and renamed to `likeToConnect`.

* Login per site no sitemetadata fix (#7610)

* Support connected sites for which we have no site metadata.

* Change property containing subtitle info often populated by origin to a more accurate of purpose name

* Lint fix

* Improve disconnection modal messages (#7612)

* Improve disconnectAccountModalDescription and disconnectAllModalDescription messages

* Update disconnectAccountModalDescription app/_locales/en/messages.json

Co-Authored-By: Mark Stacey <markjstacey@gmail.com>

* Improve disconnectAccount modal message clarity

* Adds cancel button to the account selection screen of the permissions request flow (#7613)

* Fix eth_accounts permission language & selectability (#7614)

* fix eth_accounts language & selectability

* fix MetaMask capitalization in all messages

* Close sidebar when opening connected sites (#7611)

The 'Connected Sites' button in the accounts details now closes the
sidebar, if it is open. This was accomplished by pulling the click
handler for that button up to the wallet view component, where another
button already followed a similar pattern of closing the sidebar.

It seemed confusing to me that one handler was in the `AccountsDetails`
container component, and one was handed down from above, so I added
PropTypes to the container component.

I'm not sure that the WalletView component is the best place for this
logic, but I've put it there for now to be consistent with the add
token button.

* Reject permissions request upon tab close (#7618)

Permissions requests are now rejected when the page is closed. This
only applies to the full-screen view, as that is the view permission
requests should be handled in. The case where the user deals with the
request through a different view is handled in #7617

* Handle tab update failure (#7619)

`extension.tabs.update` can sometimes fail if the user interacts with
the tabs directly around the same time. The redirect flow has been
updated to ensure that the permissions tab is still closed in that
case. The user is on their own to find the dapp tab again in that case.

* Login per site tab popup fixes (#7617)

* Handle redirect in response to state update in permissions-connect

* Ensure origin is available to permissions-connect subcomponents during redirect

* Hide app bar whenever on redirect route

* Improvements to handling of redirects in permissions-connect

* Ensure permission request id change handling only happens when page is not null

* Lint fix

* Decouple confirm transaction screen from the selected address (#7622)

* Avoid race condtion that could prevent contextual account switching (#7623)

There was a race condition in the logic responsible for switching the
selected account based upon the active tab. It was asynchronously
querying the active tab, then assuming it had been retrieved later.

The active tab info itself was already in the redux store in another
spot, one that is guaranteed to be set before the UI renders. The
race condition was avoided by deleting the duplicate state, and using
the other active tab state.

* Only redirect back to dapp if current tab is active (#7621)

The "redirect back to dapp" behaviour can be disruptive when the
permissions connect tab is not active. The purpose of the redirect was
to maintain context between the dapp and the permissions request, but
if the user has already moved to another tab, that no longer applies.

* Fix JSX style lint errors

* Remove unused state
2019-12-03 09:35:56 -08:00
Whymarrh Whitby
6849595326
Delete unused to-autocomplete (#7533) 2019-11-24 01:20:48 -03:30
Whymarrh Whitby
3203c75ee4
Delete commented-out CSS code (#7528) 2019-11-23 01:46:54 -03:30
Mark Stacey
f763979bed
Add support for one-click onboarding (#7017)
* Add support for one-click onboarding

MetaMask now allows sites to register as onboarding the user, so that
the user is redirected back to the initiating site after onboarding.
This is accomplished through the use of the `metamask-onboarding`
library and the MetaMask forwarder.

At the end of onboarding, a 'snackbar'-stype component will explain to the
user they are about to be moved back to the originating dapp, and it will
show the origin of that dapp. This is intended to help prevent phishing
attempts, as it highlights that a redirect is taking place to an untrusted
third party.

If the onboarding initiator tab is closed when onboarding is finished,
the user is redirected to the onboarding originator as a fallback.

Closes #6161

* Add onboarding button to contract test dapp

The `contract-test` dapp (run with `yarn dapp`, used in e2e tests) now
uses a `Connect` button instead of connecting automatically. This
button also serves as an onboarding button when a MetaMask installation
is not detected.

* Add new static server for test dapp

The `static-server` library we were using for the `contract-test` dapp
didn't allow referencing files outside the server root. This should
have been possible to work around using symlinks, but there was a bug
that resulted in symlinks crashing the server.

Instead it has been replaced with a simple static file server that
will serve paths starting with `node_modules` from the project root.
This will be useful in testing the onboarding library without vendoring
it.

* Add `@metamask/onboarding` and `@metamask/forwarder`

Both libraries used to test onboarding are now included as dev
dependencies, to help with testing. A few convenience scripts
were added to help with this (`yarn forwarder` and `yarn dapp-forwarder`)
2019-11-22 13:03:51 -04:00
Dan J Miller
2673eef3c4
Redesign approve screen (#7271)
* Redesign approve screen

* Add translations to approve screen components

* Show account in header of approve screen

* Use state prop bool for unlimited vs custom check in edit-approval-permission

* Set option to custom on input change in edit-approval-permission

* Allow setting of approval amount to unlimited in edit-approval-permission

* Fix height of confirm-approval popup

* Ensure decimals prop passted to confirm-approve.component is correct type

* Ensure first param passed to calcTokenValue in confirm-approve.util is the correct type

* Fix e2e test of permission editing

* Remove unused code from edit-approval-permission.container
2019-11-05 11:43:48 -03:30
ricky
7181779576
Refactor new-account.js (#7312)
* Start refactor

* Use import syntax

* Add create-account.component

* Continue refactor

* Add new line

* Start using JSX and make tabs a bit more DRY

* 👋 bye-bye hyperscript

* These can be disabled when active

* Start JSX in new account component

* 👋 bye-bye hyperscript

* Move newAccountNumber into container

* Validate newAccountNumber prop
2019-10-29 12:12:41 -04:00
Thomas Huang
45a8fdebf7 Update ETH logo, update deposit Ether logo height and width (#7239) 2019-10-02 10:15:44 -06:00
Mark Stacey
638149d861
Remove unused modals (#7184)
These modals were no longer referenced anywhere.
2019-09-18 10:09:41 -03:00
Nick Doiron
d589d2dec0 Right-to-left CSS (using module for conversion) (#7072)
* Create RTL stylesheets using `gulp-rtl`

* Handle RTL stylesheet special cases

Certain blocks of Sass  were set to bypass "rtlcss" using ignore
comments. Certain icons had to be flipped 180 degrees.

* Switch stylesheets when locale changes

A second stylesheet has been added to each HTML page for use with
right-to-left locales. It is disabled by default. It is enabled on
startup if a RTL locale is set, and when switching to a RTL locale.
Similarly the LTR stylesheet is disabled when a RTL locale is used.

Unfortunately there is an unpleasant flash of unstyled content when
switching between a LTR and a RTL locale. There is also a slightly
longer page load time when using a RTL locale (<1s difference). We
couldn't think of an easy way to avoid these problems.

* Set `dir="auto"` as default on `TextFields`
2019-09-03 14:47:54 -03:00
Dan J Miller
9d5be5d29f
New notification fixes (#6955)
* Replace use of backup-notification with use of home notification

* Pin notifications relative to window

* Remove unneeded isRequired condition on some home.component properties

* Refactor rendering of home notifications

* UX for multiple notifications

* Adds dismissal to provider request notification.

* Fix test failures

The e2e tests have been updated to reference `home-notification`
classnames instead of the removed `background-notification`. The
active tab proptypes and default values were updated as well.
2019-08-02 18:01:26 -02:30
Christopher Cooper
b7eae4ba80 split AccountDetails into a separate component (#6943) 2019-08-02 10:06:31 -02:30
Dan J Miller
e9c7df28ed
Address book send plus contact list (#6914)
* Style Send Header

* Move Send to-row to send view and restyle

* Add "Recents" group to select recipient view

* Rename SendToRow to AddRecipient

* Basic UI and Layout

* New ENSInput component

* wip - fuzzy search for input

* small refactor

* Add Dialog

* contact list initial

* initial error on invalid address

* clean up edit

* Click to open modal

* Create AddToAddressBookModal component

* Modal styling and layout

* modal i18n

* Add to Addressbook

* ens wip

* ens wip

* ENS Resolution

* Reset input

* Send to explicit address

* Happy Path Complete

* Add back error checking

* Reset send-to when emptying input

* Add back warning object

* Fix linter

* Fix unit test #1 - fix import paths

* Remove dead tests

* One more to go

* Fix all unit tests

* add unit test for reducers and actions

* test rendering AddRecipient

* Add tests for dialog boxes in AddRecipient

* Add test for validating

* Fix linter

* Fix e2e tests

* Token send e2e fix

* Style View Contact

* Style edit-contact

* Fix e2e

* Fix from-import-beta-ui e2e spec

* Make section header say "add recipient” by default

* Auto-focus add recipient input

* Update placeholder text

* Update input title font size

* Auto advance to next step if user paste a valid address

* Ellipsify address when recipient is selected

* Fix app header background color on desktop

* Give each form row a margin of 16px

* Use .container/.component naming pattern for ens-input

* Auto-focus on input when add to addressbook modal is opened; Save on Enter

* Fix and add unit test

* Fix selectors name in e2e tests

* Correct e2e test token amount for address-book-send changes

* Adds e2e test for editing a transaction

* Delete test/integration/lib/send-new-ui.js

* Add tests for amount max button and high value error on send screen to test/e2e/metamask-ui.spec.js

* lint and revert to address as object keys

* add chainId based on current network to address book entry

* fix test

* only display contacts for the current network

* Improve ENS message when not found on current network

* Add error to indicate when network does not support ENS

* bump gaba

* address book, resolve comments

* Move contact-list to its own component

* De-duplicate getaddressbook selector and refactor name selection logic in contact-list-tab/

* Use contact-list component in contact-list-tab.component (i.e. in settings)

* Improve/fix settings headers for popup and browser views

* Lint fixes related to address book updates

* Add 'My accounts' page to settings address book

* Update add new contact button in settings to match floating circular design

* Improve styles of view contact page

* Improve styles and labels of the add-contact.component

* Further lint fixes related to address book updates

* Update unit tests as per address book updates

* Ensure that contact list groups are sorted alphabetically

* Refactor settings component to use a container for connection to redux; allow display of addressbook name in settings header

* Decouple ens-input.component from send context

* Add ens resolution to add contact screen in settings

* Switching networks when an ens address is shown on send form removes the ens address.

* Resolve send screen search for ensAddress to matching address book entry if it exists

* Show resolved ens icon and address if exists (settings: add-contact.component)

* Make the displayed and copied address in view-contact.component the checksummed address

* Default alias state prop in AddToAddressBookModal to empty string

* Use keyCode to detect enter key in AddToAddressBookModal

* Ensure add-contact component properly updates after QR code detection

* Fix display of all recents after clicking 'Load More' in contact list

* Fix send screen contact searching after network switching

* Code cleanup related to address book changes

* Update unit tests for address book changes

* Update ENS name not found on network message

* Add ens registration error message

* Cancel on edit mode takes user back to view screen

* Adds support for memo to settings contact list view and edit screens

* Modify designs of edit and view contact in popup environment

* Update settings content list UX to show split columns in fullscreen and proper internal navigation

* Correct background address book API usages in UI
2019-07-31 17:26:44 -02:30
Mark Stacey
adac1de822
Remove AccountDropdownMini component (#6906)
The `AccountDropdownMini` component featured the ability to switch
accounts using a dropdown, but this functionality was disabled in #6024.
It has been acting as a restyled `AccountListItem` since then.

The component has been removed, and the style changes moved to the sole
parent component (`RequestSignature`).
2019-07-25 08:55:43 -03:00
Kristian Tapia
934433e4be Single asset dropdown fix (#6900)
* Disable open dropdown for single asset

* add test to check single asset in dropdown

* fix lint errors, remove unused import
2019-07-23 21:21:13 -02:30
Mark Stacey
0f8a9a5d49
Serve CSS as an external file (#6894)
The CSS is now served as an external file instead of being injected.
This was done to improve performance. Ideally we would come to a middle
ground between this and the former behaviour by injecting only the CSS
that was required for the initial page load, then lazily loading the
rest. However that change would be more complex. The hope was that
making all CSS external would at least be a slight improvement.

Performance metrics were collected before and after this change to
determine whether this change actually helped. The metrics collected
were the timing events provided by Chrome DevTools:

* DOM Content Loaded (DCL) [1]
* Load (L) [2]
* First Paint (FP) [3]
* First Contentful Paint (FCP) [3]
* First Meaningful Paint (FMP) [3]

Here are the results (units in milliseconds):

Injected CSS:

| Run | DCL | L | FP | FCP | FMP |
| :--- | ---: | ---: | ---: | ---: | ---: |
| 1 | 1569.45 | 1570.97 | 1700.36 | 1700.36 | 1700.36 |
| 2 | 1517.37 | 1518.84 | 1630.98 | 1630.98 | 1630.98 |
| 3 | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 |
| 4 | 1522.15 | 1523.72 | 1629.3 | 1629.3 | 1629.3 |
| **Min** | 1517.37 | 1518.84 | 1629.3 | 1629.3 | 1629.3 |
| **Max** | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 |
| **Mean** | 1553.17 | 1554.71 | 1668.3 | 1668.3 | 1668.3 |
| **Std. dev.** | 33.41 | 33.43 | 38.16 | 38.16 | 38.16 |

External CSS:

| Run | DCL | L | FP | FCP | FMP |
| :--- | ---: | ---: | ---: | ---: | ---: |
| 1 | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 |
| 2 | 1537.55 | 1538.99 | 199.38 | 1633.5 | 1633.5 |
| 3 | 1571.28 | 1572.74 | 268.65 | 1677.03 | 1677.03 |
| 4 | 1510.98 | 1512.33 | 206.72 | 1607.03 | 1607.03 |
| **Min** | 1510.98 | 1512.33 | 199.38 | 1607.03 | 1607.03 |
| **Max** | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 |
| **Mean** | 1553.8025 | 1555.7425 | 239.93 | 1657.605 | 1657.605 |
| **Std. dev.** | 29.5375 | 30.0825 | 36.88 | 37.34 | 37.34 |

Unfortunately, using an external CSS file made no discernible improvement
to the overall page load time. DCM and L were practically identical, and
FCP and FMP were marginally better (well within error margins).

However, the first paint time was _dramatically_ improved. This change
seems worthwhile for the first paint time improvement alone. It also
allows us to delete some code and remove a dependency.

The old `css.js` module included two third-party CSS files as well, so
those have been imported into the main Sass file. This was easier than
bundling them in the gulpfile.

The resulting CSS bundle needs to be served from the root because we're
using a few `@include` rules that make this assumption. We could move
this under `/css/` if desired, but we'd need to update each of these
`@include` rules.

Relates to #6646

[1]: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
[2]: https://developer.mozilla.org/en-US/docs/Web/Events/load
[3]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
2019-07-23 14:10:13 -03:00
Terry Smith
33071e3014 Targets base inputs and only prevents outline if user uses a mouse (#6871) 2019-07-16 22:58:00 -02:30
Terry Smith
721215973a Re enable the setMouseUserState styles. (#6860)
Typo
2019-07-16 00:06:57 -02:30
Dan J Miller
32a3f5ad7b
Address various UI styling issues (#6744)
* Add loading spinner to pending tx status label.

* Add border around account icon in top right

* Change style of settings toggle buttons; wrap with local components

* Eliminate large space after settings labels when no description

* Remove network form from advanced tab of settings

* Keep new account container height to contents when in full screen
2019-07-08 15:28:35 -02:30
Kirill Goncharov
a47370057e Fix styles on 'import account' page, update help link (#6700)
* Fix styles on 'import account' page, update help link

* Update changelog
2019-06-17 08:37:34 -02:30
Thomas Huang
6fb0d4af27 Wrap smaller custom block explorer url text (#6714) 2019-06-17 08:32:12 -02:30
Chi Kei Chan
9a1a207ffa
MetaMorph - Spacing and Typeface on Extension Main view (#6584)
* wip

* Style Update: Mobile App Header

* wip

* Style Update: mobile menu-bar

* Style Update: Primary and Secondary balance on mobile main view

* Style Update: Spacing for transaction-list and transaction-list-item

* Address PR Comments

* Fix full-width view

* line-height fixes
2019-06-12 19:56:04 -07:00
Jenny Pollack
9180e39b08 Revert "fixed #5524"
This reverts commit c8cb4ba370.
2019-06-06 19:20:33 +02:00
Etienne Dusseault
0e9c8fb5cc Improved UX for sweeping accounts (#6488)
* Changed max button to checkbox, disabled input if max mode is on, recalculate price according to gas fee if max mode is on

* Disabled insufficient funds message in the modal if max mode is on, displays proper amounts in modal when max mode is on, sets the send amount according to custom gas price after gas modal save, resets the send amount after resetting custom gas price

* Disabled max mode checkbox if gas buttons are loading, refactored gas-modal-page-container

* Implemented new max button & max mode message. Moved insufficient funds error to underneath the send amount field

* Fixed existing integration test to pass, created new tests to ensure send amount field is disabled when max button is clicked and the amount changes when the gas price is changed. Refactored some components
2019-05-20 14:08:08 -02:30
Alex Ivasyuv
c8cb4ba370 fixed #5524 2019-05-14 22:00:53 +03:00
Chi Kei Chan
ec712d5d8f
Set max-width on network dropdown and ellipsis long network name (#6494) 2019-04-24 20:01:24 -07:00
Chi Kei Chan
3519e90ffd Make height consistent on all row in send-content (#6480)
* Update all send-content row to 54px height

* Remove header subtitle

* Remove tests that check for send screen subheader
2019-04-18 00:41:04 -02:30
Chi Kei Chan
931aaeb700 Add token selection to the send screen (#6445)
* Move send to pages/

* Fix unit tests

* Finish UI

* Integrate asset dropdown to send actions

* Remove console.log

* Hide asset change during edit

* Enable switch from send token to seand eth

* Enable switching from token to eth when editing

* Fix linter

* Fixing test

* Fix unit tests

* Fix linter

* Fix react warning; remove console.log

* fix flat test

* Add metrics

* Address code review comments

* Consistent spacing between send screen form rows.

* Reduce height of gas buttons on send screen.

* Make send screen gas button height dependent on size of contents.
2019-04-17 16:45:13 -02:30
Thomas Huang
83f3e8ab98
Merge pull request #6468 from chikeichan/network-indicator-style-fix
Fix switcher height when Custom RPC is selected or loading
2019-04-17 12:42:49 -05:00
Paul Bouchon
0db0a187c8 feature: add Goerli support (#6459) 2019-04-17 15:04:49 -02:30
Chi Kei Chan
597c490928 Fix switcher height when Custom RPC is selected or when network is loading 2019-04-16 23:47:11 -07:00
Chi Kei Chan
92c03bdff2 Update buttons & colors to match design system (#6446)
* Refactoring button styles

* renaming buttons

* Add Link and Button styles

* Update new btn styles and storybook

* Fix tests

* Change font weight; Update storybook

* Fix linter
2019-04-16 17:05:22 -02:30
Dan J Miller
961ad267df
New settings page rebased (#6333)
* New setting tab

* Add InfoTab

* Add Advanced tab

* Add Security Tab

* Finish mobile view

* Make new setting page responsive

* Fix linter

* Fix y scrolling

* Update link in network dropdown

* Fix e2e tests

* Remove duplicate translation key

* Resolve merge conflict

* Only change settings header in popup view.

* Place mobile-sync button in advanced-tab of settings
2019-03-25 13:43:23 -02:30
Chi Kei Chan
31175625b4 Folder restructure (#6304)
* Remove ui/app/keychains/

* Remove ui/app/img/ (unused images)

* Move conversion-util to helpers/utils/

* Move token-util to helpers/utils/

* Move /helpers/*.js inside /helpers/utils/

* Move util tests inside /helpers/utils/

* Renameand move confirm-transaction/util.js to helpers/utils/

* Move higher-order-components to helpers/higher-order-components/

* Move infura-conversion.json to helpers/constants/

* Move all utility functions to helpers/utils/

* Move pages directory to top-level

* Move all constants to helpers/constants/

* Move metametrics inside helpers/

* Move app and root inside pages/

* Move routes inside helpers/

* Re-organize ducks/

* Move reducers to ducks/

* Move selectors inside selectors/

* Move test out of test folder

* Move action, reducer, store inside store/

* Move ui components inside ui/

* Move UI components inside ui/

* Move connected components inside components/app/

* Move i18n-helper inside helpers/

* Fix unit tests

* Fix unit test

* Move pages components

* Rename routes component

* Move reducers to ducks/index

* Fix bad path in unit test
2019-03-21 20:33:30 -02:30
Dan J Miller
38b91f63a2 Add togglable advanced gas controls on send and confirm screens (#6112)
* Extract advanced gas input controls to their own component

* Add advanced inline gas toggle to settings

* Add optional advanced inline gas to send send screen

* Adds optional advanced gas inputs to the confirm screen

* Add info modals for advanced gas inputs.

* Fix translation of advance gas toggle description.

* Lint and unit test fixes for inline-advanced-gas-inputs

* Increase margin above advanced options button on send screen

* Move methods from constructor to property syntax in advanced-gas-inputs.component
2019-02-05 16:24:28 -08:00
Dan J Miller
02bdbbbc3e Add visual indicator when displaying a cached balance (#5854) 2019-01-30 08:46:12 -03:30
Esteban Miño
2d7c9b3dac Prevent send to token warning (#6058) 2019-01-23 14:39:56 -03:30
Alexander Tseung
fba17d77de Refactor first time flow, remove seed phrase from state (#5994)
* Refactor and fix styling for first time flow. Remove seed phrase from persisted metamask state

* Fix linting and tests

* Fix translations, initialization notice routing

* Fix drizzle tests

* Fix e2e tests

* Fix integration tests

* Fix styling

* Fix migration naming from 030 to 031

* Open extension in browser when user has not completed onboarding
2019-01-23 11:55:34 -03:30
Alexander Tseung
0b4469b842 Add scrolling button to account list 2019-01-03 11:22:38 -08:00
Dan Miller
f4dc64960d Improve styling of loading retry / error screen 2018-12-12 13:54:45 -03:30
Dan Miller
20dbebae9f Adds network loading retry / error screen. 2018-12-12 13:53:37 -03:30
Whymarrh Whitby
6a0993a45e Replace height: 100% rule with workaround for flexbox quirks 2018-12-05 14:13:45 -03:30
Dan Miller
8194309a9a Fix styling of send screen in extension view when hex data on. 2018-12-04 00:06:22 -03:30
Dan Miller
d5411e772d Make gas customization modal responsive. 2018-12-04 00:06:22 -03:30
Dan Miller
b567c78bca Integrate gas buttons with the send screen. 2018-12-04 00:06:04 -03:30
Dan Miller
112d18e316 Adds basic tab content to gas customizer, with styled button group (static, for now). 2018-12-04 00:06:04 -03:30
Dan Miller
342dc95410 Adds the content of the advanced tab - w/o chart or dynamic content - to gas customize modal. 2018-12-04 00:06:04 -03:30
Dan Miller
f9aa5a70de Adds new gas customization modal container (without content) 2018-12-04 00:06:04 -03:30
Whymarrh Whitby
1403b8286d
Show disabled cursor in .network-disabled state (#5829) 2018-11-26 13:11:16 -03:30
brunobar79
9b1df386de fix merge conflicts 2018-11-20 17:44:28 -05:00
Alexander Tseung
a7b3750a3e Fix button styling for Create Account Connect (#5787) 2018-11-19 22:46:41 -08:00
Alexander Tseung
4c87c05a02
Fix rounding issue when sending max tokens (#5695)
* Fix rounding issue when sending max tokens

* Ensure amount row shows exact amount of max tokens on send screen (#2)

* Fix tests

* Change stored redux value from BigNumber to hex string. Fix TokenInput default value
2018-11-19 16:06:34 -08:00
brunobar79
c651212025 fix merge conflicts 2018-11-06 20:21:19 -05:00
bitpshr
c76c9ca2c8 EIP-1102: updated implementation 2018-11-05 15:07:09 -08:00
Alexander Tseung
eaca9a0e8a Fix raised button min-height (#5613) 2018-10-26 10:04:21 +02:00
Alexander Tseung
55c66b0d98
Fix button styling for overflowing text (#5602) 2018-10-25 22:00:14 +08:00
Alexander Tseung
688ef2ed01
Fix signature request styling issues (#5574) 2018-10-23 07:15:38 +08:00
Alexander Tseung
614995c0e9 Fix account display width for large currency values 2018-10-21 22:01:20 +08:00
brunobar79
9c1b2108f6 fix merge conflicts 2018-10-21 01:59:53 -04:00
Whymarrh Whitby
42fa54678f Extract Add Token button into its own component 2018-10-17 15:49:29 -02:30
brunobar79
13820b6cc1 fix conflicts 2018-10-16 14:01:54 -04:00
Santiago Gonzalez Toral
f88373237b Added account options on home screen 2018-10-09 19:43:41 -07:00
Sean
b5169340ab Improvement: Reposition customize gas error (#5265) 2018-10-01 11:37:23 -02:30
HackyMiner
13a1d46720 support editable customRPC (#5267)
* support editable customRPC #5246

* remove rpcList size restriction
2018-09-28 17:23:58 -02:30
Alexander Tseung
04988eca5e
Merge pull request #5241 from MetaMask/refactor-settings
Refactor settings page to use JSX and follow component file folder st…
2018-09-20 23:33:04 -07:00
Alexander Tseung
b579ee9619 Refactor settings page to use JSX and follow component file folder structure 2018-09-19 16:37:23 -07:00
Whymarrh Whitby
3987f9860f Move main-container wrapper div into its own class 2018-09-19 16:43:58 -02:30
Whymarrh Whitby
fbf14cd130 Prevent loading screen from overlaying the app bar
Refs #4417

This change is functional copy of 3893469 that solves the problem in a way
that doesn't depend on the height of the app bar since the app bar isn't a
fixed height in the smaller views.
2018-09-19 16:03:16 -02:30
Whymarrh Whitby
4c37669557 Make the LoadingScreen component 100% as tall as its container 2018-09-19 15:33:53 -02:30
Whymarrh Whitby
b1b5968e5e Remove unused loading-overlay--full-screen CSS styles
Refs #4417
2018-09-19 15:32:20 -02:30
Paul Bouchon
daca7f9b41
Merge branch 'develop' into eip-712 2018-09-17 12:11:10 -04:00
Sean
cd28dbb1d5 Improvement: Increase click area for arrows (#5264) 2018-09-15 12:22:10 -07:00
chadmg
055ddd5f1e follow up style fix to #5242 2018-09-13 19:23:04 -04:00
bitpshr
36dd0354e7 Implement latest EIP-712 protocol 2018-09-13 15:40:57 -04:00
Alexander Tseung
16d6cd5eb9
Merge pull request #5182 from MetaMask/tx-activity
Add Transaction Details to the Transaction List view
2018-09-12 20:07:59 -07:00
Chad Grimaldi
014240b066 increase z-index of send-to input to allow for right-click (#5242) 2018-09-12 19:57:35 -07:00
Alexander Tseung
31089778ba Add raised type buttons to Button component. Refactor all buttons within app to Button components 2018-09-12 19:48:51 -07:00
brunobar79
8ee01f4e99 Merge branch 'develop' of github.com:MetaMask/metamask-extension into trezor-v5 2018-09-05 16:26:09 -04:00
Dan Miller
40e0d92f57 Adds sidebar component and refactors slide in wallet view sidebar to use it. 2018-08-28 22:08:15 -02:30