120 lines
2.8 KiB
TypeScript
120 lines
2.8 KiB
TypeScript
import React from "react";
|
|
import { NavLink } from "react-router-dom";
|
|
import TokenLogo from "./TokenLogo";
|
|
import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolver";
|
|
import {
|
|
UniswapV3PairMeta,
|
|
UniswapV3TokenMeta,
|
|
} from "../api/address-resolver/UniswapV3Resolver";
|
|
import { ChecksummedAddress } from "../types";
|
|
|
|
type UniswapV3PoolNameProps = {
|
|
address: string;
|
|
token0: UniswapV3TokenMeta;
|
|
token1: UniswapV3TokenMeta;
|
|
fee: number;
|
|
linkable: boolean;
|
|
dontOverrideColors?: boolean;
|
|
};
|
|
|
|
const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
|
|
address,
|
|
token0,
|
|
token1,
|
|
fee,
|
|
linkable,
|
|
dontOverrideColors,
|
|
}) => {
|
|
if (linkable) {
|
|
return (
|
|
<NavLink
|
|
className={`flex items-baseline space-x-1 font-sans ${
|
|
dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
|
|
} truncate`}
|
|
to={`/address/${address}`}
|
|
title={`Uniswap V3 LP (${token0.symbol}/${token1.symbol}/${
|
|
fee / 10000
|
|
}%): ${address}`}
|
|
>
|
|
<span>Uniswap V3 LP:</span>
|
|
<Content
|
|
linkable={true}
|
|
address={token0.address}
|
|
name={token0.name}
|
|
symbol={token0.symbol}
|
|
/>
|
|
<span>/</span>
|
|
<Content
|
|
linkable={true}
|
|
address={token1.address}
|
|
name={token1.name}
|
|
symbol={token1.symbol}
|
|
/>
|
|
<span>/ {fee / 10000}%</span>
|
|
</NavLink>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
|
|
title={`Uniswap V3 LP (${token0.symbol}/${token1.symbol}/${
|
|
fee / 10000
|
|
}%): ${address}`}
|
|
>
|
|
<span>Uniswap V3 LP:</span>
|
|
<Content
|
|
linkable={false}
|
|
address={token0.address}
|
|
name={token0.name}
|
|
symbol={token0.symbol}
|
|
/>
|
|
<span>/</span>
|
|
<Content
|
|
linkable={false}
|
|
address={token1.address}
|
|
name={token1.name}
|
|
symbol={token1.symbol}
|
|
/>
|
|
<span>/ {fee / 10000}%</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
type ContentProps = {
|
|
linkable: boolean;
|
|
address: ChecksummedAddress;
|
|
name: string;
|
|
symbol: string;
|
|
};
|
|
|
|
const Content: React.FC<ContentProps> = ({
|
|
address,
|
|
name,
|
|
symbol,
|
|
linkable,
|
|
}) => (
|
|
<>
|
|
<div
|
|
className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
|
|
>
|
|
<TokenLogo address={address} name={name} />
|
|
</div>
|
|
<span>{symbol}</span>
|
|
</>
|
|
);
|
|
|
|
export const uniswapV3PairRenderer: ResolvedAddressRenderer<UniswapV3PairMeta> =
|
|
(address, tokenMeta, linkable, dontOverrideColors) => (
|
|
<UniswapV3PairName
|
|
address={address}
|
|
token0={tokenMeta.token0}
|
|
token1={tokenMeta.token1}
|
|
fee={tokenMeta.fee}
|
|
linkable={linkable}
|
|
dontOverrideColors={dontOverrideColors}
|
|
/>
|
|
);
|
|
|
|
export default UniswapV3PairName;
|