feat: addressing cursor bugbot comments

Author: Matt561

app/component-library/components/StepperCard/StepperCard.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Image, TouchableOpacity } from 'react-native';
 import {
   Box,
@@ -33,11 +33,17 @@ const StepperCard = ({
 
   const isComplete = currentStep >= steps.length;
 
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+
+  const hasFiredRef = useRef(false);
+
   useEffect(() => {
-    if (isComplete) {
-      onComplete?.();
+    if (isComplete && !hasFiredRef.current) {
+      hasFiredRef.current = true;
+      onCompleteRef.current?.();
     }
-  }, [isComplete, onComplete]);
+  }, [isComplete]);
 
   if (isComplete) {
     return null;

app/components/UI/Money/components/MoneyOnboardingCard/MoneyOnboardingCard.test.tsx

@@ -435,4 +435,68 @@ describe('MoneyOnboardingCard', () => {
       expect(mockIncrementStep).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('step 2 — cardholder with linked card (auto-skip)', () => {
+    it('calls incrementStep on mount when cardholder already has a linked card token', () => {
+      setupDefaultMocks({
+        currentStep: 1,
+        isCardholder: true,
+        moneyAccountCardToken: 'tok_123',
+      });
+
+      render(<MoneyOnboardingCard />);
+
+      expect(mockIncrementStep).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call incrementStep when cardholder has no linked card token', () => {
+      setupDefaultMocks({
+        currentStep: 1,
+        isCardholder: true,
+        moneyAccountCardToken: null,
+      });
+
+      render(<MoneyOnboardingCard />);
+
+      expect(mockIncrementStep).not.toHaveBeenCalled();
+    });
+
+    it('does not call incrementStep when user is not a cardholder', () => {
+      setupDefaultMocks({
+        currentStep: 1,
+        isCardholder: false,
+        moneyAccountCardToken: 'tok_123',
+      });
+
+      render(<MoneyOnboardingCard />);
+
+      expect(mockIncrementStep).not.toHaveBeenCalled();
+    });
+
+    it('does not call incrementStep when currentStep is not 1', () => {
+      setupDefaultMocks({
+        currentStep: 0,
+        isCardholder: true,
+        moneyAccountCardToken: 'tok_123',
+      });
+
+      render(<MoneyOnboardingCard />);
+
+      expect(mockIncrementStep).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('steps memo guard — card hidden', () => {
+    it('renders null and shows no step content when currentStep equals MONEY_ONBOARDING_TOTAL_STEPS', () => {
+      setupDefaultMocks({ currentStep: MONEY_ONBOARDING_TOTAL_STEPS });
+
+      const { toJSON, queryByText } = render(<MoneyOnboardingCard />);
+
+      expect(toJSON()).toBeNull();
+      expect(queryByText(strings('money.onboarding.step_1.title'))).toBeNull();
+      expect(
+        queryByText(strings('money.onboarding.step_2.no_card_account.title')),
+      ).toBeNull();
+    });
+  });
 });

app/components/UI/Money/components/MoneyOnboardingCard/MoneyOnboardingCard.tsx

@@ -197,11 +197,21 @@ const MoneyOnboardingCard = () => {
     moneyAccountCardToken,
   ]);
 
+  /**
+   * Auto-skip step 2 ("Get/Link your MetaMask Card") when the user is already
+   * a cardholder AND has a linked card token
+   */
+  useEffect(() => {
+    if (currentStep === 1 && isCardholder && !!moneyAccountCardToken) {
+      incrementStep();
+    }
+  }, [currentStep, incrementStep, isCardholder, moneyAccountCardToken]);
+
   // REMINDER: To update MONEY_ONBOARDING_TOTAL_STEPS when the number of steps is changed.
-  const steps = useMemo(
-    () => [getStep1Content(), getStep2Content()],
-    [getStep1Content, getStep2Content],
-  );
+  const steps = useMemo(() => {
+    if (!isOnboardingCardVisible) return [];
+    return [getStep1Content(), getStep2Content()];
+  }, [isOnboardingCardVisible, getStep1Content, getStep2Content]);
 
   if (!isOnboardingCardVisible) {
     return null;