react-native-inapp-inspector 2.3.11 → 2.3.13

package/dist/esm/helpers/qrGenerator.js

@@ -1,167 +1,38 @@
+import qrcode from 'qrcode-generator';
 export function generateQRMatrix(text, ecc = 'M') {
     try {
-        return createQRMatrix(text, ecc);
-    }
-    catch {
-        return createFallbackMatrix(text);
-    }
-}
-function createQRMatrix(data, ecc) {
-    const length = data.length;
-    let version = 1;
-    if (length > 14)
-        version = 2;
-    if (length > 26)
-        version = 3;
-    if (length > 42)
-        version = 4;
-    if (length > 62)
-        version = 5;
-    if (length > 84)
-        version = 6;
-    if (length > 106)
-        version = 7;
-    if (length > 122)
-        version = 8;
-    if (length > 152)
-        version = 9;
-    if (length > 180)
-        version = 10;
-    const size = version * 4 + 17;
-    const matrix = Array(size)
-        .fill(null)
-        .map(() => Array(size).fill(null));
-    addFinderPattern(matrix, 0, 0);
-    addFinderPattern(matrix, size - 7, 0);
-    addFinderPattern(matrix, 0, size - 7);
-    for (let i = 8; i < size - 8; i++) {
-        const val = i % 2 === 0;
-        if (matrix[6][i] === null)
-            matrix[6][i] = val;
-        if (matrix[i][6] === null)
-            matrix[i][6] = val;
-    }
-    if (version >= 2) {
-        const pos = getAlignmentPositions(version);
-        for (const r of pos) {
-            for (const c of pos) {
-                if (matrix[r][c] === null) {
-                    addAlignmentPattern(matrix, r - 2, c - 2);
-                }
+        const qr = qrcode(0, ecc);
+        qr.addData(text);
+        qr.make();
+        const count = qr.getModuleCount();
+        const matrix = [];
+        for (let row = 0; row < count; row++) {
+            const rowData = [];
+            for (let col = 0; col < count; col++) {
+                rowData.push(qr.isDark(row, col));
             }
+            matrix.push(rowData);
         }
-    }
-    const bits = [];
-    bits.push(false, true, false, false);
-    for (let i = 7; i >= 0; i--) {
-        bits.push(((length >> i) & 1) === 1);
-    }
-    for (let i = 0; i < length; i++) {
-        const code = data.charCodeAt(i);
-        for (let b = 7; b >= 0; b--) {
-            bits.push(((code >> b) & 1) === 1);
-        }
-    }
-    for (let i = 0; i < 4 && bits.length % 8 !== 0; i++) {
-        bits.push(false);
-    }
-    while (bits.length % 8 !== 0) {
-        bits.push(false);
-    }
-    const padBytes = [0xec, 0x11];
-    let padIdx = 0;
-    const totalDataBits = size * size * 0.6;
-    while (bits.length < totalDataBits) {
-        const b = padBytes[padIdx % 2];
-        padIdx++;
-        for (let bit = 7; bit >= 0; bit--) {
-            bits.push(((b >> bit) & 1) === 1);
-        }
-    }
-    let bitIdx = 0;
-    let upwards = true;
-    for (let col = size - 1; col > 0; col -= 2) {
-        if (col === 6)
-            col--;
-        const rows = upwards
-            ? Array.from({ length: size }, (_, i) => size - 1 - i)
-            : Array.from({ length: size }, (_, i) => i);
-        for (const row of rows) {
-            for (const c of [col, col - 1]) {
-                if (matrix[row][c] === null) {
-                    const bit = bitIdx < bits.length ? bits[bitIdx++] : false;
-                    const mask = (row + c) % 2 === 0;
-                    matrix[row][c] = bit !== mask;
+        return matrix;
+    }
+    catch (err) {
+        try {
+            const qr = qrcode(10, ecc);
+            qr.addData(text);
+            qr.make();
+            const count = qr.getModuleCount();
+            const matrix = [];
+            for (let row = 0; row < count; row++) {
+                const rowData = [];
+                for (let col = 0; col < count; col++) {
+                    rowData.push(qr.isDark(row, col));
                 }
+                matrix.push(rowData);
             }
+            return matrix;
         }
-        upwards = !upwards;
-    }
-    return matrix.map(row => row.map(cell => cell ?? false));
-}
-function addFinderPattern(matrix, row, col) {
-    for (let r = -1; r <= 7; r++) {
-        for (let c = -1; c <= 7; c++) {
-            const mr = row + r;
-            const mc = col + c;
-            if (mr >= 0 && mr < matrix.length && mc >= 0 && mc < matrix.length) {
-                if ((r >= 0 && r <= 6 && (c === 0 || c === 6)) ||
-                    (c >= 0 && c <= 6 && (r === 0 || r === 6)) ||
-                    (r >= 2 && r <= 4 && c >= 2 && c <= 4)) {
-                    matrix[mr][mc] = true;
-                }
-                else if (r >= 0 && r <= 6 && c >= 0 && c <= 6) {
-                    matrix[mr][mc] = false;
-                }
-                else {
-                    matrix[mr][mc] = false;
-                }
-            }
+        catch {
+            return [];
         }
     }
 }
-function addAlignmentPattern(matrix, row, col) {
-    for (let r = 0; r < 5; r++) {
-        for (let c = 0; c < 5; c++) {
-            const isOuter = r === 0 || r === 4 || c === 0 || c === 4;
-            const isCenter = r === 2 && c === 2;
-            matrix[row + r][col + c] = isOuter || isCenter;
-        }
-    }
-}
-function getAlignmentPositions(version) {
-    if (version === 1)
-        return [];
-    if (version === 2)
-        return [6, 18];
-    if (version === 3)
-        return [6, 22];
-    if (version === 4)
-        return [6, 26];
-    if (version === 5)
-        return [6, 30];
-    if (version === 6)
-        return [6, 34];
-    if (version === 7)
-        return [6, 22, 38];
-    if (version === 8)
-        return [6, 24, 42];
-    if (version === 9)
-        return [6, 26, 46];
-    return [6, 28, 50];
-}
-function createFallbackMatrix(text) {
-    const size = 25;
-    const matrix = Array(size)
-        .fill(false)
-        .map(() => Array(size).fill(false));
-    addFinderPattern(matrix, 0, 0);
-    addFinderPattern(matrix, size - 7, 0);
-    addFinderPattern(matrix, 0, size - 7);
-    for (let i = 0; i < text.length; i++) {
-        const r = (i * 3) % (size - 10) + 8;
-        const c = (i * 7) % (size - 10) + 8;
-        matrix[r][c] = true;
-    }
-    return matrix;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.11",
+  "version": "2.3.13",
   "description": "The zero-config, all-in-one in-app debugger for React Native & Expo. Inspect Network (fetch/axios), Console logs, Stack Traces, Redux State, Firebase Analytics, and JS Bundle size directly on device.",
   "repository": {
     "type": "git",
@@ -174,6 +174,8 @@
     "typescript": "5.8.3"
   },
   "dependencies": {
-    "@react-native-clipboard/clipboard": "1.16.3"
+    "@react-native-clipboard/clipboard": "1.16.3",
+    "@types/qrcode-generator": "^0.0.16",
+    "qrcode-generator": "^2.0.4"
   }
 }

package/src/components/HeadersSection.tsx

@@ -79,10 +79,15 @@ const HeaderRow = React.memo(function HeaderRow({
           {value}
         </Text>
         {isLong && (
-          <View style={styles.htExpandRow}>
+          <View style={[styles.htExpandRow, {flexDirection: 'row', alignItems: 'center', gap: 4}]}>
             <Text style={styles.htExpandText}>
-              {expanded ? '▲ less' : '▼ more'}
+              {expanded ? 'less' : 'more'}
             </Text>
+            <ChevronIcon
+              direction={expanded ? 'up' : 'down'}
+              color={AppColors.purple}
+              size={10}
+            />
           </View>
         )}
       </Pressable>

package/src/components/Inspector/BundleTab.tsx

@@ -48,6 +48,7 @@ import {
   AppleIcon,
   AndroidIcon,
   DownloadIcon,
+  ChevronIcon,
 } from '../NetworkIcons';
 
 import Svg, {
@@ -808,9 +809,13 @@ const BundleTreeNodeView: React.FC<{
           onPress={() => toggleFolder(node.fullPath)}
           style={[bundleStyles.treeFolderRow, {paddingLeft: indentLeft}]}>
           <View style={bundleStyles.treeRowLeft}>
-            <Text style={bundleStyles.treeChevron}>
-              {isCollapsed ? '▸' : '▾'}
-            </Text>
+            <View style={{marginRight: 4}}>
+              <ChevronIcon
+                direction={isCollapsed ? 'right' : 'down'}
+                size={12}
+                color={AppColors.grayTextWeak}
+              />
+            </View>
             {isCollapsed ? (
               <FolderIcon color={AppColors.amber500} size={15} />
             ) : (
@@ -1465,7 +1470,7 @@ const BundleTab = React.memo(() => {
                               letterSpacing: 0.3,
                               textTransform: 'uppercase',
                             }}>
-                            Live Metro URL ↗
+                            Live Metro URL
                           </Text>
                         </View>
                         <Text

package/src/components/Inspector/DebuggingTab.tsx

@@ -31,6 +31,7 @@ import {
   ExternalLinkIcon,
   RepeatIcon,
   ShieldAlertIcon,
+  InfoCircleIcon,
 } from '../NetworkIcons';
 
 interface PortStatus {
@@ -137,14 +138,15 @@ export const DebuggingTab: React.FC = () => {
 
   // Construct target URLs for QR codes
   const metroBundleUrl = `http://${hostIp}:${selectedPort}/index.bundle?platform=android&dev=true`;
+  const directServerUrl = `http://${hostIp}:${selectedPort}`;
   const apkDownloadUrl = `http://${hostIp}:${selectedPort}/${apkPath}`;
   const devSettingsHost = `${hostIp}:${selectedPort}`;
 
   const currentQrValue = useMemo(() => {
     if (activeQrTab === 'apk') return apkDownloadUrl;
     if (activeQrTab === 'host') return devSettingsHost;
-    return metroBundleUrl;
-  }, [activeQrTab, apkDownloadUrl, devSettingsHost, metroBundleUrl]);
+    return directServerUrl;
+  }, [activeQrTab, apkDownloadUrl, devSettingsHost, directServerUrl]);
 
   const activePortInfo = portsStatus[selectedPort];
 
@@ -179,10 +181,10 @@ export const DebuggingTab: React.FC = () => {
               </View>
               <Text style={styles.serverSubtitle}>
                 {activePortInfo?.status === 'active'
-                  ? `🟢 Active & Bundling (${activePortInfo.latencyMs}ms)`
+                  ? `Active & Bundling (${activePortInfo.latencyMs}ms)`
                   : activePortInfo?.status === 'checking'
-                  ? '🟡 Probing Metro Ports...'
-                  : '🔴 Standby / Select active port'}
+                  ? 'Probing Metro Ports...'
+                  : 'Standby / Select active port'}
               </Text>
             </View>
           </View>
@@ -272,9 +274,12 @@ export const DebuggingTab: React.FC = () => {
           />
           <Text style={styles.inputSuffix}>:{selectedPort}</Text>
         </View>
-        <Text style={styles.inputHint}>
-          💡 Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
-        </Text>
+        <View style={{flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 6}}>
+          <InfoCircleIcon size={13} color={AppColors.grayTextWeak} />
+          <Text style={[styles.inputHint, {marginTop: 0, flex: 1}]}>
+            Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
+          </Text>
+        </View>
       </View>
 
       {/* ─── Interactive QR Code Generator Card ──────────────────────── */}
@@ -352,13 +357,22 @@ export const DebuggingTab: React.FC = () => {
           />
 
           <View style={styles.qrInfoBox}>
-            <Text style={styles.qrTargetTitle}>
-              {activeQrTab === 'apk'
-                ? '📦 Direct APK Download URL'
-                : activeQrTab === 'host'
-                ? '📱 Dev Settings Bundle Host'
-                : '⚡ Live Metro Fast-Refresh Endpoint'}
-            </Text>
+            <View style={{flexDirection: 'row', alignItems: 'center', gap: 5, marginBottom: 2}}>
+              {activeQrTab === 'apk' ? (
+                <PackageIcon size={14} color={AppColors.purple} />
+              ) : activeQrTab === 'host' ? (
+                <SmartphoneIcon size={14} color={AppColors.purple} />
+              ) : (
+                <BoltIcon size={14} color={AppColors.amber500} />
+              )}
+              <Text style={styles.qrTargetTitle}>
+                {activeQrTab === 'apk'
+                  ? 'Direct APK Download URL'
+                  : activeQrTab === 'host'
+                  ? 'Dev Settings Bundle Host'
+                  : 'Live Metro Fast-Refresh Endpoint'}
+              </Text>
+            </View>
             <Text style={styles.qrTargetUrl} numberOfLines={2} ellipsizeMode="middle">
               {currentQrValue}
             </Text>
@@ -388,7 +402,10 @@ export const DebuggingTab: React.FC = () => {
 
       {/* ─── Bare React Native Multi-Device Setup Guide ───────────────── */}
       <View style={styles.guideCard}>
-        <Text style={styles.guideHeading}>📱 HOW TO CONNECT ANDROID DEVICE:</Text>
+        <View style={{flexDirection: 'row', alignItems: 'center', gap: 6, marginBottom: 12}}>
+          <SmartphoneIcon size={15} color={AppColors.primaryLight} />
+          <Text style={[styles.guideHeading, {marginBottom: 0}]}>HOW TO CONNECT ANDROID DEVICE:</Text>
+        </View>
 
         <View style={styles.stepRow}>
           <View style={styles.stepNumberBadge}>
@@ -419,7 +436,10 @@ export const DebuggingTab: React.FC = () => {
             <Text style={styles.stepNumberText}>3</Text>
           </View>
           <View style={{flex: 1}}>
-            <Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh ⚡</Text>
+            <View style={{flexDirection: 'row', alignItems: 'center', gap: 4}}>
+              <Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh</Text>
+              <BoltIcon size={13} color={AppColors.amber500} />
+            </View>
             <Text style={styles.stepDesc}>
               Any changes saved in VS Code will immediately update <Text style={{fontWeight: '700'}}>both the iOS Simulator and physical Android phone</Text> in real-time!
             </Text>

package/src/components/Inspector/NetworkDetail.tsx

@@ -432,7 +432,7 @@ const NetworkDetail = React.memo(() => {
                           letterSpacing: 0.4,
                           textTransform: 'uppercase',
                         }}>
-                        ENDPOINT URL ↗
+                        ENDPOINT URL
                       </Text>
                     </View>
 
@@ -473,7 +473,7 @@ const NetworkDetail = React.memo(() => {
                             fontSize: 9,
                             color: AppColors.sky600,
                           }}>
-                          Open ↗
+                          Open
                         </Text>
                       </View>
                     </View>

package/src/components/Inspector/NetworkFilterModal.tsx

@@ -27,6 +27,11 @@ import {
   BoltIcon,
   GlobeIcon,
   LockIcon,
+  UnlockIcon,
+  RocketIcon,
+  TurtleIcon,
+  HourglassIcon,
+  PackageIcon,
 } from '../NetworkIcons';
 import TouchableScale from '../TouchableScale';
 
@@ -405,12 +410,13 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
               <Text style={styles.sectionTitle}>LATENCY & SPEED</Text>
               <View style={styles.chipsWrap}>
                 {[
-                  {key: 'all' as const, label: 'All Speeds', color: AppColors.purple},
-                  {key: 'fast' as const, label: '⚡ Fast (<200ms)', color: AppColors.greenColor, count: counts.fastCount},
-                  {key: 'normal' as const, label: '⏱️ Normal (200-500ms)', color: AppColors.skyBlue, count: counts.normalCount},
-                  {key: 'slow' as const, label: '⚠️ Slow (>500ms)', color: AppColors.errorColor, count: counts.slowCount},
+                  {key: 'all' as const, label: 'All Speeds', color: AppColors.purple, icon: LayersIcon},
+                  {key: 'fast' as const, label: 'Fast (<200ms)', color: AppColors.greenColor, icon: BoltIcon, count: counts.fastCount},
+                  {key: 'normal' as const, label: 'Normal (200-500ms)', color: AppColors.skyBlue, icon: ClockIcon, count: counts.normalCount},
+                  {key: 'slow' as const, label: 'Slow (>500ms)', color: AppColors.errorColor, icon: CircleAlertIcon, count: counts.slowCount},
                 ].map(item => {
                   const isSelected = draft.latency === item.key;
+                  const IconComp = item.icon;
                   return (
                     <TouchableOpacity
                       key={item.key}
@@ -423,6 +429,10 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
                           borderColor: item.color,
                         },
                       ]}>
+                      <IconComp
+                        size={13}
+                        color={isSelected ? item.color : AppColors.grayTextWeak}
+                      />
                       <Text
                         style={[
                           styles.chipLabel,
@@ -448,11 +458,12 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
               <Text style={styles.sectionTitle}>PROTOCOL</Text>
               <View style={styles.chipsWrap}>
                 {[
-                  {key: 'all' as const, label: 'All Protocols', color: AppColors.purple},
-                  {key: 'https' as const, label: '🔒 HTTPS Secure', color: AppColors.mintGreenText, count: counts.httpsCount},
-                  {key: 'http' as const, label: '🔓 HTTP Insecure', color: AppColors.amber700, count: counts.httpCount},
+                  {key: 'all' as const, label: 'All Protocols', color: AppColors.purple, icon: GlobeIcon},
+                  {key: 'https' as const, label: 'HTTPS Secure', color: AppColors.mintGreenText, icon: LockIcon, count: counts.httpsCount},
+                  {key: 'http' as const, label: 'HTTP Insecure', color: AppColors.amber700, icon: UnlockIcon, count: counts.httpCount},
                 ].map(item => {
                   const isSelected = draft.protocol === item.key;
+                  const IconComp = item.icon;
                   return (
                     <TouchableOpacity
                       key={item.key}
@@ -465,6 +476,10 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
                           borderColor: item.color,
                         },
                       ]}>
+                      <IconComp
+                        size={13}
+                        color={isSelected ? item.color : AppColors.grayTextWeak}
+                      />
                       <Text
                         style={[
                           styles.chipLabel,
@@ -490,13 +505,14 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
               <Text style={styles.sectionTitle}>SORT BY</Text>
               <View style={styles.chipsWrap}>
                 {[
-                  {key: 'time_desc' as const, label: '⏱️ Newest First (Default)'},
-                  {key: 'time_asc' as const, label: '⌛ Oldest First'},
-                  {key: 'duration_desc' as const, label: '🐢 Slowest Response'},
-                  {key: 'duration_asc' as const, label: '🚀 Fastest Response'},
-                  {key: 'size_desc' as const, label: '📦 Largest Response Size'},
+                  {key: 'time_desc' as const, label: 'Newest First (Default)', icon: ClockIcon},
+                  {key: 'time_asc' as const, label: 'Oldest First', icon: HourglassIcon},
+                  {key: 'duration_desc' as const, label: 'Slowest Response', icon: TurtleIcon},
+                  {key: 'duration_asc' as const, label: 'Fastest Response', icon: RocketIcon},
+                  {key: 'size_desc' as const, label: 'Largest Response Size', icon: PackageIcon},
                 ].map(item => {
                   const isSelected = draft.sortBy === item.key;
+                  const IconComp = item.icon;
                   return (
                     <TouchableOpacity
                       key={item.key}
@@ -509,6 +525,10 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
                           borderColor: AppColors.purple,
                         },
                       ]}>
+                      <IconComp
+                        size={13}
+                        color={isSelected ? AppColors.purple : AppColors.grayTextWeak}
+                      />
                       <Text
                         style={[
                           styles.chipLabel,

package/src/components/Inspector/StorageTab.tsx

@@ -30,6 +30,7 @@ import {
   LayersIcon,
   ResetIcon,
   ChevronIcon,
+  WarningTriangleIcon,
 } from '../NetworkIcons';
 import {
   fetchStorageEntries,
@@ -162,9 +163,16 @@ const StorageEntryCard = React.memo(function StorageEntryCard({
           {displayValue}
         </Text>
         {entry.value.length > 80 && (
-          <Text style={styles.expandHint}>
-            {isExpanded ? '▲ Collapse' : '▼ Expand'}
-          </Text>
+          <View style={{flexDirection: 'row', alignItems: 'center', gap: 4, marginTop: 4}}>
+            <Text style={styles.expandHint}>
+              {isExpanded ? 'Collapse' : 'Expand'}
+            </Text>
+            <ChevronIcon
+              direction={isExpanded ? 'up' : 'down'}
+              size={10}
+              color={AppColors.purple}
+            />
+          </View>
         )}
       </TouchableScale>
     </View>
@@ -710,7 +718,10 @@ export const StorageTab = React.memo(() => {
                 autoCapitalize="none"
               />
               {jsonError && (
-                <Text style={styles.errorText}>⚠️ {jsonError}</Text>
+                <View style={{flexDirection: 'row', alignItems: 'center', gap: 5, marginTop: 4}}>
+                  <WarningTriangleIcon size={12} color={AppColors.errorColor} />
+                  <Text style={styles.errorText}>{jsonError}</Text>
+                </View>
               )}
             </View>
 

package/src/components/JsonViewer.tsx

@@ -7,7 +7,7 @@ import TreeNode from './TreeNode';
 import SegmentedTabs from './SegmentedTabs';
 import HighlightText from './HighlightText';
 import CopyButton from './CopyButton';
-import {PrettyIcon, RawIcon, TableIcon} from './NetworkIcons';
+import {PrettyIcon, RawIcon, TableIcon, ChevronIcon} from './NetworkIcons';
 
 // Styles
 import {AppColors} from '../styles/AppColors';
@@ -77,10 +77,15 @@ const JsonTableRow = React.memo(({
           <TouchableOpacity
             onPress={() => setExpanded(prev => !prev)}
             hitSlop={6}
-            style={localStyles.showMoreBtn}>
+            style={[localStyles.showMoreBtn, {flexDirection: 'row', alignItems: 'center', gap: 4}]}>
             <Text style={localStyles.showMoreText}>
-              {expanded ? 'Show less ▲' : 'Show more ▼'}
+              {expanded ? 'Show less' : 'Show more'}
             </Text>
+            <ChevronIcon
+              direction={expanded ? 'up' : 'down'}
+              size={10}
+              color={AppColors.purple}
+            />
           </TouchableOpacity>
         )}
       </View>

package/src/components/NetworkIcons.tsx

@@ -570,11 +570,16 @@ export const SortArrowIcon = ({
 export const ChevronIcon = ({
   color = AppColors.grayTextWeak,
   size = 14,
+  direction = 'down',
 }: IconProps) => {
+  let path = 'M6 9l6 6 6-6';
+  if (direction === 'up') path = 'M18 15l-6-6-6 6';
+  else if (direction === 'right') path = 'M9 18l6-6-6-6';
+  else if (direction === 'left') path = 'M15 18l-6-6 6-6';
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Path
-        d="M6 9l6 6 6-6"
+        d={path}
         stroke={color}
         strokeWidth="2.5"
         strokeLinecap="round"
@@ -2285,3 +2290,68 @@ export const QrCodeIcon = ({
   </Svg>
 );
 
+export const UnlockIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect
+      x="3"
+      y="11"
+      width="18"
+      height="11"
+      rx="2"
+      ry="2"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M7 11V7a5 5 0 0 1 9.9-1"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const RocketIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09zM12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6.05 11a22.35 22.35 0 0 1-3.95 2z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M9 12l-4 4M15 6l-3 3"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const TurtleIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Ellipse cx="12" cy="14" rx="7" ry="5" stroke={color} strokeWidth="2" />
+    <Circle cx="12" cy="6" r="3" stroke={color} strokeWidth="2" />
+    <Path
+      d="M5 12l-2-2M19 12l2-2M6 18l-2 2M18 18l2 2"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </Svg>
+);
+