Merge branch 'develop' into @kane/APP-2081

src/App.tsx

@@ -1,6 +1,6 @@
 import '@/languages';
 import * as Sentry from '@sentry/react-native';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, memo } from 'react';
 import { AppRegistry, Dimensions, LogBox, StyleSheet, View } from 'react-native';
 import { Toaster } from 'sonner-native';
 import { MobileWalletProtocolProvider } from '@coinbase/mobile-wallet-protocol-host';
@@ -9,9 +9,8 @@ import { useApplicationSetup } from '@/hooks/useApplicationSetup';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { enableScreens } from 'react-native-screens';
-import { connect, Provider as ReduxProvider } from 'react-redux';
+import { connect, Provider as ReduxProvider, shallowEqual } from 'react-redux';
 import { RecoilRoot } from 'recoil';
-import PortalConsumer from '@/components/PortalConsumer';
 import ErrorBoundary from '@/components/error-boundary/ErrorBoundary';
 import { OfflineToast } from '@/components/toasts';
 import { designSystemPlaygroundEnabled, reactNativeDisableYellowBox, showNetworkRequests, showNetworkResponses } from '@/config/debug';
@@ -24,7 +23,6 @@ import store, { AppDispatch, type AppState } from '@/redux/store';
 import { MainThemeProvider } from '@/theme/ThemeContext';
 import { SharedValuesProvider } from '@/helpers/SharedValuesContext';
 import { InitialRouteContext } from '@/navigation/initialRoute';
-import { Portal } from '@/react-native-cool-modals/Portal';
 import { NotificationsHandler } from '@/notifications/NotificationsHandler';
 import { analyticsV2 } from '@/analytics';
 import { getOrCreateDeviceId } from '@/analytics/utils';
@@ -39,6 +37,7 @@ import { RootStackParamList } from '@/navigation/types';
 import { IS_ANDROID, IS_DEV } from '@/env';
 import { prefetchDefaultFavorites } from '@/resources/favorites';
 import Routes from '@/navigation/Routes';
+import { BackupsSync } from '@/state/sync/BackupsSync';
 import { BackendNetworks } from '@/components/BackendNetworks';
 import { AbsolutePortalRoot } from './components/AbsolutePortal';
 
@@ -68,28 +67,39 @@ function App({ walletReady }: AppProps) {
   }, []);
 
   return (
-    <Portal>
+    <>
       <View style={[sx.container, { paddingBottom: IS_ANDROID ? bottom : 0 }]}>
         {initialRoute && (
           <InitialRouteContext.Provider value={initialRoute}>
             <Routes ref={handleNavigatorRef} />
-            <PortalConsumer />
-            <AbsolutePortalRoot />
           </InitialRouteContext.Provider>
         )}
         <OfflineToast />
         <Toaster />
       </View>
       <NotificationsHandler walletReady={walletReady} />
       <DeeplinkHandler initialRoute={initialRoute} walletReady={walletReady} />
+      <BackupsSync />
       <BackendNetworks />
-    </Portal>
+      <AbsolutePortalRoot />
+    </>
   );
 }
 
-const AppWithRedux = connect<AppProps, AppDispatch, AppProps, AppState>(state => ({
-  walletReady: state.appState.walletReady,
-}))(App);
+const AppWithRedux = connect<AppProps, AppDispatch, AppProps, AppState>(
+  state => ({
+    walletReady: state.appState.walletReady,
+  }),
+  null,
+  null,
+  {
+    areStatesEqual: (next, prev) => {
+      // Only update if walletReady actually changed
+      return next.appState.walletReady === prev.appState.walletReady;
+    },
+    areOwnPropsEqual: shallowEqual,
+  }
+)(memo(App));
 
 function Root() {
   const [initializing, setInitializing] = useState(true);

src/__swaps__/screens/Swap/hooks/useSearchCurrencyLists.ts

@@ -321,7 +321,7 @@ export function useSearchCurrencyLists() {
   const { data: verifiedAssets, isLoading: isLoadingVerifiedAssets } = useTokenSearch(
     {
       list: 'verifiedAssets',
-      chainId: isAddress(query) ? state.toChainId : undefined,
+      chainId: state.toChainId,
       keys: isAddress(query) ? ['address'] : ['name', 'symbol'],
       threshold: isAddress(query) ? 'CASE_SENSITIVE_EQUAL' : 'CONTAINS',
       query: query.length > 0 ? query : undefined,
@@ -417,7 +417,7 @@ export function useSearchCurrencyLists() {
     {
       enabled: memoizedData.enableUnverifiedSearch,
       select: (data: TokenSearchResult) => {
-        return getExactMatches(data, query).slice(0, MAX_UNVERIFIED_RESULTS);
+        return isAddress(query) ? getExactMatches(data, query).slice(0, MAX_UNVERIFIED_RESULTS) : data.slice(0, MAX_UNVERIFIED_RESULTS);
       },
     }
   );

src/__swaps__/screens/Swap/resources/search/discovery.ts

@@ -7,7 +7,7 @@ import { useQuery } from '@tanstack/react-query';
 import { parseTokenSearch } from './utils';
 
 const tokenSearchHttp = new RainbowFetchClient({
-  baseURL: 'https://token-search.rainbow.me/v3/discovery',
+  baseURL: 'https://token-search.rainbow.me/v3/trending/swaps',
   headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json',

src/__swaps__/screens/Swap/resources/search/search.ts

@@ -12,7 +12,7 @@ import { parseTokenSearch } from './utils';
 const ALL_VERIFIED_TOKENS_PARAM = '/?list=verifiedAssets';
 
 const tokenSearchHttp = new RainbowFetchClient({
-  baseURL: 'https://token-search.rainbow.me/v2',
+  baseURL: 'https://token-search.rainbow.me/v3/tokens',
   headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json',
@@ -30,13 +30,19 @@ export type TokenSearchArgs = {
   list: TokenSearchListId;
   threshold?: TokenSearchThreshold;
   query?: string;
+  shouldPersist?: boolean;
 };
 
 // ///////////////////////////////////////////////
 // Query Key
 
-const tokenSearchQueryKey = ({ chainId, fromChainId, keys, list, threshold, query }: TokenSearchArgs) =>
-  createQueryKey('TokenSearch', { chainId, fromChainId, keys, list, threshold, query }, { persisterVersion: 2 });
+const tokenSearchQueryKey = ({ chainId, fromChainId, keys, list, threshold, query, shouldPersist }: TokenSearchArgs) => {
+  return createQueryKey(
+    'TokenSearch',
+    { chainId, fromChainId, keys, list, threshold, query },
+    { persisterVersion: shouldPersist ? 3 : undefined }
+  );
+};
 
 type TokenSearchQueryKey = ReturnType<typeof tokenSearchQueryKey>;
 
@@ -77,6 +83,7 @@ async function tokenSearchQueryFunction({
         return parseTokenSearch(tokenSearch.data.data, chainId);
       }
 
+      // search for address on other chains
       const allVerifiedTokens = await tokenSearchHttp.get<{ data: SearchAsset[] }>(ALL_VERIFIED_TOKENS_PARAM);
 
       const addressQuery = query.trim().toLowerCase();
@@ -104,8 +111,9 @@ export async function fetchTokenSearch(
   { chainId, fromChainId, keys, list, threshold, query }: TokenSearchArgs,
   config: QueryConfigWithSelect<TokenSearchResult, Error, TokenSearchResult, TokenSearchQueryKey> = {}
 ) {
+  const shouldPersist = query === undefined;
   return await queryClient.fetchQuery(
-    tokenSearchQueryKey({ chainId, fromChainId, keys, list, threshold, query }),
+    tokenSearchQueryKey({ chainId, fromChainId, keys, list, threshold, query, shouldPersist }),
     tokenSearchQueryFunction,
     config
   );
@@ -130,7 +138,8 @@ export function useTokenSearch(
   { chainId, fromChainId, keys, list, threshold, query }: TokenSearchArgs,
   config: QueryConfigWithSelect<TokenSearchResult, Error, TokenSearchResult, TokenSearchQueryKey> = {}
 ) {
-  return useQuery(tokenSearchQueryKey({ chainId, fromChainId, keys, list, threshold, query }), tokenSearchQueryFunction, {
+  const shouldPersist = query === undefined;
+  return useQuery(tokenSearchQueryKey({ chainId, fromChainId, keys, list, threshold, query, shouldPersist }), tokenSearchQueryFunction, {
     ...config,
     keepPreviousData: true,
   });

src/components/AbsolutePortal.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactNode, useEffect, useState } from 'react';
-import { View } from 'react-native';
+import { StyleProp, ViewStyle, View } from 'react-native';
 
 const absolutePortal = {
   nodes: [] as ReactNode[],
@@ -24,15 +24,15 @@ const absolutePortal = {
   },
 };
 
-export const AbsolutePortalRoot = () => {
+export const AbsolutePortalRoot = ({ style }: { style?: StyleProp<ViewStyle> }) => {
   const [nodes, setNodes] = useState(absolutePortal.nodes);
 
   useEffect(() => {
     const unsubscribe = absolutePortal.subscribe(setNodes);
     return () => unsubscribe();
   }, []);
 
-  return <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'box-none' }}>{nodes}</View>;
+  return <View style={[style, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'box-none' }]}>{nodes}</View>;
 };
 
 export const AbsolutePortal = ({ children }: PropsWithChildren) => {

src/components/Discover/DiscoverHome.tsx

@@ -70,10 +70,11 @@ export default function DiscoverHome() {
             <GasCard />
             {isProfilesEnabled && <ENSSearchCard />}
           </Inline>
+          <Separator color="separatorTertiary" thickness={1} />
           {trendingTokensEnabled && (
             <>
-              <Separator color="separatorSecondary" thickness={1} />
               <TrendingTokens />
+              <Separator color="separatorTertiary" thickness={1} />
             </>
           )}
           <RemoteCardCarousel />