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.
When disabling an alert, the background `alertEnabledness` state of the
alert was being set to `undefined` instead of `false`. This didn't have
any user-facing effect, since `undefined` is falsey, but it did result
in a PropType error on the Alert settings page. This mistake was made
in #8550.
The `alertEnabledness` state is now correctly set to `false` instead of
`undefined`.
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.
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.
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.
Tokens are now updated when the account switches after a failed account
import. The usual account switching flow (via the account menu) already
updated tokens, but this step was omitted when the account switched
after a failed import.
* 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.
`updateAndSetCustomRpc` returned a thunk that didn't return a Promise,
despite doing async work. It now returns a Promise.
In the one place where this is used, it didn't seem important to update
the callsite to block on this finishing. Only one call followed it in
the event handler, and it didn't seem to depend on this.
The `getSelectedAddress` selector has a fallback of selecting the first
MetaMask account. This is not useful. The only time the
`selectedAddress` is not set is during onboarding, before any accounts
exist, so selecting the first account wouldn't be useful anyway.
Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>
`setRpcTarget` returned a thunk that didn't return a Promise, despite
doing async work. It now returns a Promise.
The callers of this action creator didn't need to be updated, as they
were all in event handlers that didn't require knowing when the
operation had completed.
`editRpc` returned a thunk that didn't return a Promise, despite doing
async work. It now returns a Promise.
In the one place where this is used, it didn't seem important to update
the callsite to block on this finishing. Only one call followed it in
the event handler, and it didn't seem to depend on this.
Changes to the background state were being detected in the `update`
event handler in `ui/index.js` that receives state updates from the
background. However this doesn't catch every update; some state
changes are received by the UI in-between these `update` events.
The background `getState` function is callable directly from the UI,
and many action creators call it via `forceUpdateMetamaskState` to
update the `metamask` state immediately without waiting for the next
`update` event. These state updates skip this change detection in
`ui/index.js`.
For example, if a 3Box state restoration resulted in a `currentLocale`
change, and then a `forceUpdateMetamaskState` call completed before the
next `update `event was received, then `updateCurrentLocale` wouldn't
be called, and the `locale` store would not be updated correctly with
the localized messages for the new locale.
We now check for background state changes in the `updateMetamaskState`
action creator. All `metamask` state updates go through this function,
so we aren't missing any changes anymore.
`setProviderType` returned a thunk that didn't return a Promise,
despite doing async work. It now returns a Promise.
None of the callers of this action creator needed to know when it
completed, so no changes to the call sites were made.
These action creators for the "message manager" controller
interactions have been updated to use `async/await`. There should be
almost no changes in behavior. The only things removed were a few debug
log statements, and a single `console.log`.
Many of the "message manager" background methods return a full copy of
the background state in their response; presumably to save us from
making a full round-trip to update the UI `metamask` state after it
changes. However, the action creators responsible for calling these
methods were calling `updateMetamaskState` even when the background
method failed. In effect, they were setting the UI `metamask` state to
`undefined`.
They have been updated to only set the UI `metamask` state if the
background method succeeded.
`setSelectedAddress` returned a thunk that didn't return a Promise,
despite doing async work. It now returns a Promise.
This action creator was only called in two places, and neither benefit
from using the Promise now returned. They were both event handlers. In
both cases there was an existing Promise chain, but the only thing
after this set was a `catch` block that displayed any error
encountered. I decided not to return the result of `setSelectedAddress`
to this chain, because all it would do is set the warning a second
time in the event of failure.
Mark Stacey
Erik Marks
Brad Decker
Whymarrh Whitby
Thomas Huang
Jenny Pollack
Dan J Miller
Erik Marks