Dapp browser fixes (#5596)

* account icon fix shadow * fix fasterimage crash * fix other account icons * debounce new tab button * fix android webview height * rm log * homepage ui fix * fix logo border radius android * typo
rainbow-me · Apr 5, 2024 · b58bf34 · b58bf34
1 parent f9109ac
commit b58bf34
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 8 deletions.
diff --git a/src/components/DappBrowser/BrowserTab.tsx b/src/components/DappBrowser/BrowserTab.tsx
@@ -27,7 +27,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import ViewShot from 'react-native-view-shot';
 import WebView, { WebViewMessageEvent, WebViewNavigation } from 'react-native-webview';
-import { deviceUtils, safeAreaInsetValues } from '@/utils';
+import { deviceUtils } from '@/utils';
 import { MMKV } from 'react-native-mmkv';
 import { RAINBOW_HOME, TabState, useBrowserContext } from './BrowserContext';
 import { Freeze } from 'react-freeze';
@@ -38,6 +38,7 @@ import {
   TAB_VIEW_COLUMN_WIDTH,
   TAB_VIEW_ROW_HEIGHT,
   TAB_VIEW_TAB_HEIGHT,
+  TOP_INSET,
   WEBVIEW_HEIGHT,
 } from './Dimensions';
 import RNFS from 'react-native-fs';
@@ -802,7 +803,10 @@ export const BrowserTab = React.memo(function BrowserTab({ tabId, tabIndex, inje
                   )}
                 </View>
               </ViewShot>
-              <AnimatedFasterImage source={screenshotSource} style={[styles.screenshotContainerStyle, animatedScreenshotStyle]} />
+              <AnimatedFasterImage
+                source={IS_IOS ? screenshotSource : screenshotSource.value}
+                style={[styles.screenshotContainerStyle, animatedScreenshotStyle]}
+              />
               <WebViewBorder animatedTabIndex={animatedTabIndex} enabled={IS_IOS && isDarkMode && !isOnHomepage} />
               <CloseTabButton
                 animatedMultipleTabsOpen={animatedMultipleTabsOpen}
@@ -846,7 +850,7 @@ const styles = StyleSheet.create({
     height: WEBVIEW_HEIGHT,
     overflow: 'hidden',
     position: 'absolute',
-    top: safeAreaInsetValues.top,
+    top: TOP_INSET,
     width: deviceUtils.dimensions.width,
   },
   webViewStyle: {

diff --git a/src/components/DappBrowser/Dimensions.ts b/src/components/DappBrowser/Dimensions.ts
@@ -1,7 +1,9 @@
+import { IS_IOS } from '@/env';
 import { TAB_BAR_HEIGHT } from '@/navigation/SwipeNavigator';
 import { deviceUtils, safeAreaInsetValues } from '@/utils';
 
-export const WEBVIEW_HEIGHT = deviceUtils.dimensions.height - safeAreaInsetValues.top - TAB_BAR_HEIGHT - 88;
+export const TOP_INSET = IS_IOS ? safeAreaInsetValues.top : 40;
+export const WEBVIEW_HEIGHT = deviceUtils.dimensions.height - TOP_INSET - TAB_BAR_HEIGHT - 88;
 export const COLLAPSED_WEBVIEW_ASPECT_RATIO = 4 / 3;
 export const COLLAPSED_WEBVIEW_HEIGHT_UNSCALED = Math.min(WEBVIEW_HEIGHT, deviceUtils.dimensions.width * COLLAPSED_WEBVIEW_ASPECT_RATIO);
 

diff --git a/src/components/DappBrowser/Homepage.tsx b/src/components/DappBrowser/Homepage.tsx
@@ -93,7 +93,7 @@ const Card = ({ site, showMenuButton }: { showMenuButton?: boolean; site: Trendi
                     start={{ x: 0, y: 0 }}
                     end={{ x: 0, y: 1 }}
                     locations={[0, 0.5, 1]}
-                    style={{ width: '100%', height: '100%' }}
+                    style={{ width: '100%', height: '100%', borderRadius: 24 }}
                   />
                 </Cover>
               </Cover>
@@ -105,7 +105,7 @@ const Card = ({ site, showMenuButton }: { showMenuButton?: boolean; site: Trendi
                 source={{ uri: site.image }}
                 style={{
                   backgroundColor: isDarkMode ? globalColors.grey100 : globalColors.white100,
-                  borderRadius: 12,
+                  borderRadius: IS_IOS ? 12 : 36,
                   height: 48,
                   width: 48,
                 }}

diff --git a/src/screens/ProfileScreen.js b/src/screens/ProfileScreen.js
@@ -51,7 +51,7 @@ export default function ProfileScreen() {
         title="Activity"
         hasStatusBarInset
         leftComponent={
-          <ButtonPressAnimation onPress={onChangeWallet} scaleTo={0.8}>
+          <ButtonPressAnimation onPress={onChangeWallet} scaleTo={0.8} overflowMargin={50}>
             {accountImage ? (
               <ImageAvatar image={accountImage} marginRight={10} size="header" />
             ) : (

diff --git a/src/screens/discover/DiscoverScreen.tsx b/src/screens/discover/DiscoverScreen.tsx
@@ -65,7 +65,7 @@ export default function DiscoverScreen() {
         <Navbar
           hasStatusBarInset
           leftComponent={
-            <ButtonPressAnimation onPress={onChangeWallet} scaleTo={0.8}>
+            <ButtonPressAnimation onPress={onChangeWallet} scaleTo={0.8} overflowMargin={50}>
               {accountImage ? (
                 <ImageAvatar image={accountImage} marginRight={10} size="header" />
               ) : (