react-native-inapp-inspector 2.5.9 → 2.5.11

package/dist/esm/components/Inspector/NetworkTab.js

@@ -1,153 +1,156 @@
-import _,{useCallback as de,useMemo as q,useRef as He}from"react";import{FlatList as We,Pressable as Ge,ScrollView as _e,Text as I,TextInput as Qe,View as C}from"react-native";import{useInspector as Ue}from"./InspectorContext";import M from"../TouchableScale";import Ie from"../AnimatedEntrance";import Ke from"../DomainHeader";import Xe from"../LogCard";import Je from"../EmptyState";import Ye from"../EndOfListFooter";import Ze from"./NetworkFilterModal";import S from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{METHOD_COLORS as Ve}from"../../constants";import{useTranslation as eo}from"../../i18n";import{SearchIcon as Co,ClearIcon as So,TrashIcon as To,SortArrowIcon as Io,FilterIcon as Vo,ChevronIcon as Fo,CheckIcon as Ro,CircleCheckIcon as Lo,CircleXIcon as Bo,LayersIcon as Fe,ClockIcon as Po,RequestIcon as Eo,ResponseIcon as $o,AtomIcon as Do}from"../NetworkIcons";const Mo=_.memo(()=>{const{groupedData:j,loadMoreSection:ce,search:R,setSearch:Q,setSearchScope:ue,quickFilter:U,setQuickFilter:ae,handleDelete:Re,isGroupByPageEnabled:F,setIsGroupByPageEnabled:Le,selectedLogs:K,sortOrder:Be,setSortOrder:X,statusFilters:L,setStatusFilters:H,methodFilters:B,setMethodFilters:v,latencyFilter:N,setLatencyFilter:J,protocolFilter:O,setProtocolFilter:Y,networkSortBy:A,setNetworkSortBy:Z,filteredLogs:E,logs:W,toggleSectionFilter:ge,toggleSectionCollapse:pe,minStart:me,totalRange:he,newLogIds:ye,toggleSelect:fe,setSelected:we,maxNetworkLogs:ie}=Ue(),{t:ee}=eo(),Pe=He(null),[Ee,Ce]=_.useState(!1),[Se,be]=_.useState(!1),[oe,Te]=_.useState(ie||50);_.useEffect(()=>{Te(ie||50)},[R,U,ie]);const se=q(()=>F?j:j.slice(0,oe),[F,j,oe]),$e=de(e=>e?.id?String(e.id):"",[]),$=q(()=>L.size>0&&!L.has("all")||B.size>0&&!B.has("all")||N!=="all"||O!=="all"||A!=="time_desc",[L,B,N,O,A]),De=q(()=>{let e=0;return L.size>0&&!L.has("all")&&(e+=L.size),B.size>0&&!B.has("all")&&(e+=B.size),N!=="all"&&e++,O!=="all"&&e++,A!=="time_desc"&&e++,e},[L,B,N,O,A]),Me=q(()=>({statusCodes:L.size>0?new Set(L):new Set(["all"]),methods:B.size>0?new Set(B):new Set(["all"]),latency:N,protocol:O,sortBy:A}),[L,B,N,O,A]),Ne=de(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?H(new Set):H(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?v(new Set):v(new Set([...e.methods].map(T=>T))),J(e.latency||"all"),Y(e.protocol||"all"),Z(e.sortBy||"time_desc"),e.sortBy==="time_asc"?X("oldest"):X("newest")},[H,v,J,Y,Z,X]),P=q(()=>{let e=0,T=0,z=0,x=0,G=0,te=0;return W.forEach(V=>{const b=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null||!isNaN(b)&&b>=400?e++:!isNaN(b)&&b>=200&&b<400&&T++,(V.duration||0)>=500&&z++;const re=(V.method||"").toUpperCase();re==="POST"&&x++,re==="GET"&&G++;const D=(V.url||"").toLowerCase(),le=(V.client||"").toLowerCase();(D.includes("graphql")||le.includes("graphql")||le.includes("apollo"))&&te++}),{all:W.length,errors:e,success:T,slow:z,post:x,get:G,graphql:te}},[W]),Oe=q(()=>[{id:"all",label:"All",count:P.all,color:o.purple},{id:"errors",label:"Errors",count:P.errors,color:o.errorColor},{id:"success",label:"2xx OK",count:P.success,color:o.greenColor},{id:"slow",label:"Slow >500ms",count:P.slow,color:o.warningIconGold},{id:"POST",label:"POST",count:P.post,color:Ve.POST||o.blue500},{id:"GET",label:"GET",count:P.get,color:Ve.GET||o.emerald500},{id:"graphql",label:"GraphQL",count:P.graphql,color:o.graphqlPink}],[P]),Ae=de(({item:e,index:T})=>{if(e.type==="header")return<Ie index={T}distance={8}>
+import _,{useCallback as de,useMemo as H,useRef as qe}from"react";import{FlatList as We,Pressable as Ge,ScrollView as _e,Text as I,TextInput as Qe,View as S}from"react-native";import{useInspector as Ue}from"./InspectorContext";import M from"../TouchableScale";import Ie from"../AnimatedEntrance";import Ke from"../DomainHeader";import Xe from"../LogCard";import Je from"../EmptyState";import Ye from"../EndOfListFooter";import{DeveloperSponsorCard as Ze}from"./DeveloperSponsorCard";import So from"./NetworkFilterModal";import C from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{METHOD_COLORS as Ve}from"../../constants";import{useTranslation as Co}from"../../i18n";import{SearchIcon as To,ClearIcon as Io,TrashIcon as Vo,SortArrowIcon as Fo,FilterIcon as Ro,ChevronIcon as Lo,CheckIcon as Bo,CircleCheckIcon as Po,CircleXIcon as Eo,LayersIcon as Fe,ClockIcon as $o,RequestIcon as Do,ResponseIcon as Mo,AtomIcon as No}from"../NetworkIcons";const Oo=_.memo(()=>{const{groupedData:j,loadMoreSection:ce,search:R,setSearch:Q,setSearchScope:ue,quickFilter:U,setQuickFilter:ae,handleDelete:Re,isGroupByPageEnabled:F,setIsGroupByPageEnabled:Le,selectedLogs:K,sortOrder:Be,setSortOrder:X,statusFilters:L,setStatusFilters:q,methodFilters:B,setMethodFilters:v,latencyFilter:N,setLatencyFilter:J,protocolFilter:O,setProtocolFilter:Y,networkSortBy:A,setNetworkSortBy:Z,filteredLogs:E,logs:W,toggleSectionFilter:ge,toggleSectionCollapse:pe,minStart:me,totalRange:he,newLogIds:ye,toggleSelect:fe,setSelected:we,maxNetworkLogs:ie}=Ue(),{t:ee}=Co(),Pe=qe(null),[Ee,Se]=_.useState(!1),[Ce,be]=_.useState(!1),[oe,Te]=_.useState(ie||50);_.useEffect(()=>{Te(ie||50)},[R,U,ie]);const se=H(()=>F?j:j.slice(0,oe),[F,j,oe]),$e=de(e=>e?.id?String(e.id):"",[]),$=H(()=>L.size>0&&!L.has("all")||B.size>0&&!B.has("all")||N!=="all"||O!=="all"||A!=="time_desc",[L,B,N,O,A]),De=H(()=>{let e=0;return L.size>0&&!L.has("all")&&(e+=L.size),B.size>0&&!B.has("all")&&(e+=B.size),N!=="all"&&e++,O!=="all"&&e++,A!=="time_desc"&&e++,e},[L,B,N,O,A]),Me=H(()=>({statusCodes:L.size>0?new Set(L):new Set(["all"]),methods:B.size>0?new Set(B):new Set(["all"]),latency:N,protocol:O,sortBy:A}),[L,B,N,O,A]),Ne=de(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?q(new Set):q(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?v(new Set):v(new Set([...e.methods].map(T=>T))),J(e.latency||"all"),Y(e.protocol||"all"),Z(e.sortBy||"time_desc"),e.sortBy==="time_asc"?X("oldest"):X("newest")},[q,v,J,Y,Z,X]),P=H(()=>{let e=0,T=0,z=0,x=0,G=0,te=0;return W.forEach(V=>{const b=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null||!isNaN(b)&&b>=400?e++:!isNaN(b)&&b>=200&&b<400&&T++,(V.duration||0)>=500&&z++;const re=(V.method||"").toUpperCase();re==="POST"&&x++,re==="GET"&&G++;const D=(V.url||"").toLowerCase(),le=(V.client||"").toLowerCase();(D.includes("graphql")||le.includes("graphql")||le.includes("apollo"))&&te++}),{all:W.length,errors:e,success:T,slow:z,post:x,get:G,graphql:te}},[W]),Oe=H(()=>[{id:"all",label:"All",count:P.all,color:o.purple},{id:"errors",label:"Errors",count:P.errors,color:o.errorColor},{id:"success",label:"2xx OK",count:P.success,color:o.greenColor},{id:"slow",label:"Slow >500ms",count:P.slow,color:o.warningIconGold},{id:"POST",label:"POST",count:P.post,color:Ve.POST||o.blue500},{id:"GET",label:"GET",count:P.get,color:Ve.GET||o.emerald500},{id:"graphql",label:"GraphQL",count:P.graphql,color:o.graphqlPink}],[P]),Ae=de(({item:e,index:T})=>{if(e.type==="header")return<Ie index={T}distance={8}>
             <Ke pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={ge}isCollapsed={e.isCollapsed}onToggleCollapse={pe}isFirst={e.isFirst}timestamp={e.timestamp}/>
-          </Ie>;if(e.type==="loadMore"){const{pageName:V,color:b,remainingCount:re,totalCount:D,loadedCount:le,loadMoreStep:ne,hasMore:qe}=e;return<C style={[S.treeNodeRow,S.treeNodeRowLast]}>
-            <C style={S.treeLines}>
-              <C style={[S.modernTreeLine,{borderColor:b},S.modernTreeLineLast]}/>
-            </C>
-            <C style={S.treeCardWrapper}>
-              {qe?<M onPress={()=>ce(V,ne||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${b}14`,borderWidth:1.5,borderColor:`${b}40`,shadowColor:b,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
-                  <C style={{flexDirection:"row",alignItems:"center",gap:8}}>
-                    <C style={{width:22,height:22,borderRadius:11,backgroundColor:b,alignItems:"center",justifyContent:"center",shadowColor:b,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
-                      <Fo color={o.white}size={9}direction="down"/>
-                    </C>
-                    <C>
+          </Ie>;if(e.type==="loadMore"){const{pageName:V,color:b,remainingCount:re,totalCount:D,loadedCount:le,loadMoreStep:ne,hasMore:He}=e;return<S style={[C.treeNodeRow,C.treeNodeRowLast]}>
+            <S style={C.treeLines}>
+              <S style={[C.modernTreeLine,{borderColor:b},C.modernTreeLineLast]}/>
+            </S>
+            <S style={C.treeCardWrapper}>
+              {He?<M onPress={()=>ce(V,ne||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${b}14`,borderWidth:1.5,borderColor:`${b}40`,shadowColor:b,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
+                  <S style={{flexDirection:"row",alignItems:"center",gap:8}}>
+                    <S style={{width:22,height:22,borderRadius:11,backgroundColor:b,alignItems:"center",justifyContent:"center",shadowColor:b,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
+                      <Lo color={o.white}size={9}direction="down"/>
+                    </S>
+                    <S>
                       <I style={{fontFamily:k.interBold,fontSize:12,color:b}}>
                         {ee("footer.loadMoreRequests",{count:ne,defaultValue:`Load ${ne} More Requests`})}
                       </I>
                       <I style={{fontFamily:k.interRegular,fontSize:9.5,color:o.grayTextWeak,marginTop:1}}>
                         Showing {le} of {D} requests
                       </I>
-                    </C>
-                  </C>
+                    </S>
+                  </S>
 
-                  <C style={{flexDirection:"row",alignItems:"center",backgroundColor:`${b}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${b}40`,gap:3}}>
+                  <S style={{flexDirection:"row",alignItems:"center",backgroundColor:`${b}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${b}40`,gap:3}}>
                     <I style={{fontFamily:k.interBold,fontSize:10.5,color:b}}>
                       +{re}
                     </I>
                     <I style={{fontFamily:k.interRegular,fontSize:9,color:b}}>
                       more
                     </I>
-                  </C>
-                </M>:<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${b}0A`,borderWidth:1,borderColor:`${b}25`}}>
-                  <C style={{flexDirection:"row",alignItems:"center",gap:7}}>
-                    <C style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${b}25`,alignItems:"center",justifyContent:"center"}}>
-                      <Ro color={b}size={8}/>
-                    </C>
+                  </S>
+                </M>:<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${b}0A`,borderWidth:1,borderColor:`${b}25`}}>
+                  <S style={{flexDirection:"row",alignItems:"center",gap:7}}>
+                    <S style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${b}25`,alignItems:"center",justifyContent:"center"}}>
+                      <Bo color={b}size={8}/>
+                    </S>
                     <I style={{fontFamily:k.interMedium,fontSize:11,color:o.grayTextStrong}}>
                       {ee("footer.allLoaded",{count:D,defaultValue:`All ${D} requests loaded`})}
                     </I>
-                  </C>
+                  </S>
 
-                  <C style={{backgroundColor:`${b}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
+                  <S style={{backgroundColor:`${b}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
                     <I style={{fontFamily:k.interBold,fontSize:9.5,color:b}}>
                       {D}/{D}
                     </I>
-                  </C>
-                </C>}
-            </C>
-          </C>}const{log:z,isLast:x,color:G}=e,te=se.slice(0,T).filter(V=>!V.type).length;return<Ie index={T}distance={8}style={F?[S.treeNodeRow,x&&S.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
-          {F&&<C style={S.treeLines}>
-              <C style={[S.modernTreeLine,{borderColor:G},x&&S.modernTreeLineLast]}/>
-              {!x&&<C style={[S.modernTreeBranch,{borderColor:G}]}/>}
-            </C>}
-          <C style={F?S.treeCardWrapper:{flex:1}}>
+                  </S>
+                </S>}
+            </S>
+          </S>}const{log:z,isLast:x,color:G}=e,te=se.slice(0,T).filter(V=>!V.type).length;return<Ie index={T}distance={8}style={F?[C.treeNodeRow,x&&C.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
+          {F&&<S style={C.treeLines}>
+              <S style={[C.modernTreeLine,{borderColor:G},x&&C.modernTreeLineLast]}/>
+              {!x&&<S style={[C.modernTreeBranch,{borderColor:G}]}/>}
+            </S>}
+          <S style={F?C.treeCardWrapper:{flex:1}}>
             <Xe testID={`inspector.network.item.${te}`}item={z}isSelected={K.has(z.id)}onToggleSelect={fe}onPress={()=>{we(z)}}timelineMinStart={me}timelineTotalRange={he}isNew={ye.has(z.id)}searchStr={R}/>
-          </C>
-        </Ie>},[se,F,me,he,ye,K,fe,R,ge,pe,ce,we,ee]);return<C style={{flex:1}}>
-      <C style={{marginTop:6}}>
+          </S>
+        </Ie>},[se,F,me,he,ye,K,fe,R,ge,pe,ce,we,ee]);return<S style={{flex:1}}>
+      <S style={{marginTop:6}}>
             
-            <C style={S.toolbarRow}>
-              <C style={[S.searchContainer,Se&&{borderColor:o.purple,borderWidth:1.5}]}>
-                <Co color={Se?o.purple:o.grayTextWeak}size={15}/>
-                <Qe placeholder="Search URL, status, method, headers, body..."placeholderTextColor={o.grayTextWeak}value={R}onChangeText={Q}onFocus={()=>be(!0)}onBlur={()=>be(!1)}style={S.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            <S style={C.toolbarRow}>
+              <S style={[C.searchContainer,Ce&&{borderColor:o.purple,borderWidth:1.5}]}>
+                <To color={Ce?o.purple:o.grayTextWeak}size={15}/>
+                <Qe placeholder="Search URL, status, method, headers, body..."placeholderTextColor={o.grayTextWeak}value={R}onChangeText={Q}onFocus={()=>be(!0)}onBlur={()=>be(!1)}style={C.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
-                {R.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                    <C style={{backgroundColor:`${o.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                {R.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                    <S style={{backgroundColor:`${o.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
                       <I style={{color:o.purple,fontSize:9.5,fontFamily:k.interBold}}>
                         {E.length}
                       </I>
-                    </C>
-                    <Ge onPress={()=>Q("")}hitSlop={10}style={S.clearBtn}>
-                      <So color={o.grayTextWeak}size={13}/>
+                    </S>
+                    <Ge onPress={()=>Q("")}hitSlop={10}style={C.clearBtn}>
+                      <Io color={o.grayTextWeak}size={13}/>
                     </Ge>
-                  </C>}
-              </C>
+                  </S>}
+              </S>
 
-              <C style={S.toolbarRight}>
-                <M style={[S.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={Re}hitSlop={6}>
-                  <To color={o.errorColor}size={15}/>
-                  {K.size>0&&<C style={S.trashBadge}>
-                      <I style={S.trashBadgeText}>
+              <S style={C.toolbarRight}>
+                <M style={[C.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={Re}hitSlop={6}>
+                  <Vo color={o.errorColor}size={15}/>
+                  {K.size>0&&<S style={C.trashBadge}>
+                      <I style={C.trashBadgeText}>
                         {K.size}
                       </I>
-                    </C>}
+                    </S>}
                 </M>
 
-                <M style={[S.toolbarBtn,F&&{borderColor:o.purple,backgroundColor:`${o.purple}15`}]}onPress={()=>Le(e=>!e)}hitSlop={6}accessibilityLabel={F?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
+                <M style={[C.toolbarBtn,F&&{borderColor:o.purple,backgroundColor:`${o.purple}15`}]}onPress={()=>Le(e=>!e)}hitSlop={6}accessibilityLabel={F?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
                   <Fe color={F?o.purple:o.grayTextStrong}size={16}/>
-                  {F&&<C style={S.activeFilterDot}/>}
+                  {F&&<S style={C.activeFilterDot}/>}
                 </M>
 
-                <M style={S.toolbarBtn}onPress={()=>X(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
-                  <Io direction={Be==="newest"?"down":"up"}color={o.grayTextStrong}size={18}/>
+                <M style={C.toolbarBtn}onPress={()=>X(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <Fo direction={Be==="newest"?"down":"up"}color={o.grayTextStrong}size={18}/>
                 </M>
-              </C>
-            </C>
+              </S>
+            </S>
 
             
-            <C style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
+            <S style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
               <_e horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
                 {Oe.map(e=>{const T=U===e.id,z=e.color||o.purple,x=T?o.white:z;return<M testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{ae(T?"all":e.id)}}>
-                      <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:T?z:`${z}12`,borderWidth:1,borderColor:T?z:`${z}30`,gap:5}}>
+                      <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:T?z:`${z}12`,borderWidth:1,borderColor:T?z:`${z}30`,gap:5}}>
                         {e.id==="all"&&<Fe size={11}color={x}/>}
-                        {e.id==="errors"&&<Bo size={11}color={x}/>}
-                        {e.id==="success"&&<Lo size={11}color={x}/>}
-                        {e.id==="slow"&&<Po size={11}color={x}/>}
-                        {e.id==="POST"&&<Eo size={11}color={x}/>}
-                        {e.id==="GET"&&<$o size={11}color={x}/>}
-                        {e.id==="graphql"&&<Do size={11}color={x}/>}
+                        {e.id==="errors"&&<Eo size={11}color={x}/>}
+                        {e.id==="success"&&<Po size={11}color={x}/>}
+                        {e.id==="slow"&&<$o size={11}color={x}/>}
+                        {e.id==="POST"&&<Do size={11}color={x}/>}
+                        {e.id==="GET"&&<Mo size={11}color={x}/>}
+                        {e.id==="graphql"&&<No size={11}color={x}/>}
                         <I style={{fontFamily:k.interBold,fontSize:10.5,color:T?o.white:o.primaryBlack}}>
                           {e.label}
                         </I>
-                        <C style={{backgroundColor:T?"rgba(255,255,255,0.25)":`${z}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
+                        <S style={{backgroundColor:T?"rgba(255,255,255,0.25)":`${z}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
                           <I style={{fontFamily:k.interBold,fontSize:9,color:T?o.white:z}}>
                             {e.count}
                           </I>
-                        </C>
-                      </C>
+                        </S>
+                      </S>
                     </M>})}
               </_e>
 
-              <M onPress={()=>Ce(!0)}style={{flexShrink:0}}>
-                <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:$?`${o.purple}20`:o.grayBackground,borderWidth:1,borderColor:$?o.purple:o.grayBorderSecondary,gap:5,shadowColor:o.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
-                  <Vo size={11}color={$?o.purple:o.grayText}/>
+              <M onPress={()=>Se(!0)}style={{flexShrink:0}}>
+                <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:$?`${o.purple}20`:o.grayBackground,borderWidth:1,borderColor:$?o.purple:o.grayBorderSecondary,gap:5,shadowColor:o.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
+                  <Ro size={11}color={$?o.purple:o.grayText}/>
                   <I style={{fontFamily:k.interBold,fontSize:10.5,color:$?o.purple:o.grayText}}>
                     {ee("network.moreFilters","More Filters")}
                   </I>
-                  {$&&<C style={{backgroundColor:o.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
+                  {$&&<S style={{backgroundColor:o.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
                       <I style={{fontFamily:k.interBold,fontSize:8.5,color:o.white}}>
                         {De}
                       </I>
-                    </C>}
-                </C>
+                    </S>}
+                </S>
               </M>
-            </C>
+            </S>
 
             
-            {(U!=="all"||R.trim().length>0||$||E.length!==W.length)&&<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${o.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${o.purple}25`}}>
+            {(U!=="all"||R.trim().length>0||$||E.length!==W.length)&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${o.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${o.purple}25`}}>
                 <I style={{fontFamily:k.interMedium,fontSize:10.5,color:o.purple}}>
                   Showing {E.length} of {W.length} requests
                 </I>
-                <M onPress={()=>{Q(""),ae("all"),H(new Set),v(new Set),J("all"),Y("all"),Z("time_desc"),ue("all")}}>
+                <M onPress={()=>{Q(""),ae("all"),q(new Set),v(new Set),J("all"),Y("all"),Z("time_desc"),ue("all")}}>
                   <I style={{fontFamily:k.interBold,fontSize:10.5,color:o.errorColor}}>
                     Clear All Filters
                   </I>
                 </M>
-              </C>}
-          </C>
+              </S>}
+          </S>
 
-        <We ref={Pe}data={se}keyExtractor={$e}renderItem={Ae}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Je isSearch={R.length>0||$||U!=="all"}searchQuery={R}customTitle={R.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{Q(""),H(new Set),v(new Set),J("all"),Y("all"),Z("time_desc"),ae("all"),ue("all")}}/>}ListFooterComponent={j.length>0?<Ye count={F?E.length:Math.min(oe,E.length)}totalCount={E.length}label="requests"hasMore={!F&&E.length>oe}loadMoreStep={30}onLoadMore={()=>Te(e=>e+30)}/>:null}style={{flex:1}}contentContainerStyle={[S.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+        <We ref={Pe}data={se}keyExtractor={$e}renderItem={Ae}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Je isSearch={R.length>0||$||U!=="all"}searchQuery={R}customTitle={R.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{Q(""),q(new Set),v(new Set),J("all"),Y("all"),Z("time_desc"),ae("all"),ue("all")}}/>}ListFooterComponent={j.length>0?<S style={{paddingBottom:24}}>
+              <Ze containerStyle={{marginHorizontal:10,marginTop:10,marginBottom:10}}/>
+              <Ye count={F?E.length:Math.min(oe,E.length)}totalCount={E.length}label="requests"hasMore={!F&&E.length>oe}loadMoreStep={30}onLoadMore={()=>Te(e=>e+30)}/>
+            </S>:null}style={{flex:1}}contentContainerStyle={[C.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <Ze visible={Ee}onClose={()=>Ce(!1)}filters={Me}onApply={Ne}searchQuery={R}/>
-    </C>});export default Mo;
+      <So visible={Ee}onClose={()=>Se(!1)}filters={Me}onApply={Ne}searchQuery={R}/>
+    </S>});export default Oo;