Hide Flashbots outside of mainnet (#5842)

rainbow-me · Jun 13, 2024 · aebb26d · aebb26d
1 parent 992fff5
commit aebb26d
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 41 deletions.
diff --git a/src/__swaps__/screens/Swap/components/ReviewPanel.tsx b/src/__swaps__/screens/Swap/components/ReviewPanel.tsx
@@ -1,11 +1,9 @@
 import * as i18n from '@/languages';
 import React, { useCallback } from 'react';
-
 import { ReviewGasButton } from '@/__swaps__/screens/Swap/components/GasButton';
 import { ChainId, ChainNameDisplay } from '@/__swaps__/types/chains';
 import { AnimatedText, Bleed, Box, Inline, Separator, Stack, Text, globalColors, useColorMode } from '@/design-system';
 import { StyleSheet, View } from 'react-native';
-
 import Animated, {
   runOnJS,
   useAnimatedReaction,
@@ -17,10 +15,8 @@ import Animated, {
 import { fadeConfig } from '../constants';
 import { NavigationSteps, useSwapContext } from '../providers/swap-provider';
 import { AnimatedSwitch } from './AnimatedSwitch';
-
 import { useAccountSettings } from '@/hooks';
 import { CrosschainQuote, Quote, QuoteError } from '@rainbow-me/swaps';
-
 import { AnimatedChainImage } from '@/__swaps__/screens/Swap/components/AnimatedChainImage';
 import { GestureHandlerV1Button } from '@/__swaps__/screens/Swap/components/GestureHandlerV1Button';
 import { useNativeAssetForChain } from '@/__swaps__/screens/Swap/hooks/useNativeAssetForChain';
@@ -40,8 +36,8 @@ import { chainNameFromChainId } from '@/__swaps__/utils/chains';
 const UNKNOWN_LABEL = i18n.t(i18n.l.swap.unknown);
 const REVIEW_LABEL = i18n.t(i18n.l.expanded_state.swap_details.review);
 const NETWORK_LABEL = i18n.t(i18n.l.settings.network);
-const MINIMUM_RECEIVED_LABEL = i18n.t(i18n.l.expanded_state.swap_details.minimum_received);
-const RAINBOW_FEE_LABEL = i18n.t(i18n.l.expanded_state.swap_details.rainbow_fee);
+const MINIMUM_RECEIVED_LABEL = i18n.t(i18n.l.expanded_state.swap_details_v2.minimum_received);
+const RAINBOW_FEE_LABEL = i18n.t(i18n.l.expanded_state.swap_details_v2.rainbow_fee);
 const FLASHBOTS_PROTECTION_LABEL = i18n.t(i18n.l.swap.flashbots_protection);
 const MAX_SLIPPAGE_LABEL = i18n.t(i18n.l.exchange.slippage_tolerance);
 const ESTIMATED_NETWORK_FEE_LABEL = i18n.t(i18n.l.gas.network_fee);
@@ -198,14 +194,21 @@ export function ReviewPanel() {
     };
   });
 
+  const flashbotsVisibilityStyle = useAnimatedStyle(() => {
+    const shouldDisplay = (internalSelectedInputAsset.value?.chainId ?? ChainId.mainnet) === ChainId.mainnet;
+    return {
+      display: shouldDisplay ? 'flex' : 'none',
+    };
+  });
+
   return (
     <Box as={Animated.View} zIndex={12} style={styles} testID="review-panel" width="full">
       <Stack alignHorizontal="center" space="28px">
         <Text weight="heavy" color="label" size="20pt">
           {REVIEW_LABEL}
         </Text>
 
-        <Stack width="full" space="24px" alignHorizontal="stretch">
+        <Box gap={24} justifyContent="space-between" width="full">
           <Inline horizontalSpace="10px" alignVertical="center" alignHorizontal="justify">
             <Inline horizontalSpace="12px">
               <Text color="labelTertiary" weight="bold" size="icon 13px">
@@ -268,25 +271,27 @@ export function ReviewPanel() {
 
           <Separator color="separatorSecondary" />
 
-          <Inline wrap={false} horizontalSpace="10px" alignVertical="center" alignHorizontal="justify">
-            <Inline wrap={false} horizontalSpace="12px">
-              <Text color="labelTertiary" weight="bold" size="icon 13px">
-                􀋦
-              </Text>
-              <ButtonPressAnimation onPress={openFlashbotsExplainer}>
-                <Inline wrap={false} horizontalSpace="4px">
-                  <Text color="labelTertiary" weight="semibold" size="15pt">
-                    {FLASHBOTS_PROTECTION_LABEL}
-                  </Text>
-                  <Text color="labelTertiary" size="13pt" weight="bold">
-                    􀅴
-                  </Text>
-                </Inline>
-              </ButtonPressAnimation>
-            </Inline>
+          <Animated.View style={flashbotsVisibilityStyle}>
+            <Inline wrap={false} horizontalSpace="10px" alignVertical="center" alignHorizontal="justify">
+              <Inline wrap={false} horizontalSpace="12px">
+                <Text color="labelTertiary" weight="bold" size="icon 13px">
+                  􀋦
+                </Text>
+                <ButtonPressAnimation onPress={openFlashbotsExplainer}>
+                  <Inline wrap={false} horizontalSpace="4px">
+                    <Text color="labelTertiary" weight="semibold" size="15pt">
+                      {FLASHBOTS_PROTECTION_LABEL}
+                    </Text>
+                    <Text color="labelTertiary" size="13pt" weight="bold">
+                      􀅴
+                    </Text>
+                  </Inline>
+                </ButtonPressAnimation>
+              </Inline>
 
-            <FlashbotsToggle />
-          </Inline>
+              <FlashbotsToggle />
+            </Inline>
+          </Animated.View>
 
           <Inline wrap={false} horizontalSpace="10px" alignVertical="center" alignHorizontal="justify">
             <Inline wrap={false} alignHorizontal="left" horizontalSpace="12px">
@@ -391,7 +396,7 @@ export function ReviewPanel() {
               <ReviewGasButton />
             </Inline>
           </Inline>
-        </Stack>
+        </Box>
       </Stack>
     </Box>
   );

diff --git a/src/__swaps__/screens/Swap/constants.ts b/src/__swaps__/screens/Swap/constants.ts
@@ -11,12 +11,14 @@ export const SPACE_BETWEEN_SWAP_BUBBLES = 12;
 // TODO: Need a more reliable way to get the keyboard height
 export const NATIVE_KEYBOARD_HEIGHT = getDefaultKeyboardHeight();
 
-export const REVIEW_SHEET_HEIGHT = 419.68;
+export const REVIEW_SHEET_ROW_HEIGHT = 10;
+export const REVIEW_SHEET_ROW_GAP = 24;
+export const REVIEW_SHEET_HEIGHT = 420;
 export const GAS_SHEET_HEIGHT = 308;
 export const BOTTOM_ACTION_BAR_HEIGHT = 114;
 export const BASE_INPUT_HEIGHT = 104;
 export const BASE_INPUT_WIDTH = deviceUtils.dimensions.width - 24;
-export const EXPANDED_REVIEW_SECTION = 408.67;
+export const EXPANDED_REVIEW_SECTION = 408;
 export const EXPANDED_INPUT_HEIGHT =
   deviceUtils.dimensions.height -
   safeAreaInsetValues.top -

diff --git a/src/__swaps__/screens/Swap/hooks/useAnimatedSwapStyles.ts b/src/__swaps__/screens/Swap/hooks/useAnimatedSwapStyles.ts
@@ -8,6 +8,8 @@ import {
   FOCUSED_INPUT_HEIGHT,
   GAS_SHEET_HEIGHT,
   REVIEW_SHEET_HEIGHT,
+  REVIEW_SHEET_ROW_GAP,
+  REVIEW_SHEET_ROW_HEIGHT,
   THICK_BORDER_WIDTH,
   fadeConfig,
   springConfig,
@@ -20,6 +22,16 @@ import { IS_ANDROID } from '@/env';
 import { safeAreaInsetValues } from '@/utils';
 import { ExtendedAnimatedAssetWithColors } from '@/__swaps__/types/assets';
 import { getSoftMenuBarHeight } from 'react-native-extra-dimensions-android';
+import { ChainId } from '@/__swaps__/types/chains';
+
+const INSET_BOTTOM = IS_ANDROID ? getSoftMenuBarHeight() - 24 : safeAreaInsetValues.bottom + 16;
+const HEIGHT_FOR_PANEL: { [key in NavigationSteps]: number } = {
+  [NavigationSteps.INPUT_ELEMENT_FOCUSED]: BOTTOM_ACTION_BAR_HEIGHT,
+  [NavigationSteps.SEARCH_FOCUSED]: BOTTOM_ACTION_BAR_HEIGHT,
+  [NavigationSteps.TOKEN_LIST_FOCUSED]: BOTTOM_ACTION_BAR_HEIGHT,
+  [NavigationSteps.SHOW_REVIEW]: REVIEW_SHEET_HEIGHT + INSET_BOTTOM,
+  [NavigationSteps.SHOW_GAS]: GAS_SHEET_HEIGHT + INSET_BOTTOM,
+};
 
 export function useAnimatedSwapStyles({
   SwapWarning,
@@ -40,8 +52,6 @@ export function useAnimatedSwapStyles({
 }) {
   const { isDarkMode } = useColorMode();
 
-  const insetBottom = IS_ANDROID ? getSoftMenuBarHeight() - 24 : safeAreaInsetValues.bottom + 16;
-
   const flipButtonStyle = useAnimatedStyle(() => {
     return {
       transform: [
@@ -138,21 +148,19 @@ export function useAnimatedSwapStyles({
   });
 
   const swapActionWrapperStyle = useAnimatedStyle(() => {
-    const isReviewingOrConfiguringGas =
-      configProgress.value === NavigationSteps.SHOW_REVIEW || configProgress.value === NavigationSteps.SHOW_GAS;
+    const isReviewing = configProgress.value === NavigationSteps.SHOW_REVIEW;
+    const isReviewingOrConfiguringGas = isReviewing || configProgress.value === NavigationSteps.SHOW_GAS;
 
-    const heightForPanel: { [key in NavigationSteps]: number } = {
-      [NavigationSteps.INPUT_ELEMENT_FOCUSED]: BOTTOM_ACTION_BAR_HEIGHT,
-      [NavigationSteps.SEARCH_FOCUSED]: BOTTOM_ACTION_BAR_HEIGHT,
-      [NavigationSteps.TOKEN_LIST_FOCUSED]: BOTTOM_ACTION_BAR_HEIGHT,
-      [NavigationSteps.SHOW_REVIEW]: REVIEW_SHEET_HEIGHT + insetBottom,
-      [NavigationSteps.SHOW_GAS]: GAS_SHEET_HEIGHT + insetBottom,
-    };
+    let heightForCurrentSheet = HEIGHT_FOR_PANEL[configProgress.value];
+    if (isReviewing && (internalSelectedInputAsset.value?.chainId ?? ChainId.mainnet) !== ChainId.mainnet) {
+      // Remove height when the Flashbots row in the review sheet is hidden
+      heightForCurrentSheet -= REVIEW_SHEET_ROW_HEIGHT + REVIEW_SHEET_ROW_GAP;
+    }
 
     return {
       position: isReviewingOrConfiguringGas ? 'absolute' : 'relative',
       bottom: isReviewingOrConfiguringGas ? 0 : undefined,
-      height: withSpring(heightForPanel[configProgress.value], springConfig),
+      height: withSpring(heightForCurrentSheet, springConfig),
       borderTopLeftRadius: isReviewingOrConfiguringGas ? (IS_ANDROID ? 20 : 40) : 0,
       borderTopRightRadius: isReviewingOrConfiguringGas ? (IS_ANDROID ? 20 : 40) : 0,
       borderWidth: isReviewingOrConfiguringGas ? THICK_BORDER_WIDTH : 0,

diff --git a/src/languages/en_US.json b/src/languages/en_US.json
@@ -745,6 +745,10 @@
         "input_exchange_rate": "1 %{inputSymbol} for %{executionRate} %{outputSymbol}",
         "output_exchange_rate": "1 %{outputSymbol} for %{executionRate} %{inputSymbol}"
       },
+      "swap_details_v2": {
+        "rainbow_fee": "Included Rainbow Fee",
+        "minimum_received": "Minimum Received"
+      },
       "token_index": {
         "get_token": "Get %{assetSymbol}",
         "makeup_of_token": "Makeup of 1 %{assetSymbol}",
@@ -1052,7 +1056,7 @@
         "custom": "Custom"
       },
       "unable_to_determine_selected_gas": "Unable to determine selected gas",
-      "network_fee": "Est. network fee",
+      "network_fee": "Est. Network Fee",
       "current_base_fee": "Current base fee",
       "max_base_fee": "Max base fee",
       "miner_tip": "Miner tip",