Add etherscan links for the two tokens in the pool on the NFT page (#1593)

* Add etherscan links for the two tokens in the pool on the NFT page

* moving linked tokens to a function

added arrow to show that it's a link
added check for eth

* clean up impl

Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>
This commit is contained in:
jab416171 2021-05-18 11:34:20 -06:00 committed by GitHub
parent 980eb8a518
commit ecb7132843
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -184,6 +184,28 @@ function CurrentPriceCard({
) )
} }
function LinkedCurrency({ chainId, currency }: { chainId?: number; currency?: Currency }) {
const address = (currency as Token)?.address
if (typeof chainId === 'number' && address) {
return (
<ExternalLink href={getExplorerLink(chainId, address, ExplorerDataType.ADDRESS)}>
<RowFixed>
<CurrencyLogo currency={currency} size={'20px'} style={{ marginRight: '0.5rem' }} />
<TYPE.main>{currency?.symbol} </TYPE.main>
</RowFixed>
</ExternalLink>
)
}
return (
<RowFixed>
<CurrencyLogo currency={currency} size={'20px'} style={{ marginRight: '0.5rem' }} />
<TYPE.main>{currency?.symbol}</TYPE.main>
</RowFixed>
)
}
function getRatio( function getRatio(
lower: Price<Currency, Currency>, lower: Price<Currency, Currency>,
current: Price<Currency, Currency>, current: Price<Currency, Currency>,
@ -579,10 +601,7 @@ export function PositionPage({
<LightCard padding="12px 16px"> <LightCard padding="12px 16px">
<AutoColumn gap="md"> <AutoColumn gap="md">
<RowBetween> <RowBetween>
<RowFixed> <LinkedCurrency chainId={chainId} currency={currencyQuote} />
<CurrencyLogo currency={currencyQuote} size={'20px'} style={{ marginRight: '0.5rem' }} />
<TYPE.main>{currencyQuote?.symbol}</TYPE.main>
</RowFixed>
<RowFixed> <RowFixed>
<TYPE.main> <TYPE.main>
{inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)} {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
@ -595,10 +614,7 @@ export function PositionPage({
</RowFixed> </RowFixed>
</RowBetween> </RowBetween>
<RowBetween> <RowBetween>
<RowFixed> <LinkedCurrency chainId={chainId} currency={currencyBase} />
<CurrencyLogo currency={currencyBase} size={'20px'} style={{ marginRight: '0.5rem' }} />
<TYPE.main>{currencyBase?.symbol}</TYPE.main>
</RowFixed>
<RowFixed> <RowFixed>
<TYPE.main> <TYPE.main>
{inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)} {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}