1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Revert "Update main-quote-summary designs/styles (#9612)" (#9722)

This reverts commit 5456d55c88.
This commit is contained in:
Mark Stacey 2020-10-27 16:53:20 -02:30
parent 795658a7f0
commit d5b8a4ade9
11 changed files with 194 additions and 162 deletions

View File

@ -1863,6 +1863,13 @@
"swapsAlmostDone": { "swapsAlmostDone": {
"message": "Almost done..." "message": "Almost done..."
}, },
"swapsBestQuote": {
"message": "Best quote"
},
"swapsConvertToAbout": {
"message": "Convert $1 to about",
"description": "This message is part of a quote for a swap. The $1 is the amount being converted, and the amount it is being swapped for is below this message"
},
"swapsMaxSlippage": { "swapsMaxSlippage": {
"message": "Max slippage" "message": "Max slippage"
}, },

View File

@ -1,3 +0,0 @@
<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.00163 15.2045C6.21347 15.1962 6.45833 15.109 6.61275 14.9637L11.6498 10.2232C11.9385 9.90194 12.0577 9.28597 11.7239 8.92693C11.3952 8.57328 10.7576 8.5838 10.4276 8.93611L6.89052 12.2693L6.89052 1.87164C6.89052 1.38076 6.49254 0.982788 6.00163 0.982788C5.51071 0.982788 5.11274 1.38076 5.11274 1.87164L5.11274 12.2693L1.57565 8.93611C1.27181 8.63281 0.611843 8.57675 0.279352 8.92693C-0.0531095 9.27702 0.0531145 9.91513 0.353459 10.2232L5.3905 14.9637C5.56288 15.126 5.76513 15.205 6.00163 15.2045Z" fill="#D6D9DC"/>
</svg>

Before

Width:  |  Height:  |  Size: 636 B

View File

@ -20,9 +20,9 @@
border-radius: 50%; border-radius: 50%;
background: #bbc0c5; background: #bbc0c5;
flex: 0 1 auto; flex: 0 1 auto;
display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center;
padding-top: 2px; padding-top: 2px;
} }
} }

View File

@ -7,14 +7,13 @@ export default function UrlIcon ({
url, url,
className, className,
name, name,
fallbackClassName,
}) { }) {
return ( return (
<IconWithFallback <IconWithFallback
className={classnames('url-icon', className)} className={classnames('url-icon', className)}
icon={url} icon={url}
name={name} name={name}
fallbackClassName={classnames('url-icon__fallback', fallbackClassName)} fallbackClassName="url-icon__fallback"
/> />
) )
} }
@ -23,5 +22,4 @@ UrlIcon.propTypes = {
url: PropTypes.string, url: PropTypes.string,
className: PropTypes.string, className: PropTypes.string,
name: PropTypes.string, name: PropTypes.string,
fallbackClassName: PropTypes.string,
} }

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import classnames from 'classnames' import classnames from 'classnames'
import { calcTokenAmount } from '../../../helpers/utils/token-util' import { calcTokenAmount } from '../../../helpers/utils/token-util'
import { formatSwapsValueForDisplay } from '../swaps.util' import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util'
export default function ExchangeRateDisplay ({ export default function ExchangeRateDisplay ({
primaryTokenValue, primaryTokenValue,
@ -13,7 +13,6 @@ export default function ExchangeRateDisplay ({
secondaryTokenDecimals = 18, secondaryTokenDecimals = 18,
secondaryTokenSymbol, secondaryTokenSymbol,
arrowColor = 'black', arrowColor = 'black',
boldSymbols = true,
className, className,
}) { }) {
const [showPrimaryToSecondary, setShowPrimaryToSecondary] = useState(true) const [showPrimaryToSecondary, setShowPrimaryToSecondary] = useState(true)
@ -38,16 +37,16 @@ export default function ExchangeRateDisplay ({
} else if ((new BigNumber(rate, 10).lt('0.000001', 10))) { } else if ((new BigNumber(rate, 10).lt('0.000001', 10))) {
rateToDisplay = rate rateToDisplay = rate
} else { } else {
rateToDisplay = formatSwapsValueForDisplay(rate) rateToDisplay = toPrecisionWithoutTrailingZeros(rate, 9)
} }
return ( return (
<div className={classnames('exchange-rate-display', className)}> <div className={classnames('exchange-rate-display', className)}>
<span>1</span> <span>1</span>
<span className={classnames({ 'exchange-rate-display__bold': boldSymbols })}>{baseSymbol}</span> <span className="exchange-rate-display__bold">{baseSymbol}</span>
<span>{comparisonSymbol}</span> <span>{comparisonSymbol}</span>
<span>{rateToDisplay}</span> <span>{rateToDisplay}</span>
<span className={classnames({ 'exchange-rate-display__bold': boldSymbols })}>{ratiodSymbol}</span> <span className="exchange-rate-display__bold">{ratiodSymbol}</span>
<div <div
className={classnames('exchange-rate-display__switch-arrows', { className={classnames('exchange-rate-display__switch-arrows', {
'exchange-rate-display__switch-arrows-rotate': rotating, 'exchange-rate-display__switch-arrows-rotate': rotating,
@ -84,5 +83,4 @@ ExchangeRateDisplay.propTypes = {
secondaryTokenSymbol: PropTypes.string.isRequired, secondaryTokenSymbol: PropTypes.string.isRequired,
className: PropTypes.string, className: PropTypes.string,
arrowColor: PropTypes.string, arrowColor: PropTypes.string,
boldSymbols: PropTypes.bool,
} }

View File

@ -3,70 +3,26 @@
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
position: relative; position: relative;
height: 196px;
width: 100%; width: 100%;
color: $Black-100; color: $white;
&__source-row, &__quote-backdrop-with-top-tab,
&__destination-row { &__quote-backdrop {
width: 100%; position: absolute;
display: flex; box-shadow: 0 10px 39px rgba(3, 125, 214, 0.15);
align-items: flex-start; border-radius: 8px;
justify-content: center; background: #fafcff;
@include H6;
color: $Grey-500;
} }
&__source-row { &__quote-backdrop-with-top-tab {
align-items: center; width: 348px;
height: 215px;
} }
&__source-row-value, &__quote-backdrop {
&__source-row-symbol { width: 310px;
// Each of these spans can be half their container width minus the space height: 164px;
// needed for the token icon and the span margins
max-width: calc(50% - 13px);
}
&__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 { &__details {
@ -77,24 +33,62 @@
position: relative; 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 { &__quote-details-top {
height: 94px;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; 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 { &__quote-large {
display: flex; display: flex;
align-items: flex-start; align-items: flex-end;
margin-top: 8px;
height: 50px;
} }
&__quote-large-number { &__quote-large-number {
font-size: 60px; font-size: 40px;
line-height: 48px; line-height: 32px;
margin-right: 6px;
}
&__quote-large-symbol {
display: flex;
align-items: flex-end;
font-size: 32px;
line-height: 32px;
} }
&__quote-large-white { &__quote-large-white {
@ -110,10 +104,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 287px; width: 287px;
margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.2);
} height: 42px;
&__exchange-rate-display {
color: $Grey-500;
} }
} }

View File

@ -1,77 +1,94 @@
import React from 'react' import React, { useContext } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import BigNumber from 'bignumber.js' import BigNumber from 'bignumber.js'
import classnames from 'classnames'
import { I18nContext } from '../../../contexts/i18n'
import { calcTokenAmount } from '../../../helpers/utils/token-util' import { calcTokenAmount } from '../../../helpers/utils/token-util'
import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util' import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util'
import Tooltip from '../../../components/ui/tooltip' import Tooltip from '../../../components/ui/tooltip'
import UrlIcon from '../../../components/ui/url-icon' import SunCheckIcon from '../../../components/ui/icon/sun-check-icon.component'
import ExchangeRateDisplay from '../exchange-rate-display' import ExchangeRateDisplay from '../exchange-rate-display'
import { formatSwapsValueForDisplay } from '../swaps.util' import { formatSwapsValueForDisplay } from '../swaps.util'
import QuoteBackdrop from './quote-backdrop'
function getFontSizesAndLineHeights (fontSizeScore) { function getFontSizes (fontSizeScore) {
if (fontSizeScore <= 9) { if (fontSizeScore <= 11) {
return [60, 48]
}
if (fontSizeScore <= 13) {
return [40, 32] return [40, 32]
} }
return [26, 15] if (fontSizeScore <= 16) {
return [30, 24]
}
return [24, 14]
}
function getLineHeight (fontSizeScore) {
if (fontSizeScore <= 11) {
return 32
}
if (fontSizeScore <= 16) {
return 26
}
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)
} }
export default function MainQuoteSummary ({ export default function MainQuoteSummary ({
isBestQuote,
sourceValue, sourceValue,
sourceSymbol, sourceSymbol,
sourceDecimals, sourceDecimals,
sourceIconUrl,
destinationValue, destinationValue,
destinationSymbol, destinationSymbol,
destinationDecimals, destinationDecimals,
destinationIconUrl,
}) { }) {
const t = useContext(I18nContext)
const sourceAmount = toPrecisionWithoutTrailingZeros(calcTokenAmount(sourceValue, sourceDecimals).toString(10), 12) const sourceAmount = toPrecisionWithoutTrailingZeros(calcTokenAmount(sourceValue, sourceDecimals).toString(10), 12)
const destinationAmount = calcTokenAmount(destinationValue, destinationDecimals) const destinationAmount = calcTokenAmount(destinationValue, destinationDecimals)
const amountToDisplay = formatSwapsValueForDisplay(destinationAmount) const amountToDisplay = formatSwapsValueForDisplay(destinationAmount)
const amountDigitLength = amountToDisplay.match(/\d+/gu).join('').length const fontSizeScore = getFontSizeScore(amountToDisplay, destinationSymbol)
const [numberFontSize, lineHeight] = getFontSizesAndLineHeights(amountDigitLength) const [numberFontSize, symbolFontSize] = getFontSizes(fontSizeScore)
const lineHeight = getLineHeight(fontSizeScore)
let ellipsedAmountToDisplay = amountToDisplay let ellipsedAmountToDisplay = amountToDisplay
if (amountDigitLength > 20) { if (fontSizeScore > 20) {
ellipsedAmountToDisplay = `${amountToDisplay.slice(0, 20)}...` ellipsedAmountToDisplay = `${amountToDisplay.slice(0, amountToDisplay.length - (fontSizeScore - 20))}...`
} }
return ( return (
<div className="main-quote-summary"> <div className="main-quote-summary">
<div
className={classnames('main-quote-summary__quote-backdrop', {
'main-quote-summary__quote-backdrop-with-top-tab': isBestQuote,
})}
>
<QuoteBackdrop withTopTab={isBestQuote} />
</div>
<div className="main-quote-summary__best-quote">
{isBestQuote && <SunCheckIcon />}
<span>{isBestQuote && t('swapsBestQuote')}</span>
</div>
<div className="main-quote-summary__details"> <div className="main-quote-summary__details">
<div className="main-quote-summary__quote-details-top"> <div className="main-quote-summary__quote-details-top">
<div className="main-quote-summary__source-row"> <span className="main-quote-summary__quote-small-white">
<span {t('swapsConvertToAbout', [<span className="main-quote-summary__bold" key="main-quote-summary-bold-1">{`${sourceAmount} ${sourceSymbol}`}</span>])}
className="main-quote-summary__source-row-value" </span>
title={formatSwapsValueForDisplay(sourceAmount)}
>
{ formatSwapsValueForDisplay(sourceAmount) }
</span>
<UrlIcon
url={sourceIconUrl}
className="main-quote-summary__icon"
name={sourceSymbol}
fallbackClassName="main-quote-summary__icon-fallback"
/>
<span className="main-quote-summary__source-row-symbol" title={sourceSymbol}>{ sourceSymbol }</span>
</div>
<img
className="main-quote-summary__down-arrow"
src="images/down-arrow-grey.svg"
/>
<div className="main-quote-summary__destination-row">
<UrlIcon
url={destinationIconUrl}
className="main-quote-summary__icon"
name={destinationSymbol}
fallbackClassName="main-quote-summary__icon-fallback"
/>
<span className="main-quote-summary__destination-row-symbol">{ destinationSymbol }</span>
</div>
<div className="main-quote-summary__quote-large"> <div className="main-quote-summary__quote-large">
<Tooltip <Tooltip
interactive interactive
@ -82,6 +99,7 @@ export default function MainQuoteSummary ({
> >
<span className="main-quote-summary__quote-large-number" style={{ fontSize: numberFontSize, lineHeight: `${lineHeight}px` }}>{`${ellipsedAmountToDisplay}`}</span> <span className="main-quote-summary__quote-large-number" style={{ fontSize: numberFontSize, lineHeight: `${lineHeight}px` }}>{`${ellipsedAmountToDisplay}`}</span>
</Tooltip> </Tooltip>
<span className="main-quote-summary__quote-large-symbol" style={{ fontSize: symbolFontSize, lineHeight: `${lineHeight}px` }}>{`${destinationSymbol}`}</span>
</div> </div>
</div> </div>
<div className="main-quote-summary__exchange-rate-container"> <div className="main-quote-summary__exchange-rate-container">
@ -92,9 +110,8 @@ export default function MainQuoteSummary ({
secondaryTokenValue={destinationValue} secondaryTokenValue={destinationValue}
secondaryTokenDecimals={destinationDecimals} secondaryTokenDecimals={destinationDecimals}
secondaryTokenSymbol={destinationSymbol} secondaryTokenSymbol={destinationSymbol}
arrowColor="#037DD6" className="exchange-rate-display--white"
boldSymbols={false} arrowColor="white"
className="main-quote-summary__exchange-rate-display"
/> />
</div> </div>
</div> </div>
@ -103,6 +120,7 @@ export default function MainQuoteSummary ({
} }
MainQuoteSummary.propTypes = { MainQuoteSummary.propTypes = {
isBestQuote: PropTypes.bool,
sourceValue: PropTypes.oneOfType([ sourceValue: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
PropTypes.instanceOf(BigNumber), PropTypes.instanceOf(BigNumber),
@ -115,6 +133,4 @@ MainQuoteSummary.propTypes = {
]).isRequired, ]).isRequired,
destinationDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), destinationDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
destinationSymbol: PropTypes.string.isRequired, destinationSymbol: PropTypes.string.isRequired,
sourceIconUrl: PropTypes.string,
destinationIconUrl: PropTypes.string,
} }

View File

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import { text, number } from '@storybook/addon-knobs/react' import { text, number, boolean } from '@storybook/addon-knobs/react'
import MainQuoteSummary from './main-quote-summary' import MainQuoteSummary from './main-quote-summary'
export default { export default {
@ -8,17 +8,28 @@ export default {
export const BestQuote = () => { export const BestQuote = () => {
return ( return (
<div style={{ width: '360px', height: '224px', border: '1px solid black', padding: '24px' }}> <MainQuoteSummary
<MainQuoteSummary sourceValue={text('sourceValue', '2000000000000000000')}
sourceValue={text('sourceValue', '2000000000000000000')} sourceDecimals={number('sourceDecimals', 18)}
sourceDecimals={number('sourceDecimals', 18)} sourceSymbol={text('sourceSymbol', 'ETH')}
sourceSymbol={text('sourceSymbol', 'ETH')} destinationValue={text('destinationValue', '200000000000000000')}
destinationValue={text('destinationValue', '200000000000000000')} destinationDecimals={number('destinationDecimals', 18)}
destinationDecimals={number('destinationDecimals', 18)} destinationSymbol={text('destinationSymbol', 'ABC')}
destinationSymbol={text('destinationSymbol', 'ABC')} isBestQuote={boolean('isBestQuote', true)}
sourceIconUrl=".storybook/images/metamark.svg" />
destinationIconUrl=".storybook/images/sai.svg" )
/> }
</div>
export const NotBestQuote = () => {
return (
<MainQuoteSummary
sourceValue={text('sourceValue', '2000000000000000000')}
sourceDecimals={number('sourceDecimals', 18)}
sourceSymbol={text('sourceSymbol', 'ETH')}
destinationValue={text('destinationValue', '200000000000000000')}
destinationDecimals={number('destinationDecimals', 18)}
destinationSymbol={text('destinationSymbol', 'ABC')}
isBestQuote={boolean('isBestQuote', false)}
/>
) )
} }

View File

@ -375,7 +375,6 @@ export function quotesToRenderableData (quotes, gasPrice, conversionRate, curren
destinationTokenDecimals: destinationTokenInfo.decimals, destinationTokenDecimals: destinationTokenInfo.decimals,
destinationTokenSymbol: destinationTokenInfo.symbol, destinationTokenSymbol: destinationTokenInfo.symbol,
destinationTokenValue: formatSwapsValueForDisplay(destinationValue), destinationTokenValue: formatSwapsValueForDisplay(destinationValue),
destinationIconUrl: destinationTokenInfo.iconUrl,
isBestQuote: quote.isBestQuote, isBestQuote: quote.isBestQuote,
liquiditySourceKey, liquiditySourceKey,
feeInEth, feeInEth,
@ -387,7 +386,6 @@ export function quotesToRenderableData (quotes, gasPrice, conversionRate, curren
sourceTokenDecimals: sourceTokenInfo.decimals, sourceTokenDecimals: sourceTokenInfo.decimals,
sourceTokenSymbol: sourceTokenInfo.symbol, sourceTokenSymbol: sourceTokenInfo.symbol,
sourceTokenValue: sourceValue, sourceTokenValue: sourceValue,
sourceTokenIconUrl: sourceTokenInfo.iconUrl,
ethValueOfTrade, ethValueOfTrade,
minimumAmountReceived, minimumAmountReceived,
metaMaskFee: fee, metaMaskFee: fee,

View File

@ -44,13 +44,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 46px;
} }
&__view-other-button, &__view-other-button,
&__view-other-button-fade { &__view-other-button-fade {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 16px;
position: absolute; position: absolute;
@include H7; @include H7;
@ -87,12 +87,10 @@
} }
&__insufficient-eth-warning-wrapper { &__insufficient-eth-warning-wrapper {
margin-top: 8px;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: max-content;
max-width: 340px;
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
min-height: 36px; min-height: 36px;
@ -129,6 +127,7 @@
&__fee-card-container { &__fee-card-container {
width: 100%; width: 100%;
margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
@ -140,8 +139,21 @@
} }
} }
&__main-quote-summary-container {
margin-top: 24px;
@media screen and (max-width: 576px) {
margin-top: 0;
}
&--thin {
margin-top: 8px;
}
}
&__metamask-rate { &__metamask-rate {
display: flex; display: flex;
margin-top: 8%;
} }
&__metamask-rate-text { &__metamask-rate-text {

View File

@ -114,6 +114,7 @@ export default function ViewQuote () {
const topQuote = useSelector(getTopQuote) const topQuote = useSelector(getTopQuote)
const usedQuote = selectedQuote || topQuote const usedQuote = selectedQuote || topQuote
const { isBestQuote } = usedQuote
const fetchParamsSourceToken = fetchParams?.sourceToken const fetchParamsSourceToken = fetchParams?.sourceToken
const usedGasLimit = ( const usedGasLimit = (
@ -190,11 +191,9 @@ export default function ViewQuote () {
destinationTokenDecimals, destinationTokenDecimals,
destinationTokenSymbol, destinationTokenSymbol,
destinationTokenValue, destinationTokenValue,
destinationIconUrl,
sourceTokenDecimals, sourceTokenDecimals,
sourceTokenSymbol, sourceTokenSymbol,
sourceTokenValue, sourceTokenValue,
sourceTokenIconUrl,
} = renderableDataForUsedQuote } = renderableDataForUsedQuote
const { feeInFiat, feeInEth } = getRenderableNetworkFeesForQuote( const { feeInFiat, feeInEth } = getRenderableNetworkFeesForQuote(
@ -482,19 +481,24 @@ export default function ViewQuote () {
labelKey="swapNewQuoteIn" labelKey="swapNewQuoteIn"
/> />
</div> </div>
<MainQuoteSummary <div
sourceValue={calcTokenValue(sourceTokenValue, sourceTokenDecimals)} className={classnames('view-quote__main-quote-summary-container', {
sourceDecimals={sourceTokenDecimals} 'view-quote__main-quote-summary-container--thin': showWarning,
sourceSymbol={sourceTokenSymbol} })}
destinationValue={calcTokenValue( >
destinationTokenValue, <MainQuoteSummary
destinationTokenDecimals, sourceValue={calcTokenValue(sourceTokenValue, sourceTokenDecimals)}
)} sourceDecimals={sourceTokenDecimals}
destinationDecimals={destinationTokenDecimals} sourceSymbol={sourceTokenSymbol}
destinationSymbol={destinationTokenSymbol} destinationValue={calcTokenValue(
sourceIconUrl={sourceTokenIconUrl} destinationTokenValue,
destinationIconUrl={destinationIconUrl} destinationTokenDecimals,
/> )}
destinationDecimals={destinationTokenDecimals}
destinationSymbol={destinationTokenSymbol}
isBestQuote={isBestQuote}
/>
</div>
<div <div
className="view-quote__view-other-button-container" className="view-quote__view-other-button-container"
> >