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
