refactor(1702-4): ipfs gateway settings and display nft media settings components

app/components/Views/Settings/DisplayNFTMediaSettings/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DisplayNFTMediaSettings should render correctly 1`] = `
+<View
+  style={
+    {
+      "marginTop": 16,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#141618",
+          "flex": 1,
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 24,
+        }
+      }
+    >
+      Display NFT Media
+    </Text>
+    <View
+      style={
+        {
+          "marginLeft": 16,
+        }
+      }
+    >
+      <RCTSwitch
+        accessibilityRole="switch"
+        onChange={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        onTintColor="#0376c9"
+        style={
+          [
+            {
+              "height": 31,
+              "width": 51,
+            },
+            [
+              {
+                "alignSelf": "flex-start",
+              },
+              {
+                "backgroundColor": "#bbc0c566",
+                "borderRadius": 16,
+              },
+            ],
+          ]
+        }
+        testID="nft-display-media-mode-section"
+        thumbTintColor="#ffffff"
+        tintColor="#bbc0c566"
+        value={false}
+      />
+    </View>
+  </View>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#6a737d",
+        "fontFamily": "EuclidCircularB-Regular",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+        "marginTop": 8,
+      }
+    }
+  >
+    Displaying NFT media and data exposes your IP address to OpenSea or other third parties. NFT autodetection relies on this feature, and won't be available when turned off. If NFT media is fully located on IPFS, it can still be displayed even when this feature is turned off.
+  </Text>
+</View>
+`;

app/components/Views/Settings/DisplayNFTMediaSettings/index.constants.ts

@@ -0,0 +1 @@
+export const NFT_DISPLAY_MEDIA_MODE_SECTION = 'nft-display-media-mode-section';

app/components/Views/Settings/DisplayNFTMediaSettings/index.styles.ts

@@ -0,0 +1,27 @@
+// Third party dependencies.
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () =>
+  StyleSheet.create({
+    titleContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    title: {
+      flex: 1,
+    },
+    switchElement: {
+      marginLeft: 16,
+    },
+    switch: {
+      alignSelf: 'flex-start',
+    },
+    halfSetting: {
+      marginTop: 16,
+    },
+    desc: {
+      marginTop: 8,
+    },
+  });
+
+export default styleSheet;

app/components/Views/Settings/DisplayNFTMediaSettings/index.test.tsx

@@ -0,0 +1,79 @@
+// Third party dependencies
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+// External dependencies
+import Engine from '../../../../core/Engine';
+import renderWithProvider from '../../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../../util/test/initial-root-state';
+
+// Internal dependencies
+import DisplayNFTMediaSettings from '.';
+import { NFT_DISPLAY_MEDIA_MODE_SECTION } from './index.constants';
+
+let mockSetDisplayNftMedia: jest.Mock;
+let mockSetUseNftDetection: jest.Mock;
+
+beforeEach(() => {
+  mockSetDisplayNftMedia.mockClear();
+  mockSetUseNftDetection.mockClear();
+});
+
+const mockEngine = Engine;
+
+jest.mock('../../../../core/Engine', () => {
+  mockSetDisplayNftMedia = jest.fn();
+  mockSetUseNftDetection = jest.fn();
+  return {
+    init: () => mockEngine.init({}),
+    context: {
+      PreferencesController: {
+        setDisplayNftMedia: mockSetDisplayNftMedia,
+        setUseNftDetection: mockSetUseNftDetection,
+      },
+    },
+  };
+});
+
+describe('DisplayNFTMediaSettings', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const initialState = {
+    engine: {
+      backgroundState: {
+        ...backgroundState,
+        PreferencesController: {
+          ...backgroundState.PreferencesController,
+          displayNftMedia: false,
+          useNftDetection: false,
+        },
+      },
+    },
+  };
+
+  it('should render correctly', () => {
+    const tree = renderWithProvider(<DisplayNFTMediaSettings />, {
+      state: initialState,
+    });
+    expect(tree).toMatchSnapshot();
+  });
+
+  describe('Display NFT Media', () => {
+    it('should toggle display NFT media when switch is pressed', () => {
+      const { getByTestId } = renderWithProvider(<DisplayNFTMediaSettings />, {
+        state: initialState,
+      });
+      const toggleSwitch = getByTestId(NFT_DISPLAY_MEDIA_MODE_SECTION);
+
+      fireEvent(toggleSwitch, 'onValueChange', true);
+      expect(mockSetDisplayNftMedia).toHaveBeenCalledWith(true);
+      expect(mockSetUseNftDetection).not.toHaveBeenCalled();
+
+      fireEvent(toggleSwitch, 'onValueChange', false);
+      expect(mockSetDisplayNftMedia).toHaveBeenCalledWith(false);
+      expect(mockSetUseNftDetection).toHaveBeenCalledWith(false);
+    });
+  });
+});

app/components/Views/Settings/DisplayNFTMediaSettings/index.tsx

@@ -0,0 +1,66 @@
+// Third party dependencies
+import React from 'react';
+import { View, Switch } from 'react-native';
+import { useSelector } from 'react-redux';
+
+// External dependencies
+import { useStyles } from '../../../../component-library/hooks';
+import Engine from '../../../../core/Engine';
+import { selectDisplayNftMedia } from '../../../../selectors/preferencesController';
+import { useTheme } from '../../../../util/theme';
+import { strings } from '../../../../../locales/i18n';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../../component-library/components/Texts/Text';
+
+// Internal dependencies
+import styleSheet from './index.styles';
+import { NFT_DISPLAY_MEDIA_MODE_SECTION } from './index.constants';
+
+const DisplayNFTMediaSettings = () => {
+  const theme = useTheme();
+  const { colors } = theme;
+  const { styles } = useStyles(styleSheet, {});
+
+  const displayNftMedia = useSelector(selectDisplayNftMedia);
+
+  const toggleDisplayNftMedia = (value: boolean) => {
+    const { PreferencesController } = Engine.context;
+    PreferencesController?.setDisplayNftMedia(value);
+    if (!value) PreferencesController?.setUseNftDetection(value);
+  };
+
+  return (
+    <View style={styles.halfSetting}>
+      <View style={styles.titleContainer}>
+        <Text variant={TextVariant.BodyLGMedium} style={styles.title}>
+          {strings('app_settings.display_nft_media')}
+        </Text>
+        <View style={styles.switchElement}>
+          <Switch
+            testID={NFT_DISPLAY_MEDIA_MODE_SECTION}
+            value={displayNftMedia}
+            onValueChange={toggleDisplayNftMedia}
+            trackColor={{
+              true: colors.primary.default,
+              false: colors.border.muted,
+            }}
+            thumbColor={theme.brandColors.white}
+            style={styles.switch}
+            ios_backgroundColor={colors.border.muted}
+          />
+        </View>
+      </View>
+      <Text
+        variant={TextVariant.BodyMD}
+        color={TextColor.Alternative}
+        style={styles.desc}
+      >
+        {strings('app_settings.display_nft_media_desc_new')}
+      </Text>
+    </View>
+  );
+};
+
+export default DisplayNFTMediaSettings;

app/components/Views/Settings/IPFSGatewaySettings/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IPFSGatewaySettings should render correctly 1`] = `
+<View
+  style={
+    {
+      "marginTop": 32,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#141618",
+          "flex": 1,
+          "fontFamily": "EuclidCircularB-Medium",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 24,
+        }
+      }
+    >
+      IPFS Gateway
+    </Text>
+    <View
+      style={
+        {
+          "marginLeft": 16,
+        }
+      }
+    >
+      <RCTSwitch
+        accessibilityRole="switch"
+        onChange={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        onTintColor="#0376c9"
+        style={
+          [
+            {
+              "height": 31,
+              "width": 51,
+            },
+            [
+              {
+                "alignSelf": "flex-start",
+              },
+              {
+                "backgroundColor": "#bbc0c566",
+                "borderRadius": 16,
+              },
+            ],
+          ]
+        }
+        testID="IPFS_GATEWAY_SECTION"
+        thumbTintColor="#ffffff"
+        tintColor="#bbc0c566"
+        value={true}
+      />
+    </View>
+  </View>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#6a737d",
+        "fontFamily": "EuclidCircularB-Regular",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+        "marginTop": 8,
+      }
+    }
+  >
+    MetaMask uses third-party services to show images of your NFTs stored on IPFS, display information related to ENS addresses entered in your browser's address bar, and fetch icons for different tokens. Your IP address may be exposed to these services when you’re using them.
+  </Text>
+  <View
+    style={
+      {
+        "marginTop": 16,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#6a737d",
+          "fontFamily": "EuclidCircularB-Regular",
+          "fontSize": 14,
+          "fontWeight": "400",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+          "marginTop": 8,
+        }
+      }
+    >
+      Choose your preferred IPFS gateway.
+    </Text>
+    <View
+      style={
+        {
+          "borderColor": "#bbc0c5",
+          "borderRadius": 5,
+          "borderWidth": 2,
+          "marginTop": 16,
+        }
+      }
+    >
+      <View>
+        <ActivityIndicator
+          size="small"
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;