Merge branch 'main' into bug/10825-upgrading-appium-test-failing

MetaMask · Aug 27, 2024 · c4f3568 · c4f3568
2 parents 18605e8 + 5535b88
commit c4f3568
Show file tree

Hide file tree

Showing 34 changed files with 1,225 additions and 276 deletions.
diff --git a/app/actions/notification/helpers/index.ts b/app/actions/notification/helpers/index.ts
@@ -45,7 +45,6 @@ export const enableProfileSyncing = async () => {
 
 export const disableProfileSyncing = async () => {
   try {
-    await Engine.context.NotificationServicesController.disableNotificationServices();
     await Engine.context.UserStorageController.disableProfileSyncing();
   } catch (error) {
     return getErrorMessage(error);

diff --git a/app/components/UI/AssetOverview/AssetOverview.tsx b/app/components/UI/AssetOverview/AssetOverview.tsx
@@ -169,10 +169,9 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   );
 
   const itemAddress = safeToChecksumAddress(asset.address);
-  const exchangeRate =
-    itemAddress && itemAddress in tokenExchangeRates
-      ? tokenExchangeRates?.[itemAddress]?.price
-      : undefined;
+  const exchangeRate = itemAddress
+    ? tokenExchangeRates?.[itemAddress]?.price
+    : undefined;
 
   let balance, balanceFiat;
   if (asset.isETH) {
@@ -190,7 +189,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
     );
   } else {
     balance =
-      itemAddress && itemAddress in tokenBalances
+      itemAddress && tokenBalances?.[itemAddress]
         ? renderFromTokenMinimalUnit(tokenBalances[itemAddress], asset.decimals)
         : 0;
     balanceFiat = balanceToFiat(

diff --git a/app/components/UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.tsx b/app/components/UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.tsx
@@ -1,5 +1,5 @@
 // Third party dependencies.
-import React, { useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { View } from 'react-native';
 
 // External dependencies.
@@ -25,8 +25,22 @@ import Icon, {
   IconName,
   IconSize,
 } from '../../../../component-library/components/Icons/Icon';
+import Routes from '../../../../constants/navigation/Routes';
+import {
+  asyncAlert,
+  requestPushNotificationsPermission,
+} from '../../../../util/notifications';
+import { useEnableNotifications } from '../../../../util/notifications/hooks/useNotifications';
 
-const BasicFunctionalityModal = () => {
+interface Props {
+  route: {
+    params: {
+      caller: string;
+    };
+  };
+}
+
+const BasicFunctionalityModal = ({ route }: Props) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   const bottomSheetRef = useRef<BottomSheetRef>(null);
@@ -36,10 +50,34 @@ const BasicFunctionalityModal = () => {
     (state: RootState) => state?.settings?.basicFunctionalityEnabled,
   );
 
-  const closeBottomSheet = () => {
+  const { enableNotifications } = useEnableNotifications();
+
+  const enableNotificationsFromModal = useCallback(async () => {
+    const nativeNotificationStatus = await requestPushNotificationsPermission(
+      asyncAlert,
+    );
+
+    if (nativeNotificationStatus) {
+      /**
+       * Although this is an async function, we are dispatching an action (firing & forget)
+       * to emulate optimistic UI.
+       *
+       */
+      enableNotifications();
+    }
+  }, [enableNotifications]);
+
+  const closeBottomSheet = async () => {
     bottomSheetRef.current?.onCloseBottomSheet(() =>
       dispatch(toggleBasicFunctionality(!isEnabled)),
     );
+
+    if (
+      route.params.caller === Routes.SETTINGS.NOTIFICATIONS ||
+      route.params.caller === Routes.NOTIFICATIONS.OPT_IN
+    ) {
+      await enableNotificationsFromModal();
+    }
   };
 
   const handleSwitchToggle = () => {

diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js
@@ -119,6 +119,21 @@ const styles = StyleSheet.create({
     height: 24,
     marginLeft: 16,
   },
+  notificationsWrapper: {
+    position: 'relative',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  notificationsBadge: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+
+    position: 'absolute',
+    top: 2,
+    right: 10,
+  },
 });
 
 const metamask_name = require('../../../images/metamask-name.png'); // eslint-disable-line
@@ -901,6 +916,7 @@ export function getWalletNavbarOptions(
   navigation,
   themeColors,
   isNotificationEnabled,
+  unreadNotificationCount,
 ) {
   const innerStyles = StyleSheet.create({
     headerStyle: {
@@ -999,14 +1015,26 @@ export function getWalletNavbarOptions(
     headerRight: () => (
       <View style={styles.leftButtonContainer}>
         {isNotificationsFeatureEnabled() && (
-          <ButtonIcon
-            iconColor={IconColor.Primary}
-            onPress={handleNotificationOnPress}
-            iconName={IconName.Notification}
-            size={IconSize.Xl}
-            testID={WalletViewSelectorsIDs.WALLET_NOTIFICATIONS_BUTTON}
-            style={styles.notificationButton}
-          />
+          <View style={styles.notificationsWrapper}>
+            <ButtonIcon
+              iconColor={IconColor.Primary}
+              onPress={handleNotificationOnPress}
+              iconName={IconName.Notification}
+              size={IconSize.Xl}
+              testID={WalletViewSelectorsIDs.WALLET_NOTIFICATIONS_BUTTON}
+              style={styles.notificationButton}
+            />
+            <View
+              style={[
+                styles.notificationsBadge,
+                {
+                  backgroundColor: unreadNotificationCount
+                    ? themeColors.error.default
+                    : themeColors.background.transparent,
+                },
+              ]}
+            />
+          </View>
         )}
 
         <ButtonIcon

diff --git a/app/components/UI/Notification/List/index.tsx b/app/components/UI/Notification/List/index.tsx
@@ -1,5 +1,6 @@
 import { NavigationProp, ParamListBase } from '@react-navigation/native';
 import React, { useCallback, useMemo } from 'react';
+import notifee from '@notifee/react-native';
 import { ActivityIndicator, FlatList, FlatListProps, View } from 'react-native';
 import ScrollableTabView, {
   DefaultTabBar,
@@ -70,6 +71,15 @@ function NotificationsListItem(props: NotificationsListItemProps) {
           notification: item,
         });
       }
+      const unreadedCount = async () => await notifee.getBadgeCount();
+
+      unreadedCount().then((count) => {
+        if (count > 0) {
+          notifee.setBadgeCount(count - 1);
+        } else {
+          notifee.setBadgeCount(0);
+        }
+      });
     },
     [markNotificationAsRead, props.navigation],
   );
@@ -89,7 +99,12 @@ function NotificationsListItem(props: NotificationsListItemProps) {
       handleOnPress={() => onNotificationClick(props.notification)}
       styles={styles}
       simultaneousHandlers={undefined}
+      isRead={props.notification.isRead}
     >
+      <NotificationMenuItem.Icon
+        isRead={props.notification.isRead}
+        {...menuItemState}
+      />
       <NotificationMenuItem.Icon {...menuItemState} />
       <NotificationMenuItem.Content {...menuItemState} />
     </NotificationMenuItem.Root>

diff --git a/app/components/UI/Notification/List/styles.ts b/app/components/UI/Notification/List/styles.ts
@@ -11,11 +11,46 @@ export const createStyles = ({ colors, typography }: Theme) =>
       backgroundColor: colors.background.default,
       marginHorizontal: 8,
     },
+    itemContainer: {
+      flex: 1,
+      paddingVertical: 10,
+      paddingHorizontal: 8,
+    },
+    unreadItemContainer: {
+      flex: 1,
+      paddingVertical: 10,
+      paddingHorizontal: 8,
+      backgroundColor: colors.info.muted,
+    },
+    readItemContainer: {
+      flex: 1,
+      paddingVertical: 10,
+      paddingHorizontal: 8,
+      backgroundColor: colors.background.default,
+    },
+    unreadDot: {
+      width: 4,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: colors.info.default,
+      position: 'absolute',
+      marginTop: 16,
+      marginLeft: -6,
+    },
+    readDot: {
+      width: 4,
+      height: 4,
+      borderRadius: 2,
+      position: 'absolute',
+      marginTop: 16,
+      marginLeft: -6,
+    },
     wrapper: {
       flex: 1,
       paddingVertical: 10,
       justifyContent: 'center',
       borderRadius: 10,
+      backgroundColor: colors.primary.default,
     },
     loaderContainer: {
       position: 'absolute',

diff --git a/app/components/UI/Notification/NotificationMenuItem/Icon.tsx b/app/components/UI/Notification/NotificationMenuItem/Icon.tsx
@@ -10,7 +10,10 @@ import RemoteImage from '../../../../components/Base/RemoteImage';
 import METAMASK_FOX from '../../../../images/fox.png';
 import { View } from 'react-native';
 
-type NotificationIconProps = Pick<NotificationMenuItem, 'image' | 'badgeIcon'>;
+type NotificationIconProps = Pick<
+  NotificationMenuItem,
+  'image' | 'badgeIcon' | 'isRead'
+>;
 
 function MenuIcon(props: NotificationIconProps) {
   const { styles } = useStyles();
@@ -47,20 +50,23 @@ function NotificationIcon(props: NotificationIconProps) {
   const { styles } = useStyles();
 
   return (
-    <View style={styles.itemLogoSize}>
-      <BadgeWrapper
-        badgePosition={BOTTOM_BADGEWRAPPER_BADGEPOSITION}
-        badgeElement={
-          <Badge
-            variant={BadgeVariant.NotificationsKinds}
-            iconName={props.badgeIcon}
-          />
-        }
-        style={styles.badgeWrapper}
-      >
-        <MenuIcon {...props} />
-      </BadgeWrapper>
-    </View>
+    <React.Fragment>
+      <View style={styles.itemLogoSize}>
+        <BadgeWrapper
+          badgePosition={BOTTOM_BADGEWRAPPER_BADGEPOSITION}
+          badgeElement={
+            <Badge
+              variant={BadgeVariant.NotificationsKinds}
+              iconName={props.badgeIcon}
+            />
+          }
+          style={styles.badgeWrapper}
+        >
+          <MenuIcon {...props} />
+        </BadgeWrapper>
+      </View>
+      <View style={props.isRead ? styles.readDot : styles.unreadDot} />
+    </React.Fragment>
   );
 }
 

diff --git a/app/components/UI/Notification/NotificationMenuItem/Root.tsx b/app/components/UI/Notification/NotificationMenuItem/Root.tsx
@@ -27,6 +27,7 @@ interface NotificationRootProps
   styles: NotificationListStyles;
   handleOnPress: () => void;
   onDismiss?: () => void;
+  isRead?: boolean;
 }
 
 const { width: SCREEN_WIDTH } = Dimensions.get('window');
@@ -39,6 +40,7 @@ function NotificationRoot({
   styles,
   onDismiss,
   simultaneousHandlers,
+  isRead,
 }: NotificationRootProps) {
   const transX = useSharedValue(0);
   const itemHeight = useSharedValue();
@@ -75,7 +77,8 @@ function NotificationRoot({
 
   const rChildrenStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: transX.value }],
-    ...styles.container,
+    ...styles.itemContainer,
+    ...(!isRead ? styles.unreadItemContainer : styles.readItemContainer),
   }));
 
   const rIconStyle = useAnimatedStyle(() => {
@@ -86,14 +89,8 @@ function NotificationRoot({
     return { opacity: opct };
   });
 
-  const rContainerStyle = useAnimatedStyle(() => ({
-    height: itemHeight.value,
-    paddingVertical: paddingVertical.value,
-    opacity: opacity.value,
-  }));
-
   return (
-    <Animated.View style={[styles.wrapper, rContainerStyle]}>
+    <Animated.View>
       <PanGestureHandler
         simultaneousHandlers={simultaneousHandlers}
         onGestureEvent={panGesture}