The `currentPath` parameter passed to our metrics utility had been
passed the full URL rather than just the path, contrary to what the
name would imply. We only used the path portion, so passing the full
URL did lead to complications.
Now just the `pathname` is passed in, rather than the full URL. This
simplifies the metrics logic, and it incidentally fixes two bugs.
The main bug fixed is regarding Firefox metrics. Previously we had
assumed the `currentPath` would start with `chrome-extension://`, which
of course was not true on Firefox. This lead to us incorrectly parsing
the `currentPath`, so path tracking was broken for Firefox events.
This broken parsing is now bypassed entirely, so metrics should now
work the same on Firefox as on Chrome.
The second bug was that we were incorrectly setting the tracking URL
for background events during tests. As a result, we were incorrectly
detecting ourselves as an internal site that had referred the user to
us. But this was not of major concern, since it only affected test
metrics (which get sent to the development Matomo project).
Lastly, this change let us discard the `pathname` parameter used in
the `overrides` parameter of the `metricsEvent` function. Now that
`currentPath` is equivalent to `pathname`, the `pathname` parameter is
redundant.
* Remove `url` parameter from `metricsEvent`
The `url` parameter was used to override the `currentPath`, but it
never worked correctly. It was supposed to be used for setting the
`url` query parameter that was sent to Matomo, but `currentPath` was
always used even if it `url` was set and `currentPath` was empty.
Instead, `currentPath` is now always used. There was never a need to
provide an "override" for `currentPath` when it can be set directly.
The metrics provider does set `currentPath` automatically by default,
but this can be overwritten already by passing a second parameter to
`metricsEvent`.
There were two places this `url` parameter was being used: background
events, and path changes. Background events were submitted with no
`currentPath`, so because of the bug with the `url` parameter, the
metrics utility would crash upon each event. So those were never
actually sent. This commit will fix that crash.
The `currentPath` parameter was supplied as an empty string for the
path change events, so those never crashed. They just had the `url`
query string parameter set incorrectly (to an empty string). It should
now be correctly populated, which should mean we'll be capturing all
path changes now. Previously we were only capturing path changes to
pages that happened to include an event, because of this blank `url`
problem.
* Use `url` query parameter as fallback for generating `pv_id`
The `pv_id` parameter currently isn't generated correctly on Firefox,
as the generation assumes that the current URL starts with
`chrome-extension://`. The `url` query parameter is still unique for
each path, so it's probably good enough for generating an id for each
page.
This is just a temporary fix; it will be removed in a future PR, where
Firefox will be properly supported.
The UI would crash upon deleting a contact from the contact list. This
happened for two reasons: the deletion could result in a re-render
before the `history.push` finished navigating back to the contact list
(it was a race condition), and the contact entry left behind an invalid
`identities` entry when it was removed.
The first problem was fixed by making the container components for view
and edit contact more tolerant of being passed an `address` that
doesn't correspond to a contact. If they are given an address without a
contact, `null` is passed to the component via the `address` prop. The
component will redirect back to the list when this happens instead
rendering. This is more awkward than I'd like, but it was the most
sensible way of handling this I could think of without making much more
drastic changes to how we're handling routing here.
The second problem was caused by the `setAccountLabel` call, which was
used to ensure the contact entry for any wallet accounts was kept
in-sync with the account label. This was being called even for non-
wallet accounts though, which is where this problem arose. This step is
now skipped for non-wallet accounts.
Fixes#9019
The Home page component is responsible for closing the notification
window and triggering redirects in various situations. When this
happens, the home page is briefly rendered before the redirect/close
happens. This is a waste of cycles, and is distracting for users.
We now render nothing if the page is in the process of redirecting or
reloading. None of the redirects handled in this component are for sub-
pages, so we don't need the Home page to render in any of these cases.
We were already doing this for redirects to transaction confirmations,
but now we're taking the same approach for all redirects, and for the
cases where the window is closed.
The notification window is now kept open after the connect flow if
there are still pending confirmations. Previously, the notification
window would be closed after the connect flow no matter what, and any
pending confirmations would never be shown to the user.
This was accomplished by redirecting to the home screen after the
connect flow. The logic for deciding whether or not to close the window
is already handled by the home page. This does have the unfortunate
side-effect of briefly rendering the home page before the window
closes, but this is a minor problem that exists already in a number of
other scenarios, and it will be fixed in a subsequent PR.
Fixes#8973
When a suggested token was resolved in a different window, the popup
or notification UI could get stuck with an empty suggested token list,
where either action would throw an error.
This case is now handled by either redirecting or closing the window,
in the popup and notification cases respectively. This check is
performed on both component mount and update.
The "confirm suggested token" page allowed the confirm button to be
pressed even when there were no tokens to confirm. This can happen
sometimes when the page is in the process of redirecting.
The designs for the connect flow show the site `origin` below the site
icon rather than the site name. This was done for security reasons,
and because the site name is often set to an unwieldy long string.
This was accidentally undone in #8815 in the process of fixing a
separate bug. The origin has now been restored. More specific PropTypes
have been set on each use of the `domainMetadata` prop as well.
The mobile sync redirect was failing due to a typo in a prop. It would
fail to redirect correctly in the event of a timeout, or after pressing
'Cancel'.
The 'copy-to-clipboard' icon was removed in #8190, and replaced with a
new 'Copy' icon component. It was still being used in two places
though, on the confirmation page for decryption and on the reveal seed
phrase screen..
The new Copy icon is now used in these two places instead. It has been
given a size of '17' to match the old icon size.
The connected status indicator had been moved left since this popup was
first written. The position of the highlighted portion of the
background has been updated reflect this.
The letter chosen for the fallback site icon was being set
inconsistently throughout the extension. The connect flow was using the
first letter of the `origin` for the letter (which was always `H`,
because `HTTP`), but the connect sites list and the account menu were
using the `name` from the domain metadata.
The `name` is now used for the fallback icon everywhere. A selector
that supplied a default domain metadata object has also been augmented
to use the `hostname` rather than the `origin` as a fallback name, to
match the behavior of the inpage provider.
A new `SiteIcon` component has been created for showing icons
representing web3 sites. The icon has a border and background, and it
has a fallback in case no icon is given. This new component accepts a
`size` prop that controls the size of the icon.
The old `IconWithFallback` component had a hard-coded size in the
SCSS styles for the icon, which was being overridden in a few places.
It was difficult to customize, and overly complicated.
The old `IconWithFallback` component is still used, but it's now
simpler. It only handles rendering the underlying `img` for the icon,
or the fallback letter if no image is given.
A separate `IconBorder` component has been created for the border and
white background used. It's solely used by `SiteIcon` for now, but I
intend to use it elsewhere as well, where this same pattern of a white
background is embedded.
* update connected accounts appearance
* consolidate account alerts
* UnconnectedAccountAlert: use ConnectedAccountsList
* move switch account action out of menu in all views
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
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.
The list of accounts shown on the first page of the connect flow takes
up the entire height of the window, even if there aren't enough
accounts to fill the space. This looks strange because of the border
around the account list, especially in the case where there are three
accounts in the list.
The list now cedes space to the footer if it can't fill the space
itself. The extra space is taken by whitespace between the footer and
the list.
* restore and enhance the time est feature
background: we had a feature for showing a time estimate on pending txs
that was accidently removed during the redesign implementation. This PR
restores that feature and also enhances it:
1. Displays the time estimate on all views instead of just fullscreen
2. Uses Intl.RelativeTimeFormat to format the time
3. Adds a way to toggle the feature flag.
4. Uses a hook to calculate the time remaining instead of a component
* Update app/_locales/en/messages.json
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* do not display on test nets
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
The asset page component has been split into three parts: the main
asset page wrapper, and a component for the content (either token or
native currency). This makes it easier to add functionality that is
specific to either token asset pages or native currency asset pages.
'Activity' is a better name for this tab because it contains more than
just transactions. Signature requests are also included, and more non-
transaction activity may be included in the future.
The `eth-contracts-metadata` export was mutated in `token-list.js` to
add the token address to the contract metadata, and this was taken
advantage of in the token search component.
Instead, the address is now added to a copy of the token metadata in
the one place it's used. The module export is no longer mutated, and
the unused `defaultTokens` variable in `token-list.js` has been
removed.
The `confirm-approve` page has been converted from a set of container/
component components to a functional component. The `withTokenTracker`
higher-order component has been deleted, as it was replaced by the
`useTokenTracker` hook.
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.
Each "message" requiring a user confirmation has a unique `type`
property. These `type` properties have all been added as enums, and the
enum is now used wherever the literal string was used previously.
This matches the box shadow on the asset page. Some CSS specificity
hijinks were required to override the base `Tabs` CSS rules, and a new
`tabsClassName` prop was added to the `Tabs` component.
The `disabled` prop being passed to the `PageContainer` component in
the render function for the `AddToken` component was a string in some
cases. It should always be a boolean. It has been cast to a boolean in
the one case where it was a string.
A new page has been created for viewing assets. This replaces the old
`selectedToken` state, which previously would augment the home page
to show token-specific information.
The new asset page shows the standard token overview as seen previously
on the home page, plus a history filtered to show just transactions
relevant to that token.
The actions that were available in the old token list menu have been
moved to a "Token Options" menu that mirrors the "Account Options"
menu.
The `selectedTokenAddress` state has been removed, as it is no longer
being used for anything.
`getMetaMetricState` has been renamed to `getBackgroundMetaMetricState`
because its sole purpose is extracting data from the background state
to send metrics from the background. It's not really a selector, but
it was convenient for it to use the same selectors the UI uses to
extract background data, so I left it there for now.
A new Redux store has been added to track state related to browser history.
The most recent "overview" page (i.e. the home page or the asset page) is
currently being tracked, so that actions taken from the asset page can return
the user back to the asset page when the action has finished.
The third and fourth parameters were unused, so they have been removed.
The tests descriptions for both `getToErrorObject` and
`getToWarningObject` have been improved as well.
The chosen token in the `send` flow was set from one of two places:
`metamask.selectedTokenAddress` or `metamask.send.token`. The former is
used most of the time, but the latter is used for the 'Edit' button
shown in the upper-left of the confirmation UI.
The send flow will now exclusively use `metamask.send.token` for the
token state during the send flow. `metamask.selectedTokenAddress` is
now only used for the selected token state on the Home screen. This
simplifies the Redux state, as the send token is now in one place
instead of two, and `metamask.selectedTokenAddress` has only one
purpose.
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.
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.
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.
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.
This changeset updates the `getOriginOfCurrentTab` selector and the container
for the ConnectedSites page to use `activeTab.origin` instead of parsing the
URL. The `activeTab` URL is parsed in `queryCurrentActiveTab` before the UI is
launched and any subsequent parsing of the URL is unnecessary.
See `queryCurrentActiveTab` in `ui.js:86` [1].
[1]:e7bb0876f5/app/scripts/ui.js (L86-L118)
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.
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.
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.
A change made in #8284 had the unintended side-effect of making this
scrollbar appear on the home screen. Previously it was scrollable
without any scroll bar being visible.
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.
* 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.
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.
`removeFromAddressBook` returned a thunk that didn't return a Promise,
despite doing async work. It now returns a Promise.
The callers were updated to `await` the completion of this operation.
`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.
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
The `transForward` app state is no longer used, so it has been removed.
Associated actions have been removed as well.
This state dates back a few years, so I was unable to determine when it
was made obsolete.
The `estimateGasMethod` function passed to `estimateGas` is now an
async function. It is now invoked using `async/await` rather than a
Promise constructor.
This was done as part of a broader effort to use Promises rather than
callbacks when interacting with the background.
`markPasswordForgotten` is an asynchronous function, but it was being
called synchronously. The page was redirected without waiting for the
operation to complete.
We now wait for the operation to complete before continuing. Failure is
still not being handled correctly, but that will be addressed in a
separate PR.
* 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
Previously all browser globals were allowed to be used anywhere by
ESLint because we had set the `env` property to `browser` in the ESLint
config. This has made it easy to accidentally use browser globals
(e.g. #8338), so it has been removed. Instead we now have a short list
of allowed globals.
All browser globals are now accessed as properties on `window`.
Unfortunately this change resulted in a few different confusing unit
test errors, as some of our unit tests setup assumed that a particular
global would be used via `window` or `global`. In particular,
`window.fetch` didn't work correctly because it wasn't patched by the
AbortController polyfill (only `global.fetch` was being patched).
The `jsdom-global` package we were using complicated matters by setting
all of the JSDOM `window` properties directly on `global`, overwriting
the `AbortController` for example.
The `helpers.js` test setup module has been simplified somewhat by
removing `jsdom-global` and constructing the JSDOM instance manually.
The JSDOM window is set on `window`, and a few properties are set on
`global` as well as needed by various dependencies. `node-fetch` and
the AbortController polyfill/patch now work as expected as well,
though `fetch` is only available on `window` now.
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.
This change replaces `getRenderablePermissionsDomains` with a new selector `getConnectedDomainsForSelectedAddress` that works better. The data returned from this selector is used to populated the _Connected Sites_ modal, which (as of #8262) didn't use most of the data returned from the old selector.
The old selector only looked at the first address that was exposed, making it not work for anything other than the first account connected to a particular origin.
The last active time for each account in the Connected Sites list was
formatted as `yyyy-M-d` (i.e. without the zero-padding for the month
and the day). This didn't match the designs, isn't compliant with
ISO-8601, and generally isn't a common date format.
The month and day are now zero-padded.
* Connect screen popup redesign
* Open permission request in notification instead of tab
* Remove no longer user locales
* Update permissions unit test mock to accout for change of opts passed to permissions controller
* Lint fix
* Inline broken line svg in permission-page-container-content.component.js for faster loading
* Add back button to second screen on connect flow
* Add xOfY locale and use for the page count in the connect flow
* Lint fix for svgs permission-page-container-content.component.js
* Fix rebase error
* Lint fix
* Clean up styles on the connect-screen-into-popup branch
* Use closeCurrentWindow to close window on cancel when in full screen connect flow
* Handle errors in rejectPermissionsRequest
* Full screen styles for connect flow
* Lint fixed in permissions-connect and actions.js
* Redirect screen now shows metamask icon instead of users identicon
* Fix subtitle spacing in permissions-connect-header'
* Use window.close instead of closeCurrentWindow() in cancelPermissionsRequest
* Use permissions-connect-header__subtitle in permissions-connect-header.component
There were two existing cases where a footer was added to a popover by
putting it in the popover contents. This has been refactored to place
the footer in the popover instead, so that styles common to all
popover footers could be shared.
The popover now has a `section` element instead, giving the `header`
and `footer` elements a correct section context.
* 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
* Fix home container height
The home container element's height was not set, so the lower half of
the home component was showing as the wrong color when the user had no
transactions or tokens.
This was broken in #8271, which was a fix for a different CSS problem.
Both problems should remain fixed now with height being set explicitly.
* Remove obsolete `flex` rule
This element is no longer within a flex container as of #8271, so this
rule doesn't do anything.
We don't need to store the current UI type as a global. We're already
using the `getEnvironmentType` helper function throughout the UI, so
we'd might as well use that instead of this global state.
The `History` title above the transaction history was changed in #8264
to only show when there are pending transactions, because it was
redundant to show an additional `History` title below a tab called
`History`. It was preserved when there were pending transactions
because the pending transactions are shown first in the list, followed
by the history, so the title served to divide the two lists.
This ended up breaking the fullscreen view though, which doesn't use
tabs yet. It has been updated to always show on fullscreen.
Two tabs have been created on the home screen: 'Assets' and 'History'.
This tabbed view is shown only on small screens (e.g. in the popup).
The fullscreen view is unchanged.
The toggle-able left sidebar no longer exists, so some 'sidebar-left'
specific code and styles have been removed. The button in the menu bar
has been removed as well.
The 'History' title of the transaction history is now redundant when
where are no pending transactions, so it as been conditionally hidden.
A passthrough for `data-testid` has been added to the Tab component for
convenience in e2e tests.
This commit updates the existing _Connected Sites_ section to a modal using
the `Popover` component. This will serve as a base for the new modal design.
The user-specified seed phrase during the first-time-flow import step
required the phrase to be entered in all lowercase. The case does not
add any extra entropy to the seed, so there's no reason to be case
sensitive. Flexibility here will improve the onboarding UX.
This commit makes the entered seed phrase case-insensitive.
Fixes#8171
The "i18n-provider" module has been replaced by a new `i18n.js` module
in the `contexts` directory which provides the `t` function via the new
React Context API.
The legacy context API is still used throughout the codebase, so a
legacy context provider has also been added as a shim until we migrate
away from the old API. The migration does require changing every single
place where the `t` function is used, so it is a non-trivial amount of
work. This shim allows us to tackle it one piece at a time without
breaking anything.
This was placed in a new `contexts` directory because it didn't seem
to belong in any existing categories. It certainly isn't a higher-order
component.
The translation helper function we use everywhere (`t`) would fallback
to the message `[${key}]` for any key not found in the set of localized
messages. Instead it how returns `undefined` in that case.
`[${key}]` isn't something you'd typically want to show to users, so
this fallback wasn't overly useful in practice. At best it served to
hide errors.
The falsey return value in the case where the message is missing makes
it easier to implement a fallback for that case. Such a fallback is
used in the `confirm-transaction-base` component, to restore the
fallback behavior accidentally changed in #8211
These two functions were not especially useful. `tOrDefault` was used
only by `tOrKey`, and `tOrKey` was only used in one place. All it did
was return the given `key` directly if it was falsey, so it was easily
replaced by a condition.
Previously a few mostly-empty `div`s would be shown if a render
happened while the confirm page was loading. Now nothing is shown. This
shouldn't impact users at all, as this condition should only last a
fraction of a second.
The address is blank momentarily when navigating to the confirmation
screen when sending a token. The address is updated in a subsequent
render.
The ENS reverse resolution is now only attempted if the address is
given. It has also been updated to attempt resolution when the address
is finally set, which fixes the reverse resolution for token sends.
I had hoped to get rid of this interim render-without-address, but that
turned out to be a bit more challenging. The problem is that the UI
submits transactions through the provider just as a dapp would, and the
provider doesn't say when the transaction is submitted. The promise
returned doesn't resolve until after confirmation. We would have to
start calling the background methods directly and bypass the provider
to get the feedback we need, and that sounded potentially dangerous.
Definitely a challenge for another day.
The `metamask.send.from` field was assumed by various selectors to be
an object, but instead it was recently set to a string. The selectors
have been updated to assume it's a string, and to fetch the full
account object explicitly.
The selector `getSendFromObject` was repurposed for this, as that's
basically what it already did. The optional address parameter was
removed though, as that was only used to fetch the `from` address in
cases where the `send` state was set without there being a `from`
address set. That case is no longer possible, as the `from` address is
always set upon the initialization of the `send` state.
The `getSendFromObject` selector no longer fetches the 'name' of that
address from the address book state either. This property was not used
in either of the cases this selector was used.
* Update i18n-helper to allow substitutions of react components and wrapping of translation substrings
* Simplify code in i18n-helper.js related to substitutions, including react substitutions.
* Remove wrapper support from i18n in favour of using translations in substitutions.
* Fix i18n-helper substitution logic: ensure correct index of substitution is applied
* Throw error if there are not enough substitutions for a translation phrase
* Adds unit tests for now i18n-helper substitution functionality
* Fix grammar, react element line spacing and test layout+readability in i18n-helper.test.js
The "Transaction View" component has been merged with the Home
component. The division between these two components seemed wrong
because the "Transaction View" contained the menu bar (distinctly a
"home" thing, not a "transaction" thing), and we will be adding more
non-transaction-related components shortly.
This also let us use a single `Media` component instead of two.
The notifications displayed on the home screen were being passed
through the `TransactionView` and `TransactionList` components before
being rendered. This was unnecessary because the notifications are
absolutely positioned.
They are now rendered directly in the home component where they're
defined. A helper function has been written to improve readability.
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.
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.
ENS currently supports a variety of tlds in addition to `.eth`, and
more will be supported in the future. Rather than hard-code a list of
supported ENS tlds, all valid domain names will now be interpreted as
potential ENS addresses in our address input component.
Closes#7978
The QR scanner component error handling would sometimes redirect the
user to the wrong page. It was also confusingly handled in two places;
the action used to open the QR scanner, and the scanner component.
The error handling has now been corrected, simplified, and integrated
into the QR scanner component itself.
The old way of handling an error within the component was to close the
modal, then call the action to open it all over again. This action took
a route parameter, which instructed the action on which route to open
if the fullscreen UI needed to be opened (as the fullscreen UI is the
only one where the browser will show the camera permission prompt).
This redirection worked just fine for handling the initial opening
of the QR scanner modal. But for any subsequent errors the same action
was used with a _default route_, meaning the user could click "try
again" and find themselves on a completely different screen.
Instead, errors now trigger a state change instead of closing and re-
opening the modal. The permission checks in the action have been
integrated into the component as well.
One functional change is that the scenario where you have an invalid
QR code has been made an error. Previously this just showed the error
message below the video preview, but left the user with no way to try
again. There error page has a "Try again" button, so it seemed better
suited as an error. Also the message literally started with "Error:".
Another functional change is that _all_ errors during initialization
will result in the error UI being shown. Previously there was one error
case that would instead log to the console and leave the user stuck.
* Use @metamask/eslint-config@1.1.0
* Use eslint-plugin-mocha@6.2.2
* Mark root ESLint config as root
* Update Mocha ESLint rules with shared ESLint config
* Various component tests and some conditional statements
Conditional in account-menu in removeAccount when keyring sometimes is not initially provideed
Conditional on unlock-page when there is no target.getBoundingClientRect on the element.
* Update helpers
* Remove component debugging
* Add default params for render helpers
* Remove stubComponent for old Mascot
Changes in https://github.com/MetaMask/metamask-extension/pull/7893 has prevented the need to stub it out.
Change logout to lock in account-menu test
The custom spend limit was previously not validated. It did have a
minimum of zero set, but this didn't have any affect (that minimum is
used for form constraint validation, and this field wasn't in a form).
The field was never checked to ensure the contents didn't exceed the
maximum.
The field is now checked for values that exceed the maximum, and
invalid values in general (including negative values).
The parameters to the `showEditApprovalPermissionModal` were also
alphabetized to make them easier to read. In the course of doing this,
I noticed that the origin was missing from one of the calls. This was
responsible for the modal saying "Spend limit requested by undefined"
when clicking "Edit" under the transaction details. This has been
fixed.
These two functions differ slightly in options, but none of those
options are being used by us, so in these cases they're functionally
equivalent. They're even both descendants of the original `debounce`
function from `underscore`.
This was done to reduce the number of direct dependencies we have. It
should not affect bundle size, as we still depend upon the `debounce`
package transitively.
In the case where the initial spend limit for the `approve` function
was set to the maximum amount, editing this value would result in the
new limit being silently ignored. The transaction would be submitted
with the original max spend limit.
This occurred because function to generate the new custom data would
look for the expected spend limit in the existing data, then bail if
it was not found (and in these cases, it was never found).
The reason the value was not found is that it was erroneously being
converted to a `Number`. A JavaScript `Number` is not precise enough to
represent larger spend limits, so it would give the wrong hex value
(after rounding had taken place in the conversion to a floating-point
number).
The data string is now updated without relying upon the original token
value; the new value is inserted after the `spender` argument instead,
as the remainder of the `data` string is guaranteed to be the original
limit. Additionally, the conversion to a `Number` is now omitted so
that the custom spend limit is encoded correctly.
Fixes#7915
After updating the custom spend limit on the approve screen, the data
for the transaction was not being updated. Instead it showed the
original transaction data. The transaction data was being updated
correctly in the final transaction though.
The approve screen has been updated to ensure changes to the custom
spend limit are reflected correctly in the data shown.
* Update lodash
All versions of the full `lodash` package have been updated to 4.17.15.
The only exception is v4.17.14 which is pinned by `ganache-core`.
* Switch to using `lodash` instead of per-method packages
We have the full lodash package _ten times_ as a production transitive
dependency, so including per-method packages is not saving space (it
might instead result in slightly more space being used).
Any error caught during a React component render or lifecycle method
will now be caught by the top-level error boundary, which shows the
user this new error page. The error page will display a simple error
message, and will show the details of the error in a collapsible
section.
The caught error is also reported to Sentry.
In development the error will be re-thrown to make it easier to see on
the console, but it is not re-thrown in production.
* Remove unnecessary `getEnvironmentType` parameter
The default value of the first parameter is `window.location.href`, so
there is no need to pass it in explicitly.
* Remove junk parameter from `getEnvironmentType` invocation
`getEnvironmentType` doesn't need to be passed any parameter, as the
default value is `window.location.href` which is generally what is
wanted. In this case, the variable `location.href` was always
`undefined` anyway. This particular `location` variable is from React
Router, and does not have an `href` property.
* Fix comment for `getEnvironmentType`
One of the possible return values was referred to by the wrong name.
`withRouter` has been removed from any components that were not using
any of the three props injected by `withRouter`: `history`, `location`,
and `match`.
`compose` is a no-op when called upon a single component, so it has
been removed in all such cases.
The filename is seeded by a simple use of Math.random() pulling from an alphanumeric character bank, as opposed to a more cryptographically random solution. This provides a simple layer of difficulty for bad actors to seek out the recovery phrase file.
The 'can retype the seed phrase' test would fail sometimes when one of
the words in the seed phrase was a subset of another word (e.g. 'issue'
and 'tissue'). This is because the selector used to find the word
looked for the first element that contained the text, rather than an
exact match.
To simplify the selector and make it more reliable, test ids were added
to each seed phrase word. The selector now uses CSS instead of XPath,
and it only finds exact matches.
A test id was also added to the div containing the shuffled seed words
to select from, so that the chosen seed words wouldn't be selected
in place of the real target when the same word appears twice.
The `confirm-seed-phrase` component extends PureComponent, so it
doesn't need a `shouldComponentUpdate` function. The state is
effectively immutable, as all state is either a primitive type or is
updated with new instances rather than mutation.
Removing this function will silence a warning message printed to the
console during e2e tests (React doesn't want you to set this function
on `PureComponent`s).
Removing this function also exposed an unused piece of state, which has
also been removed.
The `withFixtures` helper will instantiate ganache, a web driver, and
a fixture server initialized with the given set of fixtures. It is
meant to facilitating writing small, isolated e2e tests.
The first example test has been added: simple-send. It ensures that the
user can send 1 ETH to another account.
These new e2e tests will run during the normal e2e test run.
Closes#6548
* Remove unused functions from `mapDispatchToProps`
The actions import was also updated to import only the two actions
used, rather than all actions.
* Remove unused container component
Well, technically it was the props injected by this container that were
unused. The container served no purpose, so the component it surrounded
is now used directly instead.
* Remove both unused `getCurrentViewContext` selectors
* Remove unused SHOW_CONFIG_PAGE action
* Remove checks for `currentView` with name `config`
Now that the SHOW_CONFIG_PAGE action has been removed, it's no longer
possible for `currentView.name` to be set to that value.
* Remove unused `wallet-view` container props
* Delete unused SHOW_SEND_PAGE and SHOW_ADD_TOKEN_PAGE actions
* Remove unused `account-menu.container` props
* Remove unused SHOW_INFO_PAGE action
* Remove unused SET_NEW_ACCOUNT_FORM action
These rows on the Advanced Settings page were being looked up in the
e2e tests by the order they appeared in. Instead they're now referenced
by data id, so that we can add new settings and re-arrange them without
breaking the e2e tests.
This component used to persist form contents to LocalStorage. This was
especially useful for the popup UI, as each time the mouse left the
popup, the UI was completely torn down and state was lost.
This component was only being referenced by one form, and it wasn't
even being used there (e.g. no fields were labelled appropriately to
be persisted).
This was a useful component, and it seems this feature was lost
somewhere in the past couple of years. It was tempting to re-instate it
rather than delete it, but I decided not to because I'd likely approach
the problem differently if we wanted to reinstate it again today (maybe
by using a React Hook, or storing the state in Redux and persisting a
subset of the Redux store instead).
These unused props weren't being caught by ESLint because this
component extended another, which I guess made it difficult for the
React plugin to determine what was unused.
The `componentWillUpdate` logic was moved into `componentDidUpdate` so
that it would be picked up by ESLint. Also it seemed like a sensible
place for it to go. Having three redundant gas updates as part of
the same lifecycle function seemed too far, so I ensured it's
only called once.
* Make gas estimate update on debounced token amount change, not just on blur after change
* Updated tests
* Ensure `updateGas` is bound early
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
