Merge pull request #173 from web3ui/feat/crypto_logos

Feat/crypto logos

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`

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<typeof CryptoLogos>;
+
+const Template: ComponentStory<typeof CryptoLogos> = (args) => (
+    <CryptoLogos {...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',
+};

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<CryptoLogoProps>`
+    ${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)}
+`;

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(<Ethereum bgColor={color.black} />, 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(<Binance bgColor={color.black} />, 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(<Polygon bgColor={color.black} />, 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(<Avalanche bgColor={color.black} />, 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(<Fantom bgColor={color.black} />, 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(<Arbitrum bgColor={color.black} />, 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);
+    });
+});

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<CryptoLogoProps> = ({
+    chain,
+    size = '48px',
+    bgColor,
+}: CryptoLogoProps) => {
+    return (
+        <DivStyledCryptoLogo
+            chain={chain}
+            data-testid={'test-crypto-logo'}
+            size={size}
+            bgColor={bgColor}
+        >
+            {
+                <Illustration
+                    logo={chain}
+                    width="70%"
+                    height="70%"
+                ></Illustration>
+            }
+        </DivStyledCryptoLogo>
+    );
+};
+
+export default CryptoLogos;

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%)',
+};

src/components/CryptoLogos/index.tsx

@@ -0,0 +1,2 @@
+export { default as CryptoLogos } from './CryptoLogos';
+export type { CryptoLogoProps } from './types';

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;

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<IllustrationProps> = ({
     id = String(Date.now()),
     logo,
     width,
     height,
 }: IllustrationProps) => {
-    return <div id={id}>{getLogo(logo, width, height)}</div>;
+    return (
+        <StyledIllustration id={id}>
+            {getLogo(logo, width, height)}
+        </StyledIllustration>
+    );
 };
 
 export default Illustration;