Trending tokens polishes

.eslintrc.js

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

CHANGELOG.md

@@ -15,6 +15,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ### Fixed
 
+## [1.9.50] (https://github.com/rainbow-me/rainbow/releases/tag/v1.9.50)
+
+### Fixed
+
+- Fixed an issue with unlocking app icons (#6342, #6345)
+
 ## [1.9.49] (https://github.com/rainbow-me/rainbow/releases/tag/v1.9.49)
 
 ### Added

android/app/build.gradle

@@ -135,8 +135,8 @@ android {
         applicationId "me.rainbow"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 243
-        versionName "1.9.50"
+        versionCode 244
+        versionName "1.9.51"
         missingDimensionStrategy 'react-native-camera', 'general'
         renderscriptTargetApi 23
         renderscriptSupportModeEnabled true

ios/Rainbow.xcodeproj/project.pbxproj

@@ -1883,7 +1883,7 @@
 					"$(PROJECT_DIR)",
 				);
 				LLVM_LTO = YES;
-				MARKETING_VERSION = 1.9.50;
+				MARKETING_VERSION = 1.9.51;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -1951,7 +1951,7 @@
 					"$(PROJECT_DIR)",
 				);
 				LLVM_LTO = YES;
-				MARKETING_VERSION = 1.9.50;
+				MARKETING_VERSION = 1.9.51;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -2072,7 +2072,7 @@
 					"$(PROJECT_DIR)",
 				);
 				LLVM_LTO = YES;
-				MARKETING_VERSION = 1.9.50;
+				MARKETING_VERSION = 1.9.51;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -2192,7 +2192,7 @@
 					"$(PROJECT_DIR)",
 				);
 				LLVM_LTO = YES;
-				MARKETING_VERSION = 1.9.50;
+				MARKETING_VERSION = 1.9.51;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"$(inherited)",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Rainbow",
-  "version": "1.9.50-1",
+  "version": "1.9.51-1",
   "private": true,
   "scripts": {
     "setup": "yarn graphql-codegen:install && yarn ds:install && yarn allow-scripts && yarn graphql-codegen && yarn fetch:networks",

src/App.tsx

@@ -40,6 +40,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();
@@ -73,6 +74,7 @@ function App({ walletReady }: AppProps) {
           <InitialRouteContext.Provider value={initialRoute}>
             <Routes ref={handleNavigatorRef} />
             <PortalConsumer />
+            <AbsolutePortalRoot />
           </InitialRouteContext.Provider>
         )}
         <OfflineToast />

src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx

@@ -14,37 +14,19 @@ import { IS_ANDROID, IS_IOS } from '@/env';
 import { PIXEL_RATIO } from '@/utils/deviceUtils';
 import { useSwapContext } from '../providers/swap-provider';
 
-const fallbackIconStyle = {
-  ...borders.buildCircleAsObject(32),
-  position: 'absolute' as ViewStyle['position'],
-};
-
-const largeFallbackIconStyle = {
-  ...borders.buildCircleAsObject(36),
-  position: 'absolute' as ViewStyle['position'],
-};
-
-const smallFallbackIconStyle = {
-  ...borders.buildCircleAsObject(16),
-  position: 'absolute' as ViewStyle['position'],
-};
-
 export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
   assetType,
-  large = true,
-  small,
+  size = 32,
   showBadge = true,
 }: {
   assetType: 'input' | 'output';
-  large?: boolean;
-  small?: boolean;
+  size?: number;
   showBadge?: boolean;
 }) {
   const { isDarkMode, colors } = useTheme();
   const { internalSelectedInputAsset, internalSelectedOutputAsset } = useSwapContext();
 
   const asset = assetType === 'input' ? internalSelectedInputAsset : internalSelectedOutputAsset;
-  const size = small ? 16 : large ? 36 : 32;
 
   const didErrorForUniqueId = useSharedValue<string | undefined>(undefined);
 
@@ -91,15 +73,8 @@ export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
   }));
 
   return (
-    <View style={small ? sx.containerSmall : large ? sx.containerLarge : sx.container}>
-      <Animated.View
-        style={[
-          sx.reactCoinIconContainer,
-          small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback,
-          sx.withShadow,
-          animatedCoinIconWrapperStyles,
-        ]}
-      >
+    <View style={containerStyle(size)}>
+      <Animated.View style={[sx.reactCoinIconContainer, coinIconFallbackStyle(size), sx.withShadow, animatedCoinIconWrapperStyles]}>
         <Animated.View style={animatedCoinIconStyles}>
           {/* ⚠️ TODO: This works but we should figure out how to type this correctly to avoid this error */}
           {/* @ts-expect-error: Doesn't pick up that it's getting a source prop via animatedProps */}
@@ -122,29 +97,14 @@ export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
           />
         </Animated.View>
 
-        <Animated.View
-          style={[animatedFallbackStyles, small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback]}
-        >
-          <SwapCoinIconTextFallback
-            asset={asset}
-            height={size}
-            width={size}
-            style={small ? smallFallbackIconStyle : large ? largeFallbackIconStyle : fallbackIconStyle}
-          />
+        <Animated.View style={[animatedFallbackStyles, coinIconFallbackStyle(size)]}>
+          <SwapCoinIconTextFallback asset={asset} height={size} width={size} style={fallbackIconStyle(size)} />
         </Animated.View>
 
         <Box
           as={Animated.View}
           background={isDarkMode ? 'fillQuaternary' : 'fillTertiary'}
-          style={[
-            animatedEmptyStateStyles,
-            small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback,
-            {
-              borderRadius: size / 2,
-              height: size,
-              width: size,
-            },
-          ]}
+          style={[animatedEmptyStateStyles, coinIconFallbackStyle(size)]}
         />
       </Animated.View>
 
@@ -153,28 +113,28 @@ export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
   );
 });
 
+const fallbackIconStyle = (size: number) => ({
+  ...borders.buildCircleAsObject(size),
+  position: 'absolute' as ViewStyle['position'],
+});
+
+const coinIconFallbackStyle = (size: number) => ({
+  borderRadius: size / 2,
+  height: size,
+  width: size,
+  overflow: 'visible' as const,
+});
+
+const containerStyle = (size: number) => ({
+  elevation: 6,
+  height: size,
+  overflow: 'visible' as const,
+});
+
 const sx = StyleSheet.create({
   coinIcon: {
     overflow: 'hidden',
   },
-  coinIconFallback: {
-    borderRadius: 16,
-    height: 32,
-    overflow: 'visible',
-    width: 32,
-  },
-  coinIconFallbackLarge: {
-    borderRadius: 18,
-    height: 36,
-    overflow: 'visible',
-    width: 36,
-  },
-  coinIconFallbackSmall: {
-    borderRadius: 8,
-    height: 16,
-    overflow: 'visible',
-    width: 16,
-  },
   container: {
     elevation: 6,
     height: 32,

src/__swaps__/screens/Swap/components/CoinRow.tsx

@@ -131,7 +131,7 @@ export function CoinRow({ isFavorite, onPress, output, uniqueId, testID, ...asse
                     iconUrl={icon_url}
                     address={address}
                     mainnetAddress={mainnetAddress}
-                    large
+                    size={36}
                     chainId={chainId}
                     symbol={symbol || ''}
                     color={colors?.primary}