These two stories showcased components that used React context and
Redux state that was not made available in the stories themselves. They
both crashed with an error when rendered in Storybook.
Instead of going through a great deal of effort to setup mocks for the
global Redux state and context, they have been removed. They are
perhaps the wrong layer for us to showcase in Storybook. Storybook is
more well suited for individual components that contain just UI logic.
A PropType error was shown in the console when on the Awaiting Swap
page in certain error scenarios. The `symbol` property was sometimes
not set if `destinationTokenInfo` was missing.
The `symbol` prop has been removed, as the `AwaitingSwap` component
already selected the `fetchParams`, and the `destinationTokenInfo`
object within. The prop was effectively a duplicate.
Sorting was broken for the "Quote Source" column of the quote sort
list. Attempting to sort by this column would arrange the quotes in a
seemingly random order.
It appears that this was due to this column being programmed to sort by
a property called `liquiditySource`, which does not exist in the quote
data. I'm unsure what the difference between `liquiditySource` and
`quoteSource` was supposed to be; the values in the mocks are all
identical.
All references to `liquiditySource` have been updated to refer to
`quoteSource` instead, and the sorting now works correctly.
The `message` prop of `ActionableMessage` had a PropType of `string`,
but it was being passed a `node`. This was resulting in a PropType
error in the console on the view quote page.
The PropType has been changed to `node`, and the error is now gone.
The `AwaitingSwap` component was emitting a React warning when rendered
because a component was being rendered in an array without having a
`key` prop set.
A key has been added to the `CountdownTimer` component, which is passed
into the translation helper in an array. The warning no longer appears.
The `metaMaskFee` property on the "quote data" PropType was not used,
and it never existed in practice. This resulted in PropType errors.
The non-existent property has been removed.
The MetaMask fee is shown with two percent signs on the view quote page, because the percent sign is embedded in the fee amount as well as in the localized message.
The fee amount used now comes from the API, and does not have a percent sign. The percent sign is now only in the localized message. This allows for different locales to display the percentage differently. The old hard-coded value with a percent sign embedded has been removed, as it is no longer used anywhere.
* Only format timeRemaining if in useTransactionTimeRemaining if it is truthy
* Only setTimeRemaining in useTransactionTimeRemaining if submitted time is a number
* Use isSubmitted as a check, instead of isPending and submittedTime, before calculating timeRemaining
* Add a minimumGasLimit to the gas customization modal in swaps
* Update app/_locales/en/messages.json
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* Set default for minimum gas limit in gas-modal-page-container.container and make required in sub components
* Update unit tests
* Default value for minimumGasLimit in advanced-gas-inputs.component.js
* Preserve existing gasLimitTooLow message key by creating new gasLimitTooLowWithDynamicFee
* Fix failing unit test
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: Erik Marks <rekmarks@protonmail.com>
* Explicitly set balance and string on the swaps from token in token-overview
* Set swapsFromToken balance to a decimal instead of a hex on eth balance change in build-quote
We were unable to deliver this public dashboard as we had originally
anticipated, and this is no longer a priority for the team. We may
revisit this idea in the future, but for now it has been removed from
our list of commitments.
* Delete CachedBalancesController.cachedBalances
* Migrate provider to Rinkeby instead of deleting it
* Convert hex transaction metamaskNetworkId values to decimal
* Don't migrate provider state in e2e tests
* Don't kick custom RPC users to Rinkeby unnecessarily
* Use provider.chainId for address book chainId values
* Add address book migration
* Fix failing unit test
* fixup! Merge branch 'develop' into address-book-use-chainId
* Select address book entries for display by chainId
* Merge all address book entry keys
* fixup! Merge all address book entry keys
* Delete localhost provider type
* Use ganache-cli default chain ID for tests
* Delete unused test firstTimeState variable
* Migrate default ganache-cli network to frequentRpcListDetail
* Add default test provider state
* Add test functionality to createJsonRpcClient
* Lint locales
* Update test middleware creation
* fixup! Update test middleware creation
* Update txMeta after postTxBalance has been retrieved
* Use gas used from txReceipt to calculate eth received
* Return null from getSwapsTokensReceivedFromTxMeta in tokenSymbol is ETH and txReceipt is missing
* Get latest txMeta before updating it with postTxBalance in case of a swaps tx in confirmTransaction
* Lint fix
* Add useSwapsEthToken hook and utilize wherever we need the ETH 'token' for swaps
* Remove rawEthTokens param from useTokensToSearch calls
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: Erik Marks <rekmarks@protonmail.com>
The quote list columns have been adjusted to add more space in between
the columns. Additionally, the third column cells are now better
aligned under the header. A few unnecessary `<div>`s and CSS classes
have been removed as well.
* Only shows the swaps intro popup on mainnet
* Remove code that closes swaps popup from e2e tests
* correct casing on isMainnet prop in home component
The app header would sometimes mistakenly not get rendered while on the
Home screen. This could happen when a permission request was made while
the UI was open, to either the browser action popup or the fullscreen
UI.
This was caused by faulty logic in the top-level router component. It
would hide the app header if there was a pending permission request,
presumably because the author assumed that a redirect to the permission
flow would shortly follow. This redirect only happens on mount though,
not if the UI was already open when the permission request was
submitted.
The intent of this logic was to hide a brief flash of the app header
prior to rendering the permission flow. This brief flash has now been
restored, which is unfortunate, but is better than the missing app
header bug. We can revisit a solution to removing this flash in the
future, hopefully in a manner that avoids this bug and works for all
notification UI cases.
If a notification popup was opened while the user was partway through
the swaps flow, the notification would display the swaps flow instead
of whatever action triggered the popup (e.g. a connect request or a
confirmation). This is confusing and potentially dangerous, as the
user might mistakenly think the swap was triggered by a dapp.
The swap redirects are now prevented in the notification UI. The user
will still be redirected to an in-progress swap flow if they open the
browser action popup or the fullscreen UI, but not on the notification
popup that is triggered by dapp actions.
* Remove network config store
* Remove inline networks variable in network controller
* Re-key network controller 'rpcTarget' to 'rpcUrl'
* Require chainId in lookupNetwork, implement eth_chainId
* Require chain ID in network form
* Add alert, migrations, and tests
* Add chainId validation to addToFrequentRpcList
* Update public config state selector to match new network controller
state
* Use network enums in networks-tab.constants
* Ensure chainId in provider config is current
* Update tests
This change moves warning message from `add-recipient` component to `send-content`. Currently
whenever provided address is a valid eth address `send-content` is rendered instead of `add-recipient`
this is why warnings never popped up.
this moves very little code around, to enable deleting files that are
no longer used or necessary. There are a few more things to move and
delete that will be handled in a seperate PR after this one.
Follows the previously set pattern of colocating styles along side the
consuming components. This one was really straight forward and just a
reorganization of files and imports. No code changes occurred.
The old tooltip component was only used in two places. Removing those usages
was simple and straight forward. So, instead of colocating the old tooltip
styles with the deprecated tooltip component, I removed all old styles and
made tooltip-v2 now simply 'tooltip' and removed the deprecated component.
Follows the previously set pattern of colocating styles along side the
consuming components. This one was really straight forward and just a
reorganization of files and imports. No code changes occurred.
Follows previous patterns of moving styles to exist alongside the components that use them. I would like these styles to be updated to use BEM syntax as well but I am holding off for a future PR to improve these styles.
This change tidies up the implementation of `ConnectHardwareForm#checkIfUnlocked`—passing
an `async` function to `forEach` doesn't ensure that the one is run before the other.
* Fix require-unicode-regexp issues
See [`require-unicode-regexp`](https://eslint.org/docs/rules/require-unicode-regexp) for more information.
This change enables `require-unicode-regexp` and fixes the issues raised by the rule.
* Remove case-insensitive flag from regexps
The `currentPath` parameter passed to our metrics utility had been
passed the full URL rather than just the path, contrary to what the
name would imply. We only used the path portion, so passing the full
URL did lead to complications.
Now just the `pathname` is passed in, rather than the full URL. This
simplifies the metrics logic, and it incidentally fixes two bugs.
The main bug fixed is regarding Firefox metrics. Previously we had
assumed the `currentPath` would start with `chrome-extension://`, which
of course was not true on Firefox. This lead to us incorrectly parsing
the `currentPath`, so path tracking was broken for Firefox events.
This broken parsing is now bypassed entirely, so metrics should now
work the same on Firefox as on Chrome.
The second bug was that we were incorrectly setting the tracking URL
for background events during tests. As a result, we were incorrectly
detecting ourselves as an internal site that had referred the user to
us. But this was not of major concern, since it only affected test
metrics (which get sent to the development Matomo project).
Lastly, this change let us discard the `pathname` parameter used in
the `overrides` parameter of the `metricsEvent` function. Now that
`currentPath` is equivalent to `pathname`, the `pathname` parameter is
redundant.
* Remove `url` parameter from `metricsEvent`
The `url` parameter was used to override the `currentPath`, but it
never worked correctly. It was supposed to be used for setting the
`url` query parameter that was sent to Matomo, but `currentPath` was
always used even if it `url` was set and `currentPath` was empty.
Instead, `currentPath` is now always used. There was never a need to
provide an "override" for `currentPath` when it can be set directly.
The metrics provider does set `currentPath` automatically by default,
but this can be overwritten already by passing a second parameter to
`metricsEvent`.
There were two places this `url` parameter was being used: background
events, and path changes. Background events were submitted with no
`currentPath`, so because of the bug with the `url` parameter, the
metrics utility would crash upon each event. So those were never
actually sent. This commit will fix that crash.
The `currentPath` parameter was supplied as an empty string for the
path change events, so those never crashed. They just had the `url`
query string parameter set incorrectly (to an empty string). It should
now be correctly populated, which should mean we'll be capturing all
path changes now. Previously we were only capturing path changes to
pages that happened to include an event, because of this blank `url`
problem.
* Use `url` query parameter as fallback for generating `pv_id`
The `pv_id` parameter currently isn't generated correctly on Firefox,
as the generation assumes that the current URL starts with
`chrome-extension://`. The `url` query parameter is still unique for
each path, so it's probably good enough for generating an id for each
page.
This is just a temporary fix; it will be removed in a future PR, where
Firefox will be properly supported.
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
The Home page component is responsible for closing the notification
window and triggering redirects in various situations. When this
happens, the home page is briefly rendered before the redirect/close
happens. This is a waste of cycles, and is distracting for users.
We now render nothing if the page is in the process of redirecting or
reloading. None of the redirects handled in this component are for sub-
pages, so we don't need the Home page to render in any of these cases.
We were already doing this for redirects to transaction confirmations,
but now we're taking the same approach for all redirects, and for the
cases where the window is closed.
The notification window is now kept open after the connect flow if
there are still pending confirmations. Previously, the notification
window would be closed after the connect flow no matter what, and any
pending confirmations would never be shown to the user.
This was accomplished by redirecting to the home screen after the
connect flow. The logic for deciding whether or not to close the window
is already handled by the home page. This does have the unfortunate
side-effect of briefly rendering the home page before the window
closes, but this is a minor problem that exists already in a number of
other scenarios, and it will be fixed in a subsequent PR.
Fixes#8973
When a suggested token was resolved in a different window, the popup
or notification UI could get stuck with an empty suggested token list,
where either action would throw an error.
This case is now handled by either redirecting or closing the window,
in the popup and notification cases respectively. This check is
performed on both component mount and update.
The "confirm suggested token" page allowed the confirm button to be
pressed even when there were no tokens to confirm. This can happen
sometimes when the page is in the process of redirecting.
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 mobile sync redirect was failing due to a typo in a prop. It would
fail to redirect correctly in the event of a timeout, or after pressing
'Cancel'.
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.
The connected status indicator had been moved left since this popup was
first written. The position of the highlighted portion of the
background has been updated reflect this.
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.
The list of accounts shown on the first page of the connect flow takes
up the entire height of the window, even if there aren't enough
accounts to fill the space. This looks strange because of the border
around the account list, especially in the case where there are three
accounts in the list.
The list now cedes space to the footer if it can't fill the space
itself. The extra space is taken by whitespace between the footer and
the list.
* 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>
The asset page component has been split into three parts: the main
asset page wrapper, and a component for the content (either token or
native currency). This makes it easier to add functionality that is
specific to either token asset pages or native currency asset pages.
'Activity' is a better name for this tab because it contains more than
just transactions. Signature requests are also included, and more non-
transaction activity may be included in the future.
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.
The `confirm-approve` page has been converted from a set of container/
component components to a functional component. The `withTokenTracker`
higher-order component has been deleted, as it was replaced by the
`useTokenTracker` hook.
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.
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.
The `disabled` prop being passed to the `PageContainer` component in
the render function for the `AddToken` component was a string in some
cases. It should always be a boolean. It has been cast to a boolean in
the one case where it was a string.
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 third and fourth parameters were unused, so they have been removed.
The tests descriptions for both `getToErrorObject` and
`getToWarningObject` have been improved as well.
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.
