feat(card): cp-7.58.0 add card experimental deeplink

app/components/Nav/App/App.tsx

@@ -71,6 +71,7 @@ import WalletActions from '../../Views/WalletActions';
 import FundActionMenu from '../../UI/FundActionMenu';
 import NetworkSelector from '../../../components/Views/NetworkSelector';
 import ReturnToAppNotification from '../../Views/ReturnToAppNotification';
+import CardNotification from '../../Views/CardNotification';
 import EditAccountName from '../../Views/EditAccountName/EditAccountName';
 import LegacyEditMultichainAccountName from '../../Views/MultichainAccounts/sheets/EditAccountName';
 import { EditMultichainAccountName } from '../../Views/MultichainAccounts/sheets/EditMultichainAccountName';
@@ -568,6 +569,10 @@ const RootModalFlow = (props: RootModalFlowProps) => (
       component={ReturnToAppNotification}
       initialParams={{ ...props.route.params }}
     />
+    <Stack.Screen
+      name={Routes.CARD.NOTIFICATION}
+      component={CardNotification}
+    />
   </Stack.Navigator>
 );
 

app/components/Views/CardNotification/CardNotification.tsx

@@ -0,0 +1,41 @@
+import React, { useContext, useEffect, useRef } from 'react';
+import { ToastContext } from '../../../component-library/components/Toast';
+import { ToastVariants } from '../../../component-library/components/Toast/Toast.types';
+import { useNavigation } from '@react-navigation/native';
+import { IconName } from '../../../component-library/components/Icons/Icon';
+import { strings } from '../../../../locales/i18n';
+
+/**
+ * Fake modal that displays a toast for card-related deeplinks.
+ * Similar to ReturnToAppNotification but for card feature.
+ *
+ * This component is used to trigger toasts from non-React contexts (like deeplink handlers)
+ * by navigating to this route with toast parameters, then immediately going back.
+ */
+const CardNotification = () => {
+  const navigation = useNavigation();
+  const { toastRef } = useContext(ToastContext);
+  const hasExecuted = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (toastRef && toastRef.current !== null && !hasExecuted.current) {
+      hasExecuted.current = true;
+
+      toastRef.current.showToast({
+        variant: ToastVariants.Icon,
+        labelOptions: [
+          { label: strings('card.card_home.card_button_enabled_toast') },
+        ],
+        hasNoTimeout: false,
+        iconName: IconName.Info,
+      });
+
+      // Hide the fake modal
+      navigation?.goBack();
+    }
+  }, [toastRef, navigation]);
+
+  return <></>;
+};
+
+export default CardNotification;

app/components/Views/CardNotification/index.tsx

@@ -0,0 +1 @@
+export { default } from './CardNotification';

app/constants/deeplinks.ts

@@ -13,6 +13,7 @@ export enum PROTOCOLS {
 }
 
 export enum ACTIONS {
+  ENABLE_CARD_BUTTON = 'enable-card-button',
   DAPP = 'dapp',
   SEND = 'send',
   APPROVE = 'approve',
@@ -62,5 +63,6 @@ export const PREFIXES = {
   [ACTIONS.PERPS_ASSET]: '',
   [ACTIONS.REWARDS]: '',
   [ACTIONS.ONBOARDING]: '',
+  [ACTIONS.ENABLE_CARD_BUTTON]: '',
   METAMASK: 'metamask://',
 };

app/constants/navigation/Routes.ts

@@ -353,6 +353,7 @@ const Routes = {
     HOME: 'CardHome',
     WELCOME: 'CardWelcome',
     AUTHENTICATION: 'CardAuthentication',
+    NOTIFICATION: 'CardNotification',
     ONBOARDING: {
       ROOT: 'CardOnboarding',
       SIGN_UP: 'CardOnboardingSignUp',

app/core/DeeplinkManager/DeeplinkManager.ts

@@ -25,6 +25,7 @@ import SharedDeeplinkManager from './SharedDeeplinkManager';
 import FCMService from '../../util/notifications/services/FCMService';
 import { handleRewardsUrl } from './Handlers/handleRewardsUrl';
 import handleFastOnboarding from './Handlers/handleFastOnboarding';
+import { handleEnableCardButton } from './Handlers/handleEnableCardButton';
 
 class DeeplinkManager {
   // TODO: Replace "any" with type
@@ -146,6 +147,10 @@ class DeeplinkManager {
     handleFastOnboarding({ onboardingPath });
   }
 
+  _handleEnableCardButton() {
+    handleEnableCardButton();
+  }
+
   async parse(
     url: string,
     {

app/core/DeeplinkManager/Handlers/handleEnableCardButton.test.ts

@@ -0,0 +1,133 @@
+import { handleEnableCardButton } from './handleEnableCardButton';
+import { store } from '../../../store';
+import { setAlwaysShowCardButton } from '../../../core/redux/slices/card';
+import { selectCardExperimentalSwitch } from '../../../selectors/featureFlagController/card';
+import DevLogger from '../../SDKConnect/utils/DevLogger';
+import Logger from '../../../util/Logger';
+
+jest.mock('../../../store');
+jest.mock('../../../core/redux/slices/card');
+jest.mock('../../../selectors/featureFlagController/card');
+jest.mock('../../SDKConnect/utils/DevLogger');
+jest.mock('../../../util/Logger');
+
+describe('handleEnableCardButton', () => {
+  const mockGetState = jest.fn();
+  const mockDispatch = jest.fn();
+  const mockDevLogger = DevLogger.log as jest.Mock;
+  const mockLogger = Logger.log as jest.Mock;
+  const mockLoggerError = Logger.error as jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (store.getState as jest.Mock) = mockGetState;
+    (store.dispatch as jest.Mock) = mockDispatch;
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('when card experimental switch is enabled', () => {
+    beforeEach(() => {
+      (selectCardExperimentalSwitch as unknown as jest.Mock).mockReturnValue(
+        true,
+      );
+      mockGetState.mockReturnValue({});
+    });
+
+    it('dispatches setAlwaysShowCardButton with true', () => {
+      handleEnableCardButton();
+
+      expect(mockDispatch).toHaveBeenCalledWith(setAlwaysShowCardButton(true));
+    });
+
+    it('logs successful enablement', () => {
+      handleEnableCardButton();
+
+      expect(mockDevLogger).toHaveBeenCalledWith(
+        '[handleEnableCardButton] Successfully enabled card button',
+      );
+      expect(mockLogger).toHaveBeenCalledWith(
+        '[handleEnableCardButton] Card button enabled via deeplink',
+      );
+    });
+
+    it('logs starting message', () => {
+      handleEnableCardButton();
+
+      expect(mockDevLogger).toHaveBeenCalledWith(
+        '[handleEnableCardButton] Starting card button enable deeplink handling',
+      );
+    });
+  });
+
+  describe('when card experimental switch is disabled', () => {
+    beforeEach(() => {
+      (selectCardExperimentalSwitch as unknown as jest.Mock).mockReturnValue(
+        false,
+      );
+      mockGetState.mockReturnValue({});
+    });
+
+    it('does not dispatch setAlwaysShowCardButton', () => {
+      handleEnableCardButton();
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('logs that feature flag is disabled', () => {
+      handleEnableCardButton();
+
+      expect(mockDevLogger).toHaveBeenCalledWith(
+        '[handleEnableCardButton] Card experimental switch is disabled, skipping',
+      );
+      expect(mockLogger).toHaveBeenCalledWith(
+        '[handleEnableCardButton] Card experimental switch feature flag is disabled',
+      );
+    });
+
+    it('logs starting message', () => {
+      handleEnableCardButton();
+
+      expect(mockDevLogger).toHaveBeenCalledWith(
+        '[handleEnableCardButton] Starting card button enable deeplink handling',
+      );
+    });
+  });
+
+  describe('when an error occurs', () => {
+    const mockError = new Error('Test error');
+
+    beforeEach(() => {
+      mockGetState.mockImplementation(() => {
+        throw mockError;
+      });
+    });
+
+    it('logs error with DevLogger', () => {
+      handleEnableCardButton();
+
+      expect(mockDevLogger).toHaveBeenCalledWith(
+        '[handleEnableCardButton] Failed to enable card button:',
+        mockError,
+      );
+    });
+
+    it('logs error with Logger', () => {
+      handleEnableCardButton();
+
+      expect(mockLoggerError).toHaveBeenCalledWith(
+        mockError,
+        '[handleEnableCardButton] Error enabling card button',
+      );
+    });
+
+    it('does not dispatch setAlwaysShowCardButton', () => {
+      handleEnableCardButton();
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+  });
+});

app/core/DeeplinkManager/Handlers/handleEnableCardButton.ts

@@ -0,0 +1,63 @@
+import DevLogger from '../../SDKConnect/utils/DevLogger';
+import Logger from '../../../util/Logger';
+import { store } from '../../../store';
+import { setAlwaysShowCardButton } from '../../../core/redux/slices/card';
+import { selectCardExperimentalSwitch } from '../../../selectors/featureFlagController/card';
+import NavigationService from '../../NavigationService';
+import Routes from '../../../constants/navigation/Routes';
+
+/**
+ * Card deeplink handler to enable the card button
+ *
+ * This handler enables the card button by setting the alwaysShowCardButton flag
+ * to true, but only if the cardExperimentalSwitch feature flag is enabled.
+ * It shows a success toast notification after enabling the button.
+ *
+ * Supported URL formats:
+ * - https://link.metamask.io/enable-card-button
+ * - https://metamask.app.link/enable-card-button
+ */
+export const handleEnableCardButton = () => {
+  DevLogger.log(
+    '[handleEnableCardButton] Starting card button enable deeplink handling',
+  );
+
+  try {
+    const state = store.getState();
+    const cardExperimentalSwitchEnabled = selectCardExperimentalSwitch(state);
+
+    DevLogger.log(
+      '[handleEnableCardButton] Card experimental switch enabled:',
+      cardExperimentalSwitchEnabled,
+    );
+
+    if (cardExperimentalSwitchEnabled) {
+      store.dispatch(setAlwaysShowCardButton(true));
+      DevLogger.log(
+        '[handleEnableCardButton] Successfully enabled card button',
+      );
+      Logger.log('[handleEnableCardButton] Card button enabled via deeplink');
+
+      // Show success toast via navigation
+      NavigationService.navigation?.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+        screen: Routes.CARD.NOTIFICATION,
+      });
+    } else {
+      DevLogger.log(
+        '[handleEnableCardButton] Card experimental switch is disabled, skipping',
+      );
+      Logger.log(
+        '[handleEnableCardButton] Card experimental switch feature flag is disabled',
+      );
+    }
+  } catch (error) {
+    DevLogger.log(
+      '[handleEnableCardButton] Failed to enable card button:',
+      error,
+    );
+    Logger.error(
+      error as Error,
+      '[handleEnableCardButton] Error enabling card button',
+    );
+  }
+};

app/core/DeeplinkManager/ParseManager/handleMetaMaskDeeplink.test.ts

@@ -26,6 +26,7 @@ describe('handleMetaMaskProtocol', () => {
   const mockHandleSellCrypto = jest.fn();
   const mockHandleDepositCash = jest.fn();
   const mockHandleBrowserUrl = jest.fn();
+  const mockHandleEnableCardButton = jest.fn();
   const mockConnectToChannel = jest.fn();
   const mockGetConnections = jest.fn();
   const mockRevalidateChannel = jest.fn();
@@ -45,6 +46,7 @@ describe('handleMetaMaskProtocol', () => {
     _handleSellCrypto: mockHandleSellCrypto,
     _handleDepositCash: mockHandleDepositCash,
     _handleBrowserUrl: mockHandleBrowserUrl,
+    _handleEnableCardButton: mockHandleEnableCardButton,
   } as unknown as DeeplinkManager;
 
   const handled = jest.fn();
@@ -553,4 +555,23 @@ describe('handleMetaMaskProtocol', () => {
       expect(mockHandleDepositCash).toHaveBeenCalled();
     });
   });
+
+  describe('when url starts with ${PREFIXES.METAMASK}${ACTIONS.ENABLE_CARD_BUTTON}', () => {
+    beforeEach(() => {
+      url = `${PREFIXES.METAMASK}${ACTIONS.ENABLE_CARD_BUTTON}`;
+    });
+
+    it('calls _handleEnableCardButton', () => {
+      handleMetaMaskDeeplink({
+        instance,
+        handled,
+        params,
+        url,
+        origin,
+        wcURL,
+      });
+
+      expect(mockHandleEnableCardButton).toHaveBeenCalled();
+    });
+  });
 });

app/core/DeeplinkManager/ParseManager/handleMetaMaskDeeplink.ts

@@ -165,6 +165,10 @@ export function handleMetaMaskDeeplink({
       '',
     );
     instance._handleDepositCash(depositCashPath);
+  } else if (
+    url.startsWith(`${PREFIXES.METAMASK}${ACTIONS.ENABLE_CARD_BUTTON}`)
+  ) {
+    instance._handleEnableCardButton();
   }
 }
 

locales/languages/en.json

@@ -6100,6 +6100,7 @@
       "change_asset": "Change asset",
       "enable_card_button_label": "Enable Card",
       "enable_assets_button_label": "Enable Assets",
+      "card_button_enabled_toast": "You can now sign up for MetaMask Card!",
       "warnings": {
         "close_spending_limit": {
           "title": "You're close to your spending limit",