39 lines
871 B
TypeScript
39 lines
871 B
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import Text from "../../../components/Text/Text";
|
|
import HighIcon from "../../../components/Svg/Icons/HighIcon";
|
|
|
|
interface Props {
|
|
cakePriceUsd?: number;
|
|
}
|
|
|
|
const PriceLink = styled.a`
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
svg {
|
|
transition: transform 0.3s;
|
|
}
|
|
:hover {
|
|
svg {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
`;
|
|
|
|
const CakePrice: React.FC<Props> = ({ cakePriceUsd }) => {
|
|
return (
|
|
<PriceLink
|
|
href="https://exchange.pancakeswap.finance/#/swap?outputCurrency=0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82"
|
|
target="_blank"
|
|
>
|
|
<HighIcon width="24px" mr="8px" />
|
|
<Text color="textSubtle" bold>
|
|
{cakePriceUsd ? `$${cakePriceUsd.toFixed(3)}` : "$0"}
|
|
</Text>
|
|
</PriceLink>
|
|
);
|
|
};
|
|
|
|
export default React.memo(CakePrice);
|