diff --git a/src/components/DappBrowser/BrowserTab.tsx b/src/components/DappBrowser/BrowserTab.tsx index a374f19839e..8e1e4ad2812 100644 --- a/src/components/DappBrowser/BrowserTab.tsx +++ b/src/components/DappBrowser/BrowserTab.tsx @@ -225,6 +225,7 @@ export const BrowserTab = React.memo(function BrowserTab({ tabId, tabIndex, inje const isActiveTab = activeTabIndex === tabIndex; const multipleTabsOpen = tabStates?.length > 1; const isOnHomepage = tabUrl === RAINBOW_HOME; + const isEmptyState = !multipleTabsOpen && isOnHomepage; const isLogoUnset = tabStates[tabIndex]?.logoUrl === undefined; const screenshotData = useSharedValue(findTabScreenshot(tabId, tabUrl) || undefined); @@ -624,12 +625,15 @@ export const BrowserTab = React.memo(function BrowserTab({ tabId, tabIndex, inje gestureX.value = xDelta; }, onEnd: (e, ctx: { startX?: number }) => { - if (!tabViewVisible?.value) return; - const xDelta = e.absoluteX - (ctx.startX || 0); setNativeProps(scrollViewRef, { scrollEnabled: !!tabViewVisible?.value }); - if ((xDelta < -(TAB_VIEW_COLUMN_WIDTH / 2 + 20) && e.velocityX <= 0) || e.velocityX < -500) { + const isBeyondDismissThreshold = xDelta < -(TAB_VIEW_COLUMN_WIDTH / 2 + 20) && e.velocityX <= 0; + const isFastLeftwardSwipe = e.velocityX < -500; + + const shouldDismiss = !!tabViewVisible?.value && !isEmptyState && (isBeyondDismissThreshold || isFastLeftwardSwipe); + + if (shouldDismiss) { const xDestination = -Math.min(Math.max(deviceWidth * 1.25, Math.abs(e.velocityX * 0.3)), 1000); gestureX.value = withTiming(xDestination, TIMING_CONFIGS.tabPressConfig, () => { runOnJS(closeTab)(tabId); diff --git a/src/components/DappBrowser/CloseTabButton.tsx b/src/components/DappBrowser/CloseTabButton.tsx index a6228c91c4d..2361b6cd5a9 100644 --- a/src/components/DappBrowser/CloseTabButton.tsx +++ b/src/components/DappBrowser/CloseTabButton.tsx @@ -5,7 +5,7 @@ import { Box, Cover, TextIcon, useColorMode } from '@/design-system'; import { IS_IOS } from '@/env'; import { deviceUtils } from '@/utils'; import { AnimatedBlurView } from '@/__swaps__/screens/Swap/components/AnimatedBlurView'; -import { useBrowserContext } from './BrowserContext'; +import { RAINBOW_HOME, useBrowserContext } from './BrowserContext'; import { TAB_VIEW_COLUMN_WIDTH } from './Dimensions'; import { TIMING_CONFIGS } from '../animations/animationConfigs'; @@ -28,7 +28,10 @@ export const CloseTabButton = ({ onPress, tabIndex }: { onPress: () => void; tab const { animatedActiveTabIndex, tabStates, tabViewProgress, tabViewVisible } = useBrowserContext(); const { isDarkMode } = useColorMode(); - const multipleTabsOpen = React.useMemo(() => tabStates.length > 1, [tabStates.length]); + const multipleTabsOpen = tabStates.length > 1; + const tabUrl = tabStates[tabIndex]?.url; + const isOnHomepage = tabUrl === RAINBOW_HOME; + const isEmptyState = !multipleTabsOpen && isOnHomepage; const buttonSize = multipleTabsOpen ? SCALE_ADJUSTED_X_BUTTON_SIZE : SCALE_ADJUSTED_X_BUTTON_SIZE_SINGLE_TAB; const buttonPadding = multipleTabsOpen ? SCALE_ADJUSTED_X_BUTTON_PADDING : SCALE_ADJUSTED_X_BUTTON_PADDING_SINGLE_TAB; @@ -40,13 +43,13 @@ export const CloseTabButton = ({ onPress, tabIndex }: { onPress: () => void; tab // entered. This is mainly to avoid showing the close button in the // active tab until the tab view animation is near complete. const interpolatedOpacity = interpolate(progress, [0, 80, 100], [isActiveTab ? 0 : 1, isActiveTab ? 0 : 1, 1]); - const opacity = tabViewVisible?.value || !isActiveTab ? interpolatedOpacity : withTiming(0, TIMING_CONFIGS.fastFadeConfig); - + const opacity = + !isEmptyState && (tabViewVisible?.value || !isActiveTab) ? interpolatedOpacity : withTiming(0, TIMING_CONFIGS.fastFadeConfig); return { opacity }; }); const pointerEventsStyle = useAnimatedStyle(() => { - const pointerEvents = tabViewVisible?.value ? 'auto' : 'none'; + const pointerEvents = tabViewVisible?.value && !isEmptyState ? 'auto' : 'none'; return { pointerEvents }; });