Merge pull request #378 from skalenetwork/add-egs-category

Add egs category

config/mainnet.ts

@@ -20,7 +20,8 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = {
     "affectionate-immediate-pollux", // cryptoblades
     "wan-red-ain", // human protocol
     "turbulent-unique-scheat", // razor
-    "adorable-quaint-bellatrix" // streammyscreen
+    "adorable-quaint-bellatrix", // streammyscreen
+    "parallel-stormy-spica" // titan hub
   ],
   "tokens": {
     eth: {
@@ -244,6 +245,9 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = {
             },
             "green-giddy-denebola": {
               hub: "elated-tan-skat"
+            },
+            "parallel-stormy-spica": {
+              hub: "elated-tan-skat"
             }
           }
         },
@@ -417,6 +421,9 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = {
             },
             "green-giddy-denebola": {
               wrapper: "0x1c566a47e1baC535Ca616373146e3BE024F88Aa4"
+            },
+            "parallel-stormy-spica": {
+              wrapper: "0x1c566a47e1baC535Ca616373146e3BE024F88Aa4"
             }
           }
         },
@@ -544,6 +551,10 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = {
             "green-giddy-denebola": {
               clone: true,
               hub: "elated-tan-skat"
+            },
+            "parallel-stormy-spica": {
+              clone: true,
+              hub: "elated-tan-skat"
             }
           }
         },
@@ -606,6 +617,10 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = {
             "honorable-steel-rasalhague": {
               clone: true,
               hub: "elated-tan-skat"
+            },
+            "parallel-stormy-spica": {
+              clone: true,
+              hub: "elated-tan-skat"
             }
           }
         },
@@ -647,6 +662,30 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = {
         }
       }
     },
+    "parallel-stormy-spica": {
+      erc20: {
+        usdc: {
+          address: "0x5ff56d3796cc17104de84365a00473232edddd9a",
+          chains: {
+            "elated-tan-skat": {
+              clone: true
+            },
+            "mainnet": {
+              clone: true,
+              hub: "elated-tan-skat"
+            },
+            "green-giddy-denebola": {
+              clone: true,
+              hub: "elated-tan-skat"
+            },
+            "honorable-steel-rasalhague": {
+              clone: true,
+              hub: "elated-tan-skat"
+            }
+          }
+        }
+      }
+    },
     "affectionate-immediate-pollux": { // cryptoblades connections
       erc20: {
         skl: {

packages/core/src/types/ChainsMetadata.ts

@@ -57,6 +57,7 @@ export interface AppSocials {
   discord?: string;
   swell?: string;
   dappradar?: string;
+  'epic-games-store'?: string;
 }
 
 export interface CategoriesMap {

src/App.scss

@@ -1333,6 +1333,17 @@ input[type=number] {
   }
 }
 
+.customSocialIcon {
+  height: 20px;
+  width: 20px;
+  padding: 1px;
+}
+
+.customSocialIconMd {
+  height: 24px;
+  width: 24px;
+}
+
 .pSec {
   color: RGB(255 255 255 / 65%);
 

src/Router.tsx

@@ -26,7 +26,7 @@ import { useState, useEffect } from 'react'
 import { WalletClient } from 'viem'
 
 import { Helmet } from 'react-helmet'
-import { useLocation, Routes, Route, useSearchParams } from 'react-router-dom'
+import { useLocation, Routes, Route, useSearchParams, Navigate } from 'react-router-dom'
 import { TransitionGroup, CSSTransition } from 'react-transition-group'
 
 import { useTheme } from '@mui/material/styles'
@@ -293,6 +293,10 @@ export default function Router() {
                 }
               />
             </Route>
+            <Route
+              path="/epicgames"
+              element={<Navigate to="/ecosystem?categories=gaming_epic-games-store" replace />}
+            />
             <Route
               path="ecosystem"
               element={<Ecosystem isXs={isXs} mpc={mpc} chainsMeta={chainsMeta} />}

src/components/ecosystem/CategoryIcons.tsx

@@ -66,6 +66,8 @@ import {
   SellOutlined,
   HomeRepairServiceOutlined
 } from '@mui/icons-material'
+import { cls, styles } from '@skalenetwork/metaport'
+import EpicGamesStoreLogo from '../../assets/egs.svg'
 
 export const CategoryIcons: React.FC<{ category: string }> = ({ category }) => {
   switch (category) {
@@ -149,6 +151,8 @@ export const CategoryIcons: React.FC<{ category: string }> = ({ category }) => {
       return <SportsBaseballOutlined />
     case 'strategy':
       return <FlagRounded />
+    case 'epic-games-store':
+      return <img src={EpicGamesStoreLogo} className={cls(styles.chainIconxs)} alt="egs-logo" />
 
     // DeFi subcategories
     case 'custody':

src/components/ecosystem/Socials.tsx

@@ -33,6 +33,7 @@ import { cmn, cls } from '@skalenetwork/metaport'
 import { type types } from '@/core'
 import FavoriteIconButton from './FavoriteIconButton'
 import SwellIcon from './SwellIcon'
+import EpicGamesStoreLogo from '../../assets/egs.svg'
 
 interface SocialButtonsProps {
   social?: types.AppSocials
@@ -42,6 +43,8 @@ interface SocialButtonsProps {
   size?: 'sm' | 'md'
 }
 
+const MAX_SOCIALS_SM = 6
+
 const SocialButtons: React.FC<SocialButtonsProps> = ({
   social,
   chainName,
@@ -62,6 +65,28 @@ const SocialButtons: React.FC<SocialButtonsProps> = ({
       ),
       title: 'Website'
     },
+    {
+      key: 'epic-games-store',
+      icon: (
+        <img
+          src={EpicGamesStoreLogo}
+          className={cls('customSocialIcon', isMd && 'customSocialIconMd')}
+          alt="egs-logo"
+        />
+      ),
+      title: 'Epic Games Store'
+    },
+    {
+      key: 'swell',
+      icon: (
+        <SwellIcon
+          size={isMd ? 'medium' : 'small'}
+          style={{ padding: '2px' }}
+          className={cls([cmn.pSec, !isMd], [cmn.pPrim, isMd])}
+        />
+      ),
+      title: 'Swell'
+    },
     {
       key: 'dappradar',
       icon: (
@@ -85,21 +110,16 @@ const SocialButtons: React.FC<SocialButtonsProps> = ({
         />
       ),
       title: 'Dune Analytics'
-    },
-    {
-      key: 'swell',
-      icon: (
-        <SwellIcon size={isMd ? 'medium' : 'small'} style={{ padding: '2px', color: '#93B8EC' }} />
-      ),
-      title: 'Swell'
     }
   ]
 
+  const visibleLinks = isMd ? socialLinks : socialLinks.slice(0, MAX_SOCIALS_SM)
+
   return (
     <div className={cls(cmn.flex, cmn.flexcv, className)}>
       {social && (
         <div className={cls(cmn.flex, cmn.flexg)}>
-          {socialLinks.map(({ key, icon, network, title }) => {
+          {visibleLinks.map(({ key, icon, network, title }) => {
             const link = social[key as keyof types.AppSocials]
             if (!link) return null
 

src/core/ecosystem/categories.ts

@@ -72,7 +72,8 @@ export const categories: Categories = {
       simulation: { name: 'Simulation' },
       sports: { name: 'Sports' },
       strategy: { name: 'Strategy' },
-      web3: { name: 'Web3' }
+      web3: { name: 'Web3' },
+      'epic-games-store': { name: 'Epic Games Store' }
     }
   },
   hub: { name: 'Hub', subcategories: {} },