-
+
-
+
{MAINNET_CHAIN_NAME !== 'mainnet' ? (
diff --git a/src/LikedAppsContext.tsx b/src/LikedAppsContext.tsx
new file mode 100644
index 00000000..1d6fb72f
--- /dev/null
+++ b/src/LikedAppsContext.tsx
@@ -0,0 +1,167 @@
+/**
+ * @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
+ refreshLikedApps: () => Promise
+ getAppId: (chainName: string, appName: string) => string
+ getAppInfoById: (appId: string) => types.IAppId
+ getTrendingApps: () => string[]
+}
+
+const LikedAppsContext = createContext(undefined)
+
+export const LikedAppsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+ const [likedApps, setLikedApps] = useState([])
+ const [appLikes, setAppLikes] = useState({})
+ const [isLoading, setIsLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const { address } = useWagmiAccount()
+ const { isSignedIn } = useAuth()
+
+ const fetchLikedApps = useCallback(async () => {
+ if (!isSignedIn || !address) {
+ setLikedApps([])
+ setIsLoading(false)
+ return
+ }
+ setIsLoading(true)
+ setError(null)
+ try {
+ const response = await fetch(`${API_URL}/apps/liked`, {
+ credentials: 'include'
+ })
+ if (!response.ok) {
+ throw new Error('Failed to fetch liked apps')
+ }
+ const data = await response.json()
+ setLikedApps(data.liked_apps)
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'An error occurred')
+ } finally {
+ setIsLoading(false)
+ }
+ }, [isSignedIn, address])
+
+ const fetchAppLikes = useCallback(async () => {
+ try {
+ const response = await fetch(`${API_URL}/apps/all`)
+ if (!response.ok) {
+ throw new Error('Failed to fetch app likes')
+ }
+ const data = await response.json()
+ setAppLikes(data)
+ } catch (err) {
+ console.error('Error fetching app likes:', err)
+ }
+ }, [])
+
+ const toggleLikedApp = async (appId: string) => {
+ const isLiked = likedApps.includes(appId)
+ const endpoint = isLiked ? `${API_URL}/apps/unlike` : `${API_URL}/apps/like`
+ try {
+ const response = await fetch(endpoint, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({ app_id: appId }),
+ credentials: 'include'
+ })
+ if (!response.ok) {
+ throw new Error('Failed to update liked status')
+ }
+
+ setLikedApps((prev) => (isLiked ? prev.filter((id) => id !== appId) : [...prev, appId]))
+ await fetchAppLikes()
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'An error occurred')
+ }
+ }
+
+ useEffect(() => {
+ fetchAppLikes()
+ const interval = setInterval(fetchAppLikes, LIKES_REFRESH_INTERVAL)
+ return () => clearInterval(interval)
+ }, [fetchAppLikes])
+
+ useEffect(() => {
+ if (isSignedIn && address) {
+ fetchLikedApps()
+ } else {
+ setLikedApps([])
+ setIsLoading(false)
+ }
+ }, [isSignedIn, address, fetchLikedApps])
+
+ const getAppId = (chainName: string, appName: string) => `${chainName}--${appName}`
+ const getAppInfoById = (appId: string) => {
+ const [chain, app] = appId.split('--')
+ return { chain, app }
+ }
+
+ const getTrendingApps = useCallback(() => {
+ return Object.entries(appLikes)
+ .sort(([, likesA], [, likesB]) => likesB - likesA)
+ .slice(0, MAX_APPS_DEFAULT)
+ .map(([appId]) => appId)
+ }, [appLikes])
+
+ return (
+
+ {children}
+
+ )
+}
+
+export const useLikedApps = () => {
+ const context = useContext(LikedAppsContext)
+ if (context === undefined) {
+ throw new Error('useLikedApps must be used within a LikedAppsProvider')
+ }
+ return context
+}
diff --git a/src/Router.tsx b/src/Router.tsx
index da4fb317..e3a3be9a 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -18,18 +18,19 @@ import {
useWagmiSwitchNetwork,
walletClientToSigner,
enforceNetwork,
- type interfaces,
cls,
cmn
} from '@skalenetwork/metaport'
+import { type types } from '@/core'
+
import Bridge from './pages/Bridge'
import Faq from './pages/Faq'
import Terms from './pages/Terms'
import Chains from './pages/Chains'
import Chain from './pages/Chain'
import Stats from './pages/Stats'
-import Apps from './pages/Apps'
+import Ecosystem from './pages/Ecosystem'
import App from './pages/App'
import History from './pages/History'
import Portfolio from './pages/Portfolio'
@@ -53,8 +54,7 @@ import { getValidators } from './core/delegation/validators'
import { initContracts } from './core/contracts'
import { getStakingInfoMap } from './core/delegation/staking'
import { formatSChains } from './core/chain'
-import { IMetrics, ISChain, IStats, IAppId } from './core/types'
-import { getTopAppsByTransactions } from './core/explorer'
+
import { loadMeta } from './core/metadata'
export default function Router() {
@@ -64,11 +64,10 @@ export default function Router() {
const theme = useTheme()
const isXs = useMediaQuery(theme.breakpoints.down('sm'))
- const [chainsMeta, setChainsMeta] = useState(null)
- const [schains, setSchains] = useState([])
- const [metrics, setMetrics] = useState(null)
- const [topApps, setTopApps] = useState(null)
- const [stats, setStats] = useState(null)
+ const [chainsMeta, setChainsMeta] = useState(null)
+ const [schains, setSchains] = useState([])
+ const [metrics, setMetrics] = useState(null)
+ const [stats, setStats] = useState(null)
const [termsAccepted, setTermsAccepted] = useState(false)
const [stakingTermsAccepted, setStakingTermsAccepted] = useState(false)
@@ -77,7 +76,7 @@ export default function Router() {
const [validators, setValidators] = useState([])
const [si, setSi] = useState({ 0: null, 1: null, 2: null })
- const [customAddress, setCustomAddress] = useState(undefined)
+ const [customAddress, setCustomAddress] = useState(undefined)
const mpc = useMetaportStore((state: MetaportState) => state.mpc)
const transfersHistory = useMetaportStore((state) => state.transfersHistory)
@@ -98,7 +97,7 @@ export default function Router() {
}, [])
useEffect(() => {
- setCustomAddress((searchParams.get('_customAddress') as interfaces.AddressType) ?? undefined)
+ setCustomAddress((searchParams.get('_customAddress') as types.AddressType) ?? undefined)
}, [location])
useEffect(() => {
@@ -145,7 +144,6 @@ export default function Router() {
const response = await fetch(`https://${endpoint}/files/metrics.json`)
const metricsJson = await response.json()
setMetrics(metricsJson)
- setTopApps(getTopAppsByTransactions(metricsJson.metrics, 10))
} catch (e) {
console.log('Failed to load metrics')
console.error(e)
@@ -239,13 +237,12 @@ export default function Router() {
@@ -278,6 +275,12 @@ export default function Router() {
/>
}
/>
+
+
-
diff --git a/src/SkBottomNavigation.tsx b/src/SkBottomNavigation.tsx
index a0066716..ea2bf2cf 100644
--- a/src/SkBottomNavigation.tsx
+++ b/src/SkBottomNavigation.tsx
@@ -31,6 +31,7 @@ import SwapHorizontalCircleOutlinedIcon from '@mui/icons-material/SwapHorizontal
import PieChartOutlineOutlinedIcon from '@mui/icons-material/PieChartOutlineOutlined'
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined'
import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined'
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded'
export default function SkBottomNavigation() {
const [value, setValue] = useState(0)
@@ -41,8 +42,9 @@ 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('/chains') || location.pathname.includes('/admin')) setValue(2)
- if (location.pathname.includes('/staking')) setValue(3)
+ if (location.pathname.includes('/ecosystem') || location.pathname.includes('/apps')) setValue(2)
+ if (location.pathname.includes('/chains') || location.pathname.includes('/admin')) setValue(3)
+ if (location.pathname.includes('/staking')) setValue(4)
}, [location])
return (
@@ -69,8 +71,15 @@ export default function SkBottomNavigation() {
}}
/>
Bridge
Network
+
-
+
-
+
-
+
-
+
NEW
-
- )
-}
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 6e607766..e9f8cd11 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -21,10 +21,16 @@
* @copyright SKALE Labs 2024-Present
*/
+import { ReactElement } from 'react'
import Button from '@mui/material/Button'
import { Link } from 'react-router-dom'
import { cmn, cls } from '@skalenetwork/metaport'
-import { BreadcrumbSection } from '../core/types'
+
+export interface BreadcrumbSection {
+ icon: ReactElement
+ text: string
+ url?: string
+}
export default function Breadcrumbs(props: { sections: BreadcrumbSection[]; className?: string }) {
return (
@@ -32,14 +38,14 @@ export default function Breadcrumbs(props: { sections: BreadcrumbSection[]; clas
{props.sections.map((section: BreadcrumbSection, index) => (
-
-
-
-
- 
-
-
-
- AppChains
-- Apps and games hosted on dedicated SKALE Chains -
-
-
-
- props.chainsMeta[schain.name])
- : props.schains
- }
- metrics={props.metrics}
- chainsMeta={props.chainsMeta}
- />
-
-
{section.url ? (
-
-