feat(CryptoLogos): added gnosis and base

.changeset/weak-emus-wait.md

@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': minor
+---
+
+feat(CryptoLogos): gnosis and base added

packages/core/src/interfaces/logo.ts

@@ -40,6 +40,18 @@ export const chainLogoData = {
         color: '#E95557',
     },
     /* PLOP_INJECT_CHAIN */
+
+    base : {
+        name:'base',
+        color:'#ffffff',
+    },
+
+
+    gnosis : {
+        name:'gnosis',
+        color:'#ffffff',
+    },
+
 
     harmony: {
         name: 'harmony',

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

@@ -91,6 +91,20 @@ Optimism.args = {
 };
 
 /* PLOP_INJECT_CHAIN */
+export const Base = Template.bind({});
+Base.args = {
+    chain: 'base',
+    chainType: 'Network',
+    bgColor: chainLogoData['base'].color,
+    btnText: 'View Endpoints',
+};
+export const Gnosis = Template.bind({});
+Gnosis.args = {
+    chain: 'gnosis',
+    chainType: 'Network',
+    bgColor: chainLogoData['gnosis'].color,
+    btnText: 'View Endpoints',
+};
 export const Harmony = Template.bind({});
 Harmony.args = {
     chain: 'harmony',

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

@@ -73,6 +73,16 @@ Optimism.args = {
 };
 
 /* PLOP_INJECT_CHAIN */
+export const Base = Template.bind({});
+Base.args = {
+    chain: 'base',
+    size: '48px',
+};
+export const Gnosis = Template.bind({});
+Gnosis.args = {
+    chain: 'gnosis',
+    size: '48px',
+};
 export const Harmony = Template.bind({});
 Harmony.args = {
     chain: 'harmony',

packages/core/src/lib/Illustrations/Illustration.stories.tsx

@@ -76,6 +76,14 @@ Optimism.args = {
 };
 
 /* PLOP_INJECT_CHAIN */
+export const Base = BackgroundColoredTemplate.bind({});
+Base.args = {
+    logo: 'base',
+};
+export const Gnosis = BackgroundColoredTemplate.bind({});
+Gnosis.args = {
+    logo: 'gnosis',
+};
 export const Harmony = BackgroundColoredTemplate.bind({});
 Harmony.args = {
     logo: 'harmony',

packages/core/src/lib/Illustrations/images/chains/base.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ILogoProps } from '../../types';
+
+const base: React.FC<ILogoProps> = ({ width = '120', height = '160' }) => {
+    return (
+        <svg
+            width={width}
+            height={height}
+            viewBox="0 0 60 80"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g transform="translate(-19,-9)" stroke="none">
+                <circle cx="50" cy="50" r="40" fill="#0052FF" />
+            </g>
+        </svg>
+    );
+};
+export default base;

packages/core/src/lib/Illustrations/images/chains/gnosis.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ILogoProps } from '../../types';
+
+const gnosis: React.FC<ILogoProps> = ({ width = '120', height = '160' }) => {
+    return (
+        <svg
+            width={width}
+            height={height}
+            viewBox="0 0 200 270"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g transform="translate(-30,-5)" stroke="none">
+                <path
+                    d="M229.723 87.1044C246.773 109.202 241.448 136.964 228.277 151.545C219.067 161.745 207.372 167.208 194.053 168.417C181.038 169.603 169.462 164.651 159.117 156.667C152.324 163.487 145.709 170.129 139.087 176.756C135.49 180.359 135.468 180.366 131.797 176.637C125.175 169.907 118.582 163.153 112.049 156.482C89.0075 173.732 65.1877 171.093 47.538 156.148C37.2448 147.431 31.1786 136.089 29.9327 122.775C28.6794 109.358 33.2105 97.3268 41.1603 87.6085C33.8261 80.1734 26.8774 73.1237 19.9139 66.0592C13.2248 71.6263 1.78211 102.798 0.321183 125.133C-1.93324 159.677 7.6703 191.093 29.4507 218.342C75.1547 275.525 154.838 287.06 214.929 243.761C274.367 200.937 285.016 119.632 251.074 65.8442C243.984 72.9087 236.858 80.0029 229.723 87.1118V87.1044Z"
+                    fill="#04795B"
+                />
+                <path
+                    d="M137.033 158.216C171.479 123.791 205.904 89.3505 240.395 54.9769C242.353 53.0199 241.774 51.6559 240.365 49.9435C225.489 31.819 207.172 18.2905 185.369 9.67667C173.192 4.8657 160.407 2.14516 147.385 0.669998C133.577 -0.894124 119.887 0.403134 106.405 3.28675C83.2306 8.24598 62.7999 18.8687 45.2836 34.7842C39.2249 40.2845 33.841 46.5188 28.2197 52.3379C64.4166 88.3646 99.9682 123.754 135.727 159.351C136.106 159.024 136.588 158.646 137.018 158.216H137.033ZM218.496 52.501C190.946 79.951 163.381 107.416 135.876 134.821C108.022 107.001 80.5609 79.5729 53.0925 52.1378C94.5991 6.48171 174.72 6.34087 218.489 52.4936L218.496 52.501Z"
+                    fill="#04795B"
+                />
+                <path
+                    d="M55.9327 144.087C70.0747 157.134 88.3622 156.326 100.865 146.274C84.684 130.062 68.4803 113.828 52.1357 97.4526C40.3371 111.582 42.7992 131.967 55.9252 144.08L55.9327 144.087Z"
+                    fill="#04795B"
+                />
+                <path
+                    d="M216.961 142.308C229.419 129.232 228.047 106.941 218.147 97.0969C201.995 113.279 185.844 129.469 169.685 145.674C181.898 157.075 203.671 156.259 216.961 142.308Z"
+                    fill="#04795B"
+                />
+            </g>
+        </svg>
+    );
+};
+export default gnosis;

packages/core/src/lib/Illustrations/images/chains/index.ts

@@ -42,6 +42,16 @@ const optimismLogo: ILogoImport = {
     component: lazy(() => import('./optimism')),
 };
 /* PLOP_INJECT_CHAIN_1 */
+const baseLogo: ILogoImport = {
+    name: 'base',
+    component: lazy(() => import('./base')),
+};
+
+const gnosisLogo: ILogoImport = {
+    name: 'gnosis',
+    component: lazy(() => import('./gnosis')),
+};
+
 const harmonyLogo: ILogoImport = {
     name: 'harmony',
     component: lazy(() => import('./harmony')),
@@ -75,6 +85,8 @@ export default {
     roninLogo,
     optimismLogo,
     /* PLOP_INJECT_CHAIN_2 */
+    baseLogo,
+    gnosisLogo,
     harmonyLogo,
     pulsechainLogo,
     aptosLogo,