diff --git a/.depcheckrc.yml b/.depcheckrc.yml index babe74bcd3a..df73bd5e8ad 100644 --- a/.depcheckrc.yml +++ b/.depcheckrc.yml @@ -6,6 +6,7 @@ ignores: - '@react-native-community/slider' - 'patch-package' - '@lavamoat/allow-scripts' + - '@lavamoat/git-safe-dependencies' - 'babel-plugin-inline-import' # This is used on the patch for TokenRatesController of Assets controllers, for we to be able to use the last version of it - cockatiel diff --git a/.eslintrc.js b/.eslintrc.js index 21a0949d4ea..70565eb4945 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -76,6 +76,7 @@ module.exports = { { files: [ 'app/components/UI/Name/**/*.{js,ts,tsx}', + 'app/components/UI/SimulationDetails/**/*.{js,ts,tsx}', 'app/components/hooks/DisplayName/**/*.{js,ts,tsx}' ], rules: { diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c453cc01200..71c11d98d64 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -48,6 +48,17 @@ jobs: echo "Duplicate dependencies detected; run 'yarn deduplicate' to remove them" exit 1 fi + git-safe-dependencies: + runs-on: ubuntu-20.04 + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version-file: '.nvmrc' + cache: yarn + - run: yarn setup --node + - name: Run @lavamoat/git-safe-dependencies + run: yarn git-safe-dependencies scripts: runs-on: ubuntu-20.04 strategy: @@ -323,4 +334,4 @@ jobs: else echo "All jobs passed step skipped. Block PR." exit 1 - fi \ No newline at end of file + fi diff --git a/.js.env.example b/.js.env.example index 56c7c1bb865..325ee52559d 100644 --- a/.js.env.example +++ b/.js.env.example @@ -97,7 +97,10 @@ export MM_ENABLE_SETTINGS_PAGE_DEV_OPTIONS="true" # Per dapp selected network (Amon Hen) feature flag export MM_PER_DAPP_SELECTED_NETWORK="" -export MM_CHAIN_PERMISSIONS="" +# Multichain permissions now set to true in production via the CI +# MM_MULTICHAIN_V1_ENABLED is the UI, and MM_CHAIN_PERMISSIONS is the engine +export MM_MULTICHAIN_V1_ENABLED="true" +export MM_CHAIN_PERMISSIONS="true" # Multichain feature flag specific to UI changes export MM_MULTICHAIN_V1_ENABLED="" diff --git a/CHANGELOG.md b/CHANGELOG.md index 155b760639f..0cfee4c59bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ ## Current Main Branch +## 7.37.1 - Dec 16, 2024 +### Fixed +- [#12577](https://github.com/MetaMask/metamask-mobile/pull/12577): chore: bump {gas-fee,network,selected-network,notification-services,profile-sync,signature}-controller (#12577) +- [#12694](https://github.com/MetaMask/metamask-mobile/pull/12694): fix: small refactoring of the latest migration script + add a new migration case (#12694) +- [#12664](https://github.com/MetaMask/metamask-mobile/pull/12664): fix: mark transactions as failed for cancelled / unknown smart transactions (#12664) + ## 7.37.0 - Nov 28, 2024 ### Added - [#12091](https://github.com/MetaMask/metamask-mobile/pull/12091): feat: 2020 Add a performance test for iOS in Bitrise (#12091) diff --git a/android/app/build.gradle b/android/app/build.gradle index c856cc0492f..5692a52de02 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -178,8 +178,8 @@ android { applicationId "io.metamask" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion - versionName "7.37.0" - versionCode 1512 + versionName "7.37.1" + versionCode 1520 testBuildType System.getProperty('testBuildType', 'debug') missingDimensionStrategy 'react-native-camera', 'general' testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" diff --git a/app/actions/notification/helpers/index.ts b/app/actions/notification/helpers/index.ts index 7038cb02841..34b6b6ff064 100644 --- a/app/actions/notification/helpers/index.ts +++ b/app/actions/notification/helpers/index.ts @@ -7,7 +7,7 @@ import { mmStorage, getAllUUIDs, } from '../../../util/notifications'; -import { UserStorage } from '@metamask/notification-services-controller/dist/NotificationServicesController/types/user-storage/index.cjs'; +import type { UserStorage } from '@metamask/notification-services-controller/notification-services'; export type MarkAsReadNotificationsParam = Pick< Notification, diff --git a/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap b/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap index bda8377bdd9..03389274972 100644 --- a/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap +++ b/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap @@ -4,7 +4,6 @@ exports[`BottomSheetHeader should render snapshot correctly 1`] = ` ({ + context: { + PreferencesController: { + setTokenNetworkFilter: jest.fn(), + }, + }, +})); + jest.mock('react-redux', () => ({ ...jest.requireActual('react-redux'), useDispatch: () => jest.fn(), + useSelector: jest.fn(), })); const URL_MOCK = 'test.com'; @@ -32,6 +45,7 @@ const mockApprovalRequest = (approvalRequest?: ApprovalRequest) => { describe('SwitchChainApproval', () => { beforeEach(() => { jest.resetAllMocks(); + jest.spyOn(networks, 'isPortfolioViewEnabled').mockReturnValue(false); }); it('renders', () => { @@ -81,4 +95,29 @@ describe('SwitchChainApproval', () => { networkStatus: true, }); }); + + it('invokes network switched on confirm when portfolio view is enabled', () => { + jest.spyOn(networks, 'isPortfolioViewEnabled').mockReturnValue(true); + const tokenNetworkFilterSpy = jest.spyOn( + PreferencesController, + 'setTokenNetworkFilter', + ); + mockApprovalRequest({ + type: ApprovalTypes.SWITCH_ETHEREUM_CHAIN, + requestData: { + rpcUrl: URL_MOCK, + }, + } as ApprovalRequest<{ + rpcUrl: string; + }>); + + const wrapper = shallow(); + wrapper.find('SwitchCustomNetwork').simulate('confirm'); + expect(tokenNetworkFilterSpy).toHaveBeenCalledTimes(1); + expect(networkSwitched).toHaveBeenCalledTimes(1); + expect(networkSwitched).toHaveBeenCalledWith({ + networkUrl: URL_MOCK, + networkStatus: true, + }); + }); }); diff --git a/app/components/Approvals/SwitchChainApproval/SwitchChainApproval.tsx b/app/components/Approvals/SwitchChainApproval/SwitchChainApproval.tsx index 9a3310addf9..ff4a9814ce1 100644 --- a/app/components/Approvals/SwitchChainApproval/SwitchChainApproval.tsx +++ b/app/components/Approvals/SwitchChainApproval/SwitchChainApproval.tsx @@ -4,7 +4,11 @@ import { ApprovalTypes } from '../../../core/RPCMethods/RPCMethodMiddleware'; import ApprovalModal from '../ApprovalModal'; import SwitchCustomNetwork from '../../UI/SwitchCustomNetwork'; import { networkSwitched } from '../../../actions/onboardNetwork'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; +import Engine from '../../../core/Engine'; +import { selectIsAllNetworks } from '../../../selectors/networkController'; +import { selectTokenNetworkFilter } from '../../../selectors/preferencesController'; +import { isPortfolioViewEnabled } from '../../../util/networks'; const SwitchChainApproval = () => { const { @@ -15,17 +19,34 @@ const SwitchChainApproval = () => { } = useApprovalRequest(); const dispatch = useDispatch(); + const isAllNetworks = useSelector(selectIsAllNetworks); + const tokenNetworkFilter = useSelector(selectTokenNetworkFilter); const onConfirm = useCallback(() => { defaultOnConfirm(); + // If portfolio view is enabled should set network filter + if (isPortfolioViewEnabled()) { + const { PreferencesController } = Engine.context; + PreferencesController.setTokenNetworkFilter({ + ...(isAllNetworks ? tokenNetworkFilter : {}), + [approvalRequest?.requestData?.chainId]: true, + }); + } + dispatch( networkSwitched({ networkUrl: approvalRequest?.requestData?.rpcUrl, networkStatus: true, }), ); - }, [approvalRequest, defaultOnConfirm, dispatch]); + }, [ + approvalRequest, + defaultOnConfirm, + dispatch, + isAllNetworks, + tokenNetworkFilter, + ]); if (approvalRequest?.type !== ApprovalTypes.SWITCH_ETHEREUM_CHAIN) return null; diff --git a/app/components/UI/ApprovalTagUrl/ApprovalTagUrl.test.tsx b/app/components/UI/ApprovalTagUrl/ApprovalTagUrl.test.tsx index 415cff34f01..0b260915412 100644 --- a/app/components/UI/ApprovalTagUrl/ApprovalTagUrl.test.tsx +++ b/app/components/UI/ApprovalTagUrl/ApprovalTagUrl.test.tsx @@ -1,10 +1,12 @@ import React from 'react'; import renderWithProvider from '../../../util/test/renderWithProvider'; -import ApprovalTagUrl from './ApprovalTagUrl'; +import ApprovalTagUrl, { APPROVAL_TAG_URL_ORIGIN_PILL } from './ApprovalTagUrl'; import { backgroundState } from '../../../util/test/initial-root-state'; +import { INTERNAL_ORIGINS } from '../../../constants/transaction'; const ADDRESS_MOCK = '0x1234567890abcdef1234567890abcdef12345678'; const DOMAIN_MOCK = 'metamask.github.io'; + const mockInitialState = { settings: {}, engine: { @@ -19,7 +21,7 @@ const mockInitialState = { describe('ApprovalTagUrl', () => { it('renders correctly', () => { - const { toJSON } = renderWithProvider( + const { toJSON, getByTestId } = renderWithProvider( { ); expect(toJSON()).toMatchSnapshot(); + expect(getByTestId(APPROVAL_TAG_URL_ORIGIN_PILL)).toBeDefined(); + }); + + it('does not render when origin is an internal origin', () => { + const { queryByTestId } = renderWithProvider( + , + { state: mockInitialState }, + ); + + expect(queryByTestId(APPROVAL_TAG_URL_ORIGIN_PILL)).toBeNull(); }); }); diff --git a/app/components/UI/ApprovalTagUrl/ApprovalTagUrl.tsx b/app/components/UI/ApprovalTagUrl/ApprovalTagUrl.tsx index 48ca00125da..dc7ebc8aa2d 100644 --- a/app/components/UI/ApprovalTagUrl/ApprovalTagUrl.tsx +++ b/app/components/UI/ApprovalTagUrl/ApprovalTagUrl.tsx @@ -11,6 +11,7 @@ import { selectAccountsByChainId } from '../../../selectors/accountTrackerContro import { getHost, prefixUrlWithProtocol } from '../../../util/browser'; import useFavicon from '../../hooks/useFavicon/useFavicon'; import stylesheet from './ApprovalTagUrl.styles'; +import { INTERNAL_ORIGINS } from '../../../constants/transaction'; const { ORIGIN_DEEPLINK, ORIGIN_QR_CODE } = AppConstants.DEEPLINKS; export const APPROVAL_TAG_URL_ORIGIN_PILL = 'APPROVAL_TAG_URL_ORIGIN_PILL'; @@ -76,7 +77,9 @@ const ApprovalTagUrl = ({ uri: '', }; - if (origin && !isOriginDeepLink) { + const showOrigin = origin && !isOriginDeepLink && !INTERNAL_ORIGINS.includes(origin); + + if (showOrigin) { return ( @@ -21,38 +22,11 @@ const createStyles = (colors) => wrapper: { justifyContent: 'center', alignItems: 'center', - flex: 1, }, network: { flexDirection: 'row', alignItems: 'center', }, - networkName: { - fontSize: 11, - color: colors.text.alternative, - ...fontStyles.normal, - }, - networkIcon: { - width: 5, - height: 5, - borderRadius: 100, - marginRight: 5, - }, - title: { - fontSize: scale(14), - ...fontStyles.normal, - color: colors.text.default, - }, - children: { - ...fontStyles.normal, - color: colors.text.default, - fontWeight: 'bold', - }, - otherNetworkIcon: { - backgroundColor: importedColors.transparent, - borderColor: colors.border.default, - borderWidth: 1, - }, }); /** @@ -163,26 +137,22 @@ class NavbarTitle extends PureComponent { activeOpacity={this.props.disableNetwork ? 1 : 0.2} > {title ? ( - + {realTitle} ) : null} {typeof children === 'string' ? ( - - {strings(children)} - + {strings(children)} ) : ( children )} {showSelectedNetwork ? ( - - + {name} diff --git a/app/components/UI/NetworkModal/NetworkAdded/index.tsx b/app/components/UI/NetworkModal/NetworkAdded/index.tsx index 299781879c2..8a00786072f 100644 --- a/app/components/UI/NetworkModal/NetworkAdded/index.tsx +++ b/app/components/UI/NetworkModal/NetworkAdded/index.tsx @@ -1,15 +1,30 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; -import StyledButton from '../../StyledButton'; import { strings } from '../../../../../locales/i18n'; -import Text from '../../../Base/Text'; -import { useTheme } from '../../../../util/theme'; import { NetworkAddedBottomSheetSelectorsIDs } from '../../../../../e2e/selectors/Network/NetworkAddedBottomSheet.selectors'; +import BottomSheetHeader from '../../../../component-library/components/BottomSheets/BottomSheetHeader'; +import Text, { + TextVariant, +} from '../../../../component-library/components/Texts/Text'; +import BottomSheetFooter, { + ButtonsAlignment, +} from '../../../../component-library/components/BottomSheets/BottomSheetFooter'; +import { + ButtonProps, + ButtonVariants, + ButtonSize, +} from '../../../../component-library/components/Buttons/Button/Button.types'; // TODO: Replace "any" with type // eslint-disable-next-line @typescript-eslint/no-explicit-any -const createStyles = (colors: any) => +const createStyles = () => StyleSheet.create({ + header: { + padding: 0, + }, + content: { + paddingVertical: 16, + }, buttonView: { flexDirection: 'row', paddingVertical: 16, @@ -17,19 +32,6 @@ const createStyles = (colors: any) => base: { padding: 16, }, - button: { - flex: 1, - }, - cancel: { - marginRight: 8, - backgroundColor: colors.background.default, - borderColor: colors.border.default, - - borderWidth: 1, - }, - confirm: { - marginLeft: 8, - }, }); interface NetworkAddedProps { @@ -40,38 +42,45 @@ interface NetworkAddedProps { const NetworkAdded = (props: NetworkAddedProps) => { const { nickname, closeModal, switchNetwork } = props; - const { colors } = useTheme(); - const styles = createStyles(colors); + const styles = createStyles(); + const buttonProps: ButtonProps[] = [ + { + variant: ButtonVariants.Secondary, + size: ButtonSize.Lg, + onPress: closeModal, + label: strings('networks.close'), + testID: NetworkAddedBottomSheetSelectorsIDs.CLOSE_NETWORK_BUTTON, + }, + { + variant: ButtonVariants.Primary, + size: ButtonSize.Lg, + onPress: switchNetwork, + label: strings('networks.switch_network'), + testID: NetworkAddedBottomSheetSelectorsIDs.SWITCH_NETWORK_BUTTON, + }, + ]; return ( - + {strings('networks.new_network')} - - - {`"${strings('networks.network_name', { - networkName: nickname ?? '', - })}"`} - {strings('networks.network_added')} - - - - {strings('networks.close')} - - - {strings('networks.switch_network')} - + + + + + {`"${strings('networks.network_name', { + networkName: nickname ?? '', + })}"`} + + + {strings('networks.network_added')} + + + ); }; diff --git a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap index fb2c30e33a1..343d6450187 100644 --- a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap @@ -146,7 +146,6 @@ exports[`NetworkDetails renders correctly 1`] = ` onSelectNetwork?.(id, isSelectedNetwork)} - avatarProps={{ - variant: AvatarVariant.Network, - name, - imageSource: imageSource as ImageSourcePropType, - size: AvatarSize.Sm, - }} - disabled={isDisabled} + - {renderRightAccessory?.(id, name)} - + onSelectNetwork?.(id, isSelectedNetwork)} + avatarProps={{ + variant: AvatarVariant.Network, + name, + imageSource: imageSource as ImageSourcePropType, + size: AvatarSize.Sm, + }} + disabled={isDisabled} + > + {renderRightAccessory?.(id, name)} + + ); }, [ diff --git a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap index 7b3fccd6bdf..70c08524725 100644 --- a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap +++ b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap @@ -7,7 +7,6 @@ exports[`NetworkVerificationInfo renders correctly 1`] = ` - We'll use this data to learn how you interact with our marketing communications. We may share relavent news (like product features). + We'll use this data to learn how you interact with our marketing communications. We may share relevant news (like product features). diff --git a/app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap b/app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap index a551c6026c9..1abf3c09e47 100644 --- a/app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap +++ b/app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap @@ -157,7 +157,6 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -168,9 +167,9 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -186,21 +185,6 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr } } > - @@ -858,7 +842,6 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -869,9 +852,9 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -887,21 +870,6 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr } } > - @@ -1559,7 +1527,6 @@ exports[`BuildQuote View Crypto Currency Data renders an error page when there i style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -1570,9 +1537,9 @@ exports[`BuildQuote View Crypto Currency Data renders an error page when there i style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -1588,21 +1555,6 @@ exports[`BuildQuote View Crypto Currency Data renders an error page when there i } } > - @@ -2231,7 +2183,6 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -2242,9 +2193,9 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -2260,21 +2211,6 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp } } > - @@ -3179,7 +3115,6 @@ exports[`BuildQuote View Fiat Currency Data renders an error page when there is style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -3190,9 +3125,9 @@ exports[`BuildQuote View Fiat Currency Data renders an error page when there is style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -3208,21 +3143,6 @@ exports[`BuildQuote View Fiat Currency Data renders an error page when there is } } > - @@ -3851,7 +3771,6 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -3862,9 +3781,9 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -3880,21 +3799,6 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats } } > - @@ -4799,7 +4703,6 @@ exports[`BuildQuote View Payment Method Data renders an error page when there is style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -4810,9 +4713,9 @@ exports[`BuildQuote View Payment Method Data renders an error page when there is style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -4828,21 +4731,6 @@ exports[`BuildQuote View Payment Method Data renders an error page when there is } } > - @@ -5471,7 +5359,6 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -5482,9 +5369,9 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -5500,21 +5387,6 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme } } > - @@ -6419,7 +6291,6 @@ exports[`BuildQuote View Regions data renders an error page when there is a regi style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -6430,9 +6301,9 @@ exports[`BuildQuote View Regions data renders an error page when there is a regi style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -6448,21 +6319,6 @@ exports[`BuildQuote View Regions data renders an error page when there is a regi } } > - @@ -7091,7 +6947,6 @@ exports[`BuildQuote View Regions data renders the loading page when regions are style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -7102,9 +6957,9 @@ exports[`BuildQuote View Regions data renders the loading page when regions are style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -7120,21 +6975,6 @@ exports[`BuildQuote View Regions data renders the loading page when regions are } } > - @@ -8039,7 +7879,6 @@ exports[`BuildQuote View renders correctly 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -8050,9 +7889,9 @@ exports[`BuildQuote View renders correctly 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -8068,21 +7907,6 @@ exports[`BuildQuote View renders correctly 1`] = ` } } > - @@ -11094,7 +10918,6 @@ exports[`BuildQuote View renders correctly 2`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -11105,9 +10928,9 @@ exports[`BuildQuote View renders correctly 2`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -11123,21 +10946,6 @@ exports[`BuildQuote View renders correctly 2`] = ` } } > - @@ -14129,7 +13937,6 @@ exports[`BuildQuote View renders correctly when sdkError is present 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -14140,9 +13947,9 @@ exports[`BuildQuote View renders correctly when sdkError is present 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -14158,21 +13965,6 @@ exports[`BuildQuote View renders correctly when sdkError is present 1`] = ` } } > - @@ -14801,7 +14593,6 @@ exports[`BuildQuote View renders correctly when sdkError is present 2`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -14812,9 +14603,9 @@ exports[`BuildQuote View renders correctly when sdkError is present 2`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -14830,21 +14621,6 @@ exports[`BuildQuote View renders correctly when sdkError is present 2`] = ` } } > - diff --git a/app/components/UI/Ramp/Views/GetStarted/__snapshots__/GetStarted.test.tsx.snap b/app/components/UI/Ramp/Views/GetStarted/__snapshots__/GetStarted.test.tsx.snap index 747b1d55068..c19b71c5914 100644 --- a/app/components/UI/Ramp/Views/GetStarted/__snapshots__/GetStarted.test.tsx.snap +++ b/app/components/UI/Ramp/Views/GetStarted/__snapshots__/GetStarted.test.tsx.snap @@ -134,7 +134,6 @@ exports[`GetStarted renders correctly 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -145,9 +144,9 @@ exports[`GetStarted renders correctly 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -163,21 +162,6 @@ exports[`GetStarted renders correctly 1`] = ` } } > - @@ -807,7 +791,6 @@ exports[`GetStarted renders correctly 2`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -818,9 +801,9 @@ exports[`GetStarted renders correctly 2`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -836,21 +819,6 @@ exports[`GetStarted renders correctly 2`] = ` } } > - @@ -1480,7 +1448,6 @@ exports[`GetStarted renders correctly when getStarted is true 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -1491,9 +1458,9 @@ exports[`GetStarted renders correctly when getStarted is true 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -1509,21 +1476,6 @@ exports[`GetStarted renders correctly when getStarted is true 1`] = ` } } > - @@ -1923,7 +1875,6 @@ exports[`GetStarted renders correctly when sdkError is present 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -1934,9 +1885,9 @@ exports[`GetStarted renders correctly when sdkError is present 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -1952,21 +1903,6 @@ exports[`GetStarted renders correctly when sdkError is present 1`] = ` } } > - diff --git a/app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.test.tsx b/app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.test.tsx index f9921440bd4..5ae44ae8a59 100644 --- a/app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.test.tsx +++ b/app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.test.tsx @@ -181,6 +181,7 @@ const mockuseRampSDKInitialValues: Partial = { isBuy: true, isSell: false, rampType: RampType.BUY, + setIntent: jest.fn(), }; let mockUseRampSDKValues: Partial = { @@ -275,12 +276,12 @@ describe('NetworkSwitcher View', () => { expect(cancelButtons3.length).toBe(1); }); - it('switches network by calling setProviderType', async () => { + it('switches network by calling setActiveNetwork', async () => { render(NetworkSwitcher); const lineaNetworkText = screen.getByText('Linea Main Network'); fireEvent.press(lineaNetworkText); expect( - (Engine.context.NetworkController.setProviderType as jest.Mock).mock + (Engine.context.NetworkController.setActiveNetwork as jest.Mock).mock .calls, ).toMatchInlineSnapshot(` [ @@ -290,6 +291,7 @@ describe('NetworkSwitcher View', () => { ] `); + jest.clearAllMocks(); render(NetworkSwitcher); const polygonNetworkTest = screen.getByText('Polygon Mainnet'); fireEvent.press(polygonNetworkTest); diff --git a/app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.tsx b/app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.tsx index bd41a45d241..6dbf9289fb9 100644 --- a/app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.tsx +++ b/app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.tsx @@ -59,7 +59,7 @@ function NetworkSwitcher() { } = useRampNetworksDetail(); const supportedNetworks = useSelector(getRampNetworks); const [isCurrentNetworkRampSupported] = useRampNetwork(); - const { selectedChainId, isBuy, intent } = useRampSDK(); + const { selectedChainId, isBuy, intent, setIntent } = useRampSDK(); const networkConfigurations = useSelector(selectNetworkConfigurations); const [networkToBeAdded, setNetworkToBeAdded] = useState(); @@ -145,7 +145,7 @@ function NetworkSwitcher() { const switchToMainnet = useCallback( (type: 'mainnet' | 'linea-mainnet') => { const { NetworkController } = Engine.context; - NetworkController.setProviderType(type); + NetworkController.setActiveNetwork(type); navigateToGetStarted(); }, [navigateToGetStarted], @@ -173,13 +173,23 @@ function NetworkSwitcher() { const handleNetworkPress = useCallback( (networkConfiguration) => { + setIntent((prevIntent) => ({ + ...prevIntent, + chainId: networkConfiguration.chainId, + })); + + const networkConfigurationWithHexChainId = { + ...networkConfiguration, + chainId: toHex(networkConfiguration.chainId), + }; + if (networkConfiguration.isAdded) { - switchNetwork(networkConfiguration); + switchNetwork(networkConfigurationWithHexChainId); } else { - setNetworkToBeAdded(networkConfiguration); + setNetworkToBeAdded(networkConfigurationWithHexChainId); } }, - [switchNetwork], + [setIntent, switchNetwork], ); const handleIntentChainId = useCallback( @@ -199,7 +209,8 @@ function NetworkSwitcher() { (networkConfiguration) => { const isAdded = Object.values(networkConfigurations).some( (savedNetwork) => - savedNetwork.chainId === networkConfiguration.chainId, + toHex(savedNetwork.chainId) === + toHex(networkConfiguration.chainId), ); return { ...networkConfiguration, diff --git a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap index a55851ee09d..90a5e588c9f 100644 --- a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap +++ b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap @@ -134,7 +134,6 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -145,9 +144,9 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -163,21 +162,6 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing } } > - @@ -978,7 +962,6 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing - @@ -3037,7 +3004,6 @@ exports[`NetworkSwitcher View renders correctly 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -3048,9 +3014,9 @@ exports[`NetworkSwitcher View renders correctly 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -3066,21 +3032,6 @@ exports[`NetworkSwitcher View renders correctly 1`] = ` } } > - @@ -4192,7 +4143,6 @@ exports[`NetworkSwitcher View renders correctly 2`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -4203,9 +4153,9 @@ exports[`NetworkSwitcher View renders correctly 2`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -4221,21 +4171,6 @@ exports[`NetworkSwitcher View renders correctly 2`] = ` } } > - @@ -5347,7 +5282,6 @@ exports[`NetworkSwitcher View renders correctly while loading 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -5358,9 +5292,9 @@ exports[`NetworkSwitcher View renders correctly while loading 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -5376,21 +5310,6 @@ exports[`NetworkSwitcher View renders correctly while loading 1`] = ` } } > - @@ -6690,7 +6609,6 @@ exports[`NetworkSwitcher View renders correctly while loading 2`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -6701,9 +6619,9 @@ exports[`NetworkSwitcher View renders correctly while loading 2`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -6719,21 +6637,6 @@ exports[`NetworkSwitcher View renders correctly while loading 2`] = ` } } > - @@ -8033,7 +7936,6 @@ exports[`NetworkSwitcher View renders correctly with errors 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -8044,9 +7946,9 @@ exports[`NetworkSwitcher View renders correctly with errors 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -8062,21 +7964,6 @@ exports[`NetworkSwitcher View renders correctly with errors 1`] = ` } } > - @@ -8682,7 +8569,6 @@ exports[`NetworkSwitcher View renders correctly with errors 2`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -8693,9 +8579,9 @@ exports[`NetworkSwitcher View renders correctly with errors 2`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -8711,21 +8597,6 @@ exports[`NetworkSwitcher View renders correctly with errors 2`] = ` } } > - @@ -9331,7 +9202,6 @@ exports[`NetworkSwitcher View renders correctly with no data 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -9342,9 +9212,9 @@ exports[`NetworkSwitcher View renders correctly with no data 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -9360,21 +9230,6 @@ exports[`NetworkSwitcher View renders correctly with no data 1`] = ` } } > - diff --git a/app/components/UI/Ramp/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap b/app/components/UI/Ramp/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap index 9d129bacdfa..f25e42498a0 100644 --- a/app/components/UI/Ramp/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap +++ b/app/components/UI/Ramp/Views/OrderDetails/__snapshots__/OrderDetails.test.tsx.snap @@ -157,7 +157,6 @@ exports[`OrderDetails renders a cancelled order 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -168,9 +167,9 @@ exports[`OrderDetails renders a cancelled order 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -186,21 +185,6 @@ exports[`OrderDetails renders a cancelled order 1`] = ` } } > - @@ -1659,7 +1643,6 @@ exports[`OrderDetails renders a completed order 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -1670,9 +1653,9 @@ exports[`OrderDetails renders a completed order 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -1688,21 +1671,6 @@ exports[`OrderDetails renders a completed order 1`] = ` } } > - @@ -3172,7 +3140,6 @@ exports[`OrderDetails renders a created order 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -3183,9 +3150,9 @@ exports[`OrderDetails renders a created order 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -3201,21 +3168,6 @@ exports[`OrderDetails renders a created order 1`] = ` } } > - @@ -4646,7 +4598,6 @@ exports[`OrderDetails renders a failed order 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -4657,9 +4608,9 @@ exports[`OrderDetails renders a failed order 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -4675,21 +4626,6 @@ exports[`OrderDetails renders a failed order 1`] = ` } } > - @@ -6148,7 +6084,6 @@ exports[`OrderDetails renders a pending order 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -6159,9 +6094,9 @@ exports[`OrderDetails renders a pending order 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -6177,21 +6112,6 @@ exports[`OrderDetails renders a pending order 1`] = ` } } > - @@ -7622,7 +7542,6 @@ exports[`OrderDetails renders an empty screen layout if there is no order 1`] = style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -7633,9 +7552,9 @@ exports[`OrderDetails renders an empty screen layout if there is no order 1`] = style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -7651,21 +7570,6 @@ exports[`OrderDetails renders an empty screen layout if there is no order 1`] = } } > - @@ -8065,7 +7969,6 @@ exports[`OrderDetails renders an error screen if a CREATED order cannot be polle style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -8076,9 +7979,9 @@ exports[`OrderDetails renders an error screen if a CREATED order cannot be polle style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -8094,21 +7997,6 @@ exports[`OrderDetails renders an error screen if a CREATED order cannot be polle } } > - @@ -8714,7 +8602,6 @@ exports[`OrderDetails renders non-transacted orders 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -8725,9 +8612,9 @@ exports[`OrderDetails renders non-transacted orders 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -8743,21 +8630,6 @@ exports[`OrderDetails renders non-transacted orders 1`] = ` } } > - @@ -10270,7 +10142,6 @@ exports[`OrderDetails renders the support links if the provider has them 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -10281,9 +10152,9 @@ exports[`OrderDetails renders the support links if the provider has them 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -10299,21 +10170,6 @@ exports[`OrderDetails renders the support links if the provider has them 1`] = ` } } > - @@ -11831,7 +11687,6 @@ exports[`OrderDetails renders transacted orders that do not have timeDescription style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -11842,9 +11697,9 @@ exports[`OrderDetails renders transacted orders that do not have timeDescription style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -11860,21 +11715,6 @@ exports[`OrderDetails renders transacted orders that do not have timeDescription } } > - @@ -13305,7 +13145,6 @@ exports[`OrderDetails renders transacted orders that have timeDescriptionPending style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -13316,9 +13155,9 @@ exports[`OrderDetails renders transacted orders that have timeDescriptionPending style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -13334,21 +13173,6 @@ exports[`OrderDetails renders transacted orders that have timeDescriptionPending } } > - diff --git a/app/components/UI/Ramp/Views/PaymentMethods/__snapshots__/PaymentMethods.test.tsx.snap b/app/components/UI/Ramp/Views/PaymentMethods/__snapshots__/PaymentMethods.test.tsx.snap index 8137c427852..2e25a8d696d 100644 --- a/app/components/UI/Ramp/Views/PaymentMethods/__snapshots__/PaymentMethods.test.tsx.snap +++ b/app/components/UI/Ramp/Views/PaymentMethods/__snapshots__/PaymentMethods.test.tsx.snap @@ -157,7 +157,6 @@ exports[`PaymentMethods View renders correctly 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -168,9 +167,9 @@ exports[`PaymentMethods View renders correctly 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -186,21 +185,6 @@ exports[`PaymentMethods View renders correctly 1`] = ` } } > - @@ -1620,7 +1604,6 @@ exports[`PaymentMethods View renders correctly for sell 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -1631,9 +1614,9 @@ exports[`PaymentMethods View renders correctly for sell 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -1649,21 +1632,6 @@ exports[`PaymentMethods View renders correctly for sell 1`] = ` } } > - @@ -3083,7 +3051,6 @@ exports[`PaymentMethods View renders correctly while loading 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -3094,9 +3061,9 @@ exports[`PaymentMethods View renders correctly while loading 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -3112,21 +3079,6 @@ exports[`PaymentMethods View renders correctly while loading 1`] = ` } } > - @@ -4324,7 +4276,6 @@ exports[`PaymentMethods View renders correctly with empty data 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -4335,9 +4286,9 @@ exports[`PaymentMethods View renders correctly with empty data 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -4353,21 +4304,6 @@ exports[`PaymentMethods View renders correctly with empty data 1`] = ` } } > - @@ -4998,7 +4934,6 @@ exports[`PaymentMethods View renders correctly with empty data for sell 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -5009,9 +4944,9 @@ exports[`PaymentMethods View renders correctly with empty data for sell 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -5027,21 +4962,6 @@ exports[`PaymentMethods View renders correctly with empty data for sell 1`] = ` } } > - @@ -5672,7 +5592,6 @@ exports[`PaymentMethods View renders correctly with error 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -5683,9 +5602,9 @@ exports[`PaymentMethods View renders correctly with error 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -5701,21 +5620,6 @@ exports[`PaymentMethods View renders correctly with error 1`] = ` } } > - @@ -6344,7 +6248,6 @@ exports[`PaymentMethods View renders correctly with null data 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -6355,9 +6258,9 @@ exports[`PaymentMethods View renders correctly with null data 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -6373,21 +6276,6 @@ exports[`PaymentMethods View renders correctly with null data 1`] = ` } } > - @@ -7585,7 +7473,6 @@ exports[`PaymentMethods View renders correctly with payment method with disclaim style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -7596,9 +7483,9 @@ exports[`PaymentMethods View renders correctly with payment method with disclaim style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -7614,21 +7501,6 @@ exports[`PaymentMethods View renders correctly with payment method with disclaim } } > - @@ -9106,7 +8978,6 @@ exports[`PaymentMethods View renders correctly with sdkError 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -9117,9 +8988,9 @@ exports[`PaymentMethods View renders correctly with sdkError 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -9135,21 +9006,6 @@ exports[`PaymentMethods View renders correctly with sdkError 1`] = ` } } > - @@ -9755,7 +9611,6 @@ exports[`PaymentMethods View renders correctly with show back button false 1`] = style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -9766,9 +9621,9 @@ exports[`PaymentMethods View renders correctly with show back button false 1`] = style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -9784,21 +9639,6 @@ exports[`PaymentMethods View renders correctly with show back button false 1`] = } } > - diff --git a/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap b/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap index 9240f96c2a9..3ad1e4f304e 100644 --- a/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap +++ b/app/components/UI/Ramp/Views/Quotes/__snapshots__/Quotes.test.tsx.snap @@ -681,7 +681,6 @@ exports[`Quotes renders animation on first fetching 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -692,9 +691,9 @@ exports[`Quotes renders animation on first fetching 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -710,21 +709,6 @@ exports[`Quotes renders animation on first fetching 1`] = ` } } > - @@ -2920,7 +2904,6 @@ exports[`Quotes renders correctly after animation with quotes 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -2931,9 +2914,9 @@ exports[`Quotes renders correctly after animation with quotes 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -2949,21 +2932,6 @@ exports[`Quotes renders correctly after animation with quotes 1`] = ` } } > - @@ -3315,7 +3283,6 @@ exports[`Quotes renders correctly after animation with quotes 1`] = ` - @@ -4667,7 +4618,6 @@ exports[`Quotes renders correctly after animation with quotes and expanded 2`] = - @@ -6804,7 +6738,6 @@ exports[`Quotes renders correctly when fetching quotes errors 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -6815,9 +6748,9 @@ exports[`Quotes renders correctly when fetching quotes errors 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -6833,21 +6766,6 @@ exports[`Quotes renders correctly when fetching quotes errors 1`] = ` } } > - @@ -7562,7 +7480,6 @@ exports[`Quotes renders correctly with sdkError 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -7573,9 +7490,9 @@ exports[`Quotes renders correctly with sdkError 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -7591,21 +7508,6 @@ exports[`Quotes renders correctly with sdkError 1`] = ` } } > - @@ -8320,7 +8222,6 @@ exports[`Quotes renders quotes expired screen 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -8331,9 +8232,9 @@ exports[`Quotes renders quotes expired screen 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -8349,21 +8250,6 @@ exports[`Quotes renders quotes expired screen 1`] = ` } } > - diff --git a/app/components/UI/Ramp/Views/Regions/__snapshots__/Regions.test.tsx.snap b/app/components/UI/Ramp/Views/Regions/__snapshots__/Regions.test.tsx.snap index 5a5c62b514f..d181f8b8542 100644 --- a/app/components/UI/Ramp/Views/Regions/__snapshots__/Regions.test.tsx.snap +++ b/app/components/UI/Ramp/Views/Regions/__snapshots__/Regions.test.tsx.snap @@ -134,7 +134,6 @@ exports[`Regions View renders correctly 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -145,9 +144,9 @@ exports[`Regions View renders correctly 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -163,21 +162,6 @@ exports[`Regions View renders correctly 1`] = ` } } > - @@ -950,7 +934,6 @@ exports[`Regions View renders correctly while loading 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -961,9 +944,9 @@ exports[`Regions View renders correctly while loading 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -979,21 +962,6 @@ exports[`Regions View renders correctly while loading 1`] = ` } } > - @@ -1561,7 +1529,6 @@ exports[`Regions View renders correctly with error 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -1572,9 +1539,9 @@ exports[`Regions View renders correctly with error 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -1590,21 +1557,6 @@ exports[`Regions View renders correctly with error 1`] = ` } } > - @@ -2210,7 +2162,6 @@ exports[`Regions View renders correctly with no data 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -2221,9 +2172,9 @@ exports[`Regions View renders correctly with no data 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -2239,21 +2190,6 @@ exports[`Regions View renders correctly with no data 1`] = ` } } > - @@ -2821,7 +2757,6 @@ exports[`Regions View renders correctly with sdkError 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -2832,9 +2767,9 @@ exports[`Regions View renders correctly with sdkError 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -2850,21 +2785,6 @@ exports[`Regions View renders correctly with sdkError 1`] = ` } } > - @@ -3470,7 +3390,6 @@ exports[`Regions View renders correctly with selectedRegion 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -3481,9 +3400,9 @@ exports[`Regions View renders correctly with selectedRegion 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -3499,21 +3418,6 @@ exports[`Regions View renders correctly with selectedRegion 1`] = ` } } > - @@ -4284,7 +4188,6 @@ exports[`Regions View renders correctly with unsupportedRegion 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -4295,9 +4198,9 @@ exports[`Regions View renders correctly with unsupportedRegion 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -4313,21 +4216,6 @@ exports[`Regions View renders correctly with unsupportedRegion 1`] = ` } } > - @@ -5473,7 +5361,6 @@ exports[`Regions View renders correctly with unsupportedRegion 2`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -5484,9 +5371,9 @@ exports[`Regions View renders correctly with unsupportedRegion 2`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -5502,21 +5389,6 @@ exports[`Regions View renders correctly with unsupportedRegion 2`] = ` } } > - @@ -6662,7 +6534,6 @@ exports[`Regions View renders regions modal when pressing select button 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -6673,9 +6544,9 @@ exports[`Regions View renders regions modal when pressing select button 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -6691,21 +6562,6 @@ exports[`Regions View renders regions modal when pressing select button 1`] = ` } } > - diff --git a/app/components/UI/Ramp/Views/SendTransaction/__snapshots__/SendTransaction.test.tsx.snap b/app/components/UI/Ramp/Views/SendTransaction/__snapshots__/SendTransaction.test.tsx.snap index f3ad57c5056..2b0c2a89da8 100644 --- a/app/components/UI/Ramp/Views/SendTransaction/__snapshots__/SendTransaction.test.tsx.snap +++ b/app/components/UI/Ramp/Views/SendTransaction/__snapshots__/SendTransaction.test.tsx.snap @@ -157,7 +157,6 @@ exports[`SendTransaction View renders correctly 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -168,9 +167,9 @@ exports[`SendTransaction View renders correctly 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -186,21 +185,6 @@ exports[`SendTransaction View renders correctly 1`] = ` } } > - @@ -972,7 +956,6 @@ exports[`SendTransaction View renders correctly for custom action payment method style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -983,9 +966,9 @@ exports[`SendTransaction View renders correctly for custom action payment method style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -1001,21 +984,6 @@ exports[`SendTransaction View renders correctly for custom action payment method } } > - @@ -1703,7 +1671,6 @@ exports[`SendTransaction View renders correctly for token 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -1714,9 +1681,9 @@ exports[`SendTransaction View renders correctly for token 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -1732,21 +1699,6 @@ exports[`SendTransaction View renders correctly for token 1`] = ` } } > - diff --git a/app/components/UI/Ramp/hooks/useCryptoCurrencies.test.ts b/app/components/UI/Ramp/hooks/useCryptoCurrencies.test.ts index 969142e1a3e..f872124a3ab 100644 --- a/app/components/UI/Ramp/hooks/useCryptoCurrencies.test.ts +++ b/app/components/UI/Ramp/hooks/useCryptoCurrencies.test.ts @@ -14,6 +14,7 @@ const mockuseRampSDKInitialValues: DeepPartial = { selectedFiatCurrencyId: 'test-fiat-currency-id', selectedAsset: null, setSelectedAsset: jest.fn(), + setIntent: jest.fn(), selectedChainId: '1', isBuy: true, }; @@ -354,4 +355,54 @@ describe('useCryptoCurrencies', () => { queryGetCryptoCurrencies: mockQueryGetCryptoCurrencies, }); }); + + it('selects the crypto currency from intent if available and resets it', () => { + const mockQueryGetCryptoCurrencies = jest.fn(); + (useSDKMethod as jest.Mock).mockReturnValue([ + { + data: [ + { network: { chainId: '1' }, address: 'test-address-1' }, + { network: { chainId: '1' }, address: 'test-address-2' }, + { network: { chainId: '1' }, address: NATIVE_ADDRESS }, + ], + error: null, + isFetching: false, + }, + mockQueryGetCryptoCurrencies, + ]); + + mockUseRampSDKValues.selectedAsset = { + network: { chainId: '1' }, + address: 'test-address-3', + }; + + const mockedIntent = { address: 'test-address-2' }; + mockUseRampSDKValues.intent = mockedIntent; + + const { result } = renderHookWithProvider(() => useCryptoCurrencies()); + + expect(mockUseRampSDKValues.setSelectedAsset).toHaveBeenCalledWith({ + network: { chainId: '1' }, + address: 'test-address-2', + }); + expect(result.current).toEqual({ + cryptoCurrencies: [ + { network: { chainId: '1' }, address: 'test-address-1' }, + { network: { chainId: '1' }, address: 'test-address-2' }, + { network: { chainId: '1' }, address: NATIVE_ADDRESS }, + ], + errorCryptoCurrencies: null, + isFetchingCryptoCurrencies: false, + queryGetCryptoCurrencies: mockQueryGetCryptoCurrencies, + }); + + expect(mockUseRampSDKValues.setIntent).toHaveBeenCalledWith( + expect.any(Function), + ); + const setIntentFunction = (mockUseRampSDKValues.setIntent as jest.Mock).mock + .calls[0][0]; + expect(setIntentFunction(mockedIntent)).toEqual({ + address: undefined, + }); + }); }); diff --git a/app/components/UI/Ramp/hooks/useCryptoCurrencies.ts b/app/components/UI/Ramp/hooks/useCryptoCurrencies.ts index 424e667c42f..e908a2f4162 100644 --- a/app/components/UI/Ramp/hooks/useCryptoCurrencies.ts +++ b/app/components/UI/Ramp/hooks/useCryptoCurrencies.ts @@ -13,6 +13,7 @@ export default function useCryptoCurrencies() { selectedChainId, isBuy, intent, + setIntent, } = useRampSDK(); const [ @@ -62,6 +63,7 @@ export default function useCryptoCurrencies() { ); if (intentAsset) { setSelectedAsset(intentAsset); + setIntent((prevIntent) => ({ ...prevIntent, address: undefined })); return; } } @@ -85,6 +87,7 @@ export default function useCryptoCurrencies() { selectedAsset, selectedChainId, setSelectedAsset, + setIntent, ]); return { diff --git a/app/components/UI/SimulationDetails/AmountPill/AmountPill.test.tsx b/app/components/UI/SimulationDetails/AmountPill/AmountPill.test.tsx index 012f050320d..bf87cb1a899 100644 --- a/app/components/UI/SimulationDetails/AmountPill/AmountPill.test.tsx +++ b/app/components/UI/SimulationDetails/AmountPill/AmountPill.test.tsx @@ -5,25 +5,33 @@ import AmountPill from './AmountPill'; import { AssetIdentifier, AssetType, - NATIVE_ASSET_IDENTIFIER, + NativeAssetIdentifier, TokenAssetIdentifier, } from '../types'; const TOKEN_ID_MOCK = '0xabc'; +const CHAIN_ID_MOCK = '0x123'; const ERC20_ASSET_MOCK: TokenAssetIdentifier = { type: AssetType.ERC20, address: '0x456', + chainId: CHAIN_ID_MOCK, }; const ERC721_ASSET_MOCK: TokenAssetIdentifier = { type: AssetType.ERC721, address: '0x123', tokenId: TOKEN_ID_MOCK, + chainId: CHAIN_ID_MOCK, }; const ERC1155_ASSET_MOCK: TokenAssetIdentifier = { type: AssetType.ERC1155, address: '0x789', tokenId: TOKEN_ID_MOCK, + chainId: CHAIN_ID_MOCK, +}; +const NATIVE_ASSET_MOCK: NativeAssetIdentifier = { + type: AssetType.Native, + chainId: CHAIN_ID_MOCK, }; const renderAndExpect = ( @@ -83,7 +91,7 @@ describe('AmountPill', () => { it.each(nativeAndErc20Cases)( 'renders the correct sign and amount for $amount', ({ amount, expected }) => { - renderAndExpect(NATIVE_ASSET_IDENTIFIER, amount, expected); + renderAndExpect(NATIVE_ASSET_MOCK, amount, expected); }, ); }); diff --git a/app/components/UI/SimulationDetails/AssetPill/AssetPill.test.tsx b/app/components/UI/SimulationDetails/AssetPill/AssetPill.test.tsx index 220dad70717..291d2087c78 100644 --- a/app/components/UI/SimulationDetails/AssetPill/AssetPill.test.tsx +++ b/app/components/UI/SimulationDetails/AssetPill/AssetPill.test.tsx @@ -1,18 +1,10 @@ import React from 'react'; -import { render } from '@testing-library/react-native'; import AssetPill from './AssetPill'; -import { - selectChainId, - selectTicker, -} from '../../../../selectors/networkController'; import { AssetType, AssetIdentifier } from '../types'; +import renderWithProvider from '../../../../util/test/renderWithProvider'; +import { mockNetworkState } from '../../../../util/test/network'; -jest.mock('react-redux', () => ({ - ...jest.requireActual('react-redux'), - useSelector: jest.fn().mockImplementation((selector) => selector()), -})); -jest.mock('../../../../selectors/networkController'); jest.mock( '../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork', () => 'AvatarNetwork', @@ -22,18 +14,33 @@ jest.mock('../../../hooks/useStyles', () => ({ useStyles: () => ({ styles: {} }), })); -describe('AssetPill', () => { - const selectChainIdMock = jest.mocked(selectChainId); - const selectTickerMock = jest.mocked(selectTicker); +const CHAIN_ID_MOCK = '0x123'; - beforeAll(() => { - selectChainIdMock.mockReturnValue('0x1'); - selectTickerMock.mockReturnValue('ETH'); - }); +const STATE_MOCK = { + engine: { + backgroundState: { + NetworkController: { + ...mockNetworkState({ + chainId: CHAIN_ID_MOCK, + }), + }, + }, + }, +}; +describe('AssetPill', () => { it('renders correctly for native assets', () => { - const asset = { type: AssetType.Native } as AssetIdentifier; - const { getByText, getByTestId } = render(); + const asset = { + type: AssetType.Native, + chainId: CHAIN_ID_MOCK, + } as AssetIdentifier; + + const { getByText, getByTestId } = renderWithProvider( + , + { + state: STATE_MOCK, + }, + ); expect( getByTestId('simulation-details-asset-pill-avatar-network'), @@ -45,8 +52,12 @@ describe('AssetPill', () => { const asset = { type: AssetType.ERC20, address: '0xabc123', + chainId: CHAIN_ID_MOCK, } as AssetIdentifier; - const { getByTestId } = render(); + + const { getByTestId } = renderWithProvider(, { + state: STATE_MOCK, + }); expect(getByTestId('simulation-details-asset-pill-name')).toBeTruthy(); }); diff --git a/app/components/UI/SimulationDetails/AssetPill/AssetPill.tsx b/app/components/UI/SimulationDetails/AssetPill/AssetPill.tsx index 3399ed8b0d6..13e829b3795 100644 --- a/app/components/UI/SimulationDetails/AssetPill/AssetPill.tsx +++ b/app/components/UI/SimulationDetails/AssetPill/AssetPill.tsx @@ -9,16 +9,13 @@ import Text, { } from '../../../../component-library/components/Texts/Text'; import AvatarNetwork from '../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork'; import { AvatarSize } from '../../../../component-library/components/Avatars/Avatar/Avatar.types'; -import { - selectChainId, - selectTicker, -} from '../../../../selectors/networkController'; import { NetworkList } from '../../../../util/networks'; import { useStyles } from '../../../hooks/useStyles'; import Name from '../../Name/Name'; import { NameType } from '../../Name/Name.types'; import { AssetIdentifier, AssetType } from '../types'; import styleSheet from './AssetPill.styles'; +import { selectNetworkConfigurations } from '../../../../selectors/networkController'; interface AssetPillProperties extends ViewProps { asset: AssetIdentifier; @@ -35,21 +32,26 @@ const getNetworkImage = (chainId: Hex) => { return network?.imageSource || null; }; -const NativeAssetPill: React.FC = () => { +const NativeAssetPill: React.FC = ({ asset }) => { const { styles } = useStyles(styleSheet, {}); - const ticker = useSelector(selectTicker); - const chainId = useSelector(selectChainId); - const imageSource = getNetworkImage(chainId); + const imageSource = getNetworkImage(asset.chainId); + + const networkConfigurationsByChainId = useSelector( + selectNetworkConfigurations, + ); + + const { nativeCurrency } = + networkConfigurationsByChainId[asset.chainId] || {}; return ( - {ticker} + {nativeCurrency} ); }; @@ -57,20 +59,17 @@ const NativeAssetPill: React.FC = () => { const AssetPill: React.FC = ({ asset }) => { const { styles } = useStyles(styleSheet, {}); - // TODO: Remove global network selector usage once simulations refactored. - const chainId = useSelector(selectChainId); - return ( {asset.type === AssetType.Native ? ( - + ) : ( )} diff --git a/app/components/UI/SimulationDetails/BalanceChangeList/BalanceChangeList.test.tsx b/app/components/UI/SimulationDetails/BalanceChangeList/BalanceChangeList.test.tsx index dacf4df7de4..70ef9cb1116 100644 --- a/app/components/UI/SimulationDetails/BalanceChangeList/BalanceChangeList.test.tsx +++ b/app/components/UI/SimulationDetails/BalanceChangeList/BalanceChangeList.test.tsx @@ -14,11 +14,14 @@ jest.mock('../FiatDisplay/FiatDisplay', () => ({ TotalFiatDisplay: 'TotalFiatDisplay', })); +const CHAIN_ID_MOCK = '0x123'; + const balanceChangesMock = [ { asset: { type: 'ERC20', address: '0xabc123', + chainId: CHAIN_ID_MOCK, }, amount: new BigNumber(100), fiatAmount: 100, @@ -68,6 +71,7 @@ describe('BalanceChangeList', () => { asset: { type: 'ERC20', address: '0xabc123', + chainId: CHAIN_ID_MOCK, }, amount: new BigNumber(100), fiatAmount: 100, diff --git a/app/components/UI/SimulationDetails/BalanceChangeRow/BalanceChangeRow.test.tsx b/app/components/UI/SimulationDetails/BalanceChangeRow/BalanceChangeRow.test.tsx index ede8373ed23..3d95d368876 100644 --- a/app/components/UI/SimulationDetails/BalanceChangeRow/BalanceChangeRow.test.tsx +++ b/app/components/UI/SimulationDetails/BalanceChangeRow/BalanceChangeRow.test.tsx @@ -5,22 +5,24 @@ import { BigNumber } from 'bignumber.js'; import BalanceChangeRow from './BalanceChangeRow'; import { AssetType, BalanceChange } from '../types'; +jest.mock('../AmountPill/AmountPill', () => 'AmountPill'); +jest.mock('../AssetPill/AssetPill', () => 'AssetPill'); jest.mock('../FiatDisplay/FiatDisplay', () => ({ IndividualFiatDisplay: 'IndividualFiatDisplay', })); +const CHAIN_ID_MOCK = '0x123'; + const balanceChangeMock: BalanceChange = { asset: { type: AssetType.ERC20, address: '0xabc123', + chainId: CHAIN_ID_MOCK, }, amount: new BigNumber(100), fiatAmount: 0, } as BalanceChange; -jest.mock('../AmountPill/AmountPill', () => 'AmountPill'); -jest.mock('../AssetPill/AssetPill', () => 'AssetPill'); - describe('BalanceChangeList', () => { it('renders a balance change row', () => { const { getByText, getByTestId } = render( diff --git a/app/components/UI/SimulationDetails/SimulationDetails.stories.tsx b/app/components/UI/SimulationDetails/SimulationDetails.stories.tsx index b5d8994e194..97a826f55f6 100644 --- a/app/components/UI/SimulationDetails/SimulationDetails.stories.tsx +++ b/app/components/UI/SimulationDetails/SimulationDetails.stories.tsx @@ -9,6 +9,8 @@ import { SimulationErrorCode, SimulationTokenStandard, CHAIN_IDS, + TransactionMeta, + SimulationData, } from '@metamask/transaction-controller'; import { @@ -145,8 +147,20 @@ const meta: Meta = { }; export default meta; +function buildArgs({ + simulationData, +}: { + simulationData?: SimulationData; +}): Partial { + return { + transaction: { + simulationData, + } as TransactionMeta, + }; +} + export const MultipleTokens: Story = { - args: { + args: buildArgs({ simulationData: { nativeBalanceChange: { ...DUMMY_BALANCE_CHANGE, @@ -193,11 +207,11 @@ export const MultipleTokens: Story = { }, ], }, - }, + }), }; export const SendSmallAmount: Story = { - args: { + args: buildArgs({ simulationData: { nativeBalanceChange: { ...DUMMY_BALANCE_CHANGE, @@ -206,11 +220,11 @@ export const SendSmallAmount: Story = { }, tokenBalanceChanges: [], }, - }, + }), }; export const LongValuesAndNames: Story = { - args: { + args: buildArgs({ simulationData: { nativeBalanceChange: { ...DUMMY_BALANCE_CHANGE, @@ -234,11 +248,11 @@ export const LongValuesAndNames: Story = { }, ], }, - }, + }), }; export const PolygonNativeAsset: Story = { - args: { + args: buildArgs({ simulationData: { nativeBalanceChange: { ...DUMMY_BALANCE_CHANGE, @@ -247,14 +261,14 @@ export const PolygonNativeAsset: Story = { }, tokenBalanceChanges: [], }, - }, + }), decorators: [ (story) => {story()}, ], }; export const ArbitrumNativeAsset: Story = { - args: { + args: buildArgs({ simulationData: { nativeBalanceChange: { ...DUMMY_BALANCE_CHANGE, @@ -263,14 +277,14 @@ export const ArbitrumNativeAsset: Story = { }, tokenBalanceChanges: [], }, - }, + }), decorators: [ (story) => {story()}, ], }; export const ReceiveOnly: Story = { - args: { + args: buildArgs({ simulationData: { nativeBalanceChange: { previousBalance: '0x2', @@ -280,11 +294,11 @@ export const ReceiveOnly: Story = { }, tokenBalanceChanges: [], }, - }, + }), }; export const SendOnly: Story = { - args: { + args: buildArgs({ simulationData: { nativeBalanceChange: { previousBalance: '0x1', @@ -294,40 +308,40 @@ export const SendOnly: Story = { }, tokenBalanceChanges: [], }, - }, + }), }; export const NoBalanceChanges: Story = { - args: { + args: buildArgs({ simulationData: { nativeBalanceChange: undefined, tokenBalanceChanges: [], }, - }, + }), }; export const Loading: Story = { - args: { + args: buildArgs({ simulationData: undefined, - }, + }), }; export const TransactionReverted: Story = { - args: { + args: buildArgs({ simulationData: { error: { code: SimulationErrorCode.Reverted }, nativeBalanceChange: undefined, tokenBalanceChanges: [], }, - }, + }), }; export const GenericError: Story = { - args: { + args: buildArgs({ simulationData: { error: {}, nativeBalanceChange: undefined, tokenBalanceChanges: [], }, - }, + }), }; diff --git a/app/components/UI/SimulationDetails/SimulationDetails.test.tsx b/app/components/UI/SimulationDetails/SimulationDetails.test.tsx index e4054925201..3b64269f9f3 100644 --- a/app/components/UI/SimulationDetails/SimulationDetails.test.tsx +++ b/app/components/UI/SimulationDetails/SimulationDetails.test.tsx @@ -6,6 +6,7 @@ import { SimulationData, SimulationErrorCode, SimulationTokenStandard, + TransactionMeta, } from '@metamask/transaction-controller'; import AnimatedSpinner from '../AnimatedSpinner'; @@ -21,6 +22,7 @@ const DUMMY_BALANCE_CHANGE = { previousBalance: '0xIGNORED' as Hex, newBalance: '0xIGNORED' as Hex, }; +const CHAIN_ID_MOCK = '0x123'; const mockTransactionId = '0x1234567890'; const simulationDataMock = { nativeBalanceChange: { @@ -81,8 +83,12 @@ describe('SimulationDetails', () => { render( , ); @@ -95,11 +101,15 @@ describe('SimulationDetails', () => { expect( render( , ).toJSON(), @@ -110,11 +120,15 @@ describe('SimulationDetails', () => { expect( render( , ).toJSON(), @@ -126,11 +140,15 @@ describe('SimulationDetails', () => { it('if transaction will be reverted', () => { const { getByText } = render( , ); @@ -141,11 +159,15 @@ describe('SimulationDetails', () => { it('if simulation is failed', () => { const { getByText } = render( , ); @@ -159,8 +181,12 @@ describe('SimulationDetails', () => { it('renders if no balance change', () => { const { getByText } = render( , ); @@ -175,7 +201,7 @@ describe('SimulationDetails', () => { { amount: new BigNumber('0x1', 16).times(-1), fiatAmount: 10, - asset: { type: AssetType.Native }, + asset: { type: AssetType.Native, chainId: CHAIN_ID_MOCK }, }, { amount: new BigNumber('0x123456', 16).times(1), @@ -184,6 +210,7 @@ describe('SimulationDetails', () => { address: FIRST_PARTY_CONTRACT_ADDRESS_1_MOCK, tokenId: undefined, type: AssetType.ERC20, + chainId: CHAIN_ID_MOCK, }, }, { @@ -193,6 +220,7 @@ describe('SimulationDetails', () => { address: FIRST_PARTY_CONTRACT_ADDRESS_2_MOCK, tokenId: undefined, type: AssetType.ERC20, + chainId: CHAIN_ID_MOCK, }, }, ], @@ -200,8 +228,12 @@ describe('SimulationDetails', () => { const { getByTestId } = render( , ); diff --git a/app/components/UI/SimulationDetails/SimulationDetails.tsx b/app/components/UI/SimulationDetails/SimulationDetails.tsx index 474bafc3ebe..04c8406b5e3 100644 --- a/app/components/UI/SimulationDetails/SimulationDetails.tsx +++ b/app/components/UI/SimulationDetails/SimulationDetails.tsx @@ -2,9 +2,9 @@ import React, { useState } from 'react'; import { View, Pressable } from 'react-native'; import { - SimulationData, SimulationErrorCode, SimulationError, + TransactionMeta, } from '@metamask/transaction-controller'; import { strings } from '../../../../locales/i18n'; @@ -25,8 +25,7 @@ import styleSheet from './SimulationDetails.styles'; import { useSimulationMetrics } from './useSimulationMetrics'; export interface SimulationDetailsProps { - simulationData?: SimulationData; - transactionId: string; + transaction: TransactionMeta; enableMetrics: boolean; } @@ -140,12 +139,12 @@ const SimulationDetailsLayout: React.FC<{ * @returns The simulation details. */ export const SimulationDetails: React.FC = ({ - simulationData, + transaction, enableMetrics = false, - transactionId, }: SimulationDetailsProps) => { const { styles } = useStyles(styleSheet, {}); - const balanceChangesResult = useBalanceChanges(simulationData); + const { chainId, id: transactionId, simulationData } = transaction; + const balanceChangesResult = useBalanceChanges({ chainId, simulationData }); const loading = !simulationData || balanceChangesResult.pending; useSimulationMetrics({ diff --git a/app/components/UI/SimulationDetails/types.ts b/app/components/UI/SimulationDetails/types.ts index 9b87ad84af3..93468745472 100644 --- a/app/components/UI/SimulationDetails/types.ts +++ b/app/components/UI/SimulationDetails/types.ts @@ -8,10 +8,6 @@ export enum AssetType { ERC1155 = 'ERC1155', } -export const NATIVE_ASSET_IDENTIFIER: NativeAssetIdentifier = { - type: AssetType.Native, -}; - /** * Describes an amount of fiat. */ @@ -23,18 +19,20 @@ export type FiatAmount = FiatAmountAvailable | typeof FIAT_UNAVAILABLE; * Identifies the native asset of a chain. */ export interface NativeAssetIdentifier { - type: AssetType.Native; address?: undefined; + chainId: Hex; tokenId?: undefined; + type: AssetType.Native; } /** * Uniquely identifies a token asset on a chain. */ export interface TokenAssetIdentifier { - type: Exclude; address: Hex; + chainId: Hex; tokenId?: Hex; + type: Exclude; } export type AssetIdentifier = Readonly< diff --git a/app/components/UI/SimulationDetails/useBalanceChanges.test.ts b/app/components/UI/SimulationDetails/useBalanceChanges.test.ts index 720c09c5397..16fe3af39e9 100644 --- a/app/components/UI/SimulationDetails/useBalanceChanges.test.ts +++ b/app/components/UI/SimulationDetails/useBalanceChanges.test.ts @@ -61,6 +61,8 @@ const DIFFERENCE_1_MOCK: Hex = '0x11'; const DIFFERENCE_2_MOCK: Hex = '0x2'; const DIFFERENCE_ETH_MOCK: Hex = '0x1234567890123456789'; +const CHAIN_ID_MOCK = '0x123'; + const dummyBalanceChange = { previousBalance: '0xIGNORE' as Hex, newBalance: '0xIGNORE' as Hex, @@ -98,7 +100,10 @@ describe('useBalanceChanges', () => { describe('pending states', () => { it('returns pending=true if no simulation data', async () => { const { result, waitForNextUpdate } = renderHook(() => - useBalanceChanges(undefined), + useBalanceChanges({ + chainId: CHAIN_ID_MOCK, + simulationData: undefined, + }), ); expect(result.current).toEqual({ pending: true, value: [] }); await waitForNextUpdate(); @@ -119,7 +124,10 @@ describe('useBalanceChanges', () => { ], }; const { result, unmount, waitForNextUpdate } = renderHook(() => - useBalanceChanges(simulationData), + useBalanceChanges({ + chainId: CHAIN_ID_MOCK, + simulationData, + }), ); await waitForNextUpdate(); @@ -143,7 +151,10 @@ describe('useBalanceChanges', () => { ], }; const { result, unmount } = renderHook(() => - useBalanceChanges(simulationData), + useBalanceChanges({ + chainId: CHAIN_ID_MOCK, + simulationData, + }), ); expect(result.current).toEqual({ pending: true, value: [] }); @@ -159,7 +170,12 @@ describe('useBalanceChanges', () => { nativeBalanceChange: undefined, tokenBalanceChanges, }; - return renderHook(() => useBalanceChanges(simulationData)); + return renderHook(() => + useBalanceChanges({ + chainId: CHAIN_ID_MOCK, + simulationData, + }), + ); }; it('maps token balance changes correctly', async () => { @@ -182,6 +198,7 @@ describe('useBalanceChanges', () => { address: ERC20_TOKEN_ADDRESS_1_MOCK, type: AssetType.ERC20, tokenId: undefined, + chainId: CHAIN_ID_MOCK, }, amount: new BigNumber('-0.017'), fiatAmount: -0.0255, @@ -238,6 +255,7 @@ describe('useBalanceChanges', () => { address: NFT_TOKEN_ADDRESS_MOCK, type: AssetType.ERC721, tokenId: TOKEN_ID_1_MOCK, + chainId: CHAIN_ID_MOCK, }, amount: new BigNumber('-1'), fiatAmount: FIAT_UNAVAILABLE, @@ -305,7 +323,12 @@ describe('useBalanceChanges', () => { nativeBalanceChange, tokenBalanceChanges: [], }; - return renderHook(() => useBalanceChanges(simulationData)); + return renderHook(() => + useBalanceChanges({ + chainId: CHAIN_ID_MOCK, + simulationData, + }), + ); }; it('maps native balance change correctly', async () => { @@ -322,6 +345,7 @@ describe('useBalanceChanges', () => { { asset: { type: AssetType.Native, + chainId: CHAIN_ID_MOCK, }, amount: new BigNumber('-5373.003641998677469065'), fiatAmount: Number('-16119.010925996032'), @@ -367,7 +391,10 @@ describe('useBalanceChanges', () => { ], }; const { result, waitForNextUpdate } = renderHook(() => - useBalanceChanges(simulationData), + useBalanceChanges({ + chainId: CHAIN_ID_MOCK, + simulationData, + }), ); await waitForNextUpdate(); @@ -376,6 +403,7 @@ describe('useBalanceChanges', () => { expect(changes).toHaveLength(2); expect(changes[0].asset).toEqual({ type: AssetType.Native, + chainId: CHAIN_ID_MOCK, }); expect(changes[0].amount).toEqual( new BigNumber('-5373.003641998677469065'), @@ -384,6 +412,7 @@ describe('useBalanceChanges', () => { expect(changes[1].asset).toEqual({ address: ERC20_TOKEN_ADDRESS_1_MOCK, type: AssetType.ERC20, + chainId: CHAIN_ID_MOCK, }); expect(changes[1].amount).toEqual(new BigNumber('0.002')); }); diff --git a/app/components/UI/SimulationDetails/useBalanceChanges.ts b/app/components/UI/SimulationDetails/useBalanceChanges.ts index faa7aeb14bf..e383058c0c4 100644 --- a/app/components/UI/SimulationDetails/useBalanceChanges.ts +++ b/app/components/UI/SimulationDetails/useBalanceChanges.ts @@ -15,17 +15,16 @@ import { import { BalanceChange, - NATIVE_ASSET_IDENTIFIER, TokenAssetIdentifier, AssetType, FIAT_UNAVAILABLE, + NativeAssetIdentifier, } from './types'; import { getTokenDetails } from '../../../util/address'; import { selectConversionRate, selectCurrentCurrency, } from '../../../selectors/currencyRateController'; -import { selectChainId } from '../../../selectors/networkController'; import { useAsyncResultOrThrow } from '../../hooks/useAsyncResult'; const NATIVE_DECIMALS = 18; @@ -132,14 +131,20 @@ async function fetchTokenFiatRates( function getNativeBalanceChange( nativeBalanceChange: SimulationBalanceChange | undefined, nativeFiatRate: number, + chainId: Hex, ): BalanceChange | undefined { if (!nativeBalanceChange) { return undefined; } - const asset = NATIVE_ASSET_IDENTIFIER; - const amount = getAssetAmount(nativeBalanceChange, NATIVE_DECIMALS); + const asset: NativeAssetIdentifier = { + type: AssetType.Native, + chainId, + }; + + const amount = getAssetAmount(nativeBalanceChange, NATIVE_DECIMALS); const fiatAmount = amount.times(nativeFiatRate).toNumber(); + return { asset, amount, fiatAmount }; } @@ -148,12 +153,14 @@ function getTokenBalanceChanges( tokenBalanceChanges: SimulationTokenBalanceChange[], erc20Decimals: Record, erc20FiatRates: Partial>, + chainId: Hex, ): BalanceChange[] { return tokenBalanceChanges.map((tokenBc) => { const asset: TokenAssetIdentifier = { type: convertStandard(tokenBc.standard), address: tokenBc.address.toLowerCase() as Hex, tokenId: tokenBc.id, + chainId, }; const decimals = @@ -172,12 +179,15 @@ function getTokenBalanceChanges( } // Compiles a list of balance changes from simulation data -export default function useBalanceChanges( - simulationData: SimulationData | undefined, -): { pending: boolean; value: BalanceChange[] } { +export default function useBalanceChanges({ + chainId, + simulationData, +}: { + chainId: Hex; + simulationData?: SimulationData; +}): { pending: boolean; value: BalanceChange[] } { const nativeFiatRate = useSelector(selectConversionRate) as number; const fiatCurrency = useSelector(selectCurrentCurrency); - const chainId = useSelector(selectChainId); const { nativeBalanceChange, tokenBalanceChanges = [] } = simulationData ?? {}; @@ -200,18 +210,21 @@ export default function useBalanceChanges( [JSON.stringify(erc20TokenAddresses), chainId, fiatCurrency], ); - if (erc20Decimals.pending || erc20FiatRates.pending || !simulationData ) { + if (erc20Decimals.pending || erc20FiatRates.pending || !simulationData) { return { pending: true, value: [] }; } const nativeChange = getNativeBalanceChange( nativeBalanceChange, nativeFiatRate, + chainId, ); + const tokenChanges = getTokenBalanceChanges( tokenBalanceChanges, erc20Decimals.value, erc20FiatRates.value, + chainId, ); const balanceChanges: BalanceChange[] = [ diff --git a/app/components/UI/SimulationDetails/useSimulationMetrics.test.ts b/app/components/UI/SimulationDetails/useSimulationMetrics.test.ts index cf9eacf54a6..920aded4148 100644 --- a/app/components/UI/SimulationDetails/useSimulationMetrics.test.ts +++ b/app/components/UI/SimulationDetails/useSimulationMetrics.test.ts @@ -1,6 +1,5 @@ import { useEffect, useState } from 'react'; import { - CHAIN_IDS, SimulationData, SimulationErrorCode, } from '@metamask/transaction-controller'; @@ -23,7 +22,6 @@ import { useSimulationMetrics, } from './useSimulationMetrics'; import useLoadingTime from './useLoadingTime'; -import { selectChainId } from '../../../selectors/networkController'; import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder'; jest.mock('react-redux', () => ({ @@ -89,7 +87,6 @@ describe('useSimulationMetrics', () => { const useDisplayNamesMock = jest.mocked(useDisplayNames); const useLoadingTimeMock = jest.mocked(useLoadingTime); const setLoadingCompleteMock = jest.fn(); - const selectChainIdMock = jest.mocked(selectChainId); function expectUpdateTransactionMetricsCalled( { @@ -141,7 +138,6 @@ describe('useSimulationMetrics', () => { loadingTime: LOADING_TIME_MOCK, setLoadingComplete: setLoadingCompleteMock, }); - selectChainIdMock.mockReturnValue(CHAIN_IDS.MAINNET); }); describe('updates transaction simulation metrics', () => { diff --git a/app/components/UI/SimulationDetails/useSimulationMetrics.ts b/app/components/UI/SimulationDetails/useSimulationMetrics.ts index ed7e7f2f4c9..0d16524d9ff 100644 --- a/app/components/UI/SimulationDetails/useSimulationMetrics.ts +++ b/app/components/UI/SimulationDetails/useSimulationMetrics.ts @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { SimulationData, SimulationErrorCode, @@ -17,7 +17,6 @@ import { NameType } from '../../UI/Name/Name.types'; import useLoadingTime from './useLoadingTime'; import { calculateTotalFiat } from './FiatDisplay/FiatDisplay'; import { BalanceChange } from './types'; -import { selectChainId } from '../../../selectors/networkController'; export interface UseSimulationMetricsProps { balanceChanges: BalanceChange[]; @@ -50,9 +49,6 @@ export function useSimulationMetrics({ const { loadingTime, setLoadingComplete } = useLoadingTime(); const dispatch = useDispatch(); - // TODO: Remove global network selector usage once simulations refactored. - const chainId = useSelector(selectChainId); - if (!loading) { setLoadingComplete(); } @@ -62,7 +58,7 @@ export function useSimulationMetrics({ value: asset.address ?? '', type: NameType.EthereumAddress, preferContractSymbol: true, - variation: chainId, + variation: asset.chainId, }), ); diff --git a/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap b/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap index 4050753f14d..1643b96b393 100644 --- a/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap +++ b/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap @@ -136,7 +136,6 @@ exports[`GasImpactModal render matches snapshot 1`] = ` = { getPooledStakingEligibility: jest.fn(), }; -const mockSdkContext: Stake = { +const createMockStakeContext = (overrides?: Partial) => ({ setSdkType: jest.fn(), stakingApiService: mockStakingApiService as StakingApiService, -}; + ...overrides, +}); + +let mockSdkContext = createMockStakeContext(); // Mock the context jest.mock('./useStakeContext', () => ({ @@ -38,6 +41,10 @@ jest.mock('./useStakeContext', () => ({ })); describe('useStakingEligibility', () => { + beforeEach(() => { + mockSdkContext = createMockStakeContext(); + }); + afterEach(() => { jest.clearAllMocks(); }); @@ -125,4 +132,22 @@ describe('useStakingEligibility', () => { }); }); }); + + describe('when stakingApiService is undefined', () => { + it('handles undefined stakingApiService gracefully', async () => { + // Override the mock context with undefined stakingApiService + mockSdkContext = createMockStakeContext({ + stakingApiService: undefined, + }); + + const { result } = renderHookWithProvider(() => useStakingEligibility(), { + state: mockInitialState, + }); + + await waitFor(() => { + expect(result.current.isLoadingEligibility).toBe(false); + expect(result.current.isEligible).toBe(false); + }); + }); + }); }); diff --git a/app/components/UI/Stake/hooks/useStakingEligibility.ts b/app/components/UI/Stake/hooks/useStakingEligibility.ts index 6ba2c0add8a..a04f0a4f490 100644 --- a/app/components/UI/Stake/hooks/useStakingEligibility.ts +++ b/app/components/UI/Stake/hooks/useStakingEligibility.ts @@ -19,14 +19,12 @@ const useStakingEligibility = () => { const [error, setError] = useState(null); const fetchStakingEligibility = useCallback(async () => { - if (!stakingApiService) { - throw new Error('Staking API service is unavailable'); - } - - setIsLoading(true); - setError(null); - try { + if (!stakingApiService) { + return { isEligible: false }; + } + setIsLoading(true); + setError(null); const { eligible } = await stakingApiService.getPooledStakingEligibility([ selectedAddress, ]); diff --git a/app/components/UI/Swaps/__snapshots__/QuotesView.test.ts.snap b/app/components/UI/Swaps/__snapshots__/QuotesView.test.ts.snap index 0bd67e23b11..658bd7b1498 100644 --- a/app/components/UI/Swaps/__snapshots__/QuotesView.test.ts.snap +++ b/app/components/UI/Swaps/__snapshots__/QuotesView.test.ts.snap @@ -155,7 +155,6 @@ exports[`QuotesView should render quote screen 1`] = ` style={ { "alignItems": "center", - "flex": 1, "justifyContent": "center", } } @@ -166,9 +165,9 @@ exports[`QuotesView should render quote screen 1`] = ` style={ { "color": "#141618", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 30, - "fontWeight": "400", + "fontFamily": "EuclidCircularB-Bold", + "fontSize": 14, + "fontWeight": "700", "letterSpacing": 0, "lineHeight": 22, } @@ -184,23 +183,6 @@ exports[`QuotesView should render quote screen 1`] = ` } } > - diff --git a/app/components/UI/Tokens/TokenList/TokenListFooter/index.tsx b/app/components/UI/Tokens/TokenList/TokenListFooter/index.tsx index c3732eb505d..5ab9d0aba4d 100644 --- a/app/components/UI/Tokens/TokenList/TokenListFooter/index.tsx +++ b/app/components/UI/Tokens/TokenList/TokenListFooter/index.tsx @@ -32,6 +32,7 @@ import { import { selectChainId, selectIsAllNetworks, + selectIsPopularNetwork, } from '../../../../../selectors/networkController'; import { TokenI } from '../../types'; import { selectUseTokenDetection } from '../../../../../selectors/preferencesController'; @@ -48,12 +49,15 @@ const getDetectedTokensCount = ( isAllNetworksSelected: boolean, allTokens: TokenI[], filteredTokens: TokenI[] | undefined, + isPopularNetworks: boolean, ): number => { if (!isPortfolioEnabled) { return filteredTokens?.length ?? 0; } - return isAllNetworksSelected ? allTokens.length : filteredTokens?.length ?? 0; + return isAllNetworksSelected && isPopularNetworks + ? allTokens.length + : filteredTokens?.length ?? 0; }; export const TokenListFooter = ({ @@ -75,6 +79,7 @@ export const TokenListFooter = ({ const isTokenDetectionEnabled = useSelector(selectUseTokenDetection); const chainId = useSelector(selectChainId); const isAllNetworks = useSelector(selectIsAllNetworks); + const isPopularNetworks = useSelector(selectIsPopularNetwork); const styles = createStyles(colors); @@ -103,6 +108,7 @@ export const TokenListFooter = ({ isAllNetworks, allDetectedTokens, detectedTokens, + isPopularNetworks, ); const areTokensDetected = tokenCount > 0; diff --git a/app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.test.tsx b/app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.test.tsx index 49117d58278..c0b0e2f4249 100644 --- a/app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.test.tsx +++ b/app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.test.tsx @@ -4,6 +4,7 @@ import { TokenFilterBottomSheet } from './TokenFilterBottomSheet'; import { useSelector } from 'react-redux'; import Engine from '../../../../core/Engine'; import { + selectAllPopularNetworkConfigurations, selectChainId, selectNetworkConfigurations, } from '../../../../selectors/networkController'; @@ -102,6 +103,8 @@ describe('TokenFilterBottomSheet', () => { return {}; // default to show all networks } else if (selector === selectNetworkConfigurations) { return mockNetworks; // default to show all networks + } else if (selector === selectAllPopularNetworkConfigurations) { + return mockNetworks; // default to show all networks } return null; }); @@ -114,14 +117,14 @@ describe('TokenFilterBottomSheet', () => { it('renders correctly with the default option (All Networks) selected', () => { const { queryByText } = render(); - expect(queryByText('All Networks')).toBeTruthy(); + expect(queryByText('Popular networks')).toBeTruthy(); expect(queryByText('Current Network')).toBeTruthy(); }); it('sets filter to All Networks and closes bottom sheet when first option is pressed', async () => { const { queryByText } = render(); - fireEvent.press(queryByText('All Networks')); + fireEvent.press(queryByText('Popular networks')); await waitFor(() => { expect( @@ -152,6 +155,8 @@ describe('TokenFilterBottomSheet', () => { return { '0x1': true }; // filter by current network } else if (selector === selectNetworkConfigurations) { return mockNetworks; + } else if (selector === selectAllPopularNetworkConfigurations) { + return mockNetworks; } return null; }); diff --git a/app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.tsx b/app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.tsx index ba4c7a41961..de98dc93d00 100644 --- a/app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.tsx +++ b/app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.tsx @@ -2,8 +2,8 @@ import React, { useRef, useMemo } from 'react'; import { useSelector } from 'react-redux'; import { selectChainId, - selectNetworkConfigurations, selectIsAllNetworks, + selectAllPopularNetworkConfigurations, } from '../../../../selectors/networkController'; import { selectTokenNetworkFilter } from '../../../../selectors/preferencesController'; import BottomSheet, { @@ -29,7 +29,7 @@ enum FilterOption { const TokenFilterBottomSheet = () => { const sheetRef = useRef(null); - const allNetworks = useSelector(selectNetworkConfigurations); + const allNetworks = useSelector(selectAllPopularNetworkConfigurations); const { colors } = useTheme(); const styles = createStyles(colors); @@ -79,7 +79,9 @@ const TokenFilterBottomSheet = () => { verticalAlignment={VerticalAlignment.Center} > - {strings('wallet.all_networks')} + {`${strings('app_settings.popular')} ${strings( + 'app_settings.networks', + )}`} - All Networks + Ethereum Main Network ({ showSimpleNotification: jest.fn(() => Promise.resolve()), @@ -597,15 +599,36 @@ describe('Tokens', () => { }); describe('Portfolio View', () => { + let selectAccountTokensAcrossChainsSpy: jest.SpyInstance; + beforeEach(() => { + selectAccountTokensAcrossChainsSpy = jest.spyOn( + multichain, + 'selectAccountTokensAcrossChains', + ); jest.spyOn(networks, 'isPortfolioViewEnabled').mockReturnValue(true); }); - it('should match the snapshot when portfolio view is enabled ', () => { + afterEach(() => { + selectAccountTokensAcrossChainsSpy.mockRestore(); + }); + + it('should match the snapshot when portfolio view is enabled', () => { const { toJSON } = renderComponent(initialState); expect(toJSON()).toMatchSnapshot(); }); + it('should call selectAccountTokensAcrossChains when enabled', () => { + renderComponent(initialState); + expect(selectAccountTokensAcrossChainsSpy).toHaveBeenCalled(); + }); + + it('should not call selectAccountTokensAcrossChains when disabled', () => { + jest.spyOn(networks, 'isPortfolioViewEnabled').mockReturnValue(false); + renderComponent(initialState); + expect(selectAccountTokensAcrossChainsSpy).not.toHaveBeenCalled(); + }); + it('should handle network filtering correctly', () => { const multiNetworkState = { ...initialState, diff --git a/app/components/UI/Tokens/index.tsx b/app/components/UI/Tokens/index.tsx index 1bb72a74667..3f7bf864395 100644 --- a/app/components/UI/Tokens/index.tsx +++ b/app/components/UI/Tokens/index.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState, LegacyRef, useMemo, useEffect } from 'react'; +import React, { useRef, useState, LegacyRef, useMemo } from 'react'; import { Hex } from '@metamask/utils'; import { View, Text } from 'react-native'; import ActionSheet from '@metamask/react-native-actionsheet'; @@ -15,6 +15,7 @@ import Logger from '../../../util/Logger'; import { selectChainId, selectIsAllNetworks, + selectIsPopularNetwork, selectNetworkConfigurations, } from '../../../selectors/networkController'; import { @@ -121,8 +122,9 @@ const Tokens: React.FC = ({ tokens }) => { ), ), ]; - const selectedAccountTokensChains = useSelector( - selectAccountTokensAcrossChains, + + const selectedAccountTokensChains = useSelector((state: RootState) => + isPortfolioViewEnabled() ? selectAccountTokensAcrossChains(state) : {}, ); const actionSheet = useRef(); @@ -138,16 +140,20 @@ const Tokens: React.FC = ({ tokens }) => { const multiChainMarketData = useSelector(selectTokenMarketData); const multiChainTokenBalance = useSelector(selectTokensBalances); const multiChainCurrencyRates = useSelector(selectCurrencyRates); + const isPopularNetwork = useSelector(selectIsPopularNetwork); const styles = createStyles(colors); const tokensList = useMemo((): TokenI[] => { + // if it is not popular network, display tokens only for current network + const filteredAssetsParam = isPopularNetwork + ? tokenNetworkFilter + : { [currentChainId]: true }; if (isPortfolioViewEnabled()) { // MultiChain implementation const allTokens = Object.values( selectedAccountTokensChains, ).flat() as TokenI[]; - /* If hideZeroBalanceTokens is ON and user is on "all Networks" we respect the setting and filter native and ERC20 tokens when zero If user is on "current Network" we want to show native tokens, even with zero balance @@ -183,7 +189,7 @@ const Tokens: React.FC = ({ tokens }) => { const filteredAssets = filterAssets(tokensToDisplay, [ { key: 'chainId', - opts: tokenNetworkFilter, + opts: filteredAssetsParam, filterCallback: 'inclusive', }, ]); @@ -289,6 +295,7 @@ const Tokens: React.FC = ({ tokens }) => { tokens, // Dependencies for multichain implementation selectedAccountTokensChains, + isPopularNetwork, tokenNetworkFilter, currentChainId, multiChainCurrencyRates, @@ -404,15 +411,6 @@ const Tokens: React.FC = ({ tokens }) => { const onActionSheetPress = (index: number) => index === 0 ? removeToken() : null; - useEffect(() => { - const { PreferencesController } = Engine.context; - if (isTestNet(currentChainId)) { - PreferencesController.setTokenNetworkFilter({ - [currentChainId]: true, - }); - } - }, [currentChainId]); - return ( = ({ tokens }) => { testID={WalletViewSelectorsIDs.TOKEN_NETWORK_FILTER} label={ - {isAllNetworks - ? strings('wallet.all_networks') + {isAllNetworks && isPopularNetwork + ? `${strings('app_settings.popular')} ${strings( + 'app_settings.networks', + )}` : networkName ?? strings('wallet.current_network')} } - isDisabled={isTestNet(currentChainId)} + isDisabled={isTestNet(currentChainId) || !isPopularNetwork} onPress={showFilterControls} endIconName={IconName.ArrowDown} style={ - isTestNet(currentChainId) + isTestNet(currentChainId) || !isPopularNetwork ? styles.controlButtonDisabled : styles.controlButton } - disabled={isTestNet(currentChainId)} + disabled={isTestNet(currentChainId) || !isPopularNetwork} /> + + + + + + +`; + exports[`Asset should render correctly 1`] = ` StyleSheet.create({ @@ -168,6 +172,10 @@ class Asset extends PureComponent { * Boolean that indicates if native token is supported to buy */ isNetworkBuyNativeTokenSupported: PropTypes.bool, + /** + * Function to set the swaps liveness + */ + setLiveness: PropTypes.func, }; state = { @@ -240,14 +248,34 @@ class Asset extends PureComponent { this.updateNavBar(contentOffset); }; + checkLiveness = async (chainId) => { + try { + const featureFlags = await swapsUtils.fetchSwapsFeatureFlags( + getFeatureFlagChainId(chainId), + AppConstants.SWAPS.CLIENT_ID, + ); + this.props.setLiveness(chainId, featureFlags); + } catch (error) { + Logger.error(error, 'Swaps: error while fetching swaps liveness'); + this.props.setLiveness(chainId, null); + } + }; + componentDidMount() { this.updateNavBar(); + + const tokenChainId = this.props.route?.params?.chainId; + if (tokenChainId) { + this.checkLiveness(tokenChainId); + } + InteractionManager.runAfterInteractions(() => { this.normalizeTransactions(); this.mounted = true; }); this.navSymbol = (this.props.route.params?.symbol ?? '').toLowerCase(); this.navAddress = (this.props.route.params?.address ?? '').toLowerCase(); + if (this.navSymbol.toUpperCase() !== 'ETH' && this.navAddress !== '') { this.filter = this.noEthFilter; } else { @@ -287,6 +315,7 @@ class Asset extends PureComponent { txParams: { from, to }, isTransfer, transferInformation, + type, } = tx; if ( @@ -295,10 +324,15 @@ class Asset extends PureComponent { (chainId === tx.chainId || (!tx.chainId && networkId === tx.networkID)) && tx.status !== 'unapproved' ) { - if (isTransfer) + if (TOKEN_CATEGORY_HASH[type]) { + return false; + } + if (isTransfer) { return this.props.tokens.find(({ address }) => toLowerCaseEquals(address, transferInformation.contractAddress), ); + } + return true; } return false; @@ -482,7 +516,9 @@ class Asset extends PureComponent { : isSwapsAllowed(chainId); const isAssetAllowed = - asset.isETH || asset.address?.toLowerCase() in this.props.swapsTokens; + asset.isETH || + asset.isNative || + asset.address?.toLowerCase() in this.props.swapsTokens; const displaySwapsButton = isSwapsFeatureLive && @@ -493,7 +529,6 @@ class Asset extends PureComponent { const displayBuyButton = asset.isETH ? this.props.isNetworkBuyNativeTokenSupported : this.props.isNetworkRampSupported; - return ( {loading ? ( @@ -559,4 +594,12 @@ const mapStateToProps = (state, { route }) => ({ networkClientId: selectNetworkClientId(state), }); -export default connect(mapStateToProps)(withMetricsAwareness(Asset)); +const mapDispatchToProps = (dispatch) => ({ + setLiveness: (chainId, featureFlags) => + dispatch(setSwapsLiveness(chainId, featureFlags)), +}); + +export default connect( + mapStateToProps, + mapDispatchToProps, +)(withMetricsAwareness(Asset)); diff --git a/app/components/Views/Asset/index.test.js b/app/components/Views/Asset/index.test.js index a7461510901..23ab4e6da7b 100644 --- a/app/components/Views/Asset/index.test.js +++ b/app/components/Views/Asset/index.test.js @@ -1,10 +1,26 @@ import React from 'react'; +import { TransactionType } from '@metamask/transaction-controller'; +import { swapsUtils } from '@metamask/swaps-controller/'; import renderWithProvider from '../../../util/test/renderWithProvider'; import { backgroundState } from '../../../util/test/initial-root-state'; import Asset from './'; import { MOCK_ACCOUNTS_CONTROLLER_STATE } from '../../../util/test/accountsControllerTestUtils'; const mockInitialState = { + swaps: { '0x1': { isLive: true }, hasOnboarded: false, isLive: true }, + fiatOrders: { + networks: [ + { + active: true, + chainId: '1', + chainName: 'Ethereum Mainnet', + nativeTokenSupported: true, + }, + ], + }, + inpageProvider: { + networkId: '0x1', + }, engine: { backgroundState: { ...backgroundState, @@ -16,10 +32,58 @@ const mockInitialState = { }, }, }, + NetworkController: { + selectedNetworkClientId: 'selectedNetworkClientId', + networkConfigurationsByChainId: { + '0x1': { + chainId: '0x1', + rpcEndpoints: [ + { + networkClientId: 'selectedNetworkClientId', + }, + ], + defaultRpcEndpointIndex: 0, + defaultBlockExplorerUrl: 0, + blockExplorerUrls: ['https://block.com'], + }, + '0x89': { + chainId: '0x89', + rpcEndpoints: [ + { + networkClientId: 'otherNetworkClientId', + }, + ], + defaultRpcEndpointIndex: 0, + }, + }, + }, + TransactionController: { + transactions: [ + { + txParams: { + from: '0xC4966c0D659D99699BFD7EB54D8fafEE40e4a756', + to: '0x0000000000000000000000000000000000000000', + }, + hash: '0x3148', + status: 'confirmed', + chainId: '0x1', + networkID: '0x1', + type: TransactionType.simpleSend, + }, + ], + }, }, }, }; +jest.mock('../../../store', () => ({ + store: { + getState: () => mockInitialState, + }, +})); + +jest.unmock('react-native/Libraries/Interaction/InteractionManager'); + jest.mock('../../../core/Engine', () => { const { MOCK_ADDRESS_1, @@ -48,14 +112,65 @@ describe('Asset', () => { it('should render correctly', () => { const { toJSON } = renderWithProvider( null }} - route={{ params: { symbol: 'ETH', address: 'something', isETH: true } }} + navigation={{ setOptions: jest.fn() }} + route={{ + params: { + symbol: 'ETH', + address: 'something', + isETH: true, + chainId: '0x1', + }, + }} + />, + { + state: mockInitialState, + }, + ); + expect(toJSON()).toMatchSnapshot(); + }); + + it('should call navigation.setOptions on mount', () => { + const mockSetOptions = jest.fn(); + renderWithProvider( + , { state: mockInitialState, }, ); + + expect(mockSetOptions).toHaveBeenCalled(); + }); + + it('should not display swaps button if the asset is not allowed', () => { + jest.spyOn(swapsUtils, 'fetchSwapsFeatureFlags').mockRejectedValue('error'); + const { toJSON } = renderWithProvider( + , + { + state: mockInitialState, + }, + ); + expect(toJSON()).toMatchSnapshot(); }); }); diff --git a/app/components/Views/DetectedTokens/index.tsx b/app/components/Views/DetectedTokens/index.tsx index 4078647508d..c25212f0eaa 100644 --- a/app/components/Views/DetectedTokens/index.tsx +++ b/app/components/Views/DetectedTokens/index.tsx @@ -36,6 +36,7 @@ import { import { selectChainId, selectIsAllNetworks, + selectIsPopularNetwork, selectNetworkClientId, selectNetworkConfigurations, } from '../../../selectors/networkController'; @@ -98,6 +99,7 @@ const DetectedTokens = () => { ) as TokenI[]; const allNetworks = useSelector(selectNetworkConfigurations); const chainId = useSelector(selectChainId); + const isPopularNetworks = useSelector(selectIsPopularNetwork); const selectedNetworkClientId = useSelector(selectNetworkClientId); const [ignoredTokens, setIgnoredTokens] = useState( {}, @@ -108,7 +110,7 @@ const DetectedTokens = () => { const styles = createStyles(colors); const currentDetectedTokens = - isPortfolioViewEnabled() && isAllNetworks + isPortfolioViewEnabled() && isAllNetworks && isPopularNetworks ? allDetectedTokens : detectedTokens; diff --git a/app/components/Views/ErrorBoundary/index.js b/app/components/Views/ErrorBoundary/index.js index a0c7af42270..603ebc4f312 100644 --- a/app/components/Views/ErrorBoundary/index.js +++ b/app/components/Views/ErrorBoundary/index.js @@ -40,7 +40,7 @@ import { } from '../../../components/hooks/useMetrics'; import AppConstants from '../../../core/AppConstants'; import { useSelector } from 'react-redux'; - +import { isTest } from '../../../util/test/utils'; // eslint-disable-next-line import/no-commonjs const WarningIcon = require('./warning-icon.png'); @@ -246,7 +246,6 @@ export const Fallback = (props) => { captureSentryFeedback({ sentryId: props.sentryId, comments: feedback }); Alert.alert(strings('error_screen.bug_report_thanks')); }; - return ( @@ -270,6 +269,14 @@ export const Fallback = (props) => { } /> + + {isTest && ( + + + {strings('error_screen.save_seedphrase_2')} + + + )} {strings('error_screen.error_message')} diff --git a/app/components/Views/Login/__snapshots__/index.test.tsx.snap b/app/components/Views/Login/__snapshots__/index.test.tsx.snap index 4beae542b9e..599cee47dee 100644 --- a/app/components/Views/Login/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/Login/__snapshots__/index.test.tsx.snap @@ -186,6 +186,28 @@ exports[`Login should render correctly 1`] = ` + + + save your Secret Recovery Phrase + + fontSize: 10, marginTop: 4, }, + screen: { justifyContent: 'flex-end' }, + scrollableDescription: { + maxHeight: Device.getDeviceHeight() * 0.7, + }, + sheet: { + backgroundColor: colors.background.default, + borderTopLeftRadius: 20, + borderTopRightRadius: 20, + }, + title: { + textAlign: 'center', + marginTop: 8, + marginBottom: 8, + }, + notch: { + width: 48, + height: 5, + borderRadius: 4, + backgroundColor: colors.border.default, + marginTop: 8, + alignSelf: 'center', + }, searchContainer: { marginLeft: 16, marginRight: 16, diff --git a/app/components/Views/NetworkSelector/NetworkSelector.test.tsx b/app/components/Views/NetworkSelector/NetworkSelector.test.tsx index 3866801562d..9dc67fcc978 100644 --- a/app/components/Views/NetworkSelector/NetworkSelector.test.tsx +++ b/app/components/Views/NetworkSelector/NetworkSelector.test.tsx @@ -540,7 +540,7 @@ describe('Network Selector', () => { it('renders the linea mainnet cell correctly', () => { (isNetworkUiRedesignEnabled as jest.Mock).mockImplementation(() => true); const { getByText } = renderComponent(initialState); - const lineaRpcUrl = getByText('https://linea-rpc.publicnode.com'); + const lineaRpcUrl = getByText('linea-rpc.publicnode.com'); const lineaCell = getByText('Linea'); expect(lineaCell).toBeTruthy(); expect(lineaRpcUrl).toBeTruthy(); @@ -572,7 +572,7 @@ describe('Network Selector', () => { it('renders the mainnet cell correctly', () => { (isNetworkUiRedesignEnabled as jest.Mock).mockImplementation(() => true); const { getByText } = renderComponent(initialState); - const mainnetRpcUrl = getByText('https://mainnet-rpc.publicnode.com'); + const mainnetRpcUrl = getByText('mainnet-rpc.publicnode.com'); const mainnetCell = getByText('Ethereum Mainnet'); expect(mainnetCell).toBeTruthy(); expect(mainnetRpcUrl).toBeTruthy(); diff --git a/app/components/Views/NetworkSelector/NetworkSelector.tsx b/app/components/Views/NetworkSelector/NetworkSelector.tsx index a0db393144f..5f243398bf5 100644 --- a/app/components/Views/NetworkSelector/NetworkSelector.tsx +++ b/app/components/Views/NetworkSelector/NetworkSelector.tsx @@ -1,6 +1,7 @@ // Third party dependencies. import { ImageSourcePropType, + KeyboardAvoidingView, Linking, Switch, TouchableOpacity, @@ -12,7 +13,6 @@ import images from 'images/image-icons'; import { useNavigation, useRoute, RouteProp } from '@react-navigation/native'; // External dependencies. -import SheetHeader from '../../../component-library/components/Sheet/SheetHeader'; import Cell, { CellVariant, } from '../../../component-library/components/Cells/Cell'; @@ -27,8 +27,8 @@ import BottomSheet, { import { IconName } from '../../../component-library/components/Icons/Icon'; import { useSelector } from 'react-redux'; import { - selectNetworkConfigurations, selectIsAllNetworks, + selectNetworkConfigurations, } from '../../../selectors/networkController'; import { selectShowTestNetworks } from '../../../selectors/preferencesController'; import Networks, { @@ -93,6 +93,9 @@ import { } from '../../../util/trace'; import { getTraceTags } from '../../../util/sentry/tags'; import { store } from '../../../store'; +import ReusableModal, { ReusableModalRef } from '../../UI/ReusableModal'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import Device from '../../../util/device'; interface infuraNetwork { name: string; @@ -124,9 +127,11 @@ const NetworkSelector = () => { const { trackEvent, createEventBuilder } = useMetrics(); const { colors } = theme; const styles = createStyles(colors); - const sheetRef = useRef(null); + // const sheetRef = useRef(null); + const sheetRef = useRef(null); const showTestNetworks = useSelector(selectShowTestNetworks); - const isAllNetworks = useSelector(selectIsAllNetworks); + const isAllNetwork = useSelector(selectIsAllNetworks); + const safeAreaInsets = useSafeAreaInsets(); const networkConfigurations = useSelector(selectNetworkConfigurations); @@ -147,6 +152,7 @@ const NetworkSelector = () => { networkName: selectedNetworkName, } = useNetworkInfo(origin); + const KEYBOARD_OFFSET = 120; const avatarSize = isNetworkUiRedesignEnabled() ? AvatarSize.Sm : undefined; const modalTitle = isNetworkUiRedesignEnabled() ? 'networks.additional_network_information_title' @@ -179,14 +185,19 @@ const NetworkSelector = () => { const setTokenNetworkFilter = useCallback( (chainId: string) => { + const isPopularNetwork = + chainId === CHAIN_IDS.MAINNET || + chainId === CHAIN_IDS.LINEA_MAINNET || + PopularList.some((network) => network.chainId === chainId); + const { PreferencesController } = Engine.context; - if (!isAllNetworks) { + if (!isAllNetwork && isPopularNetwork) { PreferencesController.setTokenNetworkFilter({ [chainId]: true, }); } }, - [isAllNetworks], + [isAllNetwork], ); const onRpcSelect = useCallback( @@ -279,7 +290,7 @@ const NetworkSelector = () => { } setTokenNetworkFilter(chainId); - sheetRef.current?.onCloseBottomSheet(); + sheetRef.current?.dismissModal(); endTrace({ name: TraceName.SwitchCustomNetwork }); endTrace({ name: TraceName.NetworkSwitch }); trackEvent( @@ -294,6 +305,12 @@ const NetworkSelector = () => { } }; + const showRpcSelector = Object.values(networkConfigurations).some( + (networkConfiguration) => + networkConfiguration.rpcEndpoints && + networkConfiguration.rpcEndpoints.length > 1, + ); + const openRpcModal = useCallback(({ chainId, networkName }) => { setShowMultiRpcSelectModal({ isVisible: true, @@ -403,7 +420,7 @@ const NetworkSelector = () => { }, 1000); } - sheetRef.current?.onCloseBottomSheet(); + sheetRef.current?.dismissModal(); endTrace({ name: TraceName.SwitchBuiltInNetwork }); endTrace({ name: TraceName.NetworkSwitch }); trackEvent( @@ -447,7 +464,6 @@ const NetworkSelector = () => { const renderMainnet = () => { const { name: mainnetName, chainId } = Networks.mainnet; - const rpcEndpoints = networkConfigurations?.[chainId]?.rpcEndpoints; const rpcUrl = networkConfigurations?.[chainId]?.rpcEndpoints?.[ networkConfigurations?.[chainId]?.defaultRpcEndpointIndex @@ -463,7 +479,9 @@ const NetworkSelector = () => { variant={CellVariant.SelectWithMenu} title={name} secondaryText={ - rpcEndpoints?.length > 1 ? hideKeyFromUrl(rpcUrl) : undefined + showRpcSelector + ? hideProtocolFromUrl(hideKeyFromUrl(rpcUrl)) + : undefined } avatarProps={{ variant: AvatarVariant.Network, @@ -513,7 +531,6 @@ const NetworkSelector = () => { const renderLineaMainnet = () => { const { name: lineaMainnetName, chainId } = Networks['linea-mainnet']; const name = networkConfigurations?.[chainId]?.name ?? lineaMainnetName; - const rpcEndpoints = networkConfigurations?.[chainId]?.rpcEndpoints; const rpcUrl = networkConfigurations?.[chainId]?.rpcEndpoints?.[ networkConfigurations?.[chainId]?.defaultRpcEndpointIndex @@ -539,7 +556,9 @@ const NetworkSelector = () => { style={styles.networkCell} buttonIcon={IconName.MoreVertical} secondaryText={ - rpcEndpoints?.length > 1 ? hideKeyFromUrl(rpcUrl) : undefined + showRpcSelector + ? hideProtocolFromUrl(hideKeyFromUrl(rpcUrl)) + : undefined } buttonProps={{ onButtonClick: () => { @@ -620,7 +639,7 @@ const NetworkSelector = () => { style={styles.networkCell} buttonIcon={IconName.MoreVertical} secondaryText={ - rpcEndpoints?.length > 1 + showRpcSelector ? hideProtocolFromUrl(hideKeyFromUrl(rpcUrl)) : undefined } @@ -678,10 +697,10 @@ const NetworkSelector = () => { const networkConfiguration = networkConfigurations[chainId]; + const rpcEndpoints = networkConfiguration?.rpcEndpoints; + const rpcUrl = - networkConfiguration?.rpcEndpoints?.[ - networkConfiguration?.defaultRpcEndpointIndex - ].url; + rpcEndpoints?.[networkConfiguration?.defaultRpcEndpointIndex].url; if (isNetworkUiRedesignEnabled() && isNoSearchResults(name)) return null; @@ -690,7 +709,11 @@ const NetworkSelector = () => { { }; const goToNetworkSettings = () => { - sheetRef.current?.onCloseBottomSheet(() => { + sheetRef.current?.dismissModal(() => { navigate(Routes.ADD_NETWORK, { shouldNetworkSwitchPopToWallet: false, shouldShowPopularNetworks: false, @@ -882,140 +905,146 @@ const NetworkSelector = () => { const renderBottomSheetContent = () => ( <> - - - {isNetworkUiRedesignEnabled() && ( - - - - )} - {isNetworkUiRedesignEnabled() && - searchString.length === 0 && - renderEnabledNetworksTitle()} - {renderMainnet()} - {renderLineaMainnet()} - {renderRpcNetworks()} - {isNetworkUiRedesignEnabled() && - searchString.length === 0 && - renderPopularNetworksTitle()} - {isNetworkUiRedesignEnabled() && renderAdditonalNetworks()} - {searchString.length === 0 && renderTestNetworksSwitch()} - {showTestNetworks && renderOtherNetworks()} - - -