* ci - run storybook and add to build-artifacts
* ci/storybook - rename storybook build path and fix artifact upload
* ci/storybook - rename link text
* clean - remove accidently committed storybook build dir
* storybook - fix image path to relative (#10364)
* Use nock in to intercept gas call for gas-duck test
Use nock instead of stubbing out the window fetch. My suspicion is that when the test runs the window sometimes wouldn't be intialized/referenced, which could explain the intermittent test failures in those particular tests that call window.fetch.
Using nock allows the call to be intercepted more reliably.
Upon the first render, the "original" signature request confirmation
page would trigger a PropType error. This was caused by unexpected
mutation of the state props. The container has been updated to avoid
mutating the props, and now the PropType warning is no longer present.
This fixes a bug where the network menu would remain present after a
second click on the network menu button. The bug was caused by the
click being handled _twice_, by two separate handlers. First it was
caught by the external click handler of the dropdown menu, which closed
the menu. Second, it was caught by the network button itself, which re-
opened the menu. This all happens quickly enough that to the user it
appears to stay open.
The external click handler of the menu now only fires if the menu is
open. Additionally, any click that is caught by the network menu is
stopped from propagating further, so that it can't trigger additional
click handlers.
The `menu-droppo` external click handler would fail to update when the
prop changed while the menu wasn't shown. This bug isn't exposed
anywhere yet as far as I know, but I ran into it when working on a
different bug fix.
The Chip component was emitting a PropType error because it was missing
the `labelProps.children` prop. It was never supposed to be given that
prop - it was a mistake in the PropType declaration. The PropTypes have
been fixed to prevent this warning.
Fixes#5611
The origin that suggests a transaction is now shown on the transaction
confirmation page. If the transaction was initiated from within
MetaMask (e.g. via the 'Send' flow or swaps), no origin is shown.
This was based upon designs that were linked in the PR #9377. This is a
temporary measure until our newer transaction confirmation designs can
be implemented.
Fixes#6071
The origin of the dapp that suggested signing has been added to the
signature request confirmation page. This only applies to `eth_sign`,
`personal_sign`, `eth_signTypedData`, and `eth_signTypedData_v1`. The
confirmation page for `eth_signTypedData_v3` and `eth_signTypedData_v4`
already featured the origin.
The decrupt message confirmation UI will crash if the origin metadata
is not present. This PR makes the UI tolerant of that metadata being
missing. It was always intended to be optional anyway.
Fixes#9244
When trying to connect a Trezor account on a fresh install of MetaMask,
the radio buttons on the account selection page would not respond to
being clicked.
When debugging this, it looks like the `onChange` event was never
triggered. A radio `<input>` element should trigger `onChange` whenever
the selection state change, but seemingly this wouldn't happen if the
change in selection state was undone during the same render cycle. If
I paused at a breakpoint during the render, I could see the checkbox
get selected then unselected again without triggering `onChange`.
The simplest fix was to use `onClick` instead of `onChange`. This seems
more appropriate anyway because we're treating the radio button as a
controlled component here, so the state of the underlying element isn't
really of any concern.
The "Next nonce" warning warns users when the custom nonce they set is
higher than our suggested nonce. This warning was mistakenly being
shown even when we didn't have a suggested nonce yet.
Fixes#9989
New year, new problems.
It's working as expected, but we had hard-coded some 2020 date values, and `formatDateWithYearContext` adds the year to its output formatted date if the date is not from the current year.
Ensures that `hideLoadingIndication` is always called in all actions that call `showLoadingIndication`. It's unclear how many of these actions were failing to hide the loading indication, because other actions superset `hideLoadingIndication`.
At the very least, `updateTransaction` was probably failing to hide the loading indication in the error case.
This PR also refactors a lot of actions to call `hideLoadingIndication` once in `finally` blocks as opposed to multiple times across `try` and `catch` blocks. We avoided making changes to functions using `Promise` methods, because `Promise.finally` is not supported by Waterfox, and it's not properly transpiled by Babel.
A data race was introduced in #9919 when the old synchronous storage
API was replaced with an async storage API. The problem arises when
`fetchWithCache` is called a second time while it's still processing
another call. In this case, the `cachedFetch` object can become
stale while blocked waiting for a fetch response, and result in a cache
being overwritten unintentionally.
See this example (options omitted for simplicity, and assuming an empty
initial cache):
```
await Promise.all([
fetchWithCache('https://metamask.io/foo'),
fetchWithCache('https://metamask.io/bar'),
]
```
The order of events could be as follows:
1. Empty cache retrieved for `/foo` route
2. Empty cache retrieved for `/bar` route
3. Call made to `/foo` route
4. Call made to `/bar` route
5. `/foo` response is added to the empty cache object retrieved in
step 1, then is saved in the cache.
6. `/bar` response is added to the empty cache object retrieved in
step 2, then is saved in the cache.
In step 6, the cache object saved would not contain the `/foo`
response set in step 5. As a result, `/foo` would never be cached.
This problem was resolved by embedding the URL being cached directly in
the cache key. This prevents simultaneous responses from overwriting
each others caches.
Technically a data race still exists when handing simultaneous
responses to the same route, but the result would be that the last call
to finish would overwrite the previous. This seems acceptable.
Additional validation was added in #9907 to ensure that the "Known
contract address" warning was shown when sending tokens to another
token address after switching assets on the Send screen. Unfortunately
this change had the unintended side-effect of preventing _all_ token
sends after switching assets, so long as the recipient was not an
internal address.
The problem is that the `validate` function expects to be passed the
address of the token send recipient in the case where a token is
selected. Instead the token address was being passed to the validate
function.
The `query` state is now used, which should always contain the
recipient address. This is the same state used in the only other place
the `validate` function is called.
The TokenList component on the `add-token` page had the name `InfoBox`,
which doesn't seem applicable. It has been renamed to `TokenList`, to
match the module filename and the component name we use elsewhere.
The `errors` and `total` state has been removed from the `gas` slice,
along with related functions. It appears to have been unused for a long
time, though I'm not exactly sure as of when.
* Remove use of ethgassthat; use metaswap /gasPrices api for gas price estimates
* Remove references to ethgasstation
* Pass base to BigNumber constructor in fetchExternalBasicGasEstimates
* Update ui/app/hooks/useTokenTracker.js
Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>
* Delete gas price chart
* Remove price chart css import
* Delete additional fee chart code
* Lint fix
* Delete more code no longer used after ethgasstation removal
Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>
Our Storybook dependencies have been updated to v6.1.9, from v5. This
was done to address a security vulnerability in a transitive dependency
of these packages (`highlight.js`).
The primary changes required by this Storybook update were the change
in import path for the `withKnobs` hook, the change in background
config format, and the webpack configuration. Storybook seems to work
correctly.
The migration was guided by the Storybook changelog[1] and the
Storybook v6 migration guide[2].
There is one Storybook error remaining; it fails to load the Euclid
font. This is a pre-existing error though, so we can fix it in a later
PR.
The `yarn.lock` file was deduplicated in this PR as well, as it was
required to fix various install warnings that were introduced with this
update.
[1]: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md
[2]: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md
* Validate sendToken address when component updates
On a reproduction of trying to get the error message it seems that if an token address is provided in the address form with ETH selected then changing to a token address, the error message won't show.
This will validate the sendtoken address on prop change to properly update the warning message.
* Update test to include second doesAmountErrorRequireUpdate call when state is updated and component is updated
This fixes a PropType error when using non-custom slippage, and it
fixes a type inconsistency when custom slippage is used.
Previously, `slippage` was being converted explicitly to a `Number` as
it was passed into `BuildQuote`, but not as it was passed into
`AwaitingSwap`. Also the PropType was set as `string`, despite the fact
that it's a number in most cases, and is used for math.
The PropType has been changed to `number`, and the selective casting to
`Number` has been removed. Instead, the `maxSlippage` value is cast to
a `Number` as it's being selected, so that the type is always
consistent.
* Revert "Update fee card designs to show savings and MM fee (#9629)"
This reverts commit d9924ca771.
* Revert "Update main-quote-summary designs/styles (#9612)"
This reverts commit 5456d55c88.
* Add token verification message to swaps build quote screen
* Adds description for locale
* Use <a> tag for etherscan link
* Remove unnecessary span
* Update ui/app/pages/swaps/build-quote/build-quote.js
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* Move add contact button in fullscreen/expanded view.
Fixes#9868
Move the add contact button that is overlapping (x)/close setting icon lower, on the same line as Contacts in fullscreen/expanded view.
This reverts commit f30d261e69.
The custom HD path option was found to be unsafe to use, because the
displayed list of accounts would differ depending on which application
was open on the Ledger device. Essentially Ledger was accepting invalid
inputs, and returning junk responses.
This was too dangerous to ship, as it could leave users with an account
that they can't reliably recover. If we don't know how the derivation
is happening, then allowing this import puts our users at risk of
losing funds.
We can re-introduce this functionality after adding validation to
ensure that we only allow inputs that are handled correctly by Ledger.
* Update fee card designs to show savings and MM fee
css touch up
More semantic html and remove unnecessary container wrapper
Update message for case when there are no savings, in new swaps fee card designs
Improve display of tilde in savings designs
* Ensure terms of service is shown when insufficient eth warning is shown on view-quote screen
* Logic simplification in fee-card.js
* Better center info tooltip icons in fee-card
* Add comment about use of \!important in fee card css
* Use container class property on info tooltip in fee card
* Remove function call that was made redundant with 980b14089 but not removed during rebase
* Document where we need BigNumber-related changes
* Fix 1 unit test
* Debug progress
* Add required values for each upstream usage of getBigNumber
* Switch to base 10
* Address feedback
* Fixes related to swaps custom gas limit
* Update ui/app/pages/swaps/view-quote/view-quote.js
Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>
* Move selectQuotePopover onSubmit dispatches to a single action creator
* Correct type of minimumGasLimit in view-quote.js
Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>
Failed metric events on the opt-in page no longer leave the user stuck
on that page. If the metric events fail, they still bubble up as errors
to be caught by Sentry and logged to the console, but the user is still
brought to the next page.
Fixes#9800
The bug with our onboarding library integration was introduced in #8873
because of a change in when `completeOnboarding` was called. We hadn't
realized at the time that the onboarding integration relied upon the
onboarding completing event to know when the onboarding state should
be cleared. Because onboarding is now marked as completed earlier, the
state was cleared just as it was intended to be used.
The onboarding completed event has been moved back to where it was
before: after the user exits the "end of flow" page.
The original problem that #8873 was addressing was a routing issue,
where the user would be redirected back to the seed phrase confirmation
page despite already having confirmed their seed phrase. This was fixed
in a different way here, by updating the routing in the first time flow
switch to skip straight to the end of flow page if the seed phrase has
already been confirmed.
This does involve one user-facing change in behavior; if the user opens
any MetaMask UI before navigating away from the end-of-flow screen,
they will still be considered mid-onboarding so it'll redirect to the
end-of-flow screen. But we do mark onboarding as completed if the user
closes the tab/window while on the end of flow screen, which was
another goal of #8873.
The property `quoteDataRows[0]rawNetworkFees` was described as a number
rather than a string. In practice it is a string in all cases. The
PropType and the tests have both been updated to expect it to be a
string.
A few inconsistencies in JSDoc formatting have been fixed throughout
the project. Many issues remain; these were just the few things that
were easy to fix with a regular expression.
The changes include:
* Using lower-case for primitive types, but capitalizing non-primitive
types
* Separating the parameter identifier and the description with a dash
* Omitting a dash between the return type and the return description
* Ensuring the parameter type is first and the identifier is second (in
a few places it was backwards)
* Using square brackets to denote when a parameter is optional, rather
than putting "(optional)" in the parameter description
* Including a type and identifier with every parameter
* Fixing inconsistent spacing, except where it's used for alignment
* Remove incorrectly formatted `@deprecated` tags that reference non-
existent properties
* Remove lone comment block without accompanying function
Additionally, one parameter was renamed for clarity.
The `seedPhraseBackedUp` now tracks whether or not the seed phrase has
been backed up. Previously this defaulted to `true`, which left no way
to distinguish whether it had been backed up or not during onboarding.
The default is now `null`, and the UI logic has been updated to account
for this, so that "existing users" (i.e. users that have a backup that
is years old) aren't mistakenly considered to have not backed up their
seed phrase. This value is already set explicitly to `true` or `false`
during onboarding, in both the create and import flow.
This change was made primarily to make it easier to fix the onboarding
library integration, which will be done in a subsequent PR.
This reverts commit f5265c24ab.
Apparently it wasn't unnecessary after all. The Lock page served a few
different purposes. First, it was used to safeguard the seed phrase, in
case the user was interrupted after setting a password. Otherwise
anyone could open MetaMask and see the seed phrase without verifying
the password. Second, the submit function for the initialization unlock
screen also returned the seed phrase, so that it could be set in React
state for the confirmation step. Third, the submit function was also
responsible for navigating back to the seed phrase reveal page.
Removing the lock page had the effect of causing an infinite render
loop if onboarding was interrupted in the "Create" flow after setting
a password but before seed phrase confirmation. That redirect loop has
now been fixed.
* create custom addHexPrefix function
* switch to custom addHexPrefix
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: Erik Marks <rekmarks@protonmail.com>
A lint error was accidentally introduced recently when two PRs changed
the same area of code (#9793 and #9795). They didn't conflict, and the
lint passed for both, but when combined they left an unused variable.
This page appears to serve the sole purpose of locking the extension
and redirecting back to the base route if the page is refreshed during
the onboarding flow. This ineffectual before the vault has been
initialized, and it's a barrier to resuming interrupted onboarding
flows when done after initialization.
This prop was being passed to the `CreatePassword` component, but that
component has no prop with this name. In fact, no component in this
entire project does.
Adds swaps-gas-customization-modal and utilize in swaps
Remove swaps specific code from gas-modal-page-container/
Remove slow estimate data from swaps-gas-customization-modal.container
Use average as lower safe price limit in swaps-gas-customization-modal
Lint fix
Fix up unit tests
Update ui/app/ducks/swaps/swaps.js
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Remove stale properties from gas-modal-page-container.component.js
Replace use of isCustomPrice safe with isCustomSwapsGasPriceSafe, in swaps-gas-customization-modal
Remove use of averageIsSafe in isCustomPriceSafe function
Stop calling resetCustomGasState in swaps
Refactor 'setter' type actions and creators to 'event based', for swaps slice custom gas logic
Replace use of advanced-tab-content.component with advanceGasInputs in swaps gas customization component
Add validation for the gasPrices endpoint
swaps custom gas price should be considered safe if >= to average
Update renderDataSummary unit test
Lint fix
Remove customOnHideOpts for swapsGasCustomizationModal in modal.js
Better handling for swaps gas price loading and failure states
Improve semantics: isCustomSwapsGasPriceSafe renamed to isCustomSwapsGasPriceUnSafe
Mutate state directly in swaps gas slice reducer
Remove unused params
More reliable tracking of speed setting for Gas Fees Changed metrics event
Lint fix
Throw error when fetchSwapsGasPrices response is invalid
add disableSave and customTotalSupplement to swaps-gas-customization container return
Update ui/app/ducks/swaps/swaps.js
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Improve error handling in fetchMetaSwapsGasPriceEstimates
Remove metricsEvent from swaps-gas-customization-modal context
Base check of gas speed type in swaps-gas-customization-modal on gasEstimateType
Improve naming of variable and functions use to set customPriceIsSafe prop of AdvancedGasInputs in swaps-gas-customization-modal
Simplify sinon spy/stub code in gas-price-button-group-component.test.js
Remove unnecessary getSwapsFallbackGasPrice call in swaps-gas-customization-modal
Remove use of getSwapsTradeTxParams and clean up related gas price logic in swaps
Improve validator of SWAP_GAS_PRICE_VALIDATOR
Ensure default tradeValue
* Display network form chain ID in decimal
* Hide chainId tooltip in view mode
* Display chain ID error message in entered format
* Update locale messages
* Rename on change chain ID validator
There were a few lint errors introduced in #9768 due to the recently
merged prettier PR. They have now been fixed.
Additionally, one line using the property `eth_accounts` was
intermittently failing for me locally. I've been seeing this lint
failure off-and-on for a few days now - I'm not sure why I haven't seen
it on CI. Either way though, it's now ignored.
This will allow usage in areas where getting the line-height, etc
of the typography settings will introduce issues. The mixins have been
updated to references these variables so that they can be changed in
one place in the future
* Check if swapTokenValue is negative and set prefix accordingly
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* Ensure that trade.value fees are included in displayed network fees
* Remove unused getTotalEthCost function
* Remove unused getTotalEthCost function
* Update ui/app/pages/swaps/swaps.util.js
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* Lint fix
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
If the attempt to fetch quotes fails, an error message is now logged to
the console explaining why it failed. This makes it dramatically easier
to understand what's happening when quotes fail.
At some point later on we should also look specifically for errors we
expect to occur, and report to Sentry in unexpected cases. I've added a
TODO comment about this.
* Update main-quote-summary designs/styles
* Clean up css: use className instead of element types
* Style fixes to symbol elements in main-quote-view
* Use correct source for token iconUrls passed to main-quote-view
* Improve vertical spacing on view-quote screen and with new main-quote-view designs
* Remove unused classes
* Tweak space around large quote amount text in main-quote-summary
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.
Refs #9663
See [`node/no-deprecated-api`][1] for more information.
This change enables `node/no-deprecated-api` and fixes the issues raised by the rule.
[1]:https://github.com/mysticatea/eslint-plugin-node/blob/v11.1.0/docs/rules/no-deprecated-api.md
The change to the way that `punycode` is imported is to address the fact that
third-party module is hidden by the built-in. This is a silly hack but it works.
Consolidates the background and UI segment implementations into a shared solution.
This results in the introduction of our first shared module.
Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>
`@metamask/eslint-config` has been updated to v4.1.0. This update
requires that we update `eslint` to v7 as well, which in turn requires
updating most `eslint`-related packages.
Most notably, `babel-eslint` was replaced with `@babel/eslint-parser`,
and `babel-eslint-plugin` was replaced by `@babel/eslint-plugin`. This
required renaming all the `babel/*` rules to `@babel/*`.
Most new or updated rules that resulted in lint errors have been
temporarily disabled. They will be fixed and re-enabled in subsequent
PRs.
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 `conversionRate` prop of `GasModalPageContainer` was updated
recently in PR #9623 to have a PropType of `string` instead of
`number`. This resulted in a PropType error whenever this modal was
rendered, as `conversionRate` is always a `number`.
The PropType has been reverted to the correct type, `number`.
The `InfoTooltip` component had a `contentText` prop with a PropType of
`string` that was being passed a `node` as of #9614. This resulted in a
PropType error.
The `contentText` prop was being passed directly to `Tooltip` component
as the prop `html`, which has a PropType of `node`. A string is a valid
`node` type, which is why this worked before.
The `contentText` prop is now of type `node`, and the error no longer
appears.
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>
* Don't show average (slowest) button in custom gas modal while in swaps
* In swaps, show warning in custom gas modal if price set below average price
* Update ui/app/selectors/custom-gas.js
Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>
* Fix typo
Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.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.
* Add data point to 'Swaps Completed' segment event: estimated vs used gas
* Linted
* Correct property name for estimated gas on swapMetaData in _trackSwapsMetrics()
* Set estimated_gas property on swapMetaData to a hex string
* Correct base when dividing by estimated_gas
Co-authored-by: Dan Finlay <dan@danfinlay.com>
* 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
* Use initial transaction for settings swap transaction title params, and remove addition of swap properties to cancel transcations
* Update unit test data
* Use token symbol properties from initial transaction for filitering in transaction list
* Set result of calcTokenAmount to base 10 string in useTokenDisplayValue
* Use primaryCurrency for amount in transaction breakdownd details
* Hidden overflow and text overflow ellipsis on long primary currency in transaction-list-item
* Empty prefix for token approvals
* Conditional render primaryCurrency title in tx breakdown to `Spend limit amount` when tx is a token approve.
* Add title to primaryCurrency in tx list item to show full amount on hover
* Update ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js
DRY title conditional rendering.
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* 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.
This updated error message shows the key of the message instead of the
message text itself, followed by the locale code.
This will make it easier to filter messages we want to ignore in
Sentry. Currently it's difficult to filter because the message is
radically different for each locale. With this change, we can add a
filter and use a glob for the last part to filter it for all locales.
It's still important to include the locale code in the message, so that
we can catch cases where the message has the wrong number of
substitutions for a specific locale.
* 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 tooltip for the Retry Transaction button would be erroneously set
to display a custom block explorer, if one was set for the current
network. It now displays the intended retry transaction text in all
cases.
On-chain failed transactions have a transaction status of `confirmed`,
and should not be retried. Our retry function doesn't handle on-chain
failures yet, so it would inevitably fail due to the transaction having
the same nonce as a confirmed on-chain transaction.
When determining whether to show the retry button in the UI, we had
mistakenly been using a `status` variable that determined whether we
should show "Failed" on that transaction in the activity log. That
display status includes both network and on-chain failures, unlike
the `txMeta.status` property.
The `showRetry` logic has been updated to ensure it's only shown when
`txMeta.status` is `failed`, meaning on-chain failures will no longer
show the retry button. Additionally, the display-specific `status`
variable has been renamed to `displayedStatusKey`, to indicate that it
is a string that corresponds to a localized message, and that it's the
status meant for display purposes.
* Stop passing a gas param to the estimateGas call initiated in the swaps controller timedoutGasReturn
* Stop passing gas params to timedoutGasReturn
* Lint fix
* Stop passing no longer used param to setInitialGasEstimate
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
* Fix dismiss button on unconnected alert modal
Set button type to primary, rounded, and set `!important` on css class width
* Update ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss
* Add unconnected-account-alert to popover component classname to simplify css selector.
Co-authored-by: Brad Decker <git@braddecker.dev>
Add a prop to the `ButtonGroup` component to make it act as a group of
radio buttons, rather than a group of regular buttons. These commits
were written by @danjm - I just pulled them into this branch.
* Show token symbol when token amount string is long
Fixes#9318
This essentially separates the token cell list item title/token amount and the token symbol.
I do request advice/recomendations on how to better handle the new `subTtitle` which I set the token symbol to and the `subtitle` https://github.com/MetaMask/metamask-extension/blob/develop/ui/app/components/app/asset-list-item/asset-list-item.js#L99.
* Individually test token balance and token symbol and their associated css element
* Feedback commit
* Classname and css overflow for title with string.
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.
* Use verifyPassword instead of submitPassword when exporting priv key
Fixes#9287 which was when submitPassword is called will fully clear the keyring state
https://github.com/MetaMask/KeyringController/blob/master/index.js#L155ad823d0ac1/index.js (L562)ad823d0ac1/index.js (L726)
Also, pass hideWarning action prop so it will clear the appState.warning if a correct password is never provided on componentWillUnmount
* Hide Warning on componentWillUnmount
* Update exportAccount tests to verifyPassword
* Update ui/app/store/actions.js
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* MetaMask mascot support for provided directions targets and toggling followMouse
* Fixes for mascot.component.js
* Update metamask-logo version to 2.4.0
* Lint fix
* Fix mouse follow updating
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* Improve mascot story name
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* Update package.json
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* Lint fix
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
* Add react-testing-library
Adds react-testing-library as a dependency, creates a wrapper function with Provider store/I18n context support, and implements it in unconnected-account-alert.
* Refactor renderWithProvider store to extra param, instead of component prop store
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.
The only place that these .menu styles were being used was the account-menu by way of components/app/dropdowns/menu. Because account-menu is the only place that used these styles I moved them to exist with the account-menu
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.
* Clear Account Details in AppState
We store sensitive information in the AppState under accountDetail for when the modal is active and present. This adds a new action/reducer and componentWillUnmount to clean up the persisted data left after leaving the modal.
* Remove reduntant clearAccountDetails call when clicking done button
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
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 `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 MetaMetrics project ID can now be set via environment variable. It
has not been set yet in practice, so for now the old project IDs will
still be used. This is in preparation for migrating to a new project.
e2e tests will now reference the development MetaMetrics project
instead of the production one. The metrics endpoint should be stubbed
out during e2e tests anyway, but this seemed like a better default
regardless.
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 state snapshot that was attached to Sentry errors was removed
recently in #8794 because it had become too large. The snapshot has
now been restored and reduced in size.
A utility function has been written to reduce the state object to just
the requested properties. This seemed safer than filtering out state
that is known to be large or to contain identifiable information.
This is not a great solution, as now knowledge about the state shape
resides in this large constant, but it will suffice for now. I am
hopeful that we can decorate our controllers with this metadata in the
future instead, as part of the upcoming background controller refactor.
A separate `getSentryState` global function has been added to get the
reduced state, so that the old `getCleanAppState` function that we used
to use could remain unchanged. It's still useful to get that full state
copy while debugging, and in e2e tests.
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 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
The loading indication had remained after successfully signing with
`personal_sign`. This mistake was introduced accidentally in #8434.
This is noticeable if you confirm the signature in the popup UI or
fullscreen UI, as they remain open after signing. The notification UI
closes after signing without waiting for this loading indicator to be
removed.
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.
The vendored CSS required by `react-tippy` is now imported instead of
inlined. This should result in no functional changes, and it makes it
easier to lint our styles.
This was originally inlined in #3120 when `react-tippy` was first added
to the project. It has not been updated since then, so I don't think
there's any risk this has gotten out-of-sync.
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.
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 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.
Previously the `getMessage` function would throw if a substitution was
falsey. Now it will accept any substitution, including `undefined`.
A substitution of `null` or `undefined` will still be reported to
Sentry and printed to the console as an error, but it will not
interrupt execution. Any `null` or `undefined` substitutions will be
rendered as empty strings.
Ideally we'd never pass in `null` or `undefined` as a substitution, but
in practice this sometimes just occurs breifly between renders, which
isn't a severe enough problem to justify crashing the UI.
The detection of React component substitutions has been updated as
well, to ensure that `null` values aren't counted as React
substitutions.
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.
We were including the polyfill for the `Intl.RelativeTimeFormat` API,
but we weren't including any locale data. This polyfill doesn't work
without the locale data for whichever locale you're formatting.
The data for all locales we support is now included. The locale data
is loaded from disk as-needed (during app startup, and upon each change
in locale).
The `getMessage` function in `i18n-helper` was assuming that any
substitutions passed into the transaction function were used by the
corresponding localized message. However, some messages are
intentionally ignoring substitutions passed in. This was done to
simplify the UI logic, so the same substitutions could be passed in for
many different messages, even if some don't use them.
For example, `transactionCancelSuccess` is passed two substitutions but
only uses the second one. `transactionErrored` is passed in two, but
uses neither.
`getMessage` has been updated to no longer make that assumption. It
will now only throw an error if the localized message expects a
substitution that was not given. A given substitution that is unused
results in no error.
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 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.
We were showing exported private keys in all upper case. This is
atypical, and many other wallets (e.g. MyCrypto) expect private keys
for imported accounts to be lower-cased. Our own account import is
tolerant of either case.
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.
Fixes#8835
In cases where the registry failed to load, and the sig is set to `{}` on this line: e85b162651/ui/app/helpers/utils/transactions.util.js (L78) this proceeds to set the method prefix to `{}` in knownMethodData.
Additionally check if the method prefix object is empty to proceed call getMethodDataAsync again.
I could only reproduce by intentionally failing the method registry lookup and found this solution. I could not find an instance where the registry consistently failed to lookup even on slow/throttled/high latency networks.
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.
* 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>
Imported accounts can be removed, but the permissions controller is not
informed when this happens. Permissions are now removed as part of the
account removal process.
Additionally, the `getPermittedIdentitiesForCurrentTab` selector now
filters out any non-existent accounts, in case a render occurs in the
middle of an account removal.
This was resulting in a render crash upon opening the popup on a site
that was connected to the removed account.
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.
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>
Fiat amounts are now shown inline on token transfers in the transaction
list, where possible (i.e. where the conversion rates are known).
The logic for this hook is pretty tangled because it's used for so many
fundamentally different types of items (eth transactions, token
transactions, signature requests). In the future we should split these
into different components.
The documentation for the `useTokenFiatAmount` hook was updated to make
`tokenAmount` optional, but in practice it already worked as expected
without the amount being passed in.
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.
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.
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.
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.
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.
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.
The `decimals` property of tokens was being set as a string instead of
a Number for any tokens added via `getTokenParams`. It's now cast to a
Number instead.
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.
