Fix trending apps chips, update metaport dependency

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",

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<LikedAppsContextType | undefined>(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 (
     <LikedAppsContext.Provider
       value={{
@@ -150,7 +156,8 @@ export const LikedAppsProvider: React.FC<{ children: React.ReactNode }> = ({ chi
         refreshLikedApps: fetchLikedApps,
         getAppId,
         getAppInfoById,
-        getTrendingApps
+        getTrendingApps,
+        getTrendingRank
       }}
     >
       {children}

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

src/components/Chip.tsx

@@ -44,8 +44,13 @@ const Chip: React.FC<{
   )
 }
 
-export const ChipTrending: React.FC<{}> = ({}) => {
-  return <Chip label="Trending" className={cls(cmn.mleft5, 'chipTrending', 'chipXs')} />
+export const ChipTrending: React.FC<{ trending?: number }> = ({ trending }) => {
+  return (
+    <Chip
+      label={trending ? `#${trending} on Trending` : 'Trending'}
+      className={cls(cmn.mleft5, 'chipTrending', 'chipXs')}
+    />
+  )
 }
 
 export const ChipNew: React.FC<{}> = ({}) => {

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

src/components/ecosystem/AllApps.tsx

@@ -39,7 +39,7 @@ interface AllAppsProps {
 }
 
 const AllApps: React.FC<AllAppsProps> = ({ 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<AllAppsProps> = ({ skaleNetwork, chainsMeta, apps, newAp
     <Grid container spacing={2}>
       {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 (
           <Grid key={appId} item xs={12} sm={6} md={4} lg={4}>
@@ -68,7 +67,7 @@ const AllApps: React.FC<AllAppsProps> = ({ skaleNetwork, chainsMeta, apps, newAp
               schainName={app.chain}
               appName={app.appName}
               chainsMeta={chainsMeta}
-              isTrending={isTrending}
+              trending={getTrendingRank(trendingAppIds, appId)}
               isNew={isNew}
             />
           </Grid>

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: {
           <p className={cls(cmn.p, cmn.pPrim, cmn.p600, cmn.p1, 'shortP', cmn.flexg, cmn.mri5)}>
             {getChainAlias(props.chainsMeta, props.schainName, props.appName)}
           </p>
-          {props.isTrending && <ChipTrending />}
+          {props.trending !== undefined && <ChipTrending />}
           {props.isNew && <ChipNew />}
           {appMeta.tags?.includes('pretge') && <ChipPreTge />}
         </div>

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 <ConnectWallet customText="Sign in to see your favorite dApps" />
   if (props.error) return <div>Error: {props.error}</div>
 
   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 (
       <Grid
@@ -67,7 +67,7 @@ export default function FavoriteApps(props: {
           skaleNetwork={props.skaleNetwork}
           chainsMeta={props.chainsMeta}
           isNew={isNew}
-          isTrending={isTrending}
+          trending={trendingRank}
         />
       </Grid>
     )

src/components/ecosystem/NewApps.tsx

@@ -41,20 +41,19 @@ const NewApps: React.FC<NewAppsProps> = ({
   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 (
       <AppCard
         key={`${app.chain}-${app.appName}`}
         skaleNetwork={skaleNetwork}
         schainName={app.chain}
         appName={app.appName}
         chainsMeta={chainsMeta}
-        isTrending={isTrending}
+        trending={getTrendingRank(trendingAppIds, appId)}
       />
     )
   }

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: {
                 <div className={cls(cmn.flex, cmn.flexcv)}>
                   <h2 className={cls(cmn.nom, cmn.p1)}>{appAlias}</h2>
                   <div className={cls(cmn.flex, cmn.mleft10)}>
-                    {trendingAppIds.includes(appId) && <ChipTrending />}
+                    {trendingIndex !== undefined && <ChipTrending trending={trendingIndex} />}
                     {isNew && <ChipNew />}
                     {appMeta.tags?.includes('pretge') && <ChipPreTge />}
                   </div>

src/styles/chip.scss

@@ -3,7 +3,6 @@
     overflow-x: auto;
     white-space: nowrap;
     gap: 8px;
-    // border-radius: 25px;
     position: relative;
 }