From 470c536956106b2fd89c4f81cb2e99e11bfc2ad5 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Tue, 27 Aug 2024 19:38:02 +0100 Subject: [PATCH 1/4] Update trending logic --- src/components/Chip.tsx | 9 +++++++-- src/components/ecosystem/AllApps.tsx | 4 ++-- src/components/ecosystem/AppCardV2.tsx | 6 ++++-- src/components/ecosystem/FavoriteApps.tsx | 6 +++--- src/components/ecosystem/NewApps.tsx | 4 ++-- src/pages/App.tsx | 5 ++++- src/styles/chip.scss | 1 - 7 files changed, 22 insertions(+), 13 deletions(-) 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/ecosystem/AllApps.tsx b/src/components/ecosystem/AllApps.tsx index a1892cc..0ce7e6e 100644 --- a/src/components/ecosystem/AllApps.tsx +++ b/src/components/ecosystem/AllApps.tsx @@ -59,7 +59,7 @@ 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 trendingIndex = trendingAppIds.indexOf(appId) const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps) return ( @@ -68,7 +68,7 @@ const AllApps: React.FC = ({ skaleNetwork, chainsMeta, apps, newAp schainName={app.chain} appName={app.appName} chainsMeta={chainsMeta} - isTrending={isTrending} + trending={trendingIndex + 1} isNew={isNew} /> diff --git a/src/components/ecosystem/AppCardV2.tsx b/src/components/ecosystem/AppCardV2.tsx index 802682c..08f0afc 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,9 @@ export default function AppCard(props: {

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

- {props.isTrending && } + {props.trending && props.trending !== -1 ? ( + + ) : null} {props.isNew && } {appMeta.tags?.includes('pretge') && } diff --git a/src/components/ecosystem/FavoriteApps.tsx b/src/components/ecosystem/FavoriteApps.tsx index 4d554b0..11dd837 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 } = 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 trendingIndex = trendingAppIds.indexOf(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..5410175 100644 --- a/src/components/ecosystem/NewApps.tsx +++ b/src/components/ecosystem/NewApps.tsx @@ -46,7 +46,7 @@ const NewApps: React.FC = ({ const renderAppCard = (app: types.AppWithChainAndName) => { const appId = getAppId(app.chain, app.appName) - const isTrending = trendingAppIds.includes(appId) + const trendingIndex = trendingAppIds.indexOf(appId) return ( = ({ schainName={app.chain} appName={app.appName} chainsMeta={chainsMeta} - isTrending={isTrending} + trending={trendingIndex + 1} /> ) } diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 63a9ea7..746d5d2 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -124,6 +124,7 @@ export default function App(props: { const likesCount = appLikes[appId] || 0 const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps]) + const trendingIndex = trendingAppIds.indexOf(appId) const isNew = isNewApp({ chain, app }, newApps) const handleToggleLike = async () => { @@ -234,7 +235,9 @@ export default function App(props: {

{appAlias}

- {trendingAppIds.includes(appId) && } + {trendingIndex && trendingIndex !== -1 ? ( + + ) : null} {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; } From 004639359469130e3b778f4851fbd837fc561a35 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Tue, 27 Aug 2024 22:12:49 +0100 Subject: [PATCH 2/4] Add getTrendingRank func, fix trending logic --- skale-network | 2 +- src/LikedAppsContext.tsx | 9 ++++++++- src/components/ecosystem/AllApps.tsx | 5 ++--- src/components/ecosystem/AppCardV2.tsx | 4 +--- src/components/ecosystem/FavoriteApps.tsx | 6 +++--- src/components/ecosystem/NewApps.tsx | 5 ++--- src/pages/App.tsx | 17 +++++++++++------ 7 files changed, 28 insertions(+), 20 deletions(-) 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/components/ecosystem/AllApps.tsx b/src/components/ecosystem/AllApps.tsx index 0ce7e6e..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 trendingIndex = trendingAppIds.indexOf(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} - trending={trendingIndex + 1} + trending={getTrendingRank(trendingAppIds, appId)} isNew={isNew} /> diff --git a/src/components/ecosystem/AppCardV2.tsx b/src/components/ecosystem/AppCardV2.tsx index 08f0afc..d5dbd33 100644 --- a/src/components/ecosystem/AppCardV2.tsx +++ b/src/components/ecosystem/AppCardV2.tsx @@ -81,9 +81,7 @@ export default function AppCard(props: {

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

- {props.trending && props.trending !== -1 ? ( - - ) : null} + {props.trending !== undefined && } {props.isNew && } {appMeta.tags?.includes('pretge') && }
diff --git a/src/components/ecosystem/FavoriteApps.tsx b/src/components/ecosystem/FavoriteApps.tsx index 11dd837..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, getAppId } = 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 trendingIndex = trendingAppIds.indexOf(getAppId(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 5410175..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 trendingIndex = trendingAppIds.indexOf(appId) return ( = ({ schainName={app.chain} appName={app.appName} chainsMeta={chainsMeta} - trending={trendingIndex + 1} + trending={getTrendingRank(trendingAppIds, appId)} /> ) } diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 746d5d2..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,7 +131,7 @@ export default function App(props: { const likesCount = appLikes[appId] || 0 const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps]) - const trendingIndex = trendingAppIds.indexOf(appId) + const trendingIndex = getTrendingRank(trendingAppIds, appId) const isNew = isNewApp({ chain, app }, newApps) const handleToggleLike = async () => { @@ -235,9 +242,7 @@ export default function App(props: {

{appAlias}

- {trendingIndex && trendingIndex !== -1 ? ( - - ) : null} + {trendingIndex !== undefined && } {isNew && } {appMeta.tags?.includes('pretge') && }
From 0eea119e7c97423d99fed1f8f16e579660907acd Mon Sep 17 00:00:00 2001 From: Dmytro Date: Wed, 28 Aug 2024 15:57:12 +0100 Subject: [PATCH 3/4] Update metaport dependency --- bun.lockb | Bin 587276 -> 587276 bytes package.json | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/bun.lockb b/bun.lockb index 4177c273665b85dfd555c6fd51a4b29646c9ec7e..0335c210217a32d02e22fa2832805bf689495f24 100755 GIT binary patch delta 191 zcmV;w06_nY>?4fqBakj2DLS2B*#H!H&_!EOu>Aj%nkQ##-&e1jBu6(pT7A$;u}&(9 z2&e3AKZE3upOb)G7=xIJx0s0mb;Cd&C^#1T?4fqBakj2mz&`+=)EE_9xssuraxxk5I&vlp(M{XNkS;!YM*2Ly~&A6Sd^`=!d+izWO4%S2oGT zBiP(YnMoYf>d?682|n@`D{hjNFO-%xaO-%!bO-%%cO-%*2 tO-%-h)B!WM*dYgjIsr46p{55NmycKn43~pk2O Date: Wed, 28 Aug 2024 16:01:39 +0100 Subject: [PATCH 4/4] Fix walletClient types --- src/Router.tsx | 4 +++- src/components/TokenBalanceTile.tsx | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) 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/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