From 0e5097253790e1faecae15052f61d84340159b16 Mon Sep 17 00:00:00 2001
From: Ben Goldberg <bengoldberg@rainbow.me>
Date: Tue, 19 Mar 2024 08:56:31 -0700
Subject: [PATCH] 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
---
 src/components/DappBrowser/BrowserTab.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/DappBrowser/BrowserTab.tsx b/src/components/DappBrowser/BrowserTab.tsx
index b1fa0b1c7a4..63847f9b9ab 100644
--- 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 }]} />