This one gets a bit more complicated because the styles were interwoven and needed to be untangled to be moved. Essentially, though, the goal is to put the styles where they make the most sense and colocate them with their components.
Moves the still alive deposit-ether-modal styles to be colocated with it's component, as per the examples already in place in the components/modal folder
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
There were two cases where bad gas estimate data was resulting in
crashes. These two places have been wrapped in a `try ... catch` to
handle the absence of gas estimate data.
The errors are still reported to Sentry so that we can track down the
root cause of this corrupted gas estimate data at some point in the
future. We plan on adding additional context to Sentry soon that should
help with this.
Fixes#8992
The styles for the `ListItem` component were recently broken in #8989
because of a change made by `stylelint`. It incorrectly removed the
`fr` unit because of the `length-zero-no-unit` rule. This was a bug
that has since been fixed in `stylelint`; it should have left the `fr`
unit in this case.
This tests the `personal_sign` method using the test dapp. This test
reflects part of the `confirm-sig-requests` integration test, which
tests the confirmation of a `personal_sign` signature request.
A `data-testid` prop was added to the 'Sign' button on the signature
request confirmation page, to make it easier to select the 'Sign'
button reliably.
Both the primary and secondary balance components on `EthOverview` now
have `data-testid` props, so that they can be more easily referenced in
e2e tests.
This required the addition of a `data-testid` prop to the component
`UserPreferencedCurrencyDisplay`, which is passed through to the
underlying `CurrencyDisplay` component.
The inline speedup and speedup cancellation buttons in the activity log
were broken. An exception would be thrown upon either button being
clicked, and nothing would happen from the user's perspective.
Both handlers were being passed a transaction id, which was a holdover
from before the transaction list redesign. The handlers passed for
these two actions now have the transaction id embedded, so it doesn't
need to be passed in anymore. They expect the click event to be passed
through instead.
The handlers passed also didn't handle closing the transaction details
modal when clicked. After fixing the first problem, they still didn't
work because the speedup/cancel dialog was shown behind the transaction
details modal.
Both issues are now fixed. Both buttons now close the transaction
details modal, and trigger the appropriate action.
The CSS `opacity` rule accepts percentages on newer browsers, but some
older browser versions we support (e.g. Firefox v60) doesn't support
them. A number is now used instead, which is supported by all browsers
we support.
There was a case where the `activeTab.origin` was not set, yet the user
could still navigate to the "Connected accounts" modal, which assumes
that `activeTab.origin` is set. This would happen in Firefox when the
user opened the popup on a page internal to Firefox (e.g.
`about:blank`). The connected status indicator would still be shown,
but the UI would crash when it was clicked.
The connected status indicator is now hidden whenever
`activeTab.origin` is falsy. The 'Unconnected account' alert has also
been made impossible to trigger in that circumstance.
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 account list on the unconnected account alert was in the wrong
order; they were in the order provided by the permissions controller
rather than by last active.
The accounts are now sorted correctly; first by last active, second by
the keyring controller order.
The `getPermittedIdentitiesForCurrentTab` selector was removed because
it is no longer used.
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.
in both permission flows the checkboxes were using the fa-check icon, and in the case
of the connected accounts popover the color of the icon was wrong. It occurred to me
while simply fixing that color would have been easier, we will be adding permissions
at some point in the future that a user will be able to 'uncheck'. This PR replaces
the usages of those icons with the Checkbox component that is equipped to handle the
interactivity of checking/unchecking.
* fix overflowing contract names and origins
Moves heading and subtitle into divs with h3/h2 children so that the
div can be display flex and still have ellipses overflow. Only the
heading was display flex but I wanted the two to have similar structure.
this allows subheading to be display flex in the future.
Also uses stripHttpSchemes to remove that from origin in the subheading
* rtl ellipses on domain
* Update ui/app/components/app/transaction-list-item/index.scss
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
The 'Expand view' button in the 'Account Options' menu was still being
shown on the fullscreen UI. This button is not useful in fullscreen, as
all it does is open the fullscreen UI. It is now hidden on the
fullscreen UI.
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.
Editing the name of an account was accidentally made impossible when
FontAwesome was updated in #8256, because the icon we used to use for
the edit button (`fa fa-pencil`) was no longer free. The icon has been
switched to `fas fa-pencil-alt`, which is free.
* 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>
initially set out to add the failed tooltip back to the transaction list, but
in the process rediscovered the transaction-status component which illuminated
a fair number of statuses that were not properly handled by the refactor of the
list. These statuses were discussed with UX and engineering team members to come
up with a definitive list of statuses that should be reflected in the UI
Changes:
1. normalized the color of status labels to use Red-500 and Orange-500 where applicable
2. added a new color of icon for pending transactions -- grey
3. added support for dropped and rejected labels
4. failed, dropped, rejected and cancelled all have red icons now.
5. cancelled transactions will reflect a change in the user's balance
6. tooltip displayed for failed transactions
7. Icon logic isolated to a new component.
This hook is responsible for converting a token balance to fiat. It has
been extracted from the `TokenCell` component, and will be used
elsewhere in a future PR.
The conversion of token amounts to fiat amounts was extracted from the
`TokenCell` component, and moved to a utility function. This will be
used elsewhere in an upcoming PR.
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.
Using flex was getting out of hand, I noticed on develop that when
a pending transaction is coming in the speed up and cancel buttons
cause the icon to center according ot their height as well. A grid
is really what is needed. This seemingly greatly simplifies the CSS
AND html (removes unnecessary nesting of divs)
The entry for imported accounts in the account menu looked wrong with
the new connected site icon - there was no padding between the site
icon and the 'imported' label. The entry was pretty crowded with these
three symbols as well (the third being the 'x' used to remove the
account).
The site icon has been made the right-most icon, so that it lines up
with the site icons shown for other accounts, and spacing has been
added between the site icon and the 'imported' label.
The 'x' used to remove accounts has been removed. Accounts can still be
removed from the 'Account Options' menu on the Home screen. This seemed
like the wrong place for this button to exist, as it's the only action
that can be taken from that menu aside from navigation.
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.
The asset list item and transaction list item do not make great use of
screen realestate when in fullscreen mode on larger displays/windows.
This PR adds in a new prop for list-item for displaying content in the
middle of the list-item when on these types of screens. To facilitate
this, some updates were made to styling to allow for the list item to
better control how items are laid out in various breakpoints.
This works makes it possible to display the outdated balance warning
inline in the middle section of the list item, and convert to a tooltip
when on small displays.
The "Connected accounts" modal was throwing an exception when
attempting to render an account that has no `lastActive` time. The
component and related selector has been updated to no longer expect
the `lastActive` time to be set.
Prior to #8653 there was a guarantee that all connected accounts had a
`lastActive` time set, as the time would be set on any account returned
from the `eth_requestAccounts` call. But after #8653 only the primary
account was returned, so only the primary account had a `lastActive`
time set.
Fixes#8733
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.
* refactor asset items to use list-item
Refactors the asset-list-item and token-cell to rely on the list-item
component for UI. Little changes were needed to the list-item code
to make this work! The result should be lots of eliminated code
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
The "the transaction has the expected gas price" test was assuming the
fifth element with the `transaction-breakdown__value` class was the
element with the gas price. In practice that was sometimes not the
case, because some transaction detail fields would not be present, or
would appear after the first render.
The field is now looked up with a test id, ensuring it always finds the
correct field.
The e2e test for the "Hide token" functionality was incorrectly
clicking "Cancel" on the "Hide token" modal, thus not actually testing
that that token was hidden at all.
The "Confirm" button is now selected using a test id, to ensure the
wrong button isn't selected.
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 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.
This function primarily ensured that there was a reasonable fallback
for `txParams` if the given transaction was missing it. This fallback
was only used in one place: the customize gas modal, during the send
flow specifically.
The helper function has been removed, and the default `txParams` is set
in the one place it was needed. In the future we should attempt to
simplify this modal so it doesn't need to know details about the
context in which it's being used.
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.
This prop is no longer required, now that the new fullscreen redesign
has been implemented. This was unused before the redesign as well,
seemingly by accident.
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 `AccountDetailsDropdown` component has been rewritten to use the
new `Menu` component, and to follow the latest designs.
This should be functionally equivalent. A couple of the icons have
changed, but that's about it.
Support for a subtitle was added to `MenuItem` to support the `origin`
subtitle used for the explorer link for custom RPC endpoints.
A few adjustments were required to `test/helper.js` to accommodate
the use of `Menu` from a JSDOM context (this is the first time it's
been used in a unit test). A `popover-content` element was added to the
fake DOM, and another global was added that `react-popper` used
internally.
An additional driver method (`clickPoint`) was added to the e2e driver
to allow clicking the background behind the menu to dismiss it. This
wasn't possible using the `clickElement` method, because that method
would refuse to click an obscured element. The only non-obscured
element to click was the menu backdrop, and that didn't work either
because the center was obscured by the menu (Selenium clicks the center
of whichever element is targeted).
The `MenuBar` component has been converted to a functional component.
This was done to make upcoming changes related to the home screen
redesign easier to implement.
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.
A `Menu` component has been extracted from the
`ConnectedAccountsListOptions` component. The menu and the menu items
are now the `Menu` and `MenuItem` components respectively.
A custom body was added to the Storybook preview to ensure that the
`popover-content` element was present in the DOM before the Menu was
constructed.
The `Identicon` component was being passed a `network` prop, despite
not accepting a `network` prop.
A duplicate set of `token-cell` tests have also been deleted, as they
used this prop. The tests were never run, because the file was misnamed
(it needs to be named `.test.js`).
The account options menu is now much faster, and it correctly closes
when 'Switch account' is selected.
A static width had to be set on the menu so that it could be positioned
reliably. Without this width set, it was rendered as a different size
before positioning than after, which resulted in it being positioned
incorrectly. A `z-index` had to be added (equal to the `z-index` used
by the popover component) to ensure it wasn't rendered beneath the
popover.
The menu is automatically positioned relative to the account options
button, appearing below the button by default but above it instead if
there isn't room below. It is positioned to be inside the bounds of the
popover as well.
The account options button is now a `<button>` rather than a `<i>`.
This required a few additional style rules to overrule the default
button styles. Additionally the size was increased so that it matches
the designs more closely.
The callbacks for connecting, disconnecting, and switching accounts
have been updated to use state and props to determine the correct
address to use, rather than being bound to the correct address
parameter in the render function. This means we aren't creating a new
function upon each render anymore.
The `showAccountOptions` method still needs to be bound once per
account, but this was switched to use more readable syntax (`.bind`,
instead of the double arrow function).
`react-popper` and `@popperjs/core` were both added as dependencies.
These should be used for any UI requiring relative positioning (e.g.
tooltips, menus, etc.). Older versions of these libraries are already
in our codebase as transitive dependencies of the tooltip library we're
using.
The asset list has been updated to more closely match the new designs.
There are still a few major differences (e.g. the selection state, the
token menu) that can't be implemented until the asset screen has been
implemented.
The background color of the selected asset has been lightened, so that
it's less jarring until we remove it.
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.
All asset list items now use the same component (`AssetListItem`).
Previously the tokens and the Ethereum balance were totally separate
components, despite being styled similarly.
Various unnecessary DOM elements and style rules were removed, but the
overall list looks identical to how it looked before.
The `.scss` file extension is not required when importing SCSS files.
It has been removed from all imports, for consistency. I chose to
remove it rather than add it everywhere because imports without the
extension seem to be more common.
The CSS class for the fallback Ethereum logo used in the identicon
component was with the `AssetList` styles, and was confusingly named
`balance-icon`. It has been migrated to the identicon styles, and
renamed `identicon__eth-logo`.
A few redundant rules have been removed as well (they were always
overridden by inline styles).
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.
This component was indended to show both ETH/fiat and token balance,
but today is not used for token balance. As a result, large pieces of
this component and many props were unused in practice. The condition
about `formattedBalance` returning a falsy or `None` or `...` result
was also removed, as that doesn't seem to be possible.
The `balanceValue` passed into the `Balance` component in the asset
list has also been removed, as it isn't used.
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.
The hover state background color of the "Account" in the popup home
screen menu bar has been updated to match the hover state background
color of the connected status indicator. Both hover state backgrounds
now match.
The checkbox color was sometimes incorrect after it was checked. I'm
not sure how to consistently reproduce this issue, but I was able to
make this happen most of the time if I clicked the checkbox while some
text was highlighted.
It seems that the `:checked` and `:indeterminate` pseudo-selectors were
not being applied right away for some reason. Either that or React
wasn't setting the `checked` state of the `input` element right away.
This problem has been worked around by using CSS classes instead of
pseudo-selectors. I am no longer able to reproduce the issue now.
This new dropdown component uses a native `select` element, thus
avoiding various issues encountered in attempting to reuse our existing
dropdown components for the new permission system alert modal.
The prefixed forms of `appearance` have been added temporarily so that
the component can be used in Storybook, as our Storybook config isn't
setup to do autoprefixing yet. Our real build system does handle
autoprefixing for this rule correctly already.
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.
`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
This state hasn't been used since #5886. The nonce we display in our UI
is now from the background, rather than queried directly from the
front-end.
This also means we save making this network call each time a pending
transaction is added, and each time the transaction list is mounted.
* 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
The prop passed into the SignatureRequestHeader was changed from
`selectedAccount` to `fromAccount` in #8079, but the header component
itself was never updated to use the new prop name.
The header component for the new Signature Request screen has an
undeclared variable called `name` in it. This was present in the
original implementation of this component in #6891. It's unclear what
this was supposed to be, and it doesn't seem to reference anything that
exists.
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.
* 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
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 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.
Various SVGs were being imported directly in components using Webpack
loaders. This was done to get these components to work correctly in
storybook, which uses Webpack. However we don't use Webpack for our
actual build system, so these components would fail when you attempted
to use them.
Instead the storybook script has been updated to use the `--static-dir`
flag, which allows specifying a directory of files to serve statically.
The `app` directory is served statically, so all of the relative URLs
we use in practice to reference fonts and images should just work.
The storybook build command has been updated to use the same flag.
Unfortunately this also means that the uncompiled background code is
now included in the build as well, because it's alongside our static
files. This shouldn't have any impact upon the build though.
The use of this `static-dir` option as made much of the existing
storybook Webpack configuration unnecessary, so it has been reduced to
just the essential steps.
The token list would be stuck on "Loading" when there was at least one
token, but the balance of all tokens was zero. This bug was only
present on `develop`, and has not affected any published version of the
extension.
This was introduced in #8223, which removed what at the time seemed to
be an unnecessary update step. It turns out that the step was required
as a workaround to this bug with the token tracker.
The bug was fixed in https://github.com/MetaMask/eth-token-tracker/pull/33
and published in v2.0.0 of `@metamask/eth-token-tracker`.
* Refactor token list into standard container/component modules
The token list has been moved into its own directory and split into
separate container and component modules. Additional updates have been
made to simplify the component logic as well.
* Update token-list to use new React Context API
The token list click handler has been moved up from the token cell to
the wallet view component where the token list is used. This keeps the
responsibilities of the token list and token cell components a bit more
focused - they're now only responsible for display, not what the
effects of clicking should be.
The `network` prop was being passed to the Identicon despite that not
being an Identicon prop, and the `userAddress` prop was being passed
down by the container but was unused. The methods removed were not
called anywhere.
These tests broke when `sinon.restore()` was called in a separate test
because they setup stubs/spies using `sinon` in the module context.
These were constructed then restored before the tests even ran.
Instead the test doubles are now setup in the `beforeEach` hook, which
in addition to fixing this problem also ensures each unit test is
isolated from the others.
* Refactor tab styles to minimize tab component styles
The tab component styles were not applicable to all tab instances, so
they were being overridden in a few places. Instead the tab styles have
been reduced to a minimal set that should be applicable in most cases.
There are a few functional changes here as well, meant to undo
changes made accidentally in #8132. Before that PR the page container
was overriding the tab styles altogether, but after that PR they were
combined with the base tab styles instead.
* Remove background color
This was previously being overridden by the page container styles, and
it matches the inherited background color already in the one other case
(the confirm page for token interactions)
When the token tracker is first constructed and the first balance
update is triggered, we manually serialize the tracker state and call
our update function. This is _in addition_ to the update event handler
though, so the balances get updated twice. Similarly, we also catch any
errors during this first update to handle them, but this is done via an
event as well, so is redundant.
These steps have been removed; updates and errors are now handled
solely through events. We were able to drop a check from
`updateBalances` as well to ensure the tracker is still running, as the
event cannot be emitted unless it's running.
* 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
* 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
The current selected asset in the asset list should be highlighted, but
this highlighting was broken for `ETH`. `ETH` was not highlighted when
it was selected, but it would be highlighted when anything else was.
This was broken accidentally in #7546
The props `isActive` and `tabIndex of the Tab component are required
and are always passed in, but the prop type warning is triggered
because the tabs are rendered without these props first, then cloned by
the `Tabs` component, where these props are added.
To silence the warning, the props have been made optional.
The sidebar used to speed up a transaction while it's pending or after
it has failed currently allows editing the gas limit, but that new
limit is ignored. This is especially problematic for transactions that
failed due to a low gas limit, as the problem becomes impossible to fix
by retrying.
The gas limit specified by the user is now used in the speed up
transaction.
Fixes#8156Fixes#7977
The `createRetryTransaction` was accidentally removed from the
`gas-modal-page-container` component during a refactor in #7730.
Attempting to retry a transaction since that change has resulted in a
UI crash.
* 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
The base component we use for dropdowns handles ensuring the dropdown
is closed when the user clicks outside the dropdown. This functionality
was accidentally broken in #7781 when converting it to an ES6 class.
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.
This effectively covers the `Tab` component as well, which doesn't
really make sense to showcase on its own.
One minor change was made to the actual `Tabs` component; `children`
was marked as a required prop. It doesn't render anything sensible if
they are omitted, and it always has at least one child in our codebase.
The tab component now sets the `tab` and `tab--active` classes
internally regardless what class is passed in. The convention in React
is to allow adding _additional_ classes via the `className` prop, not
to allow removing internal classes entirely.
the `activeClassName` prop was removed entirely. A few other props that
are always passed in have been marked as required.
One main configurable story has been added, plus a few distinct other
examples. All props are covered except `className`, which seems safe to
ignore.
Default props have been added to `Identicon` to make more explicit what
defaults were expected; there is no functional change.
The recommended way of writing stories changed in Storybook v5.2 to
the Component Story Format (CSF). Instead of using `storiesOf` and
running everything upon module import, the new story format is a
declarative description of each component that uses ES6 import
semantics.
Previously when the `diameter` prop of the `jazzicon` component was
changed, the new diameter would be ignored. The jazzicon is now
redrawn upon each change, as you would expect.
I don't think it's possible for this bug to manifest itself in the
extension. This was discovered through tinkering with the Storybook
for this component.
The identicon was showing as a white circle on the connect page. This
was a CSS error introduced when `jazzicon` was updated in #7898.
The white circle shown was the white border around the identicon. This
circle is an adjacent `div` in the DOM, and was rendered _underneath_
the identicon itself because it was placed first in the DOM.
Unfortunately the new version of `jazzicon` is no longer explicitly
positioned (it used to have `position: relative` set internally), so
now it's lower in the stack order regardless of DOM position.
Rather than placing the border adjacent and relying upon both elements
being positioned, the border has been changed into a wrapping `div`
instead. Now the stack order is more explicit.
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.
