@kryptos_connect/mobile-sdk 1.0.4 → 1.0.6-dev.0

package/dist/index.js

@@ -38,48 +38,11 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/KryptosConnectButton.tsx
-var import_react37 = __toESM(require("react"));
-var import_react_native22 = require("react-native");
-
-// src/assets/LogoIcon.tsx
-var import_react = __toESM(require("react"));
-var import_react_native_svg = __toESM(require("react-native-svg"));
-var LogoIcon = ({ size = 36 }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 36 36", fill: "none" }, /* @__PURE__ */ import_react.default.createElement(
-    import_react_native_svg.Path,
-    {
-      d: "M0 4.11429C0 1.84203 1.84203 0 4.11429 0H31.8857C34.158 0 36 1.84203 36 4.11429V31.8857C36 34.158 34.158 36 31.8857 36H4.11429C1.84203 36 0 34.158 0 31.8857V4.11429Z",
-      fill: "#00C693"
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_react_native_svg.Path,
-    {
-      d: "M12.3916 28.2857H8.43388C8.03646 28.2857 7.71429 27.9886 7.71429 27.6221V22.92C7.71429 22.744 7.7901 22.5752 7.92505 22.4508L9.66229 20.8487C9.79724 20.7243 9.98027 20.6544 10.1711 20.6544H12.3916C12.789 20.6544 13.1112 20.9515 13.1112 21.318V27.6221C13.1112 27.9886 12.789 28.2857 12.3916 28.2857Z",
-      fill: "white"
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_react_native_svg.Path,
-    {
-      d: "M27.5647 28.2857H22.0443C21.8535 28.2857 21.6704 28.2158 21.5355 28.0914L13.9798 21.1236C13.6988 20.8645 13.6988 20.4443 13.9798 20.1851L15.7788 18.5262C15.9137 18.4017 16.0968 18.3318 16.2876 18.3318H18.21C18.4009 18.3318 18.5839 18.4017 18.7189 18.5262L28.0735 27.1529C28.5268 27.5709 28.2058 28.2857 27.5647 28.2857Z",
-      fill: "white"
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_react_native_svg.Path,
-    {
-      d: "M27.5647 7.71429H22.0443C21.8535 7.71429 21.6704 7.7842 21.5355 7.90865L13.9798 14.8764C13.6988 15.1355 13.6988 15.5557 13.9798 15.8149L15.7788 17.4738C15.9137 17.5983 16.0968 17.6682 16.2876 17.6682H18.21C18.4009 17.6682 18.5839 17.5983 18.7189 17.4738L28.0735 8.84711C28.5268 8.42907 28.2058 7.71429 27.5647 7.71429Z",
-      fill: "white"
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_react_native_svg.Path,
-    {
-      d: "M12.3916 7.71429H8.43388C8.03646 7.71429 7.71429 8.01139 7.71429 8.37788V13.08C7.71429 13.256 7.7901 13.4248 7.92505 13.5492L9.66229 15.1513C9.79724 15.2757 9.98027 15.3456 10.1711 15.3456H12.3916C12.789 15.3456 13.1112 15.0485 13.1112 14.682V8.37788C13.1112 8.01139 12.789 7.71429 12.3916 7.71429Z",
-      fill: "white"
-    }
-  ));
-};
+var import_react39 = __toESM(require("react"));
+var import_react_native23 = require("react-native");
 
 // src/contexts/KryptosContext.tsx
-var import_react2 = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 
 // src/services/api.ts
 var import_axios = __toESM(require("axios"));
@@ -148,7 +111,7 @@ async function createAnonymousUser(linkToken, clientId) {
       }
     }
   );
-  return res.data;
+  return res.data?.data;
 }
 async function addUserIntegration(linkToken, integration) {
   const res = await api.post(
@@ -184,8 +147,8 @@ async function testCredentials(linkToken, data) {
   });
   return res.data?.data;
 }
-async function getSupportedProviders(linkToken) {
-  const res = await api.get("/integrations/providers", {
+async function getSupportedProviders(linkToken, id) {
+  const res = await api.get(`/integrations/providers${id ? `?id=${id}` : ""}`, {
     headers: {
       "X-LINK-TOKEN": linkToken
     }
@@ -231,23 +194,23 @@ async function getUserInfo(linkToken) {
 // src/contexts/KryptosContext.tsx
 var globalBaseUrl;
 var getGlobalBaseUrl = () => globalBaseUrl;
-var KryptosContext = import_react2.default.createContext(
+var KryptosContext = import_react.default.createContext(
   void 0
 );
 var KryptosConnectProvider = ({ children, config }) => {
-  const [isInitialized, setIsInitialized] = import_react2.default.useState(false);
-  const [linkToken, setLinkToken] = import_react2.default.useState("");
-  const [user, setUser] = import_react2.default.useState(null);
-  const [email, setEmail] = import_react2.default.useState("");
-  const [userConsent, setUserConsent] = import_react2.default.useState(
+  const [isInitialized, setIsInitialized] = import_react.default.useState(false);
+  const [linkToken, setLinkToken] = import_react.default.useState("");
+  const [user, setUser] = import_react.default.useState(null);
+  const [email, setEmail] = import_react.default.useState("");
+  const [userConsent, setUserConsent] = import_react.default.useState(
     null
   );
-  const [isAuthorized, setIsAuthorized] = import_react2.default.useState(false);
-  const [clientInfo, setClientInfo] = import_react2.default.useState(null);
-  import_react2.default.useEffect(() => {
+  const [isAuthorized, setIsAuthorized] = import_react.default.useState(false);
+  const [clientInfo, setClientInfo] = import_react.default.useState(null);
+  import_react.default.useEffect(() => {
     globalBaseUrl = config.baseUrl;
   }, [config.baseUrl]);
-  import_react2.default.useEffect(() => {
+  import_react.default.useEffect(() => {
     const fetchClientInfo = async () => {
       if (linkToken) {
         const res = await getClientInfo(linkToken);
@@ -256,7 +219,7 @@ var KryptosConnectProvider = ({ children, config }) => {
     };
     fetchClientInfo();
   }, [linkToken]);
-  return /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(
     KryptosContext.Provider,
     {
       value: {
@@ -280,7 +243,7 @@ var KryptosConnectProvider = ({ children, config }) => {
   );
 };
 var useKryptosConnect = () => {
-  const ctx = import_react2.default.useContext(KryptosContext);
+  const ctx = import_react.default.useContext(KryptosContext);
   if (!ctx)
     throw new Error(
       "useKryptosConnect must be used inside <KryptosConnectProvider>"
@@ -289,7 +252,7 @@ var useKryptosConnect = () => {
 };
 
 // src/hooks/useTheme.ts
-var import_react3 = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 
 // src/theme/index.ts
 var lightTheme = {
@@ -430,14 +393,14 @@ var getTheme = (isDark) => {
 // src/hooks/useTheme.ts
 var useTheme = () => {
   const { theme } = useKryptosConnect();
-  const currentTheme = import_react3.default.useMemo(() => {
+  const currentTheme = import_react2.default.useMemo(() => {
     return getTheme(theme === "dark");
   }, [theme]);
   return currentTheme;
 };
 
 // src/components/Button.tsx
-var import_react4 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_react_native = require("react-native");
 var Button = ({
   variant = "primary",
@@ -550,7 +513,7 @@ var Button = ({
     }
   };
   const sizeStyles = getSizeStyles();
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement(
     import_react_native.TouchableOpacity,
     {
       onPress,
@@ -564,7 +527,7 @@ var Button = ({
         style
       ]
     },
-    loading ? /* @__PURE__ */ import_react4.default.createElement(import_react_native.ActivityIndicator, { size: "small", color: getTextColor() }) : typeof children === "string" ? /* @__PURE__ */ import_react4.default.createElement(
+    loading ? /* @__PURE__ */ import_react3.default.createElement(import_react_native.ActivityIndicator, { size: "small", color: getTextColor() }) : typeof children === "string" ? /* @__PURE__ */ import_react3.default.createElement(
       import_react_native.Text,
       {
         style: [
@@ -575,7 +538,7 @@ var Button = ({
         ]
       },
       children
-    ) : /* @__PURE__ */ import_react4.default.createElement(import_react_native.View, { style: styles.contentContainer }, children)
+    ) : /* @__PURE__ */ import_react3.default.createElement(import_react_native.View, { style: styles.contentContainer }, children)
   );
 };
 var styles = import_react_native.StyleSheet.create({
@@ -600,7 +563,7 @@ var styles = import_react_native.StyleSheet.create({
 });
 
 // src/components/Input.tsx
-var import_react5 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_react_native2 = require("react-native");
 var Input = ({
   label,
@@ -624,7 +587,7 @@ var Input = ({
         return theme.colors.border;
     }
   };
-  return /* @__PURE__ */ import_react5.default.createElement(import_react_native2.View, { style: [styles2.wrapper, containerStyle] }, label && /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { style: [styles2.wrapper, containerStyle] }, label && /* @__PURE__ */ import_react4.default.createElement(
     import_react_native2.Text,
     {
       style: [
@@ -634,7 +597,7 @@ var Input = ({
       ]
     },
     label
-  ), /* @__PURE__ */ import_react5.default.createElement(
+  ), /* @__PURE__ */ import_react4.default.createElement(
     import_react_native2.TextInput,
     {
       placeholderTextColor: theme.colors.textTertiary,
@@ -653,7 +616,7 @@ var Input = ({
       ],
       ...props
     }
-  ), error && /* @__PURE__ */ import_react5.default.createElement(
+  ), error && /* @__PURE__ */ import_react4.default.createElement(
     import_react_native2.Text,
     {
       style: [
@@ -662,7 +625,7 @@ var Input = ({
       ]
     },
     error
-  ), helperText && !error && /* @__PURE__ */ import_react5.default.createElement(
+  ), helperText && !error && /* @__PURE__ */ import_react4.default.createElement(
     import_react_native2.Text,
     {
       style: [
@@ -701,7 +664,7 @@ var styles2 = import_react_native2.StyleSheet.create({
 });
 
 // src/components/Alert.tsx
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
 var Alert = ({
   variant = "default",
@@ -723,7 +686,7 @@ var Alert = ({
         };
     }
   };
-  return /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     import_react_native3.View,
     {
       style: [
@@ -739,12 +702,30 @@ var Alert = ({
     children
   );
 };
+var AlertTitle = ({ children, style }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ import_react5.default.createElement(
+    import_react_native3.Text,
+    {
+      style: [
+        styles3.title,
+        {
+          color: theme.colors.text,
+          fontSize: theme.fontSize.md,
+          textAlign: "center"
+        },
+        style
+      ]
+    },
+    children
+  );
+};
 var AlertDescription = ({
   children,
   style
 }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     import_react_native3.Text,
     {
       style: [
@@ -777,18 +758,18 @@ var styles3 = import_react_native3.StyleSheet.create({
 });
 
 // src/components/Modal.tsx
-var import_react8 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_react_native4 = require("react-native");
 
 // src/assets/CloseIcon.tsx
-var import_react7 = __toESM(require("react"));
-var import_react_native_svg2 = __toESM(require("react-native-svg"));
+var import_react6 = __toESM(require("react"));
+var import_react_native_svg = __toESM(require("react-native-svg"));
 var CloseIcon = ({
   size = 20,
   color = "#000"
 }) => {
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_native_svg2.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ import_react7.default.createElement(
-    import_react_native_svg2.Path,
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native_svg.Path,
     {
       d: "M15 5L5 15M5 5L15 15",
       stroke: color,
@@ -814,7 +795,7 @@ var Modal = ({
   const getSizeStyles = () => {
     switch (size) {
       case "xs":
-        return { maxHeight: SCREEN_HEIGHT * 0.35 };
+        return { maxHeight: SCREEN_HEIGHT * 0.4 };
       case "sm":
         return { maxHeight: SCREEN_HEIGHT * 0.45 };
       case "md":
@@ -832,13 +813,13 @@ var Modal = ({
   const handleOverlayPress = () => {
     if (!disableClose && closeOnOverlayClick) onClose();
   };
-  return /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(
     import_react_native4.KeyboardAvoidingView,
     {
       behavior: import_react_native4.Platform.OS === "ios" ? "padding" : "height",
       style: styles4.keyboardView
     },
-    /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react7.default.createElement(
       import_react_native4.Modal,
       {
         visible: isOpen,
@@ -847,14 +828,14 @@ var Modal = ({
         statusBarTranslucent: true,
         onRequestClose: disableClose ? void 0 : onClose
       },
-      /* @__PURE__ */ import_react8.default.createElement(
+      /* @__PURE__ */ import_react7.default.createElement(
         import_react_native4.TouchableOpacity,
         {
           activeOpacity: 1,
           style: [styles4.overlay, { backgroundColor: theme.colors.overlay }],
           onPress: handleOverlayPress
         },
-        /* @__PURE__ */ import_react8.default.createElement(
+        /* @__PURE__ */ import_react7.default.createElement(
           import_react_native4.View,
           {
             style: [
@@ -885,7 +866,7 @@ var ModalHeader = ({
   style
 }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(
     import_react_native4.View,
     {
       style: [
@@ -898,7 +879,7 @@ var ModalHeader = ({
         style
       ]
     },
-    /* @__PURE__ */ import_react8.default.createElement(import_react_native4.View, { style: styles4.headerContent }, typeof children === "string" ? /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react7.default.createElement(import_react_native4.View, { style: styles4.headerContent }, typeof children === "string" ? /* @__PURE__ */ import_react7.default.createElement(
       import_react_native4.Text,
       {
         style: [
@@ -908,7 +889,7 @@ var ModalHeader = ({
       },
       children
     ) : children),
-    showCloseButton && onClose && /* @__PURE__ */ import_react8.default.createElement(
+    showCloseButton && onClose && /* @__PURE__ */ import_react7.default.createElement(
       import_react_native4.TouchableOpacity,
       {
         onPress: onClose,
@@ -918,7 +899,7 @@ var ModalHeader = ({
           { backgroundColor: theme.colors.surface }
         ]
       },
-      /* @__PURE__ */ import_react8.default.createElement(CloseIcon, { color: theme.colors.text, size: 20 })
+      /* @__PURE__ */ import_react7.default.createElement(CloseIcon, { color: theme.colors.text, size: 20 })
     )
   );
 };
@@ -929,7 +910,7 @@ var ModalBody = ({
 }) => {
   const theme = useTheme();
   if (scrollable) {
-    return /* @__PURE__ */ import_react8.default.createElement(
+    return /* @__PURE__ */ import_react7.default.createElement(
       import_react_native4.ScrollView,
       {
         style: styles4.bodyScroll,
@@ -944,14 +925,14 @@ var ModalBody = ({
       children
     );
   }
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_native4.View, { style: [styles4.body, { padding: theme.spacing.lg }, style] }, children);
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_native4.View, { style: [styles4.body, { padding: theme.spacing.lg }, style] }, children);
 };
 var ModalFooter = ({
   children,
   style
 }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(
     import_react_native4.View,
     {
       style: [
@@ -1025,7 +1006,7 @@ var styles4 = import_react_native4.StyleSheet.create({
 });
 
 // src/components/OTP.tsx
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_react_native5 = require("react-native");
 var OTP = ({
   length = 6,
@@ -1041,11 +1022,11 @@ var OTP = ({
 }) => {
   const theme = useTheme();
   const AUTO_SUBMIT_DELAY = 500;
-  const [otp, setOtp] = import_react9.default.useState(
+  const [otp, setOtp] = import_react8.default.useState(
     value.split("").concat(Array(length).fill("")).slice(0, length)
   );
-  const inputRefs = import_react9.default.useRef([]);
-  import_react9.default.useEffect(() => {
+  const inputRefs = import_react8.default.useRef([]);
+  import_react8.default.useEffect(() => {
     const isComplete = otp.every((digit) => digit !== "");
     let timer;
     if (isComplete && onComplete) {
@@ -1057,12 +1038,12 @@ var OTP = ({
       if (timer) clearTimeout(timer);
     };
   }, [otp, onComplete]);
-  import_react9.default.useEffect(() => {
+  import_react8.default.useEffect(() => {
     setTimeout(() => {
       inputRefs.current[0]?.focus();
     }, 100);
   }, []);
-  const handleChange = import_react9.default.useCallback(
+  const handleChange = import_react8.default.useCallback(
     (index, val) => {
       if (disabled) return;
       setErrorMessage("");
@@ -1085,7 +1066,7 @@ var OTP = ({
     },
     [otp, length, onChange, onComplete, disabled]
   );
-  const handleKeyPress = import_react9.default.useCallback(
+  const handleKeyPress = import_react8.default.useCallback(
     (index, e) => {
       if (disabled) return;
       if (e.nativeEvent.key === "Backspace") {
@@ -1106,7 +1087,7 @@ var OTP = ({
     if (otp[index]) return theme.colors.success;
     return theme.colors.border;
   };
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, { style: [styles5.wrapper, containerStyle] }, label && /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: [styles5.wrapper, containerStyle] }, label && /* @__PURE__ */ import_react8.default.createElement(
     import_react_native5.Text,
     {
       style: [
@@ -1115,7 +1096,7 @@ var OTP = ({
       ]
     },
     label
-  ), /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, { style: styles5.container }, Array.from({ length }, (_, index) => /* @__PURE__ */ import_react9.default.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles5.container }, Array.from({ length }, (_, index) => /* @__PURE__ */ import_react8.default.createElement(
     import_react_native5.TextInput,
     {
       key: index,
@@ -1140,7 +1121,7 @@ var OTP = ({
       selectTextOnFocus: true,
       caretHidden: true
     }
-  ))), error && /* @__PURE__ */ import_react9.default.createElement(
+  ))), error && /* @__PURE__ */ import_react8.default.createElement(
     import_react_native5.Text,
     {
       style: [
@@ -1183,11 +1164,11 @@ var styles5 = import_react_native5.StyleSheet.create({
 });
 
 // src/components/SkeletonItem.tsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_react_native6 = require("react-native");
 var SkeletonItem = () => {
-  const opacity = (0, import_react10.useRef)(new import_react_native6.Animated.Value(0.3)).current;
-  (0, import_react10.useEffect)(() => {
+  const opacity = (0, import_react9.useRef)(new import_react_native6.Animated.Value(0.3)).current;
+  (0, import_react9.useEffect)(() => {
     import_react_native6.Animated.loop(
       import_react_native6.Animated.sequence([
         import_react_native6.Animated.timing(opacity, {
@@ -1203,7 +1184,7 @@ var SkeletonItem = () => {
       ])
     ).start();
   }, []);
-  return /* @__PURE__ */ import_react10.default.createElement(import_react_native6.Animated.View, { style: [styles6.row, { opacity }] }, /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles6.iconCircle }), /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles6.textBlock }, /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles6.lineLong }), /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles6.lineShort })));
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_native6.Animated.View, { style: [styles6.row, { opacity }] }, /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles6.iconCircle }), /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles6.textBlock }, /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles6.lineLong }), /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles6.lineShort })));
 };
 var styles6 = import_react_native6.StyleSheet.create({
   row: {
@@ -1238,14 +1219,14 @@ var styles6 = import_react_native6.StyleSheet.create({
 var SkeletonItem_default = SkeletonItem;
 
 // src/components/Mode.tsx
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_react_native7 = require("react-native");
 var Mode = () => {
   const { clientInfo } = useKryptosConnect();
   const theme = useTheme();
   if (!clientInfo) return null;
   if (clientInfo?.project_stage === "production") return null;
-  return /* @__PURE__ */ import_react11.default.createElement(import_react_native7.View, { style: [styles7.container, { backgroundColor: theme.colors.warning }] }, /* @__PURE__ */ import_react11.default.createElement(import_react_native7.Text, { style: [styles7.text, { color: theme.colors.warningText }] }, "Sandbox Mode"));
+  return /* @__PURE__ */ import_react10.default.createElement(import_react_native7.View, { style: [styles7.container, { backgroundColor: theme.colors.warning }] }, /* @__PURE__ */ import_react10.default.createElement(import_react_native7.Text, { style: [styles7.text, { color: theme.colors.warningText }] }, "Sandbox Mode"));
 };
 var styles7 = import_react_native7.StyleSheet.create({
   container: {
@@ -1268,6 +1249,45 @@ var import_react_native9 = require("react-native");
 // src/components/PoweredByKryptos.tsx
 var import_react12 = __toESM(require("react"));
 var import_react_native8 = require("react-native");
+
+// src/assets/LogoIcon.tsx
+var import_react11 = __toESM(require("react"));
+var import_react_native_svg2 = __toESM(require("react-native-svg"));
+var LogoIcon = ({ size = 36 }) => {
+  return /* @__PURE__ */ import_react11.default.createElement(import_react_native_svg2.default, { width: size, height: size, viewBox: "0 0 36 36", fill: "none" }, /* @__PURE__ */ import_react11.default.createElement(
+    import_react_native_svg2.Path,
+    {
+      d: "M0 4.11429C0 1.84203 1.84203 0 4.11429 0H31.8857C34.158 0 36 1.84203 36 4.11429V31.8857C36 34.158 34.158 36 31.8857 36H4.11429C1.84203 36 0 34.158 0 31.8857V4.11429Z",
+      fill: "#00C693"
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    import_react_native_svg2.Path,
+    {
+      d: "M12.3916 28.2857H8.43388C8.03646 28.2857 7.71429 27.9886 7.71429 27.6221V22.92C7.71429 22.744 7.7901 22.5752 7.92505 22.4508L9.66229 20.8487C9.79724 20.7243 9.98027 20.6544 10.1711 20.6544H12.3916C12.789 20.6544 13.1112 20.9515 13.1112 21.318V27.6221C13.1112 27.9886 12.789 28.2857 12.3916 28.2857Z",
+      fill: "white"
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    import_react_native_svg2.Path,
+    {
+      d: "M27.5647 28.2857H22.0443C21.8535 28.2857 21.6704 28.2158 21.5355 28.0914L13.9798 21.1236C13.6988 20.8645 13.6988 20.4443 13.9798 20.1851L15.7788 18.5262C15.9137 18.4017 16.0968 18.3318 16.2876 18.3318H18.21C18.4009 18.3318 18.5839 18.4017 18.7189 18.5262L28.0735 27.1529C28.5268 27.5709 28.2058 28.2857 27.5647 28.2857Z",
+      fill: "white"
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    import_react_native_svg2.Path,
+    {
+      d: "M27.5647 7.71429H22.0443C21.8535 7.71429 21.6704 7.7842 21.5355 7.90865L13.9798 14.8764C13.6988 15.1355 13.6988 15.5557 13.9798 15.8149L15.7788 17.4738C15.9137 17.5983 16.0968 17.6682 16.2876 17.6682H18.21C18.4009 17.6682 18.5839 17.5983 18.7189 17.4738L28.0735 8.84711C28.5268 8.42907 28.2058 7.71429 27.5647 7.71429Z",
+      fill: "white"
+    }
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    import_react_native_svg2.Path,
+    {
+      d: "M12.3916 7.71429H8.43388C8.03646 7.71429 7.71429 8.01139 7.71429 8.37788V13.08C7.71429 13.256 7.7901 13.4248 7.92505 13.5492L9.66229 15.1513C9.79724 15.2757 9.98027 15.3456 10.1711 15.3456H12.3916C12.789 15.3456 13.1112 15.0485 13.1112 14.682V8.37788C13.1112 8.01139 12.789 7.71429 12.3916 7.71429Z",
+      fill: "white"
+    }
+  ));
+};
+
+// src/components/PoweredByKryptos.tsx
 var PoweredByKryptos = () => {
   const theme = useTheme();
   const handlePress = () => {
@@ -1772,9 +1792,101 @@ var styles11 = import_react_native12.StyleSheet.create({
   }
 });
 
-// src/molecules/Init.tsx
-var import_react21 = __toESM(require("react"));
+// src/molecules/EndModal.tsx
+var import_react22 = __toESM(require("react"));
 var import_react_native13 = require("react-native");
+
+// src/assets/SuccessIcon.tsx
+var import_react21 = __toESM(require("react"));
+var import_react_native_svg8 = __toESM(require("react-native-svg"));
+var SuccessIcon = ({ size = 64 }) => {
+  return /* @__PURE__ */ import_react21.default.createElement(import_react_native_svg8.default, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ import_react21.default.createElement(
+    import_react_native_svg8.Circle,
+    {
+      cx: 32,
+      cy: 32,
+      r: 30,
+      fill: "#00C693",
+      opacity: 0.1
+    }
+  ), /* @__PURE__ */ import_react21.default.createElement(
+    import_react_native_svg8.Circle,
+    {
+      cx: 32,
+      cy: 32,
+      r: 24,
+      fill: "#00C693"
+    }
+  ), /* @__PURE__ */ import_react21.default.createElement(
+    import_react_native_svg8.Path,
+    {
+      d: "M24 32l6 6 12-12",
+      stroke: "white",
+      strokeWidth: 3,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+};
+
+// src/molecules/EndModal.tsx
+var EndModal = ({ open, onClose }) => {
+  const theme = useTheme();
+  (0, import_react22.useEffect)(() => {
+    if (!open) return;
+    const timer = setTimeout(() => {
+      onClose();
+    }, 5e3);
+    return () => clearTimeout(timer);
+  }, []);
+  return /* @__PURE__ */ import_react22.default.createElement(Modal, { isOpen: open, onClose, size: "xl" }, /* @__PURE__ */ import_react22.default.createElement(ModalHeader, { onClose }, ""), /* @__PURE__ */ import_react22.default.createElement(ModalBody, null, /* @__PURE__ */ import_react22.default.createElement(import_react_native13.View, { style: styles12.container }, /* @__PURE__ */ import_react22.default.createElement(
+    import_react_native13.View,
+    {
+      style: [
+        styles12.iconContainer,
+        { backgroundColor: theme.colors.successLight }
+      ]
+    },
+    /* @__PURE__ */ import_react22.default.createElement(SuccessIcon, { size: 80 })
+  ), /* @__PURE__ */ import_react22.default.createElement(import_react_native13.Text, { style: [styles12.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__ */ import_react22.default.createElement(Alert, null, /* @__PURE__ */ import_react22.default.createElement(AlertTitle, null, "Sync in Progress"), /* @__PURE__ */ import_react22.default.createElement(AlertDescription, null, "The syncing process might take a moment. Please wait, and your data will be updated soon.")))), /* @__PURE__ */ import_react22.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react22.default.createElement(
+    Button,
+    {
+      variant: "primary",
+      size: "lg",
+      onPress: onClose,
+      style: styles12.button
+    },
+    "Continue to App"
+  ), /* @__PURE__ */ import_react22.default.createElement(Footer, null)));
+};
+var styles12 = import_react_native13.StyleSheet.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/molecules/Init.tsx
+var import_react23 = __toESM(require("react"));
+var import_react_native14 = require("react-native");
 var Init = ({
   open,
   onSuccess,
@@ -1789,9 +1901,9 @@ var Init = ({
     setUser
   } = useKryptosConnect();
   const theme = useTheme();
-  const [isFetching, setIsFetching] = import_react21.default.useState(false);
-  const [error, setError] = import_react21.default.useState(null);
-  const fetchLinkToken = import_react21.default.useCallback(async () => {
+  const [isFetching, setIsFetching] = import_react23.default.useState(false);
+  const [error, setError] = import_react23.default.useState(null);
+  const fetchLinkToken = import_react23.default.useCallback(async () => {
     if (!open) return;
     setIsFetching(true);
     setError(null);
@@ -1818,28 +1930,28 @@ var Init = ({
       setIsFetching(false);
     }
   }, []);
-  import_react21.default.useEffect(() => {
+  import_react23.default.useEffect(() => {
     fetchLinkToken();
   }, [fetchLinkToken]);
-  return /* @__PURE__ */ import_react21.default.createElement(Modal, { isOpen: open, onClose, size: "xs" }, /* @__PURE__ */ import_react21.default.createElement(ModalHeader, { onClose }, "Kryptos Connect"), /* @__PURE__ */ import_react21.default.createElement(ModalBody, null, /* @__PURE__ */ import_react21.default.createElement(import_react_native13.View, { style: styles12.container }, isFetching && /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
-    import_react_native13.ActivityIndicator,
+  return /* @__PURE__ */ import_react23.default.createElement(Modal, { isOpen: open, onClose, size: "md" }, /* @__PURE__ */ import_react23.default.createElement(ModalHeader, { onClose }, "Kryptos Connect"), /* @__PURE__ */ import_react23.default.createElement(ModalBody, null, /* @__PURE__ */ import_react23.default.createElement(import_react_native14.View, { style: styles13.container }, isFetching && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
+    import_react_native14.ActivityIndicator,
     {
       size: "large",
       color: theme.colors.primary,
-      style: styles12.spinner
+      style: styles13.spinner
     }
-  ), /* @__PURE__ */ import_react21.default.createElement(import_react_native13.Text, { style: [styles12.message, { color: theme.colors.text }] }, isInitialized ? "Fetching link token..." : "Initializing...")), !isFetching && error && /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react21.default.createElement(AlertDescription, null, error)), /* @__PURE__ */ import_react21.default.createElement(
+  ), /* @__PURE__ */ import_react23.default.createElement(import_react_native14.Text, { style: [styles13.message, { color: theme.colors.text }] }, isInitialized ? "Fetching link token..." : "Initializing...")), !isFetching && error && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react23.default.createElement(AlertDescription, null, error)), /* @__PURE__ */ import_react23.default.createElement(
     Button,
     {
       variant: "primary",
       size: "lg",
       onPress: fetchLinkToken,
-      style: styles12.retryButton
+      style: styles13.retryButton
     },
     "Retry"
-  )))), /* @__PURE__ */ import_react21.default.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ import_react21.default.createElement(Footer, null)));
+  )))), /* @__PURE__ */ import_react23.default.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ import_react23.default.createElement(Footer, null)));
 };
-var styles12 = import_react_native13.StyleSheet.create({
+var styles13 = import_react_native14.StyleSheet.create({
   container: {
     flex: 1,
     alignItems: "center",
@@ -1866,18 +1978,18 @@ var styles12 = import_react_native13.StyleSheet.create({
 });
 
 // src/molecules/Integration.tsx
-var import_react32 = __toESM(require("react"));
-var import_react_native17 = require("react-native");
+var import_react35 = __toESM(require("react"));
+var import_react_native19 = require("react-native");
 
 // src/assets/ArrowLeftIcon.tsx
-var import_react22 = __toESM(require("react"));
-var import_react_native_svg8 = __toESM(require("react-native-svg"));
+var import_react24 = __toESM(require("react"));
+var import_react_native_svg9 = __toESM(require("react-native-svg"));
 var ArrowLeftIcon = ({
   size = 20,
   color = "#000"
 }) => {
-  return /* @__PURE__ */ import_react22.default.createElement(import_react_native_svg8.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react22.default.createElement(
-    import_react_native_svg8.Path,
+  return /* @__PURE__ */ import_react24.default.createElement(import_react_native_svg9.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react24.default.createElement(
+    import_react_native_svg9.Path,
     {
       d: "M19 12H5M12 19l-7-7 7-7",
       stroke: color,
@@ -1889,14 +2001,14 @@ var ArrowLeftIcon = ({
 };
 
 // src/assets/CheckCircleIcon.tsx
-var import_react23 = __toESM(require("react"));
-var import_react_native_svg9 = __toESM(require("react-native-svg"));
+var import_react25 = __toESM(require("react"));
+var import_react_native_svg10 = __toESM(require("react-native-svg"));
 var CheckCircleIcon = ({
   size = 20,
   color = "#10B981"
 }) => {
-  return /* @__PURE__ */ import_react23.default.createElement(import_react_native_svg9.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react23.default.createElement(
-    import_react_native_svg9.Circle,
+  return /* @__PURE__ */ import_react25.default.createElement(import_react_native_svg10.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react25.default.createElement(
+    import_react_native_svg10.Circle,
     {
       cx: 12,
       cy: 12,
@@ -1904,8 +2016,8 @@ var CheckCircleIcon = ({
       stroke: color,
       strokeWidth: 2
     }
-  ), /* @__PURE__ */ import_react23.default.createElement(
-    import_react_native_svg9.Path,
+  ), /* @__PURE__ */ import_react25.default.createElement(
+    import_react_native_svg10.Path,
     {
       d: "m9 12 2 2 4-4",
       stroke: color,
@@ -1917,21 +2029,21 @@ var CheckCircleIcon = ({
 };
 
 // src/assets/LoaderIcon.tsx
-var import_react24 = __toESM(require("react"));
-var import_react_native14 = require("react-native");
-var import_react_native_svg10 = __toESM(require("react-native-svg"));
-var AnimatedSvg = import_react_native14.Animated.createAnimatedComponent(import_react_native_svg10.default);
+var import_react26 = __toESM(require("react"));
+var import_react_native15 = require("react-native");
+var import_react_native_svg11 = __toESM(require("react-native-svg"));
+var AnimatedSvg = import_react_native15.Animated.createAnimatedComponent(import_react_native_svg11.default);
 var LoaderIcon = ({
   size = 20,
   color = "#00C693"
 }) => {
-  const rotateAnim = import_react24.default.useRef(new import_react_native14.Animated.Value(0)).current;
-  import_react24.default.useEffect(() => {
-    import_react_native14.Animated.loop(
-      import_react_native14.Animated.timing(rotateAnim, {
+  const rotateAnim = import_react26.default.useRef(new import_react_native15.Animated.Value(0)).current;
+  import_react26.default.useEffect(() => {
+    import_react_native15.Animated.loop(
+      import_react_native15.Animated.timing(rotateAnim, {
         toValue: 1,
         duration: 1e3,
-        easing: import_react_native14.Easing.linear,
+        easing: import_react_native15.Easing.linear,
         useNativeDriver: true
       })
     ).start();
@@ -1940,7 +2052,7 @@ var LoaderIcon = ({
     inputRange: [0, 1],
     outputRange: ["0deg", "360deg"]
   });
-  return /* @__PURE__ */ import_react24.default.createElement(
+  return /* @__PURE__ */ import_react26.default.createElement(
     AnimatedSvg,
     {
       width: size,
@@ -1949,8 +2061,8 @@ var LoaderIcon = ({
       fill: "none",
       style: { transform: [{ rotate: spin }] }
     },
-    /* @__PURE__ */ import_react24.default.createElement(
-      import_react_native_svg10.Path,
+    /* @__PURE__ */ import_react26.default.createElement(
+      import_react_native_svg11.Path,
       {
         d: "M21 12a9 9 0 1 1-6.219-8.56",
         stroke: color,
@@ -1962,44 +2074,11 @@ var LoaderIcon = ({
   );
 };
 
-// src/assets/SuccessIcon.tsx
-var import_react25 = __toESM(require("react"));
-var import_react_native_svg11 = __toESM(require("react-native-svg"));
-var SuccessIcon = ({ size = 64 }) => {
-  return /* @__PURE__ */ import_react25.default.createElement(import_react_native_svg11.default, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ import_react25.default.createElement(
-    import_react_native_svg11.Circle,
-    {
-      cx: 32,
-      cy: 32,
-      r: 30,
-      fill: "#00C693",
-      opacity: 0.1
-    }
-  ), /* @__PURE__ */ import_react25.default.createElement(
-    import_react_native_svg11.Circle,
-    {
-      cx: 32,
-      cy: 32,
-      r: 24,
-      fill: "#00C693"
-    }
-  ), /* @__PURE__ */ import_react25.default.createElement(
-    import_react_native_svg11.Path,
-    {
-      d: "M24 32l6 6 12-12",
-      stroke: "white",
-      strokeWidth: 3,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-};
-
 // src/assets/ErrorIcon.tsx
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_react_native_svg12 = __toESM(require("react-native-svg"));
 var ErrorIcon = ({ size = 64 }) => {
-  return /* @__PURE__ */ import_react26.default.createElement(import_react_native_svg12.default, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ import_react26.default.createElement(
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_native_svg12.default, { width: size, height: size, viewBox: "0 0 64 64", fill: "none" }, /* @__PURE__ */ import_react27.default.createElement(
     import_react_native_svg12.Circle,
     {
       cx: 32,
@@ -2008,7 +2087,7 @@ var ErrorIcon = ({ size = 64 }) => {
       fill: "#EF4444",
       opacity: 0.1
     }
-  ), /* @__PURE__ */ import_react26.default.createElement(
+  ), /* @__PURE__ */ import_react27.default.createElement(
     import_react_native_svg12.Circle,
     {
       cx: 32,
@@ -2016,7 +2095,7 @@ var ErrorIcon = ({ size = 64 }) => {
       r: 24,
       fill: "#EF4444"
     }
-  ), /* @__PURE__ */ import_react26.default.createElement(
+  ), /* @__PURE__ */ import_react27.default.createElement(
     import_react_native_svg12.Path,
     {
       d: "M24 24l16 16M40 24l-16 16",
@@ -2029,17 +2108,17 @@ var ErrorIcon = ({ size = 64 }) => {
 };
 
 // src/assets/SearchIcon.tsx
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_react_native_svg13 = __toESM(require("react-native-svg"));
 
 // src/assets/PlusIcon.tsx
-var import_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_react_native_svg14 = __toESM(require("react-native-svg"));
 var PlusIcon = ({
   size = 14,
   color = "#6B7280"
 }) => {
-  return /* @__PURE__ */ import_react28.default.createElement(import_react_native_svg14.default, { width: size, height: size, viewBox: "0 0 14 14", fill: "none" }, /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement(import_react_native_svg14.default, { width: size, height: size, viewBox: "0 0 14 14", fill: "none" }, /* @__PURE__ */ import_react29.default.createElement(
     import_react_native_svg14.Path,
     {
       d: "M7 3.5v7M3.5 7h7",
@@ -2050,14 +2129,52 @@ var PlusIcon = ({
   ));
 };
 
-// src/wallet-connect/index.tsx
-var import_appkit_react_native3 = require("@reown/appkit-react-native");
+// src/assets/RedirectIcon.tsx
 var import_react30 = __toESM(require("react"));
-var import_react_native15 = require("react-native");
-
-// src/utils/uuid.ts
-function generateUUID() {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+var import_react_native_svg15 = __toESM(require("react-native-svg"));
+var RedirectIcon = ({
+  width = 20,
+  height = 20,
+  color = "currentColor"
+}) => {
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_native_svg15.default, { width, height, viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ import_react30.default.createElement(
+    import_react_native_svg15.Path,
+    {
+      d: "M10.8333 9.16536L17.6666 2.33203",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ import_react30.default.createElement(
+    import_react_native_svg15.Path,
+    {
+      d: "M18.3333 5.66797V1.66797H14.3333",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ import_react30.default.createElement(
+    import_react_native_svg15.Path,
+    {
+      d: "M9.16669 1.66797H7.50002C3.33335 1.66797 1.66669 3.33464 1.66669 7.5013V12.5013C1.66669 16.668 3.33335 18.3346 7.50002 18.3346H12.5C16.6667 18.3346 18.3334 16.668 18.3334 12.5013V10.8346",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+};
+
+// src/wallet-connect/index.tsx
+var import_appkit_react_native3 = require("@reown/appkit-react-native");
+var import_react32 = __toESM(require("react"));
+var import_react_native16 = require("react-native");
+
+// src/utils/uuid.ts
+function generateUUID() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
     const r = Math.random() * 16 | 0;
     const v = c === "x" ? r : r & 3 | 8;
     return v.toString(16);
@@ -2065,7 +2182,7 @@ function generateUUID() {
 }
 
 // src/wallet-connect/wallet-connect.tsx
-var import_react29 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_appkit_react_native2 = require("@reown/appkit-react-native");
 
 // src/wallet-connect/AppKitConfig.ts
@@ -2164,7 +2281,7 @@ var createAppKitInstance = (projectId) => {
 // src/wallet-connect/wallet-connect.tsx
 var WalletConnectWrapper = ({ children }) => {
   const { walletConnectProjectId } = useKryptosConnect();
-  const appKit = import_react29.default.useMemo(() => {
+  const appKit = import_react31.default.useMemo(() => {
     if (!walletConnectProjectId) {
       console.warn(
         "walletConnectProjectId is missing in KryptosConnectProvider config"
@@ -2174,9 +2291,9 @@ var WalletConnectWrapper = ({ children }) => {
     return createAppKitInstance(walletConnectProjectId);
   }, [walletConnectProjectId]);
   if (!appKit) {
-    return /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, children);
+    return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, children);
   }
-  return /* @__PURE__ */ import_react29.default.createElement(import_appkit_react_native2.AppKitProvider, { instance: appKit }, /* @__PURE__ */ import_react29.default.createElement(import_appkit_react_native2.AppKit, null), children);
+  return /* @__PURE__ */ import_react31.default.createElement(import_appkit_react_native2.AppKitProvider, { instance: appKit }, /* @__PURE__ */ import_react31.default.createElement(import_appkit_react_native2.AppKit, null), children);
 };
 var wallet_connect_default = WalletConnectWrapper;
 
@@ -2188,47 +2305,48 @@ var WalletConnectComponent = ({
   handleClose,
   modalOpen,
   setAddIntegrationMode,
-  providersList
+  providersList,
+  errorMessage
 }) => {
   const { walletConnectProjectId } = useKryptosConnect();
   const theme = useTheme();
   if (!walletConnectProjectId) {
-    return /* @__PURE__ */ import_react30.default.createElement(Modal, { isOpen: modalOpen, onClose: handleClose, size: "full" }, /* @__PURE__ */ import_react30.default.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ import_react30.default.createElement(import_react_native15.View, { style: styles13.headerContent }, /* @__PURE__ */ import_react30.default.createElement(
-      import_react_native15.TouchableOpacity,
+    return /* @__PURE__ */ import_react32.default.createElement(Modal, { isOpen: modalOpen, onClose: handleClose, size: "full" }, /* @__PURE__ */ import_react32.default.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, { style: styles14.headerContent }, /* @__PURE__ */ import_react32.default.createElement(
+      import_react_native16.TouchableOpacity,
       {
         onPress: () => {
           setAddIntegrationMode(null);
         },
-        style: styles13.backButton
+        style: styles14.backButton
       },
-      /* @__PURE__ */ import_react30.default.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-    ), /* @__PURE__ */ import_react30.default.createElement(import_react_native15.Text, { style: [styles13.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ import_react30.default.createElement(ModalBody, { scrollable: false, style: styles13.contentContainer }, /* @__PURE__ */ import_react30.default.createElement(import_react_native15.View, { style: styles13.emptyState }, /* @__PURE__ */ import_react30.default.createElement(
-      import_react_native15.Text,
+      /* @__PURE__ */ import_react32.default.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
+    ), /* @__PURE__ */ import_react32.default.createElement(import_react_native16.Text, { style: [styles14.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ import_react32.default.createElement(ModalBody, { scrollable: true, style: styles14.contentContainer }, /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, { style: styles14.emptyState }, /* @__PURE__ */ import_react32.default.createElement(
+      import_react_native16.Text,
       {
-        style: [styles13.emptyStateTitle, { color: theme.colors.text }]
+        style: [styles14.emptyStateTitle, { color: theme.colors.text }]
       },
       "WalletConnect is not configured"
-    ), /* @__PURE__ */ import_react30.default.createElement(
-      import_react_native15.Text,
+    ), /* @__PURE__ */ import_react32.default.createElement(
+      import_react_native16.Text,
       {
         style: [
-          styles13.infoText,
+          styles14.infoText,
           { color: theme.colors.textSecondary, textAlign: "center" }
         ]
       },
       "Please add a walletConnectProjectId to KryptosConnectProvider to enable wallet connections."
-    ), /* @__PURE__ */ import_react30.default.createElement(
+    ), /* @__PURE__ */ import_react32.default.createElement(
       Button,
       {
         variant: "outline",
         size: "sm",
         onPress: () => setAddIntegrationMode(null),
-        style: styles13.emptyStateButton
+        style: styles14.emptyStateButton
       },
       "Go back"
     ))));
   }
-  return /* @__PURE__ */ import_react30.default.createElement(wallet_connect_default, null, /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(wallet_connect_default, null, /* @__PURE__ */ import_react32.default.createElement(
     ConnectButton,
     {
       integration,
@@ -2237,7 +2355,8 @@ var WalletConnectComponent = ({
       handleClose,
       modalOpen,
       setAddIntegrationMode,
-      providersList
+      providersList,
+      errorMessage
     }
   ));
 };
@@ -2247,28 +2366,35 @@ function ConnectButton({
   handleClose,
   modalOpen,
   setAddIntegrationMode,
-  providersList
+  providersList,
+  errorMessage: errorMessageProp
 }) {
   const theme = useTheme();
   const { open, disconnect } = (0, import_appkit_react_native3.useAppKit)();
   const { address, isConnected } = (0, import_appkit_react_native3.useAccount)();
   const { linkToken, user, clientId } = useKryptosConnect();
-  const [selectedChains, setSelectedChains] = (0, import_react30.useState)(/* @__PURE__ */ new Set());
-  const [errorMessage, setErrorMessage] = (0, import_react30.useState)("");
-  const [chainErrors, setChainErrors] = (0, import_react30.useState)({});
-  const [isLoading, setIsLoading] = (0, import_react30.useState)(false);
-  const [userUsedChains, setUserUsedChains] = (0, import_react30.useState)([]);
-  const [isFetchingChains, setIsFetchingChains] = (0, import_react30.useState)(false);
-  const availableChains = (0, import_react30.useMemo)(() => {
+  const [selectedChains, setSelectedChains] = (0, import_react32.useState)(/* @__PURE__ */ new Set());
+  const [errorMessage, setErrorMessage] = (0, import_react32.useState)("");
+  const [chainErrors, setChainErrors] = (0, import_react32.useState)({});
+  const [isLoading, setIsLoading] = (0, import_react32.useState)(false);
+  const [userUsedChains, setUserUsedChains] = (0, import_react32.useState)([]);
+  const [isFetchingChains, setIsFetchingChains] = (0, import_react32.useState)(false);
+  const availableChains = (0, import_react32.useMemo)(() => {
     if (userUsedChains.length > 0) {
       return userUsedChains;
     }
     if (integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
-      return integration.walletSupportedChains;
+      return integration.walletSupportedChains.filter((supportedChain) => {
+        const provider = providersList.find(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (p) => p.id === supportedChain.id
+        );
+        return provider && provider.is_working === true && provider.isEvmWallet === true;
+      });
     }
     return [];
-  }, [userUsedChains, integration.walletSupportedChains]);
-  (0, import_react30.useEffect)(() => {
+  }, [userUsedChains, integration.walletSupportedChains, providersList]);
+  (0, import_react32.useEffect)(() => {
     if (!isConnected || !address || !address.trim()) {
       setUserUsedChains([]);
       setSelectedChains(/* @__PURE__ */ new Set());
@@ -2287,7 +2413,16 @@ function ConnectButton({
             }
           }
           if (chains.length === 0 && integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
-            chains = integration.walletSupportedChains;
+            chains = integration.walletSupportedChains.filter(
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              (supportedChain) => {
+                const provider = providersList.find(
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (p) => p.id === supportedChain.id
+                );
+                return provider && provider.is_working === true && provider.isEvmWallet === true;
+              }
+            );
           }
           if (chains.length > 0) {
             setUserUsedChains(chains);
@@ -2299,11 +2434,21 @@ function ConnectButton({
         } catch (error) {
           console.error("Failed to fetch user chains:", error);
           if (integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
-            setUserUsedChains(integration.walletSupportedChains);
+            const validChains = integration.walletSupportedChains.filter(
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              (supportedChain) => {
+                const provider = providersList.find(
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (p) => p.id === supportedChain.id
+                );
+                return provider && provider.is_working === true && provider.isEvmWallet === true;
+              }
+            );
+            setUserUsedChains(validChains);
             setSelectedChains(
               new Set(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                integration.walletSupportedChains.map((chain) => chain.id)
+                validChains.map((chain) => chain.id)
               )
             );
           } else {
@@ -2323,7 +2468,8 @@ function ConnectButton({
     address,
     isConnected,
     integration.isEvmWallet,
-    integration.walletSupportedChains
+    integration.walletSupportedChains,
+    providersList
   ]);
   const validateForm = () => {
     if (!address) {
@@ -2360,11 +2506,11 @@ function ConnectButton({
             source: provider?.id,
             credential: {
               address,
-              userId: user?.user_id || "0",
+              userId: user?.user_id || "",
               projectId: provider?.projectId,
-              apiKey: "0",
-              secret: "0",
-              privateKey: "0",
+              apiKey: "",
+              secret: "",
+              privateKey: "",
               alias,
               walletId,
               exchange: provider?.id
@@ -2403,10 +2549,9 @@ function ConnectButton({
             default_chain_logo: integration?.logo || "",
             type: provider.type || "",
             isNftSupported: provider?.isEvmWallet || provider?.nftSupport || false,
+            isCustomWallet: false,
             chainId: provider?.community_id,
-            credsData: {
-              address
-            }
+            address: address?.trim()
           };
           integrationsToAdd.push(data);
         } else {
@@ -2425,7 +2570,7 @@ function ConnectButton({
         return;
       }
       if (integrationsToAdd.length > 0) {
-        onAddHandle(integrationsToAdd);
+        await onAddHandle(integrationsToAdd);
         if (isConnected) {
           disconnect();
         }
@@ -2438,7 +2583,7 @@ function ConnectButton({
       const err = error;
       console.error(error);
       setErrorMessage(
-        err?.response?.data?.message || "Failed to add integration"
+        err?.response?.data?.message || err?.response?.data?.error || "Failed to add integrations"
       );
     } finally {
       setIsLoading(false);
@@ -2458,8 +2603,14 @@ function ConnectButton({
       setChainErrors(newErrors);
     }
   };
-  return /* @__PURE__ */ import_react30.default.createElement(Modal, { isOpen: modalOpen, onClose: handleClose, size: "full" }, /* @__PURE__ */ import_react30.default.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ import_react30.default.createElement(import_react_native15.View, { style: styles13.headerContent }, /* @__PURE__ */ import_react30.default.createElement(
-    import_react_native15.TouchableOpacity,
+  const onClose = () => {
+    if (isConnected) {
+      disconnect();
+    }
+    handleClose();
+  };
+  return /* @__PURE__ */ import_react32.default.createElement(Modal, { isOpen: modalOpen, onClose, size: "full" }, /* @__PURE__ */ import_react32.default.createElement(ModalHeader, { onClose }, /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, { style: styles14.headerContent }, /* @__PURE__ */ import_react32.default.createElement(
+    import_react_native16.TouchableOpacity,
     {
       onPress: () => {
         setAddIntegrationMode(null);
@@ -2467,26 +2618,26 @@ function ConnectButton({
           disconnect();
         }
       },
-      style: styles13.backButton
+      style: styles14.backButton
     },
-    /* @__PURE__ */ import_react30.default.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-  ), /* @__PURE__ */ import_react30.default.createElement(import_react_native15.Text, { style: [styles13.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ import_react30.default.createElement(ModalBody, { scrollable: false, style: styles13.contentContainer }, /* @__PURE__ */ import_react30.default.createElement(import_react_native15.View, { style: styles13.header }, integration.logo ? isSvgUrl(integration.logo) ? /* @__PURE__ */ import_react30.default.createElement(RemoteSvg, { uri: integration.logo }) : /* @__PURE__ */ import_react30.default.createElement(
-    import_react_native15.Image,
+    /* @__PURE__ */ import_react32.default.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
+  ), /* @__PURE__ */ import_react32.default.createElement(import_react_native16.Text, { style: [styles14.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ import_react32.default.createElement(ModalBody, { scrollable: true, style: styles14.contentContainer }, /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, { style: styles14.header }, integration.logo ? isSvgUrl(integration.logo) ? /* @__PURE__ */ import_react32.default.createElement(RemoteSvg, { uri: integration.logo }) : /* @__PURE__ */ import_react32.default.createElement(
+    import_react_native16.Image,
     {
       source: { uri: integration.logo },
-      style: styles13.logo,
+      style: styles14.logo,
       resizeMode: "contain"
     }
-  ) : /* @__PURE__ */ import_react30.default.createElement(
-    import_react_native15.View,
+  ) : /* @__PURE__ */ import_react32.default.createElement(
+    import_react_native16.View,
     {
       style: [
-        styles13.logoPlaceholder,
+        styles14.logoPlaceholder,
         { backgroundColor: theme.colors.surface }
       ]
     },
-    /* @__PURE__ */ import_react30.default.createElement(import_react_native15.Text, { style: { color: theme.colors.text } }, integration.name?.charAt(0) || "?")
-  ), /* @__PURE__ */ import_react30.default.createElement(import_react_native15.Text, { style: [styles13.name, { color: theme.colors.text }] }, integration.name)), !isConnected ? /* @__PURE__ */ import_react30.default.createElement(import_react_native15.View, null, /* @__PURE__ */ import_react30.default.createElement(import_react_native15.Text, { style: [styles13.infoText, { color: theme.colors.text }] }, "Connect your wallet to continue"), /* @__PURE__ */ import_react30.default.createElement(
+    /* @__PURE__ */ import_react32.default.createElement(import_react_native16.Text, { style: { color: theme.colors.text } }, integration.name?.charAt(0) || "?")
+  ), /* @__PURE__ */ import_react32.default.createElement(import_react_native16.Text, { style: [styles14.name, { color: theme.colors.text }] }, integration.name)), !isConnected ? /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, null, /* @__PURE__ */ import_react32.default.createElement(import_react_native16.Text, { style: [styles14.infoText, { color: theme.colors.text }] }, "Connect your wallet to continue"), /* @__PURE__ */ import_react32.default.createElement(
     Button,
     {
       variant: "primary",
@@ -2494,111 +2645,132 @@ function ConnectButton({
       onPress: () => open({ view: "Connect" })
     },
     "Connect Wallet"
-  )) : /* @__PURE__ */ import_react30.default.createElement(import_react_native15.View, { style: styles13.connectedContainer }, /* @__PURE__ */ import_react30.default.createElement(import_react_native15.View, { style: styles13.connectedHeader }, /* @__PURE__ */ import_react30.default.createElement(
-    import_react_native15.Text,
+  )) : /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, { style: styles14.connectedContainer }, /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, { style: styles14.connectedHeader }, /* @__PURE__ */ import_react32.default.createElement(
+    import_react_native16.Text,
     {
-      style: [styles13.connectedTitle, { color: theme.colors.text }]
+      style: [styles14.connectedTitle, { color: theme.colors.text }]
     },
     "Wallet Connected"
-  ), /* @__PURE__ */ import_react30.default.createElement(
-    import_react_native15.Text,
+  ), /* @__PURE__ */ import_react32.default.createElement(
+    import_react_native16.Text,
     {
-      style: [styles13.connectedText, { color: theme.colors.text }]
+      style: [styles14.connectedText, { color: theme.colors.text }]
     },
     "Address: ",
     address
-  ), /* @__PURE__ */ import_react30.default.createElement(Button, { variant: "ghost", size: "sm", onPress: () => disconnect() }, "Disconnect Wallet"), isFetchingChains ? /* @__PURE__ */ import_react30.default.createElement(
-    import_react_native15.Text,
+  ), /* @__PURE__ */ import_react32.default.createElement(Button, { variant: "ghost", size: "sm", onPress: () => disconnect() }, "Disconnect Wallet"), isFetchingChains ? /* @__PURE__ */ import_react32.default.createElement(
+    import_react_native16.Text,
     {
-      style: [styles13.fetchingText, { color: theme.colors.text }]
+      style: [styles14.fetchingText, { color: theme.colors.text }]
     },
     "Fetching chains..."
-  ) : null), availableChains.length > 0 && address && /* @__PURE__ */ import_react30.default.createElement(
-    import_react_native15.ScrollView,
-    {
-      style: styles13.scrollView,
-      contentContainerStyle: styles13.scrollViewContent,
-      showsVerticalScrollIndicator: true,
-      nestedScrollEnabled: true
-    },
-    /* @__PURE__ */ import_react30.default.createElement(import_react_native15.Text, { style: [styles13.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"),
-    /* @__PURE__ */ import_react30.default.createElement(import_react_native15.View, null, /* @__PURE__ */ import_react30.default.createElement(import_react_native15.View, { style: styles13.chainChips }, availableChains.map((chain) => {
-      const isSelected = selectedChains.has(chain.id);
-      const hasError = chainErrors[chain.id];
-      return /* @__PURE__ */ import_react30.default.createElement(
-        import_react_native15.TouchableOpacity,
+  ) : null), availableChains.length > 0 && address && /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, { style: styles14.chainListWrapper }, /* @__PURE__ */ import_react32.default.createElement(import_react_native16.Text, { style: [styles14.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"), /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, { style: styles14.chainListContent }, /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, { style: styles14.chainChips }, availableChains.map((chain) => {
+    const isSelected = selectedChains.has(chain.id);
+    const hasError = chainErrors[chain.id];
+    return /* @__PURE__ */ import_react32.default.createElement(
+      import_react_native16.TouchableOpacity,
+      {
+        onPress: () => toggleChainSelection(chain.id),
+        style: styles14.chainButton,
+        key: chain.id
+      },
+      /* @__PURE__ */ import_react32.default.createElement(
+        import_react_native16.View,
         {
-          onPress: () => toggleChainSelection(chain.id),
-          style: styles13.chainButton,
-          key: chain.id
+          style: [
+            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__ */ import_react30.default.createElement(
-          import_react_native15.View,
+        /* @__PURE__ */ import_react32.default.createElement(
+          import_react_native16.Text,
           {
             style: [
-              styles13.chainChip,
+              styles14.chainName,
               {
-                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
+                color: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.text
               }
             ]
           },
-          /* @__PURE__ */ import_react30.default.createElement(
-            import_react_native15.Text,
-            {
-              style: [
-                styles13.chainName,
-                {
-                  color: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.text
-                }
-              ]
-            },
-            chain.id
-          ),
-          isSelected ? /* @__PURE__ */ import_react30.default.createElement(
-            CloseIcon,
-            {
-              size: 12,
-              color: hasError ? theme.colors.error : theme.colors.primary
-            }
-          ) : /* @__PURE__ */ import_react30.default.createElement(
-            PlusIcon,
-            {
-              size: 12,
-              color: theme.colors.textSecondary
-            }
-          )
+          chain.name || chain?.id
+        ),
+        isSelected ? /* @__PURE__ */ import_react32.default.createElement(
+          CloseIcon,
+          {
+            size: 12,
+            color: hasError ? theme.colors.error : theme.colors.primary
+          }
+        ) : /* @__PURE__ */ import_react32.default.createElement(
+          PlusIcon,
+          {
+            size: 12,
+            color: theme.colors.textSecondary
+          }
         )
-      );
-    })), errorMessage ? /* @__PURE__ */ import_react30.default.createElement(import_react_native15.View, { style: styles13.errorMessageContainer }, /* @__PURE__ */ import_react30.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react30.default.createElement(AlertDescription, null, errorMessage))) : null, Object.keys(chainErrors || {}).length > 0 && /* @__PURE__ */ import_react30.default.createElement(import_react_native15.View, { style: styles13.chainErrorsContainer }, /* @__PURE__ */ import_react30.default.createElement(
-      import_react_native15.Text,
+      )
+    );
+  })), selectedChains.size > 0 && availableChains.length > 0 && /* @__PURE__ */ import_react32.default.createElement(
+    import_react_native16.TouchableOpacity,
+    {
+      onPress: () => setSelectedChains(/* @__PURE__ */ new Set()),
+      style: styles14.chainButton,
+      activeOpacity: 0.7
+    },
+    /* @__PURE__ */ import_react32.default.createElement(
+      import_react_native16.View,
       {
         style: [
-          styles13.chainErrorsTitle,
-          { color: theme.colors.error }
+          styles14.chainChip,
+          styles14.chainChipRemoveAll,
+          {
+            borderWidth: 0,
+            backgroundColor: "transparent"
+          }
         ]
       },
-      "Errors:"
-    ), Object.entries(chainErrors).map(([chainId, error]) => {
-      const chain = availableChains.find(
-        (c) => c.id === chainId
-      );
-      return /* @__PURE__ */ import_react30.default.createElement(
-        import_react_native15.Text,
+      /* @__PURE__ */ import_react32.default.createElement(
+        import_react_native16.Text,
         {
-          key: chainId,
           style: [
-            styles13.chainErrorItem,
-            { color: theme.colors.error }
+            styles14.chainName,
+            { color: theme.colors.primary }
           ]
         },
-        "\u2022 ",
-        chain?.name ?? chainId,
-        ": ",
-        String(error)
-      );
-    })))
-  ))), availableChains.length > 0 && address && /* @__PURE__ */ import_react30.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react30.default.createElement(
+        "Remove All Chains"
+      ),
+      /* @__PURE__ */ import_react32.default.createElement(CloseIcon, { size: 12, color: theme.colors.primary })
+    )
+  ), Object.keys(chainErrors || {}).length > 0 && /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, { style: styles14.chainErrorsContainer }, /* @__PURE__ */ import_react32.default.createElement(
+    import_react_native16.Text,
+    {
+      style: [
+        styles14.chainErrorsTitle,
+        { color: theme.colors.error }
+      ]
+    },
+    "Errors:"
+  ), Object.entries(chainErrors).map(([chainId, error]) => {
+    const chain = availableChains.find(
+      (c) => c.id === chainId
+    );
+    return /* @__PURE__ */ import_react32.default.createElement(
+      import_react_native16.Text,
+      {
+        key: chainId,
+        style: [
+          styles14.chainErrorItem,
+          { color: theme.colors.error }
+        ]
+      },
+      "\u2022 ",
+      chain?.name ?? chainId,
+      ": ",
+      String(error)
+    );
+  })))), errorMessage || errorMessageProp ? /* @__PURE__ */ import_react32.default.createElement(import_react_native16.View, { style: styles14.errorMessageContainer }, /* @__PURE__ */ import_react32.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react32.default.createElement(AlertDescription, null, errorMessage || errorMessageProp))) : null)), /* @__PURE__ */ import_react32.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, availableChains.length > 0 && address && /* @__PURE__ */ import_react32.default.createElement(
     Button,
     {
       variant: "outline",
@@ -2606,14 +2778,20 @@ function ConnectButton({
       onPress: onSubmitWalletConnect,
       loading: isLoading,
       disabled: isLoading || !!address && availableChains.length > 0 && selectedChains.size === 0,
-      style: styles13.button
+      style: styles14.button
     },
     selectedChains.size > 0 ? `Add ${selectedChains.size} Chain${selectedChains.size > 1 ? "s" : ""}` : "Add Integration"
-  ), /* @__PURE__ */ import_react30.default.createElement(Footer, null)));
+  ), /* @__PURE__ */ import_react32.default.createElement(Footer, null)));
 }
-var styles13 = import_react_native15.StyleSheet.create({
+var styles14 = import_react_native16.StyleSheet.create({
   connectedContainer: {
-    flex: 1
+    flexShrink: 0
+  },
+  chainListWrapper: {
+    marginTop: 8
+  },
+  chainListContent: {
+    paddingBottom: 8
   },
   connectedHeader: {
     marginBottom: 8
@@ -2627,13 +2805,6 @@ var styles13 = import_react_native15.StyleSheet.create({
     marginBottom: 8,
     textAlign: "center"
   },
-  scrollView: {
-    flex: 1
-  },
-  scrollViewContent: {
-    paddingBottom: 40,
-    flexGrow: 1
-  },
   errorMessageContainer: {
     marginTop: 16
   },
@@ -2657,10 +2828,8 @@ var styles13 = import_react_native15.StyleSheet.create({
     // theme.spacing.xl
     paddingBottom: 20,
     width: "100%",
-    overflow: "hidden",
     alignSelf: "center",
-    flexDirection: "column",
-    flex: 1
+    flexDirection: "column"
   },
   chainTitle: {
     fontSize: 14,
@@ -2686,6 +2855,11 @@ var styles13 = import_react_native15.StyleSheet.create({
     // theme.borderRadius.md
     borderWidth: 1
   },
+  chainChipRemoveAll: {
+    marginTop: 6,
+    // theme.spacing.sm - separate from chain list
+    width: "auto"
+  },
   chainName: {
     fontSize: 12,
     fontWeight: "500",
@@ -2760,37 +2934,314 @@ var styles13 = import_react_native15.StyleSheet.create({
 });
 
 // src/molecules/IntegrationForm.tsx
-var import_react31 = __toESM(require("react"));
-var import_react_native16 = require("react-native");
+var import_react34 = __toESM(require("react"));
+var import_react_native18 = require("react-native");
+
+// src/molecules/IntegrationInfo.tsx
+var import_react33 = __toESM(require("react"));
+var import_react_native17 = require("react-native");
+var ChevronDown = ({ isOpen, color }) => /* @__PURE__ */ import_react33.default.createElement(import_react_native17.Text, { style: [styles15.chevron, { color }] }, isOpen ? "\u25BC" : "\u25B6");
+var IntegrationInfo = ({
+  content,
+  type,
+  import_guide
+}) => {
+  const theme = useTheme();
+  const instructionsData = (0, import_react33.useMemo)(
+    () => content?.instructions?.[type] || null,
+    [content, type]
+  );
+  const featuresData = (0, import_react33.useMemo)(
+    () => content?.features?.[type] || [],
+    [content, type]
+  );
+  const gtkData = (0, import_react33.useMemo)(() => content?.gtk?.[type] || [], [content, type]);
+  const hasInstructions = instructionsData && (instructionsData?.content?.length ?? 0) > 0;
+  const hasFeatures = (featuresData?.length ?? 0) > 0;
+  const hasGtk = (gtkData?.length ?? 0) > 0;
+  const defaultSection = hasInstructions ? "instructions" : hasGtk ? "good-to-know" : hasFeatures ? "supported-features" : null;
+  const [openSection, setOpenSection] = (0, import_react33.useState)(defaultSection);
+  const toggleSection = (value) => {
+    setOpenSection((prev) => prev === value ? null : value);
+  };
+  const handleImportGuidePress = () => {
+    if (import_guide) import_react_native17.Linking.openURL(import_guide);
+  };
+  if (!hasInstructions && !hasFeatures && !hasGtk && !import_guide) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react33.default.createElement(import_react_native17.View, { style: styles15.container }, import_guide && /* @__PURE__ */ import_react33.default.createElement(
+    import_react_native17.TouchableOpacity,
+    {
+      onPress: handleImportGuidePress,
+      style: [styles15.importGuide, { borderColor: theme.colors.primary }],
+      activeOpacity: 0.7
+    },
+    /* @__PURE__ */ import_react33.default.createElement(
+      import_react_native17.Text,
+      {
+        style: [styles15.importGuideText, { color: theme.colors.primary }]
+      },
+      "Import Guide"
+    ),
+    /* @__PURE__ */ import_react33.default.createElement(RedirectIcon, { width: 14, height: 14, color: theme.colors.primary })
+  ), hasInstructions && /* @__PURE__ */ import_react33.default.createElement(import_react_native17.View, { style: styles15.accordionItem }, /* @__PURE__ */ import_react33.default.createElement(
+    import_react_native17.TouchableOpacity,
+    {
+      onPress: () => toggleSection("instructions"),
+      style: [
+        styles15.trigger,
+        {
+          borderBottomColor: theme.colors.border,
+          backgroundColor: theme.colors.surface
+        }
+      ],
+      activeOpacity: 0.7
+    },
+    /* @__PURE__ */ import_react33.default.createElement(import_react_native17.Text, { style: [styles15.triggerText, { color: theme.colors.text }] }, "Instructions"),
+    /* @__PURE__ */ import_react33.default.createElement(
+      ChevronDown,
+      {
+        isOpen: openSection === "instructions",
+        color: theme.colors.textSecondary
+      }
+    )
+  ), openSection === "instructions" && /* @__PURE__ */ import_react33.default.createElement(
+    import_react_native17.View,
+    {
+      style: [
+        styles15.content,
+        {
+          backgroundColor: theme.colors.background,
+          borderBottomColor: theme.colors.border
+        }
+      ]
+    },
+    instructionsData?.content && /* @__PURE__ */ import_react33.default.createElement(import_react_native17.View, { style: styles15.list }, instructionsData.content.map(
+      (step, index) => /* @__PURE__ */ import_react33.default.createElement(
+        import_react_native17.Text,
+        {
+          key: index,
+          style: [
+            styles15.listItem,
+            styles15.orderedItem,
+            { color: theme.colors.textSecondary }
+          ]
+        },
+        index + 1,
+        ". ",
+        step
+      )
+    )),
+    instructionsData?.videoLink && /* @__PURE__ */ import_react33.default.createElement(
+      import_react_native17.TouchableOpacity,
+      {
+        onPress: () => import_react_native17.Linking.openURL(instructionsData.videoLink),
+        style: styles15.videoLink,
+        activeOpacity: 0.7
+      },
+      /* @__PURE__ */ import_react33.default.createElement(
+        import_react_native17.Text,
+        {
+          style: [
+            styles15.videoLinkText,
+            { color: theme.colors.primary }
+          ]
+        },
+        "\u25B6 Watch Video Tutorial"
+      )
+    )
+  )), hasGtk && /* @__PURE__ */ import_react33.default.createElement(import_react_native17.View, { style: styles15.accordionItem }, /* @__PURE__ */ import_react33.default.createElement(
+    import_react_native17.TouchableOpacity,
+    {
+      onPress: () => toggleSection("good-to-know"),
+      style: [
+        styles15.trigger,
+        {
+          borderBottomColor: theme.colors.border,
+          backgroundColor: theme.colors.surface
+        }
+      ],
+      activeOpacity: 0.7
+    },
+    /* @__PURE__ */ import_react33.default.createElement(import_react_native17.Text, { style: [styles15.triggerText, { color: theme.colors.text }] }, "Good to know"),
+    /* @__PURE__ */ import_react33.default.createElement(
+      ChevronDown,
+      {
+        isOpen: openSection === "good-to-know",
+        color: theme.colors.textSecondary
+      }
+    )
+  ), openSection === "good-to-know" && /* @__PURE__ */ import_react33.default.createElement(
+    import_react_native17.View,
+    {
+      style: [
+        styles15.content,
+        {
+          backgroundColor: theme.colors.background,
+          borderBottomColor: theme.colors.border
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react33.default.createElement(import_react_native17.View, { style: styles15.list }, gtkData.map((item, index) => /* @__PURE__ */ import_react33.default.createElement(
+      import_react_native17.Text,
+      {
+        key: index,
+        style: [
+          styles15.listItem,
+          styles15.bulletItem,
+          { color: theme.colors.textSecondary }
+        ]
+      },
+      "\u2022 ",
+      item
+    )))
+  )), hasFeatures && /* @__PURE__ */ import_react33.default.createElement(import_react_native17.View, { style: styles15.accordionItem }, /* @__PURE__ */ import_react33.default.createElement(
+    import_react_native17.TouchableOpacity,
+    {
+      onPress: () => toggleSection("supported-features"),
+      style: [
+        styles15.trigger,
+        {
+          borderBottomColor: theme.colors.border,
+          backgroundColor: theme.colors.surface
+        }
+      ],
+      activeOpacity: 0.7
+    },
+    /* @__PURE__ */ import_react33.default.createElement(import_react_native17.Text, { style: [styles15.triggerText, { color: theme.colors.text }] }, "Supported Features"),
+    /* @__PURE__ */ import_react33.default.createElement(
+      ChevronDown,
+      {
+        isOpen: openSection === "supported-features",
+        color: theme.colors.textSecondary
+      }
+    )
+  ), openSection === "supported-features" && /* @__PURE__ */ import_react33.default.createElement(
+    import_react_native17.View,
+    {
+      style: [
+        styles15.content,
+        {
+          backgroundColor: theme.colors.background,
+          borderBottomColor: theme.colors.border
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react33.default.createElement(import_react_native17.View, { style: styles15.list }, featuresData.map((feature, index) => /* @__PURE__ */ import_react33.default.createElement(
+      import_react_native17.Text,
+      {
+        key: index,
+        style: [
+          styles15.listItem,
+          styles15.bulletItem,
+          { color: theme.colors.textSecondary }
+        ]
+      },
+      "\u2022 ",
+      feature
+    )))
+  )));
+};
+var styles15 = import_react_native17.StyleSheet.create({
+  container: {
+    marginTop: 8
+  },
+  importGuide: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-end",
+    gap: 4,
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    marginBottom: 8
+  },
+  importGuideText: {
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  accordionItem: {
+    marginBottom: 4,
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderBottomWidth: 1
+  },
+  triggerText: {
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  chevron: {
+    fontSize: 12
+  },
+  content: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderBottomWidth: 1
+  },
+  list: {
+    paddingLeft: 4
+  },
+  listItem: {
+    fontSize: 13,
+    lineHeight: 20,
+    marginBottom: 6
+  },
+  orderedItem: {
+    marginLeft: 0
+  },
+  bulletItem: {
+    marginLeft: 0
+  },
+  videoLink: {
+    marginTop: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12
+  },
+  videoLinkText: {
+    fontSize: 13,
+    fontWeight: "500"
+  }
+});
+
+// src/molecules/IntegrationForm.tsx
 var IntegrationForm = ({
   metadata,
   onAddHandle,
   open,
   setAddIntegrationMode,
   handleClose,
-  providersList
+  providersList,
+  errorMessage: errorMessageProp,
+  showBackButton = true
 }) => {
   const { clientId, linkToken, user } = useKryptosConnect();
   const theme = useTheme();
-  const [isLoading, setIsLoading] = import_react31.default.useState(false);
-  const [isFetchingChains, setIsFetchingChains] = import_react31.default.useState(false);
-  const [userUsedChains, setUserUsedChains] = import_react31.default.useState([]);
-  const [selectedChains, setSelectedChains] = import_react31.default.useState(
+  const [isLoading, setIsLoading] = import_react34.default.useState(false);
+  const [isFetchingChains, setIsFetchingChains] = import_react34.default.useState(false);
+  const [userUsedChains, setUserUsedChains] = import_react34.default.useState([]);
+  const [selectedChains, setSelectedChains] = import_react34.default.useState(
     /* @__PURE__ */ new Set()
   );
-  const [chainErrors, setChainErrors] = import_react31.default.useState(
+  const [chainErrors, setChainErrors] = import_react34.default.useState(
     {}
   );
-  const [errorMessage, setErrorMessage] = import_react31.default.useState("");
-  const [formValues, setFormValues] = import_react31.default.useState({
+  const [errorMessage, setErrorMessage] = import_react34.default.useState("");
+  const [formValues, setFormValues] = import_react34.default.useState({
     address: "",
     account_name: "",
     api_key: "",
     secret_key: "",
     password: ""
   });
-  const [formErrors, setFormErrors] = import_react31.default.useState({});
-  import_react31.default.useEffect(() => {
+  const [formErrors, setFormErrors] = import_react34.default.useState({});
+  import_react34.default.useEffect(() => {
     if (!formValues.address || !formValues.address.trim()) {
       setUserUsedChains([]);
       setSelectedChains(/* @__PURE__ */ new Set());
@@ -2873,18 +3324,18 @@ var IntegrationForm = ({
         const credentialTestsData = chainsToProcess.map((chain) => {
           const walletId = generateUUID();
           const displaySuffix = primaryField.length >= 8 ? `${primaryField.slice(0, 4)}...${primaryField.slice(-4)}` : primaryField;
-          const alias = `${metadata.id} - ${chain.name} (${displaySuffix})`;
+          const alias = `${metadata.id} - ${chain?.name || ""} (${displaySuffix})`;
           const credential = {
             source: metadata.id,
             credential: {
-              apiKey: formValues.api_key?.trim() || "0",
-              secret: formValues.secret_key?.trim() || "0",
-              accountName: formValues.account_name?.trim() || "0",
-              address: formValues.address?.trim() || "0",
-              password: formValues.password?.trim() || "0",
-              userId: user?.user_id || "0",
-              projectId: metadata?.projectId || "0",
-              privateKey: "0",
+              apiKey: formValues.api_key?.trim() || "",
+              secret: formValues.secret_key?.trim() || "",
+              accountName: formValues.account_name?.trim() || "",
+              address: formValues.address?.trim() || "",
+              password: formValues.password?.trim() || "",
+              userId: user?.user_id || "",
+              projectId: metadata?.projectId || "",
+              privateKey: "",
               alias,
               walletId,
               exchange: metadata.id
@@ -2918,11 +3369,12 @@ var IntegrationForm = ({
               },
               addedOn: (/* @__PURE__ */ new Date()).getTime(),
               default_chain: chain.name,
-              default_chain_logo: chain.logo || null,
+              default_chain_logo: "",
               type: metadata.type,
               isNftSupported: metadata.isEvmWallet || metadata.nftSupport || false,
               chainId: chain?.community_id || "",
-              address: formValues.address
+              address: formValues.address,
+              isCustomWallet: false
             };
             if (formValues.account_name)
               data.accountName = formValues.account_name;
@@ -2932,10 +3384,9 @@ var IntegrationForm = ({
             integrationsToAdd.push(data);
           } else {
             if (result.status === "rejected") {
-              const reason = result.reason;
-              errors[chain.id] = reason?.response?.data?.message || "Failed to process chain";
+              errors[chain.id] = result.reason?.response?.data?.message || "Failed to process chain";
             } else if (result.status === "fulfilled") {
-              errors[chain.id] = result.value?.value?.message || "Failed to verify chain";
+              errors[chain.id] = result.value?.message || "Failed to verify chain";
             }
           }
         });
@@ -2953,14 +3404,14 @@ var IntegrationForm = ({
         const credential = {
           source: metadata.id,
           credential: {
-            apiKey: formValues.api_key?.trim() || "0",
-            secret: formValues.secret_key?.trim() || "0",
-            accountName: formValues.account_name?.trim() || "0",
-            address: formValues.address?.trim() || "0",
-            password: formValues.password?.trim() || "0",
-            userId: user?.user_id || "0",
-            projectId: metadata?.projectId || "0",
-            privateKey: "0",
+            apiKey: formValues.api_key?.trim() || "",
+            secret: formValues.secret_key?.trim() || "",
+            accountName: formValues.account_name?.trim() || "",
+            address: formValues.address?.trim() || "",
+            password: formValues.password?.trim() || "",
+            userId: user?.user_id || "",
+            projectId: metadata?.projectId || "",
+            privateKey: "",
             alias,
             walletId,
             exchange: metadata.id
@@ -2968,9 +3419,7 @@ var IntegrationForm = ({
         };
         const testResult = await testCredentials(linkToken, { ...credential });
         if (!testResult?.valid) {
-          setErrorMessage(
-            testResult?.value?.message || "Credentials are invalid"
-          );
+          setErrorMessage(testResult?.message || "Credentials are invalid");
           return;
         }
         const data = {
@@ -2989,14 +3438,12 @@ var IntegrationForm = ({
             clientId,
             createdAt: (/* @__PURE__ */ new Date()).toISOString()
           },
-          metadata: {
-            environment: "sandbox"
-          },
           addedOn: (/* @__PURE__ */ new Date()).getTime(),
           default_chain: metadata.id,
-          default_chain_logo: null,
+          default_chain_logo: "",
           type: metadata.type,
-          isNftSupported: metadata.isEvmWallet || metadata.nftSupport || false
+          isNftSupported: metadata.isEvmWallet || metadata.nftSupport || false,
+          isCustomWallet: false
         };
         if (metadata.community_id) {
           data.chainId = metadata.community_id;
@@ -3009,7 +3456,7 @@ var IntegrationForm = ({
         integrationsToAdd.push(data);
       }
       if (integrationsToAdd.length > 0) {
-        onAddHandle(integrationsToAdd);
+        await onAddHandle(integrationsToAdd);
         setFormErrors({});
         setFormValues({
           address: "",
@@ -3023,10 +3470,9 @@ var IntegrationForm = ({
         setErrorMessage("No integrations could be added. Please try again.");
       }
     } catch (error) {
-      const err = error;
       console.error(error);
       setErrorMessage(
-        err?.response?.data?.message || "Failed to add integration"
+        error?.response?.data?.message || error?.response?.data?.error || "Failed to add integrations"
       );
     } finally {
       setIsLoading(false);
@@ -3034,24 +3480,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 ? isSvgUrl(metadata.logo) ? /* @__PURE__ */ import_react31.default.createElement(RemoteSvg, { uri: metadata.logo }) : /* @__PURE__ */ import_react31.default.createElement(
-    import_react_native16.Image,
+  const renderLogo = () => metadata.logo ? isSvgUrl(metadata.logo) ? /* @__PURE__ */ import_react34.default.createElement(RemoteSvg, { uri: metadata.logo }) : /* @__PURE__ */ import_react34.default.createElement(
+    import_react_native18.Image,
     {
       source: { uri: metadata.logo },
-      style: styles14.logo,
+      style: styles16.logo,
       resizeMode: "contain"
     }
-  ) : /* @__PURE__ */ import_react31.default.createElement(
-    import_react_native16.View,
+  ) : /* @__PURE__ */ import_react34.default.createElement(
+    import_react_native18.View,
     {
       style: [
-        styles14.logoPlaceholder,
+        styles16.logoPlaceholder,
         { backgroundColor: theme.colors.surface }
       ]
     },
-    /* @__PURE__ */ import_react31.default.createElement(import_react_native16.Text, { style: { color: theme.colors.text } }, metadata.name?.charAt(0) || "?")
+    /* @__PURE__ */ import_react34.default.createElement(import_react_native18.Text, { style: { color: theme.colors.text } }, metadata.name?.charAt(0) || "?")
   );
-  const renderInput = (key, props) => /* @__PURE__ */ import_react31.default.createElement(
+  const renderInput = (key, props) => /* @__PURE__ */ import_react34.default.createElement(
     Input,
     {
       placeholder: props.placeholder,
@@ -3063,33 +3509,33 @@ var IntegrationForm = ({
       secureTextEntry: props.secureTextEntry
     }
   );
-  const renderErrorAlert = () => errorMessage ? /* @__PURE__ */ import_react31.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react31.default.createElement(AlertDescription, null, errorMessage)) : null;
-  const renderChainSelection = () => userUsedChains.length > 0 && formValues.address && /* @__PURE__ */ import_react31.default.createElement(import_react_native16.View, { style: styles14.chainSelection }, /* @__PURE__ */ import_react31.default.createElement(import_react_native16.Text, { style: [styles14.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"), /* @__PURE__ */ import_react31.default.createElement(import_react_native16.ScrollView, { contentContainerStyle: styles14.scrollViewContent }, /* @__PURE__ */ import_react31.default.createElement(import_react_native16.View, { style: styles14.chainChips }, userUsedChains.map((chain) => {
+  const renderErrorAlert = () => errorMessage || errorMessageProp ? /* @__PURE__ */ import_react34.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react34.default.createElement(AlertDescription, null, errorMessage || errorMessageProp)) : null;
+  const renderChainSelection = () => userUsedChains.length > 0 && formValues.address && /* @__PURE__ */ import_react34.default.createElement(import_react_native18.View, { style: styles16.chainSelection }, /* @__PURE__ */ import_react34.default.createElement(import_react_native18.Text, { style: [styles16.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"), /* @__PURE__ */ import_react34.default.createElement(import_react_native18.View, { style: styles16.chainListContent }, /* @__PURE__ */ import_react34.default.createElement(import_react_native18.View, { style: styles16.chainChips }, userUsedChains.map((chain) => {
     const isSelected = selectedChains.has(chain.id);
     const hasError = chainErrors[chain.id];
-    return /* @__PURE__ */ import_react31.default.createElement(
-      import_react_native16.TouchableOpacity,
+    return /* @__PURE__ */ import_react34.default.createElement(
+      import_react_native18.TouchableOpacity,
       {
         onPress: () => toggleChainSelection(chain.id),
-        style: styles14.chainButton,
+        style: styles16.chainButton,
         key: chain.id
       },
-      /* @__PURE__ */ import_react31.default.createElement(
-        import_react_native16.View,
+      /* @__PURE__ */ import_react34.default.createElement(
+        import_react_native18.View,
         {
           style: [
-            styles14.chainChip,
+            styles16.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__ */ import_react31.default.createElement(
-          import_react_native16.Text,
+        /* @__PURE__ */ import_react34.default.createElement(
+          import_react_native18.Text,
           {
             style: [
-              styles14.chainName,
+              styles16.chainName,
               {
                 color: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.text
               }
@@ -3097,28 +3543,55 @@ var IntegrationForm = ({
           },
           chain.name
         ),
-        isSelected ? /* @__PURE__ */ import_react31.default.createElement(
+        isSelected ? /* @__PURE__ */ import_react34.default.createElement(
           CloseIcon,
           {
             size: 12,
             color: hasError ? theme.colors.error : theme.colors.primary
           }
-        ) : /* @__PURE__ */ import_react31.default.createElement(PlusIcon, { size: 12, color: theme.colors.textSecondary })
+        ) : /* @__PURE__ */ import_react34.default.createElement(PlusIcon, { size: 12, color: theme.colors.textSecondary })
       )
     );
-  }))), Object.keys(chainErrors).length > 0 && /* @__PURE__ */ import_react31.default.createElement(import_react_native16.View, { style: styles14.chainErrorsContainer }, /* @__PURE__ */ import_react31.default.createElement(
-    import_react_native16.Text,
+  })), selectedChains.size > 0 && userUsedChains.length > 0 && /* @__PURE__ */ import_react34.default.createElement(
+    import_react_native18.TouchableOpacity,
+    {
+      onPress: () => setSelectedChains(/* @__PURE__ */ new Set()),
+      style: styles16.chainButton,
+      activeOpacity: 0.7
+    },
+    /* @__PURE__ */ import_react34.default.createElement(
+      import_react_native18.View,
+      {
+        style: [
+          styles16.chainChip,
+          styles16.chainChipRemoveAll,
+          {
+            borderWidth: 0
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react34.default.createElement(
+        import_react_native18.Text,
+        {
+          style: [styles16.chainName, { color: theme.colors.primary }]
+        },
+        "Remove All Chains"
+      ),
+      /* @__PURE__ */ import_react34.default.createElement(CloseIcon, { size: 12, color: theme.colors.primary })
+    )
+  )), Object.keys(chainErrors).length > 0 && /* @__PURE__ */ import_react34.default.createElement(import_react_native18.View, { style: styles16.chainErrorsContainer }, /* @__PURE__ */ import_react34.default.createElement(
+    import_react_native18.Text,
     {
-      style: [styles14.chainErrorsTitle, { color: theme.colors.error }]
+      style: [styles16.chainErrorsTitle, { color: theme.colors.error }]
     },
     "Errors:"
   ), Object.entries(chainErrors).map(([chainId, error]) => {
     const chain = userUsedChains.find((c) => c.id === chainId);
-    return /* @__PURE__ */ import_react31.default.createElement(
-      import_react_native16.Text,
+    return /* @__PURE__ */ import_react34.default.createElement(
+      import_react_native18.Text,
       {
         key: chainId,
-        style: [styles14.chainErrorItem, { color: theme.colors.error }]
+        style: [styles16.chainErrorItem, { color: theme.colors.error }]
       },
       "\u2022 ",
       chain?.name,
@@ -3126,7 +3599,7 @@ var IntegrationForm = ({
       error
     );
   })));
-  const renderFormBlock = () => /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(import_react_native16.View, { style: styles14.header }, renderLogo(), /* @__PURE__ */ import_react31.default.createElement(import_react_native16.Text, { style: [styles14.name, { color: theme.colors.text }] }, metadata.name)), renderErrorAlert(), shouldShowFormFields && /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, metadata.address && /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, renderInput("address", {
+  const renderFormBlock = () => /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(import_react_native18.View, { style: styles16.header }, renderLogo(), /* @__PURE__ */ import_react34.default.createElement(import_react_native18.Text, { style: [styles16.name, { color: theme.colors.text }] }, metadata.name)), shouldShowFormFields && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, metadata.address && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, renderInput("address", {
     placeholder: "Enter address",
     autoCapitalize: "none",
     autoCorrect: false
@@ -3142,16 +3615,23 @@ var IntegrationForm = ({
   }), metadata.password && renderInput("password", {
     placeholder: "Enter Password",
     secureTextEntry: true
-  })), hasNoFields && !metadata?.isWalletConnectSupported && /* @__PURE__ */ import_react31.default.createElement(Alert, { variant: "default", style: { marginTop: 12 } }, /* @__PURE__ */ import_react31.default.createElement(AlertDescription, null, "This integration is not supported here yet \u2014 try using it through our Kryptos Platform.")));
+  })), hasNoFields && !metadata?.isWalletConnectSupported && /* @__PURE__ */ import_react34.default.createElement(Alert, { variant: "default", style: { marginTop: 12 } }, /* @__PURE__ */ import_react34.default.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__ */ import_react31.default.createElement(import_react31.default.Fragment, null, !metadata?.isWalletConnectSupported ? /* @__PURE__ */ import_react31.default.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ import_react31.default.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ import_react31.default.createElement(import_react_native16.View, { style: styles14.headerContent }, /* @__PURE__ */ import_react31.default.createElement(
-    import_react_native16.TouchableOpacity,
+  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, !metadata?.isWalletConnectSupported ? /* @__PURE__ */ import_react34.default.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ import_react34.default.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ import_react34.default.createElement(import_react_native18.View, { style: styles16.headerContent }, showBackButton && /* @__PURE__ */ import_react34.default.createElement(
+    import_react_native18.TouchableOpacity,
     {
       onPress: () => setAddIntegrationMode(null),
-      style: styles14.backButton
+      style: styles16.backButton
     },
-    /* @__PURE__ */ import_react31.default.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-  ), /* @__PURE__ */ import_react31.default.createElement(import_react_native16.Text, { style: [styles14.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ import_react31.default.createElement(ModalBody, { scrollable: false, style: styles14.contentContainer }, renderFormBlock()), !hasNoFields && /* @__PURE__ */ import_react31.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react31.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
+  ), /* @__PURE__ */ import_react34.default.createElement(import_react_native18.Text, { style: [styles16.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ import_react34.default.createElement(ModalBody, { scrollable: true, style: styles16.contentContainer }, renderFormBlock(), renderErrorAlert(), !metadata?.isWalletConnectSupported && metadata?.walletLimitations && /* @__PURE__ */ import_react34.default.createElement(
+    IntegrationInfo,
+    {
+      content: metadata.walletLimitations,
+      type: "api",
+      import_guide: metadata.import_guide
+    }
+  )), !hasNoFields && /* @__PURE__ */ import_react34.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react34.default.createElement(
     Button,
     {
       variant: "outline",
@@ -3159,10 +3639,10 @@ var IntegrationForm = ({
       onPress: handleSubmit,
       loading: isLoading,
       disabled: isLoading || isFetchingChains || !!formValues.address && userUsedChains.length > 0 && selectedChains.size === 0,
-      style: styles14.button
+      style: styles16.button
     },
     addIntegrationLabel
-  ), /* @__PURE__ */ import_react31.default.createElement(Footer, null))) : /* @__PURE__ */ import_react31.default.createElement(
+  ), /* @__PURE__ */ import_react34.default.createElement(Footer, null))) : /* @__PURE__ */ import_react34.default.createElement(
     WalletConnectComponent,
     {
       integration: metadata,
@@ -3171,14 +3651,14 @@ var IntegrationForm = ({
       modalOpen: open,
       setAddIntegrationMode,
       handleClose,
-      providersList
+      providersList,
+      errorMessage: errorMessageProp
     }
   ));
 };
-var styles14 = import_react_native16.StyleSheet.create({
-  scrollViewContent: {
-    flexGrow: 1,
-    paddingBottom: 100
+var styles16 = import_react_native18.StyleSheet.create({
+  chainListContent: {
+    paddingBottom: 8
   },
   headerContent: {
     flexDirection: "row",
@@ -3203,10 +3683,8 @@ var styles14 = import_react_native16.StyleSheet.create({
     // theme.spacing.xl
     paddingBottom: 40,
     width: "100%",
-    overflow: "hidden",
     alignSelf: "center",
-    flexDirection: "column",
-    flex: 1
+    flexDirection: "column"
   },
   header: {
     flexDirection: "row",
@@ -3238,7 +3716,7 @@ var styles14 = import_react_native16.StyleSheet.create({
     textTransform: "capitalize"
   },
   chainSelection: {
-    marginBottom: 16
+    marginBottom: 8
     // theme.spacing.lg
   },
   chainTitle: {
@@ -3265,6 +3743,11 @@ var styles14 = import_react_native16.StyleSheet.create({
     // theme.borderRadius.md
     borderWidth: 1
   },
+  chainChipRemoveAll: {
+    marginTop: 6,
+    // theme.spacing.sm - separate from chain list
+    width: "auto"
+  },
   chainName: {
     fontSize: 12,
     fontWeight: "500",
@@ -3300,18 +3783,23 @@ var styles14 = import_react_native16.StyleSheet.create({
 var Integration = ({
   open,
   onSuccess,
-  onClose
+  onClose,
+  integrationDetails
 }) => {
   const { appName, linkToken } = useKryptosConnect();
   const theme = useTheme();
-  const [addIntegrationMode, setAddIntegrationMode] = import_react32.default.useState(null);
-  const [query, setQuery] = import_react32.default.useState("");
-  const [activeTab, setActiveTab] = import_react32.default.useState("all");
-  const [supportedProviders, setSupportedProviders] = import_react32.default.useState([]);
-  const [addedIntegrations, setAddedIntegrations] = import_react32.default.useState([]);
-  const [existingIntegrations, setExistingIntegrations] = import_react32.default.useState([]);
-  const [isLoading, setIsLoading] = import_react32.default.useState(false);
-  const [errorMessage, setErrorMessage] = import_react32.default.useState("");
+  const [addIntegrationMode, setAddIntegrationMode] = import_react35.default.useState(integrationDetails || null);
+  const [query, setQuery] = import_react35.default.useState("");
+  const [activeTab, setActiveTab] = import_react35.default.useState("all");
+  const [supportedProviders, setSupportedProviders] = import_react35.default.useState([]);
+  const [existingIntegrations, setExistingIntegrations] = import_react35.default.useState([]);
+  const [isLoading, setIsLoading] = import_react35.default.useState(false);
+  const [errorMessage, setErrorMessage] = import_react35.default.useState("");
+  import_react35.default.useEffect(() => {
+    if (integrationDetails) {
+      setAddIntegrationMode(integrationDetails);
+    }
+  }, [integrationDetails]);
   const handleClose = () => {
     onClose();
   };
@@ -3322,7 +3810,7 @@ var Integration = ({
     } catch (error) {
       const err = error;
       setErrorMessage(
-        err?.response?.data?.message || "Failed to fetch existing integrations"
+        err?.response?.data?.message || err?.response?.data?.error || "Failed to fetch existing integrations"
       );
       console.error(error);
     }
@@ -3335,38 +3823,38 @@ var Integration = ({
     } catch (error) {
       const err = error;
       setErrorMessage(
-        err?.response?.data?.message || "Failed to fetch supported providers"
+        err?.response?.data?.message || err?.response?.data?.error || "Failed to fetch supported providers"
       );
       console.error(error);
     } finally {
       setIsLoading(false);
     }
   };
-  import_react32.default.useEffect(() => {
+  import_react35.default.useEffect(() => {
     if (linkToken) {
       fetchSupportedProviders();
       fetchExistingIntegrations();
     }
   }, [linkToken]);
-  const isIntegrationAdded = import_react32.default.useCallback(
+  const isIntegrationAdded = (0, import_react35.useCallback)(
     (publicName) => {
-      const integrations = [...addedIntegrations, ...existingIntegrations];
+      const integrations = [...existingIntegrations];
       return integrations.some(
         (integration) => integration.public_name === publicName
       );
     },
-    [addedIntegrations, existingIntegrations]
+    [existingIntegrations]
   );
-  const getIntegrationCount = import_react32.default.useCallback(
+  const getIntegrationCount = (0, import_react35.useCallback)(
     (publicName) => {
-      const integrations = [...addedIntegrations, ...existingIntegrations];
+      const integrations = [...existingIntegrations];
       return integrations.filter(
         (integration) => integration.public_name === publicName
       ).length;
     },
-    [addedIntegrations, existingIntegrations]
+    [existingIntegrations]
   );
-  const filteredResults = import_react32.default.useMemo(() => {
+  const filteredResults = import_react35.default.useMemo(() => {
     let filtered = supportedProviders;
     if (activeTab !== "all") {
       filtered = filtered.filter((provider) => provider.type === activeTab);
@@ -3384,33 +3872,41 @@ var Integration = ({
       return (a.name ?? "").localeCompare(b.name ?? "");
     });
   }, [query, supportedProviders, getIntegrationCount, activeTab]);
-  const handleAddIntegration = async () => {
+  const handleAddIntegration = async (integrationsList) => {
     try {
       setIsLoading(true);
-      const integrations = [...addedIntegrations, ...existingIntegrations];
+      const integrations = integrationsList ? integrationsList : [...existingIntegrations];
       if (integrations.length === 0) {
         setErrorMessage("Please add at least one integration");
-      } else if (addedIntegrations.length === 0) {
-        onSuccess();
       } else {
-        await addUserIntegration(linkToken, addedIntegrations);
-        onSuccess();
+        await addUserIntegration(linkToken, integrations);
+        if (integrationDetails) {
+          onSuccess();
+        }
       }
+      await fetchExistingIntegrations();
+      setAddIntegrationMode(null);
     } catch (error) {
-      const err = error;
-      console.error(error);
-      setErrorMessage(
-        err?.response?.data?.message || "Failed to add integrations"
-      );
+      const message = error?.response?.data?.message || error?.response?.data?.error || "Failed to add integrations";
+      setErrorMessage(message);
+      throw error;
     } finally {
       setIsLoading(false);
     }
   };
-  const renderProviderItem = ({ item }) => /* @__PURE__ */ import_react32.default.createElement(
-    import_react_native17.TouchableOpacity,
+  const handleContinue = () => {
+    const integrations = [...existingIntegrations];
+    if (integrations.length === 0) {
+      setErrorMessage("Please add at least one integration");
+      return;
+    }
+    onSuccess();
+  };
+  const renderProviderItem = ({ item }) => /* @__PURE__ */ import_react35.default.createElement(
+    import_react_native19.TouchableOpacity,
     {
       style: [
-        styles15.providerItem,
+        styles17.providerItem,
         {
           backgroundColor: theme.colors.surface,
           borderColor: theme.colors.border
@@ -3419,44 +3915,44 @@ var Integration = ({
       onPress: () => setAddIntegrationMode(item),
       activeOpacity: 0.7
     },
-    /* @__PURE__ */ import_react32.default.createElement(import_react_native17.View, { style: styles15.providerInfo }, item?.logo ? isSvgUrl(item?.logo) ? /* @__PURE__ */ import_react32.default.createElement(RemoteSvg, { uri: item?.logo }) : /* @__PURE__ */ import_react32.default.createElement(
-      import_react_native17.Image,
+    /* @__PURE__ */ import_react35.default.createElement(import_react_native19.View, { style: styles17.providerInfo }, item?.logo ? isSvgUrl(item?.logo) ? /* @__PURE__ */ import_react35.default.createElement(RemoteSvg, { uri: item?.logo }) : /* @__PURE__ */ import_react35.default.createElement(
+      import_react_native19.Image,
       {
         source: { uri: item?.logo },
-        style: styles15.providerLogo,
+        style: styles17.providerLogo,
         resizeMode: "contain"
       }
-    ) : /* @__PURE__ */ import_react32.default.createElement(
-      import_react_native17.View,
+    ) : /* @__PURE__ */ import_react35.default.createElement(
+      import_react_native19.View,
       {
         style: [
-          styles15.providerLogoPlaceholder,
+          styles17.providerLogoPlaceholder,
           { backgroundColor: theme.colors.surfaceSecondary }
         ]
       },
-      /* @__PURE__ */ import_react32.default.createElement(import_react_native17.Text, { style: { color: theme.colors.text } }, item?.name?.charAt(0) || "?")
-    ), /* @__PURE__ */ import_react32.default.createElement(import_react_native17.Text, { style: [styles15.providerName, { color: theme.colors.text }] }, item?.name + "\u200B")),
-    isIntegrationAdded(item?.public_name) && /* @__PURE__ */ import_react32.default.createElement(import_react_native17.View, { style: styles15.providerStatus }, /* @__PURE__ */ import_react32.default.createElement(CheckCircleIcon, { size: 18, color: theme.colors.success }), /* @__PURE__ */ import_react32.default.createElement(
-      import_react_native17.Text,
+      /* @__PURE__ */ import_react35.default.createElement(import_react_native19.Text, { style: { color: theme.colors.text } }, item?.name?.charAt(0) || "?")
+    ), /* @__PURE__ */ import_react35.default.createElement(import_react_native19.Text, { style: [styles17.providerName, { color: theme.colors.text }] }, item?.name + "\u200B")),
+    isIntegrationAdded(item?.public_name) && /* @__PURE__ */ import_react35.default.createElement(import_react_native19.View, { style: styles17.providerStatus }, /* @__PURE__ */ import_react35.default.createElement(CheckCircleIcon, { size: 18, color: theme.colors.success }), /* @__PURE__ */ import_react35.default.createElement(
+      import_react_native19.Text,
       {
         style: [
-          styles15.providerCount,
+          styles17.providerCount,
           { color: theme.colors.textSecondary }
         ]
       },
       getIntegrationCount(item?.public_name)
     ))
   );
-  const renderSkeletonItem = () => /* @__PURE__ */ import_react32.default.createElement(SkeletonItem_default, null);
-  return /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, !addIntegrationMode ? /* @__PURE__ */ import_react32.default.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ import_react32.default.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ import_react32.default.createElement(import_react_native17.View, { style: styles15.headerContent }, addIntegrationMode && /* @__PURE__ */ import_react32.default.createElement(
-    import_react_native17.TouchableOpacity,
+  const renderSkeletonItem = () => /* @__PURE__ */ import_react35.default.createElement(SkeletonItem_default, null);
+  return /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, !addIntegrationMode ? /* @__PURE__ */ import_react35.default.createElement(Modal, { isOpen: open, onClose: handleClose, size: "full" }, /* @__PURE__ */ import_react35.default.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ import_react35.default.createElement(import_react_native19.View, { style: styles17.headerContent }, addIntegrationMode && /* @__PURE__ */ import_react35.default.createElement(
+    import_react_native19.TouchableOpacity,
     {
       onPress: () => setAddIntegrationMode(null),
-      style: styles15.backButton
+      style: styles17.backButton
     },
-    /* @__PURE__ */ import_react32.default.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
-  ), /* @__PURE__ */ import_react32.default.createElement(import_react_native17.Text, { style: [styles15.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ import_react32.default.createElement(ModalBody, { scrollable: false, style: styles15.noPadding }, /* @__PURE__ */ import_react32.default.createElement(import_react_native17.View, { style: styles15.container }, /* @__PURE__ */ import_react32.default.createElement(import_react_native17.View, { style: styles15.headerSection }, /* @__PURE__ */ import_react32.default.createElement(ConnectLogo, null), /* @__PURE__ */ import_react32.default.createElement(import_react_native17.Text, { style: [styles15.title, { color: theme.colors.text }] }, "Select an account to link to ", appName)), /* @__PURE__ */ import_react32.default.createElement(
-    import_react_native17.View,
+    /* @__PURE__ */ import_react35.default.createElement(ArrowLeftIcon, { size: 20, color: theme.colors.text })
+  ), /* @__PURE__ */ import_react35.default.createElement(import_react_native19.Text, { style: [styles17.headerTitle, { color: theme.colors.text }] }, "Integration"))), /* @__PURE__ */ import_react35.default.createElement(ModalBody, { scrollable: false, style: styles17.noPadding }, /* @__PURE__ */ import_react35.default.createElement(import_react_native19.View, { style: styles17.container }, /* @__PURE__ */ import_react35.default.createElement(import_react_native19.View, { style: styles17.headerSection }, /* @__PURE__ */ import_react35.default.createElement(ConnectLogo, null), /* @__PURE__ */ import_react35.default.createElement(import_react_native19.Text, { style: [styles17.title, { color: theme.colors.text }] }, "Select an account to link to ", appName)), /* @__PURE__ */ import_react35.default.createElement(
+    import_react_native19.View,
     {
       style: {
         paddingHorizontal: theme.spacing.xl,
@@ -3465,26 +3961,26 @@ var Integration = ({
         zIndex: 10
       }
     },
-    /* @__PURE__ */ import_react32.default.createElement(
+    /* @__PURE__ */ import_react35.default.createElement(
       Input,
       {
         value: query,
         onChangeText: setQuery,
         placeholder: "Search Integrations...",
-        containerStyle: styles15.searchInput
+        containerStyle: styles17.searchInput
       }
     ),
-    /* @__PURE__ */ import_react32.default.createElement(import_react_native17.View, { style: styles15.tabsContainer }, [
+    /* @__PURE__ */ import_react35.default.createElement(import_react_native19.View, { style: styles17.tabsContainer }, [
       { label: "All", value: "all" },
       { label: "Exchanges", value: "exchange" },
       { label: "Blockchains", value: "blockchain" },
       { label: "Wallets", value: "wallet" }
-    ].map((tab) => /* @__PURE__ */ import_react32.default.createElement(
-      import_react_native17.TouchableOpacity,
+    ].map((tab) => /* @__PURE__ */ import_react35.default.createElement(
+      import_react_native19.TouchableOpacity,
       {
         key: tab.value,
         style: [
-          styles15.tab,
+          styles17.tab,
           {
             backgroundColor: activeTab === tab.value ? theme.colors.primary : theme.colors.surface,
             borderColor: theme.colors.border
@@ -3496,11 +3992,11 @@ var Integration = ({
           );
         }
       },
-      /* @__PURE__ */ import_react32.default.createElement(
-        import_react_native17.Text,
+      /* @__PURE__ */ import_react35.default.createElement(
+        import_react_native19.Text,
         {
           style: [
-            styles15.tabText,
+            styles17.tabText,
             {
               color: activeTab === tab.value ? theme.colors.white : theme.colors.text
             }
@@ -3509,8 +4005,8 @@ var Integration = ({
         tab.label
       )
     )))
-  ), /* @__PURE__ */ import_react32.default.createElement(
-    import_react_native17.FlatList,
+  ), /* @__PURE__ */ import_react35.default.createElement(
+    import_react_native19.FlatList,
     {
       data: isLoading ? Array.from({ length: 8 }, (_, i) => ({
         id: `skeleton-${i}`,
@@ -3520,50 +4016,53 @@ var Integration = ({
       })) : filteredResults,
       keyExtractor: (item, index) => isLoading ? item.id : `provider-${item.id}-${index}`,
       renderItem: isLoading ? renderSkeletonItem : renderProviderItem,
-      style: styles15.list,
+      style: styles17.list,
       contentContainerStyle: [
-        styles15.listContent,
+        styles17.listContent,
         { paddingHorizontal: theme.spacing.xl }
       ],
       showsVerticalScrollIndicator: false,
-      ListEmptyComponent: /* @__PURE__ */ import_react32.default.createElement(import_react_native17.View, { style: styles15.emptyContainer }, !isLoading && /* @__PURE__ */ import_react32.default.createElement(
-        import_react_native17.Text,
+      ListEmptyComponent: /* @__PURE__ */ import_react35.default.createElement(import_react_native19.View, { style: styles17.emptyContainer }, !isLoading && /* @__PURE__ */ import_react35.default.createElement(
+        import_react_native19.Text,
         {
           style: [
-            styles15.emptyText,
+            styles17.emptyText,
             { color: theme.colors.textSecondary }
           ]
         },
         query ? "No search results found" : "No supported integrations found"
-      ))
+      )),
+      ListFooterComponent: errorMessage ? /* @__PURE__ */ import_react35.default.createElement(import_react_native19.View, { style: styles17.errorContainer }, /* @__PURE__ */ import_react35.default.createElement(Alert, { variant: "destructive", style: styles17.errorAlert }, /* @__PURE__ */ import_react35.default.createElement(AlertDescription, null, errorMessage))) : null
     }
-  ), errorMessage && /* @__PURE__ */ import_react32.default.createElement(import_react_native17.View, { style: styles15.errorContainer }, /* @__PURE__ */ import_react32.default.createElement(Alert, { variant: "destructive", style: styles15.errorAlert }, /* @__PURE__ */ import_react32.default.createElement(AlertDescription, null, errorMessage))))), /* @__PURE__ */ import_react32.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react32.default.createElement(
+  ))), /* @__PURE__ */ import_react35.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, filteredResults && filteredResults.length > 0 && /* @__PURE__ */ import_react35.default.createElement(
     Button,
     {
       variant: "outline",
       size: "lg",
-      onPress: handleAddIntegration,
+      onPress: handleContinue,
       loading: isLoading,
       disabled: isLoading,
-      style: styles15.continueButton
+      style: styles17.continueButton
     },
     "Continue"
-  ), /* @__PURE__ */ import_react32.default.createElement(Footer, null))) : /* @__PURE__ */ import_react32.default.createElement(
+  ), /* @__PURE__ */ import_react35.default.createElement(Footer, null))) : /* @__PURE__ */ import_react35.default.createElement(
     IntegrationForm,
     {
       metadata: addIntegrationMode,
-      onAddHandle: (integrations) => {
-        setAddedIntegrations((prev) => [...prev, ...integrations]);
-        setAddIntegrationMode(null);
+      onAddHandle: async (int) => {
+        const integrationsList = [...int];
+        await handleAddIntegration(integrationsList);
       },
       open: !!addIntegrationMode,
       setAddIntegrationMode,
       handleClose,
-      providersList: supportedProviders
+      providersList: supportedProviders,
+      errorMessage,
+      showBackButton: !integrationDetails
     }
   ));
 };
-var styles15 = import_react_native17.StyleSheet.create({
+var styles17 = import_react_native19.StyleSheet.create({
   headerContent: {
     flexDirection: "row",
     alignItems: "center"
@@ -3674,12 +4173,12 @@ var styles15 = import_react_native17.StyleSheet.create({
     width: "100%"
   },
   errorContainer: {
-    paddingHorizontal: 20
+    paddingHorizontal: 20,
     // theme.spacing.xl
+    marginBottom: 12
   },
   errorAlert: {
-    marginTop: 16
-    // theme.spacing.lg - consistent alert spacing
+    marginTop: 8
   },
   tabsContainer: {
     flexDirection: "row",
@@ -3706,21 +4205,21 @@ var styles15 = import_react_native17.StyleSheet.create({
 });
 
 // src/molecules/OTPVerify.tsx
-var import_react33 = __toESM(require("react"));
-var import_react_native18 = require("react-native");
+var import_react36 = __toESM(require("react"));
+var import_react_native20 = require("react-native");
 var OTPVerify = ({
   open,
   onSuccess,
   onClose
 }) => {
   const theme = useTheme();
-  const [otp, setOtp] = import_react33.default.useState("");
+  const [otp, setOtp] = import_react36.default.useState("");
   const { linkToken, clientId, email, setUser } = useKryptosConnect();
-  const [isLoading, setIsLoading] = import_react33.default.useState(false);
-  const [isResending, setIsResending] = import_react33.default.useState(false);
-  const [resendCooldown, setResendCooldown] = import_react33.default.useState(0);
-  const [errorMessage, setErrorMessage] = import_react33.default.useState("");
-  const [successMessage, setSuccessMessage] = import_react33.default.useState("");
+  const [isLoading, setIsLoading] = import_react36.default.useState(false);
+  const [isResending, setIsResending] = import_react36.default.useState(false);
+  const [resendCooldown, setResendCooldown] = import_react36.default.useState(0);
+  const [errorMessage, setErrorMessage] = import_react36.default.useState("");
+  const [successMessage, setSuccessMessage] = import_react36.default.useState("");
   const handleSubmit = async () => {
     if (otp.length !== 6) return;
     setIsLoading(true);
@@ -3771,7 +4270,7 @@ var OTPVerify = ({
     setSuccessMessage("");
     setOtp("");
   };
-  import_react33.default.useEffect(() => {
+  import_react36.default.useEffect(() => {
     if (resendCooldown > 0) {
       const timer = setTimeout(() => {
         setResendCooldown(resendCooldown - 1);
@@ -3780,20 +4279,20 @@ var OTPVerify = ({
     }
     return void 0;
   }, [resendCooldown]);
-  return /* @__PURE__ */ import_react33.default.createElement(Modal, { isOpen: open, onClose: handleClose, size: "lg" }, /* @__PURE__ */ import_react33.default.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ import_react33.default.createElement(import_react_native18.View, { style: styles16.headerContent }, /* @__PURE__ */ import_react33.default.createElement(import_react_native18.Text, { style: [styles16.headerTitle, { color: theme.colors.text }] }, "OTP Verification"))), /* @__PURE__ */ import_react33.default.createElement(ModalBody, null, /* @__PURE__ */ import_react33.default.createElement(import_react_native18.View, { style: styles16.container }, /* @__PURE__ */ import_react33.default.createElement(ConnectLogo, null), /* @__PURE__ */ import_react33.default.createElement(import_react_native18.View, { style: styles16.emailInfo }, /* @__PURE__ */ import_react33.default.createElement(
-    import_react_native18.Text,
+  return /* @__PURE__ */ import_react36.default.createElement(Modal, { isOpen: open, onClose: handleClose, size: "lg" }, /* @__PURE__ */ import_react36.default.createElement(ModalHeader, { onClose: handleClose }, /* @__PURE__ */ import_react36.default.createElement(import_react_native20.View, { style: styles18.headerContent }, /* @__PURE__ */ import_react36.default.createElement(import_react_native20.Text, { style: [styles18.headerTitle, { color: theme.colors.text }] }, "OTP Verification"))), /* @__PURE__ */ import_react36.default.createElement(ModalBody, null, /* @__PURE__ */ import_react36.default.createElement(import_react_native20.View, { style: styles18.container }, /* @__PURE__ */ import_react36.default.createElement(ConnectLogo, null), /* @__PURE__ */ import_react36.default.createElement(import_react_native20.View, { style: styles18.emailInfo }, /* @__PURE__ */ import_react36.default.createElement(
+    import_react_native20.Text,
     {
-      style: [styles16.infoText, { color: theme.colors.textSecondary }]
+      style: [styles18.infoText, { color: theme.colors.textSecondary }]
     },
     "We have sent a verification code to"
-  ), /* @__PURE__ */ import_react33.default.createElement(import_react_native18.Text, { style: [styles16.emailText, { color: theme.colors.text }] }, email)), /* @__PURE__ */ import_react33.default.createElement(
+  ), /* @__PURE__ */ import_react36.default.createElement(import_react_native20.Text, { style: [styles18.emailText, { color: theme.colors.text }] }, email)), /* @__PURE__ */ import_react36.default.createElement(
     OTP,
     {
       onComplete: handleOtpComplete,
       length: 6,
       setErrorMessage
     }
-  ), errorMessage ? /* @__PURE__ */ import_react33.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react33.default.createElement(AlertDescription, null, errorMessage)) : null, successMessage ? /* @__PURE__ */ import_react33.default.createElement(Alert, { variant: "default" }, /* @__PURE__ */ import_react33.default.createElement(AlertDescription, null, successMessage)) : null, /* @__PURE__ */ import_react33.default.createElement(
+  ), errorMessage ? /* @__PURE__ */ import_react36.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react36.default.createElement(AlertDescription, null, errorMessage)) : null, successMessage ? /* @__PURE__ */ import_react36.default.createElement(Alert, { variant: "default" }, /* @__PURE__ */ import_react36.default.createElement(AlertDescription, null, successMessage)) : null, /* @__PURE__ */ import_react36.default.createElement(
     Button,
     {
       variant: "outline",
@@ -3801,44 +4300,44 @@ var OTPVerify = ({
       onPress: handleSubmit,
       loading: isLoading,
       disabled: otp.length !== 6 || isLoading,
-      style: styles16.button
+      style: styles18.button
     },
     "Continue"
-  ), /* @__PURE__ */ import_react33.default.createElement(
-    import_react_native18.TouchableOpacity,
+  ), /* @__PURE__ */ import_react36.default.createElement(
+    import_react_native20.TouchableOpacity,
     {
       onPress: handleResendOtp,
       disabled: resendCooldown > 0 || isResending,
-      style: styles16.resendContainer
+      style: styles18.resendContainer
     },
-    isResending ? /* @__PURE__ */ import_react33.default.createElement(import_react_native18.View, { style: styles16.resendLoading }, /* @__PURE__ */ import_react33.default.createElement(LoaderIcon, { size: 16, color: theme.colors.primary }), /* @__PURE__ */ import_react33.default.createElement(
-      import_react_native18.Text,
+    isResending ? /* @__PURE__ */ import_react36.default.createElement(import_react_native20.View, { style: styles18.resendLoading }, /* @__PURE__ */ import_react36.default.createElement(LoaderIcon, { size: 16, color: theme.colors.primary }), /* @__PURE__ */ import_react36.default.createElement(
+      import_react_native20.Text,
       {
-        style: [styles16.resendText, { color: theme.colors.primary }]
+        style: [styles18.resendText, { color: theme.colors.primary }]
       },
       " ",
       "Sending..."
-    )) : resendCooldown > 0 ? /* @__PURE__ */ import_react33.default.createElement(
-      import_react_native18.Text,
+    )) : resendCooldown > 0 ? /* @__PURE__ */ import_react36.default.createElement(
+      import_react_native20.Text,
       {
         style: [
-          styles16.resendText,
+          styles18.resendText,
           { color: theme.colors.textSecondary }
         ]
       },
       "Resend OTP in ",
       resendCooldown,
       "s"
-    ) : /* @__PURE__ */ import_react33.default.createElement(
-      import_react_native18.Text,
+    ) : /* @__PURE__ */ import_react36.default.createElement(
+      import_react_native20.Text,
       {
-        style: [styles16.resendText, { color: theme.colors.primary }]
+        style: [styles18.resendText, { color: theme.colors.primary }]
       },
       "Resend OTP"
     )
-  ))), /* @__PURE__ */ import_react33.default.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ import_react33.default.createElement(Footer, null)));
+  ))), /* @__PURE__ */ import_react36.default.createElement(ModalFooter, { style: { paddingVertical: 0 } }, /* @__PURE__ */ import_react36.default.createElement(Footer, null)));
 };
-var styles16 = import_react_native18.StyleSheet.create({
+var styles18 = import_react_native20.StyleSheet.create({
   headerContent: {
     flexDirection: "row",
     alignItems: "center"
@@ -3897,8 +4396,8 @@ var styles16 = import_react_native18.StyleSheet.create({
 });
 
 // src/molecules/Permissions.tsx
-var import_react34 = __toESM(require("react"));
-var import_react_native19 = require("react-native");
+var import_react37 = __toESM(require("react"));
+var import_react_native21 = require("react-native");
 var Permissions = ({
   open,
   onClose,
@@ -3906,8 +4405,8 @@ var Permissions = ({
 }) => {
   const { appName, linkToken, setUserConsent } = useKryptosConnect();
   const theme = useTheme();
-  const [isLoading, setIsLoading] = import_react34.default.useState(false);
-  const [errorMessage, setErrorMessage] = import_react34.default.useState("");
+  const [isLoading, setIsLoading] = import_react37.default.useState(false);
+  const [errorMessage, setErrorMessage] = import_react37.default.useState("");
   const handleConsentClick = async () => {
     try {
       setIsLoading(true);
@@ -3930,42 +4429,42 @@ var Permissions = ({
     "Access your transaction history and trading activity",
     "Keep this data updated and accessible when you're offline"
   ];
-  return /* @__PURE__ */ import_react34.default.createElement(Modal, { isOpen: open, onClose, size: "xl" }, /* @__PURE__ */ import_react34.default.createElement(ModalHeader, { onClose }, "Permissions"), /* @__PURE__ */ import_react34.default.createElement(ModalBody, null, /* @__PURE__ */ import_react34.default.createElement(import_react_native19.View, { style: styles17.container }, /* @__PURE__ */ import_react34.default.createElement(ConnectLogo, null), errorMessage ? /* @__PURE__ */ import_react34.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react34.default.createElement(AlertDescription, null, errorMessage)) : null, /* @__PURE__ */ import_react34.default.createElement(import_react_native19.View, { style: styles17.permissionsList }, /* @__PURE__ */ import_react34.default.createElement(
-    import_react_native19.Text,
+  return /* @__PURE__ */ import_react37.default.createElement(Modal, { isOpen: open, onClose, size: "xl" }, /* @__PURE__ */ import_react37.default.createElement(ModalHeader, { onClose }, "Permissions"), /* @__PURE__ */ import_react37.default.createElement(ModalBody, null, /* @__PURE__ */ import_react37.default.createElement(import_react_native21.View, { style: styles19.container }, /* @__PURE__ */ import_react37.default.createElement(ConnectLogo, null), errorMessage ? /* @__PURE__ */ import_react37.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react37.default.createElement(AlertDescription, null, errorMessage)) : null, /* @__PURE__ */ import_react37.default.createElement(import_react_native21.View, { style: styles19.permissionsList }, /* @__PURE__ */ import_react37.default.createElement(
+    import_react_native21.Text,
     {
-      style: [styles17.subtitle, { color: theme.colors.textSecondary }]
+      style: [styles19.subtitle, { color: theme.colors.textSecondary }]
     },
     "Allow ",
     appName,
     " to:"
-  ), permissionItems.map((item, index) => /* @__PURE__ */ import_react34.default.createElement(import_react_native19.View, { key: `permission-${index}`, style: styles17.permissionItem }, /* @__PURE__ */ import_react34.default.createElement(import_react_native19.Text, { style: [styles17.bullet, { color: theme.colors.primary }] }, index + 1, "."), /* @__PURE__ */ import_react34.default.createElement(
-    import_react_native19.Text,
+  ), permissionItems.map((item, index) => /* @__PURE__ */ import_react37.default.createElement(import_react_native21.View, { key: `permission-${index}`, style: styles19.permissionItem }, /* @__PURE__ */ import_react37.default.createElement(import_react_native21.Text, { style: [styles19.bullet, { color: theme.colors.primary }] }, index + 1, "."), /* @__PURE__ */ import_react37.default.createElement(
+    import_react_native21.Text,
     {
-      style: [styles17.permissionText, { color: theme.colors.text }]
+      style: [styles19.permissionText, { color: theme.colors.text }]
     },
     item
-  )))), /* @__PURE__ */ import_react34.default.createElement(
-    import_react_native19.View,
+  )))), /* @__PURE__ */ import_react37.default.createElement(
+    import_react_native21.View,
     {
       style: [
-        styles17.infoBox,
+        styles19.infoBox,
         {
           backgroundColor: theme.colors.surface,
           borderColor: theme.colors.border
         }
       ]
     },
-    /* @__PURE__ */ import_react34.default.createElement(
-      import_react_native19.Text,
+    /* @__PURE__ */ import_react37.default.createElement(
+      import_react_native21.Text,
       {
-        style: [styles17.infoText, { color: theme.colors.textSecondary }]
+        style: [styles19.infoText, { color: theme.colors.textSecondary }]
       },
       "By selecting",
       " ",
-      /* @__PURE__ */ import_react34.default.createElement(import_react_native19.Text, { style: { fontWeight: "600", color: theme.colors.text } }, "'Allow'"),
+      /* @__PURE__ */ import_react37.default.createElement(import_react_native21.Text, { style: { fontWeight: "600", color: theme.colors.text } }, "'Allow'"),
       ", you agree to share this information and keep it updated."
     )
-  ))), /* @__PURE__ */ import_react34.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react34.default.createElement(
+  ))), /* @__PURE__ */ import_react37.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react37.default.createElement(
     Button,
     {
       variant: "outline",
@@ -3973,12 +4472,12 @@ var Permissions = ({
       onPress: handleConsentClick,
       loading: isLoading,
       disabled: isLoading,
-      style: styles17.button
+      style: styles19.button
     },
     "Allow"
-  ), /* @__PURE__ */ import_react34.default.createElement(Footer, null)));
+  ), /* @__PURE__ */ import_react37.default.createElement(Footer, null)));
 };
-var styles17 = import_react_native19.StyleSheet.create({
+var styles19 = import_react_native21.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -4036,8 +4535,8 @@ var styles17 = import_react_native19.StyleSheet.create({
 });
 
 // src/molecules/StatusModal.tsx
-var import_react35 = __toESM(require("react"));
-var import_react_native20 = require("react-native");
+var import_react38 = __toESM(require("react"));
+var import_react_native22 = require("react-native");
 var StatusModal = ({
   open,
   onClose,
@@ -4054,18 +4553,18 @@ var StatusModal = ({
     }
     onClose();
   };
-  return /* @__PURE__ */ import_react35.default.createElement(Modal, { isOpen: open, onClose: handleClose, size: "sm" }, /* @__PURE__ */ import_react35.default.createElement(ModalHeader, { showCloseButton: false, onClose: handleClose }, ""), /* @__PURE__ */ import_react35.default.createElement(ModalBody, null, /* @__PURE__ */ import_react35.default.createElement(import_react_native20.View, { style: styles18.container }, /* @__PURE__ */ import_react35.default.createElement(import_react_native20.View, { style: styles18.iconContainer }, status === "success" ? /* @__PURE__ */ import_react35.default.createElement(SuccessIcon, { size: 80 }) : /* @__PURE__ */ import_react35.default.createElement(ErrorIcon, { size: 80 })), /* @__PURE__ */ import_react35.default.createElement(import_react_native20.Text, { style: [styles18.message, { color: theme.colors.text }] }, status === "success" ? "Connection successful" : "Connection failed"))), /* @__PURE__ */ import_react35.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(Modal, { isOpen: open, onClose: handleClose, size: "xl" }, /* @__PURE__ */ import_react38.default.createElement(ModalHeader, { showCloseButton: false, onClose: handleClose }, ""), /* @__PURE__ */ import_react38.default.createElement(ModalBody, null, /* @__PURE__ */ import_react38.default.createElement(import_react_native22.View, { style: styles20.container }, /* @__PURE__ */ import_react38.default.createElement(import_react_native22.View, { style: styles20.iconContainer }, status === "success" ? /* @__PURE__ */ import_react38.default.createElement(SuccessIcon, { size: 80 }) : /* @__PURE__ */ import_react38.default.createElement(ErrorIcon, { size: 80 })), /* @__PURE__ */ import_react38.default.createElement(import_react_native22.Text, { style: [styles20.message, { color: theme.colors.text }] }, status === "success" ? "Connection successful" : "Connection failed"), /* @__PURE__ */ import_react38.default.createElement(Alert, null, /* @__PURE__ */ import_react38.default.createElement(AlertTitle, null, "Sync in Progress"), /* @__PURE__ */ import_react38.default.createElement(AlertDescription, null, "The syncing process might take a moment. Please wait, and your data will be updated soon.")))), /* @__PURE__ */ import_react38.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react38.default.createElement(
     Button,
     {
       variant: "outline",
       size: "lg",
       onPress: status === "success" ? onSuccess : onError,
-      style: styles18.button
+      style: styles20.button
     },
     status === "success" ? "Continue" : "Try again later"
-  ), /* @__PURE__ */ import_react35.default.createElement(Footer, null)));
+  ), /* @__PURE__ */ import_react38.default.createElement(Footer, null)));
 };
-var styles18 = import_react_native20.StyleSheet.create({
+var styles20 = import_react_native22.StyleSheet.create({
   container: {
     flex: 1,
     alignItems: "center",
@@ -4089,64 +4588,6 @@ var styles18 = import_react_native20.StyleSheet.create({
   }
 });
 
-// src/molecules/EndModal.tsx
-var import_react36 = __toESM(require("react"));
-var import_react_native21 = require("react-native");
-var EndModal = ({ open, onClose }) => {
-  const theme = useTheme();
-  (0, import_react36.useEffect)(() => {
-    if (!open) return;
-    const timer = setTimeout(() => {
-      onClose();
-    }, 5e3);
-    return () => clearTimeout(timer);
-  }, []);
-  return /* @__PURE__ */ import_react36.default.createElement(Modal, { isOpen: open, onClose, size: "md" }, /* @__PURE__ */ import_react36.default.createElement(ModalHeader, { onClose }, ""), /* @__PURE__ */ import_react36.default.createElement(ModalBody, null, /* @__PURE__ */ import_react36.default.createElement(import_react_native21.View, { style: styles19.container }, /* @__PURE__ */ import_react36.default.createElement(
-    import_react_native21.View,
-    {
-      style: [
-        styles19.iconContainer,
-        { backgroundColor: theme.colors.successLight }
-      ]
-    },
-    /* @__PURE__ */ import_react36.default.createElement(SuccessIcon, { size: 80 })
-  ), /* @__PURE__ */ import_react36.default.createElement(import_react_native21.Text, { 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__ */ import_react36.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react36.default.createElement(
-    Button,
-    {
-      variant: "primary",
-      size: "lg",
-      onPress: onClose,
-      style: styles19.button
-    },
-    "Continue to App"
-  ), /* @__PURE__ */ import_react36.default.createElement(Footer, null)));
-};
-var styles19 = import_react_native21.StyleSheet.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,
@@ -4154,17 +4595,18 @@ var KryptosConnectButton = ({
   onError,
   generateLinkToken,
   style,
-  textStyle
+  textStyle,
+  integrationName
 }) => {
   const { theme: themeName } = useKryptosConnect();
-  const [open, setOpen] = import_react37.default.useState(false);
+  const [open, setOpen] = import_react39.default.useState(false);
   const theme = useTheme();
-  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, children ? /* @__PURE__ */ import_react37.default.createElement(import_react_native22.TouchableOpacity, { onPress: () => setOpen(true), style }, children) : /* @__PURE__ */ import_react37.default.createElement(
-    import_react_native22.TouchableOpacity,
+  return /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, children ? /* @__PURE__ */ import_react39.default.createElement(import_react_native23.TouchableOpacity, { onPress: () => setOpen(true), style }, children) : /* @__PURE__ */ import_react39.default.createElement(
+    import_react_native23.TouchableOpacity,
     {
       onPress: () => setOpen(true),
       style: [
-        styles20.defaultButton,
+        styles21.defaultButton,
         themeName === "light" ? {
           backgroundColor: theme.colors.white,
           borderRadius: theme.borderRadius.md,
@@ -4178,11 +4620,11 @@ var KryptosConnectButton = ({
       ],
       activeOpacity: 0.8
     },
-    /* @__PURE__ */ import_react37.default.createElement(
-      import_react_native22.Text,
+    /* @__PURE__ */ import_react39.default.createElement(
+      import_react_native23.Text,
       {
         style: [
-          styles20.buttonText,
+          styles21.buttonText,
           {
             color: themeName === "light" ? theme.colors.primary : theme.colors.white,
             fontSize: theme.fontSize.lg
@@ -4190,18 +4632,17 @@ var KryptosConnectButton = ({
           textStyle
         ]
       },
-      "Connect with",
-      " "
-    ),
-    /* @__PURE__ */ import_react37.default.createElement(LogoIcon, { size: 24 })
-  ), /* @__PURE__ */ import_react37.default.createElement(
+      integrationName ? `Connect ${integrationName.charAt(0).toUpperCase() + integrationName.slice(1)} Account` : "Connect With Kryptos"
+    )
+  ), open && /* @__PURE__ */ import_react39.default.createElement(
     KryptosConnectModal,
     {
       open,
       setOpen,
       onSuccess,
       onError,
-      generateLinkToken
+      generateLinkToken,
+      integrationName
     }
   ));
 };
@@ -4210,7 +4651,8 @@ var KryptosConnectModal = ({
   setOpen,
   onSuccess,
   onError,
-  generateLinkToken
+  generateLinkToken,
+  integrationName
 }) => {
   const {
     setIsInitialized,
@@ -4222,7 +4664,20 @@ var KryptosConnectModal = ({
     isAuthorized,
     linkToken
   } = useKryptosConnect();
-  const [step, setStep] = import_react37.default.useState("INIT" /* INIT */);
+  const [step, setStep] = import_react39.default.useState("INIT" /* INIT */);
+  const [integrationDetails, setIntegrationDetails] = (0, import_react39.useState)(null);
+  (0, import_react39.useEffect)(() => {
+    if (integrationName && linkToken) {
+      const fetchIntegrationDetails = async () => {
+        const integrationDetails2 = await getSupportedProviders(
+          linkToken,
+          integrationName
+        );
+        setIntegrationDetails(integrationDetails2?.providers?.[0]);
+      };
+      fetchIntegrationDetails();
+    }
+  }, [integrationName, linkToken]);
   const handleClose = () => {
     setOpen(false);
     setIsInitialized(false);
@@ -4258,7 +4713,7 @@ var KryptosConnectModal = ({
     handleClose();
   };
   if (!open) return null;
-  return /* @__PURE__ */ import_react37.default.createElement(import_react_native22.View, { style: styles20.container }, step === "INIT" /* INIT */ && /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(import_react_native23.View, { style: styles21.container }, step === "INIT" /* INIT */ && /* @__PURE__ */ import_react39.default.createElement(
     Init,
     {
       open,
@@ -4272,7 +4727,7 @@ var KryptosConnectModal = ({
       },
       onClose: handleAbort
     }
-  ), step === "AUTH" /* AUTH */ && /* @__PURE__ */ import_react37.default.createElement(
+  ), step === "AUTH" /* AUTH */ && /* @__PURE__ */ import_react39.default.createElement(
     Auth,
     {
       open,
@@ -4280,28 +4735,29 @@ var KryptosConnectModal = ({
       onGuestSuccess: () => setStep("INTEGRATION" /* INTEGRATION */),
       onClose: handleAbort
     }
-  ), step === "OTP" /* OTP */ && /* @__PURE__ */ import_react37.default.createElement(
+  ), step === "OTP" /* OTP */ && /* @__PURE__ */ import_react39.default.createElement(
     OTPVerify,
     {
       open,
       onSuccess: () => setStep("INTEGRATION" /* INTEGRATION */),
       onClose: handleAbort
     }
-  ), step === "INTEGRATION" /* INTEGRATION */ && /* @__PURE__ */ import_react37.default.createElement(
+  ), step === "INTEGRATION" /* INTEGRATION */ && /* @__PURE__ */ import_react39.default.createElement(
     Integration,
     {
       open,
       onSuccess: handleConsentClick,
-      onClose: handleAbort
+      onClose: handleAbort,
+      integrationDetails
     }
-  ), step === "PERMISSIONS" /* PERMISSIONS */ && /* @__PURE__ */ import_react37.default.createElement(
+  ), step === "PERMISSIONS" /* PERMISSIONS */ && /* @__PURE__ */ import_react39.default.createElement(
     Permissions,
     {
       open,
       onClose: handleAbort,
       onSuccess: () => setStep("STATUS" /* STATUS */)
     }
-  ), step === "STATUS" /* STATUS */ && /* @__PURE__ */ import_react37.default.createElement(
+  ), step === "STATUS" /* STATUS */ && /* @__PURE__ */ import_react39.default.createElement(
     StatusModal,
     {
       open,
@@ -4310,7 +4766,7 @@ var KryptosConnectModal = ({
       onError: handleError,
       status: userConsent?.public_token ? "success" : "error"
     }
-  ), step === "END" /* END */ && /* @__PURE__ */ import_react37.default.createElement(
+  ), step === "END" /* END */ && /* @__PURE__ */ import_react39.default.createElement(
     EndModal,
     {
       open,
@@ -4322,7 +4778,7 @@ var KryptosConnectModal = ({
     }
   ));
 };
-var styles20 = import_react_native22.StyleSheet.create({
+var styles21 = import_react_native23.StyleSheet.create({
   defaultButton: {
     flexDirection: "row",
     alignItems: "center",