feat(card): move Card authentication verification out of CardSDK context

app/components/UI/Card/Views/CardAuthentication/CardAuthentication.tsx

@@ -233,7 +233,7 @@ const CardAuthentication = () => {
                 loading={loading}
                 style={[styles.button, isDisabled && styles.buttonDisabled]}
                 width={ButtonWidthTypes.Full}
-                disabled={isDisabled}
+                disabled={isDisabled || loading}
               />
             </Box>
           </Box>

app/components/UI/Card/hooks/isBaanxLoginEnabled.test.ts

@@ -27,7 +27,6 @@ const mockCardSDKResponse = (sdk: Partial<CardSDK> | null) => {
     sdk: sdk as CardSDK | null,
     isLoading: false,
     logoutFromProvider: jest.fn(),
-    userCardLocation: 'international',
   });
 };
 

app/components/UI/Card/hooks/useCardAuthenticationVerification.test.ts

@@ -0,0 +1,225 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useSelector } from 'react-redux';
+import { useCardAuthenticationVerification } from './useCardAuthenticationVerification';
+import useThunkDispatch from '../../../hooks/useThunkDispatch';
+import { verifyCardAuthentication } from '../../../../core/redux/slices/card';
+import Logger from '../../../../util/Logger';
+import { CardFeatureFlag } from '../../../../selectors/featureFlagController/card';
+
+jest.mock('react-redux');
+jest.mock('../../../hooks/useThunkDispatch');
+jest.mock('../../../../core/redux/slices/card');
+jest.mock('../../../../util/Logger');
+
+const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
+const mockUseThunkDispatch = useThunkDispatch as jest.MockedFunction<
+  typeof useThunkDispatch
+>;
+const mockLogger = Logger as jest.Mocked<typeof Logger>;
+
+describe('useCardAuthenticationVerification', () => {
+  const mockDispatch = jest.fn();
+
+  const mockCardFeatureFlag: CardFeatureFlag = {
+    isBaanxLoginEnabled: true,
+    constants: {
+      onRampApiUrl: 'https://api.onramp.metamask.io',
+      accountsApiUrl: 'https://api.accounts.metamask.io',
+    },
+    chains: {
+      '1': {
+        enabled: true,
+        tokens: [],
+      },
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseThunkDispatch.mockReturnValue(mockDispatch);
+  });
+
+  const defaultMockState = {
+    userLoggedIn: true,
+    cardFeatureFlag: mockCardFeatureFlag,
+  };
+
+  const setupMockSelectors = (overrides = {}) => {
+    const state = { ...defaultMockState, ...overrides };
+
+    mockUseSelector.mockReset();
+
+    const selectorValues = [state.userLoggedIn, state.cardFeatureFlag];
+
+    let callIndex = 0;
+    mockUseSelector.mockImplementation(() => {
+      const value = selectorValues[callIndex % selectorValues.length];
+      callIndex++;
+      return value;
+    });
+  };
+
+  it('dispatches verification when all conditions are met', () => {
+    setupMockSelectors();
+
+    renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockDispatch).toHaveBeenCalledWith(
+      verifyCardAuthentication({
+        isBaanxLoginEnabled: true,
+      }),
+    );
+  });
+
+  it('dispatches verification with isBaanxLoginEnabled false', () => {
+    setupMockSelectors({
+      cardFeatureFlag: { ...mockCardFeatureFlag, isBaanxLoginEnabled: false },
+    });
+
+    renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockDispatch).toHaveBeenCalledWith(
+      verifyCardAuthentication({
+        isBaanxLoginEnabled: false,
+      }),
+    );
+  });
+
+  it('dispatches verification when isBaanxLoginEnabled is undefined', () => {
+    const featureFlagWithoutBaanx = { ...mockCardFeatureFlag };
+    delete (featureFlagWithoutBaanx as Partial<CardFeatureFlag>)
+      .isBaanxLoginEnabled;
+    setupMockSelectors({
+      cardFeatureFlag: featureFlagWithoutBaanx,
+    });
+
+    renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockDispatch).toHaveBeenCalledWith(
+      verifyCardAuthentication({
+        isBaanxLoginEnabled: false,
+      }),
+    );
+  });
+
+  it('does not dispatch when user is not logged in', () => {
+    setupMockSelectors({ userLoggedIn: false });
+
+    renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockDispatch).not.toHaveBeenCalled();
+  });
+
+  it('does not dispatch when card feature flag is null', () => {
+    setupMockSelectors({ cardFeatureFlag: null });
+
+    renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockDispatch).not.toHaveBeenCalled();
+  });
+
+  it('does not dispatch when card feature flag is undefined', () => {
+    setupMockSelectors({ cardFeatureFlag: undefined });
+
+    renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockDispatch).not.toHaveBeenCalled();
+  });
+
+  it('does not dispatch when both user is not logged in and card feature flag is not enabled', () => {
+    setupMockSelectors({ userLoggedIn: false, cardFeatureFlag: null });
+
+    renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockDispatch).not.toHaveBeenCalled();
+  });
+
+  it('logs error when dispatch throws Error instance', () => {
+    const testError = new Error('Test dispatch error');
+    setupMockSelectors();
+    mockDispatch.mockImplementation(() => {
+      throw testError;
+    });
+
+    renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockLogger.error).toHaveBeenCalledWith(
+      testError,
+      'useCardAuthenticationVerification::Error verifying authentication',
+    );
+  });
+
+  it('logs error when dispatch throws non-Error value', () => {
+    setupMockSelectors();
+    mockDispatch.mockImplementation(() => {
+      throw 'String error';
+    });
+
+    renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockLogger.error).toHaveBeenCalledWith(
+      new Error('String error'),
+      'useCardAuthenticationVerification::Error verifying authentication',
+    );
+  });
+
+  it('dispatches verification when user logs in', () => {
+    setupMockSelectors({ userLoggedIn: false });
+    const { rerender } = renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockDispatch).not.toHaveBeenCalled();
+
+    setupMockSelectors({ userLoggedIn: true });
+    rerender();
+
+    expect(mockDispatch).toHaveBeenCalledWith(
+      verifyCardAuthentication({
+        isBaanxLoginEnabled: true,
+      }),
+    );
+  });
+
+  it('dispatches verification when card feature flag is enabled', () => {
+    setupMockSelectors({ cardFeatureFlag: null });
+    const { rerender } = renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockDispatch).not.toHaveBeenCalled();
+
+    setupMockSelectors({ cardFeatureFlag: mockCardFeatureFlag });
+    rerender();
+
+    expect(mockDispatch).toHaveBeenCalledWith(
+      verifyCardAuthentication({
+        isBaanxLoginEnabled: true,
+      }),
+    );
+  });
+
+  it('dispatches verification again when isBaanxLoginEnabled flag changes', () => {
+    setupMockSelectors({
+      cardFeatureFlag: { ...mockCardFeatureFlag, isBaanxLoginEnabled: false },
+    });
+    const { rerender } = renderHook(() => useCardAuthenticationVerification());
+
+    expect(mockDispatch).toHaveBeenCalledWith(
+      verifyCardAuthentication({
+        isBaanxLoginEnabled: false,
+      }),
+    );
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+
+    mockDispatch.mockClear();
+
+    setupMockSelectors({
+      cardFeatureFlag: { ...mockCardFeatureFlag, isBaanxLoginEnabled: true },
+    });
+    rerender();
+
+    expect(mockDispatch).toHaveBeenCalledWith(
+      verifyCardAuthentication({
+        isBaanxLoginEnabled: true,
+      }),
+    );
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+  });
+});

app/components/UI/Card/hooks/useCardAuthenticationVerification.ts

@@ -0,0 +1,47 @@
+import { useCallback, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import useThunkDispatch from '../../../hooks/useThunkDispatch';
+import { verifyCardAuthentication } from '../../../../core/redux/slices/card';
+import { selectUserLoggedIn } from '../../../../reducers/user';
+import {
+  CardFeatureFlag,
+  selectCardFeatureFlag,
+} from '../../../../selectors/featureFlagController/card';
+import Logger from '../../../../util/Logger';
+
+/**
+ * Hook that automatically verifies card authentication status when the app loads.
+ * This hook should be used at the app entry level to ensure authentication state
+ * is always up-to-date without needing to open the Card screen.
+ */
+export const useCardAuthenticationVerification = () => {
+  const dispatch = useThunkDispatch();
+  const userLoggedIn = useSelector(selectUserLoggedIn);
+  const cardFeatureFlag = useSelector(selectCardFeatureFlag) as CardFeatureFlag;
+
+  const checkAuthentication = useCallback(() => {
+    const isBaanxLoginEnabled = cardFeatureFlag?.isBaanxLoginEnabled ?? false;
+
+    dispatch(
+      verifyCardAuthentication({
+        isBaanxLoginEnabled,
+      }),
+    );
+  }, [cardFeatureFlag, dispatch]);
+
+  useEffect(() => {
+    // Only run authentication check when:
+    // 1. User is logged in
+    // 2. Card feature flag is enabled
+    if (userLoggedIn && cardFeatureFlag) {
+      try {
+        checkAuthentication();
+      } catch (error) {
+        Logger.error(
+          error instanceof Error ? error : new Error(String(error)),
+          'useCardAuthenticationVerification::Error verifying authentication',
+        );
+      }
+    }
+  }, [userLoggedIn, cardFeatureFlag, checkAuthentication]);
+};

app/components/UI/Card/hooks/useCardDetails.test.ts

@@ -50,7 +50,6 @@ describe('useCardDetails', () => {
       sdk: mockSDK,
       isLoading: false,
       logoutFromProvider: mockLogoutFromProvider,
-      userCardLocation: 'us',
     });
   });
 
@@ -240,7 +239,6 @@ describe('useCardDetails', () => {
         sdk: null,
         isLoading: true,
         logoutFromProvider: mockLogoutFromProvider,
-        userCardLocation: 'us',
       });
       mockGetCardDetails.mockResolvedValue(mockCardDetailsResponse);
 
@@ -257,7 +255,6 @@ describe('useCardDetails', () => {
         sdk: null,
         isLoading: false,
         logoutFromProvider: mockLogoutFromProvider,
-        userCardLocation: 'us',
       });
       mockGetCardDetails.mockResolvedValue(mockCardDetailsResponse);
 
@@ -295,7 +292,6 @@ describe('useCardDetails', () => {
         sdk: null,
         isLoading: true,
         logoutFromProvider: mockLogoutFromProvider,
-        userCardLocation: 'us',
       });
       mockGetCardDetails.mockResolvedValue(mockCardDetailsResponse);
 
@@ -310,7 +306,6 @@ describe('useCardDetails', () => {
         sdk: mockSDK,
         isLoading: false,
         logoutFromProvider: mockLogoutFromProvider,
-        userCardLocation: 'us',
       });
       rerender();
 
@@ -328,7 +323,6 @@ describe('useCardDetails', () => {
         sdk: null,
         isLoading: false,
         logoutFromProvider: mockLogoutFromProvider,
-        userCardLocation: 'us',
       });
 
       const { result } = renderHook(() => useCardDetails());