Minor UI fixes, update ToS, update metaport

config/mainnet.ts

@@ -116,7 +116,7 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = {
       iconUrl: "https://assets.coingecko.com/coins/images/37476/standard/Screenshot_2024-05-04_004346.png"
     },
     wct1: {
-      name: "Wrapped Curio Ferrari F12tdf",
+      name: "Wrapped Car Token 1",
       symbol: "wCT1",
       iconUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/12648.png",
       decimals: "2"

config/testnet.ts

@@ -140,7 +140,7 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = {
       // Calypso connections
       eth: {
         eth: {
-          address: '0x',
+          address: '0x2aebcdc4f9f9149a50422fff86198cb0939ea165',
           chains: {
             'juicy-low-small-testnet': {
               clone: true

package.json

@@ -20,7 +20,7 @@
     "@mdx-js/rollup": "^2.3.0",
     "@mui/icons-material": "^5.15.14",
     "@mui/material": "^5.15.14",
-    "@skalenetwork/metaport": "3.0.0-develop.4",
+    "@skalenetwork/metaport": "3.0.0-develop.5",
     "@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

@@ -1230,7 +1230,6 @@ input[type=number] {
 
 .appIconHub {
   border-radius: 50%;
-  //background: rgba(0, 0, 0, 0.506) !important;
   padding: 10px;
 }
 

src/SkDrawer.tsx

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

src/components/Headline.tsx

@@ -21,18 +21,45 @@
  * @copyright SKALE Labs 2024-Present
  */
 
-import { cls, cmn } from '@skalenetwork/metaport'
-import { type ReactElement } from 'react'
+import React from 'react'
+import { cls, cmn, styles } from '@skalenetwork/metaport'
 
-export default function Headline(props: {
+interface HeadlineProps {
   text: string
-  className?: string | undefined
-  icon?: ReactElement | undefined
-}) {
+  className?: string
+  icon?: React.ReactElement
+  size?: 'small' | 'medium'
+}
+
+const Headline: React.FC<HeadlineProps> = ({ text, className, icon, size = 'medium' }) => {
+  const commonClasses = cls(cmn.flex, cmn.flexcv, cmn.flexg, className)
+
+  const textElement =
+    size === 'small' ? (
+      <p className={cls(cmn.p, cmn.p2, cmn.p700, cmn.flexg, cmn.cap)}>{text}</p>
+    ) : (
+      <h3 className={cls(cmn.p, cmn.p600, cmn.pSec, cmn.mleft10)}>{text}</h3>
+    )
+
+  const iconElement = icon && (
+    <div
+      className={cls(
+        cmn.flexcv,
+        cmn.flex,
+        cmn.pSec,
+        size === 'small' && [cmn.mri10, styles.chainIconxs]
+      )}
+    >
+      {icon}
+    </div>
+  )
+
   return (
-    <div className={cls(cmn.flex, cmn.flexcv, cmn.flexg, props.className)}>
-      {props.icon}
-      <h3 className={cls(cmn.p, cmn.p600, cmn.pSec, cmn.mleft10)}>{props.text}</h3>
+    <div className={cls(commonClasses, size === 'small' && cmn.m10)}>
+      {iconElement}
+      {textElement}
     </div>
   )
 }
+
+export default Headline

src/components/HomeComponents.tsx

@@ -23,7 +23,7 @@
 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 StarRoundedIcon from '@mui/icons-material/StarRounded'
 import RocketLaunchRoundedIcon from '@mui/icons-material/RocketLaunchRounded'
 import TrendingUpRoundedIcon from '@mui/icons-material/TrendingUpRounded'
 import LinkRoundedIcon from '@mui/icons-material/LinkRounded'
@@ -37,7 +37,7 @@ interface SectionIcons {
 export const SECTION_ICONS: SectionIcons = {
   explore: <RocketLaunchRoundedIcon color="primary" />,
   favorites: <FavoriteRoundedIcon color="primary" />,
-  new: <LabelImportantRoundedIcon color="primary" />,
+  new: <StarRoundedIcon color="primary" />,
   trending: <TrendingUpRoundedIcon color="primary" />,
   categories: <OutboundRoundedIcon color="primary" />
 }

src/components/Paymaster.tsx

@@ -38,7 +38,8 @@ import {
   walletClientToSigner,
   sendTransaction,
   getChainAlias,
-  toWei
+  toWei,
+  styles
 } from '@skalenetwork/metaport'
 
 import ConnectWallet from './ConnectWallet'
@@ -184,8 +185,9 @@ export default function Paymaster(props: { mpc: MetaportCore; name: string }) {
       <PricingInfo info={info} />
       <Headline
         text="Top-up chain"
-        icon={<MonetizationOnRoundedIcon color="primary" />}
         className={cls(cmn.mtop20, cmn.mbott10)}
+        icon={<MonetizationOnRoundedIcon className={cls(styles.chainIconxs)} />}
+        size="small"
       />
       {!address ? (
         <ConnectWallet tile className={cls(cmn.flexg)} />

src/components/delegation/Delegations.tsx

@@ -63,7 +63,11 @@ export default function Delegations(props: {
       props.si[DelegationType.ESCROW2]?.delegations.length === 0)
   return (
     <div>
-      <Headline text="Delegations" icon={<AllInboxRoundedIcon />} />
+      <Headline
+        size="small"
+        text="Delegations"
+        icon={<AllInboxRoundedIcon className={cls(styles.chainIconxs)} />}
+      />
       <div className={cls(cmn.mtop10)} style={{ paddingBottom: '5px' }}></div>
       {!loaded ? (
         <div>

src/components/ecosystem/Categories.tsx

@@ -206,7 +206,7 @@ const CategoryDisplay: React.FC<CategoryDisplayProps> = ({
                     />
                   }
                   label={
-                    <span className={cls(cmn.p, cmn.p2, cmn.p600)}>
+                    <span className={cls(cmn.p, cmn.p3, cmn.p600)}>
                       {highlightMatch(data.name, searchTerm)}
                     </span>
                   }

src/components/ecosystem/NewApps.tsx

@@ -54,6 +54,7 @@ const NewApps: React.FC<NewAppsProps> = ({
         appName={app.appName}
         chainsMeta={chainsMeta}
         trending={getTrendingRank(trendingAppIds, appId)}
+        isNew={true}
       />
     )
   }

src/components/ecosystem/TrendingApps.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { type types } from '@/core'
 import AppCard from './AppCardV2'
 import { Box, Grid } from '@mui/material'
@@ -22,28 +22,28 @@ const TrendingApps: React.FC<TrendingAppsProps> = ({
   newApps,
   trendingApps
 }) => {
-  const renderAppCards = () => {
-    return trendingApps.map((app) => {
-      const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps)
-      if (!getAppMeta(chainsMeta, app.chain, app.appName)) return null
+  const filteredApps = useMemo(
+    () => trendingApps.filter((app) => getAppMeta(chainsMeta, app.chain, app.appName)),
+    [trendingApps, chainsMeta]
+  )
 
-      return (
-        <Grid key={`${app.chain}-${app.appName}`} item xs={12} sm={6} md={4} lg={4}>
-          <Box className={cls('fl-centered dappCard')}>
-            <AppCard
-              skaleNetwork={skaleNetwork}
-              schainName={app.chain}
-              appName={app.appName}
-              chainsMeta={chainsMeta}
-              isNew={isNew}
-            />
-          </Box>
-        </Grid>
-      )
-    })
+  const renderAppCard = (app: types.AppWithChainAndName) => {
+    const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps)
+    return (
+      <Box key={`${app.chain}-${app.appName}`} className={cls('fl-centered dappCard')}>
+        <AppCard
+          skaleNetwork={skaleNetwork}
+          schainName={app.chain}
+          appName={app.appName}
+          chainsMeta={chainsMeta}
+          isNew={isNew}
+          trending={1}
+        />
+      </Box>
+    )
   }
 
-  if (trendingApps.length === 0) {
+  if (filteredApps.length === 0) {
     return (
       <SkPaper gray className="titleSection">
         <div className={cls(cmn.mtop20, cmn.mbott20)}>
@@ -56,32 +56,18 @@ const TrendingApps: React.FC<TrendingAppsProps> = ({
   }
 
   if (useCarousel) {
-    return (
-      <Carousel>
-        {trendingApps.map((app) => {
-          const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps)
-          if (!getAppMeta(chainsMeta, app.chain, app.appName)) return null
-          return (
-            <Box key={`${app.chain}-${app.appName}`} className={cls('fl-centered dappCard')}>
-              <AppCard
-                skaleNetwork={skaleNetwork}
-                schainName={app.chain}
-                appName={app.appName}
-                chainsMeta={chainsMeta}
-                isNew={isNew}
-              />
-            </Box>
-          )
-        })}
-      </Carousel>
-    )
+    return <Carousel>{filteredApps.map(renderAppCard)}</Carousel>
   }
 
   return (
     <Grid container spacing={2}>
-      {renderAppCards()}
+      {filteredApps.map((app) => (
+        <Grid key={`${app.chain}-${app.appName}`} item xs={12} sm={6} md={4} lg={4}>
+          {renderAppCard(app)}
+        </Grid>
+      ))}
     </Grid>
   )
 }
 
-export default TrendingApps
+export default React.memo(TrendingApps)

src/core/ecosystem/categories.ts

@@ -86,5 +86,25 @@ export const categories: Categories = {
   tools: { name: 'Tools', subcategories: {} },
   wallet: { name: 'Wallet', subcategories: {} },
   metaverse: { name: 'Metaverse', subcategories: {} },
-  web3: { name: 'Web3', subcategories: {} }
+  web3: { name: 'Web3', subcategories: {} },
+  pretge: { name: 'Pre-TGE', subcategories: {} }
+}
+
+export const sortCategories = (categories: Categories): Categories => {
+  const sortedEntries = Object.entries(categories).sort(([, a], [, b]) =>
+    a.name.localeCompare(b.name)
+  )
+  return Object.fromEntries(
+    sortedEntries.map(([key, category]) => [
+      key,
+      {
+        ...category,
+        subcategories: Object.fromEntries(
+          Object.entries(category.subcategories).sort(([, a], [, b]) =>
+            a.name.localeCompare(b.name)
+          )
+        )
+      }
+    ])
+  )
 }

src/core/ecosystem/utils.ts

@@ -22,7 +22,7 @@
  */
 
 import { type types } from '@/core'
-import { categories } from './categories'
+import { categories, sortCategories } from './categories'
 
 export interface ExpandedItems {
   [key: string]: boolean
@@ -48,7 +48,7 @@ export const getSelectedCategoriesCount = (checkedItems: string[]): number => {
 }
 
 export const filterCategories = (searchTerm: string) => {
-  return Object.entries(categories).filter(([_, data]) => {
+  return Object.entries(sortCategories(categories)).filter(([_, data]) => {
     const categoryMatch = data.name.toLowerCase().includes(searchTerm.toLowerCase())
     const subcategoryMatch =
       typeof data.subcategories === 'object' &&

src/data/terms-of-service.mdx

@@ -66,6 +66,27 @@ Some jurisdictions may not allow the exclusion or limitation of
 incidental or consequential damages, so the above exclusions shall only
 apply to the extent permissible under applicable law.
 
+### DATA COLLECTION AND USAGE
+
+Purpose of Data Collection
+By using the SKALE Portal, you consent to the collection and storage of certain data related to your usage of the platform. This includes the ability to save your preferences such as favorite decentralized applications (dApps) and a history of your recent dApp interactions after connecting your wallet.
+
+Scope of Data Collection
+The data collected may include:
+
+- Information on the dApps you interact with through the platform.
+- Preferences or settings that you choose to save, such as your favorite dApps.
+
+Use of Collected Data
+The collected data is used solely to enhance your experience on the platform by allowing you to:
+
+- Quickly access your favorite dApps.
+- View your recent dApp activities for convenience.
+- We do not share your data with third parties, except as required by law, or use it for purposes other than those stated above.
+
+Data Security
+We employ industry-standard security measures to protect the data we collect. However, you acknowledge that no system can guarantee absolute security, and we are not responsible for unauthorized access to your data resulting from circumstances beyond our control.
+
 ### INDEMNIFICATION
 
 _You will be responsible for and will pay us, our affiliates, and our

src/pages/Ecosystem.tsx

@@ -25,7 +25,7 @@ import { Helmet } from 'react-helmet'
 import { Container, Stack, Box, Tab, Tabs, Button } from '@mui/material'
 import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded'
 import FavoriteRoundedIcon from '@mui/icons-material/FavoriteRounded'
-import TimelineRoundedIcon from '@mui/icons-material/TimelineRounded'
+import TrendingUpRoundedIcon from '@mui/icons-material/TrendingUpRounded'
 import StarRoundedIcon from '@mui/icons-material/StarRounded'
 import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded'
 
@@ -196,7 +196,7 @@ export default function Ecosystem(props: {
             />
             <Tab
               label="Trending"
-              icon={<TimelineRoundedIcon />}
+              icon={<TrendingUpRoundedIcon />}
               iconPosition="start"
               className={cls('btn', 'btnSm', cmn.mri5, cmn.mleft5, 'tab', 'fwmobile')}
             />