Merge pull request #299 from skalenetwork/rename-chains-page

Rename chains page

package.json

@@ -17,7 +17,7 @@
     "@mdx-js/rollup": "^2.3.0",
     "@mui/icons-material": "^5.15.14",
     "@mui/material": "^5.15.14",
-    "@skalenetwork/metaport": "2.3.0-develop.0",
+    "@skalenetwork/metaport": "2.3.0-develop.1",
     "@skalenetwork/skale-contracts-ethers-v6": "1.0.1",
     "@transak/transak-sdk": "^3.1.1",
     "@types/react-copy-to-clipboard": "^5.0.4",

src/App.scss

@@ -667,8 +667,8 @@ button:focus {
   background-image: url(/bridge.png);
 }
 
-.startCardecosystem {
-  background-image: url(/ecosystem.png);
+.startCardchains {
+  background-image: url(/chains.png);
 }
 
 .startCardapps {

src/Router.tsx

@@ -2,7 +2,7 @@ import './App.scss'
 
 import { useState, useEffect } from 'react'
 import { Helmet } from 'react-helmet'
-import { useLocation, Routes, Route, useSearchParams, Navigate, useParams } from 'react-router-dom'
+import { useLocation, Routes, Route, useSearchParams } from 'react-router-dom'
 import { TransitionGroup, CSSTransition } from 'react-transition-group'
 
 import { useTheme } from '@mui/material/styles'
@@ -57,11 +57,6 @@ import { IMetrics, ISChain, IStats, IAppId } from './core/types'
 import { getTopAppsByTransactions } from './core/explorer'
 import { loadMeta } from './core/metadata'
 
-const ChainRedirect = () => {
-  const { name } = useParams()
-  return <Navigate to={`/ecosystem/${name}`} replace />
-}
-
 export default function Router() {
   const location = useLocation()
   const currentUrl = `${window.location.origin}${location.pathname}${location.search}`
@@ -228,8 +223,6 @@ export default function Router() {
       <TransitionGroup>
         <CSSTransition key={location.pathname} classNames="fade" timeout={300} component={null}>
           <Routes>
-            <Route path="/chains" element={<Navigate to="/ecosystem" />} />
-            <Route path="/chains/:name" element={<ChainRedirect />} />
             <Route
               index
               element={
@@ -248,7 +241,7 @@ export default function Router() {
             </Route>
             <Route path="portfolio" element={<Portfolio mpc={mpc} />} />
             <Route
-              path="ecosystem"
+              path="chains"
               element={
                 <Chains
                   chainsMeta={chainsMeta}
@@ -260,7 +253,7 @@ export default function Router() {
                 />
               }
             />
-            <Route path="ecosystem">
+            <Route path="chains">
               <Route
                 path=":name"
                 element={
@@ -288,7 +281,7 @@ export default function Router() {
                 }
               />
             </Route>
-            <Route path="apps" element={<Apps mpc={mpc} chainsMeta={chainsMeta} />} />
+            <Route path="ecosystem" element={<Apps mpc={mpc} chainsMeta={chainsMeta} />} />
             <Route path="onramp" element={<Onramp mpc={mpc} />} />
             <Route path="stats" element={<Stats />} />
             <Route path="other">

src/SkBottomNavigation.tsx

@@ -41,8 +41,7 @@ export default function SkBottomNavigation() {
     setValue(500)
     if (location.pathname === '/') setValue(0)
     if (location.pathname === '/bridge' || location.pathname.includes('/transfer')) setValue(1)
-    if (location.pathname.includes('/ecosystem') || location.pathname.includes('/admin'))
-      setValue(2)
+    if (location.pathname.includes('/chains') || location.pathname.includes('/admin')) setValue(2)
     if (location.pathname.includes('/staking')) setValue(3)
   }, [location])
 
@@ -70,10 +69,10 @@ export default function SkBottomNavigation() {
           }}
         />
         <BottomNavigationAction
-          label="Ecosystem"
+          label="Chains"
           icon={<PublicOutlinedIcon />}
           onClick={() => {
-            navigate('/ecosystem')
+            navigate('/chains')
           }}
         />
         <BottomNavigationAction

src/SkDrawer.tsx

@@ -103,19 +103,19 @@ export default function SkDrawer() {
           <h4 className={cls(cmn.pSec, cmn.p, cmn.p4, cmn.mtop10, cmn.mleft20)}>Network</h4>
           <List>
             <ListItem>
-              <Link to="/ecosystem" className="undec fullWidth">
+              <Link to="/chains" className="undec fullWidth">
                 <ListItemButton
                   className={cls(cmn.pPrim)}
                   selected={
-                    location.pathname.includes('/ecosystem') ||
+                    location.pathname.includes('/chains') ||
                     location.pathname.includes('/admin') ||
                     location.pathname.includes('/apps')
                   }
                 >
                   <ListItemIcon>
                     <PublicOutlinedIcon />
                   </ListItemIcon>
-                  <ListItemText primary="Ecosystem" />
+                  <ListItemText primary="Chains" />
                   <div className="shipNew">
                     <p className={cls(cmn.p, cmn.p5)}>NEW</p>
                   </div>

src/components/AppCard.tsx

@@ -39,7 +39,7 @@ export default function AppCard(props: {
   transactions?: number
 }) {
   const shortAlias = getChainShortAlias(props.chainsMeta, props.schainName)
-  const url = `/ecosystem/${shortAlias}/${props.appName}`
+  const url = `/chains/${shortAlias}/${props.appName}`
 
   return (
     <div>

src/components/ChainCard.tsx

@@ -47,7 +47,7 @@ export default function ChainCard(props: {
           style={{ background: chainBg(props.skaleNetwork, props.schain.name) }}
         >
           <Link
-            to={'/ecosystem/' + shortAlias}
+            to={'/chains/' + shortAlias}
             className={cls('br__tileLogo', 'br__tileIns', cmn.flex)}
           >
             <div className={cls(cmn.flex, cmn.flexg)}></div>
@@ -64,7 +64,7 @@ export default function ChainCard(props: {
             className={cls(cmn.flex, cmn.flexcv, cmn.mbott10, 'br__tileBott', 'fullWidth')}
           ></div>
         </div>
-        <Link to={'/ecosystem/' + shortAlias}>
+        <Link to={'/chains/' + shortAlias}>
           <Button size="small" className={'cardBtn'}>
             <span
               style={{

src/components/HubCard.tsx

@@ -23,8 +23,8 @@
 
 import { cmn, cls, type interfaces } from '@skalenetwork/metaport'
 
-import HubTile from './ecosystem/HubTile'
-import HubApps from './ecosystem/HubApps'
+import HubTile from './chains/HubTile'
+import HubApps from './chains/HubApps'
 
 import { IMetrics, ISChain } from '../core/types'
 

src/components/SchainDetails.tsx

@@ -64,7 +64,7 @@ import { getRpcUrl, getChainId, HTTPS_PREFIX, getChainDescription } from '../cor
 import { getExplorerUrl } from '../core/explorer'
 import { IChainMetrics, IStatsData } from '../core/types'
 import { formatNumber } from '../core/timeHelper'
-import ChainTabsSection from './ecosystem/tabs/ChainTabsSection'
+import ChainTabsSection from './chains/tabs/ChainTabsSection'
 
 export default function SchainDetails(props: {
   schainName: string
@@ -158,9 +158,9 @@ export default function SchainDetails(props: {
             <Breadcrumbs
               sections={[
                 {
-                  text: 'Ecosystem',
+                  text: 'chains',
                   icon: <ArrowBackIosNewRoundedIcon />,
-                  url: '/ecosystem'
+                  url: '/chains'
                 },
                 {
                   text: chainAlias,

src/components/ecosystem/HubTile.tsx → src/components/chains/HubTile.tsx

@@ -71,7 +71,7 @@ export default function HubTile(props: {
         >
           <Tooltip title="Click to see Hub details">
             <div className={cls('titleSectionBg', cmn.flex, cmn.flexcv)}>
-              <Link to={'/ecosystem/' + shortAlias} className={cls(cmn.flex, cmn.pPrim, cmn.flexg)}>
+              <Link to={'/chains/' + shortAlias} className={cls(cmn.flex, cmn.pPrim, cmn.flexg)}>
                 <div
                   className={cls(
                     cmn.flex,

src/core/meta.ts

@@ -44,8 +44,8 @@ export const META_TAGS = {
     title: 'SKALE Portal - Portfolio',
     description: 'Assets overview across all SKALE Chains.'
   },
-  ecosystem: {
-    title: 'SKALE Portal - Ecosystem',
+  chains: {
+    title: 'SKALE Portal - Chains',
     description:
       'Explore SKALE Hubs, AppChains, connect to SKALE Chains, get block explorer links, endpoints, linked tokens and verified contracts info.'
   },

src/data/changelog.mdx

@@ -1,12 +1,12 @@
 ## 🛰️ Portal 2.3
 
-> Brand new Ecosystem page, Meson.fi integration, app pages, chain metrics and more!
+> Brand new chains page, Meson.fi integration, app pages, chain metrics and more!
 
-#### 🌐 Ecosystem page
+#### 🌐 Updated Chains page
 
-Discover the SKALE ecosystem and get chains info with a brand new page showcasing all the projects on SKALE Network.
+Discover the SKALE Chains and get chains info with a brand new page showcasing all the projects on SKALE Network.
 
-[Check it out](/ecosystem)
+[Check it out](/chains)
 
 #### ⛓️ Updated Chain page
 

src/pages/Admin.tsx

@@ -48,12 +48,12 @@ export default function Admin(props: { mpc: MetaportCore }) {
               {
                 text: 'All chains',
                 icon: <ArrowBackIosNewRoundedIcon />,
-                url: '/ecosystem'
+                url: '/chains'
               },
               {
                 text: alias,
                 icon: <LinkRoundedIcon />,
-                url: `/ecosystem/${name}`
+                url: `/chains/${name}`
               },
               {
                 text: 'Manage',

src/pages/App.tsx

@@ -55,7 +55,7 @@ import Tile from '../components/Tile'
 import LinkSurface from '../components/LinkSurface'
 import Breadcrumbs from '../components/Breadcrumbs'
 import CollapsibleDescription from '../components/CollapsibleDescription'
-import HubTile from '../components/ecosystem/HubTile'
+import HubTile from '../components/chains/HubTile'
 import AccordionSection from '../components/AccordionSection'
 
 import { findChainName } from '../core/chain'
@@ -116,12 +116,6 @@ export default function App(props: {
     return formatNumber(Number(fromWei(gasSpentGwei, '9')))
   }
 
-  // const breadcrumbs: BreadcrumbSection[] = [{
-  //   text: 'Ecosystem',
-  //   icon: <ArrowBackIosNewRoundedIcon />,
-  //   url: '/ecosystem'
-  // }]
-
   return (
     <Container maxWidth="md">
       <div className={cls('chainDetails', cmn.mbott20)}>
@@ -137,14 +131,14 @@ export default function App(props: {
               <Breadcrumbs
                 sections={[
                   {
-                    text: props.isXs ? 'Ecosystem' : 'Ecosystem',
+                    text: 'Chains',
                     icon: <ArrowBackIosNewRoundedIcon />,
-                    url: '/ecosystem'
+                    url: '/chains'
                   },
                   {
                     text: props.isXs ? 'Hub' : chainAlias,
                     icon: <LinkRoundedIcon />,
-                    url: `/ecosystem/${chain}`
+                    url: `/chains/${chain}`
                   },
                   {
                     text: appAlias,

src/pages/Apps.tsx

@@ -46,7 +46,7 @@ export default function Apps(props: {
       if (schain.apps) {
         for (const appName in schain.apps) {
           if (schain.apps.hasOwnProperty(appName)) {
-            appCards.push(
+            const card = (
               <Grid key={appName} className="fl-centered dappCard" item lg={3} md={4} sm={6} xs={6}>
                 <AppCard
                   skaleNetwork={props.mpc.config.skaleNetwork}
@@ -56,6 +56,7 @@ export default function Apps(props: {
                 />
               </Grid>
             )
+            appCards.push(card)
           }
         }
       }
@@ -72,10 +73,10 @@ export default function Apps(props: {
       </Helmet>
       <Stack spacing={0}>
         <div className={cls(cmn.flex)}>
-          <h2 className={cls(cmn.nom)}>Apps</h2>
+          <h2 className={cls(cmn.nom)}>Ecosystem</h2>
         </div>
         <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>
-          Explore and interact with dApps on SKALE Network.
+          Explore and interact with apps and games on SKALE Network
         </p>
         <Box sx={{ flexGrow: 1 }} className={cls(cmn.mtop20)}>
           <Grid container spacing={2}>

src/pages/Chains.tsx

@@ -73,14 +73,14 @@ export default function Chains(props: {
   return (
     <Container maxWidth="md" className={cls(cmn.mbott20)}>
       <Helmet>
-        <title>{META_TAGS.ecosystem.title}</title>
-        <meta name="description" content={META_TAGS.ecosystem.description} />
-        <meta property="og:title" content={META_TAGS.ecosystem.title} />
-        <meta property="og:description" content={META_TAGS.ecosystem.description} />
+        <title>{META_TAGS.chains.title}</title>
+        <meta name="description" content={META_TAGS.chains.description} />
+        <meta property="og:title" content={META_TAGS.chains.title} />
+        <meta property="og:description" content={META_TAGS.chains.description} />
       </Helmet>
       <Stack spacing={0}>
         <div className={cls(cmn.flex)}>
-          <h2 className={cls(cmn.nom)}>Ecosystem</h2>
+          <h2 className={cls(cmn.nom)}>Chains</h2>
         </div>
         <p className={cls(cmn.nom, cmn.p, cmn.p3, cmn.pSec)}>
           {props.isXs

src/pages/Start.tsx

@@ -106,7 +106,7 @@ export default function Start(props: {
             <Grid className="fl-centered dappCard" item lg={6} md={6} sm={6} xs={12}>
               <PageCard
                 description="Apps, games, block explorers and endpoints"
-                name="ecosystem"
+                name="chains"
                 icon={<PublicOutlinedIcon />}
               />
             </Grid>