feat(uikit): Token image

packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { renderWithTheme, setupMockIntersectionObserver } from "../../testHelpers";
+import TokenImage from "../../components/Image/TokenImage";
+
+it("renders correctly", () => {
+  setupMockIntersectionObserver();
+  const { asFragment } = renderWithTheme(
+    <TokenImage tokenAddress="0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82" height={48} width={48} />
+  );
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      .c0 {
+      position: relative;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      height: 48px;
+      max-width: 48px;
+      max-height: 48px;
+      width: 100%;
+      padding-top: 0%;
+    }
+
+    .c1 {
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      background-origin: border-box;
+      border: 2px solid rgba(0,0,0,0.25);
+      border-radius: 50%;
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      height: 48px;
+      width: 48px;
+      z-index: 5;
+    }
+
+    <div
+        class="c0 c1"
+        height="48"
+        width="48"
+      />
+    </DocumentFragment>
+  `);
+});

packages/pancake-uikit/src/components/Image/TokenImage.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+import BackgroundImage from "./BackgroundImage";
+import { TokenImageProps } from "./types";
+
+const StyledTokenImage = styled(BackgroundImage)`
+  align-items: center;
+  background-origin: border-box;
+  border: 2px solid rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+  display: inline-flex;
+  height: ${({ height }) => `${height}px`};
+  width: ${({ width }) => `${width}px`};
+  z-index: 5;
+`;
+
+const TokenImage: React.FC<TokenImageProps> = ({
+  tokenAddress,
+  baseUrl = "https://pancakeswap.finance/images/tokens",
+  imageFormat = "png",
+  ...props
+}) => {
+  return <StyledTokenImage src={`${baseUrl}/${tokenAddress}.${imageFormat}`} {...props} />;
+};
+
+export default TokenImage;

packages/pancake-uikit/src/components/Image/TokenPairImage.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import styled from "styled-components";
+import Flex from "../Box/Flex";
+import TokenImage from "./TokenImage";
+import { TokenPairImageProps } from "./types";
+
+const StyledSecondaryImage = styled(TokenImage)`
+  bottom: -4px;
+  position: absolute;
+  right: -4px;
+  z-index: 6;
+`;
+
+const TokenPairImage: React.FC<TokenPairImageProps> = ({
+  primaryTokenAddress,
+  secondaryTokenAddress,
+  width,
+  height,
+  ...props
+}) => {
+  const secondaryImageSize = Math.floor(width / 2);
+
+  return (
+    <Flex alignItems="center" position="relative" display="inline-flex" width={width} height={height}>
+      <TokenImage tokenAddress={primaryTokenAddress} width={width} height={height} {...props} />
+      <StyledSecondaryImage
+        tokenAddress={secondaryTokenAddress}
+        width={secondaryImageSize}
+        height={secondaryImageSize}
+      />
+    </Flex>
+  );
+};
+
+export default TokenPairImage;

packages/pancake-uikit/src/components/Image/index.stories.tsx

@@ -1,8 +1,13 @@
 import React from "react";
-import times from "lodash/times";
+import { random, times } from "lodash";
+import styled from "styled-components";
 import Flex from "../Box/Flex";
+import Box from "../Box/Box";
 import BackgroundImage from "./BackgroundImage";
 import Img from "./Image";
+import TokenImage from "./TokenImage";
+import TokenPairImage from "./TokenPairImage";
+import tokenList from "./tokens";
 
 export default {
   title: "Components/Image",
@@ -78,3 +83,43 @@ export const LazyBackgrounds: React.FC = () => {
     </Flex>
   );
 };
+
+const StyledBox = styled(Box)`
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+`;
+
+export const TokenImages: React.FC = () => {
+  const tokens = Object.values(tokenList).filter((token) => !!token?.address);
+  return (
+    <Flex flexWrap="wrap">
+      {tokens.map((token) => {
+        return (
+          <StyledBox key={token.symbol} p="16px">
+            <TokenImage tokenAddress={token.address[56]} height={64} width={64} />
+          </StyledBox>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export const TokenPairImages: React.FC = () => {
+  const tokens = Object.values(tokenList).filter((token) => !!token?.address);
+  return (
+    <Flex flexWrap="wrap">
+      {tokens.map((token) => {
+        const randomTokenIndex = random(0, tokens.length - 1);
+        return (
+          <StyledBox key={token.symbol} p="16px">
+            <TokenPairImage
+              primaryTokenAddress={token.address[56]}
+              secondaryTokenAddress={tokens[randomTokenIndex].address[56]}
+              height={64}
+              width={64}
+            />
+          </StyledBox>
+        );
+      })}
+    </Flex>
+  );
+};

packages/pancake-uikit/src/components/Image/index.ts

@@ -1,2 +1,4 @@
 export { default as BackgroundImage } from "./BackgroundImage";
 export { default as Image } from "./Image";
+export { default as TokenImage } from "./TokenImage";
+export { default as TokenPairImage } from "./TokenPairImage";