Refactor BalanceCoinRow into FastBalanceCoinRow and FastCoinIcon

patches/react-native-fast-image+8.5.11.patch

@@ -10,6 +10,32 @@ index db0fada..54d8d5b 100644
 +  s.dependency 'SDWebImage', '~> 5.12.5'
    s.dependency 'SDWebImageWebPCoder', '~> 0.8.4'
  end
+diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java
+index 361417b..f167e91 100644
+--- a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java
++++ b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java
+@@ -40,7 +40,20 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
+         ThemedReactContext context = (ThemedReactContext) view.getContext();
+         RCTEventEmitter eventEmitter = context.getJSModule(RCTEventEmitter.class);
+         int viewId = view.getId();
+-        eventEmitter.receiveEvent(viewId, REACT_ON_ERROR_EVENT, new WritableNativeMap());
++        WritableMap error = new WritableNativeMap();
++
++        String message = "Error";
++
++        if (e != null) {
++            Throwable throwable = e.getRootCauses().get(0);
++            if (throwable != null) {
++                message = throwable.getMessage();
++            }
++
++        }
++
++        error.putString("message", message);
++        eventEmitter.receiveEvent(viewId, REACT_ON_ERROR_EVENT, error);
+         eventEmitter.receiveEvent(viewId, REACT_ON_LOAD_END_EVENT, new WritableNativeMap());
+         return false;
+     }
 diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageSource.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageSource.java
 index 888b38e..e73737d 100644
 --- a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageSource.java

src/components/animations/ButtonPressAnimation/ButtonPressAnimation.android.js

@@ -1,5 +1,10 @@
 import React, { createContext, useCallback, useContext, useMemo } from 'react';
-import { processColor, requireNativeComponent, View } from 'react-native';
+import {
+  processColor,
+  requireNativeComponent,
+  StyleSheet,
+  View,
+} from 'react-native';
 import { createNativeWrapper } from 'react-native-gesture-handler';
 import { PureNativeButton } from 'react-native-gesture-handler/src/components/GestureButtons';
 import Animated, {
@@ -13,7 +18,6 @@ import Animated, {
 } from 'react-native-reanimated';
 import { normalizeTransformOrigin } from './NativeButton';
 import { useLongPressEvents } from '@rainbow-me/hooks';
-import styled from '@rainbow-me/styled-components';
 
 const ZoomableRawButton = requireNativeComponent('RNZoomableButton');
 
@@ -31,9 +35,7 @@ const OVERFLOW_MARGIN = 5;
 
 const ScaleButtonContext = createContext(null);
 
-const Content = styled.View({
-  overflow: 'visible',
-});
+const transparentColor = processColor('transparent');
 
 // I managed to implement partially overflow in scale button (up to 5px),
 // but overflow is not visible beyond small boundaries. Hence, to make it reactive to touches
@@ -136,15 +138,15 @@ const ScaleButton = ({
   });
 
   return (
-    <View style={[{ overflow: 'visible' }, wrapperStyle]}>
+    <View style={[cx.overflow, wrapperStyle]}>
       <View style={{ margin: -overflowMargin }}>
         <AnimatedRawButton
           hitSlop={-overflowMargin}
           onGestureEvent={gestureHandler}
-          rippleColor={processColor('transparent')}
-          style={{ overflow: 'visible' }}
+          rippleColor={transparentColor}
+          style={cx.overflow}
         >
-          <View style={{ backgroundColor: 'transparent' }}>
+          <View style={cx.transparentBackground}>
             <View style={{ padding: overflowMargin }}>
               <Animated.View style={[sz, contentContainerStyle]}>
                 {children}
@@ -189,6 +191,10 @@ const SimpleScaleButton = ({
     [onLongPress, onLongPressEnded, onPress, shouldLongPressHoldPress]
   );
 
+  // we won't guess if there are any animated styles in there but we can
+  // not render the Animated.View if we don't use that prop at all
+  const Wrapper = contentContainerStyle ? Animated.View : View;
+
   return (
     <View
       onLayout={onLayout}
@@ -213,22 +219,20 @@ const SimpleScaleButton = ({
           isLongPress={isLongPress}
           minLongPressDuration={minLongPressDuration}
           onPress={onNativePress}
-          rippleColor={processColor('transparent')}
+          rippleColor={transparentColor}
           scaleTo={scaleTo}
           shouldLongPressHoldPress={shouldLongPressHoldPress}
-          style={{ overflow: 'visible' }}
+          style={cx.overflow}
           transformOrigin={transformOrigin}
         >
-          <View style={{ backgroundColor: 'transparent' }}>
+          <View style={cx.transparentBackground}>
             <View
               style={{
                 padding: overflowMargin,
                 paddingTop: skipTopMargin ? OVERFLOW_MARGIN : overflowMargin,
               }}
             >
-              <Animated.View style={contentContainerStyle}>
-                {children}
-              </Animated.View>
+              <Wrapper style={contentContainerStyle}>{children}</Wrapper>
             </View>
           </View>
         </ZoomableButton>
@@ -271,9 +275,9 @@ export default function ButtonPressAnimation({
 
   const ButtonElement = reanimatedButton ? ScaleButton : SimpleScaleButton;
   return disabled ? (
-    <Content onLayout={onLayout} style={style}>
+    <View onLayout={onLayout} style={[cx.overflow, style]}>
       {children}
-    </Content>
+    </View>
   ) : (
     <ButtonElement
       backgroundColor={backgroundColor}
@@ -297,9 +301,18 @@ export default function ButtonPressAnimation({
       transformOrigin={normalizedTransformOrigin}
       wrapperStyle={wrapperStyle}
     >
-      <Content pointerEvents="box-only" style={style}>
+      <View pointerEvents="box-only" style={[cx.overflow, style]}>
         {children}
-      </Content>
+      </View>
     </ButtonElement>
   );
 }
+
+const cx = StyleSheet.create({
+  overflow: {
+    overflow: 'visible',
+  },
+  transparentBackground: {
+    backgroundColor: 'transparent',
+  },
+});

src/components/asset-list/AssetList.js

@@ -1,7 +1,6 @@
 import lang from 'i18n-js';
 import React from 'react';
 import { useSafeArea } from 'react-native-safe-area-context';
-import { magicMemo } from '../../utils';
 import { FabWrapperBottomPosition, FloatingActionButtonSize } from '../fab';
 import { ListFooter } from '../list';
 import EmptyAssetList from './EmptyAssetList';
@@ -19,6 +18,7 @@ const AssetList = ({
   network,
   scrollViewTracker,
   sections,
+  walletBriefSectionsData,
   ...props
 }) => {
   const insets = useSafeArea();
@@ -43,13 +43,8 @@ const AssetList = ({
       {...props}
     />
   ) : (
-    <RecyclerAssetList2 />
+    <RecyclerAssetList2 walletBriefSectionsData={walletBriefSectionsData} />
   );
 };
 
-export default magicMemo(AssetList, [
-  'isEmpty',
-  'isLoading',
-  'isWalletEthZero',
-  'sections',
-]);
+export default React.memo(AssetList);

src/components/asset-list/RecyclerAssetList/index.tsx

@@ -243,7 +243,7 @@ function RecyclerAssetList({
   disableRefreshControl,
   ...extras
 }: RecyclerAssetListProps): JSX.Element {
-  const { isCoinListEdited } = useCoinListEdited();
+  const { isCoinListEdited, setIsCoinListEdited } = useCoinListEdited();
   const {
     isInvestmentCardsOpen: openInvestmentCards,
   } = useOpenInvestmentCards();
@@ -774,6 +774,14 @@ function RecyclerAssetList({
 
   const isInsideBottomSheet = !!useContext(BottomSheetContext);
 
+  const coinDividerExtendedState = useMemo(
+    () => ({
+      isCoinListEdited,
+      setIsCoinListEdited,
+    }),
+    [isCoinListEdited, setIsCoinListEdited]
+  );
+
   return (
     <StyledContainer onLayout={onLayout}>
       {/* @ts-ignore */}
@@ -815,7 +823,11 @@ function RecyclerAssetList({
           },
         ]}
       >
-        <CoinDivider balancesSum={0} defaultToEditButton={false} />
+        <CoinDivider
+          balancesSum={0}
+          defaultToEditButton={false}
+          extendedState={coinDividerExtendedState}
+        />
       </View>
     </StyledContainer>
   );