-
)
diff --git a/ui/app/pages/swaps/fee-card/index.scss b/ui/app/pages/swaps/fee-card/index.scss
index 0a86f6ab7..d1807fc0d 100644
--- a/ui/app/pages/swaps/fee-card/index.scss
+++ b/ui/app/pages/swaps/fee-card/index.scss
@@ -1,11 +1,69 @@
.fee-card {
- border-radius: 8px;
- border: 1px solid $Grey-100;
width: 100%;
@include H7;
+ &__savings-and-quotes-header {
+ display: flex;
+ position: relative;
+ align-items: center;
+ }
+
+ &__savings-and-quotes-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ left: 58px;
+ height: 39px;
+ background: $Blue-000;
+ border: 1px solid $Blue-500;
+ border-top-right-radius: 8px;
+ border-top-left-radius: 8px;
+ border-bottom: 0;
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+
+ &__savings-text {
+ @include H6;
+
+ font-weight: bold;
+ color: $Blue-500;
+ }
+
+ &__quote-link-container {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ }
+
+ &__quote-link-text {
+ @include H7;
+
+ color: $Blue-500;
+ }
+
+ &__caret-right {
+ color: $Blue-500;
+ width: 6px;
+ height: 6px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-left: 6px;
+
+ i {
+ transform: rotate(90deg);
+ }
+ }
+
&__main {
+ border: 1px solid $Blue-500;
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+ width: 100%;
+ max-width: 311px;
padding: 16px 16px 12px 16px;
}
@@ -31,6 +89,10 @@
cursor: pointer;
}
+ &__row-header-text--bold {
+ color: $Black-100;
+ }
+
&__row,
&__top-bordered-row {
display: flex;
@@ -51,7 +113,6 @@
img {
height: 10px;
width: 10px;
- margin-left: 4px;
cursor: pointer;
}
}
@@ -60,7 +121,12 @@
height: 10px;
width: 10px;
justify-content: center;
- margin-top: 2px;
+
+ div {
+ // Needed to override the style property added by the react-tippy library
+ display: flex !important;
+ height: 10px;
+ }
}
&__info-tooltip-paragraph {
@@ -111,11 +177,14 @@
margin-right: 12px;
}
- &__row-header-primary,
- &__row-header-primary--bold {
+ &__row-header-primary {
color: $Grey-500;
}
+ &__row-header-primary--bold {
+ color: $Black-100;
+ }
+
&__row-header-text--bold,
&__row-header-secondary--bold,
&__row-header-primary--bold {
@@ -125,6 +194,11 @@
&__bold {
font-weight: bold;
}
+
+ &__tilde {
+ font-family: Roboto, Helvetica, Arial, sans-serif;
+ margin-right: -3.5px;
+ }
}
.info-tooltip {
diff --git a/ui/app/pages/swaps/fee-card/pig-icon.js b/ui/app/pages/swaps/fee-card/pig-icon.js
new file mode 100644
index 000000000..ef7677ae4
--- /dev/null
+++ b/ui/app/pages/swaps/fee-card/pig-icon.js
@@ -0,0 +1,54 @@
+import React from 'react'
+
+export default function PigIcon() {
+ return (
+
+ )
+}
diff --git a/ui/app/pages/swaps/index.scss b/ui/app/pages/swaps/index.scss
index 1346eb364..cb08d457b 100644
--- a/ui/app/pages/swaps/index.scss
+++ b/ui/app/pages/swaps/index.scss
@@ -71,7 +71,7 @@
font-weight: bold;
color: $Black-100;
- margin-top: 3px;
+ margin-top: -5px;
}
&__header {
diff --git a/ui/app/pages/swaps/main-quote-summary/index.scss b/ui/app/pages/swaps/main-quote-summary/index.scss
index 7993ea724..dfdc882f1 100644
--- a/ui/app/pages/swaps/main-quote-summary/index.scss
+++ b/ui/app/pages/swaps/main-quote-summary/index.scss
@@ -1,28 +1,75 @@
.main-quote-summary {
display: flex;
flex-flow: column;
+ justify-content: center;
align-items: center;
position: relative;
- height: 196px;
+ max-height: 196px;
+ min-height: 196px;
width: 100%;
- color: $white;
+ color: $Black-100;
- &__quote-backdrop-with-top-tab,
- &__quote-backdrop {
- position: absolute;
- box-shadow: 0 10px 39px rgba(3, 125, 214, 0.15);
- border-radius: 8px;
- background: #fafcff;
+ &__source-row,
+ &__destination-row {
+ width: 100%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+
+ @include H6;
+
+ color: $Grey-500;
+ }
+
+ &__source-row {
+ align-items: center;
}
- &__quote-backdrop-with-top-tab {
- width: 348px;
- height: 215px;
+ &__source-row-value,
+ &__source-row-symbol {
+ // Each of these spans can be half their container width minus the space
+ // needed for the token icon and the span margins
+ max-width: calc(50% - 13px);
}
- &__quote-backdrop {
- width: 310px;
- height: 164px;
+
+ &__source-row-value {
+ margin-right: 5px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ &__source-row-symbol {
+ margin-left: 5px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ &__destination-row {
+ margin-top: 6px;
+ }
+
+ &__destination-row-symbol {
+ margin-left: 5px;
+ color: $Black-100;
+ }
+
+ &__icon,
+ &__icon-fallback {
+ height: 16px;
+ width: 16px;
+ }
+
+ &__icon-fallback {
+ padding-top: 0;
+ font-size: 12px;
+ line-height: 16px;
+ }
+
+ &__down-arrow {
+ margin-top: 5px;
}
&__details {
@@ -33,62 +80,24 @@
position: relative;
}
- &__best-quote {
- @include H7;
-
- font-weight: bold;
- position: relative;
- display: flex;
- padding-top: 6px;
- letter-spacing: 0.12px;
- min-height: 16px;
-
- > span {
- margin-left: 4px;
- }
- }
-
&__quote-details-top {
- height: 94px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
- padding: 12px;
- padding-top: 2px;
- margin-top: 4px;
- }
-
- &__bold {
- font-weight: 900;
- }
-
- &__quote-small-white {
- white-space: nowrap;
- width: 100%;
- text-align: center;
- font-size: 14px;
- margin-bottom: 8px;
- margin-top: 6px;
}
&__quote-large {
display: flex;
- align-items: flex-end;
+ align-items: flex-start;
+ margin-top: 8px;
+ height: 50px;
}
&__quote-large-number {
- font-size: 40px;
- line-height: 32px;
- margin-right: 6px;
- }
-
- &__quote-large-symbol {
- display: flex;
- align-items: flex-end;
- font-size: 32px;
- line-height: 32px;
+ font-size: 60px;
+ line-height: 48px;
}
&__quote-large-white {
@@ -104,7 +113,10 @@
justify-content: center;
align-items: center;
width: 287px;
- border-top: 1px solid rgba(255, 255, 255, 0.2);
- height: 42px;
+ margin-top: 14px;
+ }
+
+ &__exchange-rate-display {
+ color: $Grey-500;
}
}
diff --git a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js
index 1ae2e7d51..20aadf6fc 100644
--- a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js
+++ b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js
@@ -1,62 +1,33 @@
-import React, { useContext } from 'react'
+import React from 'react'
import PropTypes from 'prop-types'
import BigNumber from 'bignumber.js'
-import classnames from 'classnames'
-import { I18nContext } from '../../../contexts/i18n'
import { calcTokenAmount } from '../../../helpers/utils/token-util'
import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util'
import Tooltip from '../../../components/ui/tooltip'
-import SunCheckIcon from '../../../components/ui/icon/sun-check-icon.component'
+import UrlIcon from '../../../components/ui/url-icon'
import ExchangeRateDisplay from '../exchange-rate-display'
import { formatSwapsValueForDisplay } from '../swaps.util'
-import QuoteBackdrop from './quote-backdrop'
-function getFontSizes(fontSizeScore) {
- if (fontSizeScore <= 11) {
- return [40, 32]
- }
- if (fontSizeScore <= 16) {
- return [30, 24]
- }
- return [24, 14]
-}
-
-function getLineHeight(fontSizeScore) {
- if (fontSizeScore <= 11) {
- return 32
+function getFontSizesAndLineHeights(fontSizeScore) {
+ if (fontSizeScore <= 9) {
+ return [60, 48]
}
- if (fontSizeScore <= 16) {
- return 26
+ if (fontSizeScore <= 13) {
+ return [40, 32]
}
- return 18
-}
-
-// Returns a numerical value based on the length of the two passed strings: amount and symbol.
-// The returned value equals the number of digits in the amount string plus a value calculated
-// from the length of the symbol string. The returned number will be passed to the getFontSizes function
-// to determine the font size to apply to the amount and symbol strings when rendered. The
-// desired maximum digits and letters to show in the ultimately rendered string is 20, and in
-// such cases there can also be ellipsis shown and a decimal, combinding for a rendered "string"
-// length of ~22. As the symbol will always have a smaller font size than the amount, the
-// additive value of the symbol length to the font size score is corrected based on the total
-// number of alphanumeric characters in both strings and the desired rendered length of 22.
-function getFontSizeScore(amount, symbol) {
- const amountLength = amount.match(/\d+/gu).join('').length
- const symbolModifier = Math.min((amountLength + symbol.length) / 22, 1)
- return amountLength + symbol.length * symbolModifier
+ return [26, 15]
}
export default function MainQuoteSummary({
- isBestQuote,
sourceValue,
sourceSymbol,
sourceDecimals,
+ sourceIconUrl,
destinationValue,
destinationSymbol,
destinationDecimals,
+ destinationIconUrl,
}) {
- const t = useContext(I18nContext)
-
const sourceAmount = toPrecisionWithoutTrailingZeros(
calcTokenAmount(sourceValue, sourceDecimals).toString(10),
12,
@@ -67,43 +38,55 @@ export default function MainQuoteSummary({
)
const amountToDisplay = formatSwapsValueForDisplay(destinationAmount)
- const fontSizeScore = getFontSizeScore(amountToDisplay, destinationSymbol)
- const [numberFontSize, symbolFontSize] = getFontSizes(fontSizeScore)
- const lineHeight = getLineHeight(fontSizeScore)
-
+ const amountDigitLength = amountToDisplay.match(/\d+/gu).join('').length
+ const [numberFontSize, lineHeight] = getFontSizesAndLineHeights(
+ amountDigitLength,
+ )
let ellipsedAmountToDisplay = amountToDisplay
- if (fontSizeScore > 20) {
- ellipsedAmountToDisplay = `${amountToDisplay.slice(
- 0,
- amountToDisplay.length - (fontSizeScore - 20),
- )}...`
+
+ if (amountDigitLength > 20) {
+ ellipsedAmountToDisplay = `${amountToDisplay.slice(0, 20)}...`
}
return (
- {infoText}
- }
- offset={-36}
- distance={36}
- animation="none"
- position="top"
- arrow
- theme="tippy-tooltip-home"
- >
- 
-
- ) : null}
+ return (
+
+ {shouldShowWeb3ShimUsageNotification ? (
+
+ global.platform.openTab({ url: LEGACY_WEB3_URL })
+ }
+ >
+ {t('here')}
+ ,
+ ])}
+ ignoreText={t('dismiss')}
+ onIgnore={(disable) => {
+ setWeb3ShimUsageAlertDismissed(originOfCurrentTab)
+ if (disable) {
+ disableWeb3ShimUsageAlert()
+ }
+ }}
+ checkboxText={t('dontShowThisAgain')}
+ checkboxTooltipText={t('canToggleInSettings')}
+ key="home-web3ShimUsageNotification"
+ />
+ ) : null}
{shouldShowSeedPhraseReminder ? (
{
@@ -58,6 +68,14 @@ const mapStateToProps = (state) => {
? firstPermissionsRequest.metadata.id
: null
+ const originOfCurrentTab = getOriginOfCurrentTab(state)
+ const shouldShowWeb3ShimUsageNotification =
+ isPopup &&
+ getWeb3ShimUsageAlertEnabledness(state) &&
+ activeTabHasPermissions(state) &&
+ getWeb3ShimUsageStateForOrigin(state, originOfCurrentTab) ===
+ WEB3_SHIM_USAGE_ALERT_STATES.RECORDED
+
return {
forgottenPassword,
suggestedTokens,
@@ -81,6 +99,8 @@ const mapStateToProps = (state) => {
swapsFetchParams: swapsState.fetchParams,
showAwaitingSwapScreen: swapsState.routeState === 'awaiting',
isMainnet: getIsMainnet(state),
+ originOfCurrentTab,
+ shouldShowWeb3ShimUsageNotification,
}
}
@@ -103,6 +123,10 @@ const mapDispatchToProps = (dispatch) => ({
onTabClick: (name) => dispatch(setDefaultHomeActiveTabName(name)),
setSwapsWelcomeMessageHasBeenShown: () =>
dispatch(setSwapsWelcomeMessageHasBeenShown()),
+ setWeb3ShimUsageAlertDismissed: (origin) =>
+ setWeb3ShimUsageAlertDismissed(origin),
+ disableWeb3ShimUsageAlert: () =>
+ setAlertEnabledness(ALERT_TYPES.web3ShimUsage, false),
})
export default compose(
diff --git a/ui/app/pages/send/send.scss b/ui/app/pages/send/send.scss
index decf358cf..e416b41b2 100644
--- a/ui/app/pages/send/send.scss
+++ b/ui/app/pages/send/send.scss
@@ -21,6 +21,7 @@
position: absolute;
right: 1rem;
width: min-content;
+ font-size: 0.75rem;
}
}
diff --git a/ui/app/pages/settings/alerts-tab/alerts-tab.js b/ui/app/pages/settings/alerts-tab/alerts-tab.js
index 6bc6b5327..832a4ec17 100644
--- a/ui/app/pages/settings/alerts-tab/alerts-tab.js
+++ b/ui/app/pages/settings/alerts-tab/alerts-tab.js
@@ -1,8 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
-import { ALERT_TYPES } from '../../../../../app/scripts/controllers/alert'
+import { ALERT_TYPES } from '../../../../../shared/constants/alerts'
import Tooltip from '../../../components/ui/tooltip'
import ToggleButton from '../../../components/ui/toggle-button'
import { setAlertEnabledness } from '../../../store/actions'
@@ -11,7 +11,6 @@ import { useI18nContext } from '../../../hooks/useI18nContext'
const AlertSettingsEntry = ({ alertId, description, title }) => {
const t = useI18nContext()
- const dispatch = useDispatch()
const isEnabled = useSelector((state) => getAlertEnabledness(state)[alertId])
return (
@@ -27,7 +26,7 @@ const AlertSettingsEntry = ({ alertId, description, title }) => {
dispatch(setAlertEnabledness(alertId, !isEnabled))}
+ onToggle={() => setAlertEnabledness(alertId, !isEnabled)}
value={isEnabled}
/>
@@ -48,6 +47,10 @@ const AlertsTab = () => {
title: t('alertSettingsUnconnectedAccount'),
description: t('alertSettingsUnconnectedAccountDescription'),
},
+ [ALERT_TYPES.web3ShimUsage]: {
+ title: t('alertSettingsWeb3ShimUsage'),
+ description: t('alertSettingsWeb3ShimUsageDescription'),
+ },
}
return (
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.constants.js b/ui/app/pages/settings/networks-tab/networks-tab.constants.js
index 4c0ab5462..0271abcfc 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.constants.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.constants.js
@@ -55,7 +55,7 @@ const defaultNetworksData = [
rpcUrl: `https://kovan.infura.io/v3/${process.env.INFURA_PROJECT_ID}`,
chainId: KOVAN_CHAIN_ID,
ticker: 'ETH',
- blockExplorerUrl: 'https://etherscan.io',
+ blockExplorerUrl: 'https://kovan.etherscan.io',
},
]
diff --git a/ui/app/pages/swaps/build-quote/build-quote.js b/ui/app/pages/swaps/build-quote/build-quote.js
index 13d873b30..4714f79ad 100644
--- a/ui/app/pages/swaps/build-quote/build-quote.js
+++ b/ui/app/pages/swaps/build-quote/build-quote.js
@@ -418,6 +418,7 @@ export default function BuildQuote({
Number(maxSlippage) > MAX_ALLOWED_SLIPPAGE
}
hideCancel
+ showTermsOfService
/>
)
diff --git a/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js b/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js
index fbb268d65..e70ffd8e7 100644
--- a/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js
+++ b/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import BigNumber from 'bignumber.js'
import classnames from 'classnames'
import { calcTokenAmount } from '../../../helpers/utils/token-util'
-import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util'
+import { formatSwapsValueForDisplay } from '../swaps.util'
export default function ExchangeRateDisplay({
primaryTokenValue,
@@ -13,6 +13,7 @@ export default function ExchangeRateDisplay({
secondaryTokenDecimals = 18,
secondaryTokenSymbol,
arrowColor = 'black',
+ boldSymbols = true,
className,
}) {
const [showPrimaryToSecondary, setShowPrimaryToSecondary] = useState(true)
@@ -57,16 +58,24 @@ export default function ExchangeRateDisplay({
} else if (new BigNumber(rate, 10).lt('0.000001', 10)) {
rateToDisplay = rate
} else {
- rateToDisplay = toPrecisionWithoutTrailingZeros(rate, 9)
+ rateToDisplay = formatSwapsValueForDisplay(rate)
}
return (
- 
-
- {infoText ? (
-
- {descriptionText}
-
-
+
+ )
}
+
+HomeNotification.propTypes = {
+ acceptText: PropTypes.node,
+ checkboxText: PropTypes.node,
+ checkboxTooltipText: PropTypes.node,
+ classNames: PropTypes.array,
+ descriptionText: PropTypes.node.isRequired,
+ ignoreText: PropTypes.node,
+ infoText: PropTypes.node,
+ onAccept: PropTypes.func,
+ onIgnore: PropTypes.func,
+}
+
+export default HomeNotification
diff --git a/ui/app/components/app/home-notification/index.scss b/ui/app/components/app/home-notification/index.scss
index 452681ac2..38173145b 100644
--- a/ui/app/components/app/home-notification/index.scss
+++ b/ui/app/components/app/home-notification/index.scss
@@ -1,14 +1,7 @@
-.tippy-tooltip {
- // This looks weird, but its repeating the class name
- // using interpolation for higher specificity.
- &#{&}-home-theme {
- background: rgba(36, 41, 46, 0.9);
- color: $white;
- border-radius: 8px;
- }
-}
-
.home-notification {
+ display: flex;
+ flex-flow: column;
+ justify-content: space-between;
background: rgba(36, 41, 46, 0.9);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
border-radius: 8px;
@@ -19,37 +12,62 @@
min-width: 472px;
}
- display: flex;
- flex-flow: column;
- justify-content: space-between;
-
- &__header-container {
+ &__content-container {
display: flex;
}
- &__header {
+ &__content {
display: flex;
align-items: center;
justify-content: space-between;
}
- &__icon {
- height: 16px;
- align-self: center;
- }
-
&__text {
@include H7;
color: $white;
- margin-left: 10px;
- margin-right: 8px;
+ }
+
+ &__text-link {
+ @include H7;
+
+ color: $primary-blue;
+ cursor: pointer;
}
.fa-info-circle {
color: #6a737d;
}
+ & &__checkbox-wrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ @media screen and (max-width: 575px) {
+ width: 160px;
+ }
+ }
+
+ & &__checkbox {
+ height: 13px;
+ width: 13px;
+ font-size: 16px;
+ cursor: pointer;
+ }
+
+ & &__checkbox-label {
+ @include H7;
+
+ color: $white;
+ margin-left: 10px;
+ margin-top: 1px;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ cursor: pointer;
+ }
+
& &__ignore-button {
border-color: #6a737d;
box-sizing: border-box;
@@ -102,23 +120,14 @@
&__buttons {
display: flex;
width: 100%;
- margin-top: 10px;
- justify-content: flex-start;
+ padding-top: 10px;
+ align-items: center;
+ justify-content: space-between;
flex-direction: row-reverse;
}
-}
-.home-notification-tooltip {
- &__tooltip-container {
+ &__tooltip-wrapper {
display: flex;
- }
-
- &__content {
- @include H7;
-
- color: $white;
- text-align: left;
- display: inline-block;
- width: 200px;
+ margin-left: 10px;
}
}
diff --git a/ui/app/components/app/multiple-notifications/multiple-notifications.component.js b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
index e8dcebf13..9d16d1dfe 100644
--- a/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
+++ b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
@@ -21,7 +21,7 @@ export default class MultipleNotifications extends PureComponent {
const { showAll } = this.state
const { children, classNames } = this.props
- const childrenToRender = children.filter((child) => child)
+ const childrenToRender = children.filter(Boolean)
if (childrenToRender.length === 0) {
return null
}
diff --git a/ui/app/components/ui/page-container/page-container.component.js b/ui/app/components/ui/page-container/page-container.component.js
index eb1280b3b..79126e454 100644
--- a/ui/app/components/ui/page-container/page-container.component.js
+++ b/ui/app/components/ui/page-container/page-container.component.js
@@ -67,7 +67,7 @@ export default class PageContainer extends PureComponent {
renderActiveTabContent() {
const { tabsComponent } = this.props
let { children } = tabsComponent.props
- children = children.filter((child) => child)
+ children = children.filter(Boolean)
const { activeTabIndex } = this.state
return children[activeTabIndex]
diff --git a/ui/app/components/ui/url-icon/index.scss b/ui/app/components/ui/url-icon/index.scss
index 482f327d3..14d5524cb 100644
--- a/ui/app/components/ui/url-icon/index.scss
+++ b/ui/app/components/ui/url-icon/index.scss
@@ -20,9 +20,9 @@
border-radius: 50%;
background: #bbc0c5;
flex: 0 1 auto;
+ display: flex;
justify-content: center;
align-items: center;
- text-align: center;
padding-top: 2px;
}
}
diff --git a/ui/app/components/ui/url-icon/url-icon.js b/ui/app/components/ui/url-icon/url-icon.js
index 6dcfcc06f..115eb5fe1 100644
--- a/ui/app/components/ui/url-icon/url-icon.js
+++ b/ui/app/components/ui/url-icon/url-icon.js
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types'
import classnames from 'classnames'
import IconWithFallback from '../icon-with-fallback'
-export default function UrlIcon({ url, className, name }) {
+export default function UrlIcon({ url, className, name, fallbackClassName }) {
return (
+
- )
- }
+
+
- {descriptionText}
- {onAccept && acceptText ? (
-
- ) : null}
- {onIgnore && ignoreText ? (
-
+
+ {onAccept && acceptText ? (
+
+ ) : null}
+ {onIgnore && ignoreText ? (
+
+ ) : null}
+ {checkboxText ? (
+
+ ) : null}
+ {checkboxTooltipText ? (
+
+ {checkboxElement}
+
+ ) : (
+ checkboxElement
+ )}
+
+ {checkboxText}
+
+
1
- {baseSymbol}
+
+ {baseSymbol}
+
{comparisonSymbol}
{rateToDisplay}
- {ratiodSymbol}
+
+ {ratiodSymbol}
+
)
@@ -70,6 +82,9 @@ export const WithOnlyRequiredProps = () => {
}}
onFeeCardMaxRowClick={action('Clicked max fee row link')}
hideTokenApprovalRow
+ metaMaskFee="0.875"
+ onQuotesClick={action('Clicked quotes link')}
+ numberOfQuotes={2}
/>
+
{!hideTokenApprovalRow && (
-
)
@@ -122,4 +165,9 @@ FeeCard.propTypes = {
tokenApprovalTextComponent: PropTypes.node,
tokenApprovalSourceTokenSymbol: PropTypes.string,
onTokenApprovalClick: PropTypes.func,
+ metaMaskFee: PropTypes.string.isRequired,
+ isBestQuote: PropTypes.bool,
+ onQuotesClick: PropTypes.func.isRequired,
+ numberOfQuotes: PropTypes.number.isRequired,
+ tokenConversionRate: PropTypes.number,
}
diff --git a/ui/app/pages/swaps/fee-card/fee-card.stories.js b/ui/app/pages/swaps/fee-card/fee-card.stories.js
index af57849f3..aaaf43d0f 100644
--- a/ui/app/pages/swaps/fee-card/fee-card.stories.js
+++ b/ui/app/pages/swaps/fee-card/fee-card.stories.js
@@ -1,6 +1,6 @@
import React from 'react'
import { action } from '@storybook/addon-actions'
-import { text } from '@storybook/addon-knobs'
+import { text, boolean, number, object } from '@storybook/addon-knobs'
import FeeCard from './fee-card'
const tokenApprovalTextComponent = (
@@ -35,6 +35,13 @@ export const WithAllProps = () => {
tokenApprovalSourceTokenSymbol="ABC"
onTokenApprovalClick={action('Clicked third row link')}
hideTokenApprovalRow={false}
+ metaMaskFee="0.875"
+ savings={object('savings 1', { total: '8.55' })}
+ onQuotesClick={action('Clicked quotes link')}
+ numberOfQuotes={number('numberOfQuotes', 6)}
+ isBestQuote={boolean('isBestQuote', true)}
+ conversionRate={300}
+ currentCurrency="usd"
/>
)
@@ -55,6 +62,11 @@ export const WithoutThirdRow = () => {
}}
onFeeCardMaxRowClick={action('Clicked max fee row link')}
hideTokenApprovalRow
+ onQuotesClick={action('Clicked quotes link')}
+ numberOfQuotes={number('numberOfQuotes', 1)}
+ isBestQuote={boolean('isBestQuote', true)}
+ savings={object('savings 1', { total: '8.55' })}
+ metaMaskFee="0.875"
/>
+
+ {bestQuoteText && (
+
+ {bestQuoteText}
+ )} +
+
+ + {t('swapNQuotes', [numberOfQuotes])} +
+
+
+
+
@@ -83,26 +113,39 @@ export default function FeeCard({
+
{t('swapThisWillAllowApprove', [tokenApprovalTextComponent])}
- onTokenApprovalClick()}
- >
- {t('swapEditLimit')}
-
onTokenApprovalClick()}
+ >
+ {t('swapEditLimit')}
+
+
+
+
+ {t('swapQuoteIncludesRate', [metaMaskFee])}
+
+
-
@@ -151,7 +126,6 @@ export default function MainQuoteSummary({
}
MainQuoteSummary.propTypes = {
- isBestQuote: PropTypes.bool,
sourceValue: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(BigNumber),
@@ -167,4 +141,6 @@ MainQuoteSummary.propTypes = {
PropTypes.number,
]),
destinationSymbol: PropTypes.string.isRequired,
+ sourceIconUrl: PropTypes.string,
+ destinationIconUrl: PropTypes.string,
}
diff --git a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js
index ea267eb17..0f5ca998d 100644
--- a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js
+++ b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { text, number, boolean } from '@storybook/addon-knobs'
+import { text, number } from '@storybook/addon-knobs'
import MainQuoteSummary from './main-quote-summary'
export default {
@@ -8,28 +8,24 @@ export default {
export const BestQuote = () => {
return (
-
-
-
-
- {isBestQuote &&
-
- {t('swapsConvertToAbout', [
-
- {`${sourceAmount} ${sourceSymbol}`}
- ,
- ])}
-
+ 
+
-
- {`${destinationSymbol}`}
-
+
+ {formatSwapsValueForDisplay(sourceAmount)}
+
+
+
+
+
@@ -141,8 +115,9 @@ export default function MainQuoteSummary({
secondaryTokenValue={destinationValue}
secondaryTokenDecimals={destinationDecimals}
secondaryTokenSymbol={destinationSymbol}
- className="exchange-rate-display--white"
- arrowColor="white"
+ arrowColor="#037DD6"
+ boldSymbols={false}
+ className="main-quote-summary__exchange-rate-display"
/>
+
)
}
diff --git a/ui/app/pages/swaps/swaps-footer/swaps-footer.js b/ui/app/pages/swaps/swaps-footer/swaps-footer.js
index 870ce028b..62a3e2a70 100644
--- a/ui/app/pages/swaps/swaps-footer/swaps-footer.js
+++ b/ui/app/pages/swaps/swaps-footer/swaps-footer.js
@@ -31,7 +31,10 @@ export default function SwapsFooter({
onSubmit={onSubmit}
submitText={submitText}
submitButtonType="confirm"
- footerClassName="swaps-footer__custom-page-container-footer-class"
+ footerClassName={classnames(
+ 'swaps-footer__custom-page-container-footer-class',
+ className,
+ )}
footerButtonClassName={classnames(
'swaps-footer__custom-page-container-footer-button-class',
{
diff --git a/ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.js b/ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.js
index d123eb3d6..deea5c4b0 100644
--- a/ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.js
+++ b/ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.js
@@ -159,7 +159,7 @@ export default connect(
)(SwapsGasCustomizationModalComponent)
function sumHexWEIsToRenderableEth(hexWEIs) {
- const hexWEIsSum = hexWEIs.filter((n) => n).reduce(addHexes)
+ const hexWEIsSum = hexWEIs.filter(Boolean).reduce(addHexes)
return formatETHFee(
getValueFromWeiHex({
value: hexWEIsSum,
diff --git a/ui/app/pages/swaps/swaps.util.js b/ui/app/pages/swaps/swaps.util.js
index e64cbf8fd..81876d947 100644
--- a/ui/app/pages/swaps/swaps.util.js
+++ b/ui/app/pages/swaps/swaps.util.js
@@ -533,6 +533,7 @@ export function quotesToRenderableData(
destinationTokenDecimals: destinationTokenInfo.decimals,
destinationTokenSymbol: destinationTokenInfo.symbol,
destinationTokenValue: formatSwapsValueForDisplay(destinationValue),
+ destinationIconUrl: destinationTokenInfo.iconUrl,
isBestQuote: quote.isBestQuote,
liquiditySourceKey,
feeInEth,
@@ -544,6 +545,7 @@ export function quotesToRenderableData(
sourceTokenDecimals: sourceTokenInfo.decimals,
sourceTokenSymbol: sourceTokenInfo.symbol,
sourceTokenValue: sourceValue,
+ sourceTokenIconUrl: sourceTokenInfo.iconUrl,
ethValueOfTrade,
minimumAmountReceived,
metaMaskFee: fee,
diff --git a/ui/app/pages/swaps/view-quote/index.scss b/ui/app/pages/swaps/view-quote/index.scss
index 474eced60..397748c2a 100644
--- a/ui/app/pages/swaps/view-quote/index.scss
+++ b/ui/app/pages/swaps/view-quote/index.scss
@@ -17,7 +17,7 @@
@media screen and (max-width: 576px) {
overflow-y: auto;
- max-height: 388px;
+ max-height: 428px;
}
}
@@ -44,13 +44,13 @@
display: flex;
align-items: center;
justify-content: center;
+ min-height: 46px;
}
&__view-other-button,
&__view-other-button-fade {
display: flex;
align-items: center;
- margin-bottom: 16px;
position: absolute;
@include H7;
@@ -133,6 +133,9 @@
width: 100%;
align-items: center;
justify-content: center;
+ width: intrinsic; /* Safari/WebKit uses a non-standard name */
+ width: max-content;
+ max-width: 340px;
margin-top: 8px;
@media screen and (min-width: 576px) {
@@ -149,57 +152,29 @@
}
&__countdown-timer-container {
- @media screen and (max-width: 576px) {
- margin-top: 12px;
- margin-bottom: 16px;
-
- &--thin {
- margin-top: 8px;
- margin-bottom: 8px;
-
- > div {
- margin-top: 0;
- margin-bottom: 0;
- }
- }
- }
-
- @media screen and (min-width: 576px) {
- &--thin {
- margin-top: 6px;
- }
- }
+ width: 152px;
+ min-height: 32px;
+ display: flex;
+ justify-content: center;
+ border-radius: 42px;
+ background: #f2f3f4;
+ margin-top: 8px;
}
&__fee-card-container {
+ display: flex;
+ align-items: center;
width: 100%;
- margin-top: 8px;
+ max-width: 311px;
margin-bottom: 8px;
@media screen and (min-width: 576px) {
margin-bottom: 0;
-
- &--three-rows {
- margin-bottom: -16px;
- }
- }
- }
-
- &__main-quote-summary-container {
- margin-top: 24px;
-
- @media screen and (max-width: 576px) {
- margin-top: 0;
- }
-
- &--thin {
- margin-top: 8px;
}
}
&__metamask-rate {
display: flex;
- margin-top: 8%;
}
&__metamask-rate-text {
@@ -214,5 +189,9 @@
&__thin-swaps-footer {
max-height: 82px;
+
+ @media screen and (min-width: 576px) {
+ height: 72px;
+ }
}
}
diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js
index ea004a9f0..bdceee91f 100644
--- a/ui/app/pages/swaps/view-quote/view-quote.js
+++ b/ui/app/pages/swaps/view-quote/view-quote.js
@@ -74,7 +74,6 @@ import { useTokenTracker } from '../../../hooks/useTokenTracker'
import { QUOTES_EXPIRED_ERROR } from '../../../helpers/constants/swaps'
import CountdownTimer from '../countdown-timer'
import SwapsFooter from '../swaps-footer'
-import InfoTooltip from '../../../components/ui/info-tooltip'
import ViewQuotePriceDifference from './view-quote-price-difference'
export default function ViewQuote() {
@@ -119,6 +118,7 @@ export default function ViewQuote() {
const swapsQuoteRefreshTime = useSelector(getSwapsQuoteRefreshTime)
const { isBestQuote } = usedQuote
+
const fetchParamsSourceToken = fetchParams?.sourceToken
const usedGasLimit =
@@ -191,9 +191,11 @@ export default function ViewQuote() {
destinationTokenDecimals,
destinationTokenSymbol,
destinationTokenValue,
+ destinationIconUrl,
sourceTokenDecimals,
sourceTokenSymbol,
sourceTokenValue,
+ sourceTokenIconUrl,
} = renderableDataForUsedQuote
const { feeInFiat, feeInEth } = getRenderableNetworkFeesForQuote(
@@ -508,11 +510,7 @@ export default function ViewQuote() {
/>
)}
+
@@ -604,7 +582,6 @@ export default function ViewQuote() {
onCancel={async () => await dispatch(navigateBackToBuildQuote(history))}
disabled={balanceError || gasPrice === null || gasPrice === undefined}
className={isShowingWarning && 'view-quote__thin-swaps-footer'}
- showTermsOfService
showTopBorder
/>
diff --git a/ui/app/selectors/permissions.js b/ui/app/selectors/permissions.js
index 776db2234..a463d09d0 100644
--- a/ui/app/selectors/permissions.js
+++ b/ui/app/selectors/permissions.js
@@ -244,6 +244,13 @@ export function getPermissionsForActiveTab(state) {
})
}
+export function activeTabHasPermissions(state) {
+ const { activeTab, metamask } = state
+ const { domains = {} } = metamask
+
+ return Boolean(domains[activeTab.origin]?.permissions?.length > 0)
+}
+
export function getLastConnectedInfo(state) {
const { permissionsHistory = {} } = state.metamask
return Object.keys(permissionsHistory).reduce((acc, origin) => {
diff --git a/ui/app/selectors/selectors.js b/ui/app/selectors/selectors.js
index d9fd7129a..5607476a8 100644
--- a/ui/app/selectors/selectors.js
+++ b/ui/app/selectors/selectors.js
@@ -356,3 +356,7 @@ export function getIpfsGateway(state) {
export function getUSDConversionRate(state) {
return state.metamask.usdConversionRate
}
+
+export function getWeb3ShimUsageStateForOrigin(state, origin) {
+ return state.metamask.web3ShimUsageOrigins[origin]
+}
diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js
index 1cbf2bcdc..93c13f6ba 100644
--- a/ui/app/store/actions.js
+++ b/ui/app/store/actions.js
@@ -2510,16 +2510,18 @@ export function setSwapsWelcomeMessageHasBeenShown() {
}
}
-export function setAlertEnabledness(alertId, enabledness) {
- return async () => {
- await promisifiedBackground.setAlertEnabledness(alertId, enabledness)
- }
+export async function setAlertEnabledness(alertId, enabledness) {
+ await promisifiedBackground.setAlertEnabledness(alertId, enabledness)
}
export async function setUnconnectedAccountAlertShown(origin) {
await promisifiedBackground.setUnconnectedAccountAlertShown(origin)
}
+export async function setWeb3ShimUsageAlertDismissed(origin) {
+ await promisifiedBackground.setWeb3ShimUsageAlertDismissed(origin)
+}
+
export function loadingMethodDataStarted() {
return {
type: actionConstants.LOADING_METHOD_DATA_STARTED,
diff --git a/ui/index.js b/ui/index.js
index 192165280..6c4541f17 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -4,7 +4,7 @@ import { clone } from 'lodash'
import React from 'react'
import { render } from 'react-dom'
import { getEnvironmentType } from '../app/scripts/lib/util'
-import { ALERT_TYPES } from '../app/scripts/controllers/alert'
+import { ALERT_TYPES } from '../shared/constants/alerts'
import { SENTRY_STATE } from '../app/scripts/lib/setupSentry'
import { ENVIRONMENT_TYPE_POPUP } from '../app/scripts/lib/enums'
import Root from './app/pages'
diff --git a/yarn.lock b/yarn.lock
index 56802930e..4a308380e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2014,7 +2014,7 @@
prop-types "^15.7.2"
react-is "^16.8.0"
-"@metamask/contract-metadata@^1.19.0":
+"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.20.0":
version "1.20.0"
resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.20.0.tgz#8a127ca08edeb2c19b2f725b439b1630926c8aa9"
integrity sha512-Htb2yUwmAe4GrABpqahNDpYR3ErcCcaavF6tKamqvyymICeywi6HV0y/A7rbe86gLy5UW6wJG9yP4pCpQxs4RQ==
@@ -2114,20 +2114,19 @@
resolved "https://registry.yarnpkg.com/@metamask/forwarder/-/forwarder-1.1.0.tgz#13829d8244bbf19ea658c0b20d21a77b67de0bdd"
integrity sha512-Hggj4y0QIjDzKGTXzarhEPIQyFSB2bi2y6YLJNwaT4JmP30UB5Cj6gqoY0M4pj3QT57fzp0BUuGp7F/AUe28tw==
-"@metamask/inpage-provider@^6.1.0":
- version "6.3.0"
- resolved "https://registry.yarnpkg.com/@metamask/inpage-provider/-/inpage-provider-6.3.0.tgz#92d965e20912c24adbf973efbd07dbf339547741"
- integrity sha512-n7E06+8hWdYKmgJo84WFvgX6/BSqaOQEOMIrcbrP48LdkkZNEAChx6D8oUb2lYDQiWgahR+f20jsJoN4WmOjxw==
+"@metamask/inpage-provider@^8.0.1":
+ version "8.0.1"
+ resolved "https://registry.yarnpkg.com/@metamask/inpage-provider/-/inpage-provider-8.0.1.tgz#67b1f0733ae7c0e0e429dc5c067ba9d2dd6d66da"
+ integrity sha512-dN3IpiJtaHeiPzF01UXnrQ6TxXbXbkU54kiOHuIUe9e8s7vyPzgDgN2nj84xjmIkqxL0MKY90Wcp0obFKnNj+Q==
dependencies:
- eth-rpc-errors "^2.1.1"
+ "@metamask/safe-event-emitter" "^2.0.0"
+ eth-rpc-errors "^4.0.2"
fast-deep-equal "^2.0.1"
is-stream "^2.0.0"
- json-rpc-engine "^5.2.0"
+ json-rpc-engine "^6.1.0"
json-rpc-middleware-stream "^2.1.1"
obj-multiplex "^1.0.0"
- obs-store "^4.0.3"
pump "^3.0.0"
- safe-event-emitter "^1.0.1"
"@metamask/jazzicon@^2.0.0":
version "2.0.0"
@@ -2145,6 +2144,15 @@
gl-mat4 "1.1.4"
gl-vec3 "1.0.3"
+"@metamask/obs-store@^5.0.0":
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/@metamask/obs-store/-/obs-store-5.0.0.tgz#cf2213874c62186a8a4c80f0c402af62a0a877a9"
+ integrity sha512-9Az33hULCDVUVpBzNAdjPPgNTfs6paC38LYZv4xazt03mJt4jwWFFTP79TtF4grXfiAtUs/UZOktW4Vp+r37rw==
+ dependencies:
+ "@metamask/safe-event-emitter" "^2.0.0"
+ readable-stream "^2.2.2"
+ through2 "^2.0.3"
+
"@metamask/safe-event-emitter@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-2.0.0.tgz#af577b477c683fad17c619a78208cede06f9605c"
@@ -3579,10 +3587,10 @@ adjust-sourcemap-loader@3.0.0:
loader-utils "^2.0.0"
regex-parser "^2.2.11"
-adm-zip@0.4.11:
- version "0.4.11"
- resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.11.tgz#2aa54c84c4b01a9d0fb89bb11982a51f13e3d62a"
- integrity sha512-L8vcjDTCOIJk7wFvmlEUN7AsSb8T+2JrdP7KINBjzr24TJ5Mwj590sLu3BC7zNZowvJWa/JtPmD8eJCzdtDWjA==
+adm-zip@0.4.16:
+ version "0.4.16"
+ resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.16.tgz#cf4c508fdffab02c269cbc7f471a875f05570365"
+ integrity sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg==
aes-js@3.0.0:
version "3.0.0"
@@ -5700,12 +5708,7 @@ block-stream@*:
dependencies:
inherits "~2.0.0"
-bluebird@3.4.6:
- version "3.4.6"
- resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.6.tgz#01da8d821d87813d158967e743d5fe6c62cf8c0f"
- integrity sha1-AdqNgh2HgT0ViWfnQ9X+bGLPjA8=
-
-bluebird@^3.3.5, bluebird@^3.5.0, bluebird@^3.5.1, bluebird@^3.5.5:
+bluebird@3.7.2, bluebird@^3.3.5, bluebird@^3.5.0, bluebird@^3.5.1, bluebird@^3.5.5:
version "3.7.2"
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -6730,7 +6733,7 @@ chokidar@^3.3.0, chokidar@^3.4.1:
optionalDependencies:
fsevents "~2.1.2"
-chownr@^1.0.1, chownr@^1.1.1:
+chownr@^1.1.1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
@@ -7491,17 +7494,6 @@ cosmiconfig@^6.0.0:
path-type "^4.0.0"
yaml "^1.7.2"
-coveralls@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-3.0.0.tgz#22ef730330538080d29b8c151dc9146afde88a99"
- integrity sha512-ZppXR9y5PraUOrf/DzHJY6gzNUhXYE3b9D43xEXs4QYZ7/Oe0Gy0CS+IPKWFfvQFXB3RG9QduaQUFehzSpGAFw==
- dependencies:
- js-yaml "^3.6.1"
- lcov-parse "^0.0.10"
- log-driver "^1.2.5"
- minimist "^1.2.0"
- request "^2.79.0"
-
cp-file@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/cp-file/-/cp-file-7.0.0.tgz#b9454cfd07fe3b974ab9ea0e5f29655791a9b8cd"
@@ -9888,13 +9880,6 @@ eth-query@^2.0.2, eth-query@^2.1.0, eth-query@^2.1.2:
json-rpc-random-id "^1.0.0"
xtend "^4.0.1"
-eth-rpc-errors@^2.1.1:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/eth-rpc-errors/-/eth-rpc-errors-2.1.1.tgz#00a7d6c8a9c864a8ab7d0356be20964e5bee4b13"
- integrity sha512-MY3zAa5ZF8hvgQu1HOF9agaK5GgigBRGpTJ8H0oVlE0NqMu13CW6syyjLXdeIDCGQTbUeHliU1z9dVmvMKx1Tg==
- dependencies:
- fast-safe-stringify "^2.0.6"
-
eth-rpc-errors@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/eth-rpc-errors/-/eth-rpc-errors-3.0.0.tgz#d7b22653c70dbf9defd4ef490fd08fe70608ca10"
@@ -11783,16 +11768,16 @@ gc-stats@^1.2.1:
nan "^2.13.2"
node-pre-gyp "^0.13.0"
-geckodriver@^1.19.1:
- version "1.19.1"
- resolved "https://registry.yarnpkg.com/geckodriver/-/geckodriver-1.19.1.tgz#556f95fd6451b553cec89f81f81abbefce10d6e5"
- integrity sha512-xWL/+eEhQ6+t98rc1c+xVM3hshDJibXtZf9WJA3sshxq4k5L1PBwfmswyBmmlKUfBr4xuC256gLVC2RxFhiCsQ==
+geckodriver@^1.21.0:
+ version "1.21.0"
+ resolved "https://registry.yarnpkg.com/geckodriver/-/geckodriver-1.21.0.tgz#1f04780ebfb451ffd08fa8fddc25cc26e37ac4a2"
+ integrity sha512-NamdJwGIWpPiafKQIvGman95BBi/SBqHddRXAnIEpFNFCFToTW0sEA0nUckMKCBNn1DVIcLfULfyFq/sTn9bkA==
dependencies:
- adm-zip "0.4.11"
- bluebird "3.4.6"
+ adm-zip "0.4.16"
+ bluebird "3.7.2"
got "5.6.0"
- https-proxy-agent "3.0.0"
- tar "4.4.2"
+ https-proxy-agent "5.0.0"
+ tar "6.0.2"
generate-function@^2.0.0:
version "2.3.1"
@@ -13155,15 +13140,7 @@ https-did-resolver@^0.1.0:
did-resolver "0.0.6"
xmlhttprequest "^1.8.0"
-https-proxy-agent@3.0.0, https-proxy-agent@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-3.0.0.tgz#0106efa5d63d6d6f3ab87c999fa4877a3fd1ff97"
- integrity sha512-y4jAxNEihqvBI5F3SaO2rtsjIOnnNA8sEbuiP+UhJZJHeM2NRm6c09ax2tgqme+SgUUvjao2fJXF4h3D6Cb2HQ==
- dependencies:
- agent-base "^4.3.0"
- debug "^3.1.0"
-
-https-proxy-agent@^5.0.0:
+https-proxy-agent@5.0.0, https-proxy-agent@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
@@ -13171,6 +13148,14 @@ https-proxy-agent@^5.0.0:
agent-base "6"
debug "4"
+https-proxy-agent@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-3.0.0.tgz#0106efa5d63d6d6f3ab87c999fa4877a3fd1ff97"
+ integrity sha512-y4jAxNEihqvBI5F3SaO2rtsjIOnnNA8sEbuiP+UhJZJHeM2NRm6c09ax2tgqme+SgUUvjao2fJXF4h3D6Cb2HQ==
+ dependencies:
+ agent-base "^4.3.0"
+ debug "^3.1.0"
+
human-standard-collectible-abi@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/human-standard-collectible-abi/-/human-standard-collectible-abi-1.0.2.tgz#077bae9ed1b0b0b82bc46932104b4b499c941aa0"
@@ -13455,9 +13440,9 @@ inherits@2.0.3:
integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
- version "1.3.5"
- resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
- integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+ version "1.3.7"
+ resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
+ integrity sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==
inline-source-map@~0.6.0:
version "0.6.2"
@@ -15123,7 +15108,7 @@ js-tokens@^3.0.2:
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
-js-yaml@3.13.1, js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.5.1, js-yaml@^3.6.1, js-yaml@^3.9.0:
+js-yaml@3.13.1, js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.5.1, js-yaml@^3.9.0:
version "3.13.1"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -15220,7 +15205,7 @@ json-rpc-engine@^3.4.0, json-rpc-engine@^3.6.0:
promise-to-callback "^1.0.0"
safe-event-emitter "^1.0.1"
-json-rpc-engine@^5.2.0, json-rpc-engine@^5.3.0:
+json-rpc-engine@^5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/json-rpc-engine/-/json-rpc-engine-5.3.0.tgz#7dc7291766b28766ebda33eb6d3f4c6301c44ff4"
integrity sha512-+diJ9s8rxB+fbJhT7ZEf8r8spaLRignLd8jTgQ/h5JSGppAHGtNMZtCoabipCaleR1B3GTGxbXBOqhaJSGmPGQ==
@@ -15468,10 +15453,10 @@ jsx-ast-utils@^2.4.1:
array-includes "^3.1.1"
object.assign "^4.1.0"
-jszip@^3.1.5:
- version "3.2.2"
- resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.2.2.tgz#b143816df7e106a9597a94c77493385adca5bd1d"
- integrity sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==
+jszip@^3.2.2:
+ version "3.5.0"
+ resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.5.0.tgz#b4fd1f368245346658e781fec9675802489e15f6"
+ integrity sha512-WRtu7TPCmYePR1nazfrtuF216cIVon/3GWOvHS9QR5bIwSbnxtdpma6un3jyGGNhHsKCSzn5Ypk+EkDRvTGiFA==
dependencies:
lie "~3.3.0"
pako "~1.0.2"
@@ -15809,11 +15794,6 @@ lcid@^3.0.0:
dependencies:
invert-kv "^3.0.0"
-lcov-parse@^0.0.10:
- version "0.0.10"
- resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3"
- integrity sha1-GwuP+ayceIklBYK3C3ExXZ2m2aM=
-
lead@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/lead/-/lead-1.0.0.tgz#6f14f99a37be3a9dd784f5495690e5903466ee42"
@@ -16771,11 +16751,6 @@ lodash@4.17.20, lodash@=3.10.1, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.13.1, lo
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
-log-driver@^1.2.5:
- version "1.2.5"
- resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.5.tgz#7ae4ec257302fd790d557cb10c97100d857b0056"
- integrity sha1-euTsJXMC/XkNVXyxDJcQDYV7AFY=
-
log-symbols@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
@@ -17527,7 +17502,7 @@ minipass-pipeline@^1.2.2:
dependencies:
minipass "^3.0.0"
-minipass@^2.2.1, minipass@^2.2.4, minipass@^2.6.4:
+minipass@^2.2.1, minipass@^2.6.4:
version "2.6.5"
resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.6.5.tgz#1c245f9f2897f70fd4a219066261ce6c29f80b18"
integrity sha512-ewSKOPFH9blOLXx0YSE+mbrNMBFPS+11a2b03QZ+P4LVrUHW/GAlqeYC7DBknDyMWkHzrzTpDhUvy7MUxqyrPA==
@@ -17542,7 +17517,7 @@ minipass@^3.0.0, minipass@^3.1.1:
dependencies:
yallist "^4.0.0"
-minizlib@^1.1.0, minizlib@^1.2.1:
+minizlib@^1.2.1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.2.2.tgz#6f0ccc82fa53e1bf2ff145f220d2da9fa6e3a166"
integrity sha512-hR3At21uSrsjjDTWrbu0IMLTpnkpv8IIMFDFaoz43Tmu4LkmAXfH44vNNzpTnf+OAQQCHrb91y/wc2J4x5XgSQ==
@@ -22229,7 +22204,7 @@ rework@1.0.1:
convert-source-map "^0.3.3"
css "^2.0.0"
-rimraf@2, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3:
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3, rimraf@^2.7.1:
version "2.7.1"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -22449,7 +22424,7 @@ sass-loader@^7.0.1:
neo-async "^2.5.0"
pify "^3.0.0"
-sax@>=0.6.0, sax@^1.2.1, sax@^1.2.4, sax@~1.2.4:
+sax@^1.2.1, sax@^1.2.4, sax@~1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -22660,15 +22635,14 @@ select@^1.1.2:
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
-selenium-webdriver@^4.0.0-alpha.5:
- version "4.0.0-alpha.5"
- resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.5.tgz#e4683b3dbf827d70df09a7e43bf02ebad20fa7c1"
- integrity sha512-hktl3DSrhzM59yLhWzDGHIX9o56DvA+cVK7Dw6FcJR6qQ4CGzkaHeXQPcdrslkWMTeq0Ci9AmCxq0EMOvm2Rkg==
+selenium-webdriver@4.0.0-alpha.7:
+ version "4.0.0-alpha.7"
+ resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.7.tgz#e3879d8457fd7ad8e4424094b7dc0540d99e6797"
+ integrity sha512-D4qnTsyTr91jT8f7MfN+OwY0IlU5+5FmlO5xlgRUV6hDEV8JyYx2NerdTEqDDkNq7RZDYc4VoPALk8l578RBHw==
dependencies:
- jszip "^3.1.5"
- rimraf "^2.6.3"
+ jszip "^3.2.2"
+ rimraf "^2.7.1"
tmp "0.0.30"
- xml2js "^0.4.19"
semaphore@>=1.0.1, semaphore@^1.0.3, semaphore@^1.1.0:
version "1.1.0"
@@ -24300,18 +24274,17 @@ tar-stream@^2.0.0, tar-stream@^2.0.1:
inherits "^2.0.3"
readable-stream "^3.1.1"
-tar@4.4.2:
- version "4.4.2"
- resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.2.tgz#60685211ba46b38847b1ae7ee1a24d744a2cd462"
- integrity sha512-BfkE9CciGGgDsATqkikUHrQrraBCO+ke/1f6SFAEMnxyyfN9lxC+nW1NFWMpqH865DhHIy9vQi682gk1X7friw==
+tar@6.0.2, tar@^6.0.2:
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.2.tgz#5df17813468a6264ff14f766886c622b84ae2f39"
+ integrity sha512-Glo3jkRtPcvpDlAs/0+hozav78yoXKFr+c4wgw62NNMO3oo4AaJdCo21Uu7lcwr55h39W2XD1LMERc64wtbItg==
dependencies:
- chownr "^1.0.1"
- fs-minipass "^1.2.5"
- minipass "^2.2.4"
- minizlib "^1.1.0"
- mkdirp "^0.5.0"
- safe-buffer "^5.1.2"
- yallist "^3.0.2"
+ chownr "^2.0.0"
+ fs-minipass "^2.0.0"
+ minipass "^3.0.0"
+ minizlib "^2.1.0"
+ mkdirp "^1.0.3"
+ yallist "^4.0.0"
tar@^2.0.0:
version "2.2.2"
@@ -24335,18 +24308,6 @@ tar@^4, tar@^4.0.2:
safe-buffer "^5.1.2"
yallist "^3.0.3"
-tar@^6.0.2:
- version "6.0.2"
- resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.2.tgz#5df17813468a6264ff14f766886c622b84ae2f39"
- integrity sha512-Glo3jkRtPcvpDlAs/0+hozav78yoXKFr+c4wgw62NNMO3oo4AaJdCo21Uu7lcwr55h39W2XD1LMERc64wtbItg==
- dependencies:
- chownr "^2.0.0"
- fs-minipass "^2.0.0"
- minipass "^3.0.0"
- minizlib "^2.1.0"
- mkdirp "^1.0.3"
- yallist "^4.0.0"
-
tarn@^1.1.4:
version "1.1.5"
resolved "https://registry.yarnpkg.com/tarn/-/tarn-1.1.5.tgz#7be88622e951738b9fa3fb77477309242cdddc2d"
@@ -26522,19 +26483,6 @@ xml-name-validator@^2.0.1:
resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
integrity sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=
-xml2js@^0.4.19:
- version "0.4.23"
- resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66"
- integrity sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==
- dependencies:
- sax ">=0.6.0"
- xmlbuilder "~11.0.0"
-
-xmlbuilder@~11.0.0:
- version "11.0.1"
- resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
- integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
-
xmlhttprequest-ssl@~1.5.4:
version "1.5.5"
resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
-
-
-
-
- {t('swapNQuotesAvailable', [Object.values(quotes).length])}
-
-
- {
- allAvailableQuotesOpened()
- setSelectQuotePopoverShown(true)
- }}
- >
- {t('swapNQuotesAvailable', [Object.values(quotes).length])}
-
-
-
-
+ - {t('swapQuoteIncludesRate', [metaMaskFee])} -
- {
+ allAvailableQuotesOpened()
+ setSelectQuotePopoverShown(true)
+ }}
+ tokenConversionRate={
+ destinationTokenSymbol === 'ETH'
+ ? 1
+ : memoizedTokenConversionRates[destinationToken.address]
+ }
/>