Dapp Browser: close tab button (#5532)

* some progress on dapp listings ui * progress * dapp listings ui complete * rebase fix * tweak * android fixes * fallback gradient * fix scrolling on empty tab * close button
rainbow-me · Mar 19, 2024 · 0e50972 · 0e50972
1 parent 2689b40
commit 0e50972
Showing 1 changed file with 18 additions and 3 deletions.
diff --git a/src/components/DappBrowser/BrowserTab.tsx b/src/components/DappBrowser/BrowserTab.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Box, globalColors, useColorMode, Text } from '@/design-system';
-import { Page } from '@/components/layout';
+import { Box, globalColors, useColorMode, TextIcon } from '@/design-system';
 import { useAccountAccentColor, useAccountSettings, useDimensions } from '@/hooks';
 import { AnimatePresence, MotiView } from 'moti';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -22,6 +21,7 @@ import { IS_ANDROID, IS_IOS } from '@/env';
 import { DappBrowserShadows } from './DappBrowserShadows';
 import { WebViewBorder } from './WebViewBorder';
 import Homepage from './Homepage';
+import { ButtonPressAnimation } from '../animations';
 
 interface BrowserTabProps {
   tabIndex: number;
@@ -81,6 +81,7 @@ const getWebsiteBackgroundColor = `
 export const BrowserTab = React.memo(function BrowserTab({ tabIndex, injectedJS }: BrowserTabProps) {
   const {
     activeTabIndex,
+    closeTab,
     scrollViewOffset,
     setActiveTabIndex,
     tabStates,
@@ -417,7 +418,7 @@ export const BrowserTab = React.memo(function BrowserTab({ tabIndex, injectedJS
   return (
     <>
       <DappBrowserShadows type="webview">
-        <TouchableWithoutFeedback onPress={handlePress}>
+        <TouchableWithoutFeedback disabled={isOnHomepage && !tabViewVisible} onPress={handlePress}>
           <Animated.View style={[styles.webViewContainer, webViewStyle]}>
             <ViewShot options={{ format: 'jpg' }} ref={viewShotRef}>
               <View
@@ -475,6 +476,20 @@ export const BrowserTab = React.memo(function BrowserTab({ tabIndex, injectedJS
             <WebViewBorder enabled={IS_IOS && isDarkMode && !isOnHomepage} isActiveTab={isActiveTab} />
           </Animated.View>
         </TouchableWithoutFeedback>
+        {tabViewVisible && tabStates.length > 1 && (
+          <Box
+            as={ButtonPressAnimation}
+            onPress={() => closeTab(tabIndex)}
+            position="absolute"
+            top={{ custom: safeAreaInsetValues.top + Math.floor(tabIndex / 2) * TAB_VIEW_ROW_HEIGHT + 8 }}
+            left={{ custom: ((tabIndex % 2) + 1) * TAB_VIEW_COLUMN_WIDTH + (tabIndex % 2) * 20 - 8 }}
+            style={{ zIndex: 99999999999 }}
+          >
+            <TextIcon align="center" size="17pt" weight="bold" color="labelSecondary" containerSize={20} hitSlop={10}>
+              􀀳
+            </TextIcon>
+          </Box>
+        )}
       </DappBrowserShadows>
       {isActiveTab && !tabViewVisible && (
         <Box as={Animated.View} style={[styles.progressBar, progressBarStyle, { backgroundColor: accentColor }]} />