diff --git a/bun.lockb b/bun.lockb index 4177c27..0335c21 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index ea975a5..f47bf27 100644 --- a/package.json +++ b/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.3", + "@skalenetwork/metaport": "3.0.0-develop.4", "@skalenetwork/skale-contracts-ethers-v6": "1.0.1", "@transak/transak-sdk": "^3.1.1", "@types/react-copy-to-clipboard": "^5.0.4", diff --git a/skale-network b/skale-network index 2c1f37b..c380e3e 160000 --- a/skale-network +++ b/skale-network @@ -1 +1 @@ -Subproject commit 2c1f37b5ae24061391241dc5fa5d692b2afecce4 +Subproject commit c380e3ed4b866723fe4e8a1d26065127d70067d4 diff --git a/src/LikedAppsContext.tsx b/src/LikedAppsContext.tsx index 1d6fb72..926f719 100644 --- a/src/LikedAppsContext.tsx +++ b/src/LikedAppsContext.tsx @@ -39,6 +39,7 @@ interface LikedAppsContextType { getAppId: (chainName: string, appName: string) => string getAppInfoById: (appId: string) => types.IAppId getTrendingApps: () => string[] + getTrendingRank: (trendingAppIds: string[], appId: string) => number | undefined } const LikedAppsContext = createContext(undefined) @@ -139,6 +140,11 @@ export const LikedAppsProvider: React.FC<{ children: React.ReactNode }> = ({ chi .map(([appId]) => appId) }, [appLikes]) + const getTrendingRank = (trendingAppIds: string[], appId: string): number | undefined => { + const idx = trendingAppIds.indexOf(appId) + return idx === -1 ? undefined : idx + 1 + } + return ( = ({ chi refreshLikedApps: fetchLikedApps, getAppId, getAppInfoById, - getTrendingApps + getTrendingApps, + getTrendingRank }} > {children} diff --git a/src/Router.tsx b/src/Router.tsx index 421232e..8aaae88 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -23,6 +23,8 @@ import './App.scss' import { useState, useEffect } from 'react' +import { WalletClient } from 'viem' + import { Helmet } from 'react-helmet' import { useLocation, Routes, Route, useSearchParams } from 'react-router-dom' import { TransitionGroup, CSSTransition } from 'react-transition-group' @@ -132,7 +134,7 @@ export default function Router() { const { chainId } = await mpc.mainnet().provider.getNetwork() await enforceNetwork( chainId, - walletClient, + walletClient as WalletClient, switchChainAsync!, mpc.config.skaleNetwork, MAINNET_CHAIN_NAME diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index cf97eef..a613aad 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -44,8 +44,13 @@ const Chip: React.FC<{ ) } -export const ChipTrending: React.FC<{}> = ({}) => { - return +export const ChipTrending: React.FC<{ trending?: number }> = ({ trending }) => { + return ( + + ) } export const ChipNew: React.FC<{}> = ({}) => { diff --git a/src/components/TokenBalanceTile.tsx b/src/components/TokenBalanceTile.tsx index d324cf5..b02be41 100644 --- a/src/components/TokenBalanceTile.tsx +++ b/src/components/TokenBalanceTile.tsx @@ -22,6 +22,7 @@ */ import { Contract } from 'ethers' +import { WalletClient } from 'viem' import { useState, useEffect } from 'react' import { @@ -85,7 +86,7 @@ export default function TokenBalanceTile(props: { mpc: MetaportCore; chain: stri const { chainId } = await props.mpc.provider(props.chain).getNetwork() await enforceNetwork( chainId, - walletClient, + walletClient as WalletClient, switchChainAsync!, props.mpc.config.skaleNetwork, props.chain diff --git a/src/components/ecosystem/AllApps.tsx b/src/components/ecosystem/AllApps.tsx index a1892cc..68dcf11 100644 --- a/src/components/ecosystem/AllApps.tsx +++ b/src/components/ecosystem/AllApps.tsx @@ -39,7 +39,7 @@ interface AllAppsProps { } const AllApps: React.FC = ({ skaleNetwork, chainsMeta, apps, newApps, loaded }) => { - const { getTrendingApps, getAppId } = useLikedApps() + const { getTrendingApps, getAppId, getTrendingRank } = useLikedApps() const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps]) @@ -59,7 +59,6 @@ const AllApps: React.FC = ({ skaleNetwork, chainsMeta, apps, newAp {apps.map((app: types.AppWithChainAndName) => { const appId = getAppId(app.chain, app.appName) - const isTrending = trendingAppIds.includes(appId) const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps) return ( @@ -68,7 +67,7 @@ const AllApps: React.FC = ({ skaleNetwork, chainsMeta, apps, newAp schainName={app.chain} appName={app.appName} chainsMeta={chainsMeta} - isTrending={isTrending} + trending={getTrendingRank(trendingAppIds, appId)} isNew={isNew} /> diff --git a/src/components/ecosystem/AppCardV2.tsx b/src/components/ecosystem/AppCardV2.tsx index 802682c..d5dbd33 100644 --- a/src/components/ecosystem/AppCardV2.tsx +++ b/src/components/ecosystem/AppCardV2.tsx @@ -42,8 +42,8 @@ export default function AppCard(props: { chainsMeta: types.ChainsMetadataMap transactions?: number newApps?: types.AppWithChainAndName[] - isTrending?: boolean isNew?: boolean + trending?: number }) { const shortAlias = getChainShortAlias(props.chainsMeta, props.schainName) const url = `/ecosystem/${shortAlias}/${props.appName}` @@ -81,7 +81,7 @@ export default function AppCard(props: {

{getChainAlias(props.chainsMeta, props.schainName, props.appName)}

- {props.isTrending && } + {props.trending !== undefined && } {props.isNew && } {appMeta.tags?.includes('pretge') && } diff --git a/src/components/ecosystem/FavoriteApps.tsx b/src/components/ecosystem/FavoriteApps.tsx index 4d554b0..54e9001 100644 --- a/src/components/ecosystem/FavoriteApps.tsx +++ b/src/components/ecosystem/FavoriteApps.tsx @@ -41,14 +41,14 @@ export default function FavoriteApps(props: { isSignedIn: boolean error: string | null }) { - const { getTrendingApps } = useLikedApps() + const { getTrendingApps, getAppId, getTrendingRank } = useLikedApps() const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps]) if (!props.isSignedIn) return if (props.error) return
Error: {props.error}
const appCards = props.filteredApps.map((app) => { - const isTrending = trendingAppIds.includes(`${app.chain}-${app.appName}`) + const trendingRank = getTrendingRank(trendingAppIds, getAppId(app.chain, app.appName)) const isNew = isNewApp({ chain: app.chain, app: app.appName }, props.newApps) return ( ) diff --git a/src/components/ecosystem/NewApps.tsx b/src/components/ecosystem/NewApps.tsx index cb1a066..42e7412 100644 --- a/src/components/ecosystem/NewApps.tsx +++ b/src/components/ecosystem/NewApps.tsx @@ -41,12 +41,11 @@ const NewApps: React.FC = ({ chainsMeta, useCarousel = false }) => { - const { getTrendingApps, getAppId } = useLikedApps() + const { getTrendingApps, getAppId, getTrendingRank } = useLikedApps() const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps]) const renderAppCard = (app: types.AppWithChainAndName) => { const appId = getAppId(app.chain, app.appName) - const isTrending = trendingAppIds.includes(appId) return ( = ({ schainName={app.chain} appName={app.appName} chainsMeta={chainsMeta} - isTrending={isTrending} + trending={getTrendingRank(trendingAppIds, appId)} /> ) } diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 63a9ea7..1921f2d 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -80,8 +80,15 @@ export default function App(props: { chainsMeta: types.ChainsMetadataMap }) { let { chain, app } = useParams() - const { likedApps, appLikes, toggleLikedApp, getAppId, getTrendingApps, refreshLikedApps } = - useLikedApps() + const { + likedApps, + appLikes, + toggleLikedApp, + getAppId, + getTrendingApps, + refreshLikedApps, + getTrendingRank + } = useLikedApps() const { isSignedIn, handleSignIn } = useAuth() const { address } = useWagmiAccount() @@ -124,6 +131,7 @@ export default function App(props: { const likesCount = appLikes[appId] || 0 const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps]) + const trendingIndex = getTrendingRank(trendingAppIds, appId) const isNew = isNewApp({ chain, app }, newApps) const handleToggleLike = async () => { @@ -234,7 +242,7 @@ export default function App(props: {

{appAlias}

- {trendingAppIds.includes(appId) && } + {trendingIndex !== undefined && } {isNew && } {appMeta.tags?.includes('pretge') && }
diff --git a/src/styles/chip.scss b/src/styles/chip.scss index 036e034..1a790b3 100644 --- a/src/styles/chip.scss +++ b/src/styles/chip.scss @@ -3,7 +3,6 @@ overflow-x: auto; white-space: nowrap; gap: 8px; - // border-radius: 25px; position: relative; }