From c299cd2798a466d830bb071a4068885226b701ef Mon Sep 17 00:00:00 2001 From: EtherWizard33 <165834542+EtherWizard33@users.noreply.github.com> Date: Mon, 24 Jun 2024 14:17:27 +0300 Subject: [PATCH 01/35] feat: adding search to the network bottomsheet as part of the networks management UI redesign (#9961) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Adding search to the network bottomsheet as part of the networks management UI redesign. Here is a 2 minute overview demo: https://www.loom.com/share/dc29313a5cd34e9893c76a0caeba0fc1 Here is a link to the related Figma that includes the adding of the search box to the bottom sheet: https://www.figma.com/design/76R5BvAVubUhWaN2Ld7MAv/Default-Networks?node-id=1303-9439&t=yhxfHHCsG0CimP0w-0 ## **Related issues** Fixes: https://github.com/MetaMask/MetaMask-planning/issues/2495 ## **Manual testing steps** 1. Add a the following env var that will be used as a feature flag to enable to the feature export MM_NETWORK_UI_REDESIGN_ENABLED="1" 2. From the header in the home screen, click the network selector 3. The network bottom sheet should come up and you should see the search box 4. Type ava in the search box and it should filter out all other networks and show only avalanche 5. For a demo please see the video in the description above ## **Screenshots/Recordings** ### **Before** ### **After** ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --------- Co-authored-by: salimtb --- .../NetworkSelector/NetworkSelector.styles.ts | 60 +++++++- .../Views/NetworkSelector/NetworkSelector.tsx | 134 +++++++++++++++--- .../CustomNetworkView/CustomNetwork.tsx | 3 +- .../CustomNetworkView/CustomNetwork.types.ts | 6 + 4 files changed, 184 insertions(+), 19 deletions(-) diff --git a/app/components/Views/NetworkSelector/NetworkSelector.styles.ts b/app/components/Views/NetworkSelector/NetworkSelector.styles.ts index 481940e3763..0203932530d 100644 --- a/app/components/Views/NetworkSelector/NetworkSelector.styles.ts +++ b/app/components/Views/NetworkSelector/NetworkSelector.styles.ts @@ -2,6 +2,7 @@ import Device from '../../../util/device'; import { StyleSheet } from 'react-native'; import { fontStyles } from '../../../styles/common'; +import { isNetworkUiRedesignEnabled } from '../../../util/networks'; /** * Style sheet function for NetworkSelector screen. * @returns StyleSheet object. @@ -12,7 +13,11 @@ const createStyles = (colors: any) => StyleSheet.create({ addNetworkButton: { marginHorizontal: 16, - marginBottom: Device.isAndroid() ? 16 : 0, + marginBottom: Device.isAndroid() + ? 16 + : isNetworkUiRedesignEnabled + ? 12 + : 0, }, switchContainer: { flexDirection: 'row', @@ -39,6 +44,59 @@ const createStyles = (colors: any) => color: colors.primary.default, marginTop: 1, }, + networkListContainer: { + height: isNetworkUiRedesignEnabled ? '100%' : undefined, + }, + networkIcon: { + width: 20, + height: 20, + borderRadius: 10, + marginTop: 2, + marginRight: 16, + }, + network: { + flex: 1, + flexDirection: 'row', + paddingVertical: 12, + alignItems: 'center', + }, + networkLabel: { + fontSize: 16, + color: colors.text.default, + ...fontStyles.normal, + }, + inputWrapper: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 10, + paddingVertical: 10, + borderRadius: 5, + borderWidth: 1, + borderColor: colors.border.default, + color: colors.text.default, + marginLeft: 16, + marginRight: 16, + marginBottom: 8, + }, + input: { + flex: 1, + fontSize: 14, + color: colors.text.default, + ...fontStyles.normal, + paddingLeft: 10, + }, + icon: { + marginLeft: 8, + }, + no_match_text: { + marginVertical: 10, + }, + text: { + textAlign: 'center', + color: colors.text.default, + fontSize: 10, + marginTop: 4, + }, }); export default createStyles; diff --git a/app/components/Views/NetworkSelector/NetworkSelector.tsx b/app/components/Views/NetworkSelector/NetworkSelector.tsx index 24ff171bf65..d0a6bc36d98 100644 --- a/app/components/Views/NetworkSelector/NetworkSelector.tsx +++ b/app/components/Views/NetworkSelector/NetworkSelector.tsx @@ -1,6 +1,7 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ // Third party dependencies. import React, { useRef, useState } from 'react'; -import { Linking, Switch, View } from 'react-native'; +import { Linking, Switch, TextInput, View } from 'react-native'; import { ScrollView } from 'react-native-gesture-handler'; import images from 'images/image-icons'; import { useNavigation } from '@react-navigation/native'; @@ -64,11 +65,15 @@ import { TESTNET_TICKER_SYMBOLS } from '@metamask/controller-utils'; import InfoModal from '../../../../app/components/UI/Swaps/components/InfoModal'; import hideKeyFromUrl from '../../../util/hideKeyFromUrl'; import CustomNetwork from '../Settings/NetworksSettings/NetworkSettings/CustomNetworkView/CustomNetwork'; +import { NetworksViewSelectorsIDs } from '../../../../e2e/selectors/Settings/NetworksView.selectors'; +import { PopularList } from '../../../util/networks/customNetworks'; +import Icon from 'react-native-vector-icons/Ionicons'; const NetworkSelector = () => { const [showPopularNetworkModal, setShowPopularNetworkModal] = useState(false); const [popularNetwork, setPopularNetwork] = useState(undefined); const [showWarningModal, setShowWarningModal] = useState(false); + const [searchString, setSearchString] = useState(''); const { navigate } = useNavigation(); const theme = useTheme(); const { trackEvent } = useMetrics(); @@ -167,8 +172,34 @@ const NetworkSelector = () => { Linking.openURL(strings('networks.learn_more_url')); }; + const filterNetworksByName = (networks: any[], networkName: string) => { + const searchResult: any = networks.filter(({ name }) => + name.toLowerCase().includes(networkName.toLowerCase()), + ); + + return searchResult; + }; + + const isNoSearchResults = (networkIdenfier: string) => { + if (!searchString || !networkIdenfier) { + return false; + } + + if (networkIdenfier === MAINNET || networkIdenfier === LINEA_MAINNET) { + return ( + filterNetworksByName([Networks[networkIdenfier]], searchString) + .length === 0 + ); + } + + return !networkIdenfier.includes(searchString); + }; + const renderMainnet = () => { const { name: mainnetName, chainId } = Networks.mainnet; + + if (isNetworkUiRedesignEnabled && isNoSearchResults(MAINNET)) return null; + return ( { const renderLineaMainnet = () => { const { name: lineaMainnetName, chainId } = Networks['linea-mainnet']; + + if (isNetworkUiRedesignEnabled && isNoSearchResults('linea-mainnet')) + return null; + return ( { ({ nickname, rpcUrl, chainId }) => { if (!chainId) return null; const { name } = { name: nickname || rpcUrl }; + + if (isNetworkUiRedesignEnabled && isNoSearchResults(name)) return null; + //@ts-expect-error - The utils/network file is still JS and this function expects a networkType, and should be optional const image = getNetworkImageSource({ chainId: chainId?.toString() }); @@ -243,6 +281,8 @@ const NetworkSelector = () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any const { name, imageSource, chainId } = (Networks as any)[networkType]; + if (isNetworkUiRedesignEnabled && isNoSearchResults(name)) return null; + return ( { ); - const renderAdditonalNetworks = () => ( - - - - ); + const renderAdditonalNetworks = () => { + let filteredNetworks; + + if (isNetworkUiRedesignEnabled && searchString.length > 0) + filteredNetworks = PopularList.filter(({ nickname }) => + nickname.toLowerCase().includes(searchString.toLowerCase()), + ); + + return ( + + 0 ? filteredNetworks : undefined + } + showCompletionMessage={false} + /> + + ); + }; const renderTitle = (title: string) => ( @@ -314,18 +368,51 @@ const NetworkSelector = () => { ); - return ( - + const handleSearchTextChange = (text: any) => { + setSearchString(text); + }; + + const clearSearchInput = () => { + setSearchString(''); + }; + + const renderBottomSheetContent = () => ( + <> - {isNetworkUiRedesignEnabled && renderTitle('networks.enabled_networks')} + {isNetworkUiRedesignEnabled && ( + + + + {searchString.length > 0 && ( + + )} + + )} + {isNetworkUiRedesignEnabled && + searchString.length === 0 && + renderTitle('networks.enabled_networks')} {renderMainnet()} {renderLineaMainnet()} {renderRpcNetworks()} {isNetworkUiRedesignEnabled && + searchString.length === 0 && renderTitle('networks.additional_networks')} {isNetworkUiRedesignEnabled && renderAdditonalNetworks()} - {renderTestNetworksSwitch()} + {searchString.length === 0 && renderTestNetworksSwitch()} {showTestNetworks && renderOtherNetworks()} @@ -338,6 +425,19 @@ const NetworkSelector = () => { style={styles.addNetworkButton} testID={NetworkListModalSelectorsIDs.ADD_BUTTON} /> + + ); + + return ( + + {isNetworkUiRedesignEnabled ? ( + + {renderBottomSheetContent()} + + ) : ( + renderBottomSheetContent() + )} + {showWarningModal ? ( { const networkConfigurations = useSelector(selectNetworkConfigurations); @@ -52,7 +53,7 @@ const CustomNetwork = ({ ? supportedNetworkList : supportedNetworkList.filter((n) => !n.isAdded); - if (filteredPopularList.length === 0) { + if (filteredPopularList.length === 0 && showCompletionMessage) { return ( switchTab?.goToPage?.(1)} /> ); diff --git a/app/components/Views/Settings/NetworksSettings/NetworkSettings/CustomNetworkView/CustomNetwork.types.ts b/app/components/Views/Settings/NetworksSettings/NetworkSettings/CustomNetworkView/CustomNetwork.types.ts index d4b7e58328a..cadbcb6e968 100644 --- a/app/components/Views/Settings/NetworksSettings/NetworkSettings/CustomNetworkView/CustomNetwork.types.ts +++ b/app/components/Views/Settings/NetworksSettings/NetworkSettings/CustomNetworkView/CustomNetwork.types.ts @@ -59,4 +59,10 @@ export interface CustomNetworkProps { * List of custom networks */ customNetworksList?: Network[]; + /** + * If this list of networks is used in a filtered way for example when the user is using a search box to filter networks, + * we should take that into consideration before displaying an empty state telling the user he has already added all networks. + * This is the main use case for this prop. + */ + showCompletionMessage?: boolean; } From 671392a9307efa47f963523b6ea9aaae1eacc1d4 Mon Sep 17 00:00:00 2001 From: Prithpal Sooriya Date: Tue, 25 Jun 2024 19:27:10 +0100 Subject: [PATCH 02/35] fix: fix engine configuration and snapshot test --- app/core/Engine.ts | 64 ++++---- app/util/test/initial-background-state.json | 19 +++ babel.config.js | 6 +- package.json | 6 +- yarn.lock | 168 +++++++++++++++++--- 5 files changed, 212 insertions(+), 51 deletions(-) diff --git a/app/core/Engine.ts b/app/core/Engine.ts index 302a7072ec0..550d2b36cd1 100644 --- a/app/core/Engine.ts +++ b/app/core/Engine.ts @@ -1003,6 +1003,34 @@ class Engine { ], }); + const snapController = new SnapController({ + environmentEndowmentPermissions: Object.values(EndowmentPermissions), + featureFlags: { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + requireAllowlist, + }, + state: initialState.SnapController || undefined, + // TODO: Replace "any" with type + // eslint-disable-next-line @typescript-eslint/no-explicit-any + messenger: snapControllerMessenger as any, + detectSnapLocation: ( + location: string | URL, + options?: DetectSnapLocationOptions, + ) => + detectSnapLocation(location, { + ...options, + allowLocal: allowLocalSnaps, + fetch: fetchFunction, + }), + //@ts-expect-error types need to be aligned with snaps-controllers + preinstalledSnaps: PREINSTALLED_SNAPS, + //@ts-expect-error types need to be aligned between new encryptor and snaps-controllers + encryptor, + getMnemonic: getPrimaryKeyringMnemonic.bind(this), + }); + ///: END:ONLY_INCLUDE_IF + const authenticationController = new AuthenticationController.Controller({ state: initialState.AuthenticationController, // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -1056,36 +1084,16 @@ class Engine { allowedEvents: ['KeyringController:stateChange'], }), state: initialState.NotificationServicesController, + env: { + isPushIntegrated: false, // temporary until we integrate push notifications + featureAnnouncements: { + platform: 'mobile', + accessToken: 'TODO from env', + spaceId: 'TODO from env', + }, + }, }); - const snapController = new SnapController({ - environmentEndowmentPermissions: Object.values(EndowmentPermissions), - featureFlags: { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - requireAllowlist, - }, - state: initialState.SnapController || undefined, - // TODO: Replace "any" with type - // eslint-disable-next-line @typescript-eslint/no-explicit-any - messenger: snapControllerMessenger as any, - detectSnapLocation: ( - location: string | URL, - options?: DetectSnapLocationOptions, - ) => - detectSnapLocation(location, { - ...options, - allowLocal: allowLocalSnaps, - fetch: fetchFunction, - }), - //@ts-expect-error types need to be aligned with snaps-controllers - preinstalledSnaps: PREINSTALLED_SNAPS, - //@ts-expect-error types need to be aligned between new encryptor and snaps-controllers - encryptor, - getMnemonic: getPrimaryKeyringMnemonic.bind(this), - }); - ///: END:ONLY_INCLUDE_IF - this.transactionController = new TransactionController({ // @ts-expect-error at this point in time the provider will be defined by the `networkController.initializeProvider` blockTracker: networkController.getProviderAndBlockTracker().blockTracker, diff --git a/app/util/test/initial-background-state.json b/app/util/test/initial-background-state.json index d15e9fd0a7d..e58232c9bfc 100644 --- a/app/util/test/initial-background-state.json +++ b/app/util/test/initial-background-state.json @@ -221,5 +221,24 @@ "unapprovedMsgCount": 0, "unapprovedPersonalMsgCount": 0, "unapprovedTypedMessagesCount": 0 + }, + "AuthenticationController": { + "isSignedIn": false + }, + "UserStorageController": { + "isProfileSyncingEnabled": true, + "isProfileSyncingUpdateLoading": false + }, + "NotificationServicesController": { + "isCheckingAccountsPresence": false, + "isFeatureAnnouncementsEnabled": false, + "isFetchingMetamaskNotifications": false, + "isMetamaskNotificationsFeatureSeen": false, + "isNotificationServicesEnabled": false, + "isUpdatingMetamaskNotifications": false, + "isUpdatingMetamaskNotificationsAccount": [], + "metamaskNotificationsList": [], + "metamaskNotificationsReadList": [], + "subscriptionAccountsSeen": [] } } diff --git a/babel.config.js b/babel.config.js index da1d15c592f..25537e37b9d 100644 --- a/babel.config.js +++ b/babel.config.js @@ -16,7 +16,11 @@ module.exports = { plugins: [['@babel/plugin-transform-private-methods', { loose: true }]], }, { - test: './node_modules/@metamask/notification-services-controller', + test: './node_modules/@metamask-previews/profile-sync-controller', + plugins: [['@babel/plugin-transform-private-methods', { loose: true }]], + }, + { + test: './node_modules/@metamask-previews/notification-services-controller', plugins: [['@babel/plugin-transform-private-methods', { loose: true }]], }, ], diff --git a/package.json b/package.json index 3b394478c46..801e759c776 100644 --- a/package.json +++ b/package.json @@ -160,13 +160,13 @@ "@metamask/logging-controller": "^3.0.0", "@metamask/message-signing-snap": "^0.3.3", "@metamask/network-controller": "^18.1.0", - "@metamask/notification-services-controller": "^0.1.0", + "@metamask-previews/notification-services-controller": "0.1.0-preview-caf274f8", "@metamask/permission-controller": "^9.0.0", "@metamask/phishing-controller": "^9.0.0", "@metamask/post-message-stream": "^8.0.0", "@metamask/ppom-validator": "0.31.0", "@metamask/preferences-controller": "^11.0.0", - "@metamask/profile-sync-controller": "^0.1.0", + "@metamask-previews/profile-sync-controller": "0.1.0-preview-caf274f8", "@metamask/react-native-actionsheet": "2.4.2", "@metamask/react-native-animated-fox": "^2.1.0", "@metamask/react-native-button": "^3.0.0", @@ -566,7 +566,7 @@ "ts-node>@swc/core": false, "@metamask/sdk-communication-layer>bufferutil": false, "@metamask/sdk-communication-layer>utf-8-validate": false, - "@metamask/notification-services-controller>firebase>@firebase/firestore>@grpc/proto-loader>protobufjs": false + "@metamask-previews/notification-services-controller>firebase>@firebase/firestore>@grpc/proto-loader>protobufjs": false } }, "packageManager": "yarn@1.22.22" diff --git a/yarn.lock b/yarn.lock index 34f092405f4..3bc79ac55de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3970,6 +3970,38 @@ resolved "https://registry.yarnpkg.com/@log4js-node/log4js-api/-/log4js-api-1.0.2.tgz#7a8143fb33f077df3e579dca7f18fea74a02ec8b" integrity sha512-6SJfx949YEWooh/CUPpJ+F491y4BYJmknz4hUN1+RHvKoUEynKbRmhnwbk/VLmh4OthLLDNCyWXfbh4DG1cTXA== +"@metamask-previews/notification-services-controller@0.1.0-preview-caf274f8": + version "0.1.0-preview-caf274f8" + resolved "https://registry.yarnpkg.com/@metamask-previews/notification-services-controller/-/notification-services-controller-0.1.0-preview-caf274f8.tgz#7489547c3b3e0718c2605d9da3321e0d3397a8e9" + integrity sha512-7hn4UOUTOoJJVBAOqlwO55FiGldYYQJTPGK1ssGFXQxca+ynBa9Khq/3Q6kyOU5creQYAAkNWkvQqZpXBOaQRw== + dependencies: + "@contentful/rich-text-html-renderer" "^16.5.2" + "@metamask/base-controller" "^6.0.0" + "@metamask/controller-utils" "^11.0.0" + "@metamask/keyring-controller" "^17.1.0" + "@metamask/profile-sync-controller" "^0.1.0" + bignumber.js "^4.1.0" + contentful "^10.3.6" + firebase "^10.11.0" + loglevel "^1.8.1" + uuid "^8.3.2" + +"@metamask-previews/profile-sync-controller@0.1.0-preview-caf274f8": + version "0.1.0-preview-caf274f8" + resolved "https://registry.yarnpkg.com/@metamask-previews/profile-sync-controller/-/profile-sync-controller-0.1.0-preview-caf274f8.tgz#1b9be20d3b62a72d3bef7dd4cae3d5004a173e8b" + integrity sha512-wQ9e9B3IehixHLPqZm2XJm4TFmn2fCj3v2C25pCiJ06OQcx/c96zbxruRw1uPQwaHIEUjFli4aF+fXmBgYALyA== + dependencies: + "@metamask/base-controller" "^6.0.0" + "@metamask/snaps-controllers" "^8.1.1" + "@metamask/snaps-sdk" "^4.2.0" + "@metamask/snaps-utils" "^7.4.0" + "@noble/ciphers" "^0.5.2" + "@noble/hashes" "^1.4.0" + ethers "^6.12.0" + immer "^9.0.6" + loglevel "^1.8.1" + siwe "^2.3.2" + "@metamask/abi-utils@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@metamask/abi-utils/-/abi-utils-1.2.0.tgz#068e1b0f5e423dfae96961e0e5276a7c1babc03a" @@ -4559,6 +4591,18 @@ superstruct "^1.0.3" uuid "^9.0.1" +"@metamask/keyring-api@^8.0.0": + version "8.0.0" + resolved "https://registry.yarnpkg.com/@metamask/keyring-api/-/keyring-api-8.0.0.tgz#57a4e18921f859f45e6882afe7f938955b826d91" + integrity sha512-jxow0Q9xPGTb2oY6d+t7f8lpboqTg5W24CyorZyvfwTsKQ9hNj4RhUsVszUYPySOt6O+Nu1uiYD+Se1Sk43Xwg== + dependencies: + "@metamask/snaps-sdk" "^4.2.0" + "@metamask/utils" "^8.4.0" + "@types/uuid" "^9.0.8" + bech32 "^2.0.0" + superstruct "^1.0.3" + uuid "^9.0.1" + "@metamask/keyring-controller@^16.0.0": version "16.0.0" resolved "https://registry.yarnpkg.com/@metamask/keyring-controller/-/keyring-controller-16.0.0.tgz#36530a5cbc311d496ef66701c66daf779a769fca" @@ -4606,6 +4650,19 @@ "@metamask/controller-utils" "^9.0.1" uuid "^8.3.2" +"@metamask/message-manager@^10.0.0": + version "10.0.0" + resolved "https://registry.yarnpkg.com/@metamask/message-manager/-/message-manager-10.0.0.tgz#2a08441360b1db60e99810ef954f36d12482d474" + integrity sha512-WSPH4wkMe6W7YhBKob1m9iBiiioBaauD8Degx/OZFWZlGcQDnGC5MnfJQSxqLqLa0UBD6otFNihsdOI1qWORyA== + dependencies: + "@metamask/base-controller" "^6.0.0" + "@metamask/controller-utils" "^11.0.0" + "@metamask/eth-sig-util" "^7.0.1" + "@metamask/utils" "^8.3.0" + "@types/uuid" "^8.3.0" + jsonschema "^1.2.4" + uuid "^8.3.2" + "@metamask/message-manager@^8.0.2": version "8.0.2" resolved "https://registry.yarnpkg.com/@metamask/message-manager/-/message-manager-8.0.2.tgz#84720f0fe9e0c02cc97b76f0bc8f3d5b0a25f731" @@ -4710,22 +4767,6 @@ "@ethersproject/providers" "^5.7.2" async-mutex "^0.3.1" -"@metamask/notification-services-controller@^0.1.0": - version "0.1.0" - resolved "https://registry.yarnpkg.com/@metamask/notification-services-controller/-/notification-services-controller-0.1.0.tgz#a87a898c0c40424bf146d435cabd7d79a733375a" - integrity sha512-OrrBtiOR14UeFTpMX6qlwnQqFvMbX34EM95tB7TkK7A+dJ+JPqn1AsOPXsbIMMwv2l8i1/msfwQoXmUmf4vbiA== - dependencies: - "@contentful/rich-text-html-renderer" "^16.5.2" - "@metamask/base-controller" "^6.0.0" - "@metamask/controller-utils" "^11.0.0" - "@metamask/keyring-controller" "^17.1.0" - "@metamask/profile-sync-controller" "^0.1.0" - bignumber.js "^4.1.0" - contentful "^10.3.6" - firebase "^10.11.0" - loglevel "^1.8.1" - uuid "^8.3.2" - "@metamask/number-to-bn@^1.7.1": version "1.7.1" resolved "https://registry.yarnpkg.com/@metamask/number-to-bn/-/number-to-bn-1.7.1.tgz#a449ec8b2edba211e0dc3e1e0428ff2cc2bf7ab4" @@ -4759,6 +4800,29 @@ "@metamask/safe-event-emitter" "^2.0.0" through2 "^2.0.3" +"@metamask/obs-store@^9.0.0": + version "9.0.0" + resolved "https://registry.yarnpkg.com/@metamask/obs-store/-/obs-store-9.0.0.tgz#fa50c988b4635817ff0454bc9763b1cf6b37d9e9" + integrity sha512-GDsEh2DTHgmISzJt8erf9T4Ph38iwD2yDJ6J1YFq/IcWRGnT1bkgSEVqZMv9c9JloX02T5bFIUK6+9m9EycI6A== + dependencies: + "@metamask/safe-event-emitter" "^3.0.0" + readable-stream "^3.6.2" + +"@metamask/permission-controller@^10.0.0": + version "10.0.0" + resolved "https://registry.yarnpkg.com/@metamask/permission-controller/-/permission-controller-10.0.0.tgz#821280763cc37e9597fe7d207b5da00a881ad32a" + integrity sha512-gwoDmSsUnAFIzSeJ9FqUmoUYNofdhA0buMkH1AVXC5i/eOsEZGVUU6dYThrmUSzBK/wyNNIUGjaUSj4eMMtR6Q== + dependencies: + "@metamask/base-controller" "^6.0.0" + "@metamask/controller-utils" "^11.0.0" + "@metamask/json-rpc-engine" "^9.0.0" + "@metamask/rpc-errors" "^6.2.1" + "@metamask/utils" "^8.3.0" + "@types/deep-freeze-strict" "^1.1.0" + deep-freeze-strict "^1.1.1" + immer "^9.0.6" + nanoid "^3.1.31" + "@metamask/permission-controller@^9.0.0", "@metamask/permission-controller@^9.0.2": version "9.1.1" resolved "https://registry.yarnpkg.com/@metamask/permission-controller/-/permission-controller-9.1.1.tgz#de8c15438afa4ef65e419c20f358799924fc3f2c" @@ -4842,6 +4906,22 @@ "@metamask/base-controller" "^5.0.2" "@metamask/controller-utils" "^9.1.0" +"@metamask/profile-sync-controller@^0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@metamask/profile-sync-controller/-/profile-sync-controller-0.1.0.tgz#07e611fd6782b446edd68d455fcde22d43ca373e" + integrity sha512-5O9UJFgdV9TQylomDzoPSqSLGMGZBh1eHnGk9/epWi27RBpEVThcjiychOF8zaaWo5poEhOGja3smBX1aWGEyQ== + dependencies: + "@metamask/base-controller" "^6.0.0" + "@metamask/snaps-controllers" "^8.1.1" + "@metamask/snaps-sdk" "^4.2.0" + "@metamask/snaps-utils" "^7.4.0" + "@noble/ciphers" "^0.5.2" + "@noble/hashes" "^1.4.0" + ethers "^6.12.0" + immer "^9.0.6" + loglevel "^1.8.1" + siwe "^2.3.2" + "@metamask/providers@^13.1.0": version "13.1.0" resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-13.1.0.tgz#c5aef8e7073e097e6693cffc5f463b0632e1f1fd" @@ -5025,8 +5105,8 @@ "@metamask/rpc-errors" "^6.2.1" "@metamask/snaps-registry" "^3.1.0" "@metamask/snaps-rpc-methods" "^9.1.2" - "@metamask/snaps-sdk" "^4.4.2" - "@metamask/snaps-utils" "^7.5.0" + "@metamask/snaps-sdk" "^4.4.1" + "@metamask/snaps-utils" "^7.4.1" "@metamask/utils" "^8.3.0" "@xstate/fsm" "^2.0.0" browserify-zlib "^0.2.0" @@ -5087,10 +5167,61 @@ fast-xml-parser "^4.3.4" superstruct "^1.0.3" +"@metamask/snaps-sdk@^4.4.2": + version "4.4.2" + resolved "https://registry.yarnpkg.com/@metamask/snaps-sdk/-/snaps-sdk-4.4.2.tgz#6d7654ca3ecbcda5cd8689f49721c084241a4495" + integrity sha512-V6d1kQdkCTYQ7Z3+ZVnMWjwsS2TRaKNnSRtSHgjATdSacW5d/1td2KbTs+1x1/cSe58ULKW1SBwRNy0i0c95hA== + dependencies: + "@metamask/key-tree" "^9.1.1" + "@metamask/providers" "^17.0.0" + "@metamask/rpc-errors" "^6.2.1" + "@metamask/utils" "^8.3.0" + fast-xml-parser "^4.3.4" + superstruct "^1.0.3" + +"@metamask/snaps-sdk@^5.0.0": + version "5.0.0" + resolved "https://registry.yarnpkg.com/@metamask/snaps-sdk/-/snaps-sdk-5.0.0.tgz#5272d38d00bebbbf59b9141d87b6c5291dd757e3" + integrity sha512-9vwNvfo63J6SfBqr1rojIRfBMnJJDRZC1hIMzfkeenfgaBNRYpx5E/zl13LCuquVmdCKgxabjEZvw4qaLVmTmg== + dependencies: + "@metamask/key-tree" "^9.1.1" + "@metamask/providers" "^17.0.0" + "@metamask/rpc-errors" "^6.2.1" + "@metamask/utils" "^8.3.0" + superstruct "^1.0.3" + "@metamask/snaps-utils@^7.1.0", "@metamask/snaps-utils@^7.4.0", "@metamask/snaps-utils@^7.4.1": version "7.4.1" resolved "https://registry.yarnpkg.com/@metamask/snaps-utils/-/snaps-utils-7.4.1.tgz#54a2b40ba30cc05a0862f4662e5cd6ef5beba42e" integrity sha512-IPoZTh90Bg4LJJCmkRig1QIyXOgdziuZqdx3c521gHaKpMlcOFl1fvII17X9yVF9SUtTSDoj1R4//4e5rnLZnw== + dependencies: + "@babel/core" "^7.23.2" + "@babel/types" "^7.23.0" + "@metamask/base-controller" "^5.0.2" + "@metamask/key-tree" "^9.1.1" + "@metamask/permission-controller" "^9.0.2" + "@metamask/rpc-errors" "^6.2.1" + "@metamask/slip44" "^3.1.0" + "@metamask/snaps-registry" "^3.1.0" + "@metamask/snaps-sdk" "^4.4.1" + "@metamask/utils" "^8.3.0" + "@noble/hashes" "^1.3.1" + "@scure/base" "^1.1.1" + chalk "^4.1.2" + cron-parser "^4.5.0" + fast-deep-equal "^3.1.3" + fast-json-stable-stringify "^2.1.0" + marked "^12.0.1" + rfdc "^1.3.0" + semver "^7.5.4" + ses "^1.1.0" + superstruct "^1.0.3" + validate-npm-package-name "^5.0.0" + +"@metamask/snaps-utils@^7.5.0": + version "7.6.0" + resolved "https://registry.yarnpkg.com/@metamask/snaps-utils/-/snaps-utils-7.6.0.tgz#1efa95dd01e6a3f311a85379e751aab91f998c2e" + integrity sha512-cwqUO2iE3t2qMp9pSlTLVns3IS3626bcx1GYMa5llJ5aJiNBsIsAUls5lJ8d1aSNUxf4EFxfVYGX/Cuqe1a4MA== dependencies: "@babel/core" "^7.23.2" "@babel/types" "^7.23.0" @@ -5249,7 +5380,6 @@ integrity sha512-dbIc3C7alOe0agCuBHM1h71UaEaEqOk2W8rAtEn8QGz4haH2Qq7MoK6i7v2guzvkJVVh79c+QCzIqphC3KvrJg== dependencies: "@ethereumjs/tx" "^4.2.0" - "@metamask/superstruct" "^3.0.0" "@noble/hashes" "^1.3.1" "@scure/base" "^1.1.3" "@types/debug" "^4.1.7" From f213a60f55126e361d0834604959a658c2cdce24 Mon Sep 17 00:00:00 2001 From: Prithpal Sooriya Date: Wed, 26 Jun 2024 14:37:00 +0100 Subject: [PATCH 03/35] refactor: fix types, mocks, and tests --- app/actions/notification/pushNotifications.ts | 2 +- .../UI/Notification/List/index.test.tsx | 10 +- app/components/UI/Notification/List/index.tsx | 17 +- .../__mocks__/mock_notifications.ts | 149 +-- .../Details/Announcements/index.test.tsx | 5 +- .../Details/Announcements/index.tsx | 16 +- .../OnChain/__snapshots__/index.test.tsx.snap | 1073 ----------------- .../Details/OnChain/index.test.tsx | 5 +- .../Notifications/Details/OnChain/index.tsx | 25 +- .../Details/__snapshots__/index.test.tsx.snap | 665 +--------- .../Views/Notifications/Details/index.tsx | 15 +- .../Views/Notifications/index.test.tsx | 3 - app/components/Views/Notifications/index.tsx | 20 +- app/components/Views/Wallet/index.test.tsx | 4 + app/util/notifications/hooks/types.ts | 4 +- .../hooks/useCreateSession.test.ts | 93 -- .../hooks/useCreateSession.test.tsx | 136 +++ .../notifications/hooks/useCreateSession.ts | 12 +- .../hooks/useNotifications.test.ts | 274 ----- .../hooks/useNotifications.test.tsx | 274 +++++ .../notifications/hooks/useNotifications.ts | 21 +- .../hooks/useProfileSyncing.test.ts | 189 --- .../hooks/useProfileSyncing.test.tsx | 163 +++ .../notifications/hooks/useProfileSyncing.ts | 3 +- .../hooks/useSwitchNotifications.test.ts | 76 -- .../hooks/useSwitchNotifications.test.tsx | 123 ++ .../hooks/useSwitchNotifications.ts | 38 +- app/util/notifications/methods/index.test.tsx | 178 +-- app/util/notifications/methods/index.ts | 117 +- .../notifications/types/notification/index.ts | 12 +- 30 files changed, 955 insertions(+), 2767 deletions(-) delete mode 100644 app/components/Views/Notifications/Details/OnChain/__snapshots__/index.test.tsx.snap delete mode 100644 app/util/notifications/hooks/useCreateSession.test.ts create mode 100644 app/util/notifications/hooks/useCreateSession.test.tsx delete mode 100644 app/util/notifications/hooks/useNotifications.test.ts create mode 100644 app/util/notifications/hooks/useNotifications.test.tsx delete mode 100644 app/util/notifications/hooks/useProfileSyncing.test.ts create mode 100644 app/util/notifications/hooks/useProfileSyncing.test.tsx delete mode 100644 app/util/notifications/hooks/useSwitchNotifications.test.ts create mode 100644 app/util/notifications/hooks/useSwitchNotifications.test.tsx diff --git a/app/actions/notification/pushNotifications.ts b/app/actions/notification/pushNotifications.ts index 805dab5a77d..dddc81efffc 100644 --- a/app/actions/notification/pushNotifications.ts +++ b/app/actions/notification/pushNotifications.ts @@ -228,7 +228,7 @@ export const fetchAndUpdateMetamaskNotifications = } }; export const markMetamaskNotificationsAsRead = - (notifications: MarkAsReadNotificationsParam[]): ThunkDispatchReturn => + (notifications: MarkAsReadNotificationsParam): ThunkDispatchReturn => async (dispatch: Dispatch) => { try { await NotificationServicesController.markMetamaskNotificationsAsRead( diff --git a/app/components/UI/Notification/List/index.test.tsx b/app/components/UI/Notification/List/index.test.tsx index 76dbc482957..0d06adcc3b4 100644 --- a/app/components/UI/Notification/List/index.test.tsx +++ b/app/components/UI/Notification/List/index.test.tsx @@ -2,10 +2,6 @@ import React from 'react'; import NotificationsList from './'; import renderWithProvider from '../../../../util/test/renderWithProvider'; import MOCK_NOTIFICATIONS from '../__mocks__/mock_notifications'; -import { - FeatureAnnouncementRawNotification, - HalRawNotification, -} from '../../../../util/notifications'; const navigationMock = { navigate: jest.fn(), }; @@ -15,10 +11,8 @@ describe('NotificationsList', () => { , ); diff --git a/app/components/UI/Notification/List/index.tsx b/app/components/UI/Notification/List/index.tsx index b5e4f546aa1..f3bed491f61 100644 --- a/app/components/UI/Notification/List/index.tsx +++ b/app/components/UI/Notification/List/index.tsx @@ -13,12 +13,7 @@ import { createStyles } from './styles'; import { useMetrics } from '../../../hooks/useMetrics'; import Empty from '../Empty'; import { NotificationRow } from '../Row'; -import { - FeatureAnnouncementRawNotification, - HalRawNotification, - Notification, - getRowDetails, -} from '../../../../util/notifications'; +import { Notification, getRowDetails } from '../../../../util/notifications'; import { NotificationsViewSelectorsIDs } from '../../../../../e2e/selectors/NotificationsView.selectors'; import Routes from '../../../../constants/navigation/Routes'; @@ -27,8 +22,8 @@ interface NotificationsList { // eslint-disable-next-line @typescript-eslint/no-explicit-any navigation: any; allNotifications: Notification[]; - walletNotifications: HalRawNotification[]; - annoucementsNotifications: FeatureAnnouncementRawNotification[]; + walletNotifications: Notification[]; + announcementsNotifications: Notification[]; loading: boolean; } @@ -36,7 +31,7 @@ const Notifications = ({ navigation, allNotifications, walletNotifications, - annoucementsNotifications, + announcementsNotifications, loading, }: NotificationsList) => { const theme = useTheme(); @@ -89,8 +84,8 @@ const Notifications = ({ ); const combinedLists = useMemo( - () => [allNotifications, walletNotifications, annoucementsNotifications], - [allNotifications, walletNotifications, annoucementsNotifications], + () => [allNotifications, walletNotifications, announcementsNotifications], + [allNotifications, walletNotifications, announcementsNotifications], ); const renderNotificationRow = useCallback( diff --git a/app/components/UI/Notification/__mocks__/mock_notifications.ts b/app/components/UI/Notification/__mocks__/mock_notifications.ts index 276afc91d0f..4c3158a2a1b 100644 --- a/app/components/UI/Notification/__mocks__/mock_notifications.ts +++ b/app/components/UI/Notification/__mocks__/mock_notifications.ts @@ -1,99 +1,60 @@ -import { ACTIONS, PREFIXES } from '../../../../constants/deeplinks'; -import { Notification, TRIGGER_TYPES } from '../../../../util/notifications'; +import { NotificationServicesController } from '@metamask-previews/notification-services-controller'; -interface NotificationLink { - linkText: string; - linkUrl: string; - isExternal: boolean; -} +const { + Processors: { processNotification }, + Mocks, +} = NotificationServicesController; -interface NotificationAction { - actionText: string; - actionUrl: string; - isExternal: boolean; -} - -const createNotificationBase = ( - id: string, - type: keyof typeof TRIGGER_TYPES, - createdAt: Date = new Date(), - isRead = false, -): Omit => ({ - id, - type: TRIGGER_TYPES[type], - createdAt, - isRead, -}); - -const ETH_IMAGE_URL = - 'https://token.api.cx.metamask.io/assets/nativeCurrencyLogos/ethereum.svg'; -const STETH_IMAGE_URL = - 'https://raw.githubusercontent.com/MetaMask/contract-metadata/master/images/stETH.svg'; -import SVG_MM_LOGO_PATH from '../../../../images/fox.svg'; - -const MOCK_NOTIFICATIONS: Notification[] = [ - { - ...createNotificationBase('1', 'FEATURES_ANNOUNCEMENT'), - data: { - title: 'Welcome to the new MyMetaverse!', - shortDescription: - 'We are excited to announce the launch of our brand new website and app!', - longDescription: - 'We are excited to announce the launch of our brand new website and app!', - category: 'Announcement', - image: { - file: { - url: SVG_MM_LOGO_PATH, - }, - }, - link: { - linkText: 'Learn more', - linkUrl: 'https://metamask.io', - isExternal: true, - } as NotificationLink, - action: { - actionText: 'Send now!', - actionUrl: PREFIXES[ACTIONS.SEND], - isExternal: false, - } as NotificationAction, - }, - }, - { - ...createNotificationBase('2', 'LIDO_STAKE_COMPLETED'), - trigger_id: 'some-trigger-id', - chain_id: 1, - block_number: 20069079, - block_timestamp: '1698961091', - tx_hash: - '0x6271899e371c87ff96307d5ffed7ddcc39dcee5742bfab4f395501f6bf4c2002', - unread: false, - created_at: '2023-11-02T22:28:49.970865Z', - data: { - kind: 'lido_stake_completed', - stake_in: { - usd: '1806.33', - name: 'Ethereum', - image: ETH_IMAGE_URL, - amount: '330303634023928032', - symbol: 'ETH', - address: '0x0000000000000000000000000000000000000000', - decimals: '18', - }, - stake_out: { - usd: '1801.30', - name: 'Liquid staked Ether 2.0', - image: STETH_IMAGE_URL, - amount: '330303634023928032', - symbol: 'STETH', - address: '0xae7ab96520DE3A18E5e111B5EaAb095312D7fE84', - decimals: '18', - }, - network_fee: { - gas_price: '26536359866', - native_token_price_in_usd: '1806.33', - }, - }, - } as Notification, +const MOCK_NOTIFICATIONS = [ + processNotification(Mocks.createMockNotificationEthSent()), + processNotification(Mocks.createMockNotificationEthReceived()), + processNotification(Mocks.createMockNotificationERC20Sent()), + processNotification(Mocks.createMockNotificationERC20Received()), + processNotification(Mocks.createMockNotificationERC721Sent()), + processNotification(Mocks.createMockNotificationERC721Received()), + processNotification(Mocks.createMockNotificationERC1155Sent()), + processNotification(Mocks.createMockNotificationERC1155Received()), + processNotification(Mocks.createMockNotificationMetaMaskSwapsCompleted()), + processNotification(Mocks.createMockNotificationRocketPoolStakeCompleted()), + processNotification(Mocks.createMockNotificationRocketPoolUnStakeCompleted()), + processNotification(Mocks.createMockNotificationLidoStakeCompleted()), + processNotification(Mocks.createMockNotificationLidoWithdrawalRequested()), + processNotification(Mocks.createMockNotificationLidoReadyToBeWithdrawn()), + processNotification(Mocks.createMockNotificationLidoWithdrawalCompleted()), + processNotification(Mocks.createMockFeatureAnnouncementRaw()), ]; +export const createMockNotificationEthSent = () => + processNotification(Mocks.createMockNotificationEthSent()); +export const createMockNotificationEthReceived = () => + processNotification(Mocks.createMockNotificationEthReceived()); +export const createMockNotificationERC20Sent = () => + processNotification(Mocks.createMockNotificationERC20Sent()); +export const createMockNotificationERC20Received = () => + processNotification(Mocks.createMockNotificationERC20Received()); +export const createMockNotificationERC721Sent = () => + processNotification(Mocks.createMockNotificationERC721Sent()); +export const createMockNotificationERC721Received = () => + processNotification(Mocks.createMockNotificationERC721Received()); +export const createMockNotificationERC1155Sent = () => + processNotification(Mocks.createMockNotificationERC1155Sent()); +export const createMockNotificationERC1155Received = () => + processNotification(Mocks.createMockNotificationERC1155Received()); +export const createMockNotificationMetaMaskSwapsCompleted = () => + processNotification(Mocks.createMockNotificationMetaMaskSwapsCompleted()); +export const createMockNotificationRocketPoolStakeCompleted = () => + processNotification(Mocks.createMockNotificationRocketPoolStakeCompleted()); +export const createMockNotificationRocketPoolUnStakeCompleted = () => + processNotification(Mocks.createMockNotificationRocketPoolUnStakeCompleted()); +export const createMockNotificationLidoStakeCompleted = () => + processNotification(Mocks.createMockNotificationLidoStakeCompleted()); +export const createMockNotificationLidoWithdrawalRequested = () => + processNotification(Mocks.createMockNotificationLidoWithdrawalRequested()); +export const createMockNotificationLidoReadyToBeWithdrawn = () => + processNotification(Mocks.createMockNotificationLidoReadyToBeWithdrawn()); +export const createMockNotificationLidoWithdrawalCompleted = () => + processNotification(Mocks.createMockNotificationLidoWithdrawalCompleted()); +export const createMockFeatureAnnouncementRaw = () => + processNotification(Mocks.createMockFeatureAnnouncementRaw()); + export default MOCK_NOTIFICATIONS; diff --git a/app/components/Views/Notifications/Details/Announcements/index.test.tsx b/app/components/Views/Notifications/Details/Announcements/index.test.tsx index 7a2fe0e4f50..3ed45e11b27 100644 --- a/app/components/Views/Notifications/Details/Announcements/index.test.tsx +++ b/app/components/Views/Notifications/Details/Announcements/index.test.tsx @@ -9,7 +9,6 @@ import { createStyles } from '../styles'; import MOCK_NOTIFICATIONS from '../../../../../components/UI/Notification/__mocks__/mock_notifications'; import initialBackgroundState from '../../../../../util/test/initial-background-state.json'; import { mockTheme } from '../../../../../util/theme'; -import { FeatureAnnouncementRawNotification } from '../../../../../util/notifications/types'; const mockInitialState = { settings: { @@ -48,9 +47,7 @@ describe('AnnouncementsDetails', () => { , ); diff --git a/app/components/Views/Notifications/Details/Announcements/index.tsx b/app/components/Views/Notifications/Details/Announcements/index.tsx index 922b56fd7da..df5af8288da 100644 --- a/app/components/Views/Notifications/Details/Announcements/index.tsx +++ b/app/components/Views/Notifications/Details/Announcements/index.tsx @@ -10,7 +10,7 @@ import Text, { TextVariant, } from '../../../../../component-library/components/Texts/Text'; -import { FeatureAnnouncementRawNotification } from '../../../../../util/notifications'; +import { Notification, TRIGGER_TYPES } from '../../../../../util/notifications'; import { IconName } from '../../../../../component-library/components/Icons/Icon'; import { TypeLinkFields } from '../../../../../util/notifications/types/featureAnnouncement/TypeLink'; @@ -18,8 +18,7 @@ import { TypeLinkFields } from '../../../../../util/notifications/types/featureA const PLACEHOLDER_IMG_URI = require('../../../../../images/no-image-placeholder.jpeg'); interface Props { - notification: FeatureAnnouncementRawNotification; - // TODO: Replace "any" with type + notification: Notification; // eslint-disable-next-line @typescript-eslint/no-explicit-any styles: Record; navigation: NavigationProp; @@ -30,11 +29,12 @@ const AnnouncementsDetails: React.FC = ({ styles, navigation, }: Props) => { + if (notification.type !== TRIGGER_TYPES.FEATURES_ANNOUNCEMENT) { + return null; + } + const handleCTAPress = () => { - // TODO: Currently handling CTAs with external links only. For now, we aren't handling deeplinks. - const { link } = notification.data as unknown as { - link: TypeLinkFields['fields']; - }; + const { link } = notification.data; if (!link) return; navigation.navigate('Webview', { screen: 'SimpleWebview', @@ -44,7 +44,7 @@ const AnnouncementsDetails: React.FC = ({ }); }; - const IMAGE_URI = notification.data.image?.file?.url || PLACEHOLDER_IMG_URI; + const IMAGE_URI = notification?.data?.image?.url || PLACEHOLDER_IMG_URI; return ( diff --git a/app/components/Views/Notifications/Details/OnChain/__snapshots__/index.test.tsx.snap b/app/components/Views/Notifications/Details/OnChain/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 45c67e1e9dd..00000000000 --- a/app/components/Views/Notifications/Details/OnChain/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,1073 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`OnChainDetails should renders correctly 1`] = ` - - - - - - - - - - - - - - - - - - - Staked - - - Ethereum - - - - - 330303634023928032 - - - - - - - - - - - - - - - - - - - - - - Received - - - Liquid staked Ether 2.0 - - - - - 330303634023928032 - - - - - - - - - - - Status - - - Confirmed - - - - - Transaction ID - - - - - - - - - Staking Provider - - - Lido-staked ETH - - - - - - - - - - - - - - - - Gas Limit (Units) - - - N/A - - - - - Gas Used (Units) - - - N/A - - - - - Base Fee (GWEI) - - - N/A - - - - - Priority Fee (GWEI) - - - N/A - - - - - Max Fee Per Gas - - - N/A - - - - - - - - - View on Etherscan - - - - -`; diff --git a/app/components/Views/Notifications/Details/OnChain/index.test.tsx b/app/components/Views/Notifications/Details/OnChain/index.test.tsx index 5cd06b06189..2567f34ce07 100644 --- a/app/components/Views/Notifications/Details/OnChain/index.test.tsx +++ b/app/components/Views/Notifications/Details/OnChain/index.test.tsx @@ -9,7 +9,6 @@ import { createStyles } from '../styles'; import MOCK_NOTIFICATIONS from '../../../../../components/UI/Notification/__mocks__/mock_notifications'; import initialBackgroundState from '../../../../../util/test/initial-background-state.json'; import { mockTheme } from '../../../../../util/theme'; -import { HalRawNotification } from '../../../../../util/notifications/types'; import { AvatarAccountType } from '../../../../../component-library/components/Avatars/Avatar'; const mockInitialState = { @@ -62,7 +61,7 @@ describe('OnChainDetails', () => { const { toJSON } = render( { const { getByText } = render( ; @@ -98,7 +97,7 @@ const OnChainDetails = ({ return renderSwap(notificationDetails); case TRIGGER_TYPES.ERC20_SENT: default: - return renderTransfer(notificationDetails); + return null; // We do not want to render components that do not match } }, [ notification.type, @@ -121,15 +120,17 @@ const OnChainDetails = ({ onClosed={() => setIsCollapsed(true)} /> )} -