@one_deploy/sdk 1.0.6 → 1.0.7

package/dist/react-native.mjs

@@ -1,4 +1,5 @@
-import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import { useState } from 'react';
+import { StyleSheet, View, Text, TouchableOpacity, Modal, Pressable, ScrollView, Dimensions, Platform } from 'react-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/config/index.ts
@@ -1683,6 +1684,10 @@ var CHAIN_CONFIG = {
   zksync: { name: "zkSync", icon: "\u2B22", color: "#8C8DFC" },
   scroll: { name: "Scroll", icon: "\u25CE", color: "#FFEEDA" }
 };
+var isDesktop = () => {
+  const { width } = Dimensions.get("window");
+  return Platform.OS === "web" && width >= 768;
+};
 var OneChainSelector = ({
   supportedChains,
   selectedChains,
@@ -1692,9 +1697,12 @@ var OneChainSelector = ({
   title,
   subtitle,
   minSelections = 1,
+  placeholder = "Select chains...",
   style,
   titleStyle
 }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const desktop = isDesktop();
   const handleSelect = (chain) => {
     if (multiSelect) {
       if (selectedChains.includes(chain) && selectedChains.length <= minSelections) {
@@ -1705,42 +1713,129 @@ var OneChainSelector = ({
       if (!selectedChains.includes(chain)) {
         onSelectChain(chain);
       }
+      setIsOpen(false);
     }
   };
+  if (desktop) {
+    return /* @__PURE__ */ jsxs(View, { style: [styles.container, style], children: [
+      title && /* @__PURE__ */ jsx(Text, { style: [styles.title, titleStyle], children: title }),
+      subtitle && /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: subtitle }),
+      /* @__PURE__ */ jsx(View, { style: styles.desktopGrid, children: supportedChains.map((chain) => {
+        const chainInfo = CHAIN_CONFIG[chain] || { name: chain, icon: "\u25CF", color: "#888" };
+        const isSelected = selectedChains.includes(chain);
+        return /* @__PURE__ */ jsxs(
+          TouchableOpacity,
+          {
+            style: [
+              styles.desktopChip,
+              isSelected && styles.desktopChipSelected,
+              isSelected && { borderColor: accentColor, backgroundColor: accentColor + "12" }
+            ],
+            onPress: () => handleSelect(chain),
+            activeOpacity: 0.7,
+            children: [
+              /* @__PURE__ */ jsx(View, { style: [styles.desktopIconBg, { backgroundColor: chainInfo.color + "20" }], children: /* @__PURE__ */ jsx(Text, { style: [styles.desktopIcon, { color: chainInfo.color }], children: chainInfo.icon }) }),
+              /* @__PURE__ */ jsx(Text, { style: [
+                styles.desktopChipText,
+                isSelected && { color: accentColor, fontWeight: "600" }
+              ], children: chainInfo.name }),
+              isSelected && /* @__PURE__ */ jsx(View, { style: [styles.desktopCheckbox, { backgroundColor: accentColor }], children: /* @__PURE__ */ jsx(Text, { style: styles.desktopCheckIcon, children: "\u2713" }) })
+            ]
+          },
+          chain
+        );
+      }) }),
+      multiSelect && selectedChains.length > 0 && /* @__PURE__ */ jsxs(Text, { style: [styles.selectedCount, { color: accentColor }], children: [
+        selectedChains.length,
+        " chain",
+        selectedChains.length > 1 ? "s" : "",
+        " selected"
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(View, { style: [styles.container, style], children: [
     title && /* @__PURE__ */ jsx(Text, { style: [styles.title, titleStyle], children: title }),
     subtitle && /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: subtitle }),
-    /* @__PURE__ */ jsx(View, { style: styles.chainsContainer, children: supportedChains.map((chain) => {
-      const chainInfo = CHAIN_CONFIG[chain] || { name: chain, icon: "\u25CF", color: "#888" };
-      const isSelected = selectedChains.includes(chain);
-      return /* @__PURE__ */ jsxs(
-        TouchableOpacity,
-        {
-          style: [
-            styles.chainChip,
-            isSelected && styles.chainChipSelected,
-            isSelected && { borderColor: accentColor, backgroundColor: accentColor + "15" }
-          ],
-          onPress: () => handleSelect(chain),
-          activeOpacity: 0.7,
-          children: [
-            /* @__PURE__ */ jsx(View, { style: [styles.chainIconBg, { backgroundColor: chainInfo.color + "20" }], children: /* @__PURE__ */ jsx(Text, { style: [styles.chainIcon, { color: chainInfo.color }], children: chainInfo.icon }) }),
-            /* @__PURE__ */ jsx(Text, { style: [
-              styles.chainText,
-              isSelected && { color: accentColor, fontWeight: "600" }
-            ], children: chainInfo.name }),
-            isSelected && /* @__PURE__ */ jsx(Text, { style: [styles.checkmark, { color: accentColor }], children: "\u2713" })
-          ]
-        },
-        chain
-      );
-    }) }),
-    multiSelect && selectedChains.length > 0 && /* @__PURE__ */ jsx(View, { style: styles.selectedInfo, children: /* @__PURE__ */ jsxs(Text, { style: styles.selectedText, children: [
+    /* @__PURE__ */ jsxs(
+      TouchableOpacity,
+      {
+        style: [styles.dropdownTrigger, { borderColor: isOpen ? accentColor : "#e5e5e5" }],
+        onPress: () => setIsOpen(true),
+        activeOpacity: 0.7,
+        children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.selectedPreview, children: [
+            selectedChains.slice(0, 3).map((chain) => {
+              const chainInfo = CHAIN_CONFIG[chain] || { icon: "\u25CF", color: "#888" };
+              return /* @__PURE__ */ jsx(View, { style: [styles.previewChip, { backgroundColor: chainInfo.color + "20" }], children: /* @__PURE__ */ jsx(Text, { style: [styles.previewIcon, { color: chainInfo.color }], children: chainInfo.icon }) }, chain);
+            }),
+            selectedChains.length > 3 && /* @__PURE__ */ jsx(View, { style: styles.previewMore, children: /* @__PURE__ */ jsxs(Text, { style: styles.previewMoreText, children: [
+              "+",
+              selectedChains.length - 3
+            ] }) }),
+            selectedChains.length === 0 && /* @__PURE__ */ jsx(Text, { style: styles.placeholderText, children: placeholder })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { style: styles.dropdownArrow, children: isOpen ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    multiSelect && selectedChains.length > 0 && /* @__PURE__ */ jsxs(Text, { style: [styles.selectedCount, { color: accentColor }], children: [
       selectedChains.length,
       " chain",
       selectedChains.length > 1 ? "s" : "",
       " selected"
-    ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible: isOpen,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: () => setIsOpen(false),
+        children: /* @__PURE__ */ jsx(Pressable, { style: styles.modalOverlay, onPress: () => setIsOpen(false), children: /* @__PURE__ */ jsxs(View, { style: styles.modalContent, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.modalHeader, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.modalTitle, children: title || "Select Chains" }),
+            /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => setIsOpen(false), children: /* @__PURE__ */ jsx(Text, { style: styles.modalClose, children: "\u2715" }) })
+          ] }),
+          /* @__PURE__ */ jsx(ScrollView, { style: styles.optionsList, showsVerticalScrollIndicator: false, children: supportedChains.map((chain) => {
+            const chainInfo = CHAIN_CONFIG[chain] || { name: chain, icon: "\u25CF", color: "#888" };
+            const isSelected = selectedChains.includes(chain);
+            return /* @__PURE__ */ jsxs(
+              TouchableOpacity,
+              {
+                style: [
+                  styles.optionItem,
+                  isSelected && styles.optionItemSelected,
+                  isSelected && { backgroundColor: accentColor + "10", borderColor: accentColor }
+                ],
+                onPress: () => handleSelect(chain),
+                activeOpacity: 0.7,
+                children: [
+                  /* @__PURE__ */ jsx(View, { style: [styles.optionIconBg, { backgroundColor: chainInfo.color + "20" }], children: /* @__PURE__ */ jsx(Text, { style: [styles.optionIcon, { color: chainInfo.color }], children: chainInfo.icon }) }),
+                  /* @__PURE__ */ jsx(Text, { style: [
+                    styles.optionText,
+                    isSelected && { color: accentColor, fontWeight: "600" }
+                  ], children: chainInfo.name }),
+                  isSelected ? /* @__PURE__ */ jsx(View, { style: [styles.checkbox, { backgroundColor: accentColor }], children: /* @__PURE__ */ jsx(Text, { style: styles.checkboxIcon, children: "\u2713" }) }) : /* @__PURE__ */ jsx(View, { style: styles.checkboxEmpty })
+                ]
+              },
+              chain
+            );
+          }) }),
+          multiSelect && /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              style: [styles.doneButton, { backgroundColor: accentColor }],
+              onPress: () => setIsOpen(false),
+              children: /* @__PURE__ */ jsxs(Text, { style: styles.doneButtonText, children: [
+                "Done (",
+                selectedChains.length,
+                ")"
+              ] })
+            }
+          )
+        ] }) })
+      }
+    )
   ] });
 };
 var styles = StyleSheet.create({
@@ -1758,51 +1853,207 @@ var styles = StyleSheet.create({
     color: "#666",
     marginBottom: 12
   },
-  chainsContainer: {
+  // Desktop styles
+  desktopGrid: {
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: 8
+    gap: 10
   },
-  chainChip: {
+  desktopChip: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: "#e8e8e8",
+    gap: 10,
+    cursor: "pointer"
+  },
+  desktopChipSelected: {
+    borderWidth: 2
+  },
+  desktopIconBg: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  desktopIcon: {
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  desktopChipText: {
+    fontSize: 14,
+    color: "#444"
+  },
+  desktopCheckbox: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: 4
+  },
+  desktopCheckIcon: {
+    fontSize: 12,
+    color: "#fff",
+    fontWeight: "700"
+  },
+  // Mobile dropdown styles
+  dropdownTrigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 14,
+    paddingVertical: 12,
     backgroundColor: "#fff",
     borderRadius: 12,
     borderWidth: 2,
     borderColor: "#e5e5e5",
-    gap: 8
+    minHeight: 52
   },
-  chainChipSelected: {
-    borderWidth: 2
+  selectedPreview: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
   },
-  chainIconBg: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
+  previewChip: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
     alignItems: "center",
     justifyContent: "center"
   },
-  chainIcon: {
+  previewIcon: {
     fontSize: 14,
     fontWeight: "700"
   },
-  chainText: {
+  previewMore: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: "#f0f0f0",
+    borderRadius: 8
+  },
+  previewMoreText: {
+    fontSize: 12,
+    color: "#666",
+    fontWeight: "600"
+  },
+  placeholderText: {
     fontSize: 14,
-    color: "#666"
+    color: "#999"
   },
-  checkmark: {
+  dropdownArrow: {
+    fontSize: 12,
+    color: "#888",
+    marginLeft: 8
+  },
+  selectedCount: {
+    fontSize: 12,
+    marginTop: 6,
+    fontWeight: "500"
+  },
+  // Modal styles
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  modalContent: {
+    width: "85%",
+    maxWidth: 340,
+    maxHeight: "70%",
+    backgroundColor: "#fff",
+    borderRadius: 16,
+    overflow: "hidden"
+  },
+  modalHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f0f0f0"
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: "#1a1a1a"
+  },
+  modalClose: {
+    fontSize: 20,
+    color: "#888",
+    padding: 4
+  },
+  optionsList: {
+    padding: 8
+  },
+  optionItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "transparent",
+    marginBottom: 6,
+    gap: 12
+  },
+  optionItemSelected: {
+    borderWidth: 1
+  },
+  optionIconBg: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  optionIcon: {
     fontSize: 16,
     fontWeight: "700"
   },
-  selectedInfo: {
-    marginTop: 8,
-    paddingVertical: 4
+  optionText: {
+    flex: 1,
+    fontSize: 15,
+    color: "#333"
   },
-  selectedText: {
-    fontSize: 12,
-    color: "#888"
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkboxIcon: {
+    fontSize: 14,
+    color: "#fff",
+    fontWeight: "700"
+  },
+  checkboxEmpty: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: "#ddd"
+  },
+  doneButton: {
+    marginHorizontal: 16,
+    marginVertical: 12,
+    paddingVertical: 14,
+    borderRadius: 10,
+    alignItems: "center"
+  },
+  doneButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#fff"
   }
 });
 var OneTierSelector = ({
@@ -2072,23 +2323,30 @@ var styles3 = StyleSheet.create({
     textAlign: "center"
   }
 });
-var PAIR_ICONS = {
-  "BTC/USDT": "\u20BF",
-  "ETH/USDT": "\u039E",
-  "SOL/USDT": "\u25CE",
-  "BNB/USDT": "\u25C6",
-  "XRP/USDT": "\u2715",
-  "DOGE/USDT": "\xD0",
-  "ADA/USDT": "\u25C8",
-  "AVAX/USDT": "\u25B2",
-  "DOT/USDT": "\u25CF",
-  "MATIC/USDT": "\u2B21",
-  "LINK/USDT": "\u25C7",
-  "UNI/USDT": "\u{1F984}",
-  "ATOM/USDT": "\u269B",
-  "LTC/USDT": "\u0141",
-  "ARB/USDT": "\u25C6",
-  "OP/USDT": "\u25C9"
+var PAIR_CONFIG = {
+  "BTC": { symbol: "BTC/USDT", name: "Bitcoin", icon: "\u20BF", color: "#F7931A" },
+  "ETH": { symbol: "ETH/USDT", name: "Ethereum", icon: "\u039E", color: "#627EEA" },
+  "BNB": { symbol: "BNB/USDT", name: "BNB", icon: "\u25C6", color: "#F3BA2F" },
+  "SOL": { symbol: "SOL/USDT", name: "Solana", icon: "\u25CE", color: "#9945FF" },
+  "XRP": { symbol: "XRP/USDT", name: "Ripple", icon: "\u2715", color: "#23292F" },
+  "DOGE": { symbol: "DOGE/USDT", name: "Dogecoin", icon: "\xD0", color: "#C2A633" },
+  "ADA": { symbol: "ADA/USDT", name: "Cardano", icon: "\u20B3", color: "#0033AD" },
+  "AVAX": { symbol: "AVAX/USDT", name: "Avalanche", icon: "\u25B2", color: "#E84142" },
+  "DOT": { symbol: "DOT/USDT", name: "Polkadot", icon: "\u25CF", color: "#E6007A" },
+  "MATIC": { symbol: "MATIC/USDT", name: "Polygon", icon: "\u2B21", color: "#8247E5" },
+  "LINK": { symbol: "LINK/USDT", name: "Chainlink", icon: "\u25C7", color: "#375BD2" },
+  "UNI": { symbol: "UNI/USDT", name: "Uniswap", icon: "\u{1F984}", color: "#FF007A" },
+  "ATOM": { symbol: "ATOM/USDT", name: "Cosmos", icon: "\u269B", color: "#2E3148" },
+  "LTC": { symbol: "LTC/USDT", name: "Litecoin", icon: "\u0141", color: "#345D9D" },
+  "ARB": { symbol: "ARB/USDT", name: "Arbitrum", icon: "\u25C6", color: "#28A0F0" },
+  "OP": { symbol: "OP/USDT", name: "Optimism", icon: "\u25C9", color: "#FF0420" }
+};
+var PAIR_ICONS = Object.fromEntries(
+  Object.entries(PAIR_CONFIG).map(([key, value]) => [`${key}/USDT`, value.icon])
+);
+var isDesktop2 = () => {
+  const { width } = Dimensions.get("window");
+  return Platform.OS === "web" && width >= 768;
 };
 var OnePairSelector = ({
   supportedPairs,
@@ -2099,9 +2357,12 @@ var OnePairSelector = ({
   subtitle,
   minSelections = 1,
   maxSelections = 0,
+  placeholder = "Select trading pairs...",
   style,
   titleStyle
 }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const desktop = isDesktop2();
   const handleToggle = (pair) => {
     const isSelected = selectedPairs.includes(pair);
     if (isSelected && selectedPairs.length <= minSelections) {
@@ -2112,43 +2373,155 @@ var OnePairSelector = ({
     }
     onTogglePair(pair);
   };
+  const getPairInfo = (pair) => {
+    return PAIR_CONFIG[pair] || { symbol: `${pair}/USDT`, name: pair, icon: "\u25CF", color: "#888" };
+  };
+  if (desktop) {
+    return /* @__PURE__ */ jsxs(View, { style: [styles4.container, style], children: [
+      title && /* @__PURE__ */ jsx(Text, { style: [styles4.title, titleStyle], children: title }),
+      subtitle && /* @__PURE__ */ jsx(Text, { style: styles4.subtitle, children: subtitle }),
+      /* @__PURE__ */ jsx(View, { style: styles4.desktopGrid, children: supportedPairs.map((pair) => {
+        const pairInfo = getPairInfo(pair);
+        const isSelected = selectedPairs.includes(pair);
+        const isDisabled = !isSelected && maxSelections > 0 && selectedPairs.length >= maxSelections;
+        return /* @__PURE__ */ jsxs(
+          TouchableOpacity,
+          {
+            style: [
+              styles4.desktopChip,
+              isSelected && styles4.desktopChipSelected,
+              isSelected && { borderColor: accentColor, backgroundColor: accentColor + "12" },
+              isDisabled && styles4.desktopChipDisabled
+            ],
+            onPress: () => handleToggle(pair),
+            activeOpacity: isDisabled ? 1 : 0.7,
+            children: [
+              /* @__PURE__ */ jsx(View, { style: [styles4.desktopIconBg, { backgroundColor: pairInfo.color + "20" }], children: /* @__PURE__ */ jsx(Text, { style: [styles4.desktopIcon, { color: pairInfo.color }], children: pairInfo.icon }) }),
+              /* @__PURE__ */ jsxs(View, { children: [
+                /* @__PURE__ */ jsx(Text, { style: [
+                  styles4.desktopChipText,
+                  isSelected && { color: accentColor, fontWeight: "600" },
+                  isDisabled && styles4.desktopTextDisabled
+                ], children: pair }),
+                /* @__PURE__ */ jsx(Text, { style: [styles4.desktopChipSubtext, isDisabled && styles4.desktopTextDisabled], children: pairInfo.name })
+              ] }),
+              isSelected && /* @__PURE__ */ jsx(View, { style: [styles4.desktopCheckbox, { backgroundColor: accentColor }], children: /* @__PURE__ */ jsx(Text, { style: styles4.desktopCheckIcon, children: "\u2713" }) })
+            ]
+          },
+          pair
+        );
+      }) }),
+      /* @__PURE__ */ jsxs(View, { style: styles4.infoRow, children: [
+        /* @__PURE__ */ jsxs(Text, { style: [styles4.selectedCount, { color: accentColor }], children: [
+          selectedPairs.length,
+          " pair",
+          selectedPairs.length !== 1 ? "s" : "",
+          " selected"
+        ] }),
+        (minSelections > 0 || maxSelections > 0) && /* @__PURE__ */ jsxs(Text, { style: styles4.limitText, children: [
+          minSelections > 0 && `min: ${minSelections}`,
+          minSelections > 0 && maxSelections > 0 && " / ",
+          maxSelections > 0 && `max: ${maxSelections}`
+        ] })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(View, { style: [styles4.container, style], children: [
     title && /* @__PURE__ */ jsx(Text, { style: [styles4.title, titleStyle], children: title }),
     subtitle && /* @__PURE__ */ jsx(Text, { style: styles4.subtitle, children: subtitle }),
-    /* @__PURE__ */ jsx(View, { style: styles4.pairsContainer, children: supportedPairs.map((pair) => {
-      const isSelected = selectedPairs.includes(pair);
-      const icon = PAIR_ICONS[pair] || "\u25CF";
-      const baseSymbol = pair.split("/")[0];
-      return /* @__PURE__ */ jsxs(
-        TouchableOpacity,
-        {
-          style: [
-            styles4.pairChip,
-            isSelected && styles4.pairChipSelected,
-            isSelected && { backgroundColor: accentColor + "15", borderColor: accentColor }
-          ],
-          onPress: () => handleToggle(pair),
-          activeOpacity: 0.7,
-          children: [
-            /* @__PURE__ */ jsx(Text, { style: styles4.pairIcon, children: icon }),
-            /* @__PURE__ */ jsx(Text, { style: [
-              styles4.pairText,
-              isSelected && { color: accentColor, fontWeight: "600" }
-            ], children: baseSymbol }),
-            isSelected && /* @__PURE__ */ jsx(Text, { style: [styles4.checkmark, { color: accentColor }], children: "\u2713" })
-          ]
-        },
-        pair
-      );
-    }) }),
-    /* @__PURE__ */ jsx(View, { style: styles4.selectedInfo, children: /* @__PURE__ */ jsxs(Text, { style: styles4.selectedText, children: [
-      selectedPairs.length,
-      " pair",
-      selectedPairs.length !== 1 ? "s" : "",
-      " selected",
-      minSelections > 0 && ` (min: ${minSelections})`,
-      maxSelections > 0 && ` (max: ${maxSelections})`
-    ] }) })
+    /* @__PURE__ */ jsxs(
+      TouchableOpacity,
+      {
+        style: [styles4.dropdownTrigger, { borderColor: isOpen ? accentColor : "#e5e5e5" }],
+        onPress: () => setIsOpen(true),
+        activeOpacity: 0.7,
+        children: [
+          /* @__PURE__ */ jsxs(View, { style: styles4.selectedPreview, children: [
+            selectedPairs.slice(0, 4).map((pair) => {
+              const pairInfo = getPairInfo(pair);
+              return /* @__PURE__ */ jsx(View, { style: [styles4.previewChip, { backgroundColor: pairInfo.color + "20" }], children: /* @__PURE__ */ jsx(Text, { style: [styles4.previewIcon, { color: pairInfo.color }], children: pairInfo.icon }) }, pair);
+            }),
+            selectedPairs.length > 4 && /* @__PURE__ */ jsx(View, { style: styles4.previewMore, children: /* @__PURE__ */ jsxs(Text, { style: styles4.previewMoreText, children: [
+              "+",
+              selectedPairs.length - 4
+            ] }) }),
+            selectedPairs.length === 0 && /* @__PURE__ */ jsx(Text, { style: styles4.placeholderText, children: placeholder })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { style: styles4.dropdownArrow, children: isOpen ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(View, { style: styles4.infoRow, children: [
+      /* @__PURE__ */ jsxs(Text, { style: [styles4.selectedCount, { color: accentColor }], children: [
+        selectedPairs.length,
+        " pair",
+        selectedPairs.length !== 1 ? "s" : "",
+        " selected"
+      ] }),
+      (minSelections > 0 || maxSelections > 0) && /* @__PURE__ */ jsxs(Text, { style: styles4.limitText, children: [
+        minSelections > 0 && `min: ${minSelections}`,
+        minSelections > 0 && maxSelections > 0 && " / ",
+        maxSelections > 0 && `max: ${maxSelections}`
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible: isOpen,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: () => setIsOpen(false),
+        children: /* @__PURE__ */ jsx(Pressable, { style: styles4.modalOverlay, onPress: () => setIsOpen(false), children: /* @__PURE__ */ jsxs(View, { style: styles4.modalContent, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles4.modalHeader, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles4.modalTitle, children: title || "Select Trading Pairs" }),
+            /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => setIsOpen(false), children: /* @__PURE__ */ jsx(Text, { style: styles4.modalClose, children: "\u2715" }) })
+          ] }),
+          /* @__PURE__ */ jsx(ScrollView, { style: styles4.optionsList, showsVerticalScrollIndicator: false, children: supportedPairs.map((pair) => {
+            const pairInfo = getPairInfo(pair);
+            const isSelected = selectedPairs.includes(pair);
+            const isDisabled = !isSelected && maxSelections > 0 && selectedPairs.length >= maxSelections;
+            return /* @__PURE__ */ jsxs(
+              TouchableOpacity,
+              {
+                style: [
+                  styles4.optionItem,
+                  isSelected && styles4.optionItemSelected,
+                  isSelected && { backgroundColor: accentColor + "10", borderColor: accentColor },
+                  isDisabled && styles4.optionItemDisabled
+                ],
+                onPress: () => handleToggle(pair),
+                activeOpacity: isDisabled ? 1 : 0.7,
+                children: [
+                  /* @__PURE__ */ jsx(View, { style: [styles4.optionIconBg, { backgroundColor: pairInfo.color + "20" }], children: /* @__PURE__ */ jsx(Text, { style: [styles4.optionIcon, { color: pairInfo.color }], children: pairInfo.icon }) }),
+                  /* @__PURE__ */ jsxs(View, { style: styles4.optionTextContainer, children: [
+                    /* @__PURE__ */ jsx(Text, { style: [
+                      styles4.optionSymbol,
+                      isSelected && { color: accentColor, fontWeight: "600" },
+                      isDisabled && styles4.optionTextDisabled
+                    ], children: pair }),
+                    /* @__PURE__ */ jsx(Text, { style: [styles4.optionName, isDisabled && styles4.optionTextDisabled], children: pairInfo.name })
+                  ] }),
+                  isSelected ? /* @__PURE__ */ jsx(View, { style: [styles4.checkbox, { backgroundColor: accentColor }], children: /* @__PURE__ */ jsx(Text, { style: styles4.checkboxIcon, children: "\u2713" }) }) : /* @__PURE__ */ jsx(View, { style: [styles4.checkboxEmpty, isDisabled && styles4.checkboxDisabled] })
+                ]
+              },
+              pair
+            );
+          }) }),
+          /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              style: [styles4.doneButton, { backgroundColor: accentColor }],
+              onPress: () => setIsOpen(false),
+              children: /* @__PURE__ */ jsxs(Text, { style: styles4.doneButtonText, children: [
+                "Done (",
+                selectedPairs.length,
+                ")"
+              ] })
+            }
+          )
+        ] }) })
+      }
+    )
   ] });
 };
 var styles4 = StyleSheet.create({
@@ -2166,43 +2539,246 @@ var styles4 = StyleSheet.create({
     color: "#666",
     marginBottom: 12
   },
-  pairsContainer: {
+  // Desktop styles
+  desktopGrid: {
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: 8
+    gap: 10
   },
-  pairChip: {
+  desktopChip: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
     backgroundColor: "#fff",
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: "#e5e5e5",
-    gap: 6
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: "#e8e8e8",
+    gap: 10,
+    cursor: "pointer",
+    minWidth: 140
   },
-  pairChipSelected: {
+  desktopChipSelected: {
     borderWidth: 2
   },
-  pairIcon: {
-    fontSize: 14
+  desktopChipDisabled: {
+    opacity: 0.5
   },
-  pairText: {
+  desktopIconBg: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  desktopIcon: {
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  desktopChipText: {
     fontSize: 14,
-    color: "#666"
+    fontWeight: "500",
+    color: "#333"
   },
-  checkmark: {
+  desktopChipSubtext: {
+    fontSize: 11,
+    color: "#888",
+    marginTop: 1
+  },
+  desktopTextDisabled: {
+    color: "#bbb"
+  },
+  desktopCheckbox: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: "auto"
+  },
+  desktopCheckIcon: {
+    fontSize: 12,
+    color: "#fff",
+    fontWeight: "700"
+  },
+  // Mobile dropdown styles
+  dropdownTrigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    backgroundColor: "#fff",
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: "#e5e5e5",
+    minHeight: 52
+  },
+  selectedPreview: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  previewChip: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  previewIcon: {
     fontSize: 14,
     fontWeight: "700"
   },
-  selectedInfo: {
-    marginTop: 8,
-    paddingVertical: 4
+  previewMore: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: "#f0f0f0",
+    borderRadius: 8
+  },
+  previewMoreText: {
+    fontSize: 12,
+    color: "#666",
+    fontWeight: "600"
+  },
+  placeholderText: {
+    fontSize: 14,
+    color: "#999"
+  },
+  dropdownArrow: {
+    fontSize: 12,
+    color: "#888",
+    marginLeft: 8
+  },
+  infoRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: 6
   },
-  selectedText: {
+  selectedCount: {
     fontSize: 12,
+    fontWeight: "500"
+  },
+  limitText: {
+    fontSize: 11,
     color: "#888"
+  },
+  // Modal styles
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  modalContent: {
+    width: "85%",
+    maxWidth: 340,
+    maxHeight: "75%",
+    backgroundColor: "#fff",
+    borderRadius: 16,
+    overflow: "hidden"
+  },
+  modalHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f0f0f0"
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: "#1a1a1a"
+  },
+  modalClose: {
+    fontSize: 20,
+    color: "#888",
+    padding: 4
+  },
+  optionsList: {
+    padding: 8
+  },
+  optionItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "transparent",
+    marginBottom: 6,
+    gap: 12
+  },
+  optionItemSelected: {
+    borderWidth: 1
+  },
+  optionItemDisabled: {
+    opacity: 0.5
+  },
+  optionIconBg: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  optionIcon: {
+    fontSize: 18,
+    fontWeight: "700"
+  },
+  optionTextContainer: {
+    flex: 1
+  },
+  optionSymbol: {
+    fontSize: 15,
+    fontWeight: "500",
+    color: "#333"
+  },
+  optionName: {
+    fontSize: 12,
+    color: "#888",
+    marginTop: 1
+  },
+  optionTextDisabled: {
+    color: "#bbb"
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkboxIcon: {
+    fontSize: 14,
+    color: "#fff",
+    fontWeight: "700"
+  },
+  checkboxEmpty: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: "#ddd"
+  },
+  checkboxDisabled: {
+    borderColor: "#eee"
+  },
+  doneButton: {
+    marginHorizontal: 16,
+    marginVertical: 12,
+    paddingVertical: 14,
+    borderRadius: 10,
+    alignItems: "center"
+  },
+  doneButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#fff"
   }
 });