Add category chips, add loader for ecosystem, fix trending tab, update filtering and home page

packages/core/src/types/ChainsMetadata.ts

@@ -59,11 +59,6 @@ export interface AppSocials {
   swell?: string;
   dappradar?: string;
 }
-export interface AppWithTimestamp {
-  chain: string
-  app: string
-  added: number
-}
 
 export interface CategoriesMap {
   [category: string]: string[] | null

packages/core/src/types/index.ts

@@ -27,7 +27,6 @@ export {
     AppMetadataMap,
     AppSocials,
     NetworksMetadataMap,
-    AppWithTimestamp,
     CategoriesMap,
     AppWithChainAndName
 } from './ChainsMetadata'

src/App.scss

@@ -15,7 +15,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-
 .bridge {
   min-height: 100vh;
   min-width: 100vw;
@@ -139,11 +138,15 @@ body {
   height: 85vh;
   padding: 20px !important;
   display: flex;
-  /* relevant part */
   flex-direction: column;
-  /* relevant part */
   overflow: hidden;
-  /* relevant part */
+}
+
+// todo: move to cmn
+.flex-w {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
@@ -156,17 +159,13 @@ body {
 .br__modalInner {
   max-height: calc(90vh - 250px);
   display: flex;
-  /* relevant part */
   flex-direction: column;
-  /* relevant part */
   overflow: hidden;
 }
 
 .scrollable {
   display: flex;
-  /* relevant part */
   flex-direction: column;
-  /* relevant part */
   overflow: hidden;
 }
 
@@ -457,6 +456,12 @@ body::-webkit-scrollbar {
   box-shadow: none !important;
 }
 
+.favsBtn {
+  white-space: nowrap;
+  min-width: auto;
+  height: min-content;
+}
+
 .outlinedGray {
   background: rgb(126 126 126 / 15%);
 }

src/Router.tsx

@@ -1,3 +1,25 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+/**
+ * @file Router.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
 import './App.scss'
 
 import { useState, useEffect } from 'react'
@@ -35,7 +57,7 @@ import App from './pages/App'
 import History from './pages/History'
 import Portfolio from './pages/Portfolio'
 import Admin from './pages/Admin'
-import Start from './pages/Start'
+import Start from './pages/Home'
 import Staking from './pages/Staking'
 import StakeValidator from './pages/StakeValidator'
 import StakeAmount from './pages/StakeAmount'
@@ -233,14 +255,7 @@ export default function Router() {
           <Routes>
             <Route
               index
-              element={
-                <Start
-                  isXs={isXs}
-                  skaleNetwork={mpc.config.skaleNetwork}
-                  loadData={loadData}
-                  chainsMeta={chainsMeta}
-                />
-              }
+              element={<Start skaleNetwork={mpc.config.skaleNetwork} chainsMeta={chainsMeta} />}
             />
             <Route path="bridge" element={<Bridge isXs={isXs} chainsMeta={chainsMeta} />} />
             <Route path="bridge">

src/components/HomeComponents.tsx

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+/**
+ * @file HomeComponents.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import SwapHorizontalCircleOutlinedIcon from '@mui/icons-material/SwapHorizontalCircleOutlined'
+import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined'
+import FavoriteRoundedIcon from '@mui/icons-material/FavoriteRounded'
+import LabelImportantRoundedIcon from '@mui/icons-material/LabelImportantRounded'
+import RocketLaunchRoundedIcon from '@mui/icons-material/RocketLaunchRounded'
+import TrendingUpRoundedIcon from '@mui/icons-material/TrendingUpRounded'
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded'
+import PieChartOutlineRoundedIcon from '@mui/icons-material/PieChartOutlineRounded'
+import OutboundRoundedIcon from '@mui/icons-material/OutboundRounded'
+
+interface SectionIcons {
+  [key: string]: JSX.Element
+}
+
+export const SECTION_ICONS: SectionIcons = {
+  explore: <RocketLaunchRoundedIcon color="primary" />,
+  favorites: <FavoriteRoundedIcon color="primary" />,
+  new: <LabelImportantRoundedIcon color="primary" />,
+  trending: <TrendingUpRoundedIcon color="primary" />,
+  categories: <OutboundRoundedIcon color="primary" />
+}
+
+interface ExploreCard {
+  name: string
+  description: string
+  icon: JSX.Element
+  url?: string
+}
+
+export const EXPLORE_CARDS: ExploreCard[] = [
+  {
+    name: 'bridge',
+    description: 'Transfer tokens between 50+ chains',
+    icon: <SwapHorizontalCircleOutlinedIcon />
+  },
+  {
+    name: 'stake',
+    description: 'Manage delegations and validators',
+    url: '/staking',
+    icon: <PieChartOutlineRoundedIcon />
+  },
+  {
+    name: 'SKALE Chains',
+    description: 'Chains info, block explorers and endpoints',
+    url: '/chains',
+    icon: <LinkRoundedIcon />
+  },
+  {
+    name: 'ecosystem',
+    description: 'Discover apps and games on SKALE',
+    icon: <PublicOutlinedIcon />
+  }
+]

src/components/SchainDetails.tsx

@@ -190,7 +190,7 @@ export default function SchainDetails(props: {
             <div className={cls('app-info', cmn.flexg)}>
               <div className={cls(cmn.flex, cmn.flexcv, cmn.mbott10)}>
                 <div className={cmn.flexg}>
-                  <CategoriesChips categories={chainMeta?.categories} />
+                  <CategoriesChips categories={chainMeta?.categories} all />
                 </div>
               </div>
 

src/components/chains/HubApps.tsx

@@ -55,7 +55,7 @@ export default function HubApps(props: {
   }
 
   return (
-    <Grid container spacing={2}>
+    <Grid container spacing={2} style={{ marginTop: '-30px' }}>
       {appCards}
     </Grid>
   )

src/components/ecosystem/AllApps.tsx

@@ -15,31 +15,46 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-
 /**
  * @file AllApps.tsx
  * @copyright SKALE Labs 2024-Present
  */
 
 import React, { useMemo } from 'react'
+import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
 import { type types } from '@/core'
+
 import { useLikedApps } from '../../LikedAppsContext'
 import AppCardV2 from './AppCardV2'
 import { Grid } from '@mui/material'
 import { isNewApp } from '../../core/ecosystem/utils'
+import Loader from '../Loader'
 
 interface AllAppsProps {
   skaleNetwork: types.SkaleNetwork
   chainsMeta: types.ChainsMetadataMap
   apps: types.AppWithChainAndName[]
-  newApps: types.AppWithTimestamp[]
+  newApps: types.AppWithChainAndName[]
+  loaded: boolean
 }
 
-const AllApps: React.FC<AllAppsProps> = ({ skaleNetwork, chainsMeta, apps, newApps }) => {
+const AllApps: React.FC<AllAppsProps> = ({ skaleNetwork, chainsMeta, apps, newApps, loaded }) => {
   const { getTrendingApps, getAppId } = useLikedApps()
 
   const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps])
 
+  if (!loaded) return <Loader text="Loading apps" />
+  if (apps.length === 0)
+    return (
+      <SkPaper gray className="titleSection">
+        <div className={cls(cmn.mtop20, cmn.mbott20)}>
+          <p className={cls(cmn.p, cmn.p3, cmn.pSec, cmn.pCent)}>
+            No apps match your current filters
+          </p>
+        </div>
+      </SkPaper>
+    )
+
   return (
     <Grid container spacing={2}>
       {apps.map((app: types.AppWithChainAndName) => {

src/components/ecosystem/AppCardV2.tsx

@@ -31,7 +31,7 @@ import { getChainShortAlias } from '../../core/chain'
 import { chainBg, getChainAlias } from '../../core/metadata'
 
 import CollapsibleDescription from '../CollapsibleDescription'
-import AppCategoriesChips from './CategoriesChips'
+import CategoriesChips from './CategoriesChips'
 import SocialButtons from './Socials'
 import { ChipTrending, ChipNew, ChipPreTge } from '../Chip'
 
@@ -41,7 +41,7 @@ export default function AppCard(props: {
   appName: string
   chainsMeta: types.ChainsMetadataMap
   transactions?: number
-  newApps?: types.AppWithTimestamp[]
+  newApps?: types.AppWithChainAndName[]
   isTrending?: boolean
   isNew?: boolean
 }) {
@@ -86,7 +86,7 @@ export default function AppCard(props: {
           {appMeta.tags?.includes('pretge') && <ChipPreTge />}
         </div>
         <CollapsibleDescription text={appDescription} />
-        <AppCategoriesChips categories={appMeta.categories} className={cls(cmn.mtop20)} />
+        <CategoriesChips categories={appMeta.categories} className={cls(cmn.mtop20)} />
       </Link>
       <SocialButtons
         social={appMeta.social}

src/components/ecosystem/Categories.tsx

@@ -169,14 +169,19 @@ const CategoryDisplay: React.FC<CategoryDisplayProps> = ({
         className="skMenu outlined"
         PaperProps={{
           style: {
-            maxHeight: '500pt',
+            maxHeight: 'calc(80vh - 100px)',
             width: buttonRef.current?.offsetWidth,
             borderRadius: '25px',
             margin: '10px 0'
           }
         }}
       >
         <div className={cls(cmn.padd10)}>
+          {isXs && (
+            <Button className={cls('btn fullW outlined', cmn.mbott10)} onClick={handleMenuClose}>
+              Close
+            </Button>
+          )}
           <SearchBar
             className={cls(cmn.mbott10)}
             searchTerm={searchTerm}

src/components/ecosystem/CategoriesChips.tsx

@@ -21,21 +21,21 @@
  * @copyright SKALE Labs 2024-Present
  */
 
-import React, { useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 import { Box } from '@mui/material'
 import { type types } from '@/core'
 import { categories as categoriesData } from '../../core/ecosystem/categories'
 import Chip from '../Chip'
 import { CategoryIcons } from './CategoryIcons'
+import { cls } from '@skalenetwork/metaport'
 
 interface CategoriesChipsProps {
   categories: string[] | types.CategoriesMap
+  all?: boolean
   className?: string
 }
 
-const CategoriesChips: React.FC<CategoriesChipsProps> = ({ categories, className }) => {
-  const [expanded, setExpanded] = useState(false)
-
+const CategoriesChips: React.FC<CategoriesChipsProps> = ({ categories, all, className }) => {
   const chips = useMemo(() => {
     if (!categories) return []
 
@@ -81,18 +81,13 @@ const CategoriesChips: React.FC<CategoriesChipsProps> = ({ categories, className
 
   if (chips.length === 0) return null
 
-  const visibleChips = expanded ? chips : chips.slice(0, 2)
+  const visibleChips = all ? chips : chips.slice(0, 2)
   const remainingChips = chips.length - 2
 
   return (
-    <Box className={`chipContainer ${className}`}>
+    <Box className={cls(`chipContainer ${className}`, ['flex-w', all])}>
       {visibleChips}
-      {remainingChips > 0 && (
-        <Chip
-          label={expanded ? 'Hide' : `+${remainingChips}`}
-          onClick={() => setExpanded(!expanded)}
-        />
-      )}
+      {remainingChips > 0 && !all && <Chip label={`+${remainingChips}`} />}
     </Box>
   )
 }