From aebb26d3305c3c641774fa10124a0d37873ffd13 Mon Sep 17 00:00:00 2001 From: Christian Baroni <7061887+christianbaroni@users.noreply.github.com> Date: Thu, 13 Jun 2024 01:33:00 -0400 Subject: [PATCH] Hide Flashbots outside of mainnet (#5842) --- .../screens/Swap/components/ReviewPanel.tsx | 57 ++++++++++--------- src/__swaps__/screens/Swap/constants.ts | 6 +- .../Swap/hooks/useAnimatedSwapStyles.ts | 32 +++++++---- src/languages/en_US.json | 6 +- 4 files changed, 60 insertions(+), 41 deletions(-) diff --git a/src/__swaps__/screens/Swap/components/ReviewPanel.tsx b/src/__swaps__/screens/Swap/components/ReviewPanel.tsx index 1b804f6c208..b19743ddc32 100644 --- 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,6 +194,13 @@ export function ReviewPanel() { }; }); + const flashbotsVisibilityStyle = useAnimatedStyle(() => { + const shouldDisplay = (internalSelectedInputAsset.value?.chainId ?? ChainId.mainnet) === ChainId.mainnet; + return { + display: shouldDisplay ? 'flex' : 'none', + }; + }); + return ( @@ -205,7 +208,7 @@ export function ReviewPanel() { {REVIEW_LABEL} - + @@ -268,25 +271,27 @@ export function ReviewPanel() { - - - - 􀋦 - - - - - {FLASHBOTS_PROTECTION_LABEL} - - - 􀅴 - - - - + + + + + 􀋦 + + + + + {FLASHBOTS_PROTECTION_LABEL} + + + 􀅴 + + + + - - + + + @@ -391,7 +396,7 @@ export function ReviewPanel() { - + ); diff --git a/src/__swaps__/screens/Swap/constants.ts b/src/__swaps__/screens/Swap/constants.ts index 5387d1cf794..1f4a24c9e94 100644 --- 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 index acde6030234..96a1361b4fa 100644 --- 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 index 35f8bb79b3c..db5c8c01884 100644 --- 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",