Backups V2 Follow-up Fixes / Improvements (#6213)

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/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/ExchangeTokenRow.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import isEqual from 'react-fast-compare';
 import { Box, Column, Columns, Inline, Stack, Text } from '@/design-system';
 import { isNativeAsset } from '@/handlers/assets';
-import { useAsset, useDimensions } from '@/hooks';
+import { useAsset } from '@/hooks';
 import { ButtonPressAnimation } from '@/components/animations';
 import { FloatingEmojis } from '@/components/floating-emojis';
 import { IS_IOS } from '@/env';
@@ -34,7 +34,6 @@ export default React.memo(function ExchangeTokenRow({
     disabled,
   },
 }: ExchangeTokenRowProps) {
-  const { width: deviceWidth } = useDimensions();
   const item = useAsset({
     address,
     chainId,
@@ -101,10 +100,8 @@ export default React.memo(function ExchangeTokenRow({
               {isInfoButtonVisible && <Info contextMenuProps={contextMenuProps} showFavoriteButton={showFavoriteButton} theme={theme} />}
               {showFavoriteButton &&
                 (IS_IOS ? (
-                  // @ts-ignore
                   <FloatingEmojis
                     centerVertically
-                    deviceWidth={deviceWidth}
                     disableHorizontalMovement
                     disableVerticalMovement
                     distance={70}

src/components/WalletLoadingListener.tsx

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+import { LoadingOverlay } from './modal';
+import { sheetVerticalOffset } from '@/navigation/effects';
+import { walletLoadingStore } from '@/state/walletLoading/walletLoading';
+
+export default function WalletLoadingListener() {
+  const loadingState = walletLoadingStore(state => state.loadingState);
+
+  useEffect(() => {
+    if (loadingState) {
+      walletLoadingStore.getState().setComponent(<LoadingOverlay paddingTop={sheetVerticalOffset} title={loadingState} />);
+    }
+    return walletLoadingStore.getState().hide;
+  }, [loadingState]);
+
+  return null;
+}

src/components/asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow.tsx

@@ -174,10 +174,8 @@ export default React.memo(function FastCurrencySelectionRow({
           {showFavoriteButton &&
             chainId === ChainId.mainnet &&
             (ios ? (
-              // @ts-ignore
               <FloatingEmojis
                 centerVertically
-                deviceWidth={deviceWidth}
                 disableHorizontalMovement
                 disableVerticalMovement
                 distance={70}

src/components/asset-list/RecyclerAssetList2/profile-header/ProfileActionButtonsRow.tsx

@@ -69,7 +69,7 @@ export function ProfileActionButtonsRow() {
             </Column>
             <Column>
               <Animated.View style={[expandStyle]}>
-                <MoreButton />
+                <CopyButton />
               </Animated.View>
             </Column>
           </Columns>
@@ -216,21 +216,25 @@ function SendButton() {
   );
 }
 
-export function MoreButton() {
-  // ////////////////////////////////////////////////////
-  // Handlers
-
+export function CopyButton() {
   const [isToastActive, setToastActive] = useRecoilState(addressCopiedToastAtom);
   const { accountAddress } = useAccountProfile();
+  const { isDamaged } = useWallets();
+
   const handlePressCopy = React.useCallback(() => {
+    if (isDamaged) {
+      showWalletErrorAlert();
+      return;
+    }
+
     if (!isToastActive) {
       setToastActive(true);
       setTimeout(() => {
         setToastActive(false);
       }, 2000);
     }
     Clipboard.setString(accountAddress);
-  }, [accountAddress, isToastActive, setToastActive]);
+  }, [accountAddress, isDamaged, isToastActive, setToastActive]);
 
   return (
     <>

src/components/asset-list/RecyclerAssetList2/profile-header/ProfileNameRow.tsx

@@ -109,7 +109,6 @@ export function ProfileNameRow({
         scaleTo={0}
         size={50}
         wiggleFactor={0}
-        // @ts-expect-error – JS component
         setOnNewEmoji={newOnNewEmoji => (onNewEmoji.current = newOnNewEmoji)}
       />
     </Box>