[Illustrations]: Add new svgs for chains and refactor (#876)

* chore(Illustrations): refactor WIP

* chore(Illustration): replace chain type with common type

* chore(Illustration): updating icons WIP

* chore: add plop generator for chain logo

* chore(Plop): fix minor issues and add comments

* fix: plop generator

* feat: update svg with new designs

* fix: plop file generato name

* docs: add step to create new components

* add changeset file

* chore: fix svg attribute

Author: AbhinavMV

.changeset/weak-flowers-double.md

@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+Add new svg for illustration and plop generator

README.md

@@ -65,6 +65,7 @@ If you are using `web3uikit` with Next.js, be sure to follow the [official guide
 -   [🤝 Need help](#-need-help)
 -   [🚀 Quick start](#-quick-start)
 -   [🧭 Table of Contents](#-table-of-contents)
+-   [🏗️ New Components](#-new-components)
     <!-- -   [👩‍🔬 Advanced setup](#-advanced-setup) -->
 -   [📦 Packages](#-packages)
     -   [Core module](#core-module)
@@ -76,6 +77,31 @@ If you are using `web3uikit` with Next.js, be sure to follow the [official guide
 
 It's possible to install all functionalities of web3uikit by installing `web3uikit` as a dependency. But, you may choose to only install certain modules (as listed below). -->
 
+# 🏗️ New Components
+
+Remember to follow steps from [CONTRIBUTE.md](https://github.com/web3ui/web3uikit/blob/master/CONTRIBUTE.md) to setup your local environment.
+
+## Want to add new component ?
+
+-   run `pnpm new` in terminal and follow the interactive steps to generate templates for a new component.
+
+## Want to add new icon ?
+
+-   Add the svg file(s) to `web3uikit/packages/icons/src/lib/svgs/` (remember to give meaningful filename, as filename gets converted to icon name)
+-   run `pnpm run icons:create` in terminal and your icon is created. 🔥
+-   To verify your newly added icon run `pnpm storybook-build`. Once storybook is open, navigate to `8.ICONS/Gallery` and search for your icon.
+
+## Want to add a new Chain Logo ?
+
+-   run `pnpm plop "ChainLogo" -- --name "<CHAIN NAME HERE>" --color "<BACKGROUND COLOR HERE>"`
+
+    example => `pnpm plop "ChainLogo" -- --name "ethereum" --color "#396993"`
+
+-   Now in your code editor navigate to `web3uikit/packages/core/src/lib/Illustrations/images/chains`, here a new file must be created with your chain name, in this file replace `<></>` with your chain `svg code`.
+-   To verify your newly added chain logo run `pnpm storybook-build`. Once storybook is open:
+    -   navigate to `6.Graphic`, and your chain logo should be added to `Illustration` and `CryptoLogo` component.
+    -   navigate to `4.UI/CryptoCards`, and your chain logo should be added here as well. 😃
+
 # 📦 Packages
 
 ## Core module

package.json

@@ -41,6 +41,7 @@
         "start:dev": "nx run-many --target=start:dev --all --parallel",
         "storybook": "start-storybook -p 6006",
         "build-storybook": "build-storybook -o dist/storybook wp5",
+        "storybook-build": "pnpm build && pnpm storybook",
         "analyze": "nx run example:analyze",
         "icons:create": "nx run-many --target=icons:create --all --parallel",
         "new": "plop",

packages/core/src/interfaces/logo.ts

@@ -0,0 +1,54 @@
+export const chainLogoData = {
+    arbitrum: {
+        name: 'arbitrum',
+        color: '#003470',
+    },
+    fantom: {
+        name: 'fantom',
+        color: '#0F7FFF',
+    },
+    avalanche: {
+        name: 'avalanche',
+        color: '#DE0000',
+    },
+    polygon: {
+        name: 'polygon',
+        color: '#9B22FF',
+    },
+    binance: {
+        name: 'binance',
+        color: '#EBBB00',
+    },
+    ethereum: {
+        name: 'ethereum',
+        color: '#396993',
+    },
+    cronos: {
+        name: 'cronos',
+        color: '#041836',
+    },
+    coinbase: {
+        name: 'coinbase',
+        color: '#333dfb',
+    },
+    ronin: {
+        name: 'ronin',
+        color: '#019EC9',
+    },
+    optimism: {
+        name: 'optimism',
+        color: '#E95557',
+    },
+    /* PLOP_INJECT_CHAIN */
+} as const;
+
+const logoWalletColors = {
+    cryptoweb:
+        'linear-gradient(113.54deg, rgba(45, 91, 104, 0.531738) 14.91%, rgba(0, 4, 48, 0.6) 42.57%, rgba(45, 91, 104, 0.336) 45.98%, rgba(0, 4, 48, 0.03) 55.76%), linear-gradient(160.75deg, #000430 41.37%, #223F47 98.29%), 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%)',
+};
+
+export type TChainNames = keyof typeof chainLogoData;
+
+export type TWalletNames = keyof typeof logoWalletColors;
+
+export type TLogoNames = TChainNames | TWalletNames;

packages/core/src/lib/CryptoCards/CryptoCards.stories.tsx

@@ -1,7 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Cog } from '@web3uikit/icons';
 import CryptoCards from '../CryptoCards/CryptoCards';
-import bgConfig from '../CryptoLogos/bgConfig';
+import { chainLogoData } from '../../interfaces/logo';
 
 export default {
     title: '4.UI/Crypto Cards',
@@ -17,81 +16,78 @@ export const Ethereum = Template.bind({});
 Ethereum.args = {
     chain: 'ethereum',
     chainType: 'Network',
-    bgColor: bgConfig.ethereum,
+    bgColor: chainLogoData['ethereum'].color,
     btnText: 'View Endpoints',
 };
 
 export const Binance = Template.bind({});
 Binance.args = {
     chain: 'binance',
     chainType: 'Network',
-    bgColor:
-        '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%)',
+    bgColor: chainLogoData['binance'].color,
     btnText: 'View Endpoints',
 };
 
 export const Polygon = Template.bind({});
 Polygon.args = {
     chain: 'polygon',
     chainType: 'Network',
-    bgColor:
-        '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%)',
+    bgColor: chainLogoData['polygon'].color,
     btnText: 'View Endpoints',
 };
 
 export const Avalanche = Template.bind({});
 Avalanche.args = {
     chain: 'avalanche',
     chainType: 'Network',
-    bgColor:
-        '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%)',
+    bgColor: chainLogoData['avalanche'].color,
     btnText: 'View Endpoints',
 };
 
 export const Fantom = Template.bind({});
 Fantom.args = {
     chain: 'fantom',
     chainType: 'Network',
-    bgColor:
-        '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%)',
+    bgColor: chainLogoData['fantom'].color,
     btnText: 'View Endpoints',
 };
 
 export const Arbitrum = Template.bind({});
 Arbitrum.args = {
     chain: 'arbitrum',
     chainType: 'Network',
-    bgColor:
-        '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%)',
+    bgColor: chainLogoData['arbitrum'].color,
     btnText: 'View Endpoints',
 };
 
 export const Cronos = Template.bind({});
 Cronos.args = {
     chain: 'cronos',
     chainType: 'Network',
-    bgColor: bgConfig.cronos,
+    bgColor: chainLogoData['cronos'].color,
     btnText: 'View Endpoints',
 };
 export const Coinbase = Template.bind({});
 Coinbase.args = {
     chain: 'coinbase',
     chainType: 'Network',
-    bgColor: bgConfig.coinbase,
+    bgColor: chainLogoData['coinbase'].color,
     btnText: 'View Endpoints',
 };
 export const Ronin = Template.bind({});
 Ronin.args = {
     chain: 'ronin',
     chainType: 'Network',
-    bgColor: bgConfig.ronin,
+    bgColor: chainLogoData['ronin'].color,
     btnText: 'View Endpoints',
 };
 
 export const Optimism = Template.bind({});
 Optimism.args = {
     chain: 'optimism',
     chainType: 'Network',
-    bgColor: bgConfig.optimism,
+    bgColor: chainLogoData['optimism'].color,
     btnText: 'View Endpoints',
 };
+
+/* PLOP_INJECT_CHAIN */

packages/core/src/lib/CryptoCards/types.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TChainNames } from '../../interfaces/logo';
 
 export interface CryptoCardProps {
     /**
@@ -14,17 +15,7 @@ export interface CryptoCardProps {
     /**
      * The name of the blockchain
      */
-    chain:
-        | 'arbitrum'
-        | 'avalanche'
-        | 'binance'
-        | 'ethereum'
-        | 'fantom'
-        | 'polygon'
-        | 'cronos'
-        | 'coinbase'
-        | 'ronin'
-        | 'optimism';
+    chain: TChainNames;
 
     /**
      * The type of the chain / a subtitle below the chain name

packages/core/src/lib/CryptoLogos/CryptoLogos.stories.tsx

@@ -54,12 +54,6 @@ Cronos.args = {
     size: '48px',
 };
 
-export const Crypto = Template.bind({});
-Crypto.args = {
-    chain: 'cryptoweb',
-    size: '48px',
-};
-
 export const Coinbase = Template.bind({});
 Coinbase.args = {
     chain: 'coinbase',
@@ -71,8 +65,11 @@ Ronin.args = {
     chain: 'ronin',
     size: '48px',
 };
+
 export const Optimism = Template.bind({});
 Optimism.args = {
     chain: 'optimism',
     size: '48px',
 };
+
+/* PLOP_INJECT_CHAIN */

packages/core/src/lib/CryptoLogos/CryptoLogos.styles.tsx

@@ -1,26 +1,26 @@
 import styled, { css } from 'styled-components';
 import { resetCSS } from '@web3uikit/styles';
-import type { chainType, CryptoLogoProps, sizeType } from './types';
-import bgConfig from './bgConfig';
+import { chainType, CryptoLogoProps, sizeType } from './types';
+import { chainLogoData } from '../../interfaces/logo';
 
-const getBackground = (chain: chainType) => bgConfig[chain];
+const getBackground = (chain: chainType) => chainLogoData[chain].color;
 
 const getSize = (size?: sizeType) => css`
-  height: ${size};
-  width: ${size};
+    height: ${size};
+    width: ${size};
 `;
 
 const DivStyledCryptoLogo = styled.div<CryptoLogoProps>`
-  ${resetCSS};
-  ${(props) => getSize(props.size)}
-  align-items: center;
-  border-radius: 100%;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-  background: ${(props) => props?.bgColor || getBackground(props.chain)};
+    ${resetCSS};
+    ${(props) => getSize(props.size)}
+    align-items: center;
+    border-radius: 100%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    background: ${(props) => props?.bgColor || getBackground(props.chain)};
 `;
 
 export default { DivStyledCryptoLogo };

packages/core/src/lib/CryptoLogos/bgConfig.ts

@@ -1,3 +1,5 @@
+import { TChainNames, TWalletNames } from '../../interfaces/logo';
+
 export interface CryptoLogoProps {
     /**
      * The background color of the crypto logo
@@ -15,17 +17,6 @@ export interface CryptoLogoProps {
     size?: sizeType;
 }
 
-export type chainType =
-    | 'arbitrum'
-    | 'avalanche'
-    | 'binance'
-    | 'coinbase'
-    | 'cronos'
-    | 'cryptoweb'
-    | 'ethereum'
-    | 'fantom'
-    | 'polygon'
-    | 'ronin'
-    | 'optimism';
+export type chainType = TChainNames;
 
 export type sizeType = string | number;

packages/core/src/lib/CryptoLogos/types.ts

@@ -2,10 +2,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { color } from '@web3uikit/styles';
 import Illustration from './Illustration';
 
-export default {
+const mainStory = {
     title: '6.Graphic/Illustration',
     component: Illustration,
 } as ComponentMeta<typeof Illustration>;
+export default mainStory;
 
 const Template: ComponentStory<typeof Illustration> = (args) => (
     <Illustration {...args} />
@@ -74,6 +75,8 @@ Optimism.args = {
     logo: 'optimism',
 };
 
+/* PLOP_INJECT_CHAIN */
+
 export const Crypto = BackgroundColoredTemplate.bind({});
 Crypto.args = {
     logo: 'cryptoweb',