- {props.icon}
-
{props.text}
+
+ {iconElement}
+ {textElement}
)
}
+
+export default Headline
diff --git a/src/components/HomeComponents.tsx b/src/components/HomeComponents.tsx
index 388d12e..d27634f 100644
--- a/src/components/HomeComponents.tsx
+++ b/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:
,
favorites:
,
- new:
,
+ new:
,
trending:
,
categories:
}
diff --git a/src/components/Paymaster.tsx b/src/components/Paymaster.tsx
index 3537f27..5c00101 100644
--- a/src/components/Paymaster.tsx
+++ b/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 }) {
}
className={cls(cmn.mtop20, cmn.mbott10)}
+ icon={
}
+ size="small"
/>
{!address ? (
diff --git a/src/components/delegation/Delegations.tsx b/src/components/delegation/Delegations.tsx
index 90b8256..0916b35 100644
--- a/src/components/delegation/Delegations.tsx
+++ b/src/components/delegation/Delegations.tsx
@@ -63,7 +63,11 @@ export default function Delegations(props: {
props.si[DelegationType.ESCROW2]?.delegations.length === 0)
return (
-
} />
+
}
+ />
{!loaded ? (
diff --git a/src/components/ecosystem/Categories.tsx b/src/components/ecosystem/Categories.tsx
index ad1ac38..b24f6ad 100644
--- a/src/components/ecosystem/Categories.tsx
+++ b/src/components/ecosystem/Categories.tsx
@@ -206,7 +206,7 @@ const CategoryDisplay: React.FC
= ({
/>
}
label={
-
+
{highlightMatch(data.name, searchTerm)}
}
diff --git a/src/components/ecosystem/NewApps.tsx b/src/components/ecosystem/NewApps.tsx
index 42e7412..d04e14c 100644
--- a/src/components/ecosystem/NewApps.tsx
+++ b/src/components/ecosystem/NewApps.tsx
@@ -54,6 +54,7 @@ const NewApps: React.FC = ({
appName={app.appName}
chainsMeta={chainsMeta}
trending={getTrendingRank(trendingAppIds, appId)}
+ isNew={true}
/>
)
}
diff --git a/src/components/ecosystem/TrendingApps.tsx b/src/components/ecosystem/TrendingApps.tsx
index c3aa48e..0536076 100644
--- a/src/components/ecosystem/TrendingApps.tsx
+++ b/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 = ({
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 (
-
-
-
-
-
- )
- })
+ const renderAppCard = (app: types.AppWithChainAndName) => {
+ const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps)
+ return (
+
+
+
+ )
}
- if (trendingApps.length === 0) {
+ if (filteredApps.length === 0) {
return (
@@ -56,32 +56,18 @@ const TrendingApps: React.FC
= ({
}
if (useCarousel) {
- return (
-
- {trendingApps.map((app) => {
- const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps)
- if (!getAppMeta(chainsMeta, app.chain, app.appName)) return null
- return (
-
-
-
- )
- })}
-
- )
+ return {filteredApps.map(renderAppCard)}
}
return (
- {renderAppCards()}
+ {filteredApps.map((app) => (
+
+ {renderAppCard(app)}
+
+ ))}
)
}
-export default TrendingApps
+export default React.memo(TrendingApps)
diff --git a/src/core/ecosystem/categories.ts b/src/core/ecosystem/categories.ts
index d872353..27b1230 100644
--- a/src/core/ecosystem/categories.ts
+++ b/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)
+ )
+ )
+ }
+ ])
+ )
}
diff --git a/src/core/ecosystem/utils.ts b/src/core/ecosystem/utils.ts
index 0f2c1ad..c63f232 100644
--- a/src/core/ecosystem/utils.ts
+++ b/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' &&
diff --git a/src/data/terms-of-service.mdx b/src/data/terms-of-service.mdx
index 1e81e37..e1cb3ba 100644
--- a/src/data/terms-of-service.mdx
+++ b/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
diff --git a/src/pages/Ecosystem.tsx b/src/pages/Ecosystem.tsx
index e86c73b..d58194b 100644
--- a/src/pages/Ecosystem.tsx
+++ b/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: {
/>
}
+ icon={}
iconPosition="start"
className={cls('btn', 'btnSm', cmn.mri5, cmn.mleft5, 'tab', 'fwmobile')}
/>
diff --git a/src/pages/StakeAmount.tsx b/src/pages/StakeAmount.tsx
index b7ba8bb..5d1f931 100644
--- a/src/pages/StakeAmount.tsx
+++ b/src/pages/StakeAmount.tsx
@@ -24,7 +24,14 @@
import { useState, useEffect } from 'react'
import { type Signer } from 'ethers'
import { useParams } from 'react-router-dom'
-import { cmn, cls, type MetaportCore, SkPaper, type interfaces } from '@skalenetwork/metaport'
+import {
+ cmn,
+ cls,
+ type MetaportCore,
+ SkPaper,
+ type interfaces,
+ styles
+} from '@skalenetwork/metaport'
import Container from '@mui/material/Container'
import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded'
@@ -146,8 +153,9 @@ export default function StakeAmount(props: {
}
+ icon={}
className={cls(cmn.mtop20, cmn.mbott10)}
+ size="small"
/>
{props.address ? (
- } />
+ }
+ size="small"
+ />
@@ -310,7 +314,11 @@ export default function Staking(props: {
/>
- } />
+ }
+ size="small"
+ />