From 95dc0eaa07de83b65704ff551ed494d4237207f2 Mon Sep 17 00:00:00 2001 From: Y0moo Date: Wed, 2 Mar 2022 14:43:05 +0400 Subject: [PATCH 1/2] fix: sizing and position of SVG --- src/components/CryptoCards/CryptoCards.styles.tsx | 3 --- src/components/Illustrations/Illustration.tsx | 15 ++++++++++++++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/CryptoCards/CryptoCards.styles.tsx b/src/components/CryptoCards/CryptoCards.styles.tsx index f868afca9..b67d43122 100644 --- a/src/components/CryptoCards/CryptoCards.styles.tsx +++ b/src/components/CryptoCards/CryptoCards.styles.tsx @@ -72,9 +72,6 @@ export const DivStyledInfo = styled.div` export const DivStyledLogo = styled.div` border-radius: 0px; height: 136px; - left: 19px; - top: 12px; - width: 82px; `; export const DivStyledNetworkInfo = styled.div` diff --git a/src/components/Illustrations/Illustration.tsx b/src/components/Illustrations/Illustration.tsx index c2083eb19..0c2496d1d 100644 --- a/src/components/Illustrations/Illustration.tsx +++ b/src/components/Illustrations/Illustration.tsx @@ -16,6 +16,8 @@ import pack from './images/various/pack'; import marketplace from './images/various/marketplace'; import chest from './images/various/chest'; import bundle from './images/various/bundle'; +import styled from 'styled-components'; +import resetCSS from '../../styles/reset'; const getLogo = (logo: Chain | Logo, width?: Size, height?: Size) => { switch (logo) { @@ -56,13 +58,24 @@ const getLogo = (logo: Chain | Logo, width?: Size, height?: Size) => { } }; +const StyledIllustration = styled.div` + ${resetCSS} + display: flex; + justify-content: center; + align-items: center; +`; + const Illustration: React.FC = ({ id = String(Date.now()), logo, width, height, }: IllustrationProps) => { - return
{getLogo(logo, width, height)}
; + return ( + + {getLogo(logo, width, height)} + + ); }; export default Illustration; From 4ff25d9e0a40e548d7475c6bf69308376522acb6 Mon Sep 17 00:00:00 2001 From: Y0moo Date: Wed, 2 Mar 2022 15:53:41 +0400 Subject: [PATCH 2/2] feat: added cryptologos --- .../CryptoLogos/CryptoLogos.stories.tsx | 49 +++++ .../CryptoLogos/CryptoLogos.styles.tsx | 24 +++ .../CryptoLogos/CryptoLogos.test.tsx | 202 ++++++++++++++++++ src/components/CryptoLogos/CryptoLogos.tsx | 29 +++ src/components/CryptoLogos/bgConfig.ts | 13 ++ src/components/CryptoLogos/index.tsx | 2 + src/components/CryptoLogos/types.ts | 26 +++ 7 files changed, 345 insertions(+) create mode 100644 src/components/CryptoLogos/CryptoLogos.stories.tsx create mode 100644 src/components/CryptoLogos/CryptoLogos.styles.tsx create mode 100644 src/components/CryptoLogos/CryptoLogos.test.tsx create mode 100644 src/components/CryptoLogos/CryptoLogos.tsx create mode 100644 src/components/CryptoLogos/bgConfig.ts create mode 100644 src/components/CryptoLogos/index.tsx create mode 100644 src/components/CryptoLogos/types.ts diff --git a/src/components/CryptoLogos/CryptoLogos.stories.tsx b/src/components/CryptoLogos/CryptoLogos.stories.tsx new file mode 100644 index 000000000..7bd80f99f --- /dev/null +++ b/src/components/CryptoLogos/CryptoLogos.stories.tsx @@ -0,0 +1,49 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import React from 'react'; +import CryptoLogos from '../CryptoLogos/CryptoLogos'; + +export default { + title: '4.UI/Crypto Logos', + component: CryptoLogos, + argTypes: { onClick: { action: 'clicked' } }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Ethereum = Template.bind({}); +Ethereum.args = { + chain: 'ethereum', + size: '48px', +}; + +export const Binance = Template.bind({}); +Binance.args = { + chain: 'binance', + size: '48px', +}; + +export const Polygon = Template.bind({}); +Polygon.args = { + chain: 'polygon', + size: '48px', +}; + +export const Avalanche = Template.bind({}); +Avalanche.args = { + chain: 'avalanche', + size: '48px', +}; + +export const Fantom = Template.bind({}); +Fantom.args = { + chain: 'fantom', + size: '48px', +}; + +export const Arbitrum = Template.bind({}); +Arbitrum.args = { + chain: 'arbitrum', + size: '48px', +}; diff --git a/src/components/CryptoLogos/CryptoLogos.styles.tsx b/src/components/CryptoLogos/CryptoLogos.styles.tsx new file mode 100644 index 000000000..27a40e9fb --- /dev/null +++ b/src/components/CryptoLogos/CryptoLogos.styles.tsx @@ -0,0 +1,24 @@ +import styled, { css } from 'styled-components'; +import resetCSS from '../../styles/reset'; +import type { chainType, CryptoLogoProps, sizeType } from './types'; +import bgConfig from './bgConfig'; + +const getBackground = (chain: chainType) => bgConfig[chain]; + +const getSize = (size?: sizeType) => css` + width: ${size}; + height: ${size}; +`; + +export const DivStyledCryptoLogo = styled.div` + ${resetCSS}; + align-items: center; + background: ${(props) => props?.bgColor || getBackground(props.chain)}; + border-radius: 100%; + box-sizing: border-box; + display: flex; + justify-content: center; + overflow: hidden; + position: relative; + ${(props) => getSize(props.size)} +`; diff --git a/src/components/CryptoLogos/CryptoLogos.test.tsx b/src/components/CryptoLogos/CryptoLogos.test.tsx new file mode 100644 index 000000000..cb36a55a4 --- /dev/null +++ b/src/components/CryptoLogos/CryptoLogos.test.tsx @@ -0,0 +1,202 @@ +import ReactDOM from 'react-dom'; +import React from 'react'; +import { composeStories } from '@storybook/testing-react'; +import * as stories from './CryptoLogos.stories'; +import rgbToHex from '../../utils/rgbToHex'; +import color from '../../styles/colors'; +import 'jest-styled-components'; +import '@testing-library/jest-dom/extend-expect'; + +const { Ethereum, Binance, Polygon, Avalanche, Fantom, Arbitrum } = + composeStories(stories); + +let container: HTMLDivElement; + +describe('Ethereum', () => { + const CryptoLogoId = 'test-crypto-logo'; + + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + ReactDOM.render(, container); + }); + + afterEach(() => { + document.body.removeChild(container); + container.remove(); + }); + + test('renders the component', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + expect(element).not.toBeNull(); + }); + + test('checks the background color', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + const styles = element && getComputedStyle(element); + const bgColorHex = + styles && rgbToHex(styles.backgroundColor).toUpperCase(); + expect(bgColorHex).toBe(color.black); + }); +}); + +describe('Binance', () => { + const CryptoLogoId = 'test-crypto-logo'; + + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + ReactDOM.render(, container); + }); + + afterEach(() => { + document.body.removeChild(container); + container.remove(); + }); + + test('renders the component', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + expect(element).not.toBeNull(); + }); + + test('checks the background color', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + const styles = element && getComputedStyle(element); + const bgColorHex = + styles && rgbToHex(styles.backgroundColor).toUpperCase(); + expect(bgColorHex).toBe(color.black); + }); +}); + +describe('Polygon', () => { + const CryptoLogoId = 'test-crypto-logo'; + + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + ReactDOM.render(, container); + }); + + afterEach(() => { + document.body.removeChild(container); + container.remove(); + }); + + test('renders the component', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + expect(element).not.toBeNull(); + }); + + test('checks the background color', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + const styles = element && getComputedStyle(element); + const bgColorHex = + styles && rgbToHex(styles.backgroundColor).toUpperCase(); + expect(bgColorHex).toBe(color.black); + }); +}); + +describe('Avalanche', () => { + const CryptoLogoId = 'test-crypto-logo'; + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + ReactDOM.render(, container); + }); + + afterEach(() => { + document.body.removeChild(container); + container.remove(); + }); + + test('renders the component', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + expect(element).not.toBeNull(); + }); + + test('checks the background color', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + const styles = element && getComputedStyle(element); + const bgColorHex = + styles && rgbToHex(styles.backgroundColor).toUpperCase(); + expect(bgColorHex).toBe(color.black); + }); +}); + +describe('Fantom', () => { + const CryptoLogoId = 'test-crypto-logo'; + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + ReactDOM.render(, container); + }); + + afterEach(() => { + document.body.removeChild(container); + container.remove(); + }); + + test('renders the component', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + expect(element).not.toBeNull(); + }); + + test('checks the background color', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + const styles = element && getComputedStyle(element); + const bgColorHex = + styles && rgbToHex(styles.backgroundColor).toUpperCase(); + expect(bgColorHex).toBe(color.black); + }); +}); + +describe('Arbitrum', () => { + const CryptoLogoId = 'test-crypto-logo'; + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + ReactDOM.render(, container); + }); + + afterEach(() => { + document.body.removeChild(container); + container.remove(); + }); + + test('renders the component', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + expect(element).not.toBeNull(); + }); + + test('checks the background color', () => { + const element = container.querySelector( + `[data-testid="${CryptoLogoId}"]`, + ); + const styles = element && getComputedStyle(element); + const bgColorHex = + styles && rgbToHex(styles.backgroundColor).toUpperCase(); + expect(bgColorHex).toBe(color.black); + }); +}); diff --git a/src/components/CryptoLogos/CryptoLogos.tsx b/src/components/CryptoLogos/CryptoLogos.tsx new file mode 100644 index 000000000..fc822ec25 --- /dev/null +++ b/src/components/CryptoLogos/CryptoLogos.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import Illustration from '../Illustrations/Illustration'; +import { CryptoLogoProps } from './types'; +import { DivStyledCryptoLogo } from './CryptoLogos.styles'; + +const CryptoLogos: React.FC = ({ + chain, + size = '48px', + bgColor, +}: CryptoLogoProps) => { + return ( + + { + + } + + ); +}; + +export default CryptoLogos; diff --git a/src/components/CryptoLogos/bgConfig.ts b/src/components/CryptoLogos/bgConfig.ts new file mode 100644 index 000000000..3f1e70f43 --- /dev/null +++ b/src/components/CryptoLogos/bgConfig.ts @@ -0,0 +1,13 @@ +export default { + arbitrum: + 'linear-gradient(113.54deg, rgba(60, 87, 140, 0.5) 14.91%, rgba(70, 86, 169, 0.5) 43.21%, rgba(125, 150, 217, 0.345) 44.27%, rgba(129, 161, 225, 0.185) 55.76%), linear-gradient(151.07deg, #141659 33.25%, #4152A7 98.24%)', + fantom: 'linear-gradient(113.54deg, rgba(117, 183, 251, 0.531738) 14.91%, rgba(10, 41, 255, 0.6) 42.57%, rgba(25, 105, 255, 0.336) 45.98%, rgba(25, 105, 255, 0.03) 55.76%), linear-gradient(160.75deg, #071AFF 41.37%, #45D4FF 98.29%)', + avalanche: + 'linear-gradient(113.54deg, rgba(119, 0, 1, 0.5) 14.91%, rgba(216, 43, 44, 0.5) 43.21%, rgba(255, 130, 130, 0.345) 44.27%, rgba(220, 96, 97, 0.185) 55.76%), linear-gradient(151.07deg, #8F0E0F 33.25%, #FA4A4B 98.24%)', + polygon: + 'linear-gradient(113.54deg, rgba(103, 58, 194, 0.6) 14.91%, rgba(122, 74, 221, 0.498) 44.27%, rgba(170, 129, 255, 0.222) 45.98%, rgba(209, 103, 255, 0.03) 55.76%), linear-gradient(160.75deg, #7A4ADD 41.37%, #D57BFF 98.29%)', + binance: + 'linear-gradient(113.54deg, rgba(217, 166, 54, 0.6) 14.91%, rgba(230, 166, 26, 0.6) 44.27%, rgba(207, 168, 28, 0) 45.98%, rgba(250, 228, 30, 0) 55.76%, rgba(245, 223, 30, 0) 55.76%), linear-gradient(147.17deg, #F5D116 48.73%, #CD9614 98.22%)', + ethereum: + 'linear-gradient(113.54deg, rgba(117, 183, 251, 0.531738) 14.91%, rgba(215, 38, 243, 0.6) 42.57%, rgba(252, 84, 255, 0.336) 45.98%, rgba(209, 103, 255, 0.03) 55.76%), linear-gradient(160.75deg, #AB42CB 41.37%, #45FFFF 98.29%)', +}; diff --git a/src/components/CryptoLogos/index.tsx b/src/components/CryptoLogos/index.tsx new file mode 100644 index 000000000..3df09b873 --- /dev/null +++ b/src/components/CryptoLogos/index.tsx @@ -0,0 +1,2 @@ +export { default as CryptoLogos } from './CryptoLogos'; +export type { CryptoLogoProps } from './types'; diff --git a/src/components/CryptoLogos/types.ts b/src/components/CryptoLogos/types.ts new file mode 100644 index 000000000..857688afb --- /dev/null +++ b/src/components/CryptoLogos/types.ts @@ -0,0 +1,26 @@ +export interface CryptoLogoProps { + /** + * The name of the blockchain + */ + chain: chainType; + + /** + * The size of the component + */ + size?: sizeType; + + /** + * The background color of the crypto logo + */ + bgColor?: string; +} + +export type chainType = + | 'arbitrum' + | 'avalanche' + | 'binance' + | 'ethereum' + | 'fantom' + | 'polygon'; + +export type sizeType = string | number;