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.
The "global" action constants (the ones previously in `actions.js`)
have been moved to a separate module. This was necessary to avoid a
circular dependency in an upcoming change that was causing problems.
In general the "ducks" pattern of organizing Redux stores does result
in circular dependency problems. This is because reuse of actions
between reducers is encouraged, so it's not uncommon for two reducers
to want to reference an action from the other. Going forward we can
avoid this problem by moving action constants that are shared between
reducers into this shared module.
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 Font Awesome font wasn't loaded correctly in the Storybook build.
Unlike our other fonts, Font Awesome is copied from `node_modules` at
build-time rather than being saved directly in `app/fonts`.
The `copy-webpack-plugin` plugin is now used in the Storybook webpack
build to copy the fonts explicitly from `node_modules` into the build
output directory. The font now seems to load correctly in Storybook.
This action was never triggered in practice, as MetaMask is never
unlocked from the UI. The unlock always occurs as a result of a
background state update.
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.
The height of the popover is now set to a maximum of 94% of the
viewport height, rather than a static height of 564px. This setting
ensures that the popover has a maximum height of exactly 564px in the
popup, which matches the designs. However it is now able to shrink or
grow to accommodate larger viewports or smaller popovers.
* Implement tooltip and styled sentence parts on header text of second screen of multi-account-select flow
* Clean up code related to the multi-accounts tooltip implementation
* 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.
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.
The Tabs component expects the `children` prop to be either a single
Tab component or an array of Tab components, and the internal tab index
should always map onto one of these components. However, if an invalid
tab index was set, it was just returning the first tab contents.
Instead it will now validate that the tab being asked for does exist,
and throw an error otherwise.
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.
The token cell how shows a warning inline for the case where the token
balance failed to update. It displays a warning icon next to the
balance, with a tooltip that contains the same contents as was shown on
the token list previously.
The 'Add Token' component has been redesigned to be more in-line with
the new home screen design. The description instructing the user to
click the 'Add Token' button has been removed, and the section itself
has been made roughly the same size as one of the list item. The text
now appears on just one line, overflowing to two if necessary.
The 'interactive' prop for React Tippy will keep the tooltip open when
the user moves the mouse over the tooltip. This enables interactive
tooltips, where the user is expected to click on something in the
tooltip (e.g. a message with a link).
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.
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 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
The phishing detection page had been using a separate stylesheet from
the rest of MetaMask. This stylesheet (`app/fonts/index.css`) was just
responsible for importing all fonts.
The phishing page now uses the same stylesheet as the rest of MetaMask.
The old stylesheet has been removed, leaving us with one less thing we
need to maintain as fonts are changed. We may want to revisit this
later to optimize performance by reducing the size of this CSS bundle
to the minimal set of styles required, but the impact is tiny in
practice, and not especially important in this situation.
