browser: android fixes v2 (#5712)

* fix tap events for the last time * action sheet for android * card context menu * shadow margin on android * i18n * i18n + android stylez
rainbow-me · May 10, 2024 · f56e50d · f56e50d
1 parent e871b83
commit f56e50d
Show file tree

Hide file tree

Showing 8 changed files with 192 additions and 100 deletions.
diff --git a/src/components/DappBrowser/BrowserTab.tsx b/src/components/DappBrowser/BrowserTab.tsx
@@ -483,19 +483,28 @@ const TabGestureHandlers = React.memo(function TabGestureHandlers({
     },
   });
 
+  const tapGestureHandlerRef = React.createRef();
+
   return (
     <>
       <Animated.View style={animatedGestureHandlerStyle}>
         {/* @ts-expect-error Property 'children' does not exist on type */}
-        <TapGestureHandler maxDeltaX={10} maxDeltaY={10} onGestureEvent={pressTabGestureHandler} shouldCancelWhenOutside>
-          <Animated.View>
+        <TapGestureHandler
+          ref={tapGestureHandlerRef}
+          maxDeltaX={10}
+          maxDeltaY={10}
+          onGestureEvent={pressTabGestureHandler}
+          shouldCancelWhenOutside
+        >
+          <Animated.View style={{ width: '100%', height: '100%' }}>
             {/* @ts-expect-error Property 'children' does not exist on type */}
             <PanGestureHandler
               activeOffsetX={[-5, 5]}
               failOffsetY={[-10, 10]}
               maxPointers={1}
               onGestureEvent={swipeToCloseTabGestureHandler}
               simultaneousHandlers={scrollViewRef}
+              waitFor={tapGestureHandlerRef}
             >
               <Animated.View style={styles.gestureHandlersContainer}></Animated.View>
             </PanGestureHandler>
@@ -529,7 +538,6 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     top: 0,
     width: DEVICE_WIDTH,
-    zIndex: 50000,
   },
   screenshotContainerStyle: {
     height: WEBVIEW_HEIGHT,

diff --git a/src/components/DappBrowser/Homepage.tsx b/src/components/DappBrowser/Homepage.tsx
@@ -1,12 +1,12 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { ButtonPressAnimation } from '@/components/animations';
 import { Bleed, Box, ColorModeProvider, Cover, Inline, Inset, Stack, Text, TextIcon, globalColors, useColorMode } from '@/design-system';
 import { ScrollView, StyleSheet, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { BlurView } from '@react-native-community/blur';
 import { ImgixImage } from '@/components/images';
 import ContextMenuButton from '@/components/native-context-menu/contextMenu';
-import { IS_IOS } from '@/env';
+import { IS_ANDROID, IS_IOS } from '@/env';
 import { THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants';
 import { opacity } from '@/__swaps__/utils/swaps';
 import { useFavoriteDappsStore } from '@/state/favoriteDapps';
@@ -19,6 +19,8 @@ import { useBrowserContext } from './BrowserContext';
 import { DEVICE_WIDTH } from '@/utils/deviceUtils';
 import { WEBVIEW_HEIGHT } from './Dimensions';
 import { useDapps } from '@/resources/metadata/dapps';
+import haptics from '@/utils/haptics';
+import * as i18n from '@/languages';
 
 const HORIZONTAL_PAGE_INSET = 24;
 const MAX_RECENTS_TO_DISPLAY = 6;
@@ -27,7 +29,7 @@ const SCROLL_INDICATOR_INSETS = { bottom: 20, top: 36 };
 const LOGOS_PER_ROW = 4;
 const LOGO_SIZE = 64;
 const LOGO_PADDING = (DEVICE_WIDTH - LOGOS_PER_ROW * LOGO_SIZE - HORIZONTAL_PAGE_INSET * 2) / (LOGOS_PER_ROW - 1);
-const LOGO_BORDER_RADIUS = 16;
+const LOGO_BORDER_RADIUS = IS_ANDROID ? 32 : 16;
 const LOGO_LABEL_SPILLOVER = 12;
 
 const NUM_CARDS = 2;
@@ -61,14 +63,18 @@ const Trending = React.memo(function Trending({ goToUrl }: { goToUrl: (url: stri
 
   const trendingDapps = dapps.filter(dapp => dapp.trending).slice(0, 8);
 
+  if (trendingDapps.length === 0) {
+    return null;
+  }
+
   return (
     <Stack space="20px">
       <Inline alignVertical="center" space="6px">
         <Text color="red" size="15pt" align="center" weight="heavy">
           􀙭
         </Text>
         <Text color="label" size="20pt" weight="heavy">
-          Trending
+          {i18n.t(i18n.l.dapp_browser.homepage.trending)}
         </Text>
       </Inline>
       <Bleed space="24px">
@@ -103,7 +109,7 @@ const Favorites = React.memo(function Favorites({ goToUrl }: { goToUrl: (url: st
             􀋃
           </Text>
           <Text color="label" size="20pt" weight="heavy">
-            Favorites
+            {i18n.t(i18n.l.dapp_browser.homepage.favorites)}
           </Text>
         </Inline>
         <Box flexDirection="row" flexWrap="wrap" gap={LOGO_PADDING} width={{ custom: DEVICE_WIDTH - HORIZONTAL_PAGE_INSET * 2 }}>
@@ -127,7 +133,7 @@ const Recents = React.memo(function Recents({ goToUrl }: { goToUrl: (url: string
             􀐫
           </Text>
           <Text color="label" size="20pt" weight="heavy">
-            Recents
+            {i18n.t(i18n.l.dapp_browser.homepage.recents)}
           </Text>
         </Inline>
         <Inline space={{ custom: CARD_PADDING }}>
@@ -151,28 +157,58 @@ const Card = React.memo(function Card({
 }) {
   const { isDarkMode } = useColorMode();
   const { dapps } = useDapps();
+  const isFavorite = useFavoriteDappsStore(state => state.isFavorite(site.url || ''));
+  const addFavorite = useFavoriteDappsStore(state => state.addFavorite);
+  const removeFavorite = useFavoriteDappsStore(state => state.removeFavorite);
+  const removeRecent = useBrowserHistoryStore(state => state.removeRecent);
+
+  const handleFavoritePress = useCallback(() => {
+    const url = site.url;
+    if (url) {
+      if (isFavorite) {
+        removeFavorite(url);
+      } else {
+        addFavorite(site);
+      }
+    }
+  }, [addFavorite, isFavorite, removeFavorite, site]);
+
+  const onPressMenuItem = useCallback(
+    async ({ nativeEvent: { actionKey } }: { nativeEvent: { actionKey: 'favorite' | 'remove' } }) => {
+      haptics.selection();
+      if (actionKey === 'favorite') {
+        handleFavoritePress();
+      } else if (actionKey === 'remove') {
+        removeRecent(site.url);
+      }
+    },
+    [handleFavoritePress, removeRecent, site.url]
+  );
 
-  const menuConfig = {
-    menuTitle: '',
-    menuItems: [
+  const menuConfig = useMemo(() => {
+    const menuItems = [
       {
-        actionKey: 'test1',
-        actionTitle: 'Option 1',
+        actionKey: 'favorite',
+        actionTitle: isFavorite ? i18n.t(i18n.l.dapp_browser.menus.undo_favorite) : i18n.t(i18n.l.dapp_browser.menus.favorite),
         icon: {
           iconType: 'SYSTEM',
-          iconValue: 'chart.line.uptrend.xyaxis',
+          iconValue: isFavorite ? 'star.slash' : 'star',
         },
       },
       {
-        actionKey: 'test2',
-        actionTitle: 'Option 2',
+        actionKey: 'remove',
+        actionTitle: i18n.t(i18n.l.dapp_browser.menus.remove),
         icon: {
           iconType: 'SYSTEM',
-          iconValue: 'plus.forwardslash.minus',
+          iconValue: 'trash',
         },
       },
-    ],
-  };
+    ];
+    return {
+      menuTitle: '',
+      menuItems,
+    };
+  }, [isFavorite]);
 
   const dappIconUrl = useMemo(() => {
     const dappUrl = site.url;
@@ -263,7 +299,7 @@ const Card = React.memo(function Card({
         </Box>
       </ButtonPressAnimation>
       {showMenuButton && (
-        <ContextMenuButton menuConfig={menuConfig} onPressMenuItem={() => {}} style={styles.cardContextMenuButton}>
+        <ContextMenuButton menuConfig={menuConfig} onPressMenuItem={onPressMenuItem} style={styles.cardContextMenuButton}>
           <ButtonPressAnimation scaleTo={0.8} style={{ padding: 12 }}>
             <Box height={{ custom: 24 }} width={{ custom: 24 }} borderRadius={32} style={{ overflow: 'hidden' }}>
               <Cover>
@@ -278,7 +314,7 @@ const Card = React.memo(function Card({
                     }}
                   />
                 ) : (
-                  <Box background="fill" height="full" width="full" />
+                  <Box background="fillQuaternary" height="full" width="full" />
                 )}
               </Cover>
               <View
@@ -392,7 +428,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
   },
   cardLogoWrapper: {
-    borderRadius: IS_IOS ? 12 : 36,
+    borderRadius: 12,
     overflow: 'hidden',
   },
   pageBackgroundDark: {

diff --git a/src/components/DappBrowser/search-input/AccountIcon.tsx b/src/components/DappBrowser/search-input/AccountIcon.tsx
@@ -67,7 +67,7 @@ export const AccountIcon = React.memo(function AccountIcon() {
 
   return (
     <Bleed space="8px">
-      <ButtonPressAnimation onPress={handleOnPress} scaleTo={0.8}>
+      <ButtonPressAnimation onPress={handleOnPress} scaleTo={0.8} overflowMargin={30}>
         {accountInfo?.accountImage ? (
           <ImageAvatar image={accountInfo.accountImage} size="signing" />
         ) : (