From c5a4d1e7f90eddcafb6a6b3c70088f5b2ac58a63 Mon Sep 17 00:00:00 2001 From: hachiojidev Date: Tue, 15 Jun 2021 14:27:52 +0900 Subject: [PATCH 1/9] refactor(uikit/image): Fix typings --- .../src/components/Image/Image.tsx | 31 +++++++++++-------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/pancake-uikit/src/components/Image/Image.tsx b/packages/pancake-uikit/src/components/Image/Image.tsx index a3a615eba..1b0e3e9f9 100644 --- a/packages/pancake-uikit/src/components/Image/Image.tsx +++ b/packages/pancake-uikit/src/components/Image/Image.tsx @@ -22,24 +22,29 @@ const Placeholder = styled.div` `; const Image: React.FC = ({ src, alt, ...otherProps }) => { - const imgRef = useRef(null); + const imgRef = useRef(null); const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { - const img = imgRef.current as unknown as HTMLImageElement; - const observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - const { isIntersecting } = entry; - if (isIntersecting) { - setIsLoaded(true); - observer.disconnect(); - } - }); - }, observerOptions); - observer.observe(img); + let observer: IntersectionObserver; + + if (imgRef.current) { + observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + const { isIntersecting } = entry; + if (isIntersecting) { + setIsLoaded(true); + observer.disconnect(); + } + }); + }, observerOptions); + observer.observe(imgRef.current); + } return () => { - observer.disconnect(); + if (observer) { + observer.disconnect(); + } }; }, [src]); From 64677b3682fb96da1a2c44c289e45f867b1a44e6 Mon Sep 17 00:00:00 2001 From: hachiojidev Date: Tue, 15 Jun 2021 17:47:30 +0900 Subject: [PATCH 2/9] feat(uikit): Token image --- .../__tests__/components/tokenimage.test.tsx | 48 + .../src/components/Image/TokenImage.tsx | 26 + .../src/components/Image/TokenPairImage.tsx | 35 + .../src/components/Image/index.stories.tsx | 47 +- .../src/components/Image/index.ts | 2 + .../src/components/Image/tokens.ts | 1546 +++++++++++++++++ .../src/components/Image/types.ts | 14 + packages/pancake-uikit/src/testHelpers.tsx | 39 + 8 files changed, 1756 insertions(+), 1 deletion(-) create mode 100644 packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx create mode 100644 packages/pancake-uikit/src/components/Image/TokenImage.tsx create mode 100644 packages/pancake-uikit/src/components/Image/TokenPairImage.tsx create mode 100644 packages/pancake-uikit/src/components/Image/tokens.ts diff --git a/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx b/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx new file mode 100644 index 000000000..c076fea1d --- /dev/null +++ b/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( + + ); + expect(asFragment()).toMatchInlineSnapshot(` + + .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; + } + +
+ + `); +}); diff --git a/packages/pancake-uikit/src/components/Image/TokenImage.tsx b/packages/pancake-uikit/src/components/Image/TokenImage.tsx new file mode 100644 index 000000000..e13f5f52c --- /dev/null +++ b/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 = ({ + tokenAddress, + baseUrl = "https://pancakeswap.finance/images/tokens", + imageFormat = "png", + ...props +}) => { + return ; +}; + +export default TokenImage; diff --git a/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx b/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx new file mode 100644 index 000000000..2c458e7de --- /dev/null +++ b/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 = ({ + primaryTokenAddress, + secondaryTokenAddress, + width, + height, + ...props +}) => { + const secondaryImageSize = Math.floor(width / 2); + + return ( + + + + + ); +}; + +export default TokenPairImage; diff --git a/packages/pancake-uikit/src/components/Image/index.stories.tsx b/packages/pancake-uikit/src/components/Image/index.stories.tsx index 4fb342e79..d7f40a452 100644 --- a/packages/pancake-uikit/src/components/Image/index.stories.tsx +++ b/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 = () => { ); }; + +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 ( + + {tokens.map((token) => { + return ( + + + + ); + })} + + ); +}; + +export const TokenPairImages: React.FC = () => { + const tokens = Object.values(tokenList).filter((token) => !!token?.address); + return ( + + {tokens.map((token) => { + const randomTokenIndex = random(0, tokens.length - 1); + return ( + + + + ); + })} + + ); +}; diff --git a/packages/pancake-uikit/src/components/Image/index.ts b/packages/pancake-uikit/src/components/Image/index.ts index 5d02b8e79..9e04266aa 100644 --- a/packages/pancake-uikit/src/components/Image/index.ts +++ b/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"; diff --git a/packages/pancake-uikit/src/components/Image/tokens.ts b/packages/pancake-uikit/src/components/Image/tokens.ts new file mode 100644 index 000000000..4f65bfbbb --- /dev/null +++ b/packages/pancake-uikit/src/components/Image/tokens.ts @@ -0,0 +1,1546 @@ +/** + * @see https://github.com/pancakeswap/pancake-frontend/blob/develop/src/config/constants/tokens.ts + */ +const tokens = { + cake: { + symbol: "CAKE", + address: { + 56: "0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82", + 97: "0xa35062141Fa33BCA92Ce69FeD37D0E8908868AAe", + }, + decimals: 18, + projectLink: "https://pancakeswap.finance/", + }, + txl: { + symbol: "TXL", + address: { + 56: "0x1FFD0b47127fdd4097E54521C9E2c7f0D66AafC5", + 97: "", + }, + decimals: 18, + projectLink: "https://tixl.org/", + }, + cos: { + symbol: "COS", + address: { + 56: "0x96Dd399F9c3AFda1F194182F71600F1B65946501", + 97: "", + }, + decimals: 18, + projectLink: "https://www.contentos.io/", + }, + bunny: { + symbol: "BUNNY", + address: { + 56: "0xC9849E6fdB743d08fAeE3E34dd2D1bc69EA11a51", + 97: "", + }, + decimals: 18, + projectLink: "https://pancakebunny.finance/", + }, + alice: { + symbol: "ALICE", + address: { + 56: "0xAC51066d7bEC65Dc4589368da368b212745d63E8", + 97: "", + }, + decimals: 6, + projectLink: "https://www.myneighboralice.com/", + }, + for: { + symbol: "FOR", + address: { + 56: "0x658A109C5900BC6d2357c87549B651670E5b0539", + 97: "", + }, + decimals: 18, + projectLink: "https://www.for.tube/home", + }, + bux: { + symbol: "BUX", + address: { + 56: "0x211FfbE424b90e25a15531ca322adF1559779E45", + 97: "", + }, + decimals: 18, + projectLink: "https://getbux.com/bux-crypto/", + }, + nuls: { + symbol: "NULS", + address: { + 56: "0x8CD6e29d3686d24d3C2018CEe54621eA0f89313B", + 97: "", + }, + decimals: 8, + projectLink: "https://www.nuls.io/", + }, + belt: { + symbol: "BELT", + address: { + 56: "0xE0e514c71282b6f4e823703a39374Cf58dc3eA4f", + 97: "", + }, + decimals: 18, + projectLink: "https://beta.belt.fi/", + }, + ramp: { + symbol: "RAMP", + address: { + 56: "0x8519EA49c997f50cefFa444d240fB655e89248Aa", + 97: "", + }, + decimals: 18, + projectLink: "https://rampdefi.com/", + }, + bfi: { + symbol: "BFI", + address: { + 56: "0x81859801b01764D4f0Fa5E64729f5a6C3b91435b", + 97: "", + }, + decimals: 18, + projectLink: "https://bearn.fi/", + }, + dexe: { + symbol: "DEXE", + address: { + 56: "0x039cB485212f996A9DBb85A9a75d898F94d38dA6", + 97: "", + }, + decimals: 18, + projectLink: "https://dexe.network/", + }, + bel: { + symbol: "BEL", + address: { + 56: "0x8443f091997f06a61670B735ED92734F5628692F", + 97: "", + }, + decimals: 18, + projectLink: "https://bella.fi/", + }, + tpt: { + symbol: "TPT", + address: { + 56: "0xECa41281c24451168a37211F0bc2b8645AF45092", + 97: "", + }, + decimals: 4, + projectLink: "https://www.tokenpocket.pro/", + }, + watch: { + symbol: "WATCH", + address: { + 56: "0x7A9f28EB62C791422Aa23CeAE1dA9C847cBeC9b0", + 97: "", + }, + decimals: 18, + projectLink: "https://yieldwatch.net/", + }, + xmark: { + symbol: "xMARK", + address: { + 56: "0x26A5dFab467d4f58fB266648CAe769503CEC9580", + 97: "", + }, + decimals: 9, + projectLink: "https://benchmarkprotocol.finance/", + }, + bmxx: { + symbol: "bMXX", + address: { + 56: "0x4131b87F74415190425ccD873048C708F8005823", + 97: "", + }, + decimals: 18, + projectLink: "https://multiplier.finance/", + }, + iotx: { + symbol: "IOTX", + address: { + 56: "0x9678E42ceBEb63F23197D726B29b1CB20d0064E5", + 97: "", + }, + decimals: 18, + projectLink: "https://iotex.io/", + }, + bor: { + symbol: "BOR", + address: { + 56: "0x92D7756c60dcfD4c689290E8A9F4d263b3b32241", + 97: "", + }, + decimals: 18, + projectLink: "https://www.boringdao.com/", + }, + bopen: { + symbol: "bOPEN", + address: { + 56: "0xF35262a9d427F96d2437379eF090db986eaE5d42", + 97: "", + }, + decimals: 18, + projectLink: "https://opendao.io/", + }, + dodo: { + symbol: "DODO", + address: { + 56: "0x67ee3Cb086F8a16f34beE3ca72FAD36F7Db929e2", + 97: "", + }, + decimals: 18, + projectLink: "https://dodoex.io/", + }, + swingby: { + symbol: "SWINGBY", + address: { + 56: "0x71DE20e0C4616E7fcBfDD3f875d568492cBE4739", + 97: "", + }, + decimals: 18, + projectLink: "https://swingby.network/", + }, + bry: { + symbol: "BRY", + address: { + 56: "0xf859Bf77cBe8699013d6Dbc7C2b926Aaf307F830", + 97: "", + }, + decimals: 18, + projectLink: "https://berrydata.co/", + }, + zee: { + symbol: "ZEE", + address: { + 56: "0x44754455564474A89358B2C2265883DF993b12F0", + 97: "", + }, + decimals: 18, + projectLink: "https://zeroswap.io/", + }, + swgb: { + symbol: "SWGb", + address: { + 56: "0xe40255c5d7fa7ceec5120408c78c787cecb4cfdb", + 97: "", + }, + decimals: 18, + projectLink: "https://swirgepay.com/", + }, + swg: { + symbol: "SWG", + address: { + 56: "0xe792f64C582698b8572AAF765bDC426AC3aEfb6B", + 97: "", + }, + decimals: 18, + projectLink: "https://swirgepay.com/", + }, + sfp: { + symbol: "SFP", + address: { + 56: "0xD41FDb03Ba84762dD66a0af1a6C8540FF1ba5dfb", + 97: "", + }, + decimals: 18, + projectLink: "https://www.safepal.io/", + }, + lina: { + symbol: "LINA", + address: { + 56: "0x762539b45A1dCcE3D36d080F74d1AED37844b878", + 97: "", + }, + decimals: 18, + projectLink: "https://linear.finance/", + }, + lit: { + symbol: "LIT", + address: { + 56: "0xb59490aB09A0f526Cc7305822aC65f2Ab12f9723", + 97: "", + }, + decimals: 18, + projectLink: "https://www.litentry.com/", + }, + hget: { + symbol: "HGET", + address: { + 56: "0xC7d8D35EBA58a0935ff2D5a33Df105DD9f071731", + 97: "", + }, + decimals: 6, + projectLink: "https://www.hedget.com/", + }, + bdo: { + symbol: "BDO", + address: { + 56: "0x190b589cf9Fb8DDEabBFeae36a813FFb2A702454", + 97: "", + }, + decimals: 18, + projectLink: "https://bdollar.fi/", + }, + egld: { + symbol: "EGLD", + address: { + 56: "0xbF7c81FFF98BbE61B40Ed186e4AfD6DDd01337fe", + 97: "", + }, + decimals: 18, + projectLink: "https://elrond.com/", + }, + ust: { + symbol: "UST", + address: { + 56: "0x23396cf899ca06c4472205fc903bdb4de249d6fc", + 97: "", + }, + decimals: 18, + projectLink: "https://mirror.finance/", + }, + wsote: { + symbol: "wSOTE", + address: { + 56: "0x541E619858737031A1244A5d0Cd47E5ef480342c", + 97: "", + }, + decimals: 18, + projectLink: "https://soteria.finance/#/", + }, + front: { + symbol: "FRONT", + address: { + 56: "0x928e55daB735aa8260AF3cEDadA18B5f70C72f1b", + 97: "", + }, + decimals: 18, + projectLink: "https://frontier.xyz/", + }, + helmet: { + symbol: "Helmet", + address: { + 56: "0x948d2a81086A075b3130BAc19e4c6DEe1D2E3fE8", + 97: "", + }, + decimals: 18, + projectLink: "https://www.helmet.insure/", + }, + btcst: { + symbol: "BTCST", + address: { + 56: "0x78650B139471520656b9E7aA7A5e9276814a38e9", + 97: "", + }, + decimals: 17, + projectLink: "https://www.1-b.tc/", + }, + bscx: { + symbol: "BSCX", + address: { + 56: "0x5Ac52EE5b2a633895292Ff6d8A89bB9190451587", + 97: "", + }, + decimals: 18, + projectLink: "https://bscex.org/", + }, + ten: { + symbol: "TEN", + address: { + 56: "0xdFF8cb622790b7F92686c722b02CaB55592f152C", + 97: "", + }, + decimals: 18, + projectLink: "https://www.tenet.farm/", + }, + balbt: { + symbol: "bALBT", + address: { + 56: "0x72fAa679E1008Ad8382959FF48E392042A8b06f7", + 97: "", + }, + decimals: 18, + projectLink: "https://allianceblock.io/", + }, + asr: { + symbol: "ASR", + address: { + 56: "0x80D5f92C2c8C682070C95495313dDB680B267320", + 97: "", + }, + decimals: 2, + projectLink: "https://www.chiliz.com", + }, + atm: { + symbol: "ATM", + address: { + 56: "0x25E9d05365c867E59C1904E7463Af9F312296f9E", + 97: "", + }, + decimals: 2, + projectLink: "https://www.chiliz.com", + }, + og: { + symbol: "OG", + address: { + 56: "0xf05E45aD22150677a017Fbd94b84fBB63dc9b44c", + 97: "", + }, + decimals: 2, + projectLink: "https://www.chiliz.com", + }, + reef: { + symbol: "REEF", + address: { + 56: "0xF21768cCBC73Ea5B6fd3C687208a7c2def2d966e", + 97: "", + }, + decimals: 18, + projectLink: "https://reef.finance/", + }, + ditto: { + symbol: "DITTO", + address: { + 56: "0x233d91A0713155003fc4DcE0AFa871b508B3B715", + 97: "", + }, + decimals: 9, + projectLink: "https://ditto.money/", + }, + juv: { + symbol: "JUV", + address: { + 56: "0xC40C9A843E1c6D01b7578284a9028854f6683b1B", + 97: "", + }, + decimals: 2, + projectLink: "https://www.chiliz.com", + }, + psg: { + symbol: "PSG", + address: { + 56: "0xBc5609612b7C44BEf426De600B5fd1379DB2EcF1", + 97: "", + }, + decimals: 2, + projectLink: "https://www.chiliz.com", + }, + vai: { + symbol: "VAI", + address: { + 56: "0x4BD17003473389A42DAF6a0a729f6Fdb328BbBd7", + 97: "", + }, + decimals: 18, + projectLink: "https://venus.io/", + }, + wbnb: { + symbol: "wBNB", + address: { + 56: "0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c", + 97: "0xae13d989dac2f0debff460ac112a837c89baa7cd", + }, + decimals: 18, + projectLink: "https://pancakeswap.finance/", + }, + blink: { + symbol: "BLINK", + address: { + 56: "0x63870A18B6e42b01Ef1Ad8A2302ef50B7132054F", + 97: "", + }, + decimals: 6, + projectLink: "https://blink.wink.org", + }, + unfi: { + symbol: "UNFI", + address: { + 56: "0x728C5baC3C3e370E372Fc4671f9ef6916b814d8B", + 97: "", + }, + decimals: 18, + projectLink: "https://unifiprotocol.com", + }, + twt: { + symbol: "TWT", + address: { + 56: "0x4B0F1812e5Df2A09796481Ff14017e6005508003", + 97: "", + }, + decimals: 18, + projectLink: "https://trustwallet.com/", + }, + hard: { + symbol: "HARD", + address: { + 56: "0xf79037F6f6bE66832DE4E7516be52826BC3cBcc4", + 97: "", + }, + decimals: 6, + projectLink: "https://hard.kava.io", + }, + broobee: { + symbol: "bROOBEE", + address: { + 56: "0xE64F5Cb844946C1F102Bd25bBD87a5aB4aE89Fbe", + 97: "", + }, + decimals: 18, + projectLink: "https://roobee.io/", + }, + stax: { + symbol: "STAX", + address: { + 56: "0x0Da6Ed8B13214Ff28e9Ca979Dd37439e8a88F6c4", + 97: "", + }, + decimals: 18, + projectLink: "http://stablexswap.com/", + }, + nar: { + symbol: "NAR", + address: { + 56: "0xA1303E6199b319a891b79685F0537D289af1FC83", + 97: "", + }, + decimals: 18, + projectLink: "https://narwhalswap.org/", + }, + nya: { + symbol: "NYA", + address: { + 56: "0xbFa0841F7a90c4CE6643f651756EE340991F99D5", + 97: "", + }, + decimals: 18, + projectLink: "https://nyanswop.org/", + }, + ctk: { + symbol: "CTK", + address: { + 56: "0xA8c2B8eec3d368C0253ad3dae65a5F2BBB89c929", + 97: "", + }, + decimals: 6, + projectLink: "https://www.certik.foundation/", + }, + inj: { + symbol: "INJ", + address: { + 56: "0xa2B726B1145A4773F68593CF171187d8EBe4d495", + 97: "", + }, + decimals: 18, + projectLink: "https://injectiveprotocol.com/", + }, + sxp: { + symbol: "SXP", + address: { + 56: "0x47BEAd2563dCBf3bF2c9407fEa4dC236fAbA485A", + 97: "", + }, + decimals: 18, + projectLink: "https://swipe.io/", + }, + alpha: { + symbol: "ALPHA", + address: { + 56: "0xa1faa113cbE53436Df28FF0aEe54275c13B40975", + 97: "", + }, + decimals: 18, + projectLink: "https://alphafinance.io/", + }, + xvs: { + symbol: "XVS", + address: { + 56: "0xcF6BB5389c92Bdda8a3747Ddb454cB7a64626C63", + 97: "", + }, + decimals: 18, + projectLink: "https://venus.io/", + }, + sushi: { + symbol: "SUSHI", + address: { + 56: "0x947950BcC74888a40Ffa2593C5798F11Fc9124C4", + 97: "", + }, + decimals: 18, + projectLink: "https://sushi.com/", + }, + comp: { + symbol: "COMP", + address: { + 56: "0x52CE071Bd9b1C4B00A0b92D298c512478CaD67e8", + 97: "", + }, + decimals: 18, + projectLink: "https://compound.finance/", + }, + syrup: { + symbol: "SYRUP", + address: { + 56: "0x009cF7bC57584b7998236eff51b98A168DceA9B0", + 97: "0xfE1e507CeB712BDe086f3579d2c03248b2dB77f9", + }, + decimals: 18, + projectLink: "https://pancakeswap.finance/", + }, + bifi: { + symbol: "BIFI", + address: { + 56: "0xCa3F508B8e4Dd382eE878A314789373D80A5190A", + 97: "", + }, + decimals: 18, + projectLink: "https://beefy.finance/", + }, + dusk: { + symbol: "DUSK", + address: { + 56: "0xB2BD0749DBE21f623d9BABa856D3B0f0e1BFEc9C", + 97: "", + }, + decimals: 18, + projectLink: "https://dusk.network/", + }, + busd: { + symbol: "BUSD", + address: { + 56: "0xe9e7CEA3DedcA5984780Bafc599bD69ADd087D56", + 97: "", + }, + decimals: 18, + projectLink: "https://www.paxos.com/busd/", + }, + eth: { + symbol: "ETH", + address: { + 56: "0x2170Ed0880ac9A755fd29B2688956BD959F933F8", + 97: "", + }, + decimals: 18, + projectLink: "https://ethereum.org/en/", + }, + beth: { + symbol: "BETH", + address: { + 56: "0x250632378E573c6Be1AC2f97Fcdf00515d0Aa91B", + 97: "", + }, + decimals: 18, + projectLink: "https://ethereum.org/en/eth2/beacon-chain/", + }, + mamzn: { + symbol: "mAMZN", + address: { + 56: "0x3947B992DC0147D2D89dF0392213781b04B25075", + 97: "", + }, + decimals: 18, + projectLink: "https://mirror.finance/", + }, + mgoogl: { + symbol: "mGOOGL", + address: { + 56: "0x62D71B23bF15218C7d2D7E48DBbD9e9c650B173f", + 97: "", + }, + decimals: 18, + projectLink: "https://mirror.finance/", + }, + mnflx: { + symbol: "mNFLX", + address: { + 56: "0xa04F060077D90Fe2647B61e4dA4aD1F97d6649dc", + 97: "", + }, + decimals: 18, + projectLink: "https://mirror.finance/", + }, + mtsla: { + symbol: "mTSLA", + address: { + 56: "0xF215A127A196e3988C09d052e16BcFD365Cd7AA3", + 97: "", + }, + decimals: 18, + projectLink: "https://mirror.finance/", + }, + ltc: { + symbol: "LTC", + address: { + 56: "0x4338665CBB7B2485A8855A139b75D5e34AB0DB94", + 97: "", + }, + decimals: 18, + projectLink: "https://litecoin.org/", + }, + usdc: { + symbol: "USDC", + address: { + 56: "0x8AC76a51cc950d9822D68b83fE1Ad97B32Cd580d", + 97: "", + }, + decimals: 18, + projectLink: "https://www.centre.io/usdc", + }, + dai: { + symbol: "DAI", + address: { + 56: "0x1AF3F329e8BE154074D8769D1FFa4eE058B1DBc3", + 97: "", + }, + decimals: 18, + projectLink: "http://www.makerdao.com/", + }, + ada: { + symbol: "ADA", + address: { + 56: "0x3EE2200Efb3400fAbB9AacF31297cBdD1d435D47", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://www.cardano.org/", + }, + band: { + symbol: "BAND", + address: { + 56: "0xAD6cAEb32CD2c308980a548bD0Bc5AA4306c6c18", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://bandprotocol.com/", + }, + dot: { + symbol: "DOT", + address: { + 56: "0x7083609fCE4d1d8Dc0C979AAb8c869Ea2C873402", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://polkadot.network/", + }, + eos: { + symbol: "EOS", + address: { + 56: "0x56b6fB708fC5732DEC1Afc8D8556423A2EDcCbD6", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://eos.io/", + }, + link: { + symbol: "LINK", + address: { + 56: "0xF8A0BF9cF54Bb92F17374d9e9A321E6a111a51bD", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://chain.link/", + }, + usdt: { + symbol: "USDT", + address: { + 56: "0x55d398326f99059fF775485246999027B3197955", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://tether.to/", + }, + btcb: { + symbol: "BTCB", + address: { + 56: "0x7130d2A12B9BCbFAe4f2634d864A1Ee1Ce3Ead9c", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://bitcoin.org/", + }, + xrp: { + symbol: "XRP", + address: { + 56: "0x1D2F0da169ceB9fC7B3144628dB156f3F6c60dBE", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://ripple.com/xrp/", + }, + atom: { + symbol: "ATOM", + address: { + 56: "0x0Eb3a705fc54725037CC9e008bDede697f62F335", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://cosmos.network/", + }, + yfii: { + symbol: "YFII", + address: { + 56: "0x7F70642d88cf1C4a3a7abb072B53B929b653edA5", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://dfi.money/#/", + }, + xtz: { + symbol: "XTZ", + address: { + 56: "0x16939ef78684453bfDFb47825F8a5F714f12623a", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://www.tezos.com/", + }, + bch: { + symbol: "BCH", + address: { + 56: "0x8fF795a6F4D97E7887C79beA79aba5cc76444aDf", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "http://bch.info/", + }, + yfi: { + symbol: "YFI", + address: { + 56: "0x88f1A5ae2A3BF98AEAF342D26B30a79438c9142e", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://yearn.finance/", + }, + uni: { + symbol: "UNI", + address: { + 56: "0xBf5140A22578168FD562DCcF235E5D43A02ce9B1", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://uniswap.org/", + }, + fil: { + symbol: "FIL", + address: { + 56: "0x0D8Ce2A99Bb6e3B7Db580eD848240e4a0F9aE153", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://filecoin.io/", + }, + bake: { + symbol: "BAKE", + address: { + 56: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + 97: "", + }, + decimals: 18, + projectLink: "https://www.bakeryswap.org/", + }, + burger: { + symbol: "BURGER", + address: { + 56: "0xAe9269f27437f0fcBC232d39Ec814844a51d6b8f", + 97: "0xE02dF9e3e622DeBdD69fb838bB799E3F168902c5", + }, + decimals: 18, + projectLink: "https://burgerswap.org/", + }, + bdigg: { + symbol: "bDIGG", + address: { + 56: "0x5986D5c77c65e5801a5cAa4fAE80089f870A71dA", + 97: "", + }, + decimals: 18, + projectLink: "https://badger.finance/", + }, + bbadger: { + symbol: "bBadger", + address: { + 56: "0x1F7216fdB338247512Ec99715587bb97BBf96eae", + 97: "", + }, + decimals: 18, + projectLink: "https://badger.finance/", + }, + trade: { + symbol: "TRADE", + address: { + 56: "0x7af173F350D916358AF3e218Bdf2178494Beb748", + 97: "", + }, + decimals: 18, + projectLink: "https://unitrade.app/", + }, + pnt: { + symbol: "PNT", + address: { + 56: "0xdaacB0Ab6Fb34d24E8a67BfA14BF4D95D4C7aF92", + 97: "", + }, + decimals: 18, + projectLink: "https://ptokens.io/", + }, + mir: { + symbol: "MIR", + address: { + 56: "0x5B6DcF557E2aBE2323c48445E8CC948910d8c2c9", + 97: "", + }, + decimals: 18, + projectLink: "https://mirror.finance/", + }, + pbtc: { + symbol: "pBTC", + address: { + 56: "0xeD28A457A5A76596ac48d87C0f577020F6Ea1c4C", + 97: "", + }, + decimals: 18, + projectLink: "https://ptokens.io/", + }, + lto: { + symbol: "LTO", + address: { + 56: "0x857B222Fc79e1cBBf8Ca5f78CB133d1b7CF34BBd", + 97: "", + }, + decimals: 18, + projectLink: "https://ltonetwork.com/", + }, + pcws: { + symbol: "pCWS", + address: { + 56: "0xbcf39F0EDDa668C58371E519AF37CA705f2bFcbd", + 97: "", + }, + decimals: 18, + projectLink: "https://game.seascape.network/", + }, + zil: { + symbol: "ZIL", + address: { + 56: "0xb86AbCb37C3A4B64f74f59301AFF131a1BEcC787", + 97: "", + }, + decimals: 12, + projectLink: "https://www.zilliqa.com/", + }, + lien: { + symbol: "LIEN", + address: { + 56: "0x5d684ADaf3FcFe9CFb5ceDe3abf02F0Cdd1012E3", + 97: "", + }, + decimals: 8, + projectLink: "https://lien.finance/", + }, + swth: { + symbol: "SWTH", + address: { + 56: "0x250b211EE44459dAd5Cd3bCa803dD6a7EcB5d46C", + 97: "", + }, + decimals: 8, + projectLink: "https://switcheo.network/", + }, + dft: { + symbol: "DFT", + address: { + 56: "0x42712dF5009c20fee340B245b510c0395896cF6e", + 97: "", + }, + decimals: 18, + projectLink: "https://www.dfuture.com/home", + }, + gum: { + symbol: "GUM", + address: { + 56: "0xc53708664b99DF348dd27C3Ac0759d2DA9c40462", + 97: "", + }, + decimals: 18, + projectLink: "https://gourmetgalaxy.io/", + }, + dego: { + symbol: "DEGO", + address: { + 56: "0x3FdA9383A84C05eC8f7630Fe10AdF1fAC13241CC", + 97: "", + }, + decimals: 18, + projectLink: "https://bsc.dego.finance/home", + }, + nrv: { + symbol: "NRV", + address: { + 56: "0x42F6f551ae042cBe50C739158b4f0CAC0Edb9096", + 97: "", + }, + decimals: 18, + projectLink: "https://nerve.fi/", + }, + easy: { + symbol: "EASY", + address: { + 56: "0x7C17c8bED8d14bAccE824D020f994F4880D6Ab3B", + 97: "", + }, + decimals: 18, + projectLink: "https://easyfi.network/", + }, + oddz: { + symbol: "ODDZ", + address: { + 56: "0xCD40F2670CF58720b694968698A5514e924F742d", + 97: "", + }, + decimals: 18, + projectLink: "https://oddz.fi/", + }, + hoo: { + symbol: "HOO", + address: { + 56: "0xE1d1F66215998786110Ba0102ef558b22224C016", + 97: "", + }, + decimals: 8, + projectLink: "https://hoo.com/", + }, + apys: { + symbol: "APYS", + address: { + 56: "0x37dfACfaeDA801437Ff648A1559d73f4C40aAcb7", + 97: "", + }, + decimals: 18, + projectLink: "https://apyswap.com/", + }, + bondly: { + symbol: "BONDLY", + address: { + 56: "0x96058f8C3e16576D9BD68766f3836d9A33158f89", + 97: "", + }, + decimals: 18, + projectLink: "https://www.bondly.finance/", + }, + tko: { + symbol: "TKO", + address: { + 56: "0x9f589e3eabe42ebC94A44727b3f3531C0c877809", + 97: "", + }, + decimals: 18, + projectLink: "https://www.tokocrypto.com/", + }, + itam: { + symbol: "ITAM", + address: { + 56: "0x04C747b40Be4D535fC83D09939fb0f626F32800B", + 97: "", + }, + decimals: 18, + projectLink: "https://itam.network/", + }, + arpa: { + symbol: "ARPA", + address: { + 56: "0x6F769E65c14Ebd1f68817F5f1DcDb61Cfa2D6f7e", + 97: "", + }, + decimals: 18, + projectLink: "https://arpachain.io/", + }, + eps: { + symbol: "EPS", + address: { + 56: "0xA7f552078dcC247C2684336020c03648500C6d9F", + 97: "", + }, + decimals: 18, + projectLink: "https://ellipsis.finance/", + }, + jgn: { + symbol: "JGN", + address: { + 56: "0xC13B7a43223BB9Bf4B69BD68Ab20ca1B79d81C75", + 97: "", + }, + decimals: 18, + projectLink: "https://jgndefi.com/", + }, + tlm: { + symbol: "TLM", + address: { + 56: "0x2222227E22102Fe3322098e4CBfE18cFebD57c95", + 97: "", + }, + decimals: 4, + projectLink: "https://alienworlds.io/", + }, + perl: { + symbol: "PERL", + address: { + 56: "0x0F9E4D49f25de22c2202aF916B681FBB3790497B", + 97: "", + }, + decimals: 18, + projectLink: "https://perlinx.finance/", + }, + alpa: { + symbol: "ALPA", + address: { + 56: "0xc5E6689C9c8B02be7C49912Ef19e79cF24977f03", + 97: "", + }, + decimals: 18, + projectLink: "https://bsc.alpaca.city/", + }, + hzn: { + symbol: "HZN", + address: { + 56: "0xC0eFf7749b125444953ef89682201Fb8c6A917CD", + 97: "", + }, + decimals: 18, + projectLink: "https://horizonprotocol.com/", + }, + suter: { + symbol: "SUTER", + address: { + 56: "0x4CfbBdfBd5BF0814472fF35C72717Bd095ADa055", + 97: "", + }, + decimals: 18, + projectLink: "https://shield.suterusu.io/", + }, + cgg: { + symbol: "CGG", + address: { + 56: "0x1613957159E9B0ac6c80e824F7Eea748a32a0AE2", + 97: "", + }, + decimals: 18, + projectLink: "https://chainguardians.io/", + }, + mix: { + symbol: "MIX", + address: { + 56: "0xB67754f5b4C704A24d2db68e661b2875a4dDD197", + 97: "", + }, + decimals: 18, + projectLink: "https://mixie.chainguardians.io/", + }, + hakka: { + symbol: "HAKKA", + address: { + 56: "0x1D1eb8E8293222e1a29d2C0E4cE6C0Acfd89AaaC", + 97: "", + }, + decimals: 18, + projectLink: "https://hakka.finance/", + }, + xed: { + symbol: "XED", + address: { + 56: "0x5621b5A3f4a8008c4CCDd1b942B121c8B1944F1f", + 97: "", + }, + decimals: 18, + projectLink: "https://www.exeedme.com/", + }, + τbtc: { + symbol: "τBTC", + address: { + 56: "0x2cD1075682b0FCCaADd0Ca629e138E64015Ba11c", + 97: "", + }, + decimals: 9, + projectLink: "https://www.btcst.finance/", + }, + alpaca: { + symbol: "ALPACA", + address: { + 56: "0x8F0528cE5eF7B51152A59745bEfDD91D97091d2F", + 97: "", + }, + decimals: 18, + projectLink: "https://www.alpacafinance.org/", + }, + dfd: { + symbol: "DFD", + address: { + 56: "0x9899a98b222fCb2f3dbee7dF45d943093a4ff9ff", + 97: "", + }, + decimals: 18, + projectLink: "https://dusd.finance/", + }, + lmt: { + symbol: "LMT", + address: { + 56: "0x9617857E191354dbEA0b714d78Bc59e57C411087", + 97: "", + }, + decimals: 18, + projectLink: "https://lympo.io/lmt/", + }, + btt: { + symbol: "BTT", + address: { + 56: "0x8595F9dA7b868b1822194fAEd312235E43007b49", + 97: "", + }, + decimals: 18, + projectLink: "https://www.bittorrent.com/", + }, + trx: { + symbol: "TRX", + address: { + 56: "0x85EAC5Ac2F758618dFa09bDbe0cf174e7d574D5B", + 97: "", + }, + decimals: 18, + projectLink: "https://tron.network/", + }, + win: { + symbol: "WIN", + address: { + 56: "0xaeF0d72a118ce24feE3cD1d43d383897D05B4e99", + 97: "", + }, + decimals: 18, + projectLink: "https://winklink.org/", + }, + mcoin: { + symbol: "mCOIN", + address: { + 56: "0x49022089e78a8D46Ec87A3AF86a1Db6c189aFA6f", + 97: "", + }, + decimals: 18, + projectLink: "https://mirror.finance/", + }, + math: { + symbol: "MATH", + address: { + 56: "0xF218184Af829Cf2b0019F8E6F0b2423498a36983", + 97: "", + }, + decimals: 18, + projectLink: "https://mathwallet.org/", + }, + kun: { + symbol: "KUN", + address: { + 56: "0x1A2fb0Af670D0234c2857FaD35b789F8Cb725584", + 97: "", + }, + decimals: 18, + projectLink: "https://chemix.io/home", + }, + qsd: { + symbol: "QSD", + address: { + 56: "0x07AaA29E63FFEB2EBf59B33eE61437E1a91A3bb2", + 97: "", + }, + decimals: 18, + projectLink: "https://chemix.io/home", + }, + hyfi: { + symbol: "HYFI", + address: { + 56: "0x9a319b959e33369C5eaA494a770117eE3e585318", + 97: "", + }, + decimals: 18, + projectLink: "https://hyfi.pro/#/", + }, + oin: { + symbol: "OIN", + address: { + 56: "0x658E64FFcF40D240A43D52CA9342140316Ae44fA", + 97: "", + }, + decimals: 8, + projectLink: "https://oin.finance/", + }, + doge: { + symbol: "DOGE", + address: { + 56: "0xbA2aE424d960c26247Dd6c32edC70B295c744C43", + 97: "", + }, + decimals: 8, + projectLink: "https://dogecoin.com/", + }, + fine: { + symbol: "FINE", + address: { + 56: "0x4e6415a5727ea08aAE4580057187923aeC331227", + 97: "", + }, + decimals: 18, + projectLink: "https://refinable.com/", + }, + one: { + symbol: "ONE", + address: { + 56: "0x04BAf95Fd4C52fd09a56D840bAEe0AB8D7357bf0", + 97: "", + }, + decimals: 18, + projectLink: "https://www.bigone.com/", + }, + pmon: { + symbol: "PMON", + address: { + 56: "0x1796ae0b0fa4862485106a0de9b654eFE301D0b2", + 97: "", + }, + decimals: 18, + projectLink: "https://polkamon.com/", + }, + hotcross: { + symbol: "HOTCROSS", + address: { + 56: "0x4FA7163E153419E0E1064e418dd7A99314Ed27b6", + 97: "", + }, + decimals: 18, + projectLink: "https://www.hotcross.com/", + }, + τdoge: { + symbol: "τDOGE", + address: { + 56: "0xe550a593d09FBC8DCD557b5C88Cea6946A8b404A", + 97: "", + }, + decimals: 8, + projectLink: "https://www.btcst.finance/", + }, + btr: { + symbol: "BTR", + address: { + 56: "0x5a16E8cE8cA316407c6E6307095dc9540a8D62B3", + 97: "", + }, + decimals: 18, + projectLink: "https://www.bitrue.com/", + }, + ubxt: { + symbol: "UBXT", + address: { + 56: "0xBbEB90cFb6FAFa1F69AA130B7341089AbeEF5811", + 97: "", + }, + decimals: 18, + projectLink: "https://upbots.com/", + }, + wmass: { + symbol: "WMASS", + address: { + 56: "0x7e396BfC8a2f84748701167c2d622F041A1D7a17", + 97: "", + }, + decimals: 8, + projectLink: "https://massnet.org/en/", + }, + rfox: { + symbol: "RFOX", + address: { + 56: "0x0a3A21356793B49154Fd3BbE91CBc2A16c0457f5", + 97: "", + }, + decimals: 18, + projectLink: "https://www.redfoxlabs.io/", + }, + xend: { + symbol: "XEND", + address: { + 56: "0x4a080377f83D669D7bB83B3184a8A5E61B500608", + 97: "", + }, + decimals: 18, + projectLink: "https://xend.finance/", + }, + cyc: { + symbol: "CYC", + address: { + 56: "0x810EE35443639348aDbbC467b33310d2AB43c168", + 97: "", + }, + decimals: 18, + projectLink: "https://cyclone.xyz/", + }, + chr: { + symbol: "CHR", + address: { + 56: "0xf9CeC8d50f6c8ad3Fb6dcCEC577e05aA32B224FE", + 97: "", + }, + decimals: 6, + projectLink: "https://chromia.com/", + }, + kalm: { + symbol: "KALM", + address: { + 56: "0x4BA0057f784858a48fe351445C672FF2a3d43515", + 97: "", + }, + decimals: 18, + projectLink: "https://kalmar.io/", + }, + deri: { + symbol: "DERI", + address: { + 56: "0xe60eaf5A997DFAe83739e035b005A33AfdCc6df5", + 97: "", + }, + decimals: 18, + projectLink: "https://deri.finance/#/index", + }, + well: { + symbol: "WELL", + address: { + 56: "0xf07a32Eb035b786898c00bB1C64d8c6F8E7a46D5", + 97: "", + }, + decimals: 18, + projectLink: "https://www.bitwellex.com/", + }, + popen: { + symbol: "pOPEN", + address: { + 56: "0xaBaE871B7E3b67aEeC6B46AE9FE1A91660AadAC5", + 97: "", + }, + decimals: 18, + projectLink: "https://opendao.io/", + }, + ez: { + symbol: "EZ", + address: { + 56: "0x5512014efa6Cd57764Fa743756F7a6Ce3358cC83", + 97: "", + }, + decimals: 18, + projectLink: "https://easyfi.network/", + }, + vrt: { + symbol: "VRT", + address: { + 56: "0x5F84ce30DC3cF7909101C69086c50De191895883", + 97: "", + }, + decimals: 18, + projectLink: "https://venus.io/", + }, + tusd: { + symbol: "TUSD", + address: { + 56: "0x14016E85a25aeb13065688cAFB43044C2ef86784", + 97: "", + }, + decimals: 18, + projectLink: "https://www.trueusd.com/", + }, + mtrg: { + symbol: "MTRG", + address: { + 56: "0xBd2949F67DcdC549c6Ebe98696449Fa79D988A9F", + 97: "", + }, + decimals: 18, + projectLink: "https://www.meter.io/", + }, + ktn: { + symbol: "KTN", + address: { + 56: "0xDAe6c2A48BFAA66b43815c5548b10800919c993E", + 97: "", + }, + decimals: 18, + projectLink: "https://kattana.io/", + }, + qkc: { + symbol: "QKC", + address: { + 56: "0xA1434F1FC3F437fa33F7a781E041961C0205B5Da", + 97: "", + }, + decimals: 18, + projectLink: "https://quarkchain.io/", + }, + bcfx: { + symbol: "bCFX", + address: { + 56: "0x045c4324039dA91c52C55DF5D785385Aab073DcF", + 97: "", + }, + decimals: 18, + projectLink: "https://www.confluxnetwork.org/", + }, + mx: { + symbol: "MX", + address: { + 56: "0x9F882567A62a5560d147d64871776EeA72Df41D3", + 97: "", + }, + decimals: 18, + projectLink: "https://www.mxc.com/", + }, + ata: { + symbol: "ATA", + address: { + 56: "0xA2120b9e674d3fC3875f415A7DF52e382F141225", + 97: "", + }, + decimals: 18, + projectLink: "https://www.ata.network/", + }, + mbox: { + symbol: "MBOX", + address: { + 56: "0x3203c9E46cA618C8C1cE5dC67e7e9D75f5da2377", + 97: "", + }, + decimals: 18, + projectLink: "https://www.mobox.io/#/", + }, + boring: { + symbol: "BORING", + address: { + 56: "0xffEecbf8D7267757c2dc3d13D730E97E15BfdF7F", + 97: "", + }, + decimals: 18, + projectLink: "https://www.boringdao.com/", + }, + marsh: { + symbol: "MARSH", + address: { + 56: "0x2FA5dAF6Fe0708fBD63b1A7D1592577284f52256", + 97: "", + }, + decimals: 18, + projectLink: "https://unmarshal.io/", + }, + ampl: { + symbol: "AMPL", + address: { + 56: "0xDB021b1B247fe2F1fa57e0A87C748Cc1E321F07F", + 97: "", + }, + decimals: 9, + projectLink: "https://www.ampleforth.org/", + }, +}; + +export default tokens; diff --git a/packages/pancake-uikit/src/components/Image/types.ts b/packages/pancake-uikit/src/components/Image/types.ts index 503dc3214..990a0f8d1 100644 --- a/packages/pancake-uikit/src/components/Image/types.ts +++ b/packages/pancake-uikit/src/components/Image/types.ts @@ -10,3 +10,17 @@ export interface ImageProps extends ContainerProps, SpaceProps { src: string; alt?: string; } + +export interface TokenImageBaseProps extends Omit { + baseUrl?: string; + imageFormat?: string; +} + +export interface TokenPairImageProps extends TokenImageBaseProps { + primaryTokenAddress: string; + secondaryTokenAddress: string; +} + +export interface TokenImageProps extends TokenImageBaseProps { + tokenAddress: string; +} diff --git a/packages/pancake-uikit/src/testHelpers.tsx b/packages/pancake-uikit/src/testHelpers.tsx index c7a66fa02..4937f9fd7 100644 --- a/packages/pancake-uikit/src/testHelpers.tsx +++ b/packages/pancake-uikit/src/testHelpers.tsx @@ -7,3 +7,42 @@ import { light } from "./theme"; export const renderWithTheme = (component: ReactNode, theme = light): RenderResult => { return render({component}); }; + +export const setupMockIntersectionObserver = (): void => { + /* eslint-disable class-methods-use-this */ + class MockIntersectionObserver { + readonly root: Element | null; + + readonly rootMargin: string; + + readonly thresholds: ReadonlyArray; + + constructor() { + this.root = null; + this.rootMargin = ""; + this.thresholds = []; + } + + disconnect() { + return jest.fn; + } + + observe() { + return jest.fn; + } + + takeRecords(): IntersectionObserverEntry[] { + return []; + } + + unobserve() { + return jest.fn; + } + } + + Object.defineProperty(window, "IntersectionObserver", { + writable: true, + configurable: true, + value: MockIntersectionObserver, + }); +}; From 1947fd0ba0c0474ee23e39dadbc55659b356eb27 Mon Sep 17 00:00:00 2001 From: hachiojidev Date: Wed, 16 Jun 2021 10:12:46 +0900 Subject: [PATCH 3/9] feat(uikit/tokenpairimage): Inverted variant --- .../__tests__/components/tokenimage.test.tsx | 1 - .../src/components/Image/TokenImage.tsx | 1 - .../src/components/Image/TokenPairImage.tsx | 34 ++++++------ .../src/components/Image/Wrapper.tsx | 4 +- .../src/components/Image/index.stories.tsx | 13 ++++- .../src/components/Image/index.ts | 8 +++ .../src/components/Image/styles.tsx | 54 +++++++++++++++++++ .../src/components/Image/types.ts | 22 ++++++-- 8 files changed, 113 insertions(+), 24 deletions(-) create mode 100644 packages/pancake-uikit/src/components/Image/styles.tsx diff --git a/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx b/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx index c076fea1d..fd70cc1cb 100644 --- a/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx +++ b/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx @@ -35,7 +35,6 @@ it("renders correctly", () => { display: inline-flex; height: 48px; width: 48px; - z-index: 5; }
`${height}px`}; width: ${({ width }) => `${width}px`}; - z-index: 5; `; const TokenImage: React.FC = ({ diff --git a/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx b/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx index 2c458e7de..7cb0051d6 100644 --- a/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx +++ b/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx @@ -1,34 +1,38 @@ 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; -`; +import Box from "../Box/Box"; +import { TokenPairImageProps, variants } from "./types"; +import { StyledPrimaryImage, StyledSecondaryImage } from "./styles"; const TokenPairImage: React.FC = ({ - primaryTokenAddress, secondaryTokenAddress, + primaryTokenAddress, width, height, + variant = variants.DEFAULT, + primaryImageProps = {}, + secondaryImageProps = {}, ...props }) => { + const primaryImageSize = Math.floor(width * 0.83); // Arbitrary ratio const secondaryImageSize = Math.floor(width / 2); return ( - - + + - + ); }; diff --git a/packages/pancake-uikit/src/components/Image/Wrapper.tsx b/packages/pancake-uikit/src/components/Image/Wrapper.tsx index fd965a8c0..5e13f72ce 100644 --- a/packages/pancake-uikit/src/components/Image/Wrapper.tsx +++ b/packages/pancake-uikit/src/components/Image/Wrapper.tsx @@ -1,8 +1,8 @@ import styled from "styled-components"; import { space } from "styled-system"; -import { ContainerProps } from "./types"; +import { ImageProps } from "./types"; -const Wrapper = styled.div` +const Wrapper = styled.div` position: relative; background-position: center center; background-repeat: no-repeat; diff --git a/packages/pancake-uikit/src/components/Image/index.stories.tsx b/packages/pancake-uikit/src/components/Image/index.stories.tsx index d7f40a452..d87399e62 100644 --- a/packages/pancake-uikit/src/components/Image/index.stories.tsx +++ b/packages/pancake-uikit/src/components/Image/index.stories.tsx @@ -95,7 +95,7 @@ export const TokenImages: React.FC = () => { {tokens.map((token) => { return ( - + ); })} @@ -116,6 +116,17 @@ export const TokenPairImages: React.FC = () => { secondaryTokenAddress={tokens[randomTokenIndex].address[56]} height={64} width={64} + title={token.symbol} + mr="16px" + /> + + ); diff --git a/packages/pancake-uikit/src/components/Image/index.ts b/packages/pancake-uikit/src/components/Image/index.ts index 9e04266aa..9176a8199 100644 --- a/packages/pancake-uikit/src/components/Image/index.ts +++ b/packages/pancake-uikit/src/components/Image/index.ts @@ -2,3 +2,11 @@ export { default as BackgroundImage } from "./BackgroundImage"; export { default as Image } from "./Image"; export { default as TokenImage } from "./TokenImage"; export { default as TokenPairImage } from "./TokenPairImage"; +export type { + ImageProps, + TokenImageBaseProps, + TokenPairImageProps, + TokenImageProps, + variants as tokenPairImageVariant, + Variant as TokenPairImageVariant, +} from "./types"; diff --git a/packages/pancake-uikit/src/components/Image/styles.tsx b/packages/pancake-uikit/src/components/Image/styles.tsx new file mode 100644 index 000000000..bab4f0c8e --- /dev/null +++ b/packages/pancake-uikit/src/components/Image/styles.tsx @@ -0,0 +1,54 @@ +import styled from "styled-components"; +import { variant as StyledSystemVariant } from "styled-system"; +import { TokenImageProps, Variant, variants } from "./types"; +import TokenImage from "./TokenImage"; + +interface StyledImageProps extends TokenImageProps { + variant: Variant; +} + +export const StyledPrimaryImage = styled(TokenImage)` + position: absolute; + + ${StyledSystemVariant({ + variants: { + [variants.DEFAULT]: { + bottom: "auto", + left: 0, + right: "auto", + top: 0, + zIndex: 5, + }, + [variants.INVERTED]: { + bottom: 0, + left: "auto", + right: 0, + top: "auto", + zIndex: 6, + }, + }, + })} +`; + +export const StyledSecondaryImage = styled(TokenImage)` + position: absolute; + + ${StyledSystemVariant({ + variants: { + [variants.DEFAULT]: { + bottom: 0, + left: "auto", + right: 0, + top: "auto", + zIndex: 6, + }, + [variants.INVERTED]: { + bottom: "auto", + left: 0, + right: "auto", + top: 0, + zIndex: 5, + }, + }, + })} +`; diff --git a/packages/pancake-uikit/src/components/Image/types.ts b/packages/pancake-uikit/src/components/Image/types.ts index 990a0f8d1..af22cb511 100644 --- a/packages/pancake-uikit/src/components/Image/types.ts +++ b/packages/pancake-uikit/src/components/Image/types.ts @@ -1,3 +1,4 @@ +import { ImgHTMLAttributes } from "react"; import { SpaceProps } from "styled-system"; export interface ContainerProps { @@ -6,9 +7,10 @@ export interface ContainerProps { responsive?: boolean; } -export interface ImageProps extends ContainerProps, SpaceProps { - src: string; - alt?: string; +export interface ImageProps extends ImgHTMLAttributes, SpaceProps { + width: number; + height: number; + responsive?: boolean; } export interface TokenImageBaseProps extends Omit { @@ -16,9 +18,21 @@ export interface TokenImageBaseProps extends Omit { imageFormat?: string; } -export interface TokenPairImageProps extends TokenImageBaseProps { +export const variants = { + DEFAULT: "default", + INVERTED: "inverted", +} as const; + +export type Variant = typeof variants[keyof typeof variants]; + +export interface TokenPairImageProps extends SpaceProps { primaryTokenAddress: string; secondaryTokenAddress: string; + variant?: Variant; + height: number; + width: number; + primaryImageProps?: TokenImageBaseProps; + secondaryImageProps?: TokenImageBaseProps; } export interface TokenImageProps extends TokenImageBaseProps { From a5c650645787ffc7ae57ca78a2c58a9a523e863d Mon Sep 17 00:00:00 2001 From: hachiojidev Date: Wed, 16 Jun 2021 14:24:18 +0900 Subject: [PATCH 4/9] chore: Updated default base url - Updated types --- .../src/components/Image/TokenImage.tsx | 6 +++--- .../src/components/Image/TokenPairImage.tsx | 4 ++-- .../src/components/Image/index.stories.tsx | 13 ++++++++++++- .../pancake-uikit/src/components/Image/types.ts | 7 ++++--- 4 files changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/pancake-uikit/src/components/Image/TokenImage.tsx b/packages/pancake-uikit/src/components/Image/TokenImage.tsx index 146b73e5a..4986fa046 100644 --- a/packages/pancake-uikit/src/components/Image/TokenImage.tsx +++ b/packages/pancake-uikit/src/components/Image/TokenImage.tsx @@ -6,7 +6,7 @@ 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: 1px solid rgba(0, 0, 0, 0.25); border-radius: 50%; display: inline-flex; height: ${({ height }) => `${height}px`}; @@ -15,11 +15,11 @@ const StyledTokenImage = styled(BackgroundImage)` const TokenImage: React.FC = ({ tokenAddress, - baseUrl = "https://pancakeswap.finance/images/tokens", + baseUrl = "/images/tokens", imageFormat = "png", ...props }) => { - return ; + return ; }; export default TokenImage; diff --git a/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx b/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx index 7cb0051d6..4ceb28845 100644 --- a/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx +++ b/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx @@ -13,8 +13,8 @@ const TokenPairImage: React.FC = ({ secondaryImageProps = {}, ...props }) => { - const primaryImageSize = Math.floor(width * 0.83); // Arbitrary ratio - const secondaryImageSize = Math.floor(width / 2); + const primaryImageSize = Math.floor(width * (variant === variants.DEFAULT ? 0.92 : 0.85)); // Arbitrary ratio + const secondaryImageSize = Math.floor(primaryImageSize / 2); return ( diff --git a/packages/pancake-uikit/src/components/Image/index.stories.tsx b/packages/pancake-uikit/src/components/Image/index.stories.tsx index d87399e62..cb1a7bc49 100644 --- a/packages/pancake-uikit/src/components/Image/index.stories.tsx +++ b/packages/pancake-uikit/src/components/Image/index.stories.tsx @@ -87,6 +87,7 @@ export const LazyBackgrounds: React.FC = () => { const StyledBox = styled(Box)` border: 1px solid ${({ theme }) => theme.colors.cardBorder}; `; +const tokenProps = { baseUrl: "https://pancakeswap.finance/images/tokens" }; export const TokenImages: React.FC = () => { const tokens = Object.values(tokenList).filter((token) => !!token?.address); @@ -95,7 +96,13 @@ export const TokenImages: React.FC = () => { {tokens.map((token) => { return ( - + ); })} @@ -118,6 +125,8 @@ export const TokenPairImages: React.FC = () => { width={64} title={token.symbol} mr="16px" + primaryImageProps={tokenProps} + secondaryImageProps={tokenProps} /> { height={64} width={64} title={token.symbol} + primaryImageProps={tokenProps} + secondaryImageProps={tokenProps} /> ); diff --git a/packages/pancake-uikit/src/components/Image/types.ts b/packages/pancake-uikit/src/components/Image/types.ts index af22cb511..cc01782f8 100644 --- a/packages/pancake-uikit/src/components/Image/types.ts +++ b/packages/pancake-uikit/src/components/Image/types.ts @@ -1,5 +1,6 @@ import { ImgHTMLAttributes } from "react"; import { SpaceProps } from "styled-system"; +import { BoxProps } from "../Box"; export interface ContainerProps { width: number; @@ -25,14 +26,14 @@ export const variants = { export type Variant = typeof variants[keyof typeof variants]; -export interface TokenPairImageProps extends SpaceProps { +export interface TokenPairImageProps extends BoxProps { primaryTokenAddress: string; secondaryTokenAddress: string; variant?: Variant; height: number; width: number; - primaryImageProps?: TokenImageBaseProps; - secondaryImageProps?: TokenImageBaseProps; + primaryImageProps?: Omit; + secondaryImageProps?: Omit; } export interface TokenImageProps extends TokenImageBaseProps { From e16dca544e38314b069b0a181d00a27ab7bcae18 Mon Sep 17 00:00:00 2001 From: hachiojidev Date: Wed, 16 Jun 2021 17:19:06 +0900 Subject: [PATCH 5/9] fix(uikit/image): Responsive issue Responsive image had incorrect height. Simplified aspect ratio css --- .../__tests__/components/tokenimage.test.tsx | 47 ++++++++++--------- .../src/components/Image/BackgroundImage.tsx | 4 +- .../src/components/Image/Image.tsx | 17 ++++--- .../src/components/Image/TokenImage.tsx | 10 ++-- .../src/components/Image/Wrapper.tsx | 29 ++++++++---- .../src/components/Image/index.stories.tsx | 22 +++++++-- .../src/components/Image/types.ts | 9 ++-- 7 files changed, 84 insertions(+), 54 deletions(-) diff --git a/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx b/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx index fd70cc1cb..4b6c5d0ba 100644 --- a/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx +++ b/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx @@ -10,38 +10,43 @@ it("renders correctly", () => { expect(asFragment()).toMatchInlineSnapshot(` .c0 { - position: relative; - background-position: center center; - background-repeat: no-repeat; - background-size: cover; - height: 48px; - max-width: 48px; + height: 100%; max-height: 48px; + max-width: 48px; + position: relative; + width: 100%; + } + + .c0:before { + content: ""; + display: block; + padding-top: 100%; + width: 100%; + } + + .c2 { + bottom: 0; + height: auto; + left: 0; + position: absolute; + right: 0; + top: 0; 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: 1px 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; }
+ > +
+
`); }); diff --git a/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx b/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx index 497ca582a..239f1e7b9 100644 --- a/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx +++ b/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx @@ -3,7 +3,7 @@ import observerOptions from "./options"; import Wrapper from "./Wrapper"; import { ImageProps } from "./types"; -const BackgroundImage: React.FC = ({ src, ...otherProps }) => { +const BackgroundImage: React.FC = ({ src, responsive, width, height, ...props }) => { const imgRef = useRef(null); useEffect(() => { @@ -24,7 +24,7 @@ const BackgroundImage: React.FC = ({ src, ...otherProps }) => { }; }, [src]); - return ; + return ; }; export default BackgroundImage; diff --git a/packages/pancake-uikit/src/components/Image/Image.tsx b/packages/pancake-uikit/src/components/Image/Image.tsx index 1b0e3e9f9..4647dc7d7 100644 --- a/packages/pancake-uikit/src/components/Image/Image.tsx +++ b/packages/pancake-uikit/src/components/Image/Image.tsx @@ -5,23 +5,26 @@ import Wrapper from "./Wrapper"; import { ImageProps } from "./types"; const StyledImage = styled.img` + bottom: 0; + height: auto; + left: 0; position: absolute; + right: 0; top: 0; - left: 0; width: 100%; - height: 100%; - max-width: 100%; `; const Placeholder = styled.div` + bottom: 0; + height: auto; + left: 0; position: absolute; + right: 0; top: 0; - left: 0; width: 100%; - height: 100%; `; -const Image: React.FC = ({ src, alt, ...otherProps }) => { +const Image: React.FC = ({ responsive, src, alt, width, height, ...props }) => { const imgRef = useRef(null); const [isLoaded, setIsLoaded] = useState(false); @@ -49,7 +52,7 @@ const Image: React.FC = ({ src, alt, ...otherProps }) => { }, [src]); return ( - + {isLoaded ? : } ); diff --git a/packages/pancake-uikit/src/components/Image/TokenImage.tsx b/packages/pancake-uikit/src/components/Image/TokenImage.tsx index 4986fa046..d2eb3a551 100644 --- a/packages/pancake-uikit/src/components/Image/TokenImage.tsx +++ b/packages/pancake-uikit/src/components/Image/TokenImage.tsx @@ -1,16 +1,12 @@ import React from "react"; import styled from "styled-components"; -import BackgroundImage from "./BackgroundImage"; +import Image from "./Image"; import { TokenImageProps } from "./types"; -const StyledTokenImage = styled(BackgroundImage)` - align-items: center; +const StyledTokenImage = styled(Image)` background-origin: border-box; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 50%; - display: inline-flex; - height: ${({ height }) => `${height}px`}; - width: ${({ width }) => `${width}px`}; `; const TokenImage: React.FC = ({ @@ -19,7 +15,7 @@ const TokenImage: React.FC = ({ imageFormat = "png", ...props }) => { - return ; + return ; }; export default TokenImage; diff --git a/packages/pancake-uikit/src/components/Image/Wrapper.tsx b/packages/pancake-uikit/src/components/Image/Wrapper.tsx index 5e13f72ce..a3f8276cc 100644 --- a/packages/pancake-uikit/src/components/Image/Wrapper.tsx +++ b/packages/pancake-uikit/src/components/Image/Wrapper.tsx @@ -1,18 +1,27 @@ +import React, { forwardRef } from "react"; import styled from "styled-components"; import { space } from "styled-system"; -import { ImageProps } from "./types"; +import { WrapperProps } from "./types"; -const Wrapper = styled.div` +const StyledWrapper = styled.div<{ $width: number; $height: number; responsive: boolean }>` + height: ${({ responsive, $height }) => (responsive ? "100%" : `${$height}px`)}; + max-height: ${({ $height }) => $height}px; + max-width: ${({ $width }) => $width}px; position: relative; - background-position: center center; - background-repeat: no-repeat; - background-size: cover; - height: ${({ height, responsive }) => (responsive ? 0 : height)}px; - max-width: ${({ width }) => width}px; - max-height: ${({ height }) => height}px; - width: 100%; - padding-top: ${({ width, height, responsive }) => (responsive ? (height / width) * 100 : 0)}%; + width: ${({ responsive, $width }) => (responsive ? "100%" : `${$width}px`)}; + + &:before { + content: ""; + display: block; + padding-top: ${({ $width, $height }) => ($height / $width) * 100}%; + width: 100%; + } + ${space} `; +const Wrapper = forwardRef(({ responsive = true, ...props }, ref) => { + return ; +}); + export default Wrapper; diff --git a/packages/pancake-uikit/src/components/Image/index.stories.tsx b/packages/pancake-uikit/src/components/Image/index.stories.tsx index cb1a7bc49..af63e1e3d 100644 --- a/packages/pancake-uikit/src/components/Image/index.stories.tsx +++ b/packages/pancake-uikit/src/components/Image/index.stories.tsx @@ -17,7 +17,7 @@ export default { export const Image: React.FC = () => { return (
- test + test
Image
); @@ -26,7 +26,7 @@ export const Image: React.FC = () => { export const ImageResponsive: React.FC = () => { return (
- +
Image
); @@ -86,6 +86,8 @@ export const LazyBackgrounds: React.FC = () => { const StyledBox = styled(Box)` border: 1px solid ${({ theme }) => theme.colors.cardBorder}; + flex-basis: 100px; + text-align: center; `; const tokenProps = { baseUrl: "https://pancakeswap.finance/images/tokens" }; @@ -110,6 +112,20 @@ export const TokenImages: React.FC = () => { ); }; +export const ResponsiveTokenImage: React.FC = () => { + return ( + + + + ); +}; + export const TokenPairImages: React.FC = () => { const tokens = Object.values(tokenList).filter((token) => !!token?.address); return ( @@ -124,7 +140,7 @@ export const TokenPairImages: React.FC = () => { height={64} width={64} title={token.symbol} - mr="16px" + mb="16px" primaryImageProps={tokenProps} secondaryImageProps={tokenProps} /> diff --git a/packages/pancake-uikit/src/components/Image/types.ts b/packages/pancake-uikit/src/components/Image/types.ts index cc01782f8..fe0559949 100644 --- a/packages/pancake-uikit/src/components/Image/types.ts +++ b/packages/pancake-uikit/src/components/Image/types.ts @@ -1,10 +1,10 @@ -import { ImgHTMLAttributes } from "react"; +import { HTMLAttributes, ImgHTMLAttributes } from "react"; import { SpaceProps } from "styled-system"; import { BoxProps } from "../Box"; -export interface ContainerProps { - width: number; - height: number; +export interface WrapperProps extends SpaceProps, HTMLAttributes { + $width: number; + $height: number; responsive?: boolean; } @@ -12,6 +12,7 @@ export interface ImageProps extends ImgHTMLAttributes, SpacePr width: number; height: number; responsive?: boolean; + wrapperProps?: WrapperProps; } export interface TokenImageBaseProps extends Omit { From 91ff31687f9d58ddd2082ad5a73918f8cc296940 Mon Sep 17 00:00:00 2001 From: hachiojidev Date: Thu, 17 Jun 2021 09:19:22 +0900 Subject: [PATCH 6/9] refactor(uikit/tokenimage): Fix responsive issues --- .../src/components/Image/BackgroundImage.tsx | 40 ++++++++++++------- .../src/components/Image/Image.tsx | 12 ++---- .../src/components/Image/TokenImage.tsx | 16 ++++++-- .../src/components/Image/TokenPairImage.tsx | 13 +++--- .../src/components/Image/Wrapper.tsx | 11 +++-- .../src/components/Image/index.stories.tsx | 4 +- .../src/components/Image/styles.tsx | 3 ++ .../src/components/Image/types.ts | 4 +- 8 files changed, 60 insertions(+), 43 deletions(-) diff --git a/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx b/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx index 239f1e7b9..9ef5266fc 100644 --- a/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx +++ b/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx @@ -1,30 +1,42 @@ import React, { useEffect, useRef } from "react"; +import styled from "styled-components"; import observerOptions from "./options"; import Wrapper from "./Wrapper"; import { ImageProps } from "./types"; +const StyledBackgroundImage = styled(Wrapper)` + background-repeat: no-repeat; + background-size: contain; +`; + const BackgroundImage: React.FC = ({ src, responsive, width, height, ...props }) => { - const imgRef = useRef(null); + const ref = useRef(null); useEffect(() => { - const img = imgRef.current as unknown as HTMLElement; - const observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - const { isIntersecting } = entry; - if (isIntersecting) { - img.style.backgroundImage = `url("${src}")`; - observer.disconnect(); - } - }); - }, observerOptions); - observer.observe(img); + let observer: IntersectionObserver; + + if (ref.current) { + const div = ref.current; + observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + const { isIntersecting } = entry; + if (isIntersecting) { + div.style.backgroundImage = `url("${src}")`; + observer.disconnect(); + } + }); + }, observerOptions); + observer.observe(div); + } return () => { - observer.disconnect(); + if (observer) { + observer.disconnect(); + } }; }, [src]); - return ; + return ; }; export default BackgroundImage; diff --git a/packages/pancake-uikit/src/components/Image/Image.tsx b/packages/pancake-uikit/src/components/Image/Image.tsx index 4647dc7d7..9cca15e48 100644 --- a/packages/pancake-uikit/src/components/Image/Image.tsx +++ b/packages/pancake-uikit/src/components/Image/Image.tsx @@ -5,27 +5,23 @@ import Wrapper from "./Wrapper"; import { ImageProps } from "./types"; const StyledImage = styled.img` - bottom: 0; - height: auto; + height: 100%; left: 0; position: absolute; - right: 0; top: 0; width: 100%; `; const Placeholder = styled.div` - bottom: 0; - height: auto; + height: 100%; left: 0; position: absolute; - right: 0; top: 0; width: 100%; `; const Image: React.FC = ({ responsive, src, alt, width, height, ...props }) => { - const imgRef = useRef(null); + const imgRef = useRef(null); const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { @@ -52,7 +48,7 @@ const Image: React.FC = ({ responsive, src, alt, width, height, ...p }, [src]); return ( - + {isLoaded ? : } ); diff --git a/packages/pancake-uikit/src/components/Image/TokenImage.tsx b/packages/pancake-uikit/src/components/Image/TokenImage.tsx index d2eb3a551..987134960 100644 --- a/packages/pancake-uikit/src/components/Image/TokenImage.tsx +++ b/packages/pancake-uikit/src/components/Image/TokenImage.tsx @@ -1,12 +1,20 @@ import React from "react"; import styled from "styled-components"; -import Image from "./Image"; import { TokenImageProps } from "./types"; +import Image from "./Image"; const StyledTokenImage = styled(Image)` - background-origin: border-box; - border: 1px solid rgba(0, 0, 0, 0.25); - border-radius: 50%; + &:before { + border-radius: 50%; + border: 1px solid rgba(0, 0, 0, 0.25); + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 7; + } `; const TokenImage: React.FC = ({ diff --git a/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx b/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx index 4ceb28845..a43e27c17 100644 --- a/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx +++ b/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx @@ -1,7 +1,7 @@ import React from "react"; -import Box from "../Box/Box"; import { TokenPairImageProps, variants } from "./types"; import { StyledPrimaryImage, StyledSecondaryImage } from "./styles"; +import Wrapper from "./Wrapper"; const TokenPairImage: React.FC = ({ secondaryTokenAddress, @@ -13,16 +13,15 @@ const TokenPairImage: React.FC = ({ secondaryImageProps = {}, ...props }) => { - const primaryImageSize = Math.floor(width * (variant === variants.DEFAULT ? 0.92 : 0.85)); // Arbitrary ratio - const secondaryImageSize = Math.floor(primaryImageSize / 2); + const secondaryImageSize = Math.floor(width / 2); return ( - + = ({ height={secondaryImageSize} {...secondaryImageProps} /> - + ); }; diff --git a/packages/pancake-uikit/src/components/Image/Wrapper.tsx b/packages/pancake-uikit/src/components/Image/Wrapper.tsx index a3f8276cc..97076735f 100644 --- a/packages/pancake-uikit/src/components/Image/Wrapper.tsx +++ b/packages/pancake-uikit/src/components/Image/Wrapper.tsx @@ -4,24 +4,23 @@ import { space } from "styled-system"; import { WrapperProps } from "./types"; const StyledWrapper = styled.div<{ $width: number; $height: number; responsive: boolean }>` - height: ${({ responsive, $height }) => (responsive ? "100%" : `${$height}px`)}; + align-self: start; max-height: ${({ $height }) => $height}px; max-width: ${({ $width }) => $width}px; position: relative; - width: ${({ responsive, $width }) => (responsive ? "100%" : `${$width}px`)}; + width: 100%; - &:before { + &:after { content: ""; display: block; padding-top: ${({ $width, $height }) => ($height / $width) * 100}%; - width: 100%; } ${space} `; -const Wrapper = forwardRef(({ responsive = true, ...props }, ref) => { - return ; +const Wrapper = forwardRef(({ responsive = true, width, height, ...props }, ref) => { + return ; }); export default Wrapper; diff --git a/packages/pancake-uikit/src/components/Image/index.stories.tsx b/packages/pancake-uikit/src/components/Image/index.stories.tsx index af63e1e3d..76a8630a5 100644 --- a/packages/pancake-uikit/src/components/Image/index.stories.tsx +++ b/packages/pancake-uikit/src/components/Image/index.stories.tsx @@ -147,8 +147,8 @@ export const TokenPairImages: React.FC = () => { ` position: absolute; + width: ${({ variant }) => + variant === variants.DEFAULT ? "92%" : "82%"}; // 92, 82 are arbitrary numbers to fit the variant ${StyledSystemVariant({ variants: { @@ -32,6 +34,7 @@ export const StyledPrimaryImage = styled(TokenImage)` export const StyledSecondaryImage = styled(TokenImage)` position: absolute; + width: 50%; ${StyledSystemVariant({ variants: { diff --git a/packages/pancake-uikit/src/components/Image/types.ts b/packages/pancake-uikit/src/components/Image/types.ts index fe0559949..1b4048e88 100644 --- a/packages/pancake-uikit/src/components/Image/types.ts +++ b/packages/pancake-uikit/src/components/Image/types.ts @@ -3,8 +3,8 @@ import { SpaceProps } from "styled-system"; import { BoxProps } from "../Box"; export interface WrapperProps extends SpaceProps, HTMLAttributes { - $width: number; - $height: number; + width: number; + height: number; responsive?: boolean; } From 697572b7a199880c4c46281635f8cc2ba4a41352 Mon Sep 17 00:00:00 2001 From: hachiojidev Date: Thu, 17 Jun 2021 09:25:48 +0900 Subject: [PATCH 7/9] test: Update snapshot --- .../__tests__/components/tokenimage.test.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx b/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx index 4b6c5d0ba..72cc72182 100644 --- a/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx +++ b/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx @@ -10,34 +10,39 @@ it("renders correctly", () => { expect(asFragment()).toMatchInlineSnapshot(` .c0 { - height: 100%; + -webkit-align-self: start; + -ms-flex-item-align: start; + align-self: start; max-height: 48px; max-width: 48px; position: relative; width: 100%; } - .c0:before { + .c0:after { content: ""; display: block; padding-top: 100%; - width: 100%; } .c2 { - bottom: 0; - height: auto; + height: 100%; left: 0; position: absolute; - right: 0; top: 0; width: 100%; } - .c1 { - background-origin: border-box; - border: 1px solid rgba(0,0,0,0.25); + .c1:before { border-radius: 50%; + border: 1px solid rgba(0,0,0,0.25); + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 7; }
Date: Thu, 17 Jun 2021 09:32:52 +0900 Subject: [PATCH 8/9] chore(uikit): Remove Image responsive prop --- .../src/components/Image/BackgroundImage.tsx | 4 +- .../src/components/Image/Image.tsx | 4 +- .../src/components/Image/Wrapper.tsx | 6 +-- .../src/components/Image/index.stories.tsx | 39 +++---------------- .../src/components/Image/types.ts | 2 - 5 files changed, 12 insertions(+), 43 deletions(-) diff --git a/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx b/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx index 9ef5266fc..e6c187a6f 100644 --- a/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx +++ b/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx @@ -9,7 +9,7 @@ const StyledBackgroundImage = styled(Wrapper)` background-size: contain; `; -const BackgroundImage: React.FC = ({ src, responsive, width, height, ...props }) => { +const BackgroundImage: React.FC = ({ src, width, height, ...props }) => { const ref = useRef(null); useEffect(() => { @@ -36,7 +36,7 @@ const BackgroundImage: React.FC = ({ src, responsive, width, height, }; }, [src]); - return ; + return ; }; export default BackgroundImage; diff --git a/packages/pancake-uikit/src/components/Image/Image.tsx b/packages/pancake-uikit/src/components/Image/Image.tsx index 9cca15e48..f6d444f7c 100644 --- a/packages/pancake-uikit/src/components/Image/Image.tsx +++ b/packages/pancake-uikit/src/components/Image/Image.tsx @@ -20,7 +20,7 @@ const Placeholder = styled.div` width: 100%; `; -const Image: React.FC = ({ responsive, src, alt, width, height, ...props }) => { +const Image: React.FC = ({ src, alt, width, height, ...props }) => { const imgRef = useRef(null); const [isLoaded, setIsLoaded] = useState(false); @@ -48,7 +48,7 @@ const Image: React.FC = ({ responsive, src, alt, width, height, ...p }, [src]); return ( - + {isLoaded ? : } ); diff --git a/packages/pancake-uikit/src/components/Image/Wrapper.tsx b/packages/pancake-uikit/src/components/Image/Wrapper.tsx index 97076735f..9f949dfc8 100644 --- a/packages/pancake-uikit/src/components/Image/Wrapper.tsx +++ b/packages/pancake-uikit/src/components/Image/Wrapper.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; import { space } from "styled-system"; import { WrapperProps } from "./types"; -const StyledWrapper = styled.div<{ $width: number; $height: number; responsive: boolean }>` +const StyledWrapper = styled.div<{ $width: number; $height: number }>` align-self: start; max-height: ${({ $height }) => $height}px; max-width: ${({ $width }) => $width}px; @@ -19,8 +19,8 @@ const StyledWrapper = styled.div<{ $width: number; $height: number; responsive: ${space} `; -const Wrapper = forwardRef(({ responsive = true, width, height, ...props }, ref) => { - return ; +const Wrapper = forwardRef(({ width, height, ...props }, ref) => { + return ; }); export default Wrapper; diff --git a/packages/pancake-uikit/src/components/Image/index.stories.tsx b/packages/pancake-uikit/src/components/Image/index.stories.tsx index 76a8630a5..aa83dd5d2 100644 --- a/packages/pancake-uikit/src/components/Image/index.stories.tsx +++ b/packages/pancake-uikit/src/components/Image/index.stories.tsx @@ -3,6 +3,7 @@ import { random, times } from "lodash"; import styled from "styled-components"; import Flex from "../Box/Flex"; import Box from "../Box/Box"; +import Text from "../Text/Text"; import BackgroundImage from "./BackgroundImage"; import Img from "./Image"; import TokenImage from "./TokenImage"; @@ -17,16 +18,7 @@ export default { export const Image: React.FC = () => { return (
- test -
Image
-
- ); -}; - -export const ImageResponsive: React.FC = () => { - return ( -
- + test
Image
); @@ -41,15 +33,6 @@ export const Background: React.FC = () => { ); }; -export const BackgroundResponsive: React.FC = () => { - return ( -
- -
Background Image
-
- ); -}; - export const LazyImages: React.FC = () => { return ( @@ -98,6 +81,9 @@ export const TokenImages: React.FC = () => { {tokens.map((token) => { return ( + + {token.symbol} + { ); }; -export const ResponsiveTokenImage: React.FC = () => { - return ( - - - - ); -}; - export const TokenPairImages: React.FC = () => { const tokens = Object.values(tokenList).filter((token) => !!token?.address); return ( @@ -144,7 +116,6 @@ export const TokenPairImages: React.FC = () => { primaryImageProps={tokenProps} secondaryImageProps={tokenProps} /> - { width: number; height: number; - responsive?: boolean; } export interface ImageProps extends ImgHTMLAttributes, SpaceProps { width: number; height: number; - responsive?: boolean; wrapperProps?: WrapperProps; } From c4525051e16c6462a3bcec905ca88c5c173c411c Mon Sep 17 00:00:00 2001 From: hachiojidev Date: Thu, 17 Jun 2021 11:38:26 +0900 Subject: [PATCH 9/9] refactor: Use SVG as default image format --- packages/pancake-uikit/src/components/Image/TokenImage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pancake-uikit/src/components/Image/TokenImage.tsx b/packages/pancake-uikit/src/components/Image/TokenImage.tsx index 987134960..96f3f5c03 100644 --- a/packages/pancake-uikit/src/components/Image/TokenImage.tsx +++ b/packages/pancake-uikit/src/components/Image/TokenImage.tsx @@ -20,7 +20,7 @@ const StyledTokenImage = styled(Image)` const TokenImage: React.FC = ({ tokenAddress, baseUrl = "/images/tokens", - imageFormat = "png", + imageFormat = "svg", ...props }) => { return ;