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/CODEOWNERS b/.github/CODEOWNERS index 9576fde1dd0..58ceabd2486 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -23,6 +23,7 @@ app/store/migrations/ @MetaMask/mobile-pla bitrise.yml @MetaMask/mobile-platform yarn.lock @MetaMask/mobile-platform ios/Podfile.lock @MetaMask/mobile-platform +app/components/Views/BrowserTab/BrowserTab.tsx @MetaMask/mobile-platform # Ramps Team app/components/UI/Ramp/ @MetaMask/ramp @@ -76,6 +77,9 @@ patches/react-native+0.*.patch @MetaMask/supply-chain **/snaps/** @MetaMask/snaps-devs **/Snaps/** @MetaMask/snaps-devs +# Wallet API Platform Team + app/core/RPCMethods/ @MetaMask/wallet-api-platform-engineers + # Staking Team app/components/UI/Stake @MetaMask/metamask-staking 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/component-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap b/app/component-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap index 4ab88b6f6bc..2bdc8856035 100644 --- a/app/component-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap +++ b/app/component-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap @@ -113,9 +113,9 @@ exports[`CustomSpendCap should match snapshot 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -249,9 +249,9 @@ exports[`CustomSpendCap should match snapshot 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap index d44a93288b1..39786758805 100644 --- a/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap +++ b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap @@ -177,9 +177,9 @@ exports[`Banner should render correctly with a close button 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -412,9 +412,9 @@ exports[`Banner should render correctly with an action button 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/component-library/components/Banners/Banner/variants/BannerAlert/__snapshots__/BannerAlert.test.tsx.snap b/app/component-library/components/Banners/Banner/variants/BannerAlert/__snapshots__/BannerAlert.test.tsx.snap index 158cd1452b7..e50a3856875 100644 --- a/app/component-library/components/Banners/Banner/variants/BannerAlert/__snapshots__/BannerAlert.test.tsx.snap +++ b/app/component-library/components/Banners/Banner/variants/BannerAlert/__snapshots__/BannerAlert.test.tsx.snap @@ -96,9 +96,9 @@ exports[`BannerAlert should render BannerAlert 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/component-library/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap b/app/component-library/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap index e53f453ee7b..767da37e674 100644 --- a/app/component-library/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap +++ b/app/component-library/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap @@ -106,9 +106,9 @@ exports[`BannerTip should render default settings correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap b/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap index 5d640d9987e..57b01074ef4 100644 --- a/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap +++ b/app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap @@ -41,9 +41,9 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -81,9 +81,9 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } 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`] = ` Click me! @@ -81,7 +81,7 @@ exports[`ButtonBase should render correctly when disabled 1`] = ` "color": "#141618", } } - variant="sBodyMD" + variant="sBodyMDMedium" > Click me! diff --git a/app/component-library/components/Buttons/Button/variants/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap b/app/component-library/components/Buttons/Button/variants/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap index 1c09de8a64e..d636f704af6 100644 --- a/app/component-library/components/Buttons/Button/variants/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap +++ b/app/component-library/components/Buttons/Button/variants/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap @@ -25,9 +25,9 @@ exports[`ButtonLink should render correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/component-library/components/Buttons/Button/variants/ButtonPrimary/__snapshots__/ButtonPrimary.test.tsx.snap b/app/component-library/components/Buttons/Button/variants/ButtonPrimary/__snapshots__/ButtonPrimary.test.tsx.snap index 44b2bd653b5..74f4e35aa52 100644 --- a/app/component-library/components/Buttons/Button/variants/ButtonPrimary/__snapshots__/ButtonPrimary.test.tsx.snap +++ b/app/component-library/components/Buttons/Button/variants/ButtonPrimary/__snapshots__/ButtonPrimary.test.tsx.snap @@ -40,9 +40,9 @@ exports[`ButtonPrimary render matches latest snapshot 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/component-library/components/Buttons/Button/variants/ButtonSecondary/__snapshots__/ButtonSecondary.test.tsx.snap b/app/component-library/components/Buttons/Button/variants/ButtonSecondary/__snapshots__/ButtonSecondary.test.tsx.snap index 5b5db9487c7..d35a16c686b 100644 --- a/app/component-library/components/Buttons/Button/variants/ButtonSecondary/__snapshots__/ButtonSecondary.test.tsx.snap +++ b/app/component-library/components/Buttons/Button/variants/ButtonSecondary/__snapshots__/ButtonSecondary.test.tsx.snap @@ -41,9 +41,9 @@ exports[`ButtonSecondary should render correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/component-library/components/HeaderBase/HeaderBase.styles.ts b/app/component-library/components/HeaderBase/HeaderBase.styles.ts index 0b31674f3e2..fb481958a19 100644 --- a/app/component-library/components/HeaderBase/HeaderBase.styles.ts +++ b/app/component-library/components/HeaderBase/HeaderBase.styles.ts @@ -31,7 +31,6 @@ const styleSheet = (params: { { backgroundColor: theme.colors.background.default, flexDirection: 'row', - alignItems: 'center', } as ViewStyle, style, ) as ViewStyle, diff --git a/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap b/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap index a7b90f3404d..898e43f05c4 100644 --- a/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap +++ b/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap @@ -4,7 +4,6 @@ exports[`HeaderBase should render snapshot correctly 1`] = ` { base: { flexDirection: 'row', alignItems: 'center', - height: Device.isAndroid() ? 62 : 48, + height: TAB_BAR_HEIGHT, paddingHorizontal: 16, marginBottom: bottomInset, backgroundColor: colors.background.default, diff --git a/app/component-library/components/Toast/Toast.tsx b/app/component-library/components/Toast/Toast.tsx index 170b7543897..8c23d38b46d 100644 --- a/app/component-library/components/Toast/Toast.tsx +++ b/app/component-library/components/Toast/Toast.tsx @@ -40,6 +40,7 @@ import { import styles from './Toast.styles'; import { ToastSelectorsIDs } from '../../../../e2e/selectors/wallet/ToastModal.selectors'; import { ButtonProps } from '../Buttons/Button/Button.types'; +import { TAB_BAR_HEIGHT } from '../Navigation/TabBar/TabBar.constants'; const visibilityDuration = 2750; const animationDuration = 250; @@ -53,7 +54,7 @@ const Toast = forwardRef((_, ref: React.ForwardedRef) => { const { bottom: bottomNotchSpacing } = useSafeAreaInsets(); const translateYProgress = useSharedValue(screenHeight); const animatedStyle = useAnimatedStyle(() => ({ - transform: [{ translateY: translateYProgress.value }], + transform: [{ translateY: translateYProgress.value - TAB_BAR_HEIGHT }], })); const baseStyle: StyleProp>> = useMemo( diff --git a/app/components/Approvals/SwitchChainApproval/SwitchChainApproval.test.tsx b/app/components/Approvals/SwitchChainApproval/SwitchChainApproval.test.tsx index 4630f1984cc..1b1483b2dcc 100644 --- a/app/components/Approvals/SwitchChainApproval/SwitchChainApproval.test.tsx +++ b/app/components/Approvals/SwitchChainApproval/SwitchChainApproval.test.tsx @@ -5,13 +5,26 @@ import { ApprovalTypes } from '../../../core/RPCMethods/RPCMethodMiddleware'; import { ApprovalRequest } from '@metamask/approval-controller'; import SwitchChainApproval from './SwitchChainApproval'; import { networkSwitched } from '../../../actions/onboardNetwork'; +// eslint-disable-next-line import/no-namespace +import * as networks from '../../../util/networks'; +import Engine from '../../../core/Engine'; +const { PreferencesController } = Engine.context; jest.mock('../../Views/confirmations/hooks/useApprovalRequest'); jest.mock('../../../actions/onboardNetwork'); +jest.mock('../../../core/Engine', () => ({ + 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/AddCustomToken/__snapshots__/index.test.tsx.snap b/app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap index 4ad291a7d08..d2af139ec0f 100644 --- a/app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap @@ -232,9 +232,9 @@ exports[`AddCustomToken render matches previous snapshot 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } 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 ( = ({ ? (asset.chainId as Hex) : selectedChainId; const ticker = isPortfolioViewEnabled() ? nativeCurrency : selectedTicker; + const selectedNetworkClientId = useSelector(selectSelectedNetworkClientId); let currentAddress: Hex; @@ -136,12 +138,12 @@ const AssetOverview: React.FC = ({ const dispatch = useDispatch(); useEffect(() => { - const { SwapsController: SwapsControllerFromEngine } = Engine.context as { - SwapsController: SwapsController; - }; + const { SwapsController } = Engine.context; const fetchTokenWithCache = async () => { try { - await SwapsControllerFromEngine.fetchTokenWithCache(); + await SwapsController.fetchTokenWithCache({ + networkClientId: selectedNetworkClientId, + }); // TODO: Replace "any" with type // eslint-disable-next-line @typescript-eslint/no-explicit-any } catch (error: any) { @@ -152,7 +154,7 @@ const AssetOverview: React.FC = ({ } }; fetchTokenWithCache(); - }, []); + }, [selectedNetworkClientId]); const onReceive = () => { navigation.navigate(Routes.QR_TAB_SWITCHER, { diff --git a/app/components/UI/BasicFunctionality/BasicFunctionalityModal/__snapshots__/BasicFunctionalityModal.test.js.snap b/app/components/UI/BasicFunctionality/BasicFunctionalityModal/__snapshots__/BasicFunctionalityModal.test.js.snap index 42798823837..f896d299399 100644 --- a/app/components/UI/BasicFunctionality/BasicFunctionalityModal/__snapshots__/BasicFunctionalityModal.test.js.snap +++ b/app/components/UI/BasicFunctionality/BasicFunctionalityModal/__snapshots__/BasicFunctionalityModal.test.js.snap @@ -266,9 +266,9 @@ exports[`BasicFunctionalityModal should render correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -312,9 +312,9 @@ exports[`BasicFunctionalityModal should render correctly 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap b/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap index 0506e53601f..af8283d43f7 100644 --- a/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap +++ b/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap @@ -216,9 +216,9 @@ exports[`CollectibleModal should render correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap b/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap index 6819273801b..7115fb243ce 100644 --- a/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap +++ b/app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap @@ -328,9 +328,9 @@ exports[`ConfirmAddAsset render matches previous snapshot 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -368,9 +368,9 @@ exports[`ConfirmAddAsset render matches previous snapshot 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/EnableAutomaticSecurityChecksModal/__snapshots__/EnableAutomaticSecurityChecksModal.test.tsx.snap b/app/components/UI/EnableAutomaticSecurityChecksModal/__snapshots__/EnableAutomaticSecurityChecksModal.test.tsx.snap index c7e04d7fef6..7b8944b808c 100644 --- a/app/components/UI/EnableAutomaticSecurityChecksModal/__snapshots__/EnableAutomaticSecurityChecksModal.test.tsx.snap +++ b/app/components/UI/EnableAutomaticSecurityChecksModal/__snapshots__/EnableAutomaticSecurityChecksModal.test.tsx.snap @@ -477,9 +477,9 @@ exports[`EnableAutomaticSecurityChecksModal should render correctly 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -514,9 +514,9 @@ exports[`EnableAutomaticSecurityChecksModal should render correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js index 8c8d941b7bb..435f30d5fe3 100644 --- a/app/components/UI/Navbar/index.js +++ b/app/components/UI/Navbar/index.js @@ -63,6 +63,7 @@ import { toChecksumHexAddress } from '@metamask/controller-utils'; ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) import { isBtcAccount } from '../../../core/Multichain/utils'; ///: END:ONLY_INCLUDE_IF +import { withMetaMetrics } from '../Stake/utils/metaMetrics/withMetaMetrics'; const trackEvent = (event, params = {}) => { MetaMetrics.getInstance().trackEvent(event); @@ -1949,16 +1950,23 @@ export const getSettingsNavigationOptions = (title, themeColors) => { * @param {String} title - Navbar Title. * @param {NavigationProp} navigation Navigation object returned from useNavigation hook. * @param {ThemeColors} themeColors theme.colors returned from useStyles hook. - * @param {{ backgroundColor?: string, hasCancelButton?: boolean, hasBackButton?: boolean }} [options] - Optional options for navbar. + * @param {{ backgroundColor?: string, hasCancelButton?: boolean, hasBackButton?: boolean }} [navBarOptions] - Optional navbar options. + * @param {{ cancelButtonEvent?: { event: IMetaMetricsEvent, properties: Record }, backButtonEvent?: { event: IMetaMetricsEvent, properties: Record} }} [metricsOptions] - Optional metrics options. * @returns Staking Navbar Component. */ -export function getStakingNavbar(title, navigation, themeColors, options) { - const { hasBackButton = true, hasCancelButton = true } = options ?? {}; +export function getStakingNavbar( + title, + navigation, + themeColors, + navBarOptions, + metricsOptions, +) { + const { hasBackButton = true, hasCancelButton = true } = navBarOptions ?? {}; const innerStyles = StyleSheet.create({ headerStyle: { backgroundColor: - options?.backgroundColor ?? themeColors.background.default, + navBarOptions?.backgroundColor ?? themeColors.background.default, shadowOffset: null, }, headerLeft: { @@ -1978,6 +1986,28 @@ export function getStakingNavbar(title, navigation, themeColors, options) { navigation.goBack(); } + function handleBackPress() { + if (metricsOptions?.backButtonEvent) { + withMetaMetrics(navigationPop, { + event: metricsOptions.backButtonEvent.event, + properties: metricsOptions.backButtonEvent.properties, + }); + } else { + navigationPop(); + } + } + + function handleCancelPress() { + if (metricsOptions?.cancelButtonEvent) { + withMetaMetrics(navigationPop, { + event: metricsOptions.cancelButtonEvent.event, + properties: metricsOptions.cancelButtonEvent.properties, + }); + } else { + navigationPop(); + } + } + return { headerTitle: () => ( @@ -1990,7 +2020,7 @@ export function getStakingNavbar(title, navigation, themeColors, options) { ) : ( @@ -1999,7 +2029,7 @@ export function getStakingNavbar(title, navigation, themeColors, options) { headerRight: () => hasCancelButton ? ( navigation.dangerouslyGetParent()?.pop()} + onPress={handleCancelPress} style={styles.closeButton} > diff --git a/app/components/UI/NavbarTitle/index.js b/app/components/UI/NavbarTitle/index.js index d1ce5408209..30b05eb77ae 100644 --- a/app/components/UI/NavbarTitle/index.js +++ b/app/components/UI/NavbarTitle/index.js @@ -14,6 +14,7 @@ import { selectProviderConfig } from '../../../selectors/networkController'; import { withMetricsAwareness } from '../../../components/hooks/useMetrics'; import Text, { TextVariant, + TextColor, } from '../../../component-library/components/Texts/Text'; const createStyles = (colors) => @@ -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..39fba53e6c6 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..e1174c3ee36 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`] = ` - @@ -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..bb6a19b863d 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/OrdersList/__snapshots__/OrdersList.test.tsx.snap b/app/components/UI/Ramp/Views/OrdersList/__snapshots__/OrdersList.test.tsx.snap index 66084c40e31..157da15f487 100644 --- a/app/components/UI/Ramp/Views/OrdersList/__snapshots__/OrdersList.test.tsx.snap +++ b/app/components/UI/Ramp/Views/OrdersList/__snapshots__/OrdersList.test.tsx.snap @@ -193,9 +193,9 @@ exports[`OrdersList renders buy only correctly when pressing buy filter 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -231,9 +231,9 @@ exports[`OrdersList renders buy only correctly when pressing buy filter 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -269,9 +269,9 @@ exports[`OrdersList renders buy only correctly when pressing buy filter 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -1069,9 +1069,9 @@ exports[`OrdersList renders correctly 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -1107,9 +1107,9 @@ exports[`OrdersList renders correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -1145,9 +1145,9 @@ exports[`OrdersList renders correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -2044,9 +2044,9 @@ exports[`OrdersList renders empty buy message 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -2082,9 +2082,9 @@ exports[`OrdersList renders empty buy message 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -2120,9 +2120,9 @@ exports[`OrdersList renders empty buy message 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -2293,9 +2293,9 @@ exports[`OrdersList renders empty sell message 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -2331,9 +2331,9 @@ exports[`OrdersList renders empty sell message 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -2369,9 +2369,9 @@ exports[`OrdersList renders empty sell message 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -2568,9 +2568,9 @@ exports[`OrdersList renders sell only correctly when pressing sell filter 1`] = style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -2606,9 +2606,9 @@ exports[`OrdersList renders sell only correctly when pressing sell filter 1`] = style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -2644,9 +2644,9 @@ exports[`OrdersList renders sell only correctly when pressing sell filter 1`] = style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -3002,9 +3002,9 @@ exports[`OrdersList resets filter to all after other filter was set 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -3040,9 +3040,9 @@ exports[`OrdersList resets filter to all after other filter was set 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -3078,9 +3078,9 @@ exports[`OrdersList resets filter to all after other filter was set 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -3500,9 +3500,9 @@ exports[`OrdersList resets filter to all after other filter was set 2`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -3538,9 +3538,9 @@ exports[`OrdersList resets filter to all after other filter was set 2`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -3576,9 +3576,9 @@ exports[`OrdersList resets filter to all after other filter was set 2`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } 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/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap b/app/components/UI/Ramp/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap index 0d6c3a48b2c..8edd595884f 100644 --- a/app/components/UI/Ramp/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap +++ b/app/components/UI/Ramp/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap @@ -631,9 +631,9 @@ exports[`AddActivationKey renders correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -670,9 +670,9 @@ exports[`AddActivationKey renders correctly 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/Ramp/Views/Settings/__snapshots__/Settings.test.tsx.snap b/app/components/UI/Ramp/Views/Settings/__snapshots__/Settings.test.tsx.snap index 32f2c554a75..1e3f8edc2fb 100644 --- a/app/components/UI/Ramp/Views/Settings/__snapshots__/Settings.test.tsx.snap +++ b/app/components/UI/Ramp/Views/Settings/__snapshots__/Settings.test.tsx.snap @@ -551,9 +551,9 @@ exports[`Settings Activation Keys renders correctly when is loading 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -1129,9 +1129,9 @@ exports[`Settings Activation Keys renders correctly when is loading 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -1711,9 +1711,9 @@ exports[`Settings Activation Keys renders correctly when there are no keys 1`] = style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -1847,9 +1847,9 @@ exports[`Settings Activation Keys renders correctly when there are no keys 1`] = style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -2972,9 +2972,9 @@ exports[`Settings Region renders correctly when region is set 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -3553,9 +3553,9 @@ exports[`Settings renders correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -4134,9 +4134,9 @@ exports[`Settings renders correctly for internal builds 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -4708,9 +4708,9 @@ exports[`Settings renders correctly for internal builds 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/ReceiveRequest/__snapshots__/index.test.tsx.snap b/app/components/UI/ReceiveRequest/__snapshots__/index.test.tsx.snap index b2c8df927cf..281e45838f6 100644 --- a/app/components/UI/ReceiveRequest/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/ReceiveRequest/__snapshots__/index.test.tsx.snap @@ -627,9 +627,9 @@ exports[`ReceiveRequest render matches snapshot 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -1374,9 +1374,9 @@ exports[`ReceiveRequest render with different ticker matches snapshot 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -2121,9 +2121,9 @@ exports[`ReceiveRequest render without buy matches snapshot 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/SearchTokenAutocomplete/__snapshots__/index.test.tsx.snap b/app/components/UI/SearchTokenAutocomplete/__snapshots__/index.test.tsx.snap index ea010c44900..1c23219c4e0 100644 --- a/app/components/UI/SearchTokenAutocomplete/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/SearchTokenAutocomplete/__snapshots__/index.test.tsx.snap @@ -484,9 +484,9 @@ exports[`SearchTokenAutocomplete should render correctly 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/SheetActionView/__snapshots__/SheetActionView.test.tsx.snap b/app/components/UI/SheetActionView/__snapshots__/SheetActionView.test.tsx.snap index 40f30e85893..6661cd44052 100644 --- a/app/components/UI/SheetActionView/__snapshots__/SheetActionView.test.tsx.snap +++ b/app/components/UI/SheetActionView/__snapshots__/SheetActionView.test.tsx.snap @@ -38,9 +38,9 @@ exports[`SheetActionView should render correctly 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -76,9 +76,9 @@ exports[`SheetActionView should render correctly 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } 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/Views/StakeConfirmationView/StakeConfirmationView.tsx b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx index 0eb0e2ba8de..8a86705d0e8 100644 --- a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx +++ b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx @@ -13,6 +13,8 @@ import { strings } from '../../../../../../locales/i18n'; import { FooterButtonGroupActions } from '../../components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.types'; import UnstakingTimeCard from '../../components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard'; import { ScrollView } from 'react-native-gesture-handler'; +import { MetaMetricsEvents } from '../../../../hooks/useMetrics'; +import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events'; const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking'; @@ -23,10 +25,24 @@ const StakeConfirmationView = ({ route }: StakeConfirmationViewProps) => { useEffect(() => { navigation.setOptions( - getStakingNavbar(strings('stake.stake'), navigation, theme.colors, { - backgroundColor: theme.colors.background.alternative, - hasCancelButton: false, - }), + getStakingNavbar( + strings('stake.stake'), + navigation, + theme.colors, + { + backgroundColor: theme.colors.background.alternative, + hasCancelButton: false, + }, + { + backButtonEvent: { + event: MetaMetricsEvents.STAKE_CONFIRMATION_BACK_CLICKED, + properties: { + selected_provider: EVENT_PROVIDERS.CONSENSYS, + location: EVENT_LOCATIONS.STAKE_CONFIRMATION_VIEW, + }, + }, + }, + ), ); }, [navigation, theme.colors]); diff --git a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.test.tsx b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.test.tsx index 650343c3958..559c068e427 100644 --- a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.test.tsx +++ b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.test.tsx @@ -246,6 +246,8 @@ describe('StakeInputView', () => { annualRewardRate: '2.5%', annualRewardsETH: '0.00938 ETH', annualRewardsFiat: '18.75 USD', + estimatedGasFee: '0.25', + estimatedGasFeePercentage: '66%', }, }); }); diff --git a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx index ead9d7016c8..3ae652a718b 100644 --- a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx +++ b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx @@ -20,6 +20,8 @@ import useStakingInputHandlers from '../../hooks/useStakingInput'; import InputDisplay from '../../components/InputDisplay'; import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics'; import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics'; +import { formatEther } from 'ethers/lib/utils'; +import { EVENT_PROVIDERS, EVENT_LOCATIONS } from '../../constants/events'; const StakeInputView = () => { const title = strings('stake.stake_eth'); @@ -49,6 +51,8 @@ const StakeInputView = () => { handleMax, balanceValue, isHighGasCostImpact, + getDepositTxGasPercentage, + estimatedGasFeeWei, isLoadingStakingGasFee, } = useStakingInputHandlers(); @@ -60,6 +64,21 @@ const StakeInputView = () => { const handleStakePress = useCallback(() => { if (isHighGasCostImpact()) { + trackEvent( + createEventBuilder( + MetaMetricsEvents.STAKE_GAS_COST_IMPACT_WARNING_TRIGGERED, + ) + .addProperties({ + selected_provider: EVENT_PROVIDERS.CONSENSYS, + location: EVENT_LOCATIONS.STAKE_INPUT_VIEW, + tokens_to_stake_native_value: amountEth, + tokens_to_stake_usd_value: fiatAmount, + estimated_gas_fee: formatEther(estimatedGasFeeWei.toString()), + estimated_gas_percentage_of_deposit: `${getDepositTxGasPercentage()}%`, + }) + .build(), + ); + navigation.navigate('StakeModals', { screen: Routes.STAKING.MODALS.GAS_IMPACT, params: { @@ -68,6 +87,8 @@ const StakeInputView = () => { annualRewardsETH, annualRewardsFiat, annualRewardRate, + estimatedGasFee: formatEther(estimatedGasFeeWei.toString()), + estimatedGasFeePercentage: `${getDepositTxGasPercentage()}%`, }, }); return; @@ -86,7 +107,7 @@ const StakeInputView = () => { trackEvent( createEventBuilder(MetaMetricsEvents.REVIEW_STAKE_BUTTON_CLICKED) .addProperties({ - selected_provider: 'consensys', + selected_provider: EVENT_PROVIDERS.CONSENSYS, tokens_to_stake_native_value: amountEth, tokens_to_stake_usd_value: fiatAmount, }) @@ -103,6 +124,8 @@ const StakeInputView = () => { trackEvent, createEventBuilder, amountEth, + estimatedGasFeeWei, + getDepositTxGasPercentage, ]); const handleMaxButtonPress = () => { @@ -124,9 +147,23 @@ const StakeInputView = () => { useEffect(() => { navigation.setOptions( - getStakingNavbar(title, navigation, theme.colors, { - hasBackButton: false, - }), + getStakingNavbar( + title, + navigation, + theme.colors, + { + hasBackButton: false, + }, + { + cancelButtonEvent: { + event: MetaMetricsEvents.STAKE_CANCEL_CLICKED, + properties: { + selected_provider: EVENT_PROVIDERS.CONSENSYS, + location: EVENT_LOCATIONS.STAKE_INPUT_VIEW, + }, + }, + }, + ), ); }, [navigation, theme.colors, title]); @@ -148,9 +185,9 @@ const StakeInputView = () => { handleCurrencySwitch={withMetaMetrics(handleCurrencySwitch, { event: MetaMetricsEvents.STAKE_INPUT_CURRENCY_SWITCH_CLICKED, properties: { - selected_provider: 'consensys', + selected_provider: EVENT_PROVIDERS.CONSENSYS, text: 'Currency Switch Trigger', - location: 'Stake Input View', + location: EVENT_LOCATIONS.STAKE_INPUT_VIEW, // We want to track the currency switching to. Not the current currency. currency_type: isEth ? 'fiat' : 'native', }, @@ -163,9 +200,9 @@ const StakeInputView = () => { onIconPress={withMetaMetrics(navigateToLearnMoreModal, { event: MetaMetricsEvents.TOOLTIP_OPENED, properties: { - selected_provider: 'consensys', + selected_provider: EVENT_PROVIDERS.CONSENSYS, text: 'Tooltip Opened', - location: 'Stake Input View', + location: EVENT_LOCATIONS.STAKE_INPUT_VIEW, tooltip_name: 'MetaMask Pool Estimated Rewards', }, })} @@ -178,7 +215,7 @@ const StakeInputView = () => { withMetaMetrics(handleQuickAmountPress, { event: MetaMetricsEvents.STAKE_INPUT_QUICK_AMOUNT_CLICKED, properties: { - location: 'StakeInputView', + location: EVENT_LOCATIONS.STAKE_INPUT_VIEW, amount: value, // onMaxPress is called instead when it's defined and the max is clicked. is_max: false, @@ -189,7 +226,7 @@ const StakeInputView = () => { onMaxPress={withMetaMetrics(handleMaxButtonPress, { event: MetaMetricsEvents.STAKE_INPUT_QUICK_AMOUNT_CLICKED, properties: { - location: 'StakeInputView', + location: EVENT_LOCATIONS.STAKE_INPUT_VIEW, is_max: true, mode: isEth ? 'native' : 'fiat', }, diff --git a/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap b/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap index fb47e1bf1c1..b4e933be952 100644 --- a/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap +++ b/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap @@ -1629,9 +1629,9 @@ exports[`StakeInputView render matches snapshot 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.tsx b/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.tsx index 1a78eab35e5..4c3a94084a3 100644 --- a/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.tsx +++ b/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.tsx @@ -11,6 +11,8 @@ import TokenValueStack from '../../components/StakingConfirmation/TokenValueStac import AccountCard from '../../components/StakingConfirmation/AccountCard/AccountCard'; import ConfirmationFooter from '../../components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter'; import { FooterButtonGroupActions } from '../../components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.types'; +import { MetaMetricsEvents } from '../../../../hooks/useMetrics'; +import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events'; const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking'; @@ -21,10 +23,24 @@ const UnstakeConfirmationView = ({ route }: UnstakeConfirmationViewProps) => { useEffect(() => { navigation.setOptions( - getStakingNavbar(strings('stake.unstake'), navigation, theme.colors, { - backgroundColor: theme.colors.background.alternative, - hasCancelButton: false, - }), + getStakingNavbar( + strings('stake.unstake'), + navigation, + theme.colors, + { + backgroundColor: theme.colors.background.alternative, + hasCancelButton: false, + }, + { + backButtonEvent: { + event: MetaMetricsEvents.UNSTAKE_CONFIRMATION_BACK_CLICKED, + properties: { + selected_provider: EVENT_PROVIDERS.CONSENSYS, + location: EVENT_LOCATIONS.UNSTAKE_CONFIRMATION_VIEW, + }, + }, + }, + ), ); }, [navigation, theme.colors]); diff --git a/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx b/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx index b27bbbe07e0..1786301fb0e 100644 --- a/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx +++ b/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx @@ -20,6 +20,7 @@ import Routes from '../../../../../constants/navigation/Routes'; import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics'; import useUnstakingInputHandlers from '../../hooks/useUnstakingInput'; import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics'; +import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events'; const UnstakeInputView = () => { const title = strings('stake.unstake_eth'); @@ -54,9 +55,23 @@ const UnstakeInputView = () => { useEffect(() => { navigation.setOptions( - getStakingNavbar(title, navigation, theme.colors, { - hasBackButton: false, - }), + getStakingNavbar( + title, + navigation, + theme.colors, + { + hasBackButton: false, + }, + { + cancelButtonEvent: { + event: MetaMetricsEvents.UNSTAKE_CANCEL_CLICKED, + properties: { + selected_provider: EVENT_PROVIDERS.CONSENSYS, + location: EVENT_LOCATIONS.UNSTAKE_INPUT_VIEW, + }, + }, + }, + ), ); }, [navigation, theme.colors, title]); @@ -71,7 +86,7 @@ const UnstakeInputView = () => { trackEvent( createEventBuilder(MetaMetricsEvents.REVIEW_UNSTAKE_BUTTON_CLICKED) .addProperties({ - selected_provider: 'consensys', + selected_provider: EVENT_PROVIDERS.CONSENSYS, tokens_to_stake_native_value: amountEth, tokens_to_stake_usd_value: fiatAmount, }) @@ -100,9 +115,9 @@ const UnstakeInputView = () => { handleCurrencySwitch={withMetaMetrics(handleCurrencySwitch, { event: MetaMetricsEvents.UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED, properties: { - selected_provider: 'consensys', + selected_provider: EVENT_PROVIDERS.CONSENSYS, text: 'Currency Switch Trigger', - location: 'Unstake Input View', + location: EVENT_LOCATIONS.UNSTAKE_INPUT_VIEW, // We want to track the currency switching to. Not the current currency. currency_type: isEth ? 'fiat' : 'native', }, @@ -116,7 +131,7 @@ const UnstakeInputView = () => { withMetaMetrics(handleQuickAmountPress, { event: MetaMetricsEvents.UNSTAKE_INPUT_QUICK_AMOUNT_CLICKED, properties: { - location: 'UnstakeInputView', + location: EVENT_LOCATIONS.UNSTAKE_INPUT_VIEW, amount: value, is_max: value === 1, mode: isEth ? 'native' : 'fiat', diff --git a/app/components/UI/Stake/Views/UnstakeInputView/__snapshots__/UnstakeInputView.test.tsx.snap b/app/components/UI/Stake/Views/UnstakeInputView/__snapshots__/UnstakeInputView.test.tsx.snap index 5235c2f45c8..1d62ee385fe 100644 --- a/app/components/UI/Stake/Views/UnstakeInputView/__snapshots__/UnstakeInputView.test.tsx.snap +++ b/app/components/UI/Stake/Views/UnstakeInputView/__snapshots__/UnstakeInputView.test.tsx.snap @@ -1573,9 +1573,9 @@ exports[`UnstakeInputView render matches snapshot 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.test.tsx b/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.test.tsx index 7018981373c..f6eca2e2f22 100644 --- a/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.test.tsx +++ b/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.test.tsx @@ -29,6 +29,8 @@ const props: GasImpactModalProps = { annualRewardRate: '2.5%', annualRewardsETH: '2.5 ETH', annualRewardsFiat: '$5000', + estimatedGasFee: '0.009171428571428572', + estimatedGasFeePercentage: '35%', }, name: 'params', }, diff --git a/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.types.ts b/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.types.ts index a00204cfbee..7a1d9441615 100644 --- a/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.types.ts +++ b/app/components/UI/Stake/components/GasImpactModal/GasImpactModal.types.ts @@ -6,6 +6,8 @@ interface GasImpactModalRouteParams { annualRewardsETH: string; annualRewardsFiat: string; annualRewardRate: string; + estimatedGasFee: string; + estimatedGasFeePercentage: string; } export interface GasImpactModalProps { 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`] = ` { const { styles } = useStyles(styleSheet, {}); const { navigate } = useNavigation(); + const { trackEvent, createEventBuilder } = useMetrics(); + const sheetRef = useRef(null); + const { + amountWei, + annualRewardRate, + annualRewardsFiat, + annualRewardsETH, + amountFiat, + estimatedGasFee, + estimatedGasFeePercentage, + } = route.params; + + const metricsEvent = useCallback( + ( + eventName: + | typeof MetaMetricsEvents.STAKE_GAS_COST_IMPACT_CANCEL_CLICKED + | typeof MetaMetricsEvents.STAKE_GAS_COST_IMPACT_PROCEEDED_CLICKED, + ) => { + trackEvent( + createEventBuilder(eventName) + .addProperties({ + selected_provider: EVENT_PROVIDERS.CONSENSYS, + location: EVENT_LOCATIONS.GAS_IMPACT_MODAL, + tokens_to_stake_native_value: formatEther(amountWei), + tokens_to_stake_usd_value: amountFiat, + estimated_gas_fee: estimatedGasFee, + estimated_gas_percentage_of_deposit: estimatedGasFeePercentage, + }) + .build(), + ); + }, + [ + amountFiat, + amountWei, + createEventBuilder, + estimatedGasFee, + estimatedGasFeePercentage, + trackEvent, + ], + ); + const handleClose = () => { + metricsEvent(MetaMetricsEvents.STAKE_GAS_COST_IMPACT_CANCEL_CLICKED); sheetRef.current?.onCloseBottomSheet(); }; const handleNavigateToStakeReviewScreen = () => { - const { - amountWei, - annualRewardRate, - annualRewardsFiat, - annualRewardsETH, - amountFiat, - } = route.params; - + metricsEvent(MetaMetricsEvents.STAKE_GAS_COST_IMPACT_PROCEEDED_CLICKED); navigate('StakeScreens', { screen: Routes.STAKING.STAKE_CONFIRMATION, params: { diff --git a/app/components/UI/Stake/components/LearnMoreModal/__snapshots__/LearnMoreModal.test.tsx.snap b/app/components/UI/Stake/components/LearnMoreModal/__snapshots__/LearnMoreModal.test.tsx.snap index 4d38fcb293a..0a7dc9ddf69 100644 --- a/app/components/UI/Stake/components/LearnMoreModal/__snapshots__/LearnMoreModal.test.tsx.snap +++ b/app/components/UI/Stake/components/LearnMoreModal/__snapshots__/LearnMoreModal.test.tsx.snap @@ -653,9 +653,9 @@ exports[`LearnMoreModal render matches snapshot 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } @@ -697,9 +697,9 @@ exports[`LearnMoreModal render matches snapshot 1`] = ` style={ { "color": "#ffffff", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/Stake/components/LearnMoreModal/index.tsx b/app/components/UI/Stake/components/LearnMoreModal/index.tsx index eb321f8d238..5d6d4b6677d 100644 --- a/app/components/UI/Stake/components/LearnMoreModal/index.tsx +++ b/app/components/UI/Stake/components/LearnMoreModal/index.tsx @@ -19,6 +19,7 @@ import { POOLED_STAKING_FAQ_URL } from '../../constants'; import createLearnMoreModalStyles from './LearnMoreModal.styles'; import { MetaMetricsEvents } from '../../../../hooks/useMetrics'; import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics'; +import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events'; const styles = createLearnMoreModalStyles(); @@ -99,9 +100,9 @@ const LearnMoreModal = () => { onPress={withMetaMetrics(handleLearnMoreBrowserRedirect, { event: MetaMetricsEvents.STAKE_LEARN_MORE_CLICKED, properties: { - selected_provider: 'consensys', + selected_provider: EVENT_PROVIDERS.CONSENSYS, text: 'Learn More', - location: 'Learn More Modal', + location: EVENT_LOCATIONS.LEARN_MORE_MODAL, }, })} label={strings('stake.learn_more')} diff --git a/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap b/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap index c3aa8b2abf5..763f17ac839 100644 --- a/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap +++ b/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap @@ -426,7 +426,6 @@ exports[`MaxInputModal render matches snapshot 1`] = ` { createEventBuilder(MetaMetricsEvents.STAKE_BUTTON_CLICKED) .addProperties({ chain_id: getDecimalChainId(chainId), - location: 'Home Screen', + location: EVENT_LOCATIONS.HOME_SCREEN, text: 'Stake', token_symbol: asset.symbol, url: AppConstants.STAKE.URL, diff --git a/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx b/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx index 1d41646bc3c..ce12aec48e7 100644 --- a/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx +++ b/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import Badge, { BadgeVariant, } from '../../../../../component-library/components/Badges/Badge'; @@ -44,6 +44,8 @@ import useBalance from '../../hooks/useBalance'; import { NetworkBadgeSource } from '../../../AssetOverview/Balance/Balance'; import { selectChainId } from '../../../../../selectors/networkController'; import SkeletonPlaceholder from 'react-native-skeleton-placeholder'; +import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics'; +import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events'; export interface StakingBalanceProps { asset: TokenI; @@ -51,6 +53,12 @@ export interface StakingBalanceProps { const StakingBalanceContent = ({ asset }: StakingBalanceProps) => { const { styles } = useStyles(styleSheet, {}); + + const [ + hasSentViewingStakingRewardsMetric, + setHasSentViewingStakingRewardsMetric, + ] = useState(false); + const chainId = useSelector(selectChainId); const networkName = useSelector(selectNetworkName); @@ -58,6 +66,8 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => { const { isStakingSupportedChain } = useStakingChain(); + const { trackEvent, createEventBuilder } = useMetrics(); + const { pooledStakesData, exchangeRate, @@ -92,6 +102,28 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => { const hasClaimableEth = !!Number(claimableEth); + useEffect(() => { + if (hasStakedPositions && !hasSentViewingStakingRewardsMetric) { + trackEvent( + createEventBuilder( + MetaMetricsEvents.VISITED_ETH_OVERVIEW_WITH_STAKED_POSITIONS, + ) + .addProperties({ + selected_provider: EVENT_PROVIDERS.CONSENSYS, + location: EVENT_LOCATIONS.STAKING_BALANCE, + }) + .build(), + ); + + setHasSentViewingStakingRewardsMetric(true); + } + }, [ + createEventBuilder, + hasSentViewingStakingRewardsMetric, + hasStakedPositions, + trackEvent, + ]); + if (!isStakingSupportedChain) { return <>; } diff --git a/app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.tsx b/app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.tsx index 3a13ee588ca..e99f93880c0 100644 --- a/app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.tsx +++ b/app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.tsx @@ -23,6 +23,7 @@ import { MetaMetricsEvents, useMetrics, } from '../../../../../../hooks/useMetrics'; +import { EVENT_LOCATIONS } from '../../../../constants/events'; type StakeBannerProps = Pick & { claimableAmount: string; @@ -48,7 +49,7 @@ const ClaimBanner = ({ claimableAmount, style }: StakeBannerProps) => { trackEvent( createEventBuilder(MetaMetricsEvents.STAKE_CLAIM_BUTTON_CLICKED) .addProperties({ - location: 'Token Details', + location: EVENT_LOCATIONS.TOKEN_DETAILS, }) .build(), ); diff --git a/app/components/UI/Stake/components/StakingBalance/StakingButtons/StakingButtons.tsx b/app/components/UI/Stake/components/StakingBalance/StakingButtons/StakingButtons.tsx index e6245f6506a..a87ea82fc06 100644 --- a/app/components/UI/Stake/components/StakingBalance/StakingButtons/StakingButtons.tsx +++ b/app/components/UI/Stake/components/StakingBalance/StakingButtons/StakingButtons.tsx @@ -11,6 +11,7 @@ import Routes from '../../../../../../constants/navigation/Routes'; import { useMetrics, MetaMetricsEvents } from '../../../../../hooks/useMetrics'; import { useSelector } from 'react-redux'; import { selectChainId } from '../../../../../../selectors/networkController'; +import { EVENT_LOCATIONS } from '../../../constants/events'; interface StakingButtonsProps extends Pick { hasStakedPositions: boolean; @@ -34,7 +35,7 @@ const StakingButtons = ({ trackEvent( createEventBuilder(MetaMetricsEvents.STAKE_WITHDRAW_BUTTON_CLICKED) .addProperties({ - location: 'Token Details', + location: EVENT_LOCATIONS.TOKEN_DETAILS, text: 'Unstake', token_symbol: 'ETH', chain_id: chainId, @@ -48,7 +49,7 @@ const StakingButtons = ({ trackEvent( createEventBuilder(MetaMetricsEvents.STAKE_BUTTON_CLICKED) .addProperties({ - location: 'Token Details', + location: EVENT_LOCATIONS.TOKEN_DETAILS, text: 'Stake', token_symbol: 'ETH', chain_id: chainId, diff --git a/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx b/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx index a6e2f4efca0..d292873ef5e 100644 --- a/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx +++ b/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx @@ -13,6 +13,7 @@ import { strings } from '../../../../../../../locales/i18n'; import { useNavigation } from '@react-navigation/native'; import Routes from '../../../../../../constants/navigation/Routes'; import { MetaMetricsEvents, useMetrics } from '../../../../../hooks/useMetrics'; +import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../../constants/events'; interface StakingCtaProps extends Pick { estimatedRewardRate: string; @@ -30,9 +31,9 @@ const StakingCta = ({ estimatedRewardRate, style }: StakingCtaProps) => { trackEvent( createEventBuilder(MetaMetricsEvents.STAKE_LEARN_MORE_CLICKED) .addProperties({ - selected_provider: 'consensys', + selected_provider: EVENT_PROVIDERS.CONSENSYS, text: 'Learn More', - location: 'Token Details', + location: EVENT_LOCATIONS.TOKEN_DETAILS, }) .build(), ); diff --git a/app/components/UI/Stake/components/StakingBalance/StakingCta/__snapshots__/StakingCta.test.tsx.snap b/app/components/UI/Stake/components/StakingBalance/StakingCta/__snapshots__/StakingCta.test.tsx.snap index 3d013662beb..7c98e55808b 100644 --- a/app/components/UI/Stake/components/StakingBalance/StakingCta/__snapshots__/StakingCta.test.tsx.snap +++ b/app/components/UI/Stake/components/StakingBalance/StakingCta/__snapshots__/StakingCta.test.tsx.snap @@ -98,9 +98,9 @@ exports[`StakingCta render matches snapshot 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", + "fontFamily": "EuclidCircularB-Medium", "fontSize": 14, - "fontWeight": "400", + "fontWeight": "500", "letterSpacing": 0, "lineHeight": 22, } diff --git a/app/components/UI/Stake/components/StakingBalance/__snapshots__/StakingBalance.test.tsx.snap b/app/components/UI/Stake/components/StakingBalance/__snapshots__/StakingBalance.test.tsx.snap index 61fe94e4e3f..12d5815c0fb 100644 --- a/app/components/UI/Stake/components/StakingBalance/__snapshots__/StakingBalance.test.tsx.snap +++ b/app/components/UI/Stake/components/StakingBalance/__snapshots__/StakingBalance.test.tsx.snap @@ -413,477 +413,9 @@ exports[`StakingBalance render matches snapshot 1`] = ` style={ { "color": "#0376c9", - "fontFamily": "EuclidCircularB-Regular", - "fontSize": 14, - "fontWeight": "400", - "letterSpacing": 0, - "lineHeight": 22, - } - } - > - Unstake - - - - - Stake more - - - - - -`; - -exports[`StakingBalance should match the snapshot when portfolio view is enabled 1`] = ` - - - - - - - - - - - - - - - - - - - - - Staked Ethereum - - - - - - - - - - - Unstaking 0.0010 ETH in progress. Come back in a few days to claim it. - - - - - - - - - - You can claim 0.00214 ETH. Once claimed, you'll get ETH back in your wallet. - - - - Claim - ETH - - - - - - - +> = { + STAKE: { + APPROVED: MetaMetricsEvents.STAKE_TRANSACTION_APPROVED, + REJECTED: MetaMetricsEvents.STAKE_TRANSACTION_REJECTED, + CONFIRMED: MetaMetricsEvents.STAKE_TRANSACTION_CONFIRMED, + FAILED: MetaMetricsEvents.STAKE_TRANSACTION_FAILED, + SUBMITTED: MetaMetricsEvents.STAKE_TRANSACTION_SUBMITTED, + }, + UNSTAKE: { + APPROVED: MetaMetricsEvents.UNSTAKE_TRANSACTION_APPROVED, + REJECTED: MetaMetricsEvents.UNSTAKE_TRANSACTION_REJECTED, + CONFIRMED: MetaMetricsEvents.UNSTAKE_TRANSACTION_CONFIRMED, + FAILED: MetaMetricsEvents.UNSTAKE_TRANSACTION_FAILED, + SUBMITTED: MetaMetricsEvents.UNSTAKE_TRANSACTION_SUBMITTED, + }, +}; const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => { const { styles } = useStyles(styleSheet, {}); @@ -31,6 +61,8 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => { const navigation = useNavigation(); const { navigate } = navigation; + const { trackEvent, createEventBuilder } = useMetrics(); + const activeAccount = useSelector(selectSelectedInternalAccount); const { attemptDepositTransaction } = usePoolStakedDeposit(); @@ -40,13 +72,49 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => { const [didSubmitTransaction, setDidSubmitTransaction] = useState(false); + const isStaking = useMemo( + () => action === FooterButtonGroupActions.STAKE, + [action], + ); + + const submitTxMetaMetric = useCallback( + (txEventName: IMetaMetricsEvent) => { + const { STAKE_CONFIRMATION_VIEW, UNSTAKE_CONFIRMATION_VIEW } = + EVENT_LOCATIONS; + + const location = isStaking + ? STAKE_CONFIRMATION_VIEW + : UNSTAKE_CONFIRMATION_VIEW; + + return trackEvent( + createEventBuilder(txEventName) + .addProperties({ + selected_provider: EVENT_PROVIDERS.CONSENSYS, + location, + transaction_amount_eth: formatEther(valueWei), + }) + .build(), + ); + }, + [createEventBuilder, isStaking, trackEvent, valueWei], + ); + const listenForTransactionEvents = useCallback( (transactionId?: string) => { if (!transactionId) return; + Engine.controllerMessenger.subscribeOnceIf( + 'TransactionController:transactionApproved', + () => { + submitTxMetaMetric(STAKING_TX_METRIC_EVENTS[action].APPROVED); + }, + ({ transactionMeta }) => transactionMeta.id === transactionId, + ); + Engine.controllerMessenger.subscribeOnceIf( 'TransactionController:transactionSubmitted', () => { + submitTxMetaMetric(STAKING_TX_METRIC_EVENTS[action].SUBMITTED); setDidSubmitTransaction(false); navigate(Routes.TRANSACTIONS_VIEW); }, @@ -56,6 +124,7 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => { Engine.controllerMessenger.subscribeOnceIf( 'TransactionController:transactionFailed', () => { + submitTxMetaMetric(STAKING_TX_METRIC_EVENTS[action].FAILED); setDidSubmitTransaction(false); }, ({ transactionMeta }) => transactionMeta.id === transactionId, @@ -64,6 +133,7 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => { Engine.controllerMessenger.subscribeOnceIf( 'TransactionController:transactionRejected', () => { + submitTxMetaMetric(STAKING_TX_METRIC_EVENTS[action].REJECTED); setDidSubmitTransaction(false); }, ({ transactionMeta }) => transactionMeta.id === transactionId, @@ -72,12 +142,13 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => { Engine.controllerMessenger.subscribeOnceIf( 'TransactionController:transactionConfirmed', () => { + submitTxMetaMetric(STAKING_TX_METRIC_EVENTS[action].CONFIRMED); refreshPooledStakes(); }, (transactionMeta) => transactionMeta.id === transactionId, ); }, - [navigate, refreshPooledStakes], + [action, navigate, refreshPooledStakes, submitTxMetaMetric], ); const handleConfirmation = async () => { @@ -86,17 +157,36 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => { setDidSubmitTransaction(true); + const metricsEvent = { + name: isStaking + ? MetaMetricsEvents.STAKE_TRANSACTION_INITIATED + : MetaMetricsEvents.UNSTAKE_TRANSACTION_INITIATED, + location: isStaking + ? 'StakeConfirmationView' + : 'UnstakeConfirmationView', + }; + + trackEvent( + createEventBuilder(metricsEvent.name) + .addProperties({ + selected_provider: EVENT_PROVIDERS.CONSENSYS, + location: metricsEvent.location, + transaction_amount_eth: formatEther(valueWei), + }) + .build(), + ); + let transactionId: string | undefined; - if (action === FooterButtonGroupActions.STAKE) { + if (isStaking) { const txRes = await attemptDepositTransaction( valueWei, activeAccount.address, ); transactionId = txRes?.transactionMeta?.id; } - - if (action === FooterButtonGroupActions.UNSTAKE) { + // Unstaking + else { const txRes = await attemptUnstakeTransaction( valueWei, activeAccount.address, @@ -110,6 +200,26 @@ const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => { } }; + const handleCancelPress = () => { + const metricsEvent = { + name: isStaking + ? MetaMetricsEvents.STAKE_CANCEL_CLICKED + : MetaMetricsEvents.UNSTAKE_CANCEL_CLICKED, + location: isStaking ? 'StakeConfirmationView' : 'UnstakeConfirmationView', + }; + + trackEvent( + createEventBuilder(metricsEvent.name) + .addProperties({ + selected_provider: EVENT_PROVIDERS.CONSENSYS, + location: metricsEvent.location, + }) + .build(), + ); + + navigation.goBack(); + }; + return (