feat: card spending limit screen ui

app/components/UI/Card/Views/CardHome/CardHome.styles.ts

@@ -71,11 +71,6 @@ const createStyles = (theme: Theme) =>
     limitedAllowanceManageCardText: {
       fontWeight: 'bold',
     },
-    divider: {
-      height: 1,
-      backgroundColor: theme.colors.background.default,
-      width: '100%',
-    },
     defaultMarginTop: {
       marginTop: 16,
     },
@@ -92,6 +87,14 @@ const createStyles = (theme: Theme) =>
     halfWidthButton: {
       width: '50%',
     },
+    spendingLimitContainer: {
+      marginVertical: 8,
+      width: '100%',
+    },
+    divider: {
+      height: 1,
+      backgroundColor: theme.colors.border.muted,
+    },
   });
 
 export default createStyles;

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

@@ -33,10 +33,12 @@ import { useGetPriorityCardToken } from '../../hooks/useGetPriorityCardToken';
 import { strings } from '../../../../../../locales/i18n';
 import { useAssetBalance } from '../../hooks/useAssetBalance';
 import { useNavigateToCardPage } from '../../hooks/useNavigateToCardPage';
+import { useSpendingLimit } from '../../hooks/useSpendingLimit';
 import { AllowanceState } from '../../types';
 import CardAssetItem from '../../components/CardAssetItem';
 import ManageCardListItem from '../../components/ManageCardListItem';
 import CardImage from '../../components/CardImage';
+import SpendingLimitProgress from '../../components/SpendingLimitProgress/SpendingLimitProgress';
 import { selectChainId } from '../../../../../selectors/networkController';
 import { CardHomeSelectors } from '../../../../../../e2e/selectors/Card/CardHome.selectors';
 import {
@@ -93,6 +95,7 @@ const CardHome = () => {
   const { balanceFiat, mainBalance, rawFiatNumber, rawTokenBalance } =
     useAssetBalance(priorityToken);
   const { navigateToCardPage } = useNavigateToCardPage(navigation);
+  const { spendingLimit, navigateToSpendingLimit } = useSpendingLimit();
   const { openSwaps } = useOpenSwaps({
     priorityToken: priorityToken ?? undefined,
   });
@@ -144,16 +147,13 @@ const CardHome = () => {
     ],
   );
 
-  // Track event only once after priorityToken and balances are loaded
   const hasTrackedCardHomeView = useRef(false);
 
   useEffect(() => {
-    // Early return if already tracked to prevent any possibility of duplicate tracking
     if (hasTrackedCardHomeView.current) {
       return;
     }
 
-    // Don't track while SDK is still loading to prevent premature tracking
     if (isSDKLoading) {
       return;
     }
@@ -173,7 +173,6 @@ const CardHome = () => {
       !!priorityToken && (hasValidMainBalance || hasValidFiatBalance);
 
     if (isLoaded) {
-      // Set flag immediately to prevent race conditions
       hasTrackedCardHomeView.current = true;
 
       trackEvent(
@@ -226,19 +225,19 @@ const CardHome = () => {
 
   const changeAssetAction = useCallback(() => {
     if (isAuthenticated) {
-      // open asset bottom sheet
+      // TODO: Implement change asset functionality
     } else {
       navigation.navigate(Routes.CARD.WELCOME);
     }
   }, [isAuthenticated, navigation]);
 
   const manageSpendingLimitAction = useCallback(() => {
     if (isAuthenticated) {
-      // open spending limit screen
+      navigateToSpendingLimit();
     } else {
       navigation.navigate(Routes.CARD.WELCOME);
     }
-  }, [isAuthenticated, navigation]);
+  }, [isAuthenticated, navigateToSpendingLimit, navigation]);
 
   const logoutAction = () => {
     logoutFromProvider();
@@ -377,6 +376,39 @@ const CardHome = () => {
           )}
         </View>
 
+        {spendingLimit.limitAmount && priorityToken && (
+          <View
+            style={[
+              styles.buttonsContainerBase,
+              styles.defaultHorizontalPadding,
+            ]}
+          >
+            <View style={styles.divider} />
+          </View>
+        )}
+
+        {spendingLimit.limitAmount && priorityToken && (
+          <View
+            style={[
+              styles.buttonsContainerBase,
+              styles.defaultHorizontalPadding,
+              styles.spendingLimitContainer,
+            ]}
+          >
+            <SpendingLimitProgress
+              currentAmount="650"
+              limitAmount={spendingLimit.limitAmount}
+              currency={priorityToken.symbol || 'USDC'}
+              onPress={manageSpendingLimitAction}
+              showWarning={false}
+              onSetNewLimit={navigateToSpendingLimit}
+              onDismiss={() => {
+                // TODO: Implement dismiss functionality
+              }}
+            />
+          </View>
+        )}
+
         <View
           style={[styles.buttonsContainerBase, styles.defaultHorizontalPadding]}
         >
@@ -428,21 +460,19 @@ const CardHome = () => {
         </View>
       </View>
 
-      {isBaanxLoginEnabled && (
-        <ManageCardListItem
-          title={strings(
-            'card.card_home.manage_card_options.manage_spending_limit',
-          )}
-          description={strings(
-            priorityToken?.allowanceState === AllowanceState.Enabled
-              ? 'card.card_home.manage_card_options.manage_spending_limit_description_full'
-              : 'card.card_home.manage_card_options.manage_spending_limit_description_restricted',
-          )}
-          rightIcon={IconName.ArrowRight}
-          onPress={manageSpendingLimitAction}
-          testID={CardHomeSelectors.MANAGE_SPENDING_LIMIT_ITEM}
-        />
-      )}
+      <ManageCardListItem
+        title={strings(
+          'card.card_home.manage_card_options.manage_spending_limit',
+        )}
+        description={strings(
+          priorityToken?.allowanceState === AllowanceState.Enabled
+            ? 'card.card_home.manage_card_options.manage_spending_limit_description_full'
+            : 'card.card_home.manage_card_options.manage_spending_limit_description_restricted',
+        )}
+        rightIcon={IconName.ArrowRight}
+        onPress={manageSpendingLimitAction}
+        testID={CardHomeSelectors.MANAGE_SPENDING_LIMIT_ITEM}
+      />
 
       <ManageCardListItem
         title={strings('card.card_home.manage_card_options.manage_card')}

app/components/UI/Card/Views/SpendingLimit/SpendingLimit.styles.ts

@@ -0,0 +1,93 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../util/theme/models';
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    wrapper: {
+      flex: 1,
+      backgroundColor: theme.colors.background.default,
+    },
+    contentContainer: {
+      flexGrow: 1,
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+    },
+    assetContainer: {
+      marginBottom: 24,
+    },
+    optionsContainer: {
+      flex: 1,
+      gap: 16,
+    },
+    optionCard: {
+      backgroundColor: theme.colors.background.muted,
+      borderRadius: 12,
+      padding: 16,
+      borderWidth: 1,
+      borderColor: theme.colors.border.muted,
+    },
+    selectedOptionCard: {
+      borderColor: theme.colors.primary.default,
+    },
+    optionHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 8,
+    },
+    radioButton: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      borderWidth: 2,
+      borderColor: theme.colors.icon.muted,
+      marginRight: 12,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    radioButtonSelected: {
+      width: 10,
+      height: 10,
+      borderRadius: 5,
+      backgroundColor: theme.colors.primary.default,
+    },
+    optionTitle: {
+      flex: 1,
+      color: theme.colors.text.default,
+    },
+    optionDescription: {
+      color: theme.colors.text.alternative,
+      lineHeight: 20,
+    },
+    editLimitButton: {
+      marginTop: 12,
+      alignSelf: 'flex-start',
+    },
+    editLimitText: {
+      color: theme.colors.primary.default,
+    },
+    limitInputContainer: {
+      marginTop: 16,
+    },
+    limitInputLabel: {
+      color: theme.colors.text.alternative,
+      marginBottom: 8,
+    },
+    limitInput: {
+      color: theme.colors.text.default,
+      fontSize: 18,
+      fontWeight: '600',
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+      backgroundColor: theme.colors.background.alternative,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.border.muted,
+      minHeight: 48,
+    },
+    buttonsContainer: {
+      gap: 12,
+      marginTop: 24,
+    },
+  });
+
+export default createStyles;