@kryptos_connect/mobile-sdk 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/KryptosConnectButton.tsx
-import React36 from "react";
+import React37 from "react";
 import {
   StyleSheet as StyleSheet20,
   Text as Text18,
@@ -54,6 +54,11 @@ import axios from "axios";
 var getBaseUrl = () => {
   return getGlobalBaseUrl() || "https://connect-api.kryptos.io/";
 };
+var isSvgUrl = (url) => {
+  if (!url) return false;
+  const urlWithoutParams = url.split("?")[0].split("#")[0];
+  return /\.svg$/i.test(urlWithoutParams);
+};
 
 // src/services/api.ts
 var api = axios.create({
@@ -1281,25 +1286,31 @@ var styles8 = StyleSheet8.create({
 
 // src/components/Footer.tsx
 var Footer = () => {
-  return /* @__PURE__ */ React13.createElement(View9, { style: styles9.container }, /* @__PURE__ */ React13.createElement(PoweredByKryptos, null), /* @__PURE__ */ React13.createElement(View9, { style: styles9.modeWrapper }, /* @__PURE__ */ React13.createElement(Mode, null)));
+  const { clientInfo } = useKryptosConnect();
+  const isSandbox = clientInfo?.project_stage === "sandbox";
+  return /* @__PURE__ */ React13.createElement(
+    View9,
+    {
+      style: [
+        styles9.container,
+        { justifyContent: isSandbox ? "space-between" : "center" }
+      ]
+    },
+    /* @__PURE__ */ React13.createElement(PoweredByKryptos, null),
+    /* @__PURE__ */ React13.createElement(Mode, null)
+  );
 };
 var styles9 = StyleSheet9.create({
   container: {
     width: "100%",
     paddingVertical: 8,
     alignItems: "center",
-    justifyContent: "center"
-  },
-  // Anchor Mode to the right side
-  modeWrapper: {
-    position: "absolute",
-    right: 8,
-    top: 4
+    flexDirection: "row"
   }
 });
 
 // src/molecules/Auth.tsx
-import React19 from "react";
+import React20 from "react";
 import { Linking as Linking2, StyleSheet as StyleSheet11, Text as Text9, View as View11 } from "react-native";
 
 // src/assets/LinkIcon.tsx
@@ -1369,7 +1380,7 @@ var EyeIcon = ({
 };
 
 // src/molecules/ConnectLogo.tsx
-import React18, { isValidElement } from "react";
+import React19, { isValidElement } from "react";
 import {
   Image,
   StyleSheet as StyleSheet10,
@@ -1434,15 +1445,40 @@ var UnplugIcon = ({
   ));
 };
 
+// src/components/remote-svg.tsx
+import React18, { useEffect as useEffect2, useState } from "react";
+import { ActivityIndicator as ActivityIndicator2 } from "react-native";
+import { SvgXml } from "react-native-svg";
+function RemoteSvg({
+  uri,
+  width = 32,
+  height = 32
+}) {
+  const [svgXml, setSvgXml] = useState(null);
+  useEffect2(() => {
+    fetch(uri).then((res) => res.text()).then((text) => setSvgXml(text)).catch((err) => console.error("SVG load error:", err));
+  }, [uri]);
+  if (!svgXml) return /* @__PURE__ */ React18.createElement(ActivityIndicator2, null);
+  return /* @__PURE__ */ React18.createElement(
+    SvgXml,
+    {
+      xml: svgXml,
+      width,
+      height,
+      style: { borderRadius: 8 }
+    }
+  );
+}
+
 // src/molecules/ConnectLogo.tsx
 var KryptosLogo = () => {
   const theme = useTheme();
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     View10,
     {
       style: [styles10.logoContainer, { backgroundColor: theme.colors.surface }]
     },
-    /* @__PURE__ */ React18.createElement(LogoIcon, { size: 36 })
+    /* @__PURE__ */ React19.createElement(LogoIcon, { size: 36 })
   );
 };
 var ConnectLogo = () => {
@@ -1460,7 +1496,7 @@ var ConnectLogo = () => {
     if (isValidElement(appLogo)) {
       return appLogo;
     } else if (typeof appLogo === "string" && isValidUrl(appLogo)) {
-      return /* @__PURE__ */ React18.createElement(
+      return isSvgUrl(appLogo) ? /* @__PURE__ */ React19.createElement(RemoteSvg, { uri: appLogo }) : /* @__PURE__ */ React19.createElement(
         Image,
         {
           source: { uri: appLogo },
@@ -1469,7 +1505,7 @@ var ConnectLogo = () => {
         }
       );
     } else if (typeof appLogo === "number" || typeof appLogo === "object" && appLogo !== null) {
-      return /* @__PURE__ */ React18.createElement(
+      return /* @__PURE__ */ React19.createElement(
         Image,
         {
           source: appLogo,
@@ -1478,11 +1514,11 @@ var ConnectLogo = () => {
         }
       );
     } else if (appName) {
-      return /* @__PURE__ */ React18.createElement(Text8, { style: [styles10.appLogoText, { color: theme.colors.text }] }, appName.charAt(0).toUpperCase());
+      return /* @__PURE__ */ React19.createElement(Text8, { style: [styles10.appLogoText, { color: theme.colors.text }] }, appName.charAt(0).toUpperCase());
     }
-    return /* @__PURE__ */ React18.createElement(Text8, { style: [styles10.appLogoText, { color: theme.colors.text }] }, "?");
+    return /* @__PURE__ */ React19.createElement(Text8, { style: [styles10.appLogoText, { color: theme.colors.text }] }, "?");
   };
-  return /* @__PURE__ */ React18.createElement(View10, { style: styles10.container }, /* @__PURE__ */ React18.createElement(KryptosLogo, null), /* @__PURE__ */ React18.createElement(View10, { style: styles10.iconContainer }, /* @__PURE__ */ React18.createElement(UnplugIcon, { size: 24, color: theme.colors.textSecondary })), /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(View10, { style: styles10.container }, /* @__PURE__ */ React19.createElement(KryptosLogo, null), /* @__PURE__ */ React19.createElement(View10, { style: styles10.iconContainer }, /* @__PURE__ */ React19.createElement(UnplugIcon, { size: 24, color: theme.colors.textSecondary })), /* @__PURE__ */ React19.createElement(
     View10,
     {
       style: [
@@ -1534,11 +1570,11 @@ var Auth = ({
 }) => {
   const { appName, linkToken, clientId, setUser, setEmail } = useKryptosConnect();
   const theme = useTheme();
-  const [isLoading, setIsLoading] = React19.useState(false);
-  const [errorMessage, setErrorMessage] = React19.useState("");
-  const [emailValue, setEmailValue] = React19.useState("");
-  const [emailError, setEmailError] = React19.useState("");
-  const [loadingType, setLoadingType] = React19.useState(null);
+  const [isLoading, setIsLoading] = React20.useState(false);
+  const [errorMessage, setErrorMessage] = React20.useState("");
+  const [emailValue, setEmailValue] = React20.useState("");
+  const [emailError, setEmailError] = React20.useState("");
+  const [loadingType, setLoadingType] = React20.useState(null);
   const validateEmail = (email) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!email) {
@@ -1600,28 +1636,28 @@ var Auth = ({
   };
   const infoSections = [
     {
-      icon: /* @__PURE__ */ React19.createElement(LinkIcon, { size: 20, color: theme.colors.primary }),
+      icon: /* @__PURE__ */ React20.createElement(LinkIcon, { size: 20, color: theme.colors.primary }),
       title: "Simple and secure",
       text: "Link your accounts in just a few clicks"
     },
     {
-      icon: /* @__PURE__ */ React19.createElement(ShieldIcon, { size: 20, color: theme.colors.primary }),
+      icon: /* @__PURE__ */ React20.createElement(ShieldIcon, { size: 20, color: theme.colors.primary }),
       title: "Control what you share",
       text: "We never share your data without your permission"
     },
     {
-      icon: /* @__PURE__ */ React19.createElement(EyeIcon, { size: 20, color: theme.colors.primary }),
+      icon: /* @__PURE__ */ React20.createElement(EyeIcon, { size: 20, color: theme.colors.primary }),
       title: "View Only Access",
       text: "Kryptos retrieves view-only data and cannot perform any transactions on your behalf."
     }
   ];
-  return /* @__PURE__ */ React19.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ React19.createElement(ModalHeader, { onClose: handleClose }, ""), /* @__PURE__ */ React19.createElement(ModalBody, null, /* @__PURE__ */ React19.createElement(View11, { style: styles11.container }, /* @__PURE__ */ React19.createElement(View11, { style: styles11.header }, /* @__PURE__ */ React19.createElement(Text9, { style: [styles11.title, { color: theme.colors.text }] }, "Link your accounts to", " ", /* @__PURE__ */ React19.createElement(Text9, { style: { fontWeight: "700" } }, appName), " using Kryptos"), /* @__PURE__ */ React19.createElement(ConnectLogo, null), infoSections.map((section, index) => /* @__PURE__ */ React19.createElement(View11, { key: `info-${index}`, style: styles11.infoSection }, /* @__PURE__ */ React19.createElement(View11, { style: styles11.infoIcon }, section.icon), /* @__PURE__ */ React19.createElement(View11, { style: styles11.infoContent }, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ React20.createElement(ModalHeader, { onClose: handleClose }, ""), /* @__PURE__ */ React20.createElement(ModalBody, null, /* @__PURE__ */ React20.createElement(View11, { style: styles11.container }, /* @__PURE__ */ React20.createElement(View11, { style: styles11.header }, /* @__PURE__ */ React20.createElement(Text9, { style: [styles11.title, { color: theme.colors.text }] }, "Link your accounts to", " ", /* @__PURE__ */ React20.createElement(Text9, { style: { fontWeight: "700" } }, appName), " using Kryptos"), /* @__PURE__ */ React20.createElement(ConnectLogo, null), infoSections.map((section, index) => /* @__PURE__ */ React20.createElement(View11, { key: `info-${index}`, style: styles11.infoSection }, /* @__PURE__ */ React20.createElement(View11, { style: styles11.infoIcon }, section.icon), /* @__PURE__ */ React20.createElement(View11, { style: styles11.infoContent }, /* @__PURE__ */ React20.createElement(
     Text9,
     {
       style: [styles11.infoTitle, { color: theme.colors.text }]
     },
     section.title
-  ), /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React20.createElement(
     Text9,
     {
       style: [
@@ -1630,7 +1666,7 @@ var Auth = ({
       ]
     },
     section.text
-  )))), errorMessage ? /* @__PURE__ */ React19.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React19.createElement(AlertDescription, null, errorMessage)) : null), /* @__PURE__ */ React19.createElement(View11, { style: styles11.footer }, /* @__PURE__ */ React19.createElement(
+  )))), errorMessage ? /* @__PURE__ */ React20.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React20.createElement(AlertDescription, null, errorMessage)) : null), /* @__PURE__ */ React20.createElement(View11, { style: styles11.footer }, /* @__PURE__ */ React20.createElement(
     Button,
     {
       variant: "outline",
@@ -1641,14 +1677,14 @@ var Auth = ({
       style: styles11.button
     },
     "Continue"
-  ), /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React20.createElement(
     Text9,
     {
       style: [styles11.footerText, { color: theme.colors.textSecondary }]
     },
     "By continuing, you agree to Kryptos",
     " ",
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(
       Text9,
       {
         style: {
@@ -1662,7 +1698,7 @@ var Auth = ({
     " ",
     "and",
     " ",
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(
       Text9,
       {
         style: {
@@ -1673,7 +1709,7 @@ var Auth = ({
       },
       "Terms of Service"
     )
-  )))), /* @__PURE__ */ React19.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ React19.createElement(Footer, null)));
+  )))), /* @__PURE__ */ React20.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ React20.createElement(Footer, null)));
 };
 var styles11 = StyleSheet11.create({
   container: {
@@ -1740,8 +1776,8 @@ var styles11 = StyleSheet11.create({
 });
 
 // src/molecules/Init.tsx
-import React20 from "react";
-import { ActivityIndicator as ActivityIndicator2, StyleSheet as StyleSheet12, Text as Text10, View as View12 } from "react-native";
+import React21 from "react";
+import { ActivityIndicator as ActivityIndicator3, StyleSheet as StyleSheet12, Text as Text10, View as View12 } from "react-native";
 var Init = ({
   open,
   onSuccess,
@@ -1756,9 +1792,9 @@ var Init = ({
     setUser
   } = useKryptosConnect();
   const theme = useTheme();
-  const [isFetching, setIsFetching] = React20.useState(false);
-  const [error, setError] = React20.useState(null);
-  const fetchLinkToken = React20.useCallback(async () => {
+  const [isFetching, setIsFetching] = React21.useState(false);
+  const [error, setError] = React21.useState(null);
+  const fetchLinkToken = React21.useCallback(async () => {
     if (!open) return;
     setIsFetching(true);
     setError(null);
@@ -1785,17 +1821,17 @@ var Init = ({
       setIsFetching(false);
     }
   }, []);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     fetchLinkToken();
   }, [fetchLinkToken]);
-  return /* @__PURE__ */ React20.createElement(Modal, { isOpen: open, onClose, size: "xs" }, /* @__PURE__ */ React20.createElement(ModalHeader, { onClose }, "Kryptos Connect"), /* @__PURE__ */ React20.createElement(ModalBody, null, /* @__PURE__ */ React20.createElement(View12, { style: styles12.container }, isFetching && /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
-    ActivityIndicator2,
+  return /* @__PURE__ */ React21.createElement(Modal, { isOpen: open, onClose, size: "xs" }, /* @__PURE__ */ React21.createElement(ModalHeader, { onClose }, "Kryptos Connect"), /* @__PURE__ */ React21.createElement(ModalBody, null, /* @__PURE__ */ React21.createElement(View12, { style: styles12.container }, isFetching && /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+    ActivityIndicator3,
     {
       size: "large",
       color: theme.colors.primary,
       style: styles12.spinner
     }
-  ), /* @__PURE__ */ React20.createElement(Text10, { style: [styles12.message, { color: theme.colors.text }] }, isInitialized ? "Fetching link token..." : "Initializing...")), !isFetching && error && /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React20.createElement(AlertDescription, null, error)), /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React21.createElement(Text10, { style: [styles12.message, { color: theme.colors.text }] }, isInitialized ? "Fetching link token..." : "Initializing...")), !isFetching && error && /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React21.createElement(AlertDescription, null, error)), /* @__PURE__ */ React21.createElement(
     Button,
     {
       variant: "primary",
@@ -1804,7 +1840,7 @@ var Init = ({
       style: styles12.retryButton
     },
     "Retry"
-  )))), /* @__PURE__ */ React20.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ React20.createElement(Footer, null)));
+  )))), /* @__PURE__ */ React21.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ React21.createElement(Footer, null)));
 };
 var styles12 = StyleSheet12.create({
   container: {
@@ -1833,10 +1869,10 @@ var styles12 = StyleSheet12.create({
 });
 
 // src/molecules/Integration.tsx
-import React31 from "react";
+import React32 from "react";
 import {
   FlatList,
-  Image as Image3,
+  Image as Image4,
   StyleSheet as StyleSheet15,
   Text as Text13,
   TouchableOpacity as TouchableOpacity6,
@@ -1844,13 +1880,13 @@ import {
 } from "react-native";
 
 // src/assets/ArrowLeftIcon.tsx
-import React21 from "react";
+import React22 from "react";
 import Svg7, { Path as Path7 } from "react-native-svg";
 var ArrowLeftIcon = ({
   size = 20,
   color = "#000"
 }) => {
-  return /* @__PURE__ */ React21.createElement(Svg7, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(Svg7, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React22.createElement(
     Path7,
     {
       d: "M19 12H5M12 19l-7-7 7-7",
@@ -1863,13 +1899,13 @@ var ArrowLeftIcon = ({
 };
 
 // src/assets/CheckCircleIcon.tsx
-import React22 from "react";
+import React23 from "react";
 import Svg8, { Path as Path8, Circle } from "react-native-svg";
 var CheckCircleIcon = ({
   size = 20,
   color = "#10B981"
 }) => {
-  return /* @__PURE__ */ React22.createElement(Svg8, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(Svg8, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React23.createElement(
     Circle,
     {
       cx: 12,
@@ -1878,7 +1914,7 @@ var CheckCircleIcon = ({
       stroke: color,
       strokeWidth: 2
     }
-  ), /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(
     Path8,
     {
       d: "m9 12 2 2 4-4",
@@ -1891,7 +1927,7 @@ var CheckCircleIcon = ({
 };
 
 // src/assets/LoaderIcon.tsx
-import React23 from "react";
+import React24 from "react";
 import { Animated as Animated2, Easing } from "react-native";
 import Svg9, { Path as Path9 } from "react-native-svg";
 var AnimatedSvg = Animated2.createAnimatedComponent(Svg9);
@@ -1899,8 +1935,8 @@ var LoaderIcon = ({
   size = 20,
   color = "#00C693"
 }) => {
-  const rotateAnim = React23.useRef(new Animated2.Value(0)).current;
-  React23.useEffect(() => {
+  const rotateAnim = React24.useRef(new Animated2.Value(0)).current;
+  React24.useEffect(() => {
     Animated2.loop(
       Animated2.timing(rotateAnim, {
         toValue: 1,
@@ -1914,7 +1950,7 @@ var LoaderIcon = ({
     inputRange: [0, 1],
     outputRange: ["0deg", "360deg"]
   });
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     AnimatedSvg,
     {
       width: size,
@@ -1923,7 +1959,7 @@ var LoaderIcon = ({
       fill: "none",
       style: { transform: [{ rotate: spin }] }
     },
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(
       Path9,
       {
         d: "M21 12a9 9 0 1 1-6.219-8.56",
@@ -1937,10 +1973,10 @@ var LoaderIcon = ({
 };
 
 // src/assets/SuccessIcon.tsx
-import React24 from "react";
+import React25 from "react";
 import Svg10, { Circle as Circle2, Path as Path10 } from "react-native-svg";
 var SuccessIcon = ({ size = 64 }) => {
-  return /* @__PURE__ */ React24.createElement(Svg10, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(Svg10, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ React25.createElement(
     Circle2,
     {
       cx: 32,
@@ -1949,7 +1985,7 @@ var SuccessIcon = ({ size = 64 }) => {
       fill: "#00C693",
       opacity: 0.1
     }
-  ), /* @__PURE__ */ React24.createElement(
+  ), /* @__PURE__ */ React25.createElement(
     Circle2,
     {
       cx: 32,
@@ -1957,7 +1993,7 @@ var SuccessIcon = ({ size = 64 }) => {
       r: 24,
       fill: "#00C693"
     }
-  ), /* @__PURE__ */ React24.createElement(
+  ), /* @__PURE__ */ React25.createElement(
     Path10,
     {
       d: "M24 32l6 6 12-12",
@@ -1970,10 +2006,10 @@ var SuccessIcon = ({ size = 64 }) => {
 };
 
 // src/assets/ErrorIcon.tsx
-import React25 from "react";
+import React26 from "react";
 import Svg11, { Circle as Circle3, Path as Path11 } from "react-native-svg";
 var ErrorIcon = ({ size = 64 }) => {
-  return /* @__PURE__ */ React25.createElement(Svg11, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(Svg11, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ React26.createElement(
     Circle3,
     {
       cx: 32,
@@ -1982,7 +2018,7 @@ var ErrorIcon = ({ size = 64 }) => {
       fill: "#EF4444",
       opacity: 0.1
     }
-  ), /* @__PURE__ */ React25.createElement(
+  ), /* @__PURE__ */ React26.createElement(
     Circle3,
     {
       cx: 32,
@@ -1990,7 +2026,7 @@ var ErrorIcon = ({ size = 64 }) => {
       r: 24,
       fill: "#EF4444"
     }
-  ), /* @__PURE__ */ React25.createElement(
+  ), /* @__PURE__ */ React26.createElement(
     Path11,
     {
       d: "M24 24l16 16M40 24l-16 16",
@@ -2003,17 +2039,17 @@ var ErrorIcon = ({ size = 64 }) => {
 };
 
 // src/assets/SearchIcon.tsx
-import React26 from "react";
+import React27 from "react";
 import Svg12, { Circle as Circle4, Path as Path12 } from "react-native-svg";
 
 // src/assets/PlusIcon.tsx
-import React27 from "react";
+import React28 from "react";
 import Svg13, { Path as Path13 } from "react-native-svg";
 var PlusIcon = ({
   size = 14,
   color = "#6B7280"
 }) => {
-  return /* @__PURE__ */ React27.createElement(Svg13, { width: size, height: size, viewBox: "0 0 14 14", fill: "none" }, /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(Svg13, { width: size, height: size, viewBox: "0 0 14 14", fill: "none" }, /* @__PURE__ */ React28.createElement(
     Path13,
     {
       d: "M7 3.5v7M3.5 7h7",
@@ -2026,13 +2062,14 @@ var PlusIcon = ({
 
 // src/wallet-connect/index.tsx
 import { useAccount, useAppKit } from "@reown/appkit-react-native";
-import React29, { useState } from "react";
+import React30, { useEffect as useEffect3, useMemo, useState as useState2 } from "react";
 import {
   ScrollView as ScrollView2,
   StyleSheet as StyleSheet13,
   Text as Text11,
   TouchableOpacity as TouchableOpacity4,
-  View as View13
+  View as View13,
+  Image as Image2
 } from "react-native";
 
 // src/utils/uuid.ts
@@ -2045,7 +2082,7 @@ function generateUUID() {
 }
 
 // src/wallet-connect/wallet-connect.tsx
-import React28 from "react";
+import React29 from "react";
 import { AppKit, AppKitProvider } from "@reown/appkit-react-native";
 
 // src/wallet-connect/AppKitConfig.ts
@@ -2154,7 +2191,7 @@ var createAppKitInstance = (projectId) => {
 // src/wallet-connect/wallet-connect.tsx
 var WalletConnectWrapper = ({ children }) => {
   const { walletConnectProjectId } = useKryptosConnect();
-  const appKit = React28.useMemo(() => {
+  const appKit = React29.useMemo(() => {
     if (!walletConnectProjectId) {
       console.warn(
         "walletConnectProjectId is missing in KryptosConnectProvider config"
@@ -2164,9 +2201,9 @@ var WalletConnectWrapper = ({ children }) => {
     return createAppKitInstance(walletConnectProjectId);
   }, [walletConnectProjectId]);
   if (!appKit) {
-    return /* @__PURE__ */ React28.createElement(React28.Fragment, null, children);
+    return /* @__PURE__ */ React29.createElement(React29.Fragment, null, children);
   }
-  return /* @__PURE__ */ React28.createElement(AppKitProvider, { instance: appKit }, /* @__PURE__ */ React28.createElement(AppKit, null), children);
+  return /* @__PURE__ */ React29.createElement(AppKitProvider, { instance: appKit }, /* @__PURE__ */ React29.createElement(AppKit, null), children);
 };
 var wallet_connect_default = WalletConnectWrapper;
 
@@ -2177,12 +2214,13 @@ var WalletConnectComponent = ({
   onAddHandle,
   handleClose,
   modalOpen,
-  setAddIntegrationMode
+  setAddIntegrationMode,
+  providersList
 }) => {
   const { walletConnectProjectId } = useKryptosConnect();
   const theme = useTheme();
   if (!walletConnectProjectId) {
-    return /* @__PURE__ */ React29.createElement(Modal, { isOpen: modalOpen, onClose: handleClose, size: "full" }, /* @__PURE__ */ React29.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React29.createElement(View13, { style: styles13.headerContent }, /* @__PURE__ */ React29.createElement(
+    return /* @__PURE__ */ React30.createElement(Modal, { isOpen: modalOpen, onClose: handleClose, size: "full" }, /* @__PURE__ */ React30.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React30.createElement(View13, { style: styles13.headerContent }, /* @__PURE__ */ React30.createElement(
       TouchableOpacity4,
       {
         onPress: () => {
@@ -2190,14 +2228,14 @@ var WalletConnectComponent = ({
         },
         style: styles13.backButton
       },
-      /* @__PURE__ */ React29.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-    ), /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React29.createElement(ModalBody, { scrollable: false, style: styles13.contentContainer }, /* @__PURE__ */ React29.createElement(View13, { style: styles13.emptyState }, /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React30.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
+    ), /* @__PURE__ */ React30.createElement(Text11, { style: [styles13.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React30.createElement(ModalBody, { scrollable: false, style: styles13.contentContainer }, /* @__PURE__ */ React30.createElement(View13, { style: styles13.emptyState }, /* @__PURE__ */ React30.createElement(
       Text11,
       {
         style: [styles13.emptyStateTitle, { color: theme.colors.text }]
       },
       "WalletConnect is not configured"
-    ), /* @__PURE__ */ React29.createElement(
+    ), /* @__PURE__ */ React30.createElement(
       Text11,
       {
         style: [
@@ -2206,7 +2244,7 @@ var WalletConnectComponent = ({
         ]
       },
       "Please add a walletConnectProjectId to KryptosConnectProvider to enable wallet connections."
-    ), /* @__PURE__ */ React29.createElement(
+    ), /* @__PURE__ */ React30.createElement(
       Button,
       {
         variant: "outline",
@@ -2217,7 +2255,7 @@ var WalletConnectComponent = ({
       "Go back"
     ))));
   }
-  return /* @__PURE__ */ React29.createElement(wallet_connect_default, null, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(wallet_connect_default, null, /* @__PURE__ */ React30.createElement(
     ConnectButton,
     {
       integration,
@@ -2225,7 +2263,8 @@ var WalletConnectComponent = ({
       onClose,
       handleClose,
       modalOpen,
-      setAddIntegrationMode
+      setAddIntegrationMode,
+      providersList
     }
   ));
 };
@@ -2234,17 +2273,85 @@ function ConnectButton({
   onAddHandle,
   handleClose,
   modalOpen,
-  setAddIntegrationMode
+  setAddIntegrationMode,
+  providersList
 }) {
   const theme = useTheme();
   const { open, disconnect } = useAppKit();
-  const { address, isConnected, chainId } = useAccount();
+  const { address, isConnected } = useAccount();
   const { linkToken, user, clientId } = useKryptosConnect();
-  const [selectedChains, setSelectedChains] = useState(/* @__PURE__ */ new Set());
-  const [errorMessage, setErrorMessage] = useState("");
-  const [chainErrors, setChainErrors] = useState({});
-  const [isLoading, setIsLoading] = useState(false);
-  const userUsedChains = integration?.walletSupportedChains || [];
+  const [selectedChains, setSelectedChains] = useState2(/* @__PURE__ */ new Set());
+  const [errorMessage, setErrorMessage] = useState2("");
+  const [chainErrors, setChainErrors] = useState2({});
+  const [isLoading, setIsLoading] = useState2(false);
+  const [userUsedChains, setUserUsedChains] = useState2([]);
+  const [isFetchingChains, setIsFetchingChains] = useState2(false);
+  const availableChains = useMemo(() => {
+    if (userUsedChains.length > 0) {
+      return userUsedChains;
+    }
+    if (integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
+      return integration.walletSupportedChains;
+    }
+    return [];
+  }, [userUsedChains, integration.walletSupportedChains]);
+  useEffect3(() => {
+    if (!isConnected || !address || !address.trim()) {
+      setUserUsedChains([]);
+      setSelectedChains(/* @__PURE__ */ new Set());
+      setIsFetchingChains(false);
+      return;
+    }
+    const debounceTimer = setTimeout(async () => {
+      if (linkToken && address && address.trim() && isConnected) {
+        try {
+          setIsFetchingChains(true);
+          let chains = [];
+          if (integration.isEvmWallet) {
+            const res = await getUserUsedChains(linkToken, address.trim());
+            if (res && Array.isArray(res) && res.length > 0) {
+              chains = res;
+            }
+          }
+          if (chains.length === 0 && integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
+            chains = integration.walletSupportedChains;
+          }
+          if (chains.length > 0) {
+            setUserUsedChains(chains);
+            setSelectedChains(new Set(chains.map((chain) => chain.id)));
+          } else {
+            setUserUsedChains([]);
+            setSelectedChains(/* @__PURE__ */ new Set());
+          }
+        } catch (error) {
+          console.error("Failed to fetch user chains:", error);
+          if (integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
+            setUserUsedChains(integration.walletSupportedChains);
+            setSelectedChains(
+              new Set(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                integration.walletSupportedChains.map((chain) => chain.id)
+              )
+            );
+          } else {
+            setUserUsedChains([]);
+            setSelectedChains(/* @__PURE__ */ new Set());
+          }
+        } finally {
+          setIsFetchingChains(false);
+        }
+      }
+    }, 500);
+    return () => {
+      clearTimeout(debounceTimer);
+    };
+  }, [
+    linkToken,
+    address,
+    isConnected,
+    integration.isEvmWallet,
+    integration.walletSupportedChains
+  ]);
   const validateForm = () => {
     if (!address) {
       setErrorMessage("Please connect a wallet");
@@ -2262,7 +2369,7 @@ function ConnectButton({
       setIsLoading(true);
       setErrorMessage("");
       setChainErrors({});
-      const chainsToProcess = userUsedChains.filter(
+      const chainsToProcess = availableChains.filter(
         (c) => selectedChains.has(c.id)
       );
       const integrationsToAdd = [];
@@ -2270,43 +2377,46 @@ function ConnectButton({
       const walletTestsPayload = chainsToProcess.map((chain) => {
         const walletId = generateUUID();
         const displaySuffix = address ? address?.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address : "";
-        const alias = `${integration.id} - ${chain.id} (${displaySuffix})`;
+        const alias = `${integration.public_name} (${displaySuffix})`;
+        const provider = providersList.find((p) => p.id === chain.id);
         return {
           chain,
           walletId,
           alias,
           credential: {
-            source: integration.id,
+            source: provider?.id,
             credential: {
               address,
               userId: user?.user_id || "0",
-              projectId: integration.projectId,
+              projectId: provider?.projectId,
               apiKey: "0",
               secret: "0",
               privateKey: "0",
               alias,
               walletId,
-              exchange: integration.id
+              exchange: provider?.id
             }
           }
         };
       });
       const results = await Promise.allSettled(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         walletTestsPayload.map(
-          (data) => testCredentials(linkToken, data.credential)
+          (testData) => testCredentials(linkToken, { ...testData.credential })
         )
       );
       results.forEach((result, index) => {
         const { chain, walletId, alias } = walletTestsPayload[index];
-        if (result.status === "fulfilled" && result.value?.valid) {
+        const provider = providersList.find((p) => p.id === chain.id);
+        if (result.status === "fulfilled" && result.value?.valid && provider) {
           const data = {
             alias,
-            exchange: integration.id.toLowerCase(),
-            id: integration.id,
-            public_name: integration.public_name,
+            exchange: provider.id.toLowerCase(),
+            id: provider.id,
+            public_name: provider.public_name,
             sync_time: (/* @__PURE__ */ new Date()).getTime(),
             fetchAll: true,
-            logo: integration.logo || null,
+            logo: provider.logo || null,
             startTime: null,
             endTime: null,
             uid: user?.user_id || "",
@@ -2315,24 +2425,37 @@ function ConnectButton({
               clientId,
               createdAt: (/* @__PURE__ */ new Date()).toISOString()
             },
-            metadata: {
-              environment: "sandbox"
-            },
             addedOn: (/* @__PURE__ */ new Date()).getTime(),
-            default_chain: chain.name,
-            default_chain_logo: chain.logo || null,
-            type: integration.type,
-            isNftSupported: integration.isEvmWallet || integration.nftSupport || false,
-            chainId: chain?.community_id || chain.chainId || chain.id,
-            address
+            default_chain: integration?.id || "",
+            default_chain_logo: integration?.logo || "",
+            type: provider.type || "",
+            isNftSupported: provider?.isEvmWallet || provider?.nftSupport || false,
+            chainId: provider?.community_id,
+            credsData: {
+              address
+            }
           };
           integrationsToAdd.push(data);
         } else {
-          errors[chain.id] = "Wallet verification failed";
+          if (result.status === "rejected") {
+            errors[chain.id] = result.reason?.response?.data?.message || "Failed to process chain";
+          } else if (result.status === "fulfilled") {
+            errors[chain.id] = result.value?.message || "Failed to verify chain";
+          }
         }
       });
+      setChainErrors(errors);
+      if (Object.keys(errors).length > 0) {
+        setErrorMessage(
+          `Cannot add integrations. ${Object.keys(errors).length} chain${Object.keys(errors).length > 1 ? "s" : ""} failed verification. Please fix the errors and try again.`
+        );
+        return;
+      }
       if (integrationsToAdd.length > 0) {
         onAddHandle(integrationsToAdd);
+        if (isConnected) {
+          disconnect();
+        }
         setChainErrors({});
         setErrorMessage("");
       } else {
@@ -2348,30 +2471,49 @@ function ConnectButton({
       setIsLoading(false);
     }
   };
-  const toggleChainSelection = (chainId2) => {
+  const toggleChainSelection = (chainId) => {
     const newSelected = new Set(selectedChains);
-    if (newSelected.has(chainId2)) {
-      newSelected.delete(chainId2);
+    if (newSelected.has(chainId)) {
+      newSelected.delete(chainId);
     } else {
-      newSelected.add(chainId2);
+      newSelected.add(chainId);
     }
     setSelectedChains(newSelected);
-    if (chainErrors[chainId2]) {
+    if (chainErrors[chainId]) {
       const newErrors = { ...chainErrors };
-      delete newErrors[chainId2];
+      delete newErrors[chainId];
       setChainErrors(newErrors);
     }
   };
-  return /* @__PURE__ */ React29.createElement(Modal, { isOpen: modalOpen, onClose: handleClose, size: "full" }, /* @__PURE__ */ React29.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React29.createElement(View13, { style: styles13.headerContent }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(Modal, { isOpen: modalOpen, onClose: handleClose, size: "full" }, /* @__PURE__ */ React30.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React30.createElement(View13, { style: styles13.headerContent }, /* @__PURE__ */ React30.createElement(
     TouchableOpacity4,
     {
       onPress: () => {
         setAddIntegrationMode(null);
+        if (isConnected) {
+          disconnect();
+        }
       },
       style: styles13.backButton
     },
-    /* @__PURE__ */ React29.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-  ), /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React29.createElement(ModalBody, { scrollable: false, style: styles13.contentContainer }, !isConnected ? /* @__PURE__ */ React29.createElement(View13, null, /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.infoText, { color: theme.colors.text }] }, "Connect your wallet to continue"), /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React30.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
+  ), /* @__PURE__ */ React30.createElement(Text11, { style: [styles13.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React30.createElement(ModalBody, { scrollable: false, style: styles13.contentContainer }, /* @__PURE__ */ React30.createElement(View13, { style: styles13.header }, integration.logo ? isSvgUrl(integration.logo) ? /* @__PURE__ */ React30.createElement(RemoteSvg, { uri: integration.logo }) : /* @__PURE__ */ React30.createElement(
+    Image2,
+    {
+      source: { uri: integration.logo },
+      style: styles13.logo,
+      resizeMode: "contain"
+    }
+  ) : /* @__PURE__ */ React30.createElement(
+    View13,
+    {
+      style: [
+        styles13.logoPlaceholder,
+        { backgroundColor: theme.colors.surface }
+      ]
+    },
+    /* @__PURE__ */ React30.createElement(Text11, { style: { color: theme.colors.text } }, integration.name?.charAt(0) || "?")
+  ), /* @__PURE__ */ React30.createElement(Text11, { style: [styles13.name, { color: theme.colors.text }] }, integration.name)), !isConnected ? /* @__PURE__ */ React30.createElement(View13, null, /* @__PURE__ */ React30.createElement(Text11, { style: [styles13.infoText, { color: theme.colors.text }] }, "Connect your wallet to continue"), /* @__PURE__ */ React30.createElement(
     Button,
     {
       variant: "primary",
@@ -2379,107 +2521,149 @@ function ConnectButton({
       onPress: () => open({ view: "Connect" })
     },
     "Connect Wallet"
-  )) : /* @__PURE__ */ React29.createElement(View13, null, /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.connectedTitle, { color: theme.colors.text }] }, "Wallet Connected"), /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.connectedText, { color: theme.colors.text }] }, "Address: ", address), /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.connectedText, { color: theme.colors.text }] }, "Chain: ", chainId), /* @__PURE__ */ React29.createElement(Button, { variant: "ghost", size: "sm", onPress: () => disconnect() }, "Disconnect Wallet"), userUsedChains.length > 0 && address && /* @__PURE__ */ React29.createElement(View13, { style: styles13.chainSelection }, /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"), /* @__PURE__ */ React29.createElement(ScrollView2, { contentContainerStyle: styles13.scrollViewContent }, /* @__PURE__ */ React29.createElement(View13, { style: styles13.chainChips }, userUsedChains.map((chain) => {
-    const isSelected = selectedChains.has(chain.id);
-    const hasError = chainErrors[chain.id];
-    return /* @__PURE__ */ React29.createElement(
-      TouchableOpacity4,
-      {
-        onPress: () => toggleChainSelection(chain.id),
-        style: styles13.chainButton,
-        key: chain.id
-      },
-      /* @__PURE__ */ React29.createElement(
-        View13,
+  )) : /* @__PURE__ */ React30.createElement(View13, { style: styles13.connectedContainer }, /* @__PURE__ */ React30.createElement(View13, { style: styles13.connectedHeader }, /* @__PURE__ */ React30.createElement(
+    Text11,
+    {
+      style: [styles13.connectedTitle, { color: theme.colors.text }]
+    },
+    "Wallet Connected"
+  ), /* @__PURE__ */ React30.createElement(
+    Text11,
+    {
+      style: [styles13.connectedText, { color: theme.colors.text }]
+    },
+    "Address: ",
+    address
+  ), /* @__PURE__ */ React30.createElement(Button, { variant: "ghost", size: "sm", onPress: () => disconnect() }, "Disconnect Wallet"), isFetchingChains ? /* @__PURE__ */ React30.createElement(
+    Text11,
+    {
+      style: [styles13.fetchingText, { color: theme.colors.text }]
+    },
+    "Fetching chains..."
+  ) : null), availableChains.length > 0 && address && /* @__PURE__ */ React30.createElement(
+    ScrollView2,
+    {
+      style: styles13.scrollView,
+      contentContainerStyle: styles13.scrollViewContent,
+      showsVerticalScrollIndicator: true,
+      nestedScrollEnabled: true
+    },
+    /* @__PURE__ */ React30.createElement(Text11, { style: [styles13.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"),
+    /* @__PURE__ */ React30.createElement(View13, null, /* @__PURE__ */ React30.createElement(View13, { style: styles13.chainChips }, availableChains.map((chain) => {
+      const isSelected = selectedChains.has(chain.id);
+      const hasError = chainErrors[chain.id];
+      return /* @__PURE__ */ React30.createElement(
+        TouchableOpacity4,
         {
-          style: [
-            styles13.chainChip,
-            {
-              backgroundColor: hasError ? theme.colors.errorLight : isSelected ? theme.colors.primary + "20" : theme.colors.surface,
-              borderColor: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.border
-            }
-          ]
+          onPress: () => toggleChainSelection(chain.id),
+          style: styles13.chainButton,
+          key: chain.id
         },
-        /* @__PURE__ */ React29.createElement(
-          Text11,
+        /* @__PURE__ */ React30.createElement(
+          View13,
           {
             style: [
-              styles13.chainName,
+              styles13.chainChip,
               {
-                color: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.text
+                backgroundColor: hasError ? theme.colors.errorLight : isSelected ? theme.colors.primary + "20" : theme.colors.surface,
+                borderColor: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.border
               }
             ]
           },
-          chain.id
-        ),
-        isSelected ? /* @__PURE__ */ React29.createElement(
-          CloseIcon,
-          {
-            size: 12,
-            color: hasError ? theme.colors.error : theme.colors.primary
-          }
-        ) : /* @__PURE__ */ React29.createElement(
-          PlusIcon,
-          {
-            size: 12,
-            color: theme.colors.textSecondary
-          }
+          /* @__PURE__ */ React30.createElement(
+            Text11,
+            {
+              style: [
+                styles13.chainName,
+                {
+                  color: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.text
+                }
+              ]
+            },
+            chain.id
+          ),
+          isSelected ? /* @__PURE__ */ React30.createElement(
+            CloseIcon,
+            {
+              size: 12,
+              color: hasError ? theme.colors.error : theme.colors.primary
+            }
+          ) : /* @__PURE__ */ React30.createElement(
+            PlusIcon,
+            {
+              size: 12,
+              color: theme.colors.textSecondary
+            }
+          )
         )
-      )
-    );
-  }))), Object.keys(chainErrors).length > 0 && /* @__PURE__ */ React29.createElement(View13, { style: styles13.chainErrorsContainer }, /* @__PURE__ */ React29.createElement(
-    Text11,
-    {
-      style: [
-        styles13.chainErrorsTitle,
-        { color: theme.colors.error }
-      ]
-    },
-    "Errors:"
-  ), Object.entries(chainErrors).map(([chainId2, error]) => {
-    const chain = userUsedChains.find(
-      (c) => c.id === chainId2
-    );
-    return /* @__PURE__ */ React29.createElement(
+      );
+    })), errorMessage ? /* @__PURE__ */ React30.createElement(View13, { style: styles13.errorMessageContainer }, /* @__PURE__ */ React30.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React30.createElement(AlertDescription, null, errorMessage))) : null, Object.keys(chainErrors || {}).length > 0 && /* @__PURE__ */ React30.createElement(View13, { style: styles13.chainErrorsContainer }, /* @__PURE__ */ React30.createElement(
       Text11,
       {
-        key: chainId2,
         style: [
-          styles13.chainErrorItem,
+          styles13.chainErrorsTitle,
           { color: theme.colors.error }
         ]
       },
-      "\u2022 ",
-      chain?.name,
-      ": ",
-      error
-    );
-  }))), errorMessage ? /* @__PURE__ */ React29.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React29.createElement(AlertDescription, null, errorMessage)) : null)), userUsedChains.length > 0 && address && /* @__PURE__ */ React29.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React29.createElement(
+      "Errors:"
+    ), Object.entries(chainErrors).map(([chainId, error]) => {
+      const chain = availableChains.find(
+        (c) => c.id === chainId
+      );
+      return /* @__PURE__ */ React30.createElement(
+        Text11,
+        {
+          key: chainId,
+          style: [
+            styles13.chainErrorItem,
+            { color: theme.colors.error }
+          ]
+        },
+        "\u2022 ",
+        chain?.name ?? chainId,
+        ": ",
+        String(error)
+      );
+    })))
+  ))), availableChains.length > 0 && address && /* @__PURE__ */ React30.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React30.createElement(
     Button,
     {
       variant: "outline",
       size: "lg",
       onPress: onSubmitWalletConnect,
       loading: isLoading,
-      disabled: isLoading || !!address && userUsedChains.length > 0 && selectedChains.size === 0,
+      disabled: isLoading || !!address && availableChains.length > 0 && selectedChains.size === 0,
       style: styles13.button
     },
     selectedChains.size > 0 ? `Add ${selectedChains.size} Chain${selectedChains.size > 1 ? "s" : ""}` : "Add Integration"
-  ), /* @__PURE__ */ React29.createElement(Footer, null)));
+  ), /* @__PURE__ */ React30.createElement(Footer, null)));
 }
 var styles13 = StyleSheet13.create({
-  connectedTitle: { fontSize: 18, fontWeight: "600", marginBottom: 4 },
+  connectedContainer: {
+    flex: 1
+  },
+  connectedHeader: {
+    marginBottom: 8
+  },
+  connectedTitle: { fontSize: 12, fontWeight: "600", marginBottom: 4 },
   connectedText: { fontSize: 14, marginBottom: 4 },
+  fetchingText: { fontSize: 12, marginBottom: 4, textAlign: "center" },
   infoText: {
     fontSize: 16,
     fontWeight: "600",
     marginBottom: 8,
     textAlign: "center"
   },
+  scrollView: {
+    flex: 1
+  },
   scrollViewContent: {
-    paddingBottom: 100,
+    paddingBottom: 40,
     flexGrow: 1
   },
+  errorMessageContainer: {
+    marginTop: 16
+  },
   headerContent: {
     flexDirection: "row",
     alignItems: "center"
@@ -2498,17 +2682,13 @@ var styles13 = StyleSheet13.create({
   contentContainer: {
     padding: 20,
     // theme.spacing.xl
-    paddingBottom: 40,
+    paddingBottom: 20,
     width: "100%",
     overflow: "hidden",
     alignSelf: "center",
     flexDirection: "column",
     flex: 1
   },
-  chainSelection: {
-    marginBottom: 16
-    // theme.spacing.lg
-  },
   chainTitle: {
     fontSize: 14,
     // theme.fontSize.md
@@ -2560,9 +2740,7 @@ var styles13 = StyleSheet13.create({
     // theme.spacing.xs
   },
   button: {
-    width: "100%",
-    marginTop: 16
-    // theme.spacing.lg - consistent button spacing
+    width: "100%"
   },
   emptyState: {
     flex: 1,
@@ -2576,13 +2754,42 @@ var styles13 = StyleSheet13.create({
   },
   emptyStateButton: {
     marginTop: 8
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 16
+    // theme.spacing.lg
+  },
+  logo: {
+    width: 32,
+    height: 32,
+    borderRadius: 8
+    // theme.borderRadius.sm
+  },
+  logoPlaceholder: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    // theme.borderRadius.sm
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  name: {
+    fontSize: 16,
+    // theme.fontSize.lg
+    fontWeight: "600",
+    marginLeft: 12,
+    // theme.spacing.md
+    textTransform: "capitalize"
   }
 });
 
 // src/molecules/IntegrationForm.tsx
-import React30 from "react";
+import React31 from "react";
 import {
-  Image as Image2,
+  Image as Image3,
   ScrollView as ScrollView3,
   StyleSheet as StyleSheet14,
   Text as Text12,
@@ -2594,29 +2801,30 @@ var IntegrationForm = ({
   onAddHandle,
   open,
   setAddIntegrationMode,
-  handleClose
+  handleClose,
+  providersList
 }) => {
   const { clientId, linkToken, user } = useKryptosConnect();
   const theme = useTheme();
-  const [isLoading, setIsLoading] = React30.useState(false);
-  const [isFetchingChains, setIsFetchingChains] = React30.useState(false);
-  const [userUsedChains, setUserUsedChains] = React30.useState([]);
-  const [selectedChains, setSelectedChains] = React30.useState(
+  const [isLoading, setIsLoading] = React31.useState(false);
+  const [isFetchingChains, setIsFetchingChains] = React31.useState(false);
+  const [userUsedChains, setUserUsedChains] = React31.useState([]);
+  const [selectedChains, setSelectedChains] = React31.useState(
     /* @__PURE__ */ new Set()
   );
-  const [chainErrors, setChainErrors] = React30.useState(
+  const [chainErrors, setChainErrors] = React31.useState(
     {}
   );
-  const [errorMessage, setErrorMessage] = React30.useState("");
-  const [formValues, setFormValues] = React30.useState({
+  const [errorMessage, setErrorMessage] = React31.useState("");
+  const [formValues, setFormValues] = React31.useState({
     address: "",
     account_name: "",
     api_key: "",
     secret_key: "",
     password: ""
   });
-  const [formErrors, setFormErrors] = React30.useState({});
-  React30.useEffect(() => {
+  const [formErrors, setFormErrors] = React31.useState({});
+  React31.useEffect(() => {
     if (!formValues.address || !formValues.address.trim()) {
       setUserUsedChains([]);
       setSelectedChains(/* @__PURE__ */ new Set());
@@ -2742,9 +2950,6 @@ var IntegrationForm = ({
                 clientId,
                 createdAt: (/* @__PURE__ */ new Date()).toISOString()
               },
-              metadata: {
-                environment: "sandbox"
-              },
               addedOn: (/* @__PURE__ */ new Date()).getTime(),
               default_chain: chain.name,
               default_chain_logo: chain.logo || null,
@@ -2828,7 +3033,7 @@ var IntegrationForm = ({
           isNftSupported: metadata.isEvmWallet || metadata.nftSupport || false
         };
         if (metadata.community_id) {
-          data.chainId = Number(metadata.community_id);
+          data.chainId = metadata.community_id;
         }
         if (formValues.address) data.address = formValues.address;
         if (formValues.account_name) data.accountName = formValues.account_name;
@@ -2863,14 +3068,14 @@ var IntegrationForm = ({
   };
   const hasNoFields = !metadata.password && !metadata.secret_key && !metadata.api_key && !metadata.address && !metadata.account_name;
   const shouldShowFormFields = metadata.password || metadata.secret_key || metadata.api_key || metadata.address || metadata.account_name;
-  const renderLogo = () => metadata.logo ? /* @__PURE__ */ React30.createElement(
-    Image2,
+  const renderLogo = () => metadata.logo ? isSvgUrl(metadata.logo) ? /* @__PURE__ */ React31.createElement(RemoteSvg, { uri: metadata.logo }) : /* @__PURE__ */ React31.createElement(
+    Image3,
     {
       source: { uri: metadata.logo },
       style: styles14.logo,
       resizeMode: "contain"
     }
-  ) : /* @__PURE__ */ React30.createElement(
+  ) : /* @__PURE__ */ React31.createElement(
     View14,
     {
       style: [
@@ -2878,9 +3083,9 @@ var IntegrationForm = ({
         { backgroundColor: theme.colors.surface }
       ]
     },
-    /* @__PURE__ */ React30.createElement(Text12, { style: { color: theme.colors.text } }, metadata.name?.charAt(0) || "?")
+    /* @__PURE__ */ React31.createElement(Text12, { style: { color: theme.colors.text } }, metadata.name?.charAt(0) || "?")
   );
-  const renderInput = (key, props) => /* @__PURE__ */ React30.createElement(
+  const renderInput = (key, props) => /* @__PURE__ */ React31.createElement(
     Input,
     {
       placeholder: props.placeholder,
@@ -2892,18 +3097,18 @@ var IntegrationForm = ({
       secureTextEntry: props.secureTextEntry
     }
   );
-  const renderErrorAlert = () => errorMessage ? /* @__PURE__ */ React30.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React30.createElement(AlertDescription, null, errorMessage)) : null;
-  const renderChainSelection = () => userUsedChains.length > 0 && formValues.address && /* @__PURE__ */ React30.createElement(View14, { style: styles14.chainSelection }, /* @__PURE__ */ React30.createElement(Text12, { style: [styles14.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"), /* @__PURE__ */ React30.createElement(ScrollView3, { contentContainerStyle: styles14.scrollViewContent }, /* @__PURE__ */ React30.createElement(View14, { style: styles14.chainChips }, userUsedChains.map((chain) => {
+  const renderErrorAlert = () => errorMessage ? /* @__PURE__ */ React31.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React31.createElement(AlertDescription, null, errorMessage)) : null;
+  const renderChainSelection = () => userUsedChains.length > 0 && formValues.address && /* @__PURE__ */ React31.createElement(View14, { style: styles14.chainSelection }, /* @__PURE__ */ React31.createElement(Text12, { style: [styles14.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"), /* @__PURE__ */ React31.createElement(ScrollView3, { contentContainerStyle: styles14.scrollViewContent }, /* @__PURE__ */ React31.createElement(View14, { style: styles14.chainChips }, userUsedChains.map((chain) => {
     const isSelected = selectedChains.has(chain.id);
     const hasError = chainErrors[chain.id];
-    return /* @__PURE__ */ React30.createElement(
+    return /* @__PURE__ */ React31.createElement(
       TouchableOpacity5,
       {
         onPress: () => toggleChainSelection(chain.id),
         style: styles14.chainButton,
         key: chain.id
       },
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(
         View14,
         {
           style: [
@@ -2914,7 +3119,7 @@ var IntegrationForm = ({
             }
           ]
         },
-        /* @__PURE__ */ React30.createElement(
+        /* @__PURE__ */ React31.createElement(
           Text12,
           {
             style: [
@@ -2926,16 +3131,16 @@ var IntegrationForm = ({
           },
           chain.name
         ),
-        isSelected ? /* @__PURE__ */ React30.createElement(
+        isSelected ? /* @__PURE__ */ React31.createElement(
           CloseIcon,
           {
             size: 12,
             color: hasError ? theme.colors.error : theme.colors.primary
           }
-        ) : /* @__PURE__ */ React30.createElement(PlusIcon, { size: 12, color: theme.colors.textSecondary })
+        ) : /* @__PURE__ */ React31.createElement(PlusIcon, { size: 12, color: theme.colors.textSecondary })
       )
     );
-  }))), Object.keys(chainErrors).length > 0 && /* @__PURE__ */ React30.createElement(View14, { style: styles14.chainErrorsContainer }, /* @__PURE__ */ React30.createElement(
+  }))), Object.keys(chainErrors).length > 0 && /* @__PURE__ */ React31.createElement(View14, { style: styles14.chainErrorsContainer }, /* @__PURE__ */ React31.createElement(
     Text12,
     {
       style: [styles14.chainErrorsTitle, { color: theme.colors.error }]
@@ -2943,7 +3148,7 @@ var IntegrationForm = ({
     "Errors:"
   ), Object.entries(chainErrors).map(([chainId, error]) => {
     const chain = userUsedChains.find((c) => c.id === chainId);
-    return /* @__PURE__ */ React30.createElement(
+    return /* @__PURE__ */ React31.createElement(
       Text12,
       {
         key: chainId,
@@ -2955,7 +3160,7 @@ var IntegrationForm = ({
       error
     );
   })));
-  const renderFormBlock = () => /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(View14, { style: styles14.header }, renderLogo(), /* @__PURE__ */ React30.createElement(Text12, { style: [styles14.name, { color: theme.colors.text }] }, metadata.name)), renderErrorAlert(), shouldShowFormFields && /* @__PURE__ */ React30.createElement(React30.Fragment, null, metadata.address && /* @__PURE__ */ React30.createElement(React30.Fragment, null, renderInput("address", {
+  const renderFormBlock = () => /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(View14, { style: styles14.header }, renderLogo(), /* @__PURE__ */ React31.createElement(Text12, { style: [styles14.name, { color: theme.colors.text }] }, metadata.name)), renderErrorAlert(), shouldShowFormFields && /* @__PURE__ */ React31.createElement(React31.Fragment, null, metadata.address && /* @__PURE__ */ React31.createElement(React31.Fragment, null, renderInput("address", {
     placeholder: "Enter address",
     autoCapitalize: "none",
     autoCorrect: false
@@ -2971,16 +3176,16 @@ var IntegrationForm = ({
   }), metadata.password && renderInput("password", {
     placeholder: "Enter Password",
     secureTextEntry: true
-  })), hasNoFields && !metadata?.isWalletConnectSupported && /* @__PURE__ */ React30.createElement(Alert, { variant: "default", style: { marginTop: 12 } }, /* @__PURE__ */ React30.createElement(AlertDescription, null, "This integration is not supported here yet \u2014 try using it through our Kryptos Platform.")));
+  })), hasNoFields && !metadata?.isWalletConnectSupported && /* @__PURE__ */ React31.createElement(Alert, { variant: "default", style: { marginTop: 12 } }, /* @__PURE__ */ React31.createElement(AlertDescription, null, "This integration is not supported here yet \u2014 try using it through our Kryptos Platform.")));
   const addIntegrationLabel = formValues.address && userUsedChains.length > 0 && selectedChains.size > 0 ? `Add ${selectedChains.size} Chain${selectedChains.size !== 1 ? "s" : ""}` : "Add Integration";
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, !metadata?.isWalletConnectSupported ? /* @__PURE__ */ React30.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ React30.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React30.createElement(View14, { style: styles14.headerContent }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, !metadata?.isWalletConnectSupported ? /* @__PURE__ */ React31.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ React31.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React31.createElement(View14, { style: styles14.headerContent }, /* @__PURE__ */ React31.createElement(
     TouchableOpacity5,
     {
       onPress: () => setAddIntegrationMode(null),
       style: styles14.backButton
     },
-    /* @__PURE__ */ React30.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-  ), /* @__PURE__ */ React30.createElement(Text12, { style: [styles14.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React30.createElement(ModalBody, { scrollable: false, style: styles14.contentContainer }, renderFormBlock()), !hasNoFields && /* @__PURE__ */ React30.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
+  ), /* @__PURE__ */ React31.createElement(Text12, { style: [styles14.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React31.createElement(ModalBody, { scrollable: false, style: styles14.contentContainer }, renderFormBlock()), !hasNoFields && /* @__PURE__ */ React31.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React31.createElement(
     Button,
     {
       variant: "outline",
@@ -2991,7 +3196,7 @@ var IntegrationForm = ({
       style: styles14.button
     },
     addIntegrationLabel
-  ), /* @__PURE__ */ React30.createElement(Footer, null))) : /* @__PURE__ */ React30.createElement(
+  ), /* @__PURE__ */ React31.createElement(Footer, null))) : /* @__PURE__ */ React31.createElement(
     WalletConnectComponent,
     {
       integration: metadata,
@@ -2999,7 +3204,8 @@ var IntegrationForm = ({
       onAddHandle,
       modalOpen: open,
       setAddIntegrationMode,
-      handleClose
+      handleClose,
+      providersList
     }
   ));
 };
@@ -3132,14 +3338,14 @@ var Integration = ({
 }) => {
   const { appName, linkToken } = useKryptosConnect();
   const theme = useTheme();
-  const [addIntegrationMode, setAddIntegrationMode] = React31.useState(null);
-  const [query, setQuery] = React31.useState("");
-  const [activeTab, setActiveTab] = React31.useState("all");
-  const [supportedProviders, setSupportedProviders] = React31.useState([]);
-  const [addedIntegrations, setAddedIntegrations] = React31.useState([]);
-  const [existingIntegrations, setExistingIntegrations] = React31.useState([]);
-  const [isLoading, setIsLoading] = React31.useState(false);
-  const [errorMessage, setErrorMessage] = React31.useState("");
+  const [addIntegrationMode, setAddIntegrationMode] = React32.useState(null);
+  const [query, setQuery] = React32.useState("");
+  const [activeTab, setActiveTab] = React32.useState("all");
+  const [supportedProviders, setSupportedProviders] = React32.useState([]);
+  const [addedIntegrations, setAddedIntegrations] = React32.useState([]);
+  const [existingIntegrations, setExistingIntegrations] = React32.useState([]);
+  const [isLoading, setIsLoading] = React32.useState(false);
+  const [errorMessage, setErrorMessage] = React32.useState("");
   const handleClose = () => {
     onClose();
   };
@@ -3170,13 +3376,13 @@ var Integration = ({
       setIsLoading(false);
     }
   };
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     if (linkToken) {
       fetchSupportedProviders();
       fetchExistingIntegrations();
     }
   }, [linkToken]);
-  const isIntegrationAdded = React31.useCallback(
+  const isIntegrationAdded = React32.useCallback(
     (publicName) => {
       const integrations = [...addedIntegrations, ...existingIntegrations];
       return integrations.some(
@@ -3185,7 +3391,7 @@ var Integration = ({
     },
     [addedIntegrations, existingIntegrations]
   );
-  const getIntegrationCount = React31.useCallback(
+  const getIntegrationCount = React32.useCallback(
     (publicName) => {
       const integrations = [...addedIntegrations, ...existingIntegrations];
       return integrations.filter(
@@ -3194,7 +3400,7 @@ var Integration = ({
     },
     [addedIntegrations, existingIntegrations]
   );
-  const filteredResults = React31.useMemo(() => {
+  const filteredResults = React32.useMemo(() => {
     let filtered = supportedProviders;
     if (activeTab !== "all") {
       filtered = filtered.filter((provider) => provider.type === activeTab);
@@ -3234,7 +3440,7 @@ var Integration = ({
       setIsLoading(false);
     }
   };
-  const renderProviderItem = ({ item }) => /* @__PURE__ */ React31.createElement(
+  const renderProviderItem = ({ item }) => /* @__PURE__ */ React32.createElement(
     TouchableOpacity6,
     {
       style: [
@@ -3247,14 +3453,14 @@ var Integration = ({
       onPress: () => setAddIntegrationMode(item),
       activeOpacity: 0.7
     },
-    /* @__PURE__ */ React31.createElement(View15, { style: styles15.providerInfo }, item?.logo ? /* @__PURE__ */ React31.createElement(
-      Image3,
+    /* @__PURE__ */ React32.createElement(View15, { style: styles15.providerInfo }, item?.logo ? isSvgUrl(item?.logo) ? /* @__PURE__ */ React32.createElement(RemoteSvg, { uri: item?.logo }) : /* @__PURE__ */ React32.createElement(
+      Image4,
       {
         source: { uri: item?.logo },
         style: styles15.providerLogo,
         resizeMode: "contain"
       }
-    ) : /* @__PURE__ */ React31.createElement(
+    ) : /* @__PURE__ */ React32.createElement(
       View15,
       {
         style: [
@@ -3262,9 +3468,9 @@ var Integration = ({
           { backgroundColor: theme.colors.surfaceSecondary }
         ]
       },
-      /* @__PURE__ */ React31.createElement(Text13, { style: { color: theme.colors.text } }, item?.name?.charAt(0) || "?")
-    ), /* @__PURE__ */ React31.createElement(Text13, { style: [styles15.providerName, { color: theme.colors.text }] }, item?.name + "\u200B")),
-    isIntegrationAdded(item?.public_name) && /* @__PURE__ */ React31.createElement(View15, { style: styles15.providerStatus }, /* @__PURE__ */ React31.createElement(CheckCircleIcon, { size: 18, color: theme.colors.success }), /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React32.createElement(Text13, { style: { color: theme.colors.text } }, item?.name?.charAt(0) || "?")
+    ), /* @__PURE__ */ React32.createElement(Text13, { style: [styles15.providerName, { color: theme.colors.text }] }, item?.name + "\u200B")),
+    isIntegrationAdded(item?.public_name) && /* @__PURE__ */ React32.createElement(View15, { style: styles15.providerStatus }, /* @__PURE__ */ React32.createElement(CheckCircleIcon, { size: 18, color: theme.colors.success }), /* @__PURE__ */ React32.createElement(
       Text13,
       {
         style: [
@@ -3275,15 +3481,69 @@ var Integration = ({
       getIntegrationCount(item?.public_name)
     ))
   );
-  const renderSkeletonItem = () => /* @__PURE__ */ React31.createElement(SkeletonItem_default, null);
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, !addIntegrationMode ? /* @__PURE__ */ React31.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ React31.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React31.createElement(View15, { style: styles15.headerContent }, addIntegrationMode && /* @__PURE__ */ React31.createElement(
+  const renderSkeletonItem = () => /* @__PURE__ */ React32.createElement(SkeletonItem_default, null);
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, !addIntegrationMode ? /* @__PURE__ */ React32.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ React32.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React32.createElement(View15, { style: styles15.headerContent }, addIntegrationMode && /* @__PURE__ */ React32.createElement(
     TouchableOpacity6,
     {
       onPress: () => setAddIntegrationMode(null),
       style: styles15.backButton
     },
-    /* @__PURE__ */ React31.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-  ), /* @__PURE__ */ React31.createElement(Text13, { style: [styles15.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React31.createElement(ModalBody, { scrollable: false, style: styles15.noPadding }, /* @__PURE__ */ React31.createElement(View15, { style: styles15.container }, /* @__PURE__ */ React31.createElement(View15, { style: styles15.headerSection }, /* @__PURE__ */ React31.createElement(ConnectLogo, null), /* @__PURE__ */ React31.createElement(Text13, { style: [styles15.title, { color: theme.colors.text }] }, "Select an account to link to ", appName)), /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
+  ), /* @__PURE__ */ React32.createElement(Text13, { style: [styles15.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React32.createElement(ModalBody, { scrollable: false, style: styles15.noPadding }, /* @__PURE__ */ React32.createElement(View15, { style: styles15.container }, /* @__PURE__ */ React32.createElement(View15, { style: styles15.headerSection }, /* @__PURE__ */ React32.createElement(ConnectLogo, null), /* @__PURE__ */ React32.createElement(Text13, { style: [styles15.title, { color: theme.colors.text }] }, "Select an account to link to ", appName)), /* @__PURE__ */ React32.createElement(
+    View15,
+    {
+      style: {
+        paddingHorizontal: theme.spacing.xl,
+        paddingVertical: theme.spacing.sm + 2,
+        backgroundColor: theme.colors.background,
+        zIndex: 10
+      }
+    },
+    /* @__PURE__ */ React32.createElement(
+      Input,
+      {
+        value: query,
+        onChangeText: setQuery,
+        placeholder: "Search Integrations...",
+        containerStyle: styles15.searchInput
+      }
+    ),
+    /* @__PURE__ */ React32.createElement(View15, { style: styles15.tabsContainer }, [
+      { label: "All", value: "all" },
+      { label: "Exchanges", value: "exchange" },
+      { label: "Blockchains", value: "blockchain" },
+      { label: "Wallets", value: "wallet" }
+    ].map((tab) => /* @__PURE__ */ React32.createElement(
+      TouchableOpacity6,
+      {
+        key: tab.value,
+        style: [
+          styles15.tab,
+          {
+            backgroundColor: activeTab === tab.value ? theme.colors.primary : theme.colors.surface,
+            borderColor: theme.colors.border
+          }
+        ],
+        onPress: () => {
+          setActiveTab(
+            tab.value
+          );
+        }
+      },
+      /* @__PURE__ */ React32.createElement(
+        Text13,
+        {
+          style: [
+            styles15.tabText,
+            {
+              color: activeTab === tab.value ? theme.colors.white : theme.colors.text
+            }
+          ]
+        },
+        tab.label
+      )
+    )))
+  ), /* @__PURE__ */ React32.createElement(
     FlatList,
     {
       data: isLoading ? Array.from({ length: 8 }, (_, i) => ({
@@ -3300,61 +3560,7 @@ var Integration = ({
         { paddingHorizontal: theme.spacing.xl }
       ],
       showsVerticalScrollIndicator: false,
-      ListHeaderComponent: /* @__PURE__ */ React31.createElement(
-        View15,
-        {
-          style: {
-            paddingVertical: theme.spacing.sm + 2,
-            backgroundColor: theme.colors.background,
-            zIndex: 10
-          }
-        },
-        /* @__PURE__ */ React31.createElement(
-          Input,
-          {
-            value: query,
-            onChangeText: setQuery,
-            placeholder: "Search Integrations...",
-            containerStyle: styles15.searchInput
-          }
-        ),
-        /* @__PURE__ */ React31.createElement(View15, { style: styles15.tabsContainer }, [
-          { label: "All", value: "all" },
-          { label: "Exchanges", value: "exchange" },
-          { label: "Blockchains", value: "blockchain" },
-          { label: "Wallets", value: "wallet" }
-        ].map((tab) => /* @__PURE__ */ React31.createElement(
-          TouchableOpacity6,
-          {
-            key: tab.value,
-            style: [
-              styles15.tab,
-              {
-                backgroundColor: activeTab === tab.value ? theme.colors.primary : theme.colors.surface,
-                borderColor: theme.colors.border
-              }
-            ],
-            onPress: () => setActiveTab(
-              tab.value
-            ),
-            activeOpacity: 0.7
-          },
-          /* @__PURE__ */ React31.createElement(
-            Text13,
-            {
-              style: [
-                styles15.tabText,
-                {
-                  color: activeTab === tab.value ? theme.colors.white : theme.colors.text
-                }
-              ]
-            },
-            tab.label
-          )
-        )))
-      ),
-      stickyHeaderIndices: [0],
-      ListEmptyComponent: /* @__PURE__ */ React31.createElement(View15, { style: styles15.emptyContainer }, !isLoading && /* @__PURE__ */ React31.createElement(
+      ListEmptyComponent: /* @__PURE__ */ React32.createElement(View15, { style: styles15.emptyContainer }, !isLoading && /* @__PURE__ */ React32.createElement(
         Text13,
         {
           style: [
@@ -3365,7 +3571,7 @@ var Integration = ({
         query ? "No search results found" : "No supported integrations found"
       ))
     }
-  ), errorMessage && /* @__PURE__ */ React31.createElement(View15, { style: styles15.errorContainer }, /* @__PURE__ */ React31.createElement(Alert, { variant: "destructive", style: styles15.errorAlert }, /* @__PURE__ */ React31.createElement(AlertDescription, null, errorMessage))))), /* @__PURE__ */ React31.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React31.createElement(
+  ), errorMessage && /* @__PURE__ */ React32.createElement(View15, { style: styles15.errorContainer }, /* @__PURE__ */ React32.createElement(Alert, { variant: "destructive", style: styles15.errorAlert }, /* @__PURE__ */ React32.createElement(AlertDescription, null, errorMessage))))), /* @__PURE__ */ React32.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React32.createElement(
     Button,
     {
       variant: "outline",
@@ -3376,7 +3582,7 @@ var Integration = ({
       style: styles15.continueButton
     },
     "Continue"
-  ), /* @__PURE__ */ React31.createElement(Footer, null))) : /* @__PURE__ */ React31.createElement(
+  ), /* @__PURE__ */ React32.createElement(Footer, null))) : /* @__PURE__ */ React32.createElement(
     IntegrationForm,
     {
       metadata: addIntegrationMode,
@@ -3386,7 +3592,8 @@ var Integration = ({
       },
       open: !!addIntegrationMode,
       setAddIntegrationMode,
-      handleClose
+      handleClose,
+      providersList: supportedProviders
     }
   ));
 };
@@ -3413,9 +3620,10 @@ var styles15 = StyleSheet15.create({
     flex: 1
   },
   headerSection: {
-    paddingHorizontal: 20
+    paddingHorizontal: 20,
+    // theme.spacing.xl
+    paddingTop: 10
     // theme.spacing.xl
-    // paddingTop: 10, // theme.spacing.xl
   },
   title: {
     fontSize: 16,
@@ -3438,7 +3646,9 @@ var styles15 = StyleSheet15.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    padding: 12,
+    paddingVertical: 8,
+    // theme.spacing.md
+    paddingHorizontal: 12,
     // theme.spacing.md
     borderRadius: 12,
     // theme.borderRadius.md
@@ -3507,30 +3717,30 @@ var styles15 = StyleSheet15.create({
   },
   tabsContainer: {
     flexDirection: "row",
-    gap: 4,
+    gap: 6,
     // theme.spacing.sm
     flexWrap: "wrap"
   },
   tab: {
-    paddingVertical: 8,
+    paddingVertical: 4,
     // theme.spacing.sm
-    paddingHorizontal: 16,
+    paddingHorizontal: 10,
     // theme.spacing.lg
-    borderRadius: 20,
+    borderRadius: 8,
     // theme.borderRadius.full / 2
     borderWidth: 1,
     alignItems: "center",
     justifyContent: "center"
   },
   tabText: {
-    fontSize: 13,
+    fontSize: 12,
     // theme.fontSize.sm
     fontWeight: "600"
   }
 });
 
 // src/molecules/OTPVerify.tsx
-import React32 from "react";
+import React33 from "react";
 import { StyleSheet as StyleSheet16, Text as Text14, TouchableOpacity as TouchableOpacity7, View as View16 } from "react-native";
 var OTPVerify = ({
   open,
@@ -3538,13 +3748,13 @@ var OTPVerify = ({
   onClose
 }) => {
   const theme = useTheme();
-  const [otp, setOtp] = React32.useState("");
+  const [otp, setOtp] = React33.useState("");
   const { linkToken, clientId, email, setUser } = useKryptosConnect();
-  const [isLoading, setIsLoading] = React32.useState(false);
-  const [isResending, setIsResending] = React32.useState(false);
-  const [resendCooldown, setResendCooldown] = React32.useState(0);
-  const [errorMessage, setErrorMessage] = React32.useState("");
-  const [successMessage, setSuccessMessage] = React32.useState("");
+  const [isLoading, setIsLoading] = React33.useState(false);
+  const [isResending, setIsResending] = React33.useState(false);
+  const [resendCooldown, setResendCooldown] = React33.useState(0);
+  const [errorMessage, setErrorMessage] = React33.useState("");
+  const [successMessage, setSuccessMessage] = React33.useState("");
   const handleSubmit = async () => {
     if (otp.length !== 6) return;
     setIsLoading(true);
@@ -3595,7 +3805,7 @@ var OTPVerify = ({
     setSuccessMessage("");
     setOtp("");
   };
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     if (resendCooldown > 0) {
       const timer = setTimeout(() => {
         setResendCooldown(resendCooldown - 1);
@@ -3604,20 +3814,20 @@ var OTPVerify = ({
     }
     return void 0;
   }, [resendCooldown]);
-  return /* @__PURE__ */ React32.createElement(Modal, { isOpen: open, onClose: handleClose, size: "lg" }, /* @__PURE__ */ React32.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React32.createElement(View16, { style: styles16.headerContent }, /* @__PURE__ */ React32.createElement(Text14, { style: [styles16.headerTitle, { color: theme.colors.text }] }, "OTP Verification"))), /* @__PURE__ */ React32.createElement(ModalBody, null, /* @__PURE__ */ React32.createElement(View16, { style: styles16.container }, /* @__PURE__ */ React32.createElement(ConnectLogo, null), /* @__PURE__ */ React32.createElement(View16, { style: styles16.emailInfo }, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(Modal, { isOpen: open, onClose: handleClose, size: "lg" }, /* @__PURE__ */ React33.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React33.createElement(View16, { style: styles16.headerContent }, /* @__PURE__ */ React33.createElement(Text14, { style: [styles16.headerTitle, { color: theme.colors.text }] }, "OTP Verification"))), /* @__PURE__ */ React33.createElement(ModalBody, null, /* @__PURE__ */ React33.createElement(View16, { style: styles16.container }, /* @__PURE__ */ React33.createElement(ConnectLogo, null), /* @__PURE__ */ React33.createElement(View16, { style: styles16.emailInfo }, /* @__PURE__ */ React33.createElement(
     Text14,
     {
       style: [styles16.infoText, { color: theme.colors.textSecondary }]
     },
     "We have sent a verification code to"
-  ), /* @__PURE__ */ React32.createElement(Text14, { style: [styles16.emailText, { color: theme.colors.text }] }, email)), /* @__PURE__ */ React32.createElement(
+  ), /* @__PURE__ */ React33.createElement(Text14, { style: [styles16.emailText, { color: theme.colors.text }] }, email)), /* @__PURE__ */ React33.createElement(
     OTP,
     {
       onComplete: handleOtpComplete,
       length: 6,
       setErrorMessage
     }
-  ), errorMessage ? /* @__PURE__ */ React32.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React32.createElement(AlertDescription, null, errorMessage)) : null, successMessage ? /* @__PURE__ */ React32.createElement(Alert, { variant: "default" }, /* @__PURE__ */ React32.createElement(AlertDescription, null, successMessage)) : null, /* @__PURE__ */ React32.createElement(
+  ), errorMessage ? /* @__PURE__ */ React33.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React33.createElement(AlertDescription, null, errorMessage)) : null, successMessage ? /* @__PURE__ */ React33.createElement(Alert, { variant: "default" }, /* @__PURE__ */ React33.createElement(AlertDescription, null, successMessage)) : null, /* @__PURE__ */ React33.createElement(
     Button,
     {
       variant: "outline",
@@ -3628,21 +3838,21 @@ var OTPVerify = ({
       style: styles16.button
     },
     "Continue"
-  ), /* @__PURE__ */ React32.createElement(
+  ), /* @__PURE__ */ React33.createElement(
     TouchableOpacity7,
     {
       onPress: handleResendOtp,
       disabled: resendCooldown > 0 || isResending,
       style: styles16.resendContainer
     },
-    isResending ? /* @__PURE__ */ React32.createElement(View16, { style: styles16.resendLoading }, /* @__PURE__ */ React32.createElement(LoaderIcon, { size: 16, color: theme.colors.primary }), /* @__PURE__ */ React32.createElement(
+    isResending ? /* @__PURE__ */ React33.createElement(View16, { style: styles16.resendLoading }, /* @__PURE__ */ React33.createElement(LoaderIcon, { size: 16, color: theme.colors.primary }), /* @__PURE__ */ React33.createElement(
       Text14,
       {
         style: [styles16.resendText, { color: theme.colors.primary }]
       },
       " ",
       "Sending..."
-    )) : resendCooldown > 0 ? /* @__PURE__ */ React32.createElement(
+    )) : resendCooldown > 0 ? /* @__PURE__ */ React33.createElement(
       Text14,
       {
         style: [
@@ -3653,14 +3863,14 @@ var OTPVerify = ({
       "Resend OTP in ",
       resendCooldown,
       "s"
-    ) : /* @__PURE__ */ React32.createElement(
+    ) : /* @__PURE__ */ React33.createElement(
       Text14,
       {
         style: [styles16.resendText, { color: theme.colors.primary }]
       },
       "Resend OTP"
     )
-  ))), /* @__PURE__ */ React32.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ React32.createElement(Footer, null)));
+  ))), /* @__PURE__ */ React33.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ React33.createElement(Footer, null)));
 };
 var styles16 = StyleSheet16.create({
   headerContent: {
@@ -3721,7 +3931,7 @@ var styles16 = StyleSheet16.create({
 });
 
 // src/molecules/Permissions.tsx
-import React33 from "react";
+import React34 from "react";
 import { StyleSheet as StyleSheet17, Text as Text15, View as View17 } from "react-native";
 var Permissions = ({
   open,
@@ -3730,8 +3940,8 @@ var Permissions = ({
 }) => {
   const { appName, linkToken, setUserConsent } = useKryptosConnect();
   const theme = useTheme();
-  const [isLoading, setIsLoading] = React33.useState(false);
-  const [errorMessage, setErrorMessage] = React33.useState("");
+  const [isLoading, setIsLoading] = React34.useState(false);
+  const [errorMessage, setErrorMessage] = React34.useState("");
   const handleConsentClick = async () => {
     try {
       setIsLoading(true);
@@ -3754,7 +3964,7 @@ var Permissions = ({
     "Access your transaction history and trading activity",
     "Keep this data updated and accessible when you're offline"
   ];
-  return /* @__PURE__ */ React33.createElement(Modal, { isOpen: open, onClose, size: "xl" }, /* @__PURE__ */ React33.createElement(ModalHeader, { onClose }, "Permissions"), /* @__PURE__ */ React33.createElement(ModalBody, null, /* @__PURE__ */ React33.createElement(View17, { style: styles17.container }, /* @__PURE__ */ React33.createElement(ConnectLogo, null), errorMessage ? /* @__PURE__ */ React33.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React33.createElement(AlertDescription, null, errorMessage)) : null, /* @__PURE__ */ React33.createElement(View17, { style: styles17.permissionsList }, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(Modal, { isOpen: open, onClose, size: "xl" }, /* @__PURE__ */ React34.createElement(ModalHeader, { onClose }, "Permissions"), /* @__PURE__ */ React34.createElement(ModalBody, null, /* @__PURE__ */ React34.createElement(View17, { style: styles17.container }, /* @__PURE__ */ React34.createElement(ConnectLogo, null), errorMessage ? /* @__PURE__ */ React34.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React34.createElement(AlertDescription, null, errorMessage)) : null, /* @__PURE__ */ React34.createElement(View17, { style: styles17.permissionsList }, /* @__PURE__ */ React34.createElement(
     Text15,
     {
       style: [styles17.subtitle, { color: theme.colors.textSecondary }]
@@ -3762,13 +3972,13 @@ var Permissions = ({
     "Allow ",
     appName,
     " to:"
-  ), permissionItems.map((item, index) => /* @__PURE__ */ React33.createElement(View17, { key: `permission-${index}`, style: styles17.permissionItem }, /* @__PURE__ */ React33.createElement(Text15, { style: [styles17.bullet, { color: theme.colors.primary }] }, index + 1, "."), /* @__PURE__ */ React33.createElement(
+  ), permissionItems.map((item, index) => /* @__PURE__ */ React34.createElement(View17, { key: `permission-${index}`, style: styles17.permissionItem }, /* @__PURE__ */ React34.createElement(Text15, { style: [styles17.bullet, { color: theme.colors.primary }] }, index + 1, "."), /* @__PURE__ */ React34.createElement(
     Text15,
     {
       style: [styles17.permissionText, { color: theme.colors.text }]
     },
     item
-  )))), /* @__PURE__ */ React33.createElement(
+  )))), /* @__PURE__ */ React34.createElement(
     View17,
     {
       style: [
@@ -3779,17 +3989,17 @@ var Permissions = ({
         }
       ]
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React34.createElement(
       Text15,
       {
         style: [styles17.infoText, { color: theme.colors.textSecondary }]
       },
       "By selecting",
       " ",
-      /* @__PURE__ */ React33.createElement(Text15, { style: { fontWeight: "600", color: theme.colors.text } }, "'Allow'"),
+      /* @__PURE__ */ React34.createElement(Text15, { style: { fontWeight: "600", color: theme.colors.text } }, "'Allow'"),
       ", you agree to share this information and keep it updated."
     )
-  ))), /* @__PURE__ */ React33.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React33.createElement(
+  ))), /* @__PURE__ */ React34.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React34.createElement(
     Button,
     {
       variant: "outline",
@@ -3800,7 +4010,7 @@ var Permissions = ({
       style: styles17.button
     },
     "Allow"
-  ), /* @__PURE__ */ React33.createElement(Footer, null)));
+  ), /* @__PURE__ */ React34.createElement(Footer, null)));
 };
 var styles17 = StyleSheet17.create({
   container: {
@@ -3860,7 +4070,7 @@ var styles17 = StyleSheet17.create({
 });
 
 // src/molecules/StatusModal.tsx
-import React34 from "react";
+import React35 from "react";
 import { StyleSheet as StyleSheet18, Text as Text16, View as View18 } from "react-native";
 var StatusModal = ({
   open,
@@ -3878,7 +4088,7 @@ var StatusModal = ({
     }
     onClose();
   };
-  return /* @__PURE__ */ React34.createElement(Modal, { isOpen: open, onClose: handleClose, size: "sm" }, /* @__PURE__ */ React34.createElement(ModalHeader, { showCloseButton: false, onClose: handleClose }, ""), /* @__PURE__ */ React34.createElement(ModalBody, null, /* @__PURE__ */ React34.createElement(View18, { style: styles18.container }, /* @__PURE__ */ React34.createElement(View18, { style: styles18.iconContainer }, status === "success" ? /* @__PURE__ */ React34.createElement(SuccessIcon, { size: 80 }) : /* @__PURE__ */ React34.createElement(ErrorIcon, { size: 80 })), /* @__PURE__ */ React34.createElement(Text16, { style: [styles18.message, { color: theme.colors.text }] }, status === "success" ? "Connection successful" : "Connection failed"))), /* @__PURE__ */ React34.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(Modal, { isOpen: open, onClose: handleClose, size: "sm" }, /* @__PURE__ */ React35.createElement(ModalHeader, { showCloseButton: false, onClose: handleClose }, ""), /* @__PURE__ */ React35.createElement(ModalBody, null, /* @__PURE__ */ React35.createElement(View18, { style: styles18.container }, /* @__PURE__ */ React35.createElement(View18, { style: styles18.iconContainer }, status === "success" ? /* @__PURE__ */ React35.createElement(SuccessIcon, { size: 80 }) : /* @__PURE__ */ React35.createElement(ErrorIcon, { size: 80 })), /* @__PURE__ */ React35.createElement(Text16, { style: [styles18.message, { color: theme.colors.text }] }, status === "success" ? "Connection successful" : "Connection failed"))), /* @__PURE__ */ React35.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React35.createElement(
     Button,
     {
       variant: "outline",
@@ -3887,7 +4097,7 @@ var StatusModal = ({
       style: styles18.button
     },
     status === "success" ? "Continue" : "Try again later"
-  ), /* @__PURE__ */ React34.createElement(Footer, null)));
+  ), /* @__PURE__ */ React35.createElement(Footer, null)));
 };
 var styles18 = StyleSheet18.create({
   container: {
@@ -3914,18 +4124,18 @@ var styles18 = StyleSheet18.create({
 });
 
 // src/molecules/EndModal.tsx
-import React35, { useEffect as useEffect2 } from "react";
+import React36, { useEffect as useEffect4 } from "react";
 import { StyleSheet as StyleSheet19, Text as Text17, View as View19 } from "react-native";
 var EndModal = ({ open, onClose }) => {
   const theme = useTheme();
-  useEffect2(() => {
+  useEffect4(() => {
     if (!open) return;
     const timer = setTimeout(() => {
       onClose();
     }, 5e3);
     return () => clearTimeout(timer);
   }, []);
-  return /* @__PURE__ */ React35.createElement(Modal, { isOpen: open, onClose, size: "md" }, /* @__PURE__ */ React35.createElement(ModalHeader, { onClose }, ""), /* @__PURE__ */ React35.createElement(ModalBody, null, /* @__PURE__ */ React35.createElement(View19, { style: styles19.container }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(Modal, { isOpen: open, onClose, size: "md" }, /* @__PURE__ */ React36.createElement(ModalHeader, { onClose }, ""), /* @__PURE__ */ React36.createElement(ModalBody, null, /* @__PURE__ */ React36.createElement(View19, { style: styles19.container }, /* @__PURE__ */ React36.createElement(
     View19,
     {
       style: [
@@ -3933,9 +4143,9 @@ var EndModal = ({ open, onClose }) => {
         { backgroundColor: theme.colors.successLight }
       ]
     },
-    /* @__PURE__ */ React35.createElement(SuccessIcon, { size: 80 })
-  ), /* @__PURE__ */ React35.createElement(Text17, { style: [styles19.message, { color: theme.colors.text }] }, `All set! We're redirecting you back to the app. If it takes longer
-            than expected, tap the button below to continue.`))), /* @__PURE__ */ React35.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React36.createElement(SuccessIcon, { size: 80 })
+  ), /* @__PURE__ */ React36.createElement(Text17, { style: [styles19.message, { color: theme.colors.text }] }, `All set! We're redirecting you back to the app. If it takes longer
+            than expected, tap the button below to continue.`))), /* @__PURE__ */ React36.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React36.createElement(
     Button,
     {
       variant: "primary",
@@ -3944,7 +4154,7 @@ var EndModal = ({ open, onClose }) => {
       style: styles19.button
     },
     "Continue to App"
-  ), /* @__PURE__ */ React35.createElement(Footer, null)));
+  ), /* @__PURE__ */ React36.createElement(Footer, null)));
 };
 var styles19 = StyleSheet19.create({
   container: {
@@ -3981,9 +4191,9 @@ var KryptosConnectButton = ({
   textStyle
 }) => {
   const { theme: themeName } = useKryptosConnect();
-  const [open, setOpen] = React36.useState(false);
+  const [open, setOpen] = React37.useState(false);
   const theme = useTheme();
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, children ? /* @__PURE__ */ React36.createElement(TouchableOpacity8, { onPress: () => setOpen(true), style }, children) : /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, children ? /* @__PURE__ */ React37.createElement(TouchableOpacity8, { onPress: () => setOpen(true), style }, children) : /* @__PURE__ */ React37.createElement(
     TouchableOpacity8,
     {
       onPress: () => setOpen(true),
@@ -4002,7 +4212,7 @@ var KryptosConnectButton = ({
       ],
       activeOpacity: 0.8
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React37.createElement(
       Text18,
       {
         style: [
@@ -4017,8 +4227,8 @@ var KryptosConnectButton = ({
       "Connect with",
       " "
     ),
-    /* @__PURE__ */ React36.createElement(LogoIcon, { size: 24 })
-  ), /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React37.createElement(LogoIcon, { size: 24 })
+  ), /* @__PURE__ */ React37.createElement(
     KryptosConnectModal,
     {
       open,
@@ -4046,7 +4256,7 @@ var KryptosConnectModal = ({
     isAuthorized,
     linkToken
   } = useKryptosConnect();
-  const [step, setStep] = React36.useState("INIT" /* INIT */);
+  const [step, setStep] = React37.useState("INIT" /* INIT */);
   const handleClose = () => {
     setOpen(false);
     setIsInitialized(false);
@@ -4082,7 +4292,7 @@ var KryptosConnectModal = ({
     handleClose();
   };
   if (!open) return null;
-  return /* @__PURE__ */ React36.createElement(View20, { style: styles20.container }, step === "INIT" /* INIT */ && /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(View20, { style: styles20.container }, step === "INIT" /* INIT */ && /* @__PURE__ */ React37.createElement(
     Init,
     {
       open,
@@ -4096,7 +4306,7 @@ var KryptosConnectModal = ({
       },
       onClose: handleAbort
     }
-  ), step === "AUTH" /* AUTH */ && /* @__PURE__ */ React36.createElement(
+  ), step === "AUTH" /* AUTH */ && /* @__PURE__ */ React37.createElement(
     Auth,
     {
       open,
@@ -4104,28 +4314,28 @@ var KryptosConnectModal = ({
       onGuestSuccess: () => setStep("INTEGRATION" /* INTEGRATION */),
       onClose: handleAbort
     }
-  ), step === "OTP" /* OTP */ && /* @__PURE__ */ React36.createElement(
+  ), step === "OTP" /* OTP */ && /* @__PURE__ */ React37.createElement(
     OTPVerify,
     {
       open,
       onSuccess: () => setStep("INTEGRATION" /* INTEGRATION */),
       onClose: handleAbort
     }
-  ), step === "INTEGRATION" /* INTEGRATION */ && /* @__PURE__ */ React36.createElement(
+  ), step === "INTEGRATION" /* INTEGRATION */ && /* @__PURE__ */ React37.createElement(
     Integration,
     {
       open,
       onSuccess: handleConsentClick,
       onClose: handleAbort
     }
-  ), step === "PERMISSIONS" /* PERMISSIONS */ && /* @__PURE__ */ React36.createElement(
+  ), step === "PERMISSIONS" /* PERMISSIONS */ && /* @__PURE__ */ React37.createElement(
     Permissions,
     {
       open,
       onClose: handleAbort,
       onSuccess: () => setStep("STATUS" /* STATUS */)
     }
-  ), step === "STATUS" /* STATUS */ && /* @__PURE__ */ React36.createElement(
+  ), step === "STATUS" /* STATUS */ && /* @__PURE__ */ React37.createElement(
     StatusModal,
     {
       open,
@@ -4134,7 +4344,7 @@ var KryptosConnectModal = ({
       onError: handleError,
       status: userConsent?.public_token ? "success" : "error"
     }
-  ), step === "END" /* END */ && /* @__PURE__ */ React36.createElement(
+  ), step === "END" /* END */ && /* @__PURE__ */ React37.createElement(
     EndModal,
     {
       open,