Merge pull request #382 from skalenetwork/add-app-tx-stats

Update trending apps sorting, add app stats, add most liked apps tab

.gitignore

@@ -28,6 +28,7 @@ src/data/metaportConfig*.ts
 src/meta/
 src/assets/validators/index.ts
 src/metadata.json
+src/metrics.json
 
 src/metadata/chainsData.json
 src/metadata/faucet.json

packages/core/src/types/index.ts

@@ -135,6 +135,9 @@ export interface IAddressCounters {
     token_transfers_count: string
     transactions_count: string
     validations_count: string
+    transactions_last_day: number
+    transactions_last_7_days: number
+    transactions_last_30_days: number
 }
 
 export interface IStats {

src/App.scss

@@ -762,6 +762,15 @@ input[type=number] {
   }
 }
 
+.chipMostLiked {
+  background: linear-gradient(180deg, #e8a25b, #e58e36) !important;
+
+
+  p {
+    color: black !important
+  }
+}
+
 .chipNewApp {
   background: linear-gradient(180deg, #65a974, #508d5e) !important;
 
@@ -800,7 +809,7 @@ input[type=number] {
 
 .chipXs {
   border-radius: 15px;
-  padding: 4px 8px;
+  padding: 4px 6px;
 
   svg {
     width: 12px;

src/LikedAppsContext.tsx

@@ -38,8 +38,8 @@ interface LikedAppsContextType {
   refreshLikedApps: () => Promise<void>
   getAppId: (chainName: string, appName: string) => string
   getAppInfoById: (appId: string) => types.IAppId
-  getTrendingApps: () => string[]
-  getTrendingRank: (trendingAppIds: string[], appId: string) => number | undefined
+  getMostLikedApps: () => string[]
+  getMostLikedRank: (mostLikedAppIds: string[], appId: string) => number | undefined
 }
 
 const LikedAppsContext = createContext<LikedAppsContextType | undefined>(undefined)
@@ -133,15 +133,15 @@ export const LikedAppsProvider: React.FC<{ children: React.ReactNode }> = ({ chi
     return { chain, app }
   }
 
-  const getTrendingApps = useCallback(() => {
+  const getMostLikedApps = useCallback(() => {
     return Object.entries(appLikes)
       .sort(([, likesA], [, likesB]) => likesB - likesA)
       .slice(0, MAX_APPS_DEFAULT)
       .map(([appId]) => appId)
   }, [appLikes])
 
-  const getTrendingRank = (trendingAppIds: string[], appId: string): number | undefined => {
-    const idx = trendingAppIds.indexOf(appId)
+  const getMostLikedRank = (mostLikedAppIds: string[], appId: string): number | undefined => {
+    const idx = mostLikedAppIds.indexOf(appId)
     return idx === -1 ? undefined : idx + 1
   }
 
@@ -156,8 +156,8 @@ export const LikedAppsProvider: React.FC<{ children: React.ReactNode }> = ({ chi
         refreshLikedApps: fetchLikedApps,
         getAppId,
         getAppInfoById,
-        getTrendingApps,
-        getTrendingRank
+        getMostLikedApps,
+        getMostLikedRank
       }}
     >
       {children}

src/Router.tsx

@@ -257,7 +257,14 @@ export default function Router() {
           <Routes>
             <Route
               index
-              element={<Start skaleNetwork={mpc.config.skaleNetwork} chainsMeta={chainsMeta} />}
+              element={
+                <Start
+                  skaleNetwork={mpc.config.skaleNetwork}
+                  chainsMeta={chainsMeta}
+                  metrics={metrics}
+                  loadData={loadData}
+                />
+              }
             />
             <Route path="bridge" element={<Bridge isXs={isXs} chainsMeta={chainsMeta} />} />
             <Route path="bridge">
@@ -299,7 +306,15 @@ export default function Router() {
             />
             <Route
               path="ecosystem"
-              element={<Ecosystem isXs={isXs} mpc={mpc} chainsMeta={chainsMeta} />}
+              element={
+                <Ecosystem
+                  isXs={isXs}
+                  mpc={mpc}
+                  chainsMeta={chainsMeta}
+                  metrics={metrics}
+                  loadData={loadData}
+                />
+              }
             />
             <Route path="ecosystem">
               <Route

src/components/Chip.tsx

@@ -53,6 +53,10 @@ export const ChipTrending: React.FC<{ trending?: number }> = ({ trending }) => {
   )
 }
 
+export const ChipMostLiked: React.FC<{}> = ({}) => {
+  return <Chip label="Most Liked" className={cls(cmn.mleft5, 'chipMostLiked', 'chipXs')} />
+}
+
 export const ChipNew: React.FC<{}> = ({}) => {
   return <Chip label="NEW" className={cls(cmn.mleft5, 'chipNewApp', 'chipXs')} />
 }

src/components/HomeComponents.tsx

@@ -29,7 +29,7 @@ import TrendingUpRoundedIcon from '@mui/icons-material/TrendingUpRounded'
 import LinkRoundedIcon from '@mui/icons-material/LinkRounded'
 import PieChartOutlineRoundedIcon from '@mui/icons-material/PieChartOutlineRounded'
 import OutboundRoundedIcon from '@mui/icons-material/OutboundRounded'
-import InterestsRoundedIcon from '@mui/icons-material/InterestsRounded'
+import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded'
 
 interface SectionIcons {
   [key: string]: JSX.Element
@@ -40,7 +40,7 @@ export const SECTION_ICONS: SectionIcons = {
   favorites: <FavoriteRoundedIcon color="primary" />,
   new: <StarRoundedIcon color="primary" />,
   trending: <TrendingUpRoundedIcon color="primary" />,
-  userFavorites: <InterestsRoundedIcon color="primary" />,
+  mostLiked: <PeopleRoundedIcon color="primary" />,
   categories: <OutboundRoundedIcon color="primary" />
 }
 

src/components/ecosystem/AppCardV2.tsx

@@ -33,7 +33,7 @@ import { chainBg, getChainAlias } from '../../core/metadata'
 import CollapsibleDescription from '../CollapsibleDescription'
 import CategoriesChips from './CategoriesChips'
 import SocialButtons from './Socials'
-import { ChipTrending, ChipNew, ChipPreTge } from '../Chip'
+import { ChipMostLiked, ChipNew, ChipPreTge, ChipTrending } from '../Chip'
 
 export default function AppCard(props: {
   skaleNetwork: types.SkaleNetwork
@@ -43,7 +43,8 @@ export default function AppCard(props: {
   transactions?: number
   newApps?: types.AppWithChainAndName[]
   isNew?: boolean
-  trending?: number
+  mostLiked?: number
+  trending?: boolean
 }) {
   const shortAlias = getChainShortAlias(props.chainsMeta, props.schainName)
   const url = `/ecosystem/${shortAlias}/${props.appName}`
@@ -78,10 +79,11 @@ export default function AppCard(props: {
           )}
         </div>
         <div className={cls(cmn.flex, cmn.flexcv, cmn.mtop10)}>
-          <p className={cls(cmn.p, cmn.pPrim, cmn.p600, cmn.p1, 'shortP', cmn.flexg, cmn.mri5)}>
+          <p className={cls(cmn.p, cmn.pPrim, cmn.p600, cmn.p1, 'shortP', cmn.flexg)}>
             {getChainAlias(props.chainsMeta, props.schainName, props.appName)}
           </p>
-          {props.trending !== undefined && <ChipTrending />}
+          {props.mostLiked !== undefined && <ChipMostLiked />}
+          {props.trending && <ChipTrending />}
           {props.isNew && <ChipNew />}
           {appMeta.categories && Object.keys(appMeta.categories).includes('pretge') && (
             <ChipPreTge />

src/components/ecosystem/Socials.tsx

@@ -41,6 +41,7 @@ interface SocialButtonsProps {
   appName?: string
   className?: string
   size?: 'sm' | 'md'
+  all?: boolean
 }
 
 const MAX_SOCIALS_SM = 6
@@ -50,6 +51,7 @@ const SocialButtons: React.FC<SocialButtonsProps> = ({
   chainName,
   appName,
   className,
+  all = false,
   size = 'sm'
 }) => {
   const isMd = size === 'md'
@@ -113,7 +115,7 @@ const SocialButtons: React.FC<SocialButtonsProps> = ({
     }
   ]
 
-  const visibleLinks = isMd ? socialLinks : socialLinks.slice(0, MAX_SOCIALS_SM)
+  const visibleLinks = isMd || all ? socialLinks : socialLinks.slice(0, MAX_SOCIALS_SM)
 
   return (
     <div className={cls(cmn.flex, cmn.flexcv, className)}>

src/components/ecosystem/AllApps.tsx → src/components/ecosystem/tabs/AllApps.tsx

@@ -24,24 +24,32 @@ import React, { useMemo } from 'react'
 import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
 import { type types } from '@/core'
 
-import { useLikedApps } from '../../LikedAppsContext'
-import AppCardV2 from './AppCardV2'
+import { useLikedApps } from '../../../LikedAppsContext'
+import AppCardV2 from '../AppCardV2'
 import { Grid } from '@mui/material'
-import { isNewApp } from '../../core/ecosystem/utils'
-import Loader from '../Loader'
+import { isNewApp, isTrending } from '../../../core/ecosystem/utils'
+import Loader from '../../Loader'
 
 interface AllAppsProps {
   skaleNetwork: types.SkaleNetwork
   chainsMeta: types.ChainsMetadataMap
   apps: types.AppWithChainAndName[]
   newApps: types.AppWithChainAndName[]
   loaded: boolean
+  trendingApps: types.AppWithChainAndName[]
 }
 
-const AllApps: React.FC<AllAppsProps> = ({ skaleNetwork, chainsMeta, apps, newApps, loaded }) => {
-  const { getTrendingApps, getAppId, getTrendingRank } = useLikedApps()
+const AllApps: React.FC<AllAppsProps> = ({
+  skaleNetwork,
+  chainsMeta,
+  apps,
+  newApps,
+  loaded,
+  trendingApps
+}) => {
+  const { getMostLikedApps, getAppId, getMostLikedRank } = useLikedApps()
 
-  const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps])
+  const mostLikedAppIds = useMemo(() => getMostLikedApps(), [getMostLikedApps])
 
   if (!loaded) return <Loader text="Loading apps" />
   if (apps.length === 0)
@@ -67,7 +75,8 @@ const AllApps: React.FC<AllAppsProps> = ({ skaleNetwork, chainsMeta, apps, newAp
               schainName={app.chain}
               appName={app.appName}
               chainsMeta={chainsMeta}
-              trending={getTrendingRank(trendingAppIds, appId)}
+              mostLiked={getMostLikedRank(mostLikedAppIds, appId)}
+              trending={isTrending(trendingApps, app.chain, app.appName)}
               isNew={isNew}
             />
           </Grid>

src/components/ecosystem/FavoriteApps.tsx → src/components/ecosystem/tabs/FavoriteApps.tsx

@@ -20,35 +20,37 @@
  * @file FavoriteApps.tsx
  * @copyright SKALE Labs 2024-Present
  */
+
 import { useMemo } from 'react'
 import { types } from '@/core'
-import { useLikedApps } from '../../LikedAppsContext'
-import AppCard from './AppCardV2'
+import { useLikedApps } from '../../../LikedAppsContext'
+import AppCard from '../AppCardV2'
 import { Button, Grid } from '@mui/material'
 import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded'
 import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
-import Carousel from '../Carousel'
-import ConnectWallet from '../ConnectWallet'
+import Carousel from '../../Carousel'
+import ConnectWallet from '../../ConnectWallet'
 import { Link } from 'react-router-dom'
-import { isNewApp } from '../../core/ecosystem/utils'
+import { isNewApp, isTrending } from '../../../core/ecosystem/utils'
 
 export default function FavoriteApps(props: {
   skaleNetwork: types.SkaleNetwork
   chainsMeta: types.ChainsMetadataMap
   useCarousel?: boolean
   newApps: types.AppWithChainAndName[]
   filteredApps: types.AppWithChainAndName[]
+  trendingApps: types.AppWithChainAndName[]
   isSignedIn: boolean
   error: string | null
 }) {
-  const { getTrendingApps, getAppId, getTrendingRank } = useLikedApps()
-  const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps])
+  const { getMostLikedApps, getAppId, getMostLikedRank } = useLikedApps()
+  const mostLikedAppIds = useMemo(() => getMostLikedApps(), [getMostLikedApps])
 
   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 trendingRank = getTrendingRank(trendingAppIds, getAppId(app.chain, app.appName))
+    const mostLikedRank = getMostLikedRank(mostLikedAppIds, getAppId(app.chain, app.appName))
     const isNew = isNewApp({ chain: app.chain, app: app.appName }, props.newApps)
     return (
       <Grid
@@ -67,7 +69,8 @@ export default function FavoriteApps(props: {
           skaleNetwork={props.skaleNetwork}
           chainsMeta={props.chainsMeta}
           isNew={isNew}
-          trending={trendingRank}
+          mostLiked={mostLikedRank}
+          trending={isTrending(props.trendingApps, app.chain, app.appName)}
         />
       </Grid>
     )