* 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
`@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.
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.
* 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
* 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
* 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 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.
* 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.
* 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.
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.
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
* 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
* 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 UI would crash upon deleting a contact from the contact list. This
happened for two reasons: the deletion could result in a re-render
before the `history.push` finished navigating back to the contact list
(it was a race condition), and the contact entry left behind an invalid
`identities` entry when it was removed.
The first problem was fixed by making the container components for view
and edit contact more tolerant of being passed an `address` that
doesn't correspond to a contact. If they are given an address without a
contact, `null` is passed to the component via the `address` prop. The
component will redirect back to the list when this happens instead
rendering. This is more awkward than I'd like, but it was the most
sensible way of handling this I could think of without making much more
drastic changes to how we're handling routing here.
The second problem was caused by the `setAccountLabel` call, which was
used to ensure the contact entry for any wallet accounts was kept
in-sync with the account label. This was being called even for non-
wallet accounts though, which is where this problem arose. This step is
now skipped for non-wallet accounts.
Fixes#9019
There were two cases where bad gas estimate data was resulting in
crashes. These two places have been wrapped in a `try ... catch` to
handle the absence of gas estimate data.
The errors are still reported to Sentry so that we can track down the
root cause of this corrupted gas estimate data at some point in the
future. We plan on adding additional context to Sentry soon that should
help with this.
Fixes#8992
The styles for the `ListItem` component were recently broken in #8989
because of a change made by `stylelint`. It incorrectly removed the
`fr` unit because of the `length-zero-no-unit` rule. This was a bug
that has since been fixed in `stylelint`; it should have left the `fr`
unit in this case.
This tests the `personal_sign` method using the test dapp. This test
reflects part of the `confirm-sig-requests` integration test, which
tests the confirmation of a `personal_sign` signature request.
A `data-testid` prop was added to the 'Sign' button on the signature
request confirmation page, to make it easier to select the 'Sign'
button reliably.
Both the primary and secondary balance components on `EthOverview` now
have `data-testid` props, so that they can be more easily referenced in
e2e tests.
This required the addition of a `data-testid` prop to the component
`UserPreferencedCurrencyDisplay`, which is passed through to the
underlying `CurrencyDisplay` component.
The inline speedup and speedup cancellation buttons in the activity log
were broken. An exception would be thrown upon either button being
clicked, and nothing would happen from the user's perspective.
Both handlers were being passed a transaction id, which was a holdover
from before the transaction list redesign. The handlers passed for
these two actions now have the transaction id embedded, so it doesn't
need to be passed in anymore. They expect the click event to be passed
through instead.
The handlers passed also didn't handle closing the transaction details
modal when clicked. After fixing the first problem, they still didn't
work because the speedup/cancel dialog was shown behind the transaction
details modal.
Both issues are now fixed. Both buttons now close the transaction
details modal, and trigger the appropriate action.
The CSS `opacity` rule accepts percentages on newer browsers, but some
older browser versions we support (e.g. Firefox v60) doesn't support
them. A number is now used instead, which is supported by all browsers
we support.
There was a case where the `activeTab.origin` was not set, yet the user
could still navigate to the "Connected accounts" modal, which assumes
that `activeTab.origin` is set. This would happen in Firefox when the
user opened the popup on a page internal to Firefox (e.g.
`about:blank`). The connected status indicator would still be shown,
but the UI would crash when it was clicked.
The connected status indicator is now hidden whenever
`activeTab.origin` is falsy. The 'Unconnected account' alert has also
been made impossible to trigger in that circumstance.
The designs for the connect flow show the site `origin` below the site
icon rather than the site name. This was done for security reasons,
and because the site name is often set to an unwieldy long string.
This was accidentally undone in #8815 in the process of fixing a
separate bug. The origin has now been restored. More specific PropTypes
have been set on each use of the `domainMetadata` prop as well.
The account list on the unconnected account alert was in the wrong
order; they were in the order provided by the permissions controller
rather than by last active.
The accounts are now sorted correctly; first by last active, second by
the keyring controller order.
The `getPermittedIdentitiesForCurrentTab` selector was removed because
it is no longer used.
The 'copy-to-clipboard' icon was removed in #8190, and replaced with a
new 'Copy' icon component. It was still being used in two places
though, on the confirmation page for decryption and on the reveal seed
phrase screen..
The new Copy icon is now used in these two places instead. It has been
given a size of '17' to match the old icon size.
in both permission flows the checkboxes were using the fa-check icon, and in the case
of the connected accounts popover the color of the icon was wrong. It occurred to me
while simply fixing that color would have been easier, we will be adding permissions
at some point in the future that a user will be able to 'uncheck'. This PR replaces
the usages of those icons with the Checkbox component that is equipped to handle the
interactivity of checking/unchecking.
* fix overflowing contract names and origins
Moves heading and subtitle into divs with h3/h2 children so that the
div can be display flex and still have ellipses overflow. Only the
heading was display flex but I wanted the two to have similar structure.
this allows subheading to be display flex in the future.
Also uses stripHttpSchemes to remove that from origin in the subheading
* rtl ellipses on domain
* Update ui/app/components/app/transaction-list-item/index.scss
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
The 'Expand view' button in the 'Account Options' menu was still being
shown on the fullscreen UI. This button is not useful in fullscreen, as
all it does is open the fullscreen UI. It is now hidden on the
fullscreen UI.
The letter chosen for the fallback site icon was being set
inconsistently throughout the extension. The connect flow was using the
first letter of the `origin` for the letter (which was always `H`,
because `HTTP`), but the connect sites list and the account menu were
using the `name` from the domain metadata.
The `name` is now used for the fallback icon everywhere. A selector
that supplied a default domain metadata object has also been augmented
to use the `hostname` rather than the `origin` as a fallback name, to
match the behavior of the inpage provider.
A new `SiteIcon` component has been created for showing icons
representing web3 sites. The icon has a border and background, and it
has a fallback in case no icon is given. This new component accepts a
`size` prop that controls the size of the icon.
The old `IconWithFallback` component had a hard-coded size in the
SCSS styles for the icon, which was being overridden in a few places.
It was difficult to customize, and overly complicated.
The old `IconWithFallback` component is still used, but it's now
simpler. It only handles rendering the underlying `img` for the icon,
or the fallback letter if no image is given.
A separate `IconBorder` component has been created for the border and
white background used. It's solely used by `SiteIcon` for now, but I
intend to use it elsewhere as well, where this same pattern of a white
background is embedded.
