react-native-inapp-inspector 1.1.11 → 1.1.13

package/dist/commonjs/types/index.d.ts

@@ -89,6 +89,9 @@ export interface SectionHeaderProps {
     showDiff?: boolean;
     isDiffing?: boolean;
     onToggleDiff?: () => void;
+    showSearch?: boolean;
+    isSearching?: boolean;
+    onToggleSearch?: () => void;
 }
 export interface TreeNodeProps {
     data: unknown;

package/dist/esm/components/AnalyticsDetail.js

@@ -1,297 +1,125 @@
 import React, { useState } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
+import { ScrollView, StyleSheet, Text, View, } from 'react-native';
 // Components
 import CopyButton from './CopyButton';
 import JsonViewer from './JsonViewer';
-// Icons
-import { ClearIcon } from './NetworkIcons';
+import TouchableScale from './TouchableScale';
 // Utils
 import { AppFonts } from '../styles/AppFonts';
+import { getSize } from '../helpers';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
-import styles from '../styles';
-import { getEventColor } from './AnalyticsEventCard';
-// Helpers
-import { formatDateTimeToAnalytics } from '../helpers';
-// Sub Components
-const ParamRowItem = ({ paramKey, value, }) => {
-    const isObject = typeof value === 'object' && value !== null;
-    const valStr = isObject ? JSON.stringify(value, null, 2) : String(value);
-    const [expanded, setExpanded] = useState(false);
-    const isLong = valStr.length > 80 || valStr.includes('\n') || isObject;
-    return (<View style={[detailStyles.dataBox, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
-      <View style={detailStyles.dataBoxHeader}>
-        <Text style={[detailStyles.dataBoxKey, { color: AppColors.primaryBlack }]} numberOfLines={1}>
-          {paramKey}
-        </Text>
-        <CopyButton value={valStr} label={paramKey}/>
-      </View>
-      {expanded && isObject ? (<View style={[detailStyles.jsonBlock, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
-          <JsonViewer data={value}/>
-        </View>) : (<Text style={[detailStyles.dataBoxVal, { color: AppColors.primaryBlack }]} selectable numberOfLines={expanded ? undefined : 2}>
-          {valStr}
-        </Text>)}
-      {isLong && (<Pressable onPress={() => setExpanded(!expanded)} style={[detailStyles.showMoreBtn, { backgroundColor: AppColors.grayBackground }]}>
-          <Text style={[detailStyles.showMoreText, { color: AppColors.grayTextStrong }]}>
-            {expanded ? 'Show Less' : 'Show More'}
-          </Text>
-        </Pressable>)}
-    </View>);
-};
-const ParamTable = ({ data, emptyLabel, }) => {
-    const entries = Object.keys(data).map(key => ({
-        key,
-        value: data[key],
-    }));
-    if (entries.length === 0) {
-        return (<View style={[detailStyles.emptyParams, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
-        <Text style={[detailStyles.emptyParamsText, { color: AppColors.grayTextWeak }]}>
-          {emptyLabel ?? 'No parameters'}
-        </Text>
-      </View>);
-    }
-    return (<View style={detailStyles.paramList}>
-      {entries.map(({ key, value }) => (<ParamRowItem key={key} paramKey={key} value={value}/>))}
-    </View>);
-};
-const SectionCard = ({ title, children, count, accentColor = AppColors.purple, }) => {
-    if (!title) {
-        return (<View style={{ paddingHorizontal: 16, paddingTop: 12, paddingBottom: 20 }}>
-        {children}
-      </View>);
-    }
-    return (<View style={[detailStyles.sectionCard, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
-      <View style={detailStyles.sectionHeader}>
-        <View style={detailStyles.sectionTitleRow}>
-          <View style={[
-            detailStyles.sectionAccentDot,
-            { backgroundColor: accentColor },
-        ]}/>
-          <Text style={[detailStyles.sectionTitle, { color: AppColors.primaryBlack }]}>{title.toUpperCase()}</Text>
-        </View>
-        {typeof count === 'number' && (<View style={[
-                detailStyles.countBadge,
-                {
-                    borderColor: `${accentColor}55`,
-                    backgroundColor: `${accentColor}12`,
-                },
-            ]}>
-            <Text style={[detailStyles.countBadgeText, { color: accentColor }]}>
-              {count}
-            </Text>
-          </View>)}
-      </View>
-      <View style={{ paddingHorizontal: 14, paddingBottom: 14 }}>{children}</View>
-    </View>);
-};
 const AnalyticsDetail = ({ event, }) => {
-    const [search, setSearch] = useState('');
-    const [activeTab, setActiveTab] = useState('unformatted');
-    const SOURCE_COLORS = {
-        firebase: '#E07B1A',
-        manual: AppColors.purple,
-    };
+    const [expandDepth, setExpandDepth] = useState(1);
+    const [treeKey, setTreeKey] = useState(0);
     const params = event.params ?? {};
     const userProperties = event.userProperties ?? {};
-    const eventColor = getEventColor(event.name);
-    const sourceColor = SOURCE_COLORS[event.source] ?? AppColors.purple;
-    const paramCount = Object.keys(params).length;
     const upCount = Object.keys(userProperties).length;
-    const topMetrics = [];
-    if (event.screenName) {
-        topMetrics.push({
-            key: 'Screen',
-            value: event.screenName,
-            color: AppColors.skyBlue,
-        });
-    }
-    if (event.userId) {
-        topMetrics.push({
-            key: 'User ID',
-            value: event.userId,
-            color: AppColors.greenColor,
-        });
-    }
-    if (event.pageTitle) {
-        topMetrics.push({
-            key: 'Page',
-            value: event.pageTitle,
-            color: AppColors.purple,
-        });
-    }
-    if (params?.primary_category) {
-        topMetrics.push({
-            key: 'Category',
-            value: String(params.primary_category),
-            color: AppColors.purple,
-        });
-    }
-    if (params?.flow) {
-        topMetrics.push({
-            key: 'Flow',
-            value: String(params.flow),
-            color: AppColors.greenColor,
-        });
-    }
-    if (params?.market_language) {
-        topMetrics.push({
-            key: 'Language',
-            value: String(params.market_language),
-            color: '#F59E0B',
-        }); // Amber
-    }
-    if (params?.tripType) {
-        topMetrics.push({
-            key: 'Trip Type',
-            value: String(params.tripType),
-            color: '#3B82F6',
-        }); // Blue
+    const jsonData = {
+        name: event.name,
+        params: params,
+        ...(upCount > 0 ? { userProperties } : {}),
+    };
+    const isObject = typeof jsonData === 'object' && jsonData !== null;
+    const isArray = Array.isArray(jsonData);
+    let typeLabel = typeof jsonData;
+    let countLabel = '';
+    if (jsonData === null) {
+        typeLabel = 'null';
     }
-    if (userProperties?.platform_type) {
-        topMetrics.push({
-            key: 'Platform',
-            value: String(userProperties.platform_type),
-            color: AppColors.skyBlue,
-        });
+    else if (isArray) {
+        typeLabel = 'array';
+        countLabel = `${jsonData.length} items`;
     }
-    if (userProperties?.login_status) {
-        topMetrics.push({
-            key: 'Login Status',
-            value: String(userProperties.login_status),
-            color: '#64748B',
-        });
+    else if (isObject) {
+        typeLabel = 'object';
+        countLabel = `${Object.keys(jsonData).length} keys`;
     }
-    topMetrics.unshift({
-        key: 'Source',
-        value: event.source,
-        color: sourceColor,
-    });
     return (<ScrollView style={[detailStyles.scroll, { backgroundColor: AppColors.grayBackground }]} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
-      <LinearGradient colors={[
-            `${eventColor}18`,
-            `${eventColor}06`,
-            AppColors.grayBackground,
-        ]} style={detailStyles.hero}>
-        <View style={{
+      
+      {/* Clean Toolbar */}
+      <View style={{
             flexDirection: 'row',
-            width: '100%',
             justifyContent: 'space-between',
-            alignItems: 'flex-start',
+            alignItems: 'center',
             paddingHorizontal: 16,
-            paddingTop: 14,
-            marginBottom: 8,
+            paddingVertical: 12,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors.grayBorderSecondary,
+            backgroundColor: AppColors.primaryLight,
+        }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <TouchableScale style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            backgroundColor: AppColors.grayBackground,
+            paddingHorizontal: 12,
+            paddingVertical: 6,
+            borderRadius: 8,
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+        }} onPress={() => {
+            const nextDepth = expandDepth === 99 ? 1 : 99;
+            setExpandDepth(nextDepth);
+            setTreeKey(prev => prev + 1);
         }}>
-          <View style={{ flex: 1, paddingRight: 10 }}>
             <Text style={{
             fontFamily: AppFonts.interBold,
-            fontSize: 18,
-            color: AppColors.primaryBlack,
-            marginBottom: 4,
-        }} numberOfLines={2}>
-              {event.name}
-            </Text>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <View style={{
-            width: 8,
-            height: 8,
-            borderRadius: 4,
-            backgroundColor: sourceColor,
-        }}/>
-              <Text style={{
-            fontFamily: AppFonts.interMedium,
             fontSize: 12,
-            color: AppColors.grayTextStrong,
+            color: AppColors.purple,
+        }}>
+              {expandDepth === 99 ? 'Collapse All' : 'Expand All'}
+            </Text>
+          </TouchableScale>
+          <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: AppColors.grayBackground,
+            borderRadius: 6,
+            overflow: 'hidden',
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
         }}>
-                {formatDateTimeToAnalytics(event.timestamp)}
+            <View style={{ paddingHorizontal: 6, paddingVertical: 4, backgroundColor: AppColors.purple + '18' }}>
+              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 9, color: AppColors.purple, letterSpacing: 0.3 }}>
+                {typeLabel.toUpperCase()}
               </Text>
             </View>
+            {countLabel ? (<View style={{ paddingHorizontal: 6, paddingVertical: 4 }}>
+                <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 9, color: AppColors.grayText }}>
+                  {countLabel}
+                </Text>
+              </View>) : null}
+          </View>
+          <View style={{
+            backgroundColor: AppColors.grayBackground,
+            borderRadius: 6,
+            paddingHorizontal: 6,
+            paddingVertical: 4,
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+        }}>
+            <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 9, color: AppColors.grayText }}>
+              {getSize(jsonData)}
+            </Text>
           </View>
-          <CopyButton value={JSON.stringify({ name: event.name, params: params }, null, 2)} label="Copy JSON"/>
         </View>
 
-        {topMetrics.length > 0 && (<ScrollView horizontal showsHorizontalScrollIndicator={false} style={detailStyles.metricsScroll} contentContainerStyle={detailStyles.metricsGrid}>
-            {topMetrics.map((item, idx) => (<View key={idx} style={[
-                    detailStyles.metricCard,
-                    {
-                        borderLeftColor: item.color,
-                        backgroundColor: AppColors.primaryLight,
-                    },
-                ]}>
-                <Text style={[detailStyles.metricLabel, { color: AppColors.grayTextWeak }]}>{item.key}</Text>
-                <Text style={[detailStyles.metricValue, { color: item.color }]} numberOfLines={1}>
-                  {item.value}
-                </Text>
-              </View>))}
-          </ScrollView>)}
-      </LinearGradient>
+        <CopyButton value={JSON.stringify(jsonData, null, 2)} label="Copy JSON"/>
+      </View>
 
-      <View style={[detailStyles.tabRow, { backgroundColor: AppColors.grayBackground }]}>
-        <Pressable style={[
-            detailStyles.tabButton,
-            activeTab === 'unformatted' && [detailStyles.tabActive, { backgroundColor: AppColors.primaryLight }],
-        ]} onPress={() => setActiveTab('unformatted')}>
-          <Text style={[
-            detailStyles.tabText,
-            { color: AppColors.grayTextWeak },
-            activeTab === 'unformatted' && [detailStyles.tabTextActive, { color: AppColors.primaryBlack }],
-        ]}>
-            JSON Viewer
-          </Text>
-        </Pressable>
-        <Pressable style={[
-            detailStyles.tabButton,
-            activeTab === 'formatted' && [detailStyles.tabActive, { backgroundColor: AppColors.primaryLight }],
-        ]} onPress={() => setActiveTab('formatted')}>
-          <Text style={[
-            detailStyles.tabText,
-            { color: AppColors.grayTextWeak },
-            activeTab === 'formatted' && [detailStyles.tabTextActive, { color: AppColors.primaryBlack }],
+      {/* Direct JSON Viewer View */}
+      <View style={[
+            detailStyles.jsonBlockContainer,
+            {
+                backgroundColor: AppColors.primaryLight,
+                borderColor: AppColors.grayBorderSecondary,
+                marginTop: 16,
+            },
         ]}>
-            Tabular View
-          </Text>
-        </Pressable>
+        <JsonViewer key={treeKey} data={jsonData} defaultExpandDepth={expandDepth} fullHeight/>
       </View>
-
-      {activeTab === 'unformatted' && (<View style={detailStyles.searchRow}>
-          <View style={[styles.detailSearchBox, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
-            <TextInput placeholder="Search JSON data..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={[styles.detailSearchInput, { color: AppColors.primaryBlack }]} autoCorrect={false} autoCapitalize="none"/>
-            {search.length > 0 && (<Pressable onPress={() => setSearch('')} hitSlop={10} style={{ padding: 8 }}>
-                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-              </Pressable>)}
-          </View>
-        </View>)}
-
-      {activeTab === 'formatted' && (<View style={{ gap: 10 }}>
-          {paramCount > 0 && (<SectionCard title="Event Parameters" count={paramCount} accentColor={eventColor}>
-              <ParamTable data={params} emptyLabel="No parameters"/>
-            </SectionCard>)}
-
-          {upCount > 0 && (<SectionCard title="User Properties" count={upCount} accentColor={AppColors.greenColor}>
-              <ParamTable data={userProperties} emptyLabel="No user properties"/>
-            </SectionCard>)}
-        </View>)}
-
-      {activeTab === 'unformatted' && (<SectionCard accentColor={AppColors.purple}>
-          <View style={[detailStyles.jsonBlock, { marginLeft: 0, marginTop: 0, backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
-            <JsonViewer data={{
-                name: event.name,
-                params: params,
-                ...(upCount > 0
-                    ? {
-                        userProperties: userProperties,
-                    }
-                    : {}),
-            }} search={search}/>
-          </View>
-        </SectionCard>)}
-
-      {/* Empty state */}
-      {paramCount === 0 && upCount === 0 && activeTab !== 'unformatted' && (<View style={[detailStyles.emptyParams, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
-          <Text style={[detailStyles.emptyParamsText, { color: AppColors.grayTextWeak }]}>
-            No parameters recorded for this event
-          </Text>
-        </View>)}
     </ScrollView>);
 };
 const detailStyles = StyleSheet.create({
@@ -300,226 +128,12 @@ const detailStyles = StyleSheet.create({
         paddingTop: 0,
         paddingBottom: 40,
     },
-    hero: {
-        paddingTop: 0,
-        paddingBottom: 16,
-        paddingHorizontal: 0,
-        gap: 8,
-        marginTop: 0,
-        marginBottom: 0,
-        width: '100%',
-        alignSelf: 'stretch',
-    },
-    searchRow: {
-        paddingHorizontal: 16,
-        marginVertical: 6,
-    },
-    sectionCard: {
-        marginHorizontal: 0,
-        borderRadius: 12,
-        overflow: 'hidden',
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.primaryLight,
-        shadowColor: '#000',
-        shadowOpacity: 0.04,
-        shadowRadius: 4,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 1,
-    },
-    sectionHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 14,
-        paddingVertical: 12,
-    },
-    sectionTitleRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-        flex: 1,
-    },
-    sectionAccentDot: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-    },
-    sectionTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-    },
-    sectionActions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    countBadge: {
-        paddingHorizontal: 7,
-        paddingVertical: 2,
-        borderRadius: 8,
-        borderWidth: 1,
-    },
-    countBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-    },
-    paramList: {
-        gap: 8,
-    },
-    emptyParams: {
-        marginVertical: 12,
-        paddingVertical: 18,
-        paddingHorizontal: 14,
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.primaryLight,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    emptyParamsText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 13,
-        color: AppColors.grayTextWeak,
-        textAlign: 'center',
-        lineHeight: 18,
-    },
-    dataBox: {
-        backgroundColor: '#FFFFFF',
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: '#E5E7EB',
-        padding: 12,
-    },
-    dataBoxHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: 8,
-    },
-    dataBoxKey: {
-        fontFamily: AppFonts.interBold,
-        fontWeight: 'bold',
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-        flex: 1,
-        paddingRight: 8,
-    },
-    dataBoxVal: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-        lineHeight: 18,
-    },
-    showMoreBtn: {
-        marginTop: 8,
-        alignSelf: 'flex-start',
-        backgroundColor: '#F3F4F6',
-        paddingHorizontal: 10,
-        paddingVertical: 4,
-        borderRadius: 4,
-    },
-    showMoreText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: '#4B5563', // matching previous UI color
-    },
-    jsonBlock: {
-        padding: 12,
-        borderWidth: 1,
-        borderColor: '#E0E7FF',
-        borderRadius: 8,
-        backgroundColor: '#EEF2FF',
-    },
-    metricsScroll: {
-        height: 92,
-        overflow: 'visible',
-    },
-    metricsGrid: {
-        gap: 8,
-        marginTop: 4,
-        paddingHorizontal: 16,
-        paddingBottom: 14,
-    },
-    metricCard: {
-        backgroundColor: '#FFFFFF',
-        paddingVertical: 8,
-        paddingHorizontal: 10,
-        borderRadius: 6,
-        borderLeftWidth: 3,
-        width: 130, // fixed width for horizontal scrolling
-        shadowColor: '#000',
-        shadowOpacity: 0.04,
-        shadowRadius: 4,
-        shadowOffset: { width: 0, height: 2 },
-        elevation: 2,
-        alignItems: 'flex-start',
-    },
-    metricLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-        textTransform: 'uppercase',
-        marginBottom: 4,
-    },
-    metricValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-    },
-    tabRow: {
-        flexDirection: 'row',
+    jsonBlockContainer: {
         marginHorizontal: 16,
-        marginTop: 6,
-        backgroundColor: '#E5E7EB',
-        borderRadius: 8,
-        padding: 4,
-    },
-    tabButton: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 8,
-        borderRadius: 6,
-        gap: 6,
-    },
-    tabActive: {
-        backgroundColor: '#FFFFFF',
-        shadowColor: '#000',
-        shadowOpacity: 0.1,
-        shadowRadius: 2,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 2,
-    },
-    tabText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 13,
-        color: AppColors.grayTextWeak,
-    },
-    tabTextActive: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.primaryBlack,
-    },
-    tabBadge: {
-        backgroundColor: '#D1D5DB',
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 10,
-    },
-    tabBadgeActive: {
-        backgroundColor: AppColors.primaryLight,
+        marginTop: 16,
+        marginBottom: 16,
         borderWidth: 1,
-        borderColor: '#E5E7EB',
-    },
-    tabBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: '#6B7280',
-    },
-    tabBadgeTextActive: {
-        color: AppColors.primaryBlack,
+        borderRadius: 12,
     },
 });
 export default AnalyticsDetail;

package/dist/esm/components/AnalyticsEventCard.js

@@ -136,34 +136,34 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             {userPropCount > 0 && (<View style={[cardStyles.chip, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
                 <Text style={[cardStyles.chipText, { color: AppColors.grayText }]}>★ {userPropCount} props</Text>
               </View>)}
-          </View>
 
-          {/* Inline Mini Graph for E-commerce Items */}
-          {(() => {
+            {(() => {
             const items = event.params?.items;
-            if (!Array.isArray(items) || items.length === 0)
-                return null;
-            const prices = items
-                .map((item) => parseFloat(item.price || item.value))
-                .filter(p => !isNaN(p));
-            if (prices.length === 0)
-                return null;
-            const max = Math.max(...prices);
-            if (max === 0)
-                return null;
-            return (<View style={cardStyles.miniGraphWrapper}>
-                {prices.map((val, idx) => {
-                    const hPct = (val / max) * 100;
-                    return (<View key={idx} style={[
-                            cardStyles.miniGraphBar,
-                            {
-                                height: `${Math.max(15, hPct)}%`,
-                                backgroundColor: color,
-                            },
-                        ]}/>);
-                })}
-              </View>);
+            if (Array.isArray(items) && items.length > 0) {
+                return (<View style={[cardStyles.chip, { backgroundColor: '#FEF3C7', borderColor: '#FDE68A' }]}>
+                    <Text style={[cardStyles.chipText, { color: '#D97706', fontFamily: AppFonts.interBold }]}>
+                      🛒 {items.length} {items.length === 1 ? 'item' : 'items'}
+                    </Text>
+                  </View>);
+            }
+            return null;
+        })()}
+
+            {(() => {
+            const val = event.params?.value ?? event.params?.price;
+            const currency = event.params?.currency ?? '';
+            const isPrimitive = typeof val === 'string' || typeof val === 'number';
+            if (isPrimitive) {
+                const currencyStr = typeof currency === 'string' || typeof currency === 'number' ? String(currency) : '';
+                return (<View style={[cardStyles.chip, { backgroundColor: '#ECFDF5', borderColor: '#A7F3D0' }]}>
+                    <Text style={[cardStyles.chipText, { color: '#059669', fontFamily: AppFonts.interBold }]}>
+                      💰 {String(val)} {currencyStr}
+                    </Text>
+                  </View>);
+            }
+            return null;
         })()}
+          </View>
         </View>
       </TouchableScale>
     </View>);