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
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`.
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
* 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)
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
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
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.
* 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 method registry was being initialized with the global variable
`ethereumProvider` before that variable was set. As a result, the
method registry was falling back to an internally constructed provider
that used the wrong provider URL (an obsolete Infura API). This was
resulting in an error with the message "Project ID not found".
The method registry is now initialized lazily, when it's first needed.
This should be well after the initialization of `ethereumProvider`,
which occurs during the UI initialization.
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 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.
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
* 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 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.
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.
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.
In our base stylesheets we set the `body` background color to white.
This unfortunately also affected the preview area of Storybook. The
Storybook preview only renders isolated components, but it does
include all styles.
To avoid this problem, the white background color has been moved to
the `#app-content` div instead. All of our UI is inside this div.
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.
This was done to reduce the number of direct dependencies we have. It
should be functionally equivalent. The bundle size should not change,
as we use `clone` as a transitive dependency in a number of places.
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
* Use ref instead of findDOMNode in jazzicon component
The jazzicon component was using `findDOMNode` to get the DOM node for
the main div returned by the component, which is generally not
recommended. Instead a ref is now used.
* Update Jazzicon to v2
This version drops the dependency upon `raphael`, and no longer uses
the function `createSVGMatrix` which was causing unit tests to fail
(because it's not supported by jsdom).
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 accounts permission history on accountsChanged
Create PermissionsLogController
Fix permissions activity log pruning
Add selectors, background hooks for better UX
Make selected account the first account returned
Use enums for store keys in log controller
Add last selected address history to PreferencesController
* 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 WebRTC spec is fairly stable these days, particularly among the
browsers we support. We don't need this shim for anything. I'm guessing
it may have been added primarily with IE in mind.
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
The e2e tests were failing intermittently after removing an account
because the account was shown as not deleted after the removal. I
suspect this was because the account _had_ been removed, but that
change to the background state hadn't yet propagated to the UI.
The background state is now synced before the loading overlay for
removing the account is removed, ensuring that the removed account
cannot be seen in the UI after removal.
* 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
As of #7753, the `onBlur` prop is no longer used for the `token-input`
and `currency-input` components, and the associated wrapper components
and the shared underlying component. It as been removed from all of
them.
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.
The transaction navigation in the e2e tests has been made simpler with
the addition of data attributes to help with finding the navigation
buttons. Each button is now labelled according to its purpose.
* Specify type before parameter name
Various JSDoc `@param` entries were specified as `name {type}` rather
than `{type} name`.
A couple of `@return` entries have been given types as well.
* Use JSDoc optional syntax rather than Closure syntax
* Use @returns rather than @return
* Use consistent built-in type capitalization
Primitive types are lower-case, and Object is upper-case.
* Separate param/return description with a dash
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).
The account details close button is difficult to click from the e2e
tests because it has a size of zero. The actual icon is added via CSS
as an `::after` pseudo-element.
The CSS has been adjusted to give the icon a size, and it the markup
is now a `button` rather than a `div`.
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>
The "blockies" style identicon is handled by a module that was copied
from MyEtherWallet and inlined. This has been removed, and replaced
with the upstream package it was originally derived from.
* Add `react/no-unused-prop-types` rule
All detected unused prop types have been removed. I have attempted to
ensure these props are no longer passed in either.
* Update handling of props to avoid false positive lint errors
These cases were detected by `react/no-unused-prop-types` as being
unused props, even though they were used. These minor adjustments
prevent them from being flagged as errors.
* Update unit tests
Many of these tests were just checking that specific props were passed
from containers or to a child component. These were deleted, as I can't
imagine how they'd be useful.
* Disable `react/no-unused-prop-types` in `componentWillReceiveProps
The rule `react/no-unused-prop-types` doesn't seem to be detecting
props used within `UNSAFE_componentWillReceiveProps`. The two cases
have been disabled temporarily until we can replace these unsafe
lifecycle functions.
* Use arrow property initializer functions
* Use pure components where applicable
* Add UNSAFE_ prefix for deprecated lifecycle hooks
* Add allow UNSAFE_
* Removed unused "Component"
* Replace boron with 'fade-modal'
* Upgrade react/no-deprecated to an error
* Paste react-tooltip-component source directly
* Use arrow functions to bind `this`
* Add UNSAFE_ prefix
* Update react-redux, react-router-dom
* Remove things from inlined 'fade-modal'
* Adjust mountWithRouter to get unit tests passing again
* Remove domkit
* Add Wrapper to render-helpers
* Upgrade @storybook/addon-knobs
The connect route now takes a route parameter: the permissions request
id. This id is set whenever the permissions connect screen is opened,
ensuring that that tab is for that specific request alone.
This makes handling of multiple permissions requests a bit more
intuitive. Previously whenever opening multiple permissions requests,
the first one would be shown on each successive tab, whereas you
would expect each tab to show the request that prompted the tab to
open. Users may now address permissions request in whichever order
they'd like to, rather than being forced to deal with them
chronologically.
The MetaMask logo was throwing an exception because the `history` prop
from React Router wasn't being passed in. However, even if it was
passed in, clicking on the logo wouldn't have done anything because the
home route redirects back to the permission connect page.
Instead the logo now isn't given an `onClick` handler. The
`MetaFoxLogo` component has been updated to only set `cursor: pointer`
if given an `onClick` handler.
