Trending Tokens UI implementation phase 1

.eslintrc.js

@@ -39,5 +39,6 @@ module.exports = {
     ],
     'jest/expect-expect': 'off',
     'jest/no-disabled-tests': 'off',
+    'no-nested-ternary': 'off',
   },
 };

src/App.tsx

@@ -43,6 +43,7 @@ import { IS_ANDROID, IS_DEV } from '@/env';
 import { prefetchDefaultFavorites } from '@/resources/favorites';
 import Routes from '@/navigation/Routes';
 import { BackendNetworks } from '@/components/BackendNetworks';
+import { AbsolutePortalRoot } from './components/AbsolutePortal';
 
 if (IS_DEV) {
   reactNativeDisableYellowBox && LogBox.ignoreAllLogs();
@@ -76,6 +77,7 @@ function App({ walletReady }: AppProps) {
           <InitialRouteContext.Provider value={initialRoute}>
             <Routes ref={handleNavigatorRef} />
             <PortalConsumer />
+            <AbsolutePortalRoot />
           </InitialRouteContext.Provider>
         )}
         <OfflineToast />

src/chains/index.ts

@@ -15,6 +15,8 @@ const BACKEND_CHAINS = transformBackendNetworksToChains(backendNetworks.networks
 
 export const SUPPORTED_CHAINS: Chain[] = IS_TEST ? [...BACKEND_CHAINS, chainHardhat, chainHardhatOptimism] : BACKEND_CHAINS;
 
+export const SUPPORTED_CHAIN_IDS_ALPHABETICAL = SUPPORTED_CHAINS.sort((a, b) => a.name.localeCompare(b.name)).map(c => c.id);
+
 export const defaultChains: Record<ChainId, Chain> = SUPPORTED_CHAINS.reduce(
   (acc, chain) => {
     acc[chain.id] = chain;

src/components/AbsolutePortal.tsx

@@ -32,17 +32,15 @@ export const AbsolutePortalRoot = () => {
     return () => unsubscribe();
   }, []);
 
-  return (
-    <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'box-none' }}>
-      <View style={{ position: 'relative', pointerEvents: 'box-none' }}>{nodes}</View>
-    </View>
-  );
+  return <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'box-none' }}>{nodes}</View>;
 };
 
 export const AbsolutePortal = ({ children }: PropsWithChildren) => {
   useEffect(() => {
     absolutePortal.addNode(children);
-    return () => absolutePortal.removeNode(children);
+    return () => {
+      absolutePortal.removeNode(children);
+    };
   }, [children]);
 
   return null;

src/components/coin-icon/ChainImage.tsx

@@ -12,9 +12,17 @@ import AvalancheBadge from '@/assets/badges/avalanche.png';
 import BlastBadge from '@/assets/badges/blast.png';
 import DegenBadge from '@/assets/badges/degen.png';
 import ApechainBadge from '@/assets/badges/apechain.png';
-import FastImage, { Source } from 'react-native-fast-image';
+import FastImage, { FastImageProps, Source } from 'react-native-fast-image';
 
-export function ChainImage({ chainId, size = 20 }: { chainId: ChainId | null | undefined; size?: number }) {
+export function ChainImage({
+  chainId,
+  size = 20,
+  style,
+}: {
+  chainId: ChainId | null | undefined;
+  size?: number;
+  style?: FastImageProps['style'];
+}) {
   const source = useMemo(() => {
     switch (chainId) {
       case ChainId.apechain:
@@ -47,6 +55,10 @@ export function ChainImage({ chainId, size = 20 }: { chainId: ChainId | null | u
   if (!chainId) return null;
 
   return (
-    <FastImage key={`${chainId}-badge-${size}`} source={source as Source} style={{ borderRadius: size / 2, height: size, width: size }} />
+    <FastImage
+      key={`${chainId}-badge-${size}`}
+      source={source as Source}
+      style={[{ borderRadius: size / 2, height: size, width: size }, style]}
+    />
   );
 }

src/config/experimental.ts

@@ -30,6 +30,7 @@ export const DEGEN_MODE = 'Degen Mode';
 export const FEATURED_RESULTS = 'Featured Results';
 export const CLAIMABLES = 'Claimables';
 export const NFTS_ENABLED = 'Nfts Enabled';
+export const TRENDING_TOKENS = 'Trending Tokens';
 
 /**
  * A developer setting that pushes log lines to an array in-memory so that
@@ -68,6 +69,7 @@ export const defaultConfig: Record<string, ExperimentalValue> = {
   [FEATURED_RESULTS]: { settings: true, value: false },
   [CLAIMABLES]: { settings: true, value: false },
   [NFTS_ENABLED]: { settings: true, value: !!IS_TEST },
+  [TRENDING_TOKENS]: { settings: true, value: false },
 };
 
 export const defaultConfigValues: Record<string, boolean> = Object.fromEntries(

src/languages/en_US.json

@@ -2974,6 +2974,44 @@
         "back": "Back"
       }
     },
+    "trending_tokens": {
+      "no_results": {
+        "title": "No results",
+        "body": "Try browsing a larger timeframe or a different network or category."
+      },
+      "filters": {
+        "categories": {
+          "trending": "Trending",
+          "new": "New",
+          "farcaster": "Farcaster"
+        },
+        "sort": {
+          "sort": "Sort",
+          "volume": "Volume",
+          "market_cap": "Market Cap",
+          "top_gainers": "Top Gainers",
+          "top_losers": "Top Losers"
+        },
+        "time": {
+          "day": "24h",
+          "week": "1 Week",
+          "month": "1 Month"
+        }
+      }
+    },
+    "network_switcher": {
+      "customize_networks_banner": {
+        "title": "Customize Networks",
+        "description": "Tap the edit button below to set up"
+      },
+      "edit": "Edit",
+      "networks": "Networks",
+      "drag_to_rearrange": "Drag to rearrange",
+      "show_less": "Show less",
+      "show_more": "More Networks",
+      "all_networks": "All Networks"
+    },
+    "done": "Done",
     "copy": "Copy",
     "paste": "Paste"
   }

src/screens/discover/components/DiscoverHome.tsx

@@ -6,6 +6,7 @@ import useExperimentalFlag, {
   MINTS,
   NFT_OFFERS,
   FEATURED_RESULTS,
+  TRENDING_TOKENS,
 } from '@rainbow-me/config/experimentalHooks';
 import { isTestnetChain } from '@/handlers/web3';
 import { Inline, Inset, Stack, Box } from '@/design-system';
@@ -28,6 +29,7 @@ import { FeaturedResultStack } from '@/components/FeaturedResult/FeaturedResultS
 import Routes from '@/navigation/routesNames';
 import { useNavigation } from '@/navigation';
 import { DiscoverFeaturedResultsCard } from './DiscoverFeaturedResultsCard';
+import { TrendingTokens } from './TrendingTokens';
 
 export const HORIZONTAL_PADDING = 20;
 
@@ -42,6 +44,7 @@ export default function DiscoverHome() {
   const mintsEnabled = (useExperimentalFlag(MINTS) || mints_enabled) && !IS_TEST;
   const opRewardsLocalFlag = useExperimentalFlag(OP_REWARDS);
   const opRewardsRemoteFlag = op_rewards_enabled;
+  const trendingTokensEnabled = useExperimentalFlag(TRENDING_TOKENS);
   const testNetwork = isTestnetChain({ chainId });
   const { navigate } = useNavigation();
   const isProfilesEnabled = profilesEnabledLocalFlag && profilesEnabledRemoteFlag;
@@ -67,6 +70,7 @@ export default function DiscoverHome() {
             <GasCard />
             {isProfilesEnabled && <ENSSearchCard />}
           </Inline>
+          {trendingTokensEnabled && <TrendingTokens />}
           <RemoteCardCarousel />
           {mintsEnabled && (
             <Stack space="20px">