Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dapp Browser: close tab button #5532

Merged
merged 14 commits into from
Mar 19, 2024
Merged

Dapp Browser: close tab button #5532

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
aa3d1e7
some progress on dapp listings ui
benisgold Mar 8, 2024
543325e
progress
benisgold Mar 11, 2024
ed1be9c
dapp listings ui complete
benisgold Mar 11, 2024
f1b25b5
Merge branch 'develop' of https://github.com/rainbow-me/rainbow into …
benisgold Mar 11, 2024
2c4a0e4
rebase fix
benisgold Mar 11, 2024
d338bf5
tweak
benisgold Mar 11, 2024
31dd148
android fixes
benisgold Mar 12, 2024
3b78394
fallback gradient
benisgold Mar 12, 2024
dc3ab53
Merge branch 'develop' of https://github.com/rainbow-me/rainbow into …
benisgold Mar 14, 2024
b3133d0
Merge branch 'develop' of https://github.com/rainbow-me/rainbow into …
benisgold Mar 17, 2024
bfa77d2
Merge branch 'develop' of https://github.com/rainbow-me/rainbow into …
benisgold Mar 18, 2024
480e1ee
fix scrolling on empty tab
benisgold Mar 18, 2024
613ce82
close button
benisgold Mar 19, 2024
f1a3ee0
Merge branch 'develop' of https://github.com/rainbow-me/rainbow into …
benisgold Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions src/components/DappBrowser/BrowserTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -81,6 +81,7 @@ const getWebsiteBackgroundColor = `
export const BrowserTab = React.memo(function BrowserTab({ tabIndex, injectedJS }: BrowserTabProps) {
const {
activeTabIndex,
closeTab,
scrollViewOffset,
setActiveTabIndex,
tabStates,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can we make this its own component

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 }]} />
Expand Down
Loading