Merge remote-tracking branch 'origin/main' into salim/bump-network-co…

…ntroller-21.0.0

.github/CODEOWNERS

@@ -92,3 +92,12 @@ app/components/Views/DetectedTokens @MetaMask/metamask-assets
 app/components/Views/NFTAutoDetectionModal @MetaMask/metamask-assets
 app/components/Views/NftDetails @MetaMask/metamask-assets
 app/reducers/collectibles @MetaMask/metamask-assets
+
+# UX Team
+app/components                       @MetaMask/wallet-ux
+app/reducers/experimentalSettings    @MetaMask/wallet-ux
+app/reducers/modals                  @MetaMask/wallet-ux
+app/reducers/navigation              @MetaMask/wallet-ux
+app/reducers/onboarding              @MetaMask/wallet-ux
+app/reducers/privacy                 @MetaMask/wallet-ux
+app/reducers/settings                @MetaMask/wallet-ux

.storybook/storybook.requires.js

@@ -123,6 +123,7 @@ const getStories = () => {
     "./app/component-library/base-components/TagBase/TagBase.stories.tsx": require("../app/component-library/base-components/TagBase/TagBase.stories.tsx"),
     "./app/component-library/components-temp/TagColored/TagColored.stories.tsx": require("../app/component-library/components-temp/TagColored/TagColored.stories.tsx"),
     "./app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx": require("../app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx"),
+    "./app/components/UI/InfoRow/InfoRow.stories.tsx": require("../app/components/UI/InfoRow/InfoRow.stories.tsx"),
   };
 };
 

app/actions/notification/constants/index.ts

@@ -8,6 +8,7 @@ export enum notificationsErrors {
   CHECK_ACCOUNTS_PRESENCE = 'Error while trying to check accounts presence',
   DELETE_ON_CHAIN_TRIGGERS_BY_ACCOUNT = 'Error while trying to delete on chain triggers by account',
   UPDATE_ON_CHAIN_TRIGGERS_BY_ACCOUNT = 'Error while trying to update on chain triggers by account',
+  CREATE_ON_CHAIN_TRIGGERS_BY_ACCOUNT = 'Error while trying to create on chain triggers by account',
   SET_FEATURE_ANNOUNCEMENTS_ENABLED = 'Error while trying to set feature announcements enabled',
   SET_SNAP_NOTIFICATIONS_ENABLED = 'Error while trying to set snap notifications enabled',
   SET_METAMASK_NOTIFICATIONS_FEATURE_SEEN = 'Error while trying to set metamask notifications feature seen',

app/actions/notification/helpers/index.ts

@@ -113,6 +113,27 @@ export const updateOnChainTriggersByAccount = async (accounts: string[]) => {
   }
 };
 
+export const createOnChainTriggersByAccount = async (
+  resetNotifications: boolean,
+) => {
+  try {
+    const { userStorage } =
+      await Engine.context.NotificationServicesController.createOnChainTriggers(
+        {
+          resetNotifications,
+        },
+      );
+
+    if (!userStorage) {
+      return getErrorMessage(
+        notificationsErrors.CREATE_ON_CHAIN_TRIGGERS_BY_ACCOUNT,
+      );
+    }
+  } catch (error) {
+    return getErrorMessage(error);
+  }
+};
+
 export const setFeatureAnnouncementsEnabled = async (
   featureAnnouncementsEnabled: boolean,
 ) => {

app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.types.ts

@@ -51,6 +51,10 @@ export interface ButtonBaseProps extends TouchableOpacityProps {
    * Optional param to disable the button.
    */
   isDisabled?: boolean;
+  /**
+   * An optional loading state of Button.
+   */
+  loading?: boolean;
 }
 
 /**

app/component-library/components/Buttons/Button/variants/ButtonPrimary/ButtonPrimary.tsx

@@ -2,7 +2,7 @@
 
 // Third party dependencies.
 import React, { useCallback, useState } from 'react';
-import { GestureResponderEvent } from 'react-native';
+import { ActivityIndicator, GestureResponderEvent } from 'react-native';
 
 // External dependencies.
 import { useStyles } from '../../../../../hooks';
@@ -60,10 +60,14 @@ const ButtonPrimary = ({
       label
     );
 
+    const renderLoading = () => (
+      <ActivityIndicator size="small" color={DEFAULT_BUTTONPRIMARY_LABEL_COLOR} />
+    );
+
   return (
     <Button
       style={styles.base}
-      label={renderLabel()}
+      label={!props.loading ? renderLabel() : renderLoading()}
       labelColor={DEFAULT_BUTTONPRIMARY_LABEL_COLOR}
       onPressIn={triggerOnPressedIn}
       onPressOut={triggerOnPressedOut}

app/component-library/components/Buttons/Button/variants/ButtonSecondary/ButtonSecondary.tsx

@@ -2,7 +2,7 @@
 
 // Third party dependencies.
 import React, { useCallback, useState } from 'react';
-import { GestureResponderEvent } from 'react-native';
+import { ActivityIndicator, GestureResponderEvent } from 'react-native';
 
 // External dependencies.
 import { useStyles } from '../../../../../hooks';
@@ -72,10 +72,14 @@ const ButtonSecondary = ({
       label
     );
 
+    const renderLoading = () => (
+      <ActivityIndicator size="small" color={DEFAULT_BUTTONSECONDARY_LABEL_TEXTVARIANT} />
+    );
+
   return (
     <Button
       style={styles.base}
-      label={renderLabel()}
+      label={!props.loading ? renderLabel() : renderLoading()}
       labelColor={getLabelColor()}
       onPressIn={triggerOnPressedIn}
       onPressOut={triggerOnPressedOut}

app/components/Nav/App/index.js

@@ -114,6 +114,7 @@ import DefaultSettings from '../../Views/OnboardingSuccess/DefaultSettings';
 import BasicFunctionalityModal from '../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal';
 import SmartTransactionsOptInModal from '../../Views/SmartTransactionsOptInModal/SmartTranactionsOptInModal';
 import ProfileSyncingModal from '../../UI/ProfileSyncing/ProfileSyncingModal/ProfileSyncingModal';
+import ResetNotificationsModal from '../../UI/Notification/ResetNotificationsModal';
 import NFTAutoDetectionModal from '../../../../app/components/Views/NFTAutoDetectionModal/NFTAutoDetectionModal';
 import NftOptions from '../../../components/Views/NftOptions';
 import ShowTokenIdSheet from '../../../components/Views/ShowTokenIdSheet';
@@ -634,6 +635,10 @@ const App = (props) => {
         name={Routes.SHEET.PROFILE_SYNCING}
         component={ProfileSyncingModal}
       />
+      <Stack.Screen
+        name={Routes.SHEET.RESET_NOTIFICATIONS}
+        component={ResetNotificationsModal}
+      />
       <Stack.Screen
         name={Routes.SHEET.RETURN_TO_DAPP_MODAL}
         component={ReturnToAppModal}

app/components/UI/AccountRightButton/index.tsx

@@ -29,6 +29,7 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
 import { AccountOverviewSelectorsIDs } from '../../../../e2e/selectors/AccountOverview.selectors';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { useNetworkInfo } from '../../../selectors/selectedNetworkController';
+import UrlParser from 'url-parse';
 
 const styles = StyleSheet.create({
   leftButton: {
@@ -138,7 +139,7 @@ const AccountRightButton = ({
   const currentUrl = route.params?.url;
   let hostname;
   if (currentUrl) {
-    hostname = new URL(currentUrl).hostname;
+    hostname = new UrlParser(currentUrl)?.hostname;
   }
 
   const { networkName, networkImageSource } = useNetworkInfo(hostname);

app/components/UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.tsx

@@ -18,7 +18,7 @@ import Button, {
 import Checkbox from '../../../../component-library/components/Checkbox/Checkbox';
 import { useDispatch, useSelector } from 'react-redux';
 import { toggleBasicFunctionality } from '../../../../actions/settings';
-import createStyles from './BasicFunctionalityModal.styles';
+import createStyles from '../../Notification/Modal/styles';
 import { RootState } from 'app/reducers';
 import Icon, {
   IconColor,

app/components/UI/GenericButton/index.ios.js → app/components/UI/GenericButton/index.ios.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { ViewPropTypes, TouchableOpacity } from 'react-native';
+import { TouchableOpacity, ViewStyle, GestureResponderEvent } from 'react-native';
 
 /**
  * @deprecated The `<GenericButton>` component has been deprecated in favor of the new `<Button>` component from the component-library.
@@ -10,31 +9,32 @@ import { ViewPropTypes, TouchableOpacity } from 'react-native';
  * If you would like to help with the replacement of the old `Button` component, please submit a pull request against this GitHub issue:
  * {@link https://github.com/MetaMask/metamask-mobile/issues/8107}
  */
-const GenericButton = (props) => (
-  <TouchableOpacity
-    onPress={props.onPress}
-    style={props.style}
-    delayPressIn={50}
-  >
-    {props.children}
-  </TouchableOpacity>
-);
 
-GenericButton.propTypes = {
+interface GenericButtonProps {
   /**
    * Children components of the GenericButton
    * it can be a text node, an image, or an icon
    * or an Array with a combination of them
    */
-  children: PropTypes.any,
+  children?: React.ReactNode;
   /**
    * Styles to be applied to the GenericButton
    */
-  style: ViewPropTypes.style,
+  style?: ViewStyle;
   /**
    * Function to be called on press
    */
-  onPress: PropTypes.func,
-};
+  onPress?: (event: GestureResponderEvent) => void;
+}
+
+const GenericButton: React.FC<GenericButtonProps> = (props) => (
+  <TouchableOpacity
+    onPress={props.onPress}
+    style={props.style}
+    delayPressIn={50}
+  >
+    {props.children}
+  </TouchableOpacity>
+);
 
 export default GenericButton;

app/components/UI/InfoRow/InfoRow.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { StyleProp, Text, TextStyle, View } from 'react-native';
+
+import InfoRow from './InfoRow';
+import InfoSection from './InfoSection';
+
+const style = {
+  container: { padding: 8 },
+  title: { marginTop: 20, fontSize: 20, fontWeight: '700' },
+};
+
+storiesOf('App Components / InfoRow', module)
+  .addDecorator((getStory) => getStory())
+  .add('Default', () => (
+    <View style={style.container}>
+      <Text style={style.title as StyleProp<TextStyle>}>Simple Info Row</Text>
+      <InfoSection>
+        <InfoRow label="label-Key">Value-Text</InfoRow>
+      </InfoSection>
+      <Text style={style.title as StyleProp<TextStyle>}>Value wrapped</Text>
+      <InfoSection>
+        <InfoRow label="label-Key">
+          Value-Text Value-Text Value-Text Value-Text Value-Text Value-Text
+          Value-Text Value-Text Value-Text Value-Text Value-Text Value-Text
+          Value-Text Value-Text Value-Text Value-Text
+        </InfoRow>
+      </InfoSection>
+    </View>
+  ));

app/components/UI/InfoRow/InfoRow.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import InfoRow from './index';
+
+describe('InfoRow', () => {
+  it('should match snapshot for simple text value', async () => {
+    const container = render(<InfoRow label="label-Key">Value-Text</InfoRow>);
+    expect(container).toMatchSnapshot();
+  });
+});

app/components/UI/InfoRow/InfoRow.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { useTheme } from '../../../util/theme';
+import createStyles from './style';
+
+interface InfoRowProps {
+  label: string;
+  children: React.ReactNode | string;
+  tooltip?: string;
+}
+
+const InfoRow = ({ label, children }: InfoRowProps) => {
+  const { colors } = useTheme();
+
+  const styles = createStyles(colors);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{label}</Text>
+      {typeof children === 'string' ? (
+        <Text style={styles.value}>{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+};
+
+export default InfoRow;

app/components/UI/InfoRow/InfoSection/InfoSection.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import InfoSection from './index';
+
+describe('InfoSection', () => {
+  it('should match snapshot for simple text value', async () => {
+    const container = render(
+      <InfoSection>
+        <View>
+          <Text>Test</Text>
+        </View>
+      </InfoSection>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

app/components/UI/InfoRow/InfoSection/InfoSection.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../../../../util/theme';
+import createStyles from './style';
+
+interface InfoSectionProps {
+  children: React.ReactNode | string;
+}
+
+const InfoSection = ({ children }: InfoSectionProps) => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+
+  return <View style={styles.container}>{children}</View>;
+};
+
+export default InfoSection;