@kryptos_connect/mobile-sdk 1.0.0 → 1.0.3

package/dist/index.mjs

@@ -1,10 +1,10 @@
 // src/KryptosConnectButton.tsx
-import React31 from "react";
+import React36 from "react";
 import {
-  StyleSheet as StyleSheet16,
-  Text as Text15,
-  TouchableOpacity as TouchableOpacity7,
-  View as View16
+  StyleSheet as StyleSheet20,
+  Text as Text18,
+  TouchableOpacity as TouchableOpacity8,
+  View as View20
 } from "react-native";
 
 // src/assets/LogoIcon.tsx
@@ -46,6 +46,152 @@ var LogoIcon = ({ size = 36 }) => {
 
 // src/contexts/KryptosContext.tsx
 import React2 from "react";
+
+// src/services/api.ts
+import axios from "axios";
+
+// src/config/index.ts
+var getBaseUrl = () => {
+  return getGlobalBaseUrl() || "https://connect-api.kryptos.io/";
+};
+
+// src/services/api.ts
+var api = axios.create({
+  headers: {
+    "Content-Type": "application/json"
+  }
+});
+api.interceptors.request.use((config) => {
+  config.baseURL = getBaseUrl();
+  return config;
+});
+var SCOPES = "openid profile offline_access email portfolios:read transactions:read integrations:read tax:read accounting:read reports:read workspace:read users:read";
+async function sendEmailOtp(linkToken, email, clientId) {
+  const res = await api.post(
+    "/v1/sendEmailOTP",
+    {
+      email,
+      purpose: "login",
+      clientId
+    },
+    {
+      headers: {
+        "X-LINK-TOKEN": linkToken
+      }
+    }
+  );
+  return res.data;
+}
+async function loginWithOtp(linkToken, email, code, clientId) {
+  const res = await api.post(
+    "/v1/loginUserUsingOTP",
+    {
+      email,
+      code,
+      clientId,
+      purpose: "login"
+    },
+    {
+      headers: {
+        "X-LINK-TOKEN": linkToken
+      }
+    }
+  );
+  return res.data;
+}
+async function createAnonymousUser(linkToken, clientId) {
+  const res = await api.post(
+    "/link-token/login",
+    { clientId },
+    {
+      headers: {
+        "X-LINK-TOKEN": linkToken
+      }
+    }
+  );
+  return res.data;
+}
+async function addUserIntegration(linkToken, integration) {
+  const res = await api.post(
+    "/integrations/keys",
+    { keys: [...integration] },
+    {
+      headers: {
+        "X-LINK-TOKEN": linkToken
+      }
+    }
+  );
+  return res.data?.data;
+}
+async function giveUserConsent(linkToken) {
+  const res = await api.post(
+    "/consent",
+    {
+      granted_scopes: SCOPES
+    },
+    {
+      headers: {
+        "X-LINK-TOKEN": linkToken
+      }
+    }
+  );
+  return res.data?.data;
+}
+async function testCredentials(linkToken, data) {
+  const res = await api.post("/integrations/credentials/test", data, {
+    headers: {
+      "X-LINK-TOKEN": linkToken
+    }
+  });
+  return res.data?.data;
+}
+async function getSupportedProviders(linkToken) {
+  const res = await api.get("/integrations/providers", {
+    headers: {
+      "X-LINK-TOKEN": linkToken
+    }
+  });
+  return res.data?.data;
+}
+async function getUserIntegrations(linkToken) {
+  const res = await api.get("/integrations", {
+    headers: {
+      "X-LINK-TOKEN": linkToken
+    }
+  });
+  return res.data?.data;
+}
+async function getUserUsedChains(linkToken, address) {
+  const res = await api.get("/integrations/user-used-chain", {
+    headers: {
+      "X-LINK-TOKEN": linkToken
+    },
+    params: {
+      id: address
+    }
+  });
+  return res.data?.data?.chains || [];
+}
+async function getClientInfo(linkToken) {
+  const res = await api.get("/client", {
+    headers: {
+      "X-LINK-TOKEN": linkToken
+    }
+  });
+  return res.data?.data;
+}
+async function getUserInfo(linkToken) {
+  const res = await api.get("/link-token/session", {
+    headers: {
+      "X-LINK-TOKEN": linkToken
+    }
+  });
+  return res.data?.data;
+}
+
+// src/contexts/KryptosContext.tsx
+var globalBaseUrl;
+var getGlobalBaseUrl = () => globalBaseUrl;
 var KryptosContext = React2.createContext(
   void 0
 );
@@ -57,6 +203,20 @@ var KryptosConnectProvider = ({ children, config }) => {
   const [userConsent, setUserConsent] = React2.useState(
     null
   );
+  const [isAuthorized, setIsAuthorized] = React2.useState(false);
+  const [clientInfo, setClientInfo] = React2.useState(null);
+  React2.useEffect(() => {
+    globalBaseUrl = config.baseUrl;
+  }, [config.baseUrl]);
+  React2.useEffect(() => {
+    const fetchClientInfo = async () => {
+      if (linkToken) {
+        const res = await getClientInfo(linkToken);
+        setClientInfo(res);
+      }
+    };
+    fetchClientInfo();
+  }, [linkToken]);
   return /* @__PURE__ */ React2.createElement(
     KryptosContext.Provider,
     {
@@ -71,7 +231,10 @@ var KryptosConnectProvider = ({ children, config }) => {
         email,
         setEmail,
         userConsent,
-        setUserConsent
+        setUserConsent,
+        clientInfo,
+        isAuthorized,
+        setIsAuthorized
       }
     },
     children
@@ -108,6 +271,7 @@ var lightTheme = {
     successLight: "#D1FAE5",
     warning: "#F59E0B",
     warningLight: "#FEF3C7",
+    warningText: "#92400E",
     overlay: "rgba(0, 0, 0, 0.5)",
     white: "#FFFFFF",
     black: "#000000"
@@ -187,6 +351,7 @@ var darkTheme = {
     successLight: "#065F46",
     warning: "#F59E0B",
     warningLight: "#78350F",
+    warningText: "#FEF3C7",
     overlay: "rgba(0, 0, 0, 0.7)",
     white: "#FFFFFF",
     black: "#000000"
@@ -232,198 +397,62 @@ var useTheme = () => {
   return currentTheme;
 };
 
-// src/molecules/Auth.tsx
-import React12 from "react";
-import { View as View5, Text as Text5, StyleSheet as StyleSheet5 } from "react-native";
-
-// src/assets/LinkIcon.tsx
+// src/components/Button.tsx
 import React4 from "react";
-import Svg2, { Path as Path2 } from "react-native-svg";
-var LinkIcon = ({
-  size = 20,
-  color = "#00C693"
-}) => {
-  return /* @__PURE__ */ React4.createElement(Svg2, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React4.createElement(
-    Path2,
-    {
-      d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    Path2,
-    {
-      d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-};
-
-// src/assets/ShieldIcon.tsx
-import React5 from "react";
-import Svg3, { Path as Path3 } from "react-native-svg";
-var ShieldIcon = ({
-  size = 20,
-  color = "#00C693"
-}) => {
-  return /* @__PURE__ */ React5.createElement(Svg3, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React5.createElement(
-    Path3,
-    {
-      d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React5.createElement(
-    Path3,
-    {
-      d: "m9 12 2 2 4-4",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-};
-
-// src/components/Alert.tsx
-import React6 from "react";
-import { StyleSheet, Text, View } from "react-native";
-var Alert = ({
-  variant = "default",
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  View
+} from "react-native";
+var Button = ({
+  variant = "primary",
+  size = "md",
   children,
-  style
+  onPress,
+  disabled = false,
+  loading = false,
+  style,
+  textStyle
 }) => {
   const theme = useTheme();
   const getVariantStyles = () => {
     switch (variant) {
-      case "destructive":
+      case "primary":
         return {
-          backgroundColor: theme.colors.errorLight,
-          borderColor: theme.colors.error
+          backgroundColor: disabled ? theme.colors.textTertiary : theme.colors.primary,
+          borderWidth: 0
         };
-      default:
+      case "secondary":
         return {
-          backgroundColor: theme.colors.surface,
+          backgroundColor: disabled ? theme.colors.surfaceSecondary : theme.colors.surface,
+          borderWidth: 1,
           borderColor: theme.colors.border
         };
-    }
-  };
-  return /* @__PURE__ */ React6.createElement(
-    View,
-    {
-      style: [
-        styles.alert,
-        {
-          borderRadius: theme.borderRadius.md,
-          padding: theme.spacing.md
-        },
-        getVariantStyles(),
-        style
-      ]
-    },
-    children
-  );
-};
-var AlertDescription = ({
-  children,
-  style
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ React6.createElement(
-    Text,
-    {
-      style: [
-        styles.description,
-        {
-          color: theme.colors.text,
-          fontSize: theme.fontSize.md
-        },
-        style
-      ]
-    },
-    children
-  );
-};
-var styles = StyleSheet.create({
-  alert: {
-    borderWidth: 1,
-    marginVertical: 12
-    // theme.spacing.md - consistent alert spacing
-  },
-  title: {
-    fontWeight: "600",
-    marginBottom: 4
-    // theme.spacing.xs
-  },
-  description: {
-    lineHeight: 18,
-    textAlign: "center"
-  }
-});
-
-// src/components/Button.tsx
-import React7 from "react";
-import {
-  TouchableOpacity,
-  Text as Text2,
-  StyleSheet as StyleSheet2,
-  ActivityIndicator,
-  View as View2
-} from "react-native";
-var Button = ({
-  variant = "primary",
-  size = "md",
-  children,
-  onPress,
-  disabled = false,
-  loading = false,
-  style,
-  textStyle
-}) => {
-  const theme = useTheme();
-  const getVariantStyles = () => {
-    switch (variant) {
-      case "primary":
-        return {
-          backgroundColor: disabled ? theme.colors.textTertiary : theme.colors.primary,
-          borderWidth: 0
-        };
-      case "secondary":
-        return {
-          backgroundColor: disabled ? theme.colors.surfaceSecondary : theme.colors.surface,
-          borderWidth: 1,
-          borderColor: theme.colors.border
-        };
-      case "outline":
-        return {
-          backgroundColor: "transparent",
-          borderWidth: 1,
-          borderColor: disabled ? theme.colors.textTertiary : theme.colors.primary
-        };
-      case "ghost":
-        return {
-          backgroundColor: "transparent",
-          borderWidth: 0
-        };
-      case "success":
-        return {
-          backgroundColor: disabled ? theme.colors.textTertiary : theme.colors.success,
-          borderWidth: 0
-        };
-      case "error":
-        return {
-          backgroundColor: disabled ? theme.colors.textTertiary : theme.colors.error,
-          borderWidth: 0
-        };
-      default:
-        return {};
+      case "outline":
+        return {
+          backgroundColor: "transparent",
+          borderWidth: 1,
+          borderColor: disabled ? theme.colors.textTertiary : theme.colors.primary
+        };
+      case "ghost":
+        return {
+          backgroundColor: "transparent",
+          borderWidth: 0
+        };
+      case "success":
+        return {
+          backgroundColor: disabled ? theme.colors.textTertiary : theme.colors.success,
+          borderWidth: 0
+        };
+      case "error":
+        return {
+          backgroundColor: disabled ? theme.colors.textTertiary : theme.colors.error,
+          borderWidth: 0
+        };
+      default:
+        return {};
     }
   };
   const getTextColor = () => {
@@ -488,35 +517,35 @@ var Button = ({
     }
   };
   const sizeStyles = getSizeStyles();
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React4.createElement(
     TouchableOpacity,
     {
       onPress,
       disabled: disabled || loading,
       activeOpacity: 0.7,
       style: [
-        styles2.button,
+        styles.button,
         getVariantStyles(),
         sizeStyles.button,
-        disabled && styles2.disabled,
+        disabled && styles.disabled,
         style
       ]
     },
-    loading ? /* @__PURE__ */ React7.createElement(ActivityIndicator, { size: "small", color: getTextColor() }) : typeof children === "string" ? /* @__PURE__ */ React7.createElement(
-      Text2,
+    loading ? /* @__PURE__ */ React4.createElement(ActivityIndicator, { size: "small", color: getTextColor() }) : typeof children === "string" ? /* @__PURE__ */ React4.createElement(
+      Text,
       {
         style: [
-          styles2.text,
+          styles.text,
           { color: getTextColor() },
           sizeStyles.text,
           textStyle
         ]
       },
       children
-    ) : /* @__PURE__ */ React7.createElement(View2, { style: styles2.contentContainer }, children)
+    ) : /* @__PURE__ */ React4.createElement(View, { style: styles.contentContainer }, children)
   );
 };
-var styles2 = StyleSheet2.create({
+var styles = StyleSheet.create({
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -537,162 +566,344 @@ var styles2 = StyleSheet2.create({
   }
 });
 
-// src/components/Modal.tsx
-import React9 from "react";
+// src/components/Input.tsx
+import React5 from "react";
 import {
-  Modal as RNModal,
-  View as View3,
-  Text as Text3,
-  TouchableOpacity as TouchableOpacity2,
-  StyleSheet as StyleSheet3,
-  ScrollView,
-  KeyboardAvoidingView,
-  Platform,
-  Dimensions
+  View as View2,
+  TextInput,
+  Text as Text2,
+  StyleSheet as StyleSheet2
 } from "react-native";
-
-// src/assets/CloseIcon.tsx
-import React8 from "react";
-import Svg4, { Path as Path4 } from "react-native-svg";
-var CloseIcon = ({
-  size = 20,
-  color = "#000"
-}) => {
-  return /* @__PURE__ */ React8.createElement(Svg4, { width: size, height: size, viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React8.createElement(
-    Path4,
-    {
-      d: "M15 5L5 15M5 5L15 15",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-};
-
-// src/components/Modal.tsx
-var { height: SCREEN_HEIGHT } = Dimensions.get("window");
-var Modal = ({
-  isOpen,
-  onClose,
-  children,
-  size = "md",
-  closeOnOverlayClick = true,
-  disableClose = true,
-  style
+var Input = ({
+  label,
+  error,
+  helperText,
+  status = "default",
+  containerStyle,
+  inputStyle,
+  labelStyle,
+  ...props
 }) => {
   const theme = useTheme();
-  const getSizeStyles = () => {
-    switch (size) {
-      case "xs":
-        return { maxHeight: SCREEN_HEIGHT * 0.35 };
-      case "sm":
-        return { maxHeight: SCREEN_HEIGHT * 0.45 };
-      case "md":
-        return { maxHeight: SCREEN_HEIGHT * 0.55 };
-      case "lg":
-        return { maxHeight: SCREEN_HEIGHT * 0.65 };
-      case "xl":
-        return { maxHeight: SCREEN_HEIGHT * 0.75 };
-      case "full":
-        return { maxHeight: SCREEN_HEIGHT * 0.85 };
+  const inputStatus = error ? "error" : status;
+  const getBorderColor = () => {
+    switch (inputStatus) {
+      case "error":
+        return theme.colors.error;
+      case "success":
+        return theme.colors.success;
       default:
-        return { maxHeight: SCREEN_HEIGHT * 0.6 };
+        return theme.colors.border;
     }
   };
-  const handleOverlayPress = () => {
-    if (!disableClose && closeOnOverlayClick) onClose();
-  };
-  return /* @__PURE__ */ React9.createElement(
-    KeyboardAvoidingView,
+  return /* @__PURE__ */ React5.createElement(View2, { style: [styles2.wrapper, containerStyle] }, label && /* @__PURE__ */ React5.createElement(
+    Text2,
     {
-      behavior: Platform.OS === "ios" ? "padding" : "height",
-      style: styles3.keyboardView
+      style: [
+        styles2.label,
+        { color: theme.colors.text, fontSize: theme.fontSize.sm },
+        labelStyle
+      ]
     },
-    /* @__PURE__ */ React9.createElement(
-      RNModal,
-      {
-        visible: isOpen,
-        transparent: true,
-        animationType: "none",
-        statusBarTranslucent: true,
-        onRequestClose: disableClose ? void 0 : onClose
-      },
-      /* @__PURE__ */ React9.createElement(
-        TouchableOpacity2,
-        {
-          activeOpacity: 1,
-          style: [styles3.overlay, { backgroundColor: theme.colors.overlay }],
-          onPress: handleOverlayPress
-        },
-        /* @__PURE__ */ React9.createElement(
-          View3,
-          {
-            style: [
-              styles3.container,
-              {
-                backgroundColor: theme.colors.background,
-                borderTopLeftRadius: theme.borderRadius.xl,
-                borderTopRightRadius: theme.borderRadius.xl,
-                ...theme.shadow.lg,
-                paddingBottom: theme.spacing.xl
-                // 20
-              },
-              getSizeStyles(),
-              style
-            ],
-            onStartShouldSetResponder: () => true
-          },
-          children
-        )
-      )
-    )
-  );
-};
-var ModalHeader = ({
-  children,
-  onClose,
-  showCloseButton = true,
-  style
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ React9.createElement(
-    View3,
+    label
+  ), /* @__PURE__ */ React5.createElement(
+    TextInput,
     {
+      placeholderTextColor: theme.colors.textTertiary,
       style: [
-        styles3.header,
+        styles2.input,
         {
-          borderBottomColor: theme.colors.border,
+          backgroundColor: theme.colors.surface,
+          borderColor: getBorderColor(),
+          color: theme.colors.text,
+          fontSize: theme.fontSize.md,
+          borderRadius: theme.borderRadius.md,
           paddingHorizontal: theme.spacing.lg,
           paddingVertical: theme.spacing.md
         },
-        style
+        inputStyle
+      ],
+      ...props
+    }
+  ), error && /* @__PURE__ */ React5.createElement(
+    Text2,
+    {
+      style: [
+        styles2.error,
+        { color: theme.colors.error, fontSize: theme.fontSize.sm }
       ]
     },
-    /* @__PURE__ */ React9.createElement(View3, { style: styles3.headerContent }, typeof children === "string" ? /* @__PURE__ */ React9.createElement(
-      Text3,
-      {
-        style: [
-          styles3.title,
-          { color: theme.colors.text, fontSize: theme.fontSize.lg }
-        ]
-      },
-      children
-    ) : children),
-    showCloseButton && onClose && /* @__PURE__ */ React9.createElement(
-      TouchableOpacity2,
-      {
-        onPress: onClose,
-        hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
-        style: [
-          styles3.closeButton,
-          { backgroundColor: theme.colors.surface }
-        ]
-      },
-      /* @__PURE__ */ React9.createElement(CloseIcon, { color: theme.colors.text, size: 20 })
-    )
-  );
-};
+    error
+  ), helperText && !error && /* @__PURE__ */ React5.createElement(
+    Text2,
+    {
+      style: [
+        styles2.helper,
+        {
+          color: theme.colors.textSecondary,
+          fontSize: theme.fontSize.sm
+        }
+      ]
+    },
+    helperText
+  ));
+};
+var styles2 = StyleSheet2.create({
+  wrapper: {
+    marginBottom: 16
+    // theme.spacing.lg - consistent form spacing
+  },
+  label: {
+    fontWeight: "500",
+    marginBottom: 8
+    // theme.spacing.sm
+  },
+  input: {
+    borderWidth: 1,
+    minHeight: 48
+  },
+  error: {
+    marginTop: 4
+    // theme.spacing.xs
+  },
+  helper: {
+    marginTop: 4
+    // theme.spacing.xs
+  }
+});
+
+// src/components/Alert.tsx
+import React6 from "react";
+import { StyleSheet as StyleSheet3, Text as Text3, View as View3 } from "react-native";
+var Alert = ({
+  variant = "default",
+  children,
+  style
+}) => {
+  const theme = useTheme();
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "destructive":
+        return {
+          backgroundColor: theme.colors.errorLight,
+          borderColor: theme.colors.error
+        };
+      default:
+        return {
+          backgroundColor: theme.colors.surface,
+          borderColor: theme.colors.border
+        };
+    }
+  };
+  return /* @__PURE__ */ React6.createElement(
+    View3,
+    {
+      style: [
+        styles3.alert,
+        {
+          borderRadius: theme.borderRadius.md,
+          padding: theme.spacing.md
+        },
+        getVariantStyles(),
+        style
+      ]
+    },
+    children
+  );
+};
+var AlertDescription = ({
+  children,
+  style
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ React6.createElement(
+    Text3,
+    {
+      style: [
+        styles3.description,
+        {
+          color: theme.colors.text,
+          fontSize: theme.fontSize.md
+        },
+        style
+      ]
+    },
+    children
+  );
+};
+var styles3 = StyleSheet3.create({
+  alert: {
+    borderWidth: 1,
+    marginVertical: 12
+    // theme.spacing.md - consistent alert spacing
+  },
+  title: {
+    fontWeight: "600",
+    marginBottom: 4
+    // theme.spacing.xs
+  },
+  description: {
+    lineHeight: 18,
+    textAlign: "center"
+  }
+});
+
+// src/components/Modal.tsx
+import React8 from "react";
+import {
+  Dimensions,
+  KeyboardAvoidingView,
+  Platform,
+  Modal as RNModal,
+  ScrollView,
+  StyleSheet as StyleSheet4,
+  Text as Text4,
+  TouchableOpacity as TouchableOpacity2,
+  View as View4
+} from "react-native";
+
+// src/assets/CloseIcon.tsx
+import React7 from "react";
+import Svg2, { Path as Path2 } from "react-native-svg";
+var CloseIcon = ({
+  size = 20,
+  color = "#000"
+}) => {
+  return /* @__PURE__ */ React7.createElement(Svg2, { width: size, height: size, viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React7.createElement(
+    Path2,
+    {
+      d: "M15 5L5 15M5 5L15 15",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+};
+
+// src/components/Modal.tsx
+var { height: SCREEN_HEIGHT } = Dimensions.get("window");
+var Modal = ({
+  isOpen,
+  onClose,
+  children,
+  size = "md",
+  closeOnOverlayClick = true,
+  disableClose = true,
+  style
+}) => {
+  const theme = useTheme();
+  const getSizeStyles = () => {
+    switch (size) {
+      case "xs":
+        return { maxHeight: SCREEN_HEIGHT * 0.35 };
+      case "sm":
+        return { maxHeight: SCREEN_HEIGHT * 0.45 };
+      case "md":
+        return { maxHeight: SCREEN_HEIGHT * 0.55 };
+      case "lg":
+        return { maxHeight: SCREEN_HEIGHT * 0.65 };
+      case "xl":
+        return { maxHeight: SCREEN_HEIGHT * 0.75 };
+      case "full":
+        return { maxHeight: SCREEN_HEIGHT * 0.85 };
+      default:
+        return { maxHeight: SCREEN_HEIGHT * 0.6 };
+    }
+  };
+  const handleOverlayPress = () => {
+    if (!disableClose && closeOnOverlayClick) onClose();
+  };
+  return /* @__PURE__ */ React8.createElement(
+    KeyboardAvoidingView,
+    {
+      behavior: Platform.OS === "ios" ? "padding" : "height",
+      style: styles4.keyboardView
+    },
+    /* @__PURE__ */ React8.createElement(
+      RNModal,
+      {
+        visible: isOpen,
+        transparent: true,
+        animationType: "none",
+        statusBarTranslucent: true,
+        onRequestClose: disableClose ? void 0 : onClose
+      },
+      /* @__PURE__ */ React8.createElement(
+        TouchableOpacity2,
+        {
+          activeOpacity: 1,
+          style: [styles4.overlay, { backgroundColor: theme.colors.overlay }],
+          onPress: handleOverlayPress
+        },
+        /* @__PURE__ */ React8.createElement(
+          View4,
+          {
+            style: [
+              styles4.container,
+              {
+                backgroundColor: theme.colors.background,
+                borderTopLeftRadius: theme.borderRadius.xl,
+                borderTopRightRadius: theme.borderRadius.xl,
+                ...theme.shadow.lg,
+                paddingBottom: theme.spacing.xl
+                // 20
+              },
+              getSizeStyles(),
+              style
+            ],
+            onStartShouldSetResponder: () => true
+          },
+          children
+        )
+      )
+    )
+  );
+};
+var ModalHeader = ({
+  children,
+  onClose,
+  showCloseButton = true,
+  style
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ React8.createElement(
+    View4,
+    {
+      style: [
+        styles4.header,
+        {
+          borderBottomColor: theme.colors.border,
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.md
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React8.createElement(View4, { style: styles4.headerContent }, typeof children === "string" ? /* @__PURE__ */ React8.createElement(
+      Text4,
+      {
+        style: [
+          styles4.title,
+          { color: theme.colors.text, fontSize: theme.fontSize.lg }
+        ]
+      },
+      children
+    ) : children),
+    showCloseButton && onClose && /* @__PURE__ */ React8.createElement(
+      TouchableOpacity2,
+      {
+        onPress: onClose,
+        hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
+        style: [
+          styles4.closeButton,
+          { backgroundColor: theme.colors.surface }
+        ]
+      },
+      /* @__PURE__ */ React8.createElement(CloseIcon, { color: theme.colors.text, size: 20 })
+    )
+  );
+};
 var ModalBody = ({
   children,
   style,
@@ -700,12 +911,12 @@ var ModalBody = ({
 }) => {
   const theme = useTheme();
   if (scrollable) {
-    return /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React8.createElement(
       ScrollView,
       {
-        style: styles3.bodyScroll,
+        style: styles4.bodyScroll,
         contentContainerStyle: [
-          styles3.bodyContent,
+          styles4.bodyContent,
           { padding: theme.spacing.lg },
           style
         ],
@@ -715,18 +926,18 @@ var ModalBody = ({
       children
     );
   }
-  return /* @__PURE__ */ React9.createElement(View3, { style: [styles3.body, { padding: theme.spacing.lg }, style] }, children);
+  return /* @__PURE__ */ React8.createElement(View4, { style: [styles4.body, { padding: theme.spacing.lg }, style] }, children);
 };
 var ModalFooter = ({
   children,
   style
 }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ React9.createElement(
-    View3,
+  return /* @__PURE__ */ React8.createElement(
+    View4,
     {
       style: [
-        styles3.footer,
+        styles4.footer,
         {
           borderTopColor: theme.colors.border,
           paddingHorizontal: theme.spacing.lg,
@@ -738,7 +949,7 @@ var ModalFooter = ({
     children
   );
 };
-var styles3 = StyleSheet3.create({
+var styles4 = StyleSheet4.create({
   keyboardView: {
     flex: 1
   },
@@ -791,745 +1002,770 @@ var styles3 = StyleSheet3.create({
     flex: 1
   },
   footer: {
-    borderTopWidth: 1
+    borderTopWidth: 1,
+    marginBottom: 24
   }
 });
 
-// src/services/api.ts
-import axios from "axios";
-
-// src/config/index.ts
-var BASE_URL = "https://connect-api-dev.kryptos.io/";
-
-// src/services/api.ts
-var api = axios.create({
-  baseURL: BASE_URL,
-  headers: {
-    "Content-Type": "application/json"
-  }
-});
-var SCOPES = "openid profile offline_access email portfolios:read transactions:read integrations:read tax:read accounting:read reports:read workspace:read users:read";
-async function sendEmailOtp(linkToken, email, clientId) {
-  const res = await api.post(
-    "/v1/sendEmailOTP",
-    {
-      email,
-      purpose: "login",
-      clientId
-    },
-    {
-      headers: {
-        "X-LINK-TOKEN": linkToken
-      }
-    }
+// src/components/OTP.tsx
+import React9 from "react";
+import {
+  View as View5,
+  TextInput as TextInput2,
+  Text as Text5,
+  StyleSheet as StyleSheet5
+} from "react-native";
+var OTP = ({
+  length = 6,
+  value = "",
+  onChange,
+  onComplete,
+  error,
+  label,
+  disabled = false,
+  containerStyle,
+  inputStyle,
+  setErrorMessage
+}) => {
+  const theme = useTheme();
+  const AUTO_SUBMIT_DELAY = 500;
+  const [otp, setOtp] = React9.useState(
+    value.split("").concat(Array(length).fill("")).slice(0, length)
   );
-  return res.data;
-}
-async function loginWithOtp(linkToken, email, code, clientId) {
-  const res = await api.post(
-    "/v1/loginUserUsingOTP",
-    {
-      email,
-      code,
-      clientId,
-      purpose: "login"
-    },
-    {
-      headers: {
-        "X-LINK-TOKEN": linkToken
-      }
+  const inputRefs = React9.useRef([]);
+  React9.useEffect(() => {
+    const isComplete = otp.every((digit) => digit !== "");
+    let timer;
+    if (isComplete && onComplete) {
+      timer = setTimeout(() => {
+        onComplete(otp.join(""));
+      }, AUTO_SUBMIT_DELAY);
     }
-  );
-  return res.data;
-}
-async function createAnonymousUser(linkToken, clientId) {
-  const res = await api.post(
-    "/link-token/login",
-    { clientId },
-    {
-      headers: {
-        "X-LINK-TOKEN": linkToken
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [otp, onComplete]);
+  React9.useEffect(() => {
+    setTimeout(() => {
+      inputRefs.current[0]?.focus();
+    }, 100);
+  }, []);
+  const handleChange = React9.useCallback(
+    (index, val) => {
+      if (disabled) return;
+      setErrorMessage("");
+      const numericValue = val.replace(/[^0-9]/g, "");
+      const newValue = numericValue.slice(-1);
+      if (val && !numericValue) {
+        return;
       }
-    }
-  );
-  return res.data;
-}
-async function addUserIntegration(linkToken, integration) {
-  const res = await api.post(
-    "/integrations/keys",
-    { keys: [...integration] },
-    {
-      headers: {
-        "X-LINK-TOKEN": linkToken
+      const newOtp = [...otp];
+      newOtp[index] = newValue;
+      setOtp(newOtp);
+      const otpString = newOtp.join("");
+      onChange?.(otpString);
+      if (newValue && index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
       }
-    }
-  );
-  return res.data?.data;
-}
-async function giveUserConsent(linkToken) {
-  const res = await api.post(
-    "/consent",
-    {
-      granted_scopes: SCOPES
-    },
-    {
-      headers: {
-        "X-LINK-TOKEN": linkToken
+      if (otpString.length === length && !otpString.includes("")) {
+        onComplete?.(otpString);
       }
-    }
-  );
-  return res.data?.data;
-}
-async function testCredentials(linkToken, data) {
-  const res = await api.post("/integrations/credentials/test", data, {
-    headers: {
-      "X-LINK-TOKEN": linkToken
-    }
-  });
-  return res.data?.data;
-}
-async function getSupportedProviders(linkToken) {
-  const res = await api.get("/integrations/providers", {
-    headers: {
-      "X-LINK-TOKEN": linkToken
-    }
-  });
-  return res.data?.data;
-}
-async function getUserIntegrations(linkToken) {
-  const res = await api.get("/integrations", {
-    headers: {
-      "X-LINK-TOKEN": linkToken
-    }
-  });
-  return res.data?.data;
-}
-async function getUserUsedChains(linkToken, address) {
-  const res = await api.get("/integrations/user-used-chain", {
-    headers: {
-      "X-LINK-TOKEN": linkToken
     },
-    params: {
-      id: address
-    }
-  });
-  return res.data?.data?.chains || [];
-}
-
-// src/molecules/ConnectLogo.tsx
-import React11, { isValidElement } from "react";
-import {
-  Image,
-  StyleSheet as StyleSheet4,
-  Text as Text4,
-  View as View4
-} from "react-native";
-
-// src/assets/UnplugIcon.tsx
-import React10 from "react";
-import Svg5, { Path as Path5, Line } from "react-native-svg";
-var UnplugIcon = ({
-  size = 24,
-  color = "#6B7280"
-}) => {
-  return /* @__PURE__ */ React10.createElement(Svg5, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React10.createElement(
-    Path5,
-    {
-      d: "m19 5 3-3",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React10.createElement(
-    Path5,
-    {
-      d: "m2 22 3-3",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React10.createElement(
-    Path5,
-    {
-      d: "M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React10.createElement(
-    Path5,
-    {
-      d: "m18 12-6-6 2.3-2.3a2.4 2.4 0 0 1 3.4 0l2.6 2.6a2.4 2.4 0 0 1 0 3.4Z",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React10.createElement(
-    Line,
-    {
-      x1: 7.5,
-      y1: 13.5,
-      x2: 10.5,
-      y2: 10.5,
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    }
-  ));
-};
-
-// src/molecules/ConnectLogo.tsx
-var KryptosLogo = () => {
-  const theme = useTheme();
-  return /* @__PURE__ */ React11.createElement(
-    View4,
-    {
-      style: [styles4.logoContainer, { backgroundColor: theme.colors.surface }]
-    },
-    /* @__PURE__ */ React11.createElement(LogoIcon, { size: 36 })
+    [otp, length, onChange, onComplete, disabled]
   );
-};
-var ConnectLogo = () => {
-  const { appName, appLogo } = useKryptosConnect();
-  const theme = useTheme();
-  const isValidUrl = (str) => {
-    try {
-      new URL(str);
-      return true;
-    } catch {
-      return false;
-    }
-  };
-  const renderLogo = () => {
-    if (isValidElement(appLogo)) {
-      return appLogo;
-    } else if (typeof appLogo === "string" && isValidUrl(appLogo)) {
-      return /* @__PURE__ */ React11.createElement(
-        Image,
-        {
-          source: { uri: appLogo },
-          style: styles4.appLogoImage,
-          resizeMode: "contain"
-        }
-      );
-    } else if (typeof appLogo === "number" || typeof appLogo === "object" && appLogo !== null) {
-      return /* @__PURE__ */ React11.createElement(
-        Image,
-        {
-          source: appLogo,
-          style: styles4.appLogoImage,
-          resizeMode: "contain"
+  const handleKeyPress = React9.useCallback(
+    (index, e) => {
+      if (disabled) return;
+      if (e.nativeEvent.key === "Backspace") {
+        if (!otp[index] && index > 0) {
+          inputRefs.current[index - 1]?.focus();
+        } else {
+          const newOtp = [...otp];
+          newOtp[index] = "";
+          setOtp(newOtp);
+          onChange?.(newOtp.join(""));
         }
-      );
-    } else if (appName) {
-      return /* @__PURE__ */ React11.createElement(Text4, { style: [styles4.appLogoText, { color: theme.colors.text }] }, appName.charAt(0).toUpperCase());
-    }
-    return /* @__PURE__ */ React11.createElement(Text4, { style: [styles4.appLogoText, { color: theme.colors.text }] }, "?");
+      }
+    },
+    [otp, onChange, disabled]
+  );
+  const getBorderColor = (index) => {
+    if (error) return theme.colors.error;
+    if (otp[index]) return theme.colors.success;
+    return theme.colors.border;
   };
-  return /* @__PURE__ */ React11.createElement(View4, { style: styles4.container }, /* @__PURE__ */ React11.createElement(KryptosLogo, null), /* @__PURE__ */ React11.createElement(View4, { style: styles4.iconContainer }, /* @__PURE__ */ React11.createElement(UnplugIcon, { size: 24, color: theme.colors.textSecondary })), /* @__PURE__ */ React11.createElement(
-    View4,
+  return /* @__PURE__ */ React9.createElement(View5, { style: [styles5.wrapper, containerStyle] }, label && /* @__PURE__ */ React9.createElement(
+    Text5,
     {
       style: [
-        styles4.logoContainer,
-        { backgroundColor: theme.colors.surface }
+        styles5.label,
+        { color: theme.colors.text, fontSize: theme.fontSize.sm }
       ]
     },
-    renderLogo()
-  ));
-};
-var styles4 = StyleSheet4.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    marginVertical: 24,
-    // theme.spacing.xxl
-    gap: 12
-    // theme.spacing.md
-  },
-  logoContainer: {
-    width: 56,
-    height: 56,
-    borderRadius: 12,
-    // theme.borderRadius.md
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden"
-  },
-  iconContainer: {
-    paddingHorizontal: 8
-    // theme.spacing.sm
-  },
-  appLogoImage: {
-    width: 32,
-    height: 32
-  },
-  appLogoText: {
-    fontSize: 24,
-    // theme.fontSize.xxxl
-    fontWeight: "700"
-  }
-});
-
-// src/molecules/Auth.tsx
-var Auth = ({
-  open,
-  onEmailSuccess,
-  onGuestSuccess,
-  onClose
-}) => {
-  const { appName, linkToken, clientId, setUser, setEmail } = useKryptosConnect();
-  const theme = useTheme();
-  const [isLoading, setIsLoading] = React12.useState(false);
-  const [errorMessage, setErrorMessage] = React12.useState("");
-  const [emailValue, setEmailValue] = React12.useState("");
-  const [emailError, setEmailError] = React12.useState("");
-  const [loadingType, setLoadingType] = React12.useState(null);
-  const validateEmail = (email) => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!email) {
-      setEmailError("Email is required");
-      return false;
-    }
-    if (!emailRegex.test(email)) {
-      setEmailError("Invalid email address");
-      return false;
-    }
-    setEmailError("");
-    return true;
-  };
-  const handleClose = () => {
-    onClose();
-    setEmailValue("");
-    setEmailError("");
-    setErrorMessage("");
-  };
-  const handleEmailSubmit = async () => {
-    if (!validateEmail(emailValue)) return;
-    try {
-      setIsLoading(true);
-      setLoadingType("email");
-      setErrorMessage("");
-      await sendEmailOtp(linkToken, emailValue, clientId);
-      setEmail(emailValue);
-      setEmailError("");
-      onEmailSuccess();
-    } catch (error) {
-      const err = error;
-      setErrorMessage(
-        err?.response?.data?.message || "Failed to send email OTP"
-      );
-    } finally {
-      setIsLoading(false);
-      setLoadingType(null);
-    }
-  };
-  const handleContinueAsGuest = async () => {
-    try {
-      setIsLoading(true);
-      setLoadingType("guest");
-      setErrorMessage("");
-      const res = await createAnonymousUser(linkToken, clientId);
-      setUser(res);
-      setEmailError("");
-      onGuestSuccess();
-    } catch (error) {
-      const err = error;
-      console.error(error);
-      setErrorMessage(
-        err?.response?.data?.message || "Failed to continue as guest"
-      );
-    } finally {
-      setIsLoading(false);
-      setLoadingType(null);
-    }
-  };
-  const infoSections = [
-    {
-      icon: /* @__PURE__ */ React12.createElement(LinkIcon, { size: 20, color: theme.colors.primary }),
-      title: "Simple and secure",
-      text: "Connect your Web3 accounts with Kryptos in just a few clicks"
-    },
+    label
+  ), /* @__PURE__ */ React9.createElement(View5, { style: styles5.container }, Array.from({ length }, (_, index) => /* @__PURE__ */ React9.createElement(
+    TextInput2,
     {
-      icon: /* @__PURE__ */ React12.createElement(ShieldIcon, { size: 20, color: theme.colors.primary }),
-      title: "Control what you share",
-      text: "We never share your data without your permission"
+      key: index,
+      ref: (el) => inputRefs.current[index] = el,
+      style: [
+        styles5.input,
+        {
+          backgroundColor: theme.colors.surface,
+          borderColor: getBorderColor(index),
+          color: theme.colors.text,
+          fontSize: theme.fontSize.xxl,
+          borderRadius: theme.borderRadius.md
+        },
+        inputStyle
+      ],
+      keyboardType: "numeric",
+      maxLength: 1,
+      value: otp[index] || "",
+      onChangeText: (val) => handleChange(index, val),
+      onKeyPress: (e) => handleKeyPress(index, e),
+      editable: !disabled,
+      selectTextOnFocus: true,
+      caretHidden: true
     }
-  ];
-  return /* @__PURE__ */ React12.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ React12.createElement(ModalHeader, { onClose: handleClose }, ""), /* @__PURE__ */ React12.createElement(ModalBody, null, /* @__PURE__ */ React12.createElement(View5, { style: styles5.container }, /* @__PURE__ */ React12.createElement(Text5, { style: [styles5.title, { color: theme.colors.text }] }, "Connect ", appName, " to your Kryptos account"), /* @__PURE__ */ React12.createElement(ConnectLogo, null), infoSections.map((section, index) => /* @__PURE__ */ React12.createElement(View5, { key: `info-${index}`, style: styles5.infoSection }, /* @__PURE__ */ React12.createElement(View5, { style: styles5.infoIcon }, section.icon), /* @__PURE__ */ React12.createElement(View5, { style: styles5.infoContent }, /* @__PURE__ */ React12.createElement(Text5, { style: [styles5.infoTitle, { color: theme.colors.text }] }, section.title), /* @__PURE__ */ React12.createElement(
+  ))), error && /* @__PURE__ */ React9.createElement(
     Text5,
     {
       style: [
-        styles5.infoDescription,
-        { color: theme.colors.textSecondary }
+        styles5.error,
+        { color: theme.colors.error, fontSize: theme.fontSize.sm }
       ]
     },
-    section.text
-  )))), errorMessage ? /* @__PURE__ */ React12.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React12.createElement(AlertDescription, null, errorMessage)) : null, /* @__PURE__ */ React12.createElement(Text5, { style: [styles5.footer, { color: theme.colors.textSecondary }] }, "By continuing, you agree to Kryptos", " ", /* @__PURE__ */ React12.createElement(
-    Text5,
-    {
-      style: {
-        color: theme.colors.primary,
-        textDecorationLine: "underline"
-      }
-    },
-    "Privacy Policy"
-  )), /* @__PURE__ */ React12.createElement(
-    Button,
-    {
-      variant: "outline",
-      size: "lg",
-      onPress: handleContinueAsGuest,
-      loading: loadingType === "guest",
-      disabled: isLoading,
-      style: styles5.button
-    },
-    "Continue as guest"
-  ))));
+    error
+  ));
 };
 var styles5 = StyleSheet5.create({
+  wrapper: {
+    marginBottom: 16
+    // theme.spacing.lg
+  },
+  label: {
+    fontWeight: "500",
+    marginBottom: 12,
+    // theme.spacing.md - consistent label spacing
+    textAlign: "center"
+  },
   container: {
-    flex: 1
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8
+    // theme.spacing.sm
   },
-  title: {
-    fontSize: 18,
-    // theme.fontSize.xl
-    fontWeight: "600",
+  input: {
+    width: 48,
+    height: 56,
+    borderWidth: 1,
     textAlign: "center",
-    marginBottom: 16
-    // theme.spacing.lg - consistent section spacing
+    fontWeight: "600"
   },
-  infoSection: {
+  error: {
+    marginTop: 12,
+    // theme.spacing.md - consistent error spacing
+    textAlign: "center"
+  }
+});
+
+// src/components/SkeletonItem.tsx
+import React10, { useEffect, useRef } from "react";
+import { Animated, View as View6, StyleSheet as StyleSheet6 } from "react-native";
+var SkeletonItem = () => {
+  const opacity = useRef(new Animated.Value(0.3)).current;
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 600,
+          useNativeDriver: true
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.3,
+          duration: 600,
+          useNativeDriver: true
+        })
+      ])
+    ).start();
+  }, []);
+  return /* @__PURE__ */ React10.createElement(Animated.View, { style: [styles6.row, { opacity }] }, /* @__PURE__ */ React10.createElement(View6, { style: styles6.iconCircle }), /* @__PURE__ */ React10.createElement(View6, { style: styles6.textBlock }, /* @__PURE__ */ React10.createElement(View6, { style: styles6.lineLong }), /* @__PURE__ */ React10.createElement(View6, { style: styles6.lineShort })));
+};
+var styles6 = StyleSheet6.create({
+  row: {
     flexDirection: "row",
-    marginBottom: 16,
-    // theme.spacing.lg
-    alignItems: "flex-start"
-  },
-  infoIcon: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    // theme.borderRadius.lg
     alignItems: "center",
-    justifyContent: "center",
-    marginRight: 12
-    // theme.spacing.md
+    paddingVertical: 16
   },
-  infoContent: {
-    flex: 1
+  iconCircle: {
+    width: 45,
+    height: 45,
+    borderRadius: 22.5,
+    backgroundColor: "#E5E5E5"
   },
-  infoTitle: {
-    fontSize: 14,
-    // theme.fontSize.md
-    fontWeight: "600",
-    marginBottom: 4
-    // theme.spacing.xs
+  textBlock: {
+    marginLeft: 12,
+    flex: 1
   },
-  infoDescription: {
-    fontSize: 13,
-    lineHeight: 18
+  lineShort: {
+    width: "50%",
+    height: 14,
+    borderRadius: 6,
+    backgroundColor: "#E5E5E5"
   },
-  button: {
+  lineLong: {
+    marginBottom: 6,
     width: "100%",
-    marginTop: 16
-    // theme.spacing.lg - consistent button spacing
+    height: 14,
+    borderRadius: 6,
+    backgroundColor: "#E5E5E5"
+  }
+});
+var SkeletonItem_default = SkeletonItem;
+
+// src/components/Mode.tsx
+import React11 from "react";
+import { View as View7, Text as Text6, StyleSheet as StyleSheet7 } from "react-native";
+var Mode = () => {
+  const { clientInfo } = useKryptosConnect();
+  const theme = useTheme();
+  if (!clientInfo) return null;
+  if (clientInfo?.project_stage === "production") return null;
+  return /* @__PURE__ */ React11.createElement(View7, { style: [styles7.container, { backgroundColor: theme.colors.warning }] }, /* @__PURE__ */ React11.createElement(Text6, { style: [styles7.text, { color: theme.colors.warningText }] }, "Sandbox Mode"));
+};
+var styles7 = StyleSheet7.create({
+  container: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  footer: {
+  text: {
     fontSize: 12,
-    // theme.fontSize.sm
-    textAlign: "center",
-    marginTop: 16
-    // theme.spacing.lg
+    fontWeight: "600"
   }
 });
 
-// src/components/Input.tsx
+// src/components/Footer.tsx
 import React13 from "react";
+import { View as View9, StyleSheet as StyleSheet9 } from "react-native";
+
+// src/components/PoweredByKryptos.tsx
+import React12 from "react";
 import {
-  View as View6,
-  TextInput,
-  Text as Text6,
-  StyleSheet as StyleSheet6
+  Linking,
+  StyleSheet as StyleSheet8,
+  Text as Text7,
+  TouchableOpacity as TouchableOpacity3,
+  View as View8
 } from "react-native";
-var Input = ({
-  label,
-  error,
-  helperText,
-  status = "default",
-  containerStyle,
-  inputStyle,
-  labelStyle,
-  ...props
-}) => {
+var PoweredByKryptos = () => {
   const theme = useTheme();
-  const inputStatus = error ? "error" : status;
-  const getBorderColor = () => {
-    switch (inputStatus) {
-      case "error":
-        return theme.colors.error;
-      case "success":
-        return theme.colors.success;
-      default:
-        return theme.colors.border;
+  const handlePress = () => {
+    Linking.openURL("https://kryptos.io");
+  };
+  return /* @__PURE__ */ React12.createElement(View8, { style: styles8.container }, /* @__PURE__ */ React12.createElement(Text7, { style: [styles8.text, { color: theme.colors.textSecondary }] }, "Powered by", " "), /* @__PURE__ */ React12.createElement(TouchableOpacity3, { onPress: handlePress, activeOpacity: 0.7 }, /* @__PURE__ */ React12.createElement(LogoIcon, { size: 16 })));
+};
+var styles8 = StyleSheet8.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: "400"
+  }
+});
+
+// src/components/Footer.tsx
+var Footer = () => {
+  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",
+    flexDirection: "row"
+  }
+});
+
+// src/molecules/Auth.tsx
+import React19 from "react";
+import { Linking as Linking2, StyleSheet as StyleSheet11, Text as Text9, View as View11 } from "react-native";
+
+// src/assets/LinkIcon.tsx
+import React14 from "react";
+import Svg3, { Path as Path3 } from "react-native-svg";
+var LinkIcon = ({
+  size = 20,
+  color = "#00C693"
+}) => {
+  return /* @__PURE__ */ React14.createElement(Svg3, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React14.createElement(
+    Path3,
+    {
+      d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    Path3,
+    {
+      d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+};
+
+// src/assets/ShieldIcon.tsx
+import React15 from "react";
+import Svg4, { Path as Path4 } from "react-native-svg";
+var ShieldIcon = ({
+  size = 20,
+  color = "#00C693"
+}) => {
+  return /* @__PURE__ */ React15.createElement(Svg4, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React15.createElement(
+    Path4,
+    {
+      d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React15.createElement(
+    Path4,
+    {
+      d: "m9 12 2 2 4-4",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+};
+
+// src/assets/eye.tsx
+import React16 from "react";
+import Svg5, { Path as Path5 } from "react-native-svg";
+var EyeIcon = ({
+  size = 20,
+  color = "#00C693"
+}) => {
+  return /* @__PURE__ */ React16.createElement(Svg5, { fill: color, width: size, height: size, viewBox: "0 0 0.72 0.72" }, /* @__PURE__ */ React16.createElement(Path5, { d: "M0.658 0.348C0.597 0.207 0.483 0.12 0.36 0.12s-0.237 0.087 -0.298 0.228a0.03 0.03 0 0 0 0 0.024C0.123 0.513 0.237 0.6 0.36 0.6s0.237 -0.087 0.298 -0.228a0.03 0.03 0 0 0 0 -0.024M0.36 0.54c-0.095 0 -0.185 -0.069 -0.237 -0.18C0.175 0.249 0.265 0.18 0.36 0.18s0.185 0.069 0.237 0.18c-0.052 0.111 -0.142 0.18 -0.237 0.18m0 -0.3a0.12 0.12 0 1 0 0.12 0.12 0.12 0.12 0 0 0 -0.12 -0.12m0 0.18a0.06 0.06 0 1 1 0.06 -0.06 0.06 0.06 0 0 1 -0.06 0.06" }));
+};
+
+// src/molecules/ConnectLogo.tsx
+import React18, { isValidElement } from "react";
+import {
+  Image,
+  StyleSheet as StyleSheet10,
+  Text as Text8,
+  View as View10
+} from "react-native";
+
+// src/assets/UnplugIcon.tsx
+import React17 from "react";
+import Svg6, { Path as Path6, Line } from "react-native-svg";
+var UnplugIcon = ({
+  size = 24,
+  color = "#6B7280"
+}) => {
+  return /* @__PURE__ */ React17.createElement(Svg6, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React17.createElement(
+    Path6,
+    {
+      d: "m19 5 3-3",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
-  };
-  return /* @__PURE__ */ React13.createElement(View6, { style: [styles6.wrapper, containerStyle] }, label && /* @__PURE__ */ React13.createElement(
-    Text6,
+  ), /* @__PURE__ */ React17.createElement(
+    Path6,
     {
-      style: [
-        styles6.label,
-        { color: theme.colors.text, fontSize: theme.fontSize.sm },
-        labelStyle
-      ]
-    },
-    label
-  ), /* @__PURE__ */ React13.createElement(
-    TextInput,
+      d: "m2 22 3-3",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React17.createElement(
+    Path6,
     {
-      placeholderTextColor: theme.colors.textTertiary,
-      style: [
-        styles6.input,
-        {
-          backgroundColor: theme.colors.surface,
-          borderColor: getBorderColor(),
-          color: theme.colors.text,
-          fontSize: theme.fontSize.md,
-          borderRadius: theme.borderRadius.md,
-          paddingHorizontal: theme.spacing.lg,
-          paddingVertical: theme.spacing.md
-        },
-        inputStyle
-      ],
-      ...props
+      d: "M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
-  ), error && /* @__PURE__ */ React13.createElement(
-    Text6,
+  ), /* @__PURE__ */ React17.createElement(
+    Path6,
     {
-      style: [
-        styles6.error,
-        { color: theme.colors.error, fontSize: theme.fontSize.sm }
-      ]
-    },
-    error
-  ), helperText && !error && /* @__PURE__ */ React13.createElement(
-    Text6,
+      d: "m18 12-6-6 2.3-2.3a2.4 2.4 0 0 1 3.4 0l2.6 2.6a2.4 2.4 0 0 1 0 3.4Z",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React17.createElement(
+    Line,
     {
-      style: [
-        styles6.helper,
+      x1: 7.5,
+      y1: 13.5,
+      x2: 10.5,
+      y2: 10.5,
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round"
+    }
+  ));
+};
+
+// src/molecules/ConnectLogo.tsx
+var KryptosLogo = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ React18.createElement(
+    View10,
+    {
+      style: [styles10.logoContainer, { backgroundColor: theme.colors.surface }]
+    },
+    /* @__PURE__ */ React18.createElement(LogoIcon, { size: 36 })
+  );
+};
+var ConnectLogo = () => {
+  const { appName, appLogo } = useKryptosConnect();
+  const theme = useTheme();
+  const isValidUrl = (str) => {
+    try {
+      new URL(str);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  const renderLogo = () => {
+    if (isValidElement(appLogo)) {
+      return appLogo;
+    } else if (typeof appLogo === "string" && isValidUrl(appLogo)) {
+      return /* @__PURE__ */ React18.createElement(
+        Image,
         {
-          color: theme.colors.textSecondary,
-          fontSize: theme.fontSize.sm
+          source: { uri: appLogo },
+          style: styles10.appLogoImage,
+          resizeMode: "contain"
+        }
+      );
+    } else if (typeof appLogo === "number" || typeof appLogo === "object" && appLogo !== null) {
+      return /* @__PURE__ */ React18.createElement(
+        Image,
+        {
+          source: appLogo,
+          style: styles10.appLogoImage,
+          resizeMode: "contain"
         }
+      );
+    } else if (appName) {
+      return /* @__PURE__ */ React18.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__ */ 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(
+    View10,
+    {
+      style: [
+        styles10.logoContainer,
+        { backgroundColor: theme.colors.surface }
       ]
     },
-    helperText
+    renderLogo()
   ));
 };
-var styles6 = StyleSheet6.create({
-  wrapper: {
-    marginBottom: 16
-    // theme.spacing.lg - consistent form spacing
+var styles10 = StyleSheet10.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12
+    // theme.spacing.md
   },
-  label: {
-    fontWeight: "500",
-    marginBottom: 8
-    // theme.spacing.sm
+  logoContainer: {
+    width: 56,
+    height: 56,
+    borderRadius: 12,
+    // theme.borderRadius.md
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
   },
-  input: {
-    borderWidth: 1,
-    minHeight: 48
+  iconContainer: {
+    paddingHorizontal: 8
+    // theme.spacing.sm
   },
-  error: {
-    marginTop: 4
-    // theme.spacing.xs
+  appLogoImage: {
+    width: 32,
+    height: 32
   },
-  helper: {
-    marginTop: 4
-    // theme.spacing.xs
+  appLogoText: {
+    fontSize: 24,
+    // theme.fontSize.xxxl
+    fontWeight: "700"
   }
 });
 
-// src/components/OTP.tsx
-import React14 from "react";
-import {
-  View as View7,
-  TextInput as TextInput2,
-  Text as Text7,
-  StyleSheet as StyleSheet7
-} from "react-native";
-var OTP = ({
-  length = 6,
-  value = "",
-  onChange,
-  onComplete,
-  error,
-  label,
-  disabled = false,
-  containerStyle,
-  inputStyle,
-  setErrorMessage
+// src/molecules/Auth.tsx
+var Auth = ({
+  open,
+  onEmailSuccess,
+  onGuestSuccess,
+  onClose
 }) => {
+  const { appName, linkToken, clientId, setUser, setEmail } = useKryptosConnect();
   const theme = useTheme();
-  const AUTO_SUBMIT_DELAY = 500;
-  const [otp, setOtp] = React14.useState(
-    value.split("").concat(Array(length).fill("")).slice(0, length)
-  );
-  const inputRefs = React14.useRef([]);
-  React14.useEffect(() => {
-    const isComplete = otp.every((digit) => digit !== "");
-    let timer;
-    if (isComplete && onComplete) {
-      timer = setTimeout(() => {
-        onComplete(otp.join(""));
-      }, AUTO_SUBMIT_DELAY);
+  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 validateEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!email) {
+      setEmailError("Email is required");
+      return false;
+    }
+    if (!emailRegex.test(email)) {
+      setEmailError("Invalid email address");
+      return false;
+    }
+    setEmailError("");
+    return true;
+  };
+  const handleClose = () => {
+    onClose();
+    setEmailValue("");
+    setEmailError("");
+    setErrorMessage("");
+  };
+  const handleEmailSubmit = async () => {
+    if (!validateEmail(emailValue)) return;
+    try {
+      setIsLoading(true);
+      setLoadingType("email");
+      setErrorMessage("");
+      await sendEmailOtp(linkToken, emailValue, clientId);
+      setEmail(emailValue);
+      setEmailError("");
+      onEmailSuccess();
+    } catch (error) {
+      const err = error;
+      setErrorMessage(
+        err?.response?.data?.message || "Failed to send email OTP"
+      );
+    } finally {
+      setIsLoading(false);
+      setLoadingType(null);
+    }
+  };
+  const handleContinueAsGuest = async () => {
+    try {
+      setIsLoading(true);
+      setLoadingType("guest");
+      setErrorMessage("");
+      const res = await createAnonymousUser(linkToken, clientId);
+      setUser(res);
+      setEmailError("");
+      onGuestSuccess();
+    } catch (error) {
+      const err = error;
+      console.error(error);
+      setErrorMessage(
+        err?.response?.data?.message || "Failed to continue as guest"
+      );
+    } finally {
+      setIsLoading(false);
+      setLoadingType(null);
     }
-    return () => {
-      if (timer) clearTimeout(timer);
-    };
-  }, [otp, onComplete]);
-  React14.useEffect(() => {
-    setTimeout(() => {
-      inputRefs.current[0]?.focus();
-    }, 100);
-  }, []);
-  const handleChange = React14.useCallback(
-    (index, val) => {
-      if (disabled) return;
-      setErrorMessage("");
-      const numericValue = val.replace(/[^0-9]/g, "");
-      const newValue = numericValue.slice(-1);
-      if (val && !numericValue) {
-        return;
-      }
-      const newOtp = [...otp];
-      newOtp[index] = newValue;
-      setOtp(newOtp);
-      const otpString = newOtp.join("");
-      onChange?.(otpString);
-      if (newValue && index < length - 1) {
-        inputRefs.current[index + 1]?.focus();
-      }
-      if (otpString.length === length && !otpString.includes("")) {
-        onComplete?.(otpString);
-      }
-    },
-    [otp, length, onChange, onComplete, disabled]
-  );
-  const handleKeyPress = React14.useCallback(
-    (index, e) => {
-      if (disabled) return;
-      if (e.nativeEvent.key === "Backspace") {
-        if (!otp[index] && index > 0) {
-          inputRefs.current[index - 1]?.focus();
-        } else {
-          const newOtp = [...otp];
-          newOtp[index] = "";
-          setOtp(newOtp);
-          onChange?.(newOtp.join(""));
-        }
-      }
-    },
-    [otp, onChange, disabled]
-  );
-  const getBorderColor = (index) => {
-    if (error) return theme.colors.error;
-    if (otp[index]) return theme.colors.success;
-    return theme.colors.border;
   };
-  return /* @__PURE__ */ React14.createElement(View7, { style: [styles7.wrapper, containerStyle] }, label && /* @__PURE__ */ React14.createElement(
-    Text7,
+  const infoSections = [
     {
-      style: [
-        styles7.label,
-        { color: theme.colors.text, fontSize: theme.fontSize.sm }
-      ]
+      icon: /* @__PURE__ */ React19.createElement(LinkIcon, { size: 20, color: theme.colors.primary }),
+      title: "Simple and secure",
+      text: "Link your accounts in just a few clicks"
     },
-    label
-  ), /* @__PURE__ */ React14.createElement(View7, { style: styles7.container }, Array.from({ length }, (_, index) => /* @__PURE__ */ React14.createElement(
-    TextInput2,
     {
-      key: index,
-      ref: (el) => inputRefs.current[index] = el,
-      style: [
-        styles7.input,
-        {
-          backgroundColor: theme.colors.surface,
-          borderColor: getBorderColor(index),
-          color: theme.colors.text,
-          fontSize: theme.fontSize.xxl,
-          borderRadius: theme.borderRadius.md
-        },
-        inputStyle
-      ],
-      keyboardType: "numeric",
-      maxLength: 1,
-      value: otp[index] || "",
-      onChangeText: (val) => handleChange(index, val),
-      onKeyPress: (e) => handleKeyPress(index, e),
-      editable: !disabled,
-      selectTextOnFocus: true,
-      caretHidden: true
+      icon: /* @__PURE__ */ React19.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 }),
+      title: "View Only Access",
+      text: "Kryptos retrieves view-only data and cannot perform any transactions on your behalf."
     }
-  ))), error && /* @__PURE__ */ React14.createElement(
-    Text7,
+  ];
+  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(
+    Text9,
+    {
+      style: [styles11.infoTitle, { color: theme.colors.text }]
+    },
+    section.title
+  ), /* @__PURE__ */ React19.createElement(
+    Text9,
     {
       style: [
-        styles7.error,
-        { color: theme.colors.error, fontSize: theme.fontSize.sm }
+        styles11.infoDescription,
+        { color: theme.colors.textSecondary }
       ]
     },
-    error
-  ));
+    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(
+    Button,
+    {
+      variant: "outline",
+      size: "lg",
+      onPress: handleContinueAsGuest,
+      loading: loadingType === "guest",
+      disabled: isLoading,
+      style: styles11.button
+    },
+    "Continue"
+  ), /* @__PURE__ */ React19.createElement(
+    Text9,
+    {
+      style: [styles11.footerText, { color: theme.colors.textSecondary }]
+    },
+    "By continuing, you agree to Kryptos",
+    " ",
+    /* @__PURE__ */ React19.createElement(
+      Text9,
+      {
+        style: {
+          color: theme.colors.primary,
+          textDecorationLine: "underline"
+        },
+        onPress: () => Linking2.openURL("https://kryptos.io/privacy-policy")
+      },
+      "Privacy Policy"
+    ),
+    " ",
+    "and",
+    " ",
+    /* @__PURE__ */ React19.createElement(
+      Text9,
+      {
+        style: {
+          color: theme.colors.primary,
+          textDecorationLine: "underline"
+        },
+        onPress: () => Linking2.openURL("https://kryptos.io/terms-of-services")
+      },
+      "Terms of Service"
+    )
+  )))), /* @__PURE__ */ React19.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ React19.createElement(Footer, null)));
 };
-var styles7 = StyleSheet7.create({
-  wrapper: {
-    marginBottom: 16
-    // theme.spacing.lg
+var styles11 = StyleSheet11.create({
+  container: {
+    flex: 1,
+    flexDirection: "column",
+    justifyContent: "space-between"
   },
-  label: {
+  header: {
+    flex: 1,
+    gap: 8
+  },
+  footer: {
+    flex: 1,
+    justifyContent: "flex-end",
+    gap: 8
+  },
+  title: {
+    fontSize: 18,
+    // theme.fontSize.xl
     fontWeight: "500",
-    marginBottom: 12,
-    // theme.spacing.md - consistent label spacing
     textAlign: "center"
   },
-  container: {
+  infoSection: {
     flexDirection: "row",
-    justifyContent: "center",
-    gap: 8
-    // theme.spacing.sm
+    alignItems: "flex-start",
+    padding: 8,
+    gap: 12
   },
-  input: {
-    width: 48,
-    height: 56,
-    borderWidth: 1,
-    textAlign: "center",
+  infoIcon: {
+    width: 32,
+    // theme.spacing.xxxl
+    height: 32,
+    // theme.spacing.xxxl
+    borderRadius: 16,
+    // theme.borderRadius.lg
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  infoContent: {
+    flex: 1,
+    gap: 4
+  },
+  infoTitle: {
+    fontSize: 14,
+    // theme.fontSize.md
     fontWeight: "600"
   },
-  error: {
-    marginTop: 12,
-    // theme.spacing.md - consistent error spacing
-    textAlign: "center"
+  infoDescription: {
+    fontSize: 13,
+    // theme.fontSize.sm + 1
+    lineHeight: 18
+  },
+  button: {
+    width: "100%"
+  },
+  footerText: {
+    fontSize: 12,
+    // theme.fontSize.sm
+    textAlign: "center",
+    padding: 8,
+    maxWidth: "80%",
+    alignSelf: "center"
   }
 });
 
 // src/molecules/Init.tsx
-import React15 from "react";
-import { ActivityIndicator as ActivityIndicator2, StyleSheet as StyleSheet8, Text as Text8, View as View8 } from "react-native";
+import React20 from "react";
+import { ActivityIndicator as ActivityIndicator2, StyleSheet as StyleSheet12, Text as Text10, View as View12 } from "react-native";
 var Init = ({
   open,
   onSuccess,
   onClose,
   generateLinkToken
 }) => {
-  const { setIsInitialized, isInitialized, setLinkToken } = useKryptosConnect();
+  const {
+    setIsInitialized,
+    isInitialized,
+    setLinkToken,
+    setIsAuthorized,
+    setUser
+  } = useKryptosConnect();
   const theme = useTheme();
-  const [isFetching, setIsFetching] = React15.useState(false);
-  const [error, setError] = React15.useState(null);
-  const fetchLinkToken = React15.useCallback(async () => {
+  const [isFetching, setIsFetching] = React20.useState(false);
+  const [error, setError] = React20.useState(null);
+  const fetchLinkToken = React20.useCallback(async () => {
     if (!open) return;
     setIsFetching(true);
     setError(null);
@@ -1542,6 +1778,11 @@ var Init = ({
       }
       setLinkToken(linkToken.link_token);
       setIsInitialized(true);
+      setIsAuthorized(linkToken.isAuthorized || false);
+      if (linkToken.isAuthorized) {
+        const userInfo = await getUserInfo(linkToken.link_token);
+        setUser(userInfo);
+      }
       onSuccess(linkToken.isAuthorized ? { isAuthorized: true } : null);
     } catch (err) {
       console.error("Failed to fetch link token:", err);
@@ -1550,29 +1791,29 @@ var Init = ({
     } finally {
       setIsFetching(false);
     }
-  }, [generateLinkToken, open, setIsInitialized, setLinkToken, onSuccess]);
-  React15.useEffect(() => {
+  }, []);
+  React20.useEffect(() => {
     fetchLinkToken();
   }, [fetchLinkToken]);
-  return /* @__PURE__ */ React15.createElement(Modal, { isOpen: open, onClose, size: "xs" }, /* @__PURE__ */ React15.createElement(ModalHeader, { onClose }, "Kryptos Connect"), /* @__PURE__ */ React15.createElement(ModalBody, null, /* @__PURE__ */ React15.createElement(View8, { style: styles8.container }, isFetching && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
+  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,
     {
       size: "large",
       color: theme.colors.primary,
-      style: styles8.spinner
+      style: styles12.spinner
     }
-  ), /* @__PURE__ */ React15.createElement(Text8, { style: [styles8.message, { color: theme.colors.text }] }, isInitialized ? "Fetching link token..." : "Initializing...")), !isFetching && error && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React15.createElement(AlertDescription, null, error)), /* @__PURE__ */ React15.createElement(
+  ), /* @__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(
     Button,
     {
       variant: "primary",
       size: "lg",
       onPress: fetchLinkToken,
-      style: styles8.retryButton
+      style: styles12.retryButton
     },
     "Retry"
-  )))));
+  )))), /* @__PURE__ */ React20.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ React20.createElement(Footer, null)));
 };
-var styles8 = StyleSheet8.create({
+var styles12 = StyleSheet12.create({
   container: {
     flex: 1,
     alignItems: "center",
@@ -1599,25 +1840,25 @@ var styles8 = StyleSheet8.create({
 });
 
 // src/molecules/Integration.tsx
-import React27 from "react";
+import React31 from "react";
 import {
   FlatList,
   Image as Image3,
-  StyleSheet as StyleSheet12,
-  Text as Text11,
-  TouchableOpacity as TouchableOpacity5,
-  View as View12
+  StyleSheet as StyleSheet15,
+  Text as Text13,
+  TouchableOpacity as TouchableOpacity6,
+  View as View15
 } from "react-native";
 
 // src/assets/ArrowLeftIcon.tsx
-import React16 from "react";
-import Svg6, { Path as Path6 } from "react-native-svg";
+import React21 from "react";
+import Svg7, { Path as Path7 } from "react-native-svg";
 var ArrowLeftIcon = ({
   size = 20,
   color = "#000"
 }) => {
-  return /* @__PURE__ */ React16.createElement(Svg6, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React16.createElement(
-    Path6,
+  return /* @__PURE__ */ React21.createElement(Svg7, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React21.createElement(
+    Path7,
     {
       d: "M19 12H5M12 19l-7-7 7-7",
       stroke: color,
@@ -1629,13 +1870,13 @@ var ArrowLeftIcon = ({
 };
 
 // src/assets/CheckCircleIcon.tsx
-import React17 from "react";
-import Svg7, { Path as Path7, Circle } from "react-native-svg";
+import React22 from "react";
+import Svg8, { Path as Path8, Circle } from "react-native-svg";
 var CheckCircleIcon = ({
   size = 20,
   color = "#10B981"
 }) => {
-  return /* @__PURE__ */ React17.createElement(Svg7, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React22.createElement(Svg8, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React22.createElement(
     Circle,
     {
       cx: 12,
@@ -1644,8 +1885,8 @@ var CheckCircleIcon = ({
       stroke: color,
       strokeWidth: 2
     }
-  ), /* @__PURE__ */ React17.createElement(
-    Path7,
+  ), /* @__PURE__ */ React22.createElement(
+    Path8,
     {
       d: "m9 12 2 2 4-4",
       stroke: color,
@@ -1657,18 +1898,18 @@ var CheckCircleIcon = ({
 };
 
 // src/assets/LoaderIcon.tsx
-import React18 from "react";
-import { Animated, Easing } from "react-native";
-import Svg8, { Path as Path8 } from "react-native-svg";
-var AnimatedSvg = Animated.createAnimatedComponent(Svg8);
+import React23 from "react";
+import { Animated as Animated2, Easing } from "react-native";
+import Svg9, { Path as Path9 } from "react-native-svg";
+var AnimatedSvg = Animated2.createAnimatedComponent(Svg9);
 var LoaderIcon = ({
   size = 20,
   color = "#00C693"
 }) => {
-  const rotateAnim = React18.useRef(new Animated.Value(0)).current;
-  React18.useEffect(() => {
-    Animated.loop(
-      Animated.timing(rotateAnim, {
+  const rotateAnim = React23.useRef(new Animated2.Value(0)).current;
+  React23.useEffect(() => {
+    Animated2.loop(
+      Animated2.timing(rotateAnim, {
         toValue: 1,
         duration: 1e3,
         easing: Easing.linear,
@@ -1680,7 +1921,7 @@ var LoaderIcon = ({
     inputRange: [0, 1],
     outputRange: ["0deg", "360deg"]
   });
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React23.createElement(
     AnimatedSvg,
     {
       width: size,
@@ -1689,8 +1930,8 @@ var LoaderIcon = ({
       fill: "none",
       style: { transform: [{ rotate: spin }] }
     },
-    /* @__PURE__ */ React18.createElement(
-      Path8,
+    /* @__PURE__ */ React23.createElement(
+      Path9,
       {
         d: "M21 12a9 9 0 1 1-6.219-8.56",
         stroke: color,
@@ -1703,10 +1944,10 @@ var LoaderIcon = ({
 };
 
 // src/assets/SuccessIcon.tsx
-import React19 from "react";
-import Svg9, { Circle as Circle2, Path as Path9 } from "react-native-svg";
+import React24 from "react";
+import Svg10, { Circle as Circle2, Path as Path10 } from "react-native-svg";
 var SuccessIcon = ({ size = 64 }) => {
-  return /* @__PURE__ */ React19.createElement(Svg9, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React24.createElement(Svg10, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ React24.createElement(
     Circle2,
     {
       cx: 32,
@@ -1715,7 +1956,7 @@ var SuccessIcon = ({ size = 64 }) => {
       fill: "#00C693",
       opacity: 0.1
     }
-  ), /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React24.createElement(
     Circle2,
     {
       cx: 32,
@@ -1723,8 +1964,8 @@ var SuccessIcon = ({ size = 64 }) => {
       r: 24,
       fill: "#00C693"
     }
-  ), /* @__PURE__ */ React19.createElement(
-    Path9,
+  ), /* @__PURE__ */ React24.createElement(
+    Path10,
     {
       d: "M24 32l6 6 12-12",
       stroke: "white",
@@ -1736,10 +1977,10 @@ var SuccessIcon = ({ size = 64 }) => {
 };
 
 // src/assets/ErrorIcon.tsx
-import React20 from "react";
-import Svg10, { Circle as Circle3, Path as Path10 } from "react-native-svg";
+import React25 from "react";
+import Svg11, { Circle as Circle3, Path as Path11 } from "react-native-svg";
 var ErrorIcon = ({ size = 64 }) => {
-  return /* @__PURE__ */ React20.createElement(Svg10, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React25.createElement(Svg11, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ React25.createElement(
     Circle3,
     {
       cx: 32,
@@ -1748,7 +1989,7 @@ var ErrorIcon = ({ size = 64 }) => {
       fill: "#EF4444",
       opacity: 0.1
     }
-  ), /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React25.createElement(
     Circle3,
     {
       cx: 32,
@@ -1756,8 +1997,8 @@ var ErrorIcon = ({ size = 64 }) => {
       r: 24,
       fill: "#EF4444"
     }
-  ), /* @__PURE__ */ React20.createElement(
-    Path10,
+  ), /* @__PURE__ */ React25.createElement(
+    Path11,
     {
       d: "M24 24l16 16M40 24l-16 16",
       stroke: "white",
@@ -1769,18 +2010,18 @@ var ErrorIcon = ({ size = 64 }) => {
 };
 
 // src/assets/SearchIcon.tsx
-import React21 from "react";
-import Svg11, { Circle as Circle4, Path as Path11 } from "react-native-svg";
+import React26 from "react";
+import Svg12, { Circle as Circle4, Path as Path12 } from "react-native-svg";
 
 // src/assets/PlusIcon.tsx
-import React22 from "react";
-import Svg12, { Path as Path12 } from "react-native-svg";
+import React27 from "react";
+import Svg13, { Path as Path13 } from "react-native-svg";
 var PlusIcon = ({
   size = 14,
   color = "#6B7280"
 }) => {
-  return /* @__PURE__ */ React22.createElement(Svg12, { width: size, height: size, viewBox: "0 0 14 14", fill: "none" }, /* @__PURE__ */ React22.createElement(
-    Path12,
+  return /* @__PURE__ */ React27.createElement(Svg13, { width: size, height: size, viewBox: "0 0 14 14", fill: "none" }, /* @__PURE__ */ React27.createElement(
+    Path13,
     {
       d: "M7 3.5v7M3.5 7h7",
       stroke: color,
@@ -1792,13 +2033,13 @@ var PlusIcon = ({
 
 // src/wallet-connect/index.tsx
 import { useAccount, useAppKit } from "@reown/appkit-react-native";
-import React24, { useState } from "react";
+import React29, { useEffect as useEffect2, useMemo, useState } from "react";
 import {
   ScrollView as ScrollView2,
-  StyleSheet as StyleSheet9,
-  Text as Text9,
-  TouchableOpacity as TouchableOpacity3,
-  View as View9
+  StyleSheet as StyleSheet13,
+  Text as Text11,
+  TouchableOpacity as TouchableOpacity4,
+  View as View13
 } from "react-native";
 
 // src/utils/uuid.ts
@@ -1811,7 +2052,7 @@ function generateUUID() {
 }
 
 // src/wallet-connect/wallet-connect.tsx
-import React23 from "react";
+import React28 from "react";
 import { AppKit, AppKitProvider } from "@reown/appkit-react-native";
 
 // src/wallet-connect/AppKitConfig.ts
@@ -1920,7 +2161,7 @@ var createAppKitInstance = (projectId) => {
 // src/wallet-connect/wallet-connect.tsx
 var WalletConnectWrapper = ({ children }) => {
   const { walletConnectProjectId } = useKryptosConnect();
-  const appKit = React23.useMemo(() => {
+  const appKit = React28.useMemo(() => {
     if (!walletConnectProjectId) {
       console.warn(
         "walletConnectProjectId is missing in KryptosConnectProvider config"
@@ -1930,9 +2171,9 @@ var WalletConnectWrapper = ({ children }) => {
     return createAppKitInstance(walletConnectProjectId);
   }, [walletConnectProjectId]);
   if (!appKit) {
-    return /* @__PURE__ */ React23.createElement(React23.Fragment, null, children);
+    return /* @__PURE__ */ React28.createElement(React28.Fragment, null, children);
   }
-  return /* @__PURE__ */ React23.createElement(AppKitProvider, { instance: appKit }, /* @__PURE__ */ React23.createElement(AppKit, null), children);
+  return /* @__PURE__ */ React28.createElement(AppKitProvider, { instance: appKit }, /* @__PURE__ */ React28.createElement(AppKit, null), children);
 };
 var wallet_connect_default = WalletConnectWrapper;
 
@@ -1943,47 +2184,48 @@ var WalletConnectComponent = ({
   onAddHandle,
   handleClose,
   modalOpen,
-  setAddIntegrationMode
+  setAddIntegrationMode,
+  providersList
 }) => {
   const { walletConnectProjectId } = useKryptosConnect();
   const theme = useTheme();
   if (!walletConnectProjectId) {
-    return /* @__PURE__ */ React24.createElement(Modal, { isOpen: modalOpen, onClose: handleClose, size: "full" }, /* @__PURE__ */ React24.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React24.createElement(View9, { style: styles9.headerContent }, /* @__PURE__ */ React24.createElement(
-      TouchableOpacity3,
+    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(
+      TouchableOpacity4,
       {
         onPress: () => {
           setAddIntegrationMode(null);
         },
-        style: styles9.backButton
+        style: styles13.backButton
       },
-      /* @__PURE__ */ React24.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-    ), /* @__PURE__ */ React24.createElement(Text9, { style: [styles9.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React24.createElement(ModalBody, { scrollable: false, style: styles9.contentContainer }, /* @__PURE__ */ React24.createElement(View9, { style: styles9.emptyState }, /* @__PURE__ */ React24.createElement(
-      Text9,
+      /* @__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(
+      Text11,
       {
-        style: [styles9.emptyStateTitle, { color: theme.colors.text }]
+        style: [styles13.emptyStateTitle, { color: theme.colors.text }]
       },
       "WalletConnect is not configured"
-    ), /* @__PURE__ */ React24.createElement(
-      Text9,
+    ), /* @__PURE__ */ React29.createElement(
+      Text11,
       {
         style: [
-          styles9.infoText,
+          styles13.infoText,
           { color: theme.colors.textSecondary, textAlign: "center" }
         ]
       },
       "Please add a walletConnectProjectId to KryptosConnectProvider to enable wallet connections."
-    ), /* @__PURE__ */ React24.createElement(
+    ), /* @__PURE__ */ React29.createElement(
       Button,
       {
         variant: "outline",
         size: "sm",
         onPress: () => setAddIntegrationMode(null),
-        style: styles9.emptyStateButton
+        style: styles13.emptyStateButton
       },
       "Go back"
     ))));
   }
-  return /* @__PURE__ */ React24.createElement(wallet_connect_default, null, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React29.createElement(wallet_connect_default, null, /* @__PURE__ */ React29.createElement(
     ConnectButton,
     {
       integration,
@@ -1991,7 +2233,8 @@ var WalletConnectComponent = ({
       onClose,
       handleClose,
       modalOpen,
-      setAddIntegrationMode
+      setAddIntegrationMode,
+      providersList
     }
   ));
 };
@@ -2000,17 +2243,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 [userUsedChains, setUserUsedChains] = useState([]);
+  const [isFetchingChains, setIsFetchingChains] = useState(false);
+  const availableChains = useMemo(() => {
+    if (userUsedChains.length > 0) {
+      return userUsedChains;
+    }
+    if (integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
+      return integration.walletSupportedChains;
+    }
+    return [];
+  }, [userUsedChains, integration.walletSupportedChains]);
+  useEffect2(() => {
+    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");
@@ -2028,7 +2339,7 @@ function ConnectButton({
       setIsLoading(true);
       setErrorMessage("");
       setChainErrors({});
-      const chainsToProcess = userUsedChains.filter(
+      const chainsToProcess = availableChains.filter(
         (c) => selectedChains.has(c.id)
       );
       const integrationsToAdd = [];
@@ -2036,46 +2347,49 @@ 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 = `${chain.id} (${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?.uid || "0",
-              projectId: integration.projectId,
+              userId: user?.user_id || "0",
+              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?.uid || "",
+            uid: user?.user_id || "",
             walletId,
             clientMetadata: {
               clientId,
@@ -2085,18 +2399,27 @@ function ConnectButton({
               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.chainId || chain.id,
-            address
+            default_chain: provider.id,
+            default_chain_logo: null,
+            type: provider.type,
+            isNftSupported: provider.isEvmWallet || provider.nftSupport || false
           };
           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);
         setChainErrors({});
@@ -2114,138 +2437,180 @@ 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__ */ React24.createElement(Modal, { isOpen: modalOpen, onClose: handleClose, size: "full" }, /* @__PURE__ */ React24.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React24.createElement(View9, { style: styles9.headerContent }, /* @__PURE__ */ React24.createElement(
-    TouchableOpacity3,
+  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(
+    TouchableOpacity4,
     {
       onPress: () => {
         setAddIntegrationMode(null);
       },
-      style: styles9.backButton
+      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(
+    Button,
+    {
+      variant: "primary",
+      size: "sm",
+      onPress: () => open({ view: "Connect" })
+    },
+    "Connect Wallet"
+  )) : /* @__PURE__ */ React29.createElement(View13, { style: styles13.connectedContainer }, /* @__PURE__ */ React29.createElement(View13, { style: styles13.connectedHeader }, /* @__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(Button, { variant: "ghost", size: "sm", onPress: () => disconnect() }, "Disconnect Wallet"), isFetchingChains ? /* @__PURE__ */ React29.createElement(
+    Text11,
+    {
+      style: [styles13.fetchingText, { color: theme.colors.text }]
     },
-    /* @__PURE__ */ React24.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-  ), /* @__PURE__ */ React24.createElement(Text9, { style: [styles9.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React24.createElement(ModalBody, { scrollable: false, style: styles9.contentContainer }, !isConnected ? /* @__PURE__ */ React24.createElement(View9, null, /* @__PURE__ */ React24.createElement(Text9, { style: [styles9.infoText, { color: theme.colors.text }] }, "Connect your wallet to continue"), /* @__PURE__ */ React24.createElement(
-    Button,
+    "Fetching chains..."
+  ) : null), availableChains.length > 0 && address && /* @__PURE__ */ React29.createElement(
+    ScrollView2,
     {
-      variant: "primary",
-      size: "sm",
-      onPress: () => open({ view: "Connect" })
+      style: styles13.scrollView,
+      contentContainerStyle: styles13.scrollViewContent,
+      showsVerticalScrollIndicator: true,
+      nestedScrollEnabled: true
     },
-    "Connect Wallet"
-  )) : /* @__PURE__ */ React24.createElement(View9, null, /* @__PURE__ */ React24.createElement(Text9, { style: [styles9.connectedTitle, { color: theme.colors.text }] }, "Wallet Connected"), /* @__PURE__ */ React24.createElement(Text9, { style: [styles9.connectedText, { color: theme.colors.text }] }, "Address: ", address), /* @__PURE__ */ React24.createElement(Text9, { style: [styles9.connectedText, { color: theme.colors.text }] }, "Chain: ", chainId), /* @__PURE__ */ React24.createElement(Button, { variant: "ghost", size: "sm", onPress: () => disconnect() }, "Disconnect Wallet"), userUsedChains.length > 0 && address && /* @__PURE__ */ React24.createElement(View9, { style: styles9.chainSelection }, /* @__PURE__ */ React24.createElement(Text9, { style: [styles9.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"), /* @__PURE__ */ React24.createElement(ScrollView2, { contentContainerStyle: styles9.scrollViewContent }, /* @__PURE__ */ React24.createElement(View9, { style: styles9.chainChips }, userUsedChains.map((chain) => {
-    const isSelected = selectedChains.has(chain.id);
-    const hasError = chainErrors[chain.id];
-    return /* @__PURE__ */ React24.createElement(
-      TouchableOpacity3,
-      {
-        onPress: () => toggleChainSelection(chain.id),
-        style: styles9.chainButton,
-        key: chain.id
-      },
-      /* @__PURE__ */ React24.createElement(
-        View9,
+    /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"),
+    /* @__PURE__ */ React29.createElement(View13, null, /* @__PURE__ */ React29.createElement(View13, { style: styles13.chainChips }, availableChains.map((chain) => {
+      const isSelected = selectedChains.has(chain.id);
+      const hasError = chainErrors[chain.id];
+      return /* @__PURE__ */ React29.createElement(
+        TouchableOpacity4,
         {
-          style: [
-            styles9.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__ */ React24.createElement(
-          Text9,
+        /* @__PURE__ */ React29.createElement(
+          View13,
           {
             style: [
-              styles9.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__ */ React24.createElement(
-          CloseIcon,
-          {
-            size: 12,
-            color: hasError ? theme.colors.error : theme.colors.primary
-          }
-        ) : /* @__PURE__ */ React24.createElement(
-          PlusIcon,
-          {
-            size: 12,
-            color: theme.colors.textSecondary
-          }
+          /* @__PURE__ */ React29.createElement(
+            Text11,
+            {
+              style: [
+                styles13.chainName,
+                {
+                  color: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.text
+                }
+              ]
+            },
+            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
+            }
+          )
         )
-      )
-    );
-  }))), Object.keys(chainErrors).length > 0 && /* @__PURE__ */ React24.createElement(View9, { style: styles9.chainErrorsContainer }, /* @__PURE__ */ React24.createElement(
-    Text9,
-    {
-      style: [
-        styles9.chainErrorsTitle,
-        { color: theme.colors.error }
-      ]
-    },
-    "Errors:"
-  ), Object.entries(chainErrors).map(([chainId2, error]) => {
-    const chain = userUsedChains.find(
-      (c) => c.id === chainId2
-    );
-    return /* @__PURE__ */ React24.createElement(
-      Text9,
+      );
+    })), errorMessage ? /* @__PURE__ */ React29.createElement(View13, { style: styles13.errorMessageContainer }, /* @__PURE__ */ React29.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React29.createElement(AlertDescription, null, errorMessage))) : null, Object.keys(chainErrors || {}).length > 0 && /* @__PURE__ */ React29.createElement(View13, { style: styles13.chainErrorsContainer }, /* @__PURE__ */ React29.createElement(
+      Text11,
       {
-        key: chainId2,
         style: [
-          styles9.chainErrorItem,
+          styles13.chainErrorsTitle,
           { color: theme.colors.error }
         ]
       },
-      "\u2022 ",
-      chain?.name,
-      ": ",
-      error
-    );
-  }))), errorMessage ? /* @__PURE__ */ React24.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React24.createElement(AlertDescription, null, errorMessage)) : null)), userUsedChains.length > 0 && address && /* @__PURE__ */ React24.createElement(ModalFooter, null, /* @__PURE__ */ React24.createElement(
+      "Errors:"
+    ), Object.entries(chainErrors).map(([chainId, error]) => {
+      const chain = availableChains.find(
+        (c) => c.id === chainId
+      );
+      return /* @__PURE__ */ React29.createElement(
+        Text11,
+        {
+          key: chainId,
+          style: [
+            styles13.chainErrorItem,
+            { color: theme.colors.error }
+          ]
+        },
+        "\u2022 ",
+        chain?.name ?? chainId,
+        ": ",
+        String(error)
+      );
+    })))
+  ))), availableChains.length > 0 && address && /* @__PURE__ */ React29.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React29.createElement(
     Button,
     {
       variant: "outline",
       size: "lg",
       onPress: onSubmitWalletConnect,
       loading: isLoading,
-      disabled: isLoading || !!address && userUsedChains.length > 0 && selectedChains.size === 0,
-      style: styles9.button
+      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)));
 }
-var styles9 = StyleSheet9.create({
-  connectedTitle: { fontSize: 18, fontWeight: "600", marginBottom: 4 },
+var styles13 = StyleSheet13.create({
+  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"
@@ -2264,17 +2629,13 @@ var styles9 = StyleSheet9.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
@@ -2326,9 +2687,7 @@ var styles9 = StyleSheet9.create({
     // theme.spacing.xs
   },
   button: {
-    width: "100%",
-    marginTop: 16
-    // theme.spacing.lg - consistent button spacing
+    width: "100%"
   },
   emptyState: {
     flex: 1,
@@ -2346,45 +2705,54 @@ var styles9 = StyleSheet9.create({
 });
 
 // src/molecules/IntegrationForm.tsx
-import React25 from "react";
+import React30 from "react";
 import {
   Image as Image2,
   ScrollView as ScrollView3,
-  StyleSheet as StyleSheet10,
-  Text as Text10,
-  TouchableOpacity as TouchableOpacity4,
-  View as View10
+  StyleSheet as StyleSheet14,
+  Text as Text12,
+  TouchableOpacity as TouchableOpacity5,
+  View as View14
 } from "react-native";
 var IntegrationForm = ({
   metadata,
   onAddHandle,
   open,
   setAddIntegrationMode,
-  handleClose
+  handleClose,
+  providersList
 }) => {
   const { clientId, linkToken, user } = useKryptosConnect();
   const theme = useTheme();
-  const [isLoading, setIsLoading] = React25.useState(false);
-  const [userUsedChains, setUserUsedChains] = React25.useState([]);
-  const [selectedChains, setSelectedChains] = React25.useState(
+  const [isLoading, setIsLoading] = React30.useState(false);
+  const [isFetchingChains, setIsFetchingChains] = React30.useState(false);
+  const [userUsedChains, setUserUsedChains] = React30.useState([]);
+  const [selectedChains, setSelectedChains] = React30.useState(
     /* @__PURE__ */ new Set()
   );
-  const [chainErrors, setChainErrors] = React25.useState(
+  const [chainErrors, setChainErrors] = React30.useState(
     {}
   );
-  const [errorMessage, setErrorMessage] = React25.useState("");
-  const [formValues, setFormValues] = React25.useState({
+  const [errorMessage, setErrorMessage] = React30.useState("");
+  const [formValues, setFormValues] = React30.useState({
     address: "",
     account_name: "",
     api_key: "",
     secret_key: "",
     password: ""
   });
-  const [formErrors, setFormErrors] = React25.useState({});
-  React25.useEffect(() => {
-    const fetchUserUsedChains = async () => {
-      if (linkToken && formValues.address && formValues.address.trim()) {
+  const [formErrors, setFormErrors] = React30.useState({});
+  React30.useEffect(() => {
+    if (!formValues.address || !formValues.address.trim()) {
+      setUserUsedChains([]);
+      setSelectedChains(/* @__PURE__ */ new Set());
+      setIsFetchingChains(false);
+      return;
+    }
+    const debounceTimer = setTimeout(async () => {
+      if (linkToken && formValues.address && formValues.address.trim() && metadata.isEvmWallet) {
         try {
+          setIsFetchingChains(true);
           const res = await getUserUsedChains(
             linkToken,
             formValues.address.trim()
@@ -2392,18 +2760,22 @@ var IntegrationForm = ({
           if (res && Array.isArray(res)) {
             setUserUsedChains(res);
             setSelectedChains(new Set(res.map((chain) => chain.id)));
+          } else {
+            setUserUsedChains([]);
+            setSelectedChains(/* @__PURE__ */ new Set());
           }
         } catch (error) {
           console.error("Failed to fetch user chains:", error);
           setUserUsedChains([]);
           setSelectedChains(/* @__PURE__ */ new Set());
+        } finally {
+          setIsFetchingChains(false);
         }
-      } else {
-        setUserUsedChains([]);
-        setSelectedChains(/* @__PURE__ */ new Set());
       }
+    }, 500);
+    return () => {
+      clearTimeout(debounceTimer);
     };
-    fetchUserUsedChains();
   }, [linkToken, formValues.address]);
   const toggleChainSelection = (chainId) => {
     const newSelected = new Set(selectedChains);
@@ -2462,7 +2834,7 @@ var IntegrationForm = ({
               accountName: formValues.account_name?.trim() || "0",
               address: formValues.address?.trim() || "0",
               password: formValues.password?.trim() || "0",
-              userId: user?.user?.uid || "0",
+              userId: user?.user_id || "0",
               projectId: metadata?.projectId || "0",
               privateKey: "0",
               alias,
@@ -2490,7 +2862,7 @@ var IntegrationForm = ({
               logo: metadata.logo || null,
               startTime: null,
               endTime: null,
-              uid: user?.user?.uid || "",
+              uid: user?.user_id || "",
               walletId,
               clientMetadata: {
                 clientId,
@@ -2504,7 +2876,7 @@ var IntegrationForm = ({
               default_chain_logo: chain.logo || null,
               type: metadata.type,
               isNftSupported: metadata.isEvmWallet || metadata.nftSupport || false,
-              chainId: chain.chainId || chain.id,
+              chainId: chain?.community_id || "",
               address: formValues.address
             };
             if (formValues.account_name)
@@ -2541,7 +2913,7 @@ var IntegrationForm = ({
             accountName: formValues.account_name?.trim() || "0",
             address: formValues.address?.trim() || "0",
             password: formValues.password?.trim() || "0",
-            userId: user?.user?.uid || "0",
+            userId: user?.user_id || "0",
             projectId: metadata?.projectId || "0",
             privateKey: "0",
             alias,
@@ -2550,7 +2922,7 @@ var IntegrationForm = ({
           }
         };
         const testResult = await testCredentials(linkToken, { ...credential });
-        if (!testResult?.value?.valid) {
+        if (!testResult?.valid) {
           setErrorMessage(
             testResult?.value?.message || "Credentials are invalid"
           );
@@ -2566,7 +2938,7 @@ var IntegrationForm = ({
           logo: metadata.logo || null,
           startTime: null,
           endTime: null,
-          uid: user?.user?.uid || "",
+          uid: user?.user_id || "",
           walletId,
           clientMetadata: {
             clientId,
@@ -2582,7 +2954,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;
@@ -2617,24 +2989,24 @@ 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__ */ React25.createElement(
+  const renderLogo = () => metadata.logo ? /* @__PURE__ */ React30.createElement(
     Image2,
     {
       source: { uri: metadata.logo },
-      style: styles10.logo,
+      style: styles14.logo,
       resizeMode: "contain"
     }
-  ) : /* @__PURE__ */ React25.createElement(
-    View10,
+  ) : /* @__PURE__ */ React30.createElement(
+    View14,
     {
       style: [
-        styles10.logoPlaceholder,
+        styles14.logoPlaceholder,
         { backgroundColor: theme.colors.surface }
       ]
     },
-    /* @__PURE__ */ React25.createElement(Text10, { style: { color: theme.colors.text } }, metadata.name?.charAt(0) || "?")
+    /* @__PURE__ */ React30.createElement(Text12, { style: { color: theme.colors.text } }, metadata.name?.charAt(0) || "?")
   );
-  const renderInput = (key, props) => /* @__PURE__ */ React25.createElement(
+  const renderInput = (key, props) => /* @__PURE__ */ React30.createElement(
     Input,
     {
       placeholder: props.placeholder,
@@ -2646,33 +3018,33 @@ var IntegrationForm = ({
       secureTextEntry: props.secureTextEntry
     }
   );
-  const renderErrorAlert = () => errorMessage ? /* @__PURE__ */ React25.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React25.createElement(AlertDescription, null, errorMessage)) : null;
-  const renderChainSelection = () => userUsedChains.length > 0 && formValues.address && /* @__PURE__ */ React25.createElement(View10, { style: styles10.chainSelection }, /* @__PURE__ */ React25.createElement(Text10, { style: [styles10.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"), /* @__PURE__ */ React25.createElement(ScrollView3, { contentContainerStyle: styles10.scrollViewContent }, /* @__PURE__ */ React25.createElement(View10, { style: styles10.chainChips }, userUsedChains.map((chain) => {
+  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 isSelected = selectedChains.has(chain.id);
     const hasError = chainErrors[chain.id];
-    return /* @__PURE__ */ React25.createElement(
-      TouchableOpacity4,
+    return /* @__PURE__ */ React30.createElement(
+      TouchableOpacity5,
       {
         onPress: () => toggleChainSelection(chain.id),
-        style: styles10.chainButton,
+        style: styles14.chainButton,
         key: chain.id
       },
-      /* @__PURE__ */ React25.createElement(
-        View10,
+      /* @__PURE__ */ React30.createElement(
+        View14,
         {
           style: [
-            styles10.chainChip,
+            styles14.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
             }
           ]
         },
-        /* @__PURE__ */ React25.createElement(
-          Text10,
+        /* @__PURE__ */ React30.createElement(
+          Text12,
           {
             style: [
-              styles10.chainName,
+              styles14.chainName,
               {
                 color: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.text
               }
@@ -2680,28 +3052,28 @@ var IntegrationForm = ({
           },
           chain.name
         ),
-        isSelected ? /* @__PURE__ */ React25.createElement(
+        isSelected ? /* @__PURE__ */ React30.createElement(
           CloseIcon,
           {
             size: 12,
             color: hasError ? theme.colors.error : theme.colors.primary
           }
-        ) : /* @__PURE__ */ React25.createElement(PlusIcon, { size: 12, color: theme.colors.textSecondary })
+        ) : /* @__PURE__ */ React30.createElement(PlusIcon, { size: 12, color: theme.colors.textSecondary })
       )
     );
-  }))), Object.keys(chainErrors).length > 0 && /* @__PURE__ */ React25.createElement(View10, { style: styles10.chainErrorsContainer }, /* @__PURE__ */ React25.createElement(
-    Text10,
+  }))), Object.keys(chainErrors).length > 0 && /* @__PURE__ */ React30.createElement(View14, { style: styles14.chainErrorsContainer }, /* @__PURE__ */ React30.createElement(
+    Text12,
     {
-      style: [styles10.chainErrorsTitle, { color: theme.colors.error }]
+      style: [styles14.chainErrorsTitle, { color: theme.colors.error }]
     },
     "Errors:"
   ), Object.entries(chainErrors).map(([chainId, error]) => {
     const chain = userUsedChains.find((c) => c.id === chainId);
-    return /* @__PURE__ */ React25.createElement(
-      Text10,
+    return /* @__PURE__ */ React30.createElement(
+      Text12,
       {
         key: chainId,
-        style: [styles10.chainErrorItem, { color: theme.colors.error }]
+        style: [styles14.chainErrorItem, { color: theme.colors.error }]
       },
       "\u2022 ",
       chain?.name,
@@ -2709,7 +3081,7 @@ var IntegrationForm = ({
       error
     );
   })));
-  const renderFormBlock = () => /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(View10, { style: styles10.header }, renderLogo(), /* @__PURE__ */ React25.createElement(Text10, { style: [styles10.name, { color: theme.colors.text }] }, metadata.name)), renderErrorAlert(), shouldShowFormFields && /* @__PURE__ */ React25.createElement(React25.Fragment, null, metadata.address && /* @__PURE__ */ React25.createElement(React25.Fragment, null, renderInput("address", {
+  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", {
     placeholder: "Enter address",
     autoCapitalize: "none",
     autoCorrect: false
@@ -2725,27 +3097,27 @@ var IntegrationForm = ({
   }), metadata.password && renderInput("password", {
     placeholder: "Enter Password",
     secureTextEntry: true
-  })), hasNoFields && !metadata?.isWalletConnectSupported && /* @__PURE__ */ React25.createElement(Alert, { variant: "default", style: { marginTop: 12 } }, /* @__PURE__ */ React25.createElement(AlertDescription, null, "This integration is not supported here yet \u2014 try using it through our Kryptos Platform.")));
+  })), 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.")));
   const addIntegrationLabel = formValues.address && userUsedChains.length > 0 && selectedChains.size > 0 ? `Add ${selectedChains.size} Chain${selectedChains.size !== 1 ? "s" : ""}` : "Add Integration";
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, !metadata?.isWalletConnectSupported ? /* @__PURE__ */ React25.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ React25.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React25.createElement(View10, { style: styles10.headerContent }, /* @__PURE__ */ React25.createElement(
-    TouchableOpacity4,
+  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(
+    TouchableOpacity5,
     {
       onPress: () => setAddIntegrationMode(null),
-      style: styles10.backButton
+      style: styles14.backButton
     },
-    /* @__PURE__ */ React25.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-  ), /* @__PURE__ */ React25.createElement(Text10, { style: [styles10.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React25.createElement(ModalBody, { scrollable: false, style: styles10.contentContainer }, renderFormBlock()), !hasNoFields && /* @__PURE__ */ React25.createElement(ModalFooter, null, /* @__PURE__ */ React25.createElement(
+    /* @__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(
     Button,
     {
       variant: "outline",
       size: "lg",
       onPress: handleSubmit,
       loading: isLoading,
-      disabled: isLoading || !!formValues.address && userUsedChains.length > 0 && selectedChains.size === 0,
-      style: styles10.button
+      disabled: isLoading || isFetchingChains || !!formValues.address && userUsedChains.length > 0 && selectedChains.size === 0,
+      style: styles14.button
     },
     addIntegrationLabel
-  ))) : /* @__PURE__ */ React25.createElement(
+  ), /* @__PURE__ */ React30.createElement(Footer, null))) : /* @__PURE__ */ React30.createElement(
     WalletConnectComponent,
     {
       integration: metadata,
@@ -2753,11 +3125,12 @@ var IntegrationForm = ({
       onAddHandle,
       modalOpen: open,
       setAddIntegrationMode,
-      handleClose
+      handleClose,
+      providersList
     }
   ));
 };
-var styles10 = StyleSheet10.create({
+var styles14 = StyleSheet14.create({
   scrollViewContent: {
     flexGrow: 1,
     paddingBottom: 100
@@ -2874,66 +3247,9 @@ var styles10 = StyleSheet10.create({
     // theme.spacing.xs
   },
   button: {
-    width: "100%",
-    marginTop: 16
-    // theme.spacing.lg - consistent button spacing
-  }
-});
-
-// src/components/SkeletonItem.tsx
-import React26, { useEffect, useRef } from "react";
-import { Animated as Animated2, View as View11, StyleSheet as StyleSheet11 } from "react-native";
-var SkeletonItem = () => {
-  const opacity = useRef(new Animated2.Value(0.3)).current;
-  useEffect(() => {
-    Animated2.loop(
-      Animated2.sequence([
-        Animated2.timing(opacity, {
-          toValue: 1,
-          duration: 600,
-          useNativeDriver: true
-        }),
-        Animated2.timing(opacity, {
-          toValue: 0.3,
-          duration: 600,
-          useNativeDriver: true
-        })
-      ])
-    ).start();
-  }, []);
-  return /* @__PURE__ */ React26.createElement(Animated2.View, { style: [styles11.row, { opacity }] }, /* @__PURE__ */ React26.createElement(View11, { style: styles11.iconCircle }), /* @__PURE__ */ React26.createElement(View11, { style: styles11.textBlock }, /* @__PURE__ */ React26.createElement(View11, { style: styles11.lineLong }), /* @__PURE__ */ React26.createElement(View11, { style: styles11.lineShort })));
-};
-var styles11 = StyleSheet11.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 16
-  },
-  iconCircle: {
-    width: 45,
-    height: 45,
-    borderRadius: 22.5,
-    backgroundColor: "#E5E5E5"
-  },
-  textBlock: {
-    marginLeft: 12,
-    flex: 1
-  },
-  lineShort: {
-    width: "50%",
-    height: 14,
-    borderRadius: 6,
-    backgroundColor: "#E5E5E5"
-  },
-  lineLong: {
-    marginBottom: 6,
-    width: "100%",
-    height: 14,
-    borderRadius: 6,
-    backgroundColor: "#E5E5E5"
+    width: "100%"
   }
 });
-var SkeletonItem_default = SkeletonItem;
 
 // src/molecules/Integration.tsx
 var Integration = ({
@@ -2943,13 +3259,14 @@ var Integration = ({
 }) => {
   const { appName, linkToken } = useKryptosConnect();
   const theme = useTheme();
-  const [addIntegrationMode, setAddIntegrationMode] = React27.useState(null);
-  const [query, setQuery] = React27.useState("");
-  const [supportedProviders, setSupportedProviders] = React27.useState([]);
-  const [addedIntegrations, setAddedIntegrations] = React27.useState([]);
-  const [existingIntegrations, setExistingIntegrations] = React27.useState([]);
-  const [isLoading, setIsLoading] = React27.useState(false);
-  const [errorMessage, setErrorMessage] = React27.useState("");
+  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 handleClose = () => {
     onClose();
   };
@@ -2980,13 +3297,13 @@ var Integration = ({
       setIsLoading(false);
     }
   };
-  React27.useEffect(() => {
+  React31.useEffect(() => {
     if (linkToken) {
       fetchSupportedProviders();
       fetchExistingIntegrations();
     }
   }, [linkToken]);
-  const isIntegrationAdded = React27.useCallback(
+  const isIntegrationAdded = React31.useCallback(
     (publicName) => {
       const integrations = [...addedIntegrations, ...existingIntegrations];
       return integrations.some(
@@ -2995,7 +3312,7 @@ var Integration = ({
     },
     [addedIntegrations, existingIntegrations]
   );
-  const getIntegrationCount = React27.useCallback(
+  const getIntegrationCount = React31.useCallback(
     (publicName) => {
       const integrations = [...addedIntegrations, ...existingIntegrations];
       return integrations.filter(
@@ -3004,22 +3321,24 @@ var Integration = ({
     },
     [addedIntegrations, existingIntegrations]
   );
-  const filteredResults = React27.useMemo(() => {
-    if (query) {
-      const lowerQuery = query.toLowerCase();
-      return supportedProviders.filter(
-        (provider) => provider.name?.toLowerCase().includes(lowerQuery) || provider.public_name?.toLowerCase().includes(lowerQuery) || provider.id?.toLowerCase().includes(lowerQuery)
-      );
+  const filteredResults = React31.useMemo(() => {
+    let filtered = supportedProviders;
+    if (activeTab !== "all") {
+      filtered = filtered.filter((provider) => provider.type === activeTab);
+    }
+    if (query?.trim()) {
+      const lowerQuery = query.trim().toLowerCase();
+      filtered = filtered.filter((provider) => {
+        return provider.name?.toLowerCase().includes(lowerQuery) || provider.public_name?.toLowerCase().includes(lowerQuery) || provider.id?.toLowerCase().includes(lowerQuery);
+      });
     }
-    return [...supportedProviders].sort((a, b) => {
+    return [...filtered].sort((a, b) => {
       const countA = getIntegrationCount(a.public_name);
       const countB = getIntegrationCount(b.public_name);
-      if (countB !== countA) {
-        return countB - countA;
-      }
-      return a.name.localeCompare(b.name);
+      if (countB !== countA) return countB - countA;
+      return (a.name ?? "").localeCompare(b.name ?? "");
     });
-  }, [query, supportedProviders, getIntegrationCount]);
+  }, [query, supportedProviders, getIntegrationCount, activeTab]);
   const handleAddIntegration = async () => {
     try {
       setIsLoading(true);
@@ -3042,11 +3361,11 @@ var Integration = ({
       setIsLoading(false);
     }
   };
-  const renderProviderItem = ({ item }) => /* @__PURE__ */ React27.createElement(
-    TouchableOpacity5,
+  const renderProviderItem = ({ item }) => /* @__PURE__ */ React31.createElement(
+    TouchableOpacity6,
     {
       style: [
-        styles12.providerItem,
+        styles15.providerItem,
         {
           backgroundColor: theme.colors.surface,
           borderColor: theme.colors.border
@@ -3055,43 +3374,43 @@ var Integration = ({
       onPress: () => setAddIntegrationMode(item),
       activeOpacity: 0.7
     },
-    /* @__PURE__ */ React27.createElement(View12, { style: styles12.providerInfo }, item?.logo ? /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React31.createElement(View15, { style: styles15.providerInfo }, item?.logo ? /* @__PURE__ */ React31.createElement(
       Image3,
       {
         source: { uri: item?.logo },
-        style: styles12.providerLogo,
+        style: styles15.providerLogo,
         resizeMode: "contain"
       }
-    ) : /* @__PURE__ */ React27.createElement(
-      View12,
+    ) : /* @__PURE__ */ React31.createElement(
+      View15,
       {
         style: [
-          styles12.providerLogoPlaceholder,
+          styles15.providerLogoPlaceholder,
           { backgroundColor: theme.colors.surfaceSecondary }
         ]
       },
-      /* @__PURE__ */ React27.createElement(Text11, { style: { color: theme.colors.text } }, item?.name?.charAt(0) || "?")
-    ), /* @__PURE__ */ React27.createElement(Text11, { style: [styles12.providerName, { color: theme.colors.text }] }, item?.name + "\u200B")),
-    isIntegrationAdded(item?.public_name) && /* @__PURE__ */ React27.createElement(View12, { style: styles12.providerStatus }, /* @__PURE__ */ React27.createElement(CheckCircleIcon, { size: 18, color: theme.colors.success }), /* @__PURE__ */ React27.createElement(
-      Text11,
+      /* @__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(
+      Text13,
       {
         style: [
-          styles12.providerCount,
+          styles15.providerCount,
           { color: theme.colors.textSecondary }
         ]
       },
       getIntegrationCount(item?.public_name)
     ))
   );
-  const renderSkeletonItem = () => /* @__PURE__ */ React27.createElement(SkeletonItem_default, null);
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, !addIntegrationMode ? /* @__PURE__ */ React27.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ React27.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React27.createElement(View12, { style: styles12.headerContent }, addIntegrationMode && /* @__PURE__ */ React27.createElement(
-    TouchableOpacity5,
+  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(
+    TouchableOpacity6,
     {
       onPress: () => setAddIntegrationMode(null),
-      style: styles12.backButton
+      style: styles15.backButton
     },
-    /* @__PURE__ */ React27.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-  ), /* @__PURE__ */ React27.createElement(Text11, { style: [styles12.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ React27.createElement(ModalBody, { scrollable: false, style: styles12.noPadding }, /* @__PURE__ */ React27.createElement(View12, { style: styles12.container }, /* @__PURE__ */ React27.createElement(View12, { style: styles12.headerSection }, /* @__PURE__ */ React27.createElement(ConnectLogo, null), /* @__PURE__ */ React27.createElement(Text11, { style: [styles12.title, { color: theme.colors.text }] }, "Connect ", appName, " to your Kryptos account")), /* @__PURE__ */ React27.createElement(
+    /* @__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(
     FlatList,
     {
       data: isLoading ? Array.from({ length: 8 }, (_, i) => ({
@@ -3102,14 +3421,14 @@ var Integration = ({
       })) : filteredResults,
       keyExtractor: (item, index) => isLoading ? item.id : `provider-${item.id}-${index}`,
       renderItem: isLoading ? renderSkeletonItem : renderProviderItem,
-      style: styles12.list,
+      style: styles15.list,
       contentContainerStyle: [
-        styles12.listContent,
+        styles15.listContent,
         { paddingHorizontal: theme.spacing.xl }
       ],
       showsVerticalScrollIndicator: false,
-      ListHeaderComponent: /* @__PURE__ */ React27.createElement(
-        View12,
+      ListHeaderComponent: /* @__PURE__ */ React31.createElement(
+        View15,
         {
           style: {
             paddingVertical: theme.spacing.sm + 2,
@@ -3117,29 +3436,63 @@ var Integration = ({
             zIndex: 10
           }
         },
-        /* @__PURE__ */ React27.createElement(
+        /* @__PURE__ */ React31.createElement(
           Input,
           {
             value: query,
             onChangeText: setQuery,
             placeholder: "Search Integrations...",
-            containerStyle: styles12.searchInput
+            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__ */ React27.createElement(View12, { style: styles12.emptyContainer }, !isLoading && /* @__PURE__ */ React27.createElement(
-        Text11,
+      ListEmptyComponent: /* @__PURE__ */ React31.createElement(View15, { style: styles15.emptyContainer }, !isLoading && /* @__PURE__ */ React31.createElement(
+        Text13,
         {
           style: [
-            styles12.emptyText,
+            styles15.emptyText,
             { color: theme.colors.textSecondary }
           ]
         },
         query ? "No search results found" : "No supported integrations found"
       ))
     }
-  ), errorMessage && /* @__PURE__ */ React27.createElement(View12, { style: styles12.errorContainer }, /* @__PURE__ */ React27.createElement(Alert, { variant: "destructive", style: styles12.errorAlert }, /* @__PURE__ */ React27.createElement(AlertDescription, null, errorMessage))))), /* @__PURE__ */ React27.createElement(ModalFooter, null, /* @__PURE__ */ React27.createElement(
+  ), 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(
     Button,
     {
       variant: "outline",
@@ -3147,10 +3500,10 @@ var Integration = ({
       onPress: handleAddIntegration,
       loading: isLoading,
       disabled: isLoading,
-      style: styles12.continueButton
+      style: styles15.continueButton
     },
     "Continue"
-  ))) : /* @__PURE__ */ React27.createElement(
+  ), /* @__PURE__ */ React31.createElement(Footer, null))) : /* @__PURE__ */ React31.createElement(
     IntegrationForm,
     {
       metadata: addIntegrationMode,
@@ -3160,11 +3513,12 @@ var Integration = ({
       },
       open: !!addIntegrationMode,
       setAddIntegrationMode,
-      handleClose
+      handleClose,
+      providersList: supportedProviders
     }
   ));
 };
-var styles12 = StyleSheet12.create({
+var styles15 = StyleSheet15.create({
   headerContent: {
     flexDirection: "row",
     alignItems: "center"
@@ -3279,25 +3633,47 @@ var styles12 = StyleSheet12.create({
   errorAlert: {
     marginTop: 16
     // theme.spacing.lg - consistent alert spacing
+  },
+  tabsContainer: {
+    flexDirection: "row",
+    gap: 4,
+    // theme.spacing.sm
+    flexWrap: "wrap"
+  },
+  tab: {
+    paddingVertical: 8,
+    // theme.spacing.sm
+    paddingHorizontal: 16,
+    // theme.spacing.lg
+    borderRadius: 20,
+    // theme.borderRadius.full / 2
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tabText: {
+    fontSize: 13,
+    // theme.fontSize.sm
+    fontWeight: "600"
   }
 });
 
 // src/molecules/OTPVerify.tsx
-import React28 from "react";
-import { StyleSheet as StyleSheet13, Text as Text12, TouchableOpacity as TouchableOpacity6, View as View13 } from "react-native";
+import React32 from "react";
+import { StyleSheet as StyleSheet16, Text as Text14, TouchableOpacity as TouchableOpacity7, View as View16 } from "react-native";
 var OTPVerify = ({
   open,
   onSuccess,
   onClose
 }) => {
   const theme = useTheme();
-  const [otp, setOtp] = React28.useState("");
+  const [otp, setOtp] = React32.useState("");
   const { linkToken, clientId, email, setUser } = useKryptosConnect();
-  const [isLoading, setIsLoading] = React28.useState(false);
-  const [isResending, setIsResending] = React28.useState(false);
-  const [resendCooldown, setResendCooldown] = React28.useState(0);
-  const [errorMessage, setErrorMessage] = React28.useState("");
-  const [successMessage, setSuccessMessage] = React28.useState("");
+  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 handleSubmit = async () => {
     if (otp.length !== 6) return;
     setIsLoading(true);
@@ -3348,7 +3724,7 @@ var OTPVerify = ({
     setSuccessMessage("");
     setOtp("");
   };
-  React28.useEffect(() => {
+  React32.useEffect(() => {
     if (resendCooldown > 0) {
       const timer = setTimeout(() => {
         setResendCooldown(resendCooldown - 1);
@@ -3357,13 +3733,20 @@ var OTPVerify = ({
     }
     return void 0;
   }, [resendCooldown]);
-  return /* @__PURE__ */ React28.createElement(Modal, { isOpen: open, onClose: handleClose, size: "lg" }, /* @__PURE__ */ React28.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ React28.createElement(View13, { style: styles13.headerContent }, /* @__PURE__ */ React28.createElement(Text12, { style: [styles13.headerTitle, { color: theme.colors.text }] }, "OTP Verification"))), /* @__PURE__ */ React28.createElement(ModalBody, null, /* @__PURE__ */ React28.createElement(View13, { style: styles13.container }, /* @__PURE__ */ React28.createElement(ConnectLogo, null), /* @__PURE__ */ React28.createElement(View13, { style: styles13.emailInfo }, /* @__PURE__ */ React28.createElement(
-    Text12,
+  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(
+    Text14,
     {
-      style: [styles13.infoText, { color: theme.colors.textSecondary }]
+      style: [styles16.infoText, { color: theme.colors.textSecondary }]
     },
     "We have sent a verification code to"
-  ), /* @__PURE__ */ React28.createElement(Text12, { style: [styles13.emailText, { color: theme.colors.text }] }, email)), /* @__PURE__ */ React28.createElement(OTP, { onComplete: handleOtpComplete, length: 6, setErrorMessage }), errorMessage ? /* @__PURE__ */ React28.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React28.createElement(AlertDescription, null, errorMessage)) : null, successMessage ? /* @__PURE__ */ React28.createElement(Alert, { variant: "default" }, /* @__PURE__ */ React28.createElement(AlertDescription, null, successMessage)) : null, /* @__PURE__ */ React28.createElement(
+  ), /* @__PURE__ */ React32.createElement(Text14, { style: [styles16.emailText, { color: theme.colors.text }] }, email)), /* @__PURE__ */ React32.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(
     Button,
     {
       variant: "outline",
@@ -3371,44 +3754,44 @@ var OTPVerify = ({
       onPress: handleSubmit,
       loading: isLoading,
       disabled: otp.length !== 6 || isLoading,
-      style: styles13.button
+      style: styles16.button
     },
     "Continue"
-  ), /* @__PURE__ */ React28.createElement(
-    TouchableOpacity6,
+  ), /* @__PURE__ */ React32.createElement(
+    TouchableOpacity7,
     {
       onPress: handleResendOtp,
       disabled: resendCooldown > 0 || isResending,
-      style: styles13.resendContainer
+      style: styles16.resendContainer
     },
-    isResending ? /* @__PURE__ */ React28.createElement(View13, { style: styles13.resendLoading }, /* @__PURE__ */ React28.createElement(LoaderIcon, { size: 16, color: theme.colors.primary }), /* @__PURE__ */ React28.createElement(
-      Text12,
+    isResending ? /* @__PURE__ */ React32.createElement(View16, { style: styles16.resendLoading }, /* @__PURE__ */ React32.createElement(LoaderIcon, { size: 16, color: theme.colors.primary }), /* @__PURE__ */ React32.createElement(
+      Text14,
       {
-        style: [styles13.resendText, { color: theme.colors.primary }]
+        style: [styles16.resendText, { color: theme.colors.primary }]
       },
       " ",
       "Sending..."
-    )) : resendCooldown > 0 ? /* @__PURE__ */ React28.createElement(
-      Text12,
+    )) : resendCooldown > 0 ? /* @__PURE__ */ React32.createElement(
+      Text14,
       {
         style: [
-          styles13.resendText,
+          styles16.resendText,
           { color: theme.colors.textSecondary }
         ]
       },
       "Resend OTP in ",
       resendCooldown,
       "s"
-    ) : /* @__PURE__ */ React28.createElement(
-      Text12,
+    ) : /* @__PURE__ */ React32.createElement(
+      Text14,
       {
-        style: [styles13.resendText, { color: theme.colors.primary }]
+        style: [styles16.resendText, { color: theme.colors.primary }]
       },
       "Resend OTP"
     )
-  ))));
+  ))), /* @__PURE__ */ React32.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ React32.createElement(Footer, null)));
 };
-var styles13 = StyleSheet13.create({
+var styles16 = StyleSheet16.create({
   headerContent: {
     flexDirection: "row",
     alignItems: "center"
@@ -3467,8 +3850,8 @@ var styles13 = StyleSheet13.create({
 });
 
 // src/molecules/Permissions.tsx
-import React29 from "react";
-import { View as View14, Text as Text13, StyleSheet as StyleSheet14 } from "react-native";
+import React33 from "react";
+import { StyleSheet as StyleSheet17, Text as Text15, View as View17 } from "react-native";
 var Permissions = ({
   open,
   onClose,
@@ -3476,8 +3859,8 @@ var Permissions = ({
 }) => {
   const { appName, linkToken, setUserConsent } = useKryptosConnect();
   const theme = useTheme();
-  const [isLoading, setIsLoading] = React29.useState(false);
-  const [errorMessage, setErrorMessage] = React29.useState("");
+  const [isLoading, setIsLoading] = React33.useState(false);
+  const [errorMessage, setErrorMessage] = React33.useState("");
   const handleConsentClick = async () => {
     try {
       setIsLoading(true);
@@ -3500,42 +3883,42 @@ var Permissions = ({
     "Access your transaction history and trading activity",
     "Keep this data updated and accessible when you're offline"
   ];
-  return /* @__PURE__ */ React29.createElement(Modal, { isOpen: open, onClose, size: "xl" }, /* @__PURE__ */ React29.createElement(ModalHeader, { onClose }, "Permissions"), /* @__PURE__ */ React29.createElement(ModalBody, null, /* @__PURE__ */ React29.createElement(View14, { style: styles14.container }, /* @__PURE__ */ React29.createElement(ConnectLogo, null), errorMessage ? /* @__PURE__ */ React29.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React29.createElement(AlertDescription, null, errorMessage)) : null, /* @__PURE__ */ React29.createElement(View14, { style: styles14.permissionsList }, /* @__PURE__ */ React29.createElement(
-    Text13,
+  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(
+    Text15,
     {
-      style: [styles14.subtitle, { color: theme.colors.textSecondary }]
+      style: [styles17.subtitle, { color: theme.colors.textSecondary }]
     },
     "Allow ",
     appName,
     " to:"
-  ), permissionItems.map((item, index) => /* @__PURE__ */ React29.createElement(View14, { key: `permission-${index}`, style: styles14.permissionItem }, /* @__PURE__ */ React29.createElement(Text13, { style: [styles14.bullet, { color: theme.colors.primary }] }, index + 1, "."), /* @__PURE__ */ React29.createElement(
-    Text13,
+  ), 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(
+    Text15,
     {
-      style: [styles14.permissionText, { color: theme.colors.text }]
+      style: [styles17.permissionText, { color: theme.colors.text }]
     },
     item
-  )))), /* @__PURE__ */ React29.createElement(
-    View14,
+  )))), /* @__PURE__ */ React33.createElement(
+    View17,
     {
       style: [
-        styles14.infoBox,
+        styles17.infoBox,
         {
           backgroundColor: theme.colors.surface,
           borderColor: theme.colors.border
         }
       ]
     },
-    /* @__PURE__ */ React29.createElement(
-      Text13,
+    /* @__PURE__ */ React33.createElement(
+      Text15,
       {
-        style: [styles14.infoText, { color: theme.colors.textSecondary }]
+        style: [styles17.infoText, { color: theme.colors.textSecondary }]
       },
       "By selecting",
       " ",
-      /* @__PURE__ */ React29.createElement(Text13, { style: { fontWeight: "600", color: theme.colors.text } }, "'Allow'"),
+      /* @__PURE__ */ React33.createElement(Text15, { style: { fontWeight: "600", color: theme.colors.text } }, "'Allow'"),
       ", you agree to share this information and keep it updated."
     )
-  ))), /* @__PURE__ */ React29.createElement(ModalFooter, null, /* @__PURE__ */ React29.createElement(
+  ))), /* @__PURE__ */ React33.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React33.createElement(
     Button,
     {
       variant: "outline",
@@ -3543,12 +3926,12 @@ var Permissions = ({
       onPress: handleConsentClick,
       loading: isLoading,
       disabled: isLoading,
-      style: styles14.button
+      style: styles17.button
     },
     "Allow"
-  )));
+  ), /* @__PURE__ */ React33.createElement(Footer, null)));
 };
-var styles14 = StyleSheet14.create({
+var styles17 = StyleSheet17.create({
   container: {
     flex: 1
   },
@@ -3606,8 +3989,8 @@ var styles14 = StyleSheet14.create({
 });
 
 // src/molecules/StatusModal.tsx
-import React30 from "react";
-import { View as View15, Text as Text14, StyleSheet as StyleSheet15 } from "react-native";
+import React34 from "react";
+import { StyleSheet as StyleSheet18, Text as Text16, View as View18 } from "react-native";
 var StatusModal = ({
   open,
   onClose,
@@ -3624,18 +4007,18 @@ var StatusModal = ({
     }
     onClose();
   };
-  return /* @__PURE__ */ React30.createElement(Modal, { isOpen: open, onClose: handleClose, size: "xs" }, /* @__PURE__ */ React30.createElement(ModalBody, null, /* @__PURE__ */ React30.createElement(View15, { style: styles15.container }, /* @__PURE__ */ React30.createElement(View15, { style: styles15.iconContainer }, status === "success" ? /* @__PURE__ */ React30.createElement(SuccessIcon, { size: 80 }) : /* @__PURE__ */ React30.createElement(ErrorIcon, { size: 80 })), /* @__PURE__ */ React30.createElement(Text14, { style: [styles15.message, { color: theme.colors.text }] }, status === "success" ? "Connection successful" : "Connection failed"), /* @__PURE__ */ React30.createElement(
+  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(
     Button,
     {
       variant: "outline",
       size: "lg",
       onPress: status === "success" ? onSuccess : onError,
-      style: styles15.button
+      style: styles18.button
     },
     status === "success" ? "Continue" : "Try again later"
-  ))));
+  ), /* @__PURE__ */ React34.createElement(Footer, null)));
 };
-var styles15 = StyleSheet15.create({
+var styles18 = StyleSheet18.create({
   container: {
     flex: 1,
     alignItems: "center",
@@ -3659,6 +4042,64 @@ var styles15 = StyleSheet15.create({
   }
 });
 
+// src/molecules/EndModal.tsx
+import React35, { useEffect as useEffect3 } from "react";
+import { StyleSheet as StyleSheet19, Text as Text17, View as View19 } from "react-native";
+var EndModal = ({ open, onClose }) => {
+  const theme = useTheme();
+  useEffect3(() => {
+    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(
+    View19,
+    {
+      style: [
+        styles19.iconContainer,
+        { 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(
+    Button,
+    {
+      variant: "primary",
+      size: "lg",
+      onPress: onClose,
+      style: styles19.button
+    },
+    "Continue to App"
+  ), /* @__PURE__ */ React35.createElement(Footer, null)));
+};
+var styles19 = StyleSheet19.create({
+  container: {
+    alignItems: "center",
+    paddingVertical: 20
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 20
+  },
+  message: {
+    fontSize: 14,
+    textAlign: "center",
+    lineHeight: 20,
+    marginBottom: 24,
+    paddingHorizontal: 20
+  },
+  button: {
+    width: "100%"
+  }
+});
+
 // src/KryptosConnectButton.tsx
 var KryptosConnectButton = ({
   children,
@@ -3669,14 +4110,14 @@ var KryptosConnectButton = ({
   textStyle
 }) => {
   const { theme: themeName } = useKryptosConnect();
-  const [open, setOpen] = React31.useState(false);
+  const [open, setOpen] = React36.useState(false);
   const theme = useTheme();
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, children ? /* @__PURE__ */ React31.createElement(TouchableOpacity7, { onPress: () => setOpen(true), style }, children) : /* @__PURE__ */ React31.createElement(
-    TouchableOpacity7,
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, children ? /* @__PURE__ */ React36.createElement(TouchableOpacity8, { onPress: () => setOpen(true), style }, children) : /* @__PURE__ */ React36.createElement(
+    TouchableOpacity8,
     {
       onPress: () => setOpen(true),
       style: [
-        styles16.defaultButton,
+        styles20.defaultButton,
         themeName === "light" ? {
           backgroundColor: theme.colors.white,
           borderRadius: theme.borderRadius.md,
@@ -3690,11 +4131,11 @@ var KryptosConnectButton = ({
       ],
       activeOpacity: 0.8
     },
-    /* @__PURE__ */ React31.createElement(
-      Text15,
+    /* @__PURE__ */ React36.createElement(
+      Text18,
       {
         style: [
-          styles16.buttonText,
+          styles20.buttonText,
           {
             color: themeName === "light" ? theme.colors.primary : theme.colors.white,
             fontSize: theme.fontSize.lg
@@ -3705,8 +4146,8 @@ var KryptosConnectButton = ({
       "Connect with",
       " "
     ),
-    /* @__PURE__ */ React31.createElement(LogoIcon, { size: 24 })
-  ), /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React36.createElement(LogoIcon, { size: 24 })
+  ), /* @__PURE__ */ React36.createElement(
     KryptosConnectModal,
     {
       open,
@@ -3730,9 +4171,11 @@ var KryptosConnectModal = ({
     setUserConsent,
     setUser,
     setEmail,
-    setLinkToken
+    setLinkToken,
+    isAuthorized,
+    linkToken
   } = useKryptosConnect();
-  const [step, setStep] = React31.useState("INIT" /* INIT */);
+  const [step, setStep] = React36.useState("INIT" /* INIT */);
   const handleClose = () => {
     setOpen(false);
     setIsInitialized(false);
@@ -3750,12 +4193,25 @@ var KryptosConnectModal = ({
     onError?.(userConsent);
     handleClose();
   };
+  const handleConsentClick = async () => {
+    try {
+      if (isAuthorized) {
+        setStep("END" /* END */);
+        return;
+      }
+      const res = await giveUserConsent(linkToken);
+      setUserConsent(res);
+      setStep("STATUS" /* STATUS */);
+    } catch (error) {
+      console.error(error);
+    }
+  };
   const handleAbort = () => {
     onError?.(new Error("User closed the modal"));
     handleClose();
   };
   if (!open) return null;
-  return /* @__PURE__ */ React31.createElement(View16, { style: styles16.container }, step === "INIT" /* INIT */ && /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React36.createElement(View20, { style: styles20.container }, step === "INIT" /* INIT */ && /* @__PURE__ */ React36.createElement(
     Init,
     {
       open,
@@ -3769,7 +4225,7 @@ var KryptosConnectModal = ({
       },
       onClose: handleAbort
     }
-  ), step === "AUTH" /* AUTH */ && /* @__PURE__ */ React31.createElement(
+  ), step === "AUTH" /* AUTH */ && /* @__PURE__ */ React36.createElement(
     Auth,
     {
       open,
@@ -3777,28 +4233,28 @@ var KryptosConnectModal = ({
       onGuestSuccess: () => setStep("INTEGRATION" /* INTEGRATION */),
       onClose: handleAbort
     }
-  ), step === "OTP" /* OTP */ && /* @__PURE__ */ React31.createElement(
+  ), step === "OTP" /* OTP */ && /* @__PURE__ */ React36.createElement(
     OTPVerify,
     {
       open,
       onSuccess: () => setStep("INTEGRATION" /* INTEGRATION */),
       onClose: handleAbort
     }
-  ), step === "INTEGRATION" /* INTEGRATION */ && /* @__PURE__ */ React31.createElement(
+  ), step === "INTEGRATION" /* INTEGRATION */ && /* @__PURE__ */ React36.createElement(
     Integration,
     {
       open,
-      onSuccess: () => setStep("PERMISSIONS" /* PERMISSIONS */),
+      onSuccess: handleConsentClick,
       onClose: handleAbort
     }
-  ), step === "PERMISSIONS" /* PERMISSIONS */ && /* @__PURE__ */ React31.createElement(
+  ), step === "PERMISSIONS" /* PERMISSIONS */ && /* @__PURE__ */ React36.createElement(
     Permissions,
     {
       open,
       onClose: handleAbort,
       onSuccess: () => setStep("STATUS" /* STATUS */)
     }
-  ), step === "STATUS" /* STATUS */ && /* @__PURE__ */ React31.createElement(
+  ), step === "STATUS" /* STATUS */ && /* @__PURE__ */ React36.createElement(
     StatusModal,
     {
       open,
@@ -3807,9 +4263,19 @@ var KryptosConnectModal = ({
       onError: handleError,
       status: userConsent?.public_token ? "success" : "error"
     }
+  ), step === "END" /* END */ && /* @__PURE__ */ React36.createElement(
+    EndModal,
+    {
+      open,
+      onClose: () => {
+        onSuccess?.(userConsent);
+        setStep("INIT" /* INIT */);
+        setOpen(false);
+      }
+    }
   ));
 };
-var styles16 = StyleSheet16.create({
+var styles20 = StyleSheet20.create({
   defaultButton: {
     flexDirection: "row",
     alignItems: "center",