@kryptos_connect/mobile-sdk 1.0.2 → 1.0.3

package/dist/index.js

@@ -1015,7 +1015,8 @@ var styles4 = import_react_native4.StyleSheet.create({
     flex: 1
   },
   footer: {
-    borderTopWidth: 1
+    borderTopWidth: 1,
+    marginBottom: 24
   }
 });
 
@@ -1283,20 +1284,26 @@ var styles8 = import_react_native8.StyleSheet.create({
 
 // src/components/Footer.tsx
 var Footer = () => {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_native9.View, { style: styles9.container }, /* @__PURE__ */ import_react13.default.createElement(PoweredByKryptos, null), /* @__PURE__ */ import_react13.default.createElement(import_react_native9.View, { style: styles9.modeWrapper }, /* @__PURE__ */ import_react13.default.createElement(Mode, null)));
+  const { clientInfo } = useKryptosConnect();
+  const isSandbox = clientInfo?.project_stage === "sandbox";
+  return /* @__PURE__ */ import_react13.default.createElement(
+    import_react_native9.View,
+    {
+      style: [
+        styles9.container,
+        { justifyContent: isSandbox ? "space-between" : "center" }
+      ]
+    },
+    /* @__PURE__ */ import_react13.default.createElement(PoweredByKryptos, null),
+    /* @__PURE__ */ import_react13.default.createElement(Mode, null)
+  );
 };
 var styles9 = import_react_native9.StyleSheet.create({
   container: {
     width: "100%",
     paddingVertical: 8,
     alignItems: "center",
-    justifyContent: "center"
-  },
-  // Anchor Mode to the right side
-  modeWrapper: {
-    position: "absolute",
-    right: 8,
-    top: 4
+    flexDirection: "row"
   }
 });
 
@@ -2151,7 +2158,8 @@ var WalletConnectComponent = ({
   onAddHandle,
   handleClose,
   modalOpen,
-  setAddIntegrationMode
+  setAddIntegrationMode,
+  providersList
 }) => {
   const { walletConnectProjectId } = useKryptosConnect();
   const theme = useTheme();
@@ -2199,7 +2207,8 @@ var WalletConnectComponent = ({
       onClose,
       handleClose,
       modalOpen,
-      setAddIntegrationMode
+      setAddIntegrationMode,
+      providersList
     }
   ));
 };
@@ -2208,17 +2217,85 @@ function ConnectButton({
   onAddHandle,
   handleClose,
   modalOpen,
-  setAddIntegrationMode
+  setAddIntegrationMode,
+  providersList
 }) {
   const theme = useTheme();
   const { open, disconnect } = (0, import_appkit_react_native3.useAppKit)();
-  const { address, isConnected, chainId } = (0, import_appkit_react_native3.useAccount)();
+  const { address, isConnected } = (0, import_appkit_react_native3.useAccount)();
   const { linkToken, user, clientId } = useKryptosConnect();
   const [selectedChains, setSelectedChains] = (0, import_react29.useState)(/* @__PURE__ */ new Set());
   const [errorMessage, setErrorMessage] = (0, import_react29.useState)("");
   const [chainErrors, setChainErrors] = (0, import_react29.useState)({});
   const [isLoading, setIsLoading] = (0, import_react29.useState)(false);
-  const userUsedChains = integration?.walletSupportedChains || [];
+  const [userUsedChains, setUserUsedChains] = (0, import_react29.useState)([]);
+  const [isFetchingChains, setIsFetchingChains] = (0, import_react29.useState)(false);
+  const availableChains = (0, import_react29.useMemo)(() => {
+    if (userUsedChains.length > 0) {
+      return userUsedChains;
+    }
+    if (integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
+      return integration.walletSupportedChains;
+    }
+    return [];
+  }, [userUsedChains, integration.walletSupportedChains]);
+  (0, import_react29.useEffect)(() => {
+    if (!isConnected || !address || !address.trim()) {
+      setUserUsedChains([]);
+      setSelectedChains(/* @__PURE__ */ new Set());
+      setIsFetchingChains(false);
+      return;
+    }
+    const debounceTimer = setTimeout(async () => {
+      if (linkToken && address && address.trim() && isConnected) {
+        try {
+          setIsFetchingChains(true);
+          let chains = [];
+          if (integration.isEvmWallet) {
+            const res = await getUserUsedChains(linkToken, address.trim());
+            if (res && Array.isArray(res) && res.length > 0) {
+              chains = res;
+            }
+          }
+          if (chains.length === 0 && integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
+            chains = integration.walletSupportedChains;
+          }
+          if (chains.length > 0) {
+            setUserUsedChains(chains);
+            setSelectedChains(new Set(chains.map((chain) => chain.id)));
+          } else {
+            setUserUsedChains([]);
+            setSelectedChains(/* @__PURE__ */ new Set());
+          }
+        } catch (error) {
+          console.error("Failed to fetch user chains:", error);
+          if (integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
+            setUserUsedChains(integration.walletSupportedChains);
+            setSelectedChains(
+              new Set(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                integration.walletSupportedChains.map((chain) => chain.id)
+              )
+            );
+          } else {
+            setUserUsedChains([]);
+            setSelectedChains(/* @__PURE__ */ new Set());
+          }
+        } finally {
+          setIsFetchingChains(false);
+        }
+      }
+    }, 500);
+    return () => {
+      clearTimeout(debounceTimer);
+    };
+  }, [
+    linkToken,
+    address,
+    isConnected,
+    integration.isEvmWallet,
+    integration.walletSupportedChains
+  ]);
   const validateForm = () => {
     if (!address) {
       setErrorMessage("Please connect a wallet");
@@ -2236,7 +2313,7 @@ function ConnectButton({
       setIsLoading(true);
       setErrorMessage("");
       setChainErrors({});
-      const chainsToProcess = userUsedChains.filter(
+      const chainsToProcess = availableChains.filter(
         (c) => selectedChains.has(c.id)
       );
       const integrationsToAdd = [];
@@ -2244,43 +2321,46 @@ function ConnectButton({
       const walletTestsPayload = chainsToProcess.map((chain) => {
         const walletId = generateUUID();
         const displaySuffix = address ? address?.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address : "";
-        const alias = `${integration.id} - ${chain.id} (${displaySuffix})`;
+        const alias = `${chain.id} (${displaySuffix})`;
+        const provider = providersList.find((p) => p.id === chain.id);
         return {
           chain,
           walletId,
           alias,
           credential: {
-            source: integration.id,
+            source: provider?.id,
             credential: {
               address,
               userId: user?.user_id || "0",
-              projectId: integration.projectId,
+              projectId: provider?.projectId,
               apiKey: "0",
               secret: "0",
               privateKey: "0",
               alias,
               walletId,
-              exchange: integration.id
+              exchange: provider?.id
             }
           }
         };
       });
       const results = await Promise.allSettled(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         walletTestsPayload.map(
-          (data) => testCredentials(linkToken, data.credential)
+          (testData) => testCredentials(linkToken, { ...testData.credential })
         )
       );
       results.forEach((result, index) => {
         const { chain, walletId, alias } = walletTestsPayload[index];
-        if (result.status === "fulfilled" && result.value?.valid) {
+        const provider = providersList.find((p) => p.id === chain.id);
+        if (result.status === "fulfilled" && result.value?.valid && provider) {
           const data = {
             alias,
-            exchange: integration.id.toLowerCase(),
-            id: integration.id,
-            public_name: integration.public_name,
+            exchange: provider.id.toLowerCase(),
+            id: provider.id,
+            public_name: provider.public_name,
             sync_time: (/* @__PURE__ */ new Date()).getTime(),
             fetchAll: true,
-            logo: integration.logo || null,
+            logo: provider.logo || null,
             startTime: null,
             endTime: null,
             uid: user?.user_id || "",
@@ -2293,18 +2373,27 @@ function ConnectButton({
               environment: "sandbox"
             },
             addedOn: (/* @__PURE__ */ new Date()).getTime(),
-            default_chain: chain.name,
-            default_chain_logo: chain.logo || null,
-            type: integration.type,
-            isNftSupported: integration.isEvmWallet || integration.nftSupport || false,
-            chainId: chain?.community_id || chain.chainId || chain.id,
-            address
+            default_chain: provider.id,
+            default_chain_logo: null,
+            type: provider.type,
+            isNftSupported: provider.isEvmWallet || provider.nftSupport || false
           };
           integrationsToAdd.push(data);
         } else {
-          errors[chain.id] = "Wallet verification failed";
+          if (result.status === "rejected") {
+            errors[chain.id] = result.reason?.response?.data?.message || "Failed to process chain";
+          } else if (result.status === "fulfilled") {
+            errors[chain.id] = result.value?.message || "Failed to verify chain";
+          }
         }
       });
+      setChainErrors(errors);
+      if (Object.keys(errors).length > 0) {
+        setErrorMessage(
+          `Cannot add integrations. ${Object.keys(errors).length} chain${Object.keys(errors).length > 1 ? "s" : ""} failed verification. Please fix the errors and try again.`
+        );
+        return;
+      }
       if (integrationsToAdd.length > 0) {
         onAddHandle(integrationsToAdd);
         setChainErrors({});
@@ -2322,17 +2411,17 @@ function ConnectButton({
       setIsLoading(false);
     }
   };
-  const toggleChainSelection = (chainId2) => {
+  const toggleChainSelection = (chainId) => {
     const newSelected = new Set(selectedChains);
-    if (newSelected.has(chainId2)) {
-      newSelected.delete(chainId2);
+    if (newSelected.has(chainId)) {
+      newSelected.delete(chainId);
     } else {
-      newSelected.add(chainId2);
+      newSelected.add(chainId);
     }
     setSelectedChains(newSelected);
-    if (chainErrors[chainId2]) {
+    if (chainErrors[chainId]) {
       const newErrors = { ...chainErrors };
-      delete newErrors[chainId2];
+      delete newErrors[chainId];
       setChainErrors(newErrors);
     }
   };
@@ -2353,107 +2442,149 @@ function ConnectButton({
       onPress: () => open({ view: "Connect" })
     },
     "Connect Wallet"
-  )) : /* @__PURE__ */ import_react29.default.createElement(import_react_native14.View, null, /* @__PURE__ */ import_react29.default.createElement(import_react_native14.Text, { style: [styles13.connectedTitle, { color: theme.colors.text }] }, "Wallet Connected"), /* @__PURE__ */ import_react29.default.createElement(import_react_native14.Text, { style: [styles13.connectedText, { color: theme.colors.text }] }, "Address: ", address), /* @__PURE__ */ import_react29.default.createElement(import_react_native14.Text, { style: [styles13.connectedText, { color: theme.colors.text }] }, "Chain: ", chainId), /* @__PURE__ */ import_react29.default.createElement(Button, { variant: "ghost", size: "sm", onPress: () => disconnect() }, "Disconnect Wallet"), userUsedChains.length > 0 && address && /* @__PURE__ */ import_react29.default.createElement(import_react_native14.View, { style: styles13.chainSelection }, /* @__PURE__ */ import_react29.default.createElement(import_react_native14.Text, { style: [styles13.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"), /* @__PURE__ */ import_react29.default.createElement(import_react_native14.ScrollView, { contentContainerStyle: styles13.scrollViewContent }, /* @__PURE__ */ import_react29.default.createElement(import_react_native14.View, { style: styles13.chainChips }, userUsedChains.map((chain) => {
-    const isSelected = selectedChains.has(chain.id);
-    const hasError = chainErrors[chain.id];
-    return /* @__PURE__ */ import_react29.default.createElement(
-      import_react_native14.TouchableOpacity,
-      {
-        onPress: () => toggleChainSelection(chain.id),
-        style: styles13.chainButton,
-        key: chain.id
-      },
-      /* @__PURE__ */ import_react29.default.createElement(
-        import_react_native14.View,
+  )) : /* @__PURE__ */ import_react29.default.createElement(import_react_native14.View, { style: styles13.connectedContainer }, /* @__PURE__ */ import_react29.default.createElement(import_react_native14.View, { style: styles13.connectedHeader }, /* @__PURE__ */ import_react29.default.createElement(
+    import_react_native14.Text,
+    {
+      style: [styles13.connectedTitle, { color: theme.colors.text }]
+    },
+    "Wallet Connected"
+  ), /* @__PURE__ */ import_react29.default.createElement(
+    import_react_native14.Text,
+    {
+      style: [styles13.connectedText, { color: theme.colors.text }]
+    },
+    "Address: ",
+    address
+  ), /* @__PURE__ */ import_react29.default.createElement(Button, { variant: "ghost", size: "sm", onPress: () => disconnect() }, "Disconnect Wallet"), isFetchingChains ? /* @__PURE__ */ import_react29.default.createElement(
+    import_react_native14.Text,
+    {
+      style: [styles13.fetchingText, { color: theme.colors.text }]
+    },
+    "Fetching chains..."
+  ) : null), availableChains.length > 0 && address && /* @__PURE__ */ import_react29.default.createElement(
+    import_react_native14.ScrollView,
+    {
+      style: styles13.scrollView,
+      contentContainerStyle: styles13.scrollViewContent,
+      showsVerticalScrollIndicator: true,
+      nestedScrollEnabled: true
+    },
+    /* @__PURE__ */ import_react29.default.createElement(import_react_native14.Text, { style: [styles13.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"),
+    /* @__PURE__ */ import_react29.default.createElement(import_react_native14.View, null, /* @__PURE__ */ import_react29.default.createElement(import_react_native14.View, { style: styles13.chainChips }, availableChains.map((chain) => {
+      const isSelected = selectedChains.has(chain.id);
+      const hasError = chainErrors[chain.id];
+      return /* @__PURE__ */ import_react29.default.createElement(
+        import_react_native14.TouchableOpacity,
         {
-          style: [
-            styles13.chainChip,
-            {
-              backgroundColor: hasError ? theme.colors.errorLight : isSelected ? theme.colors.primary + "20" : theme.colors.surface,
-              borderColor: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.border
-            }
-          ]
+          onPress: () => toggleChainSelection(chain.id),
+          style: styles13.chainButton,
+          key: chain.id
         },
         /* @__PURE__ */ import_react29.default.createElement(
-          import_react_native14.Text,
+          import_react_native14.View,
           {
             style: [
-              styles13.chainName,
+              styles13.chainChip,
               {
-                color: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.text
+                backgroundColor: hasError ? theme.colors.errorLight : isSelected ? theme.colors.primary + "20" : theme.colors.surface,
+                borderColor: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.border
               }
             ]
           },
-          chain.id
-        ),
-        isSelected ? /* @__PURE__ */ import_react29.default.createElement(
-          CloseIcon,
-          {
-            size: 12,
-            color: hasError ? theme.colors.error : theme.colors.primary
-          }
-        ) : /* @__PURE__ */ import_react29.default.createElement(
-          PlusIcon,
-          {
-            size: 12,
-            color: theme.colors.textSecondary
-          }
+          /* @__PURE__ */ import_react29.default.createElement(
+            import_react_native14.Text,
+            {
+              style: [
+                styles13.chainName,
+                {
+                  color: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.text
+                }
+              ]
+            },
+            chain.id
+          ),
+          isSelected ? /* @__PURE__ */ import_react29.default.createElement(
+            CloseIcon,
+            {
+              size: 12,
+              color: hasError ? theme.colors.error : theme.colors.primary
+            }
+          ) : /* @__PURE__ */ import_react29.default.createElement(
+            PlusIcon,
+            {
+              size: 12,
+              color: theme.colors.textSecondary
+            }
+          )
         )
-      )
-    );
-  }))), Object.keys(chainErrors).length > 0 && /* @__PURE__ */ import_react29.default.createElement(import_react_native14.View, { style: styles13.chainErrorsContainer }, /* @__PURE__ */ import_react29.default.createElement(
-    import_react_native14.Text,
-    {
-      style: [
-        styles13.chainErrorsTitle,
-        { color: theme.colors.error }
-      ]
-    },
-    "Errors:"
-  ), Object.entries(chainErrors).map(([chainId2, error]) => {
-    const chain = userUsedChains.find(
-      (c) => c.id === chainId2
-    );
-    return /* @__PURE__ */ import_react29.default.createElement(
+      );
+    })), errorMessage ? /* @__PURE__ */ import_react29.default.createElement(import_react_native14.View, { style: styles13.errorMessageContainer }, /* @__PURE__ */ import_react29.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react29.default.createElement(AlertDescription, null, errorMessage))) : null, Object.keys(chainErrors || {}).length > 0 && /* @__PURE__ */ import_react29.default.createElement(import_react_native14.View, { style: styles13.chainErrorsContainer }, /* @__PURE__ */ import_react29.default.createElement(
       import_react_native14.Text,
       {
-        key: chainId2,
         style: [
-          styles13.chainErrorItem,
+          styles13.chainErrorsTitle,
           { color: theme.colors.error }
         ]
       },
-      "\u2022 ",
-      chain?.name,
-      ": ",
-      error
-    );
-  }))), errorMessage ? /* @__PURE__ */ import_react29.default.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ import_react29.default.createElement(AlertDescription, null, errorMessage)) : null)), userUsedChains.length > 0 && address && /* @__PURE__ */ import_react29.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react29.default.createElement(
+      "Errors:"
+    ), Object.entries(chainErrors).map(([chainId, error]) => {
+      const chain = availableChains.find(
+        (c) => c.id === chainId
+      );
+      return /* @__PURE__ */ import_react29.default.createElement(
+        import_react_native14.Text,
+        {
+          key: chainId,
+          style: [
+            styles13.chainErrorItem,
+            { color: theme.colors.error }
+          ]
+        },
+        "\u2022 ",
+        chain?.name ?? chainId,
+        ": ",
+        String(error)
+      );
+    })))
+  ))), availableChains.length > 0 && address && /* @__PURE__ */ import_react29.default.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ import_react29.default.createElement(
     Button,
     {
       variant: "outline",
       size: "lg",
       onPress: onSubmitWalletConnect,
       loading: isLoading,
-      disabled: isLoading || !!address && userUsedChains.length > 0 && selectedChains.size === 0,
+      disabled: isLoading || !!address && availableChains.length > 0 && selectedChains.size === 0,
       style: styles13.button
     },
     selectedChains.size > 0 ? `Add ${selectedChains.size} Chain${selectedChains.size > 1 ? "s" : ""}` : "Add Integration"
   ), /* @__PURE__ */ import_react29.default.createElement(Footer, null)));
 }
 var styles13 = import_react_native14.StyleSheet.create({
-  connectedTitle: { fontSize: 18, fontWeight: "600", marginBottom: 4 },
+  connectedContainer: {
+    flex: 1
+  },
+  connectedHeader: {
+    marginBottom: 8
+  },
+  connectedTitle: { fontSize: 12, fontWeight: "600", marginBottom: 4 },
   connectedText: { fontSize: 14, marginBottom: 4 },
+  fetchingText: { fontSize: 12, marginBottom: 4, textAlign: "center" },
   infoText: {
     fontSize: 16,
     fontWeight: "600",
     marginBottom: 8,
     textAlign: "center"
   },
+  scrollView: {
+    flex: 1
+  },
   scrollViewContent: {
-    paddingBottom: 100,
+    paddingBottom: 40,
     flexGrow: 1
   },
+  errorMessageContainer: {
+    marginTop: 16
+  },
   headerContent: {
     flexDirection: "row",
     alignItems: "center"
@@ -2472,17 +2603,13 @@ var styles13 = import_react_native14.StyleSheet.create({
   contentContainer: {
     padding: 20,
     // theme.spacing.xl
-    paddingBottom: 40,
+    paddingBottom: 20,
     width: "100%",
     overflow: "hidden",
     alignSelf: "center",
     flexDirection: "column",
     flex: 1
   },
-  chainSelection: {
-    marginBottom: 16
-    // theme.spacing.lg
-  },
   chainTitle: {
     fontSize: 14,
     // theme.fontSize.md
@@ -2534,9 +2661,7 @@ var styles13 = import_react_native14.StyleSheet.create({
     // theme.spacing.xs
   },
   button: {
-    width: "100%",
-    marginTop: 16
-    // theme.spacing.lg - consistent button spacing
+    width: "100%"
   },
   emptyState: {
     flex: 1,
@@ -2561,7 +2686,8 @@ var IntegrationForm = ({
   onAddHandle,
   open,
   setAddIntegrationMode,
-  handleClose
+  handleClose,
+  providersList
 }) => {
   const { clientId, linkToken, user } = useKryptosConnect();
   const theme = useTheme();
@@ -2795,7 +2921,7 @@ var IntegrationForm = ({
           isNftSupported: metadata.isEvmWallet || metadata.nftSupport || false
         };
         if (metadata.community_id) {
-          data.chainId = Number(metadata.community_id);
+          data.chainId = metadata.community_id;
         }
         if (formValues.address) data.address = formValues.address;
         if (formValues.account_name) data.accountName = formValues.account_name;
@@ -2966,7 +3092,8 @@ var IntegrationForm = ({
       onAddHandle,
       modalOpen: open,
       setAddIntegrationMode,
-      handleClose
+      handleClose,
+      providersList
     }
   ));
 };
@@ -3353,7 +3480,8 @@ var Integration = ({
       },
       open: !!addIntegrationMode,
       setAddIntegrationMode,
-      handleClose
+      handleClose,
+      providersList: supportedProviders
     }
   ));
 };
@@ -3380,9 +3508,10 @@ var styles15 = import_react_native16.StyleSheet.create({
     flex: 1
   },
   headerSection: {
-    paddingHorizontal: 20
+    paddingHorizontal: 20,
+    // theme.spacing.xl
+    paddingTop: 10
     // theme.spacing.xl
-    // paddingTop: 10, // theme.spacing.xl
   },
   title: {
     fontSize: 16,

package/dist/index.mjs

@@ -1002,7 +1002,8 @@ var styles4 = StyleSheet4.create({
     flex: 1
   },
   footer: {
-    borderTopWidth: 1
+    borderTopWidth: 1,
+    marginBottom: 24
   }
 });
 
@@ -1281,20 +1282,26 @@ var styles8 = StyleSheet8.create({
 
 // src/components/Footer.tsx
 var Footer = () => {
-  return /* @__PURE__ */ React13.createElement(View9, { style: styles9.container }, /* @__PURE__ */ React13.createElement(PoweredByKryptos, null), /* @__PURE__ */ React13.createElement(View9, { style: styles9.modeWrapper }, /* @__PURE__ */ React13.createElement(Mode, null)));
+  const { clientInfo } = useKryptosConnect();
+  const isSandbox = clientInfo?.project_stage === "sandbox";
+  return /* @__PURE__ */ React13.createElement(
+    View9,
+    {
+      style: [
+        styles9.container,
+        { justifyContent: isSandbox ? "space-between" : "center" }
+      ]
+    },
+    /* @__PURE__ */ React13.createElement(PoweredByKryptos, null),
+    /* @__PURE__ */ React13.createElement(Mode, null)
+  );
 };
 var styles9 = StyleSheet9.create({
   container: {
     width: "100%",
     paddingVertical: 8,
     alignItems: "center",
-    justifyContent: "center"
-  },
-  // Anchor Mode to the right side
-  modeWrapper: {
-    position: "absolute",
-    right: 8,
-    top: 4
+    flexDirection: "row"
   }
 });
 
@@ -2026,7 +2033,7 @@ var PlusIcon = ({
 
 // src/wallet-connect/index.tsx
 import { useAccount, useAppKit } from "@reown/appkit-react-native";
-import React29, { useState } from "react";
+import React29, { useEffect as useEffect2, useMemo, useState } from "react";
 import {
   ScrollView as ScrollView2,
   StyleSheet as StyleSheet13,
@@ -2177,7 +2184,8 @@ var WalletConnectComponent = ({
   onAddHandle,
   handleClose,
   modalOpen,
-  setAddIntegrationMode
+  setAddIntegrationMode,
+  providersList
 }) => {
   const { walletConnectProjectId } = useKryptosConnect();
   const theme = useTheme();
@@ -2225,7 +2233,8 @@ var WalletConnectComponent = ({
       onClose,
       handleClose,
       modalOpen,
-      setAddIntegrationMode
+      setAddIntegrationMode,
+      providersList
     }
   ));
 };
@@ -2234,17 +2243,85 @@ function ConnectButton({
   onAddHandle,
   handleClose,
   modalOpen,
-  setAddIntegrationMode
+  setAddIntegrationMode,
+  providersList
 }) {
   const theme = useTheme();
   const { open, disconnect } = useAppKit();
-  const { address, isConnected, chainId } = useAccount();
+  const { address, isConnected } = useAccount();
   const { linkToken, user, clientId } = useKryptosConnect();
   const [selectedChains, setSelectedChains] = useState(/* @__PURE__ */ new Set());
   const [errorMessage, setErrorMessage] = useState("");
   const [chainErrors, setChainErrors] = useState({});
   const [isLoading, setIsLoading] = useState(false);
-  const userUsedChains = integration?.walletSupportedChains || [];
+  const [userUsedChains, setUserUsedChains] = useState([]);
+  const [isFetchingChains, setIsFetchingChains] = useState(false);
+  const availableChains = useMemo(() => {
+    if (userUsedChains.length > 0) {
+      return userUsedChains;
+    }
+    if (integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
+      return integration.walletSupportedChains;
+    }
+    return [];
+  }, [userUsedChains, integration.walletSupportedChains]);
+  useEffect2(() => {
+    if (!isConnected || !address || !address.trim()) {
+      setUserUsedChains([]);
+      setSelectedChains(/* @__PURE__ */ new Set());
+      setIsFetchingChains(false);
+      return;
+    }
+    const debounceTimer = setTimeout(async () => {
+      if (linkToken && address && address.trim() && isConnected) {
+        try {
+          setIsFetchingChains(true);
+          let chains = [];
+          if (integration.isEvmWallet) {
+            const res = await getUserUsedChains(linkToken, address.trim());
+            if (res && Array.isArray(res) && res.length > 0) {
+              chains = res;
+            }
+          }
+          if (chains.length === 0 && integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
+            chains = integration.walletSupportedChains;
+          }
+          if (chains.length > 0) {
+            setUserUsedChains(chains);
+            setSelectedChains(new Set(chains.map((chain) => chain.id)));
+          } else {
+            setUserUsedChains([]);
+            setSelectedChains(/* @__PURE__ */ new Set());
+          }
+        } catch (error) {
+          console.error("Failed to fetch user chains:", error);
+          if (integration.walletSupportedChains && integration.walletSupportedChains.length > 0) {
+            setUserUsedChains(integration.walletSupportedChains);
+            setSelectedChains(
+              new Set(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                integration.walletSupportedChains.map((chain) => chain.id)
+              )
+            );
+          } else {
+            setUserUsedChains([]);
+            setSelectedChains(/* @__PURE__ */ new Set());
+          }
+        } finally {
+          setIsFetchingChains(false);
+        }
+      }
+    }, 500);
+    return () => {
+      clearTimeout(debounceTimer);
+    };
+  }, [
+    linkToken,
+    address,
+    isConnected,
+    integration.isEvmWallet,
+    integration.walletSupportedChains
+  ]);
   const validateForm = () => {
     if (!address) {
       setErrorMessage("Please connect a wallet");
@@ -2262,7 +2339,7 @@ function ConnectButton({
       setIsLoading(true);
       setErrorMessage("");
       setChainErrors({});
-      const chainsToProcess = userUsedChains.filter(
+      const chainsToProcess = availableChains.filter(
         (c) => selectedChains.has(c.id)
       );
       const integrationsToAdd = [];
@@ -2270,43 +2347,46 @@ function ConnectButton({
       const walletTestsPayload = chainsToProcess.map((chain) => {
         const walletId = generateUUID();
         const displaySuffix = address ? address?.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address : "";
-        const alias = `${integration.id} - ${chain.id} (${displaySuffix})`;
+        const alias = `${chain.id} (${displaySuffix})`;
+        const provider = providersList.find((p) => p.id === chain.id);
         return {
           chain,
           walletId,
           alias,
           credential: {
-            source: integration.id,
+            source: provider?.id,
             credential: {
               address,
               userId: user?.user_id || "0",
-              projectId: integration.projectId,
+              projectId: provider?.projectId,
               apiKey: "0",
               secret: "0",
               privateKey: "0",
               alias,
               walletId,
-              exchange: integration.id
+              exchange: provider?.id
             }
           }
         };
       });
       const results = await Promise.allSettled(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         walletTestsPayload.map(
-          (data) => testCredentials(linkToken, data.credential)
+          (testData) => testCredentials(linkToken, { ...testData.credential })
         )
       );
       results.forEach((result, index) => {
         const { chain, walletId, alias } = walletTestsPayload[index];
-        if (result.status === "fulfilled" && result.value?.valid) {
+        const provider = providersList.find((p) => p.id === chain.id);
+        if (result.status === "fulfilled" && result.value?.valid && provider) {
           const data = {
             alias,
-            exchange: integration.id.toLowerCase(),
-            id: integration.id,
-            public_name: integration.public_name,
+            exchange: provider.id.toLowerCase(),
+            id: provider.id,
+            public_name: provider.public_name,
             sync_time: (/* @__PURE__ */ new Date()).getTime(),
             fetchAll: true,
-            logo: integration.logo || null,
+            logo: provider.logo || null,
             startTime: null,
             endTime: null,
             uid: user?.user_id || "",
@@ -2319,18 +2399,27 @@ function ConnectButton({
               environment: "sandbox"
             },
             addedOn: (/* @__PURE__ */ new Date()).getTime(),
-            default_chain: chain.name,
-            default_chain_logo: chain.logo || null,
-            type: integration.type,
-            isNftSupported: integration.isEvmWallet || integration.nftSupport || false,
-            chainId: chain?.community_id || chain.chainId || chain.id,
-            address
+            default_chain: provider.id,
+            default_chain_logo: null,
+            type: provider.type,
+            isNftSupported: provider.isEvmWallet || provider.nftSupport || false
           };
           integrationsToAdd.push(data);
         } else {
-          errors[chain.id] = "Wallet verification failed";
+          if (result.status === "rejected") {
+            errors[chain.id] = result.reason?.response?.data?.message || "Failed to process chain";
+          } else if (result.status === "fulfilled") {
+            errors[chain.id] = result.value?.message || "Failed to verify chain";
+          }
         }
       });
+      setChainErrors(errors);
+      if (Object.keys(errors).length > 0) {
+        setErrorMessage(
+          `Cannot add integrations. ${Object.keys(errors).length} chain${Object.keys(errors).length > 1 ? "s" : ""} failed verification. Please fix the errors and try again.`
+        );
+        return;
+      }
       if (integrationsToAdd.length > 0) {
         onAddHandle(integrationsToAdd);
         setChainErrors({});
@@ -2348,17 +2437,17 @@ function ConnectButton({
       setIsLoading(false);
     }
   };
-  const toggleChainSelection = (chainId2) => {
+  const toggleChainSelection = (chainId) => {
     const newSelected = new Set(selectedChains);
-    if (newSelected.has(chainId2)) {
-      newSelected.delete(chainId2);
+    if (newSelected.has(chainId)) {
+      newSelected.delete(chainId);
     } else {
-      newSelected.add(chainId2);
+      newSelected.add(chainId);
     }
     setSelectedChains(newSelected);
-    if (chainErrors[chainId2]) {
+    if (chainErrors[chainId]) {
       const newErrors = { ...chainErrors };
-      delete newErrors[chainId2];
+      delete newErrors[chainId];
       setChainErrors(newErrors);
     }
   };
@@ -2379,107 +2468,149 @@ function ConnectButton({
       onPress: () => open({ view: "Connect" })
     },
     "Connect Wallet"
-  )) : /* @__PURE__ */ React29.createElement(View13, null, /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.connectedTitle, { color: theme.colors.text }] }, "Wallet Connected"), /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.connectedText, { color: theme.colors.text }] }, "Address: ", address), /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.connectedText, { color: theme.colors.text }] }, "Chain: ", chainId), /* @__PURE__ */ React29.createElement(Button, { variant: "ghost", size: "sm", onPress: () => disconnect() }, "Disconnect Wallet"), userUsedChains.length > 0 && address && /* @__PURE__ */ React29.createElement(View13, { style: styles13.chainSelection }, /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"), /* @__PURE__ */ React29.createElement(ScrollView2, { contentContainerStyle: styles13.scrollViewContent }, /* @__PURE__ */ React29.createElement(View13, { style: styles13.chainChips }, userUsedChains.map((chain) => {
-    const isSelected = selectedChains.has(chain.id);
-    const hasError = chainErrors[chain.id];
-    return /* @__PURE__ */ React29.createElement(
-      TouchableOpacity4,
-      {
-        onPress: () => toggleChainSelection(chain.id),
-        style: styles13.chainButton,
-        key: chain.id
-      },
-      /* @__PURE__ */ React29.createElement(
-        View13,
+  )) : /* @__PURE__ */ React29.createElement(View13, { style: styles13.connectedContainer }, /* @__PURE__ */ React29.createElement(View13, { style: styles13.connectedHeader }, /* @__PURE__ */ React29.createElement(
+    Text11,
+    {
+      style: [styles13.connectedTitle, { color: theme.colors.text }]
+    },
+    "Wallet Connected"
+  ), /* @__PURE__ */ React29.createElement(
+    Text11,
+    {
+      style: [styles13.connectedText, { color: theme.colors.text }]
+    },
+    "Address: ",
+    address
+  ), /* @__PURE__ */ React29.createElement(Button, { variant: "ghost", size: "sm", onPress: () => disconnect() }, "Disconnect Wallet"), isFetchingChains ? /* @__PURE__ */ React29.createElement(
+    Text11,
+    {
+      style: [styles13.fetchingText, { color: theme.colors.text }]
+    },
+    "Fetching chains..."
+  ) : null), availableChains.length > 0 && address && /* @__PURE__ */ React29.createElement(
+    ScrollView2,
+    {
+      style: styles13.scrollView,
+      contentContainerStyle: styles13.scrollViewContent,
+      showsVerticalScrollIndicator: true,
+      nestedScrollEnabled: true
+    },
+    /* @__PURE__ */ React29.createElement(Text11, { style: [styles13.chainTitle, { color: theme.colors.text }] }, "Select Chains to Add:"),
+    /* @__PURE__ */ React29.createElement(View13, null, /* @__PURE__ */ React29.createElement(View13, { style: styles13.chainChips }, availableChains.map((chain) => {
+      const isSelected = selectedChains.has(chain.id);
+      const hasError = chainErrors[chain.id];
+      return /* @__PURE__ */ React29.createElement(
+        TouchableOpacity4,
         {
-          style: [
-            styles13.chainChip,
-            {
-              backgroundColor: hasError ? theme.colors.errorLight : isSelected ? theme.colors.primary + "20" : theme.colors.surface,
-              borderColor: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.border
-            }
-          ]
+          onPress: () => toggleChainSelection(chain.id),
+          style: styles13.chainButton,
+          key: chain.id
         },
         /* @__PURE__ */ React29.createElement(
-          Text11,
+          View13,
           {
             style: [
-              styles13.chainName,
+              styles13.chainChip,
               {
-                color: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.text
+                backgroundColor: hasError ? theme.colors.errorLight : isSelected ? theme.colors.primary + "20" : theme.colors.surface,
+                borderColor: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.border
               }
             ]
           },
-          chain.id
-        ),
-        isSelected ? /* @__PURE__ */ React29.createElement(
-          CloseIcon,
-          {
-            size: 12,
-            color: hasError ? theme.colors.error : theme.colors.primary
-          }
-        ) : /* @__PURE__ */ React29.createElement(
-          PlusIcon,
-          {
-            size: 12,
-            color: theme.colors.textSecondary
-          }
+          /* @__PURE__ */ React29.createElement(
+            Text11,
+            {
+              style: [
+                styles13.chainName,
+                {
+                  color: hasError ? theme.colors.error : isSelected ? theme.colors.primary : theme.colors.text
+                }
+              ]
+            },
+            chain.id
+          ),
+          isSelected ? /* @__PURE__ */ React29.createElement(
+            CloseIcon,
+            {
+              size: 12,
+              color: hasError ? theme.colors.error : theme.colors.primary
+            }
+          ) : /* @__PURE__ */ React29.createElement(
+            PlusIcon,
+            {
+              size: 12,
+              color: theme.colors.textSecondary
+            }
+          )
         )
-      )
-    );
-  }))), Object.keys(chainErrors).length > 0 && /* @__PURE__ */ React29.createElement(View13, { style: styles13.chainErrorsContainer }, /* @__PURE__ */ React29.createElement(
-    Text11,
-    {
-      style: [
-        styles13.chainErrorsTitle,
-        { color: theme.colors.error }
-      ]
-    },
-    "Errors:"
-  ), Object.entries(chainErrors).map(([chainId2, error]) => {
-    const chain = userUsedChains.find(
-      (c) => c.id === chainId2
-    );
-    return /* @__PURE__ */ React29.createElement(
+      );
+    })), errorMessage ? /* @__PURE__ */ React29.createElement(View13, { style: styles13.errorMessageContainer }, /* @__PURE__ */ React29.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React29.createElement(AlertDescription, null, errorMessage))) : null, Object.keys(chainErrors || {}).length > 0 && /* @__PURE__ */ React29.createElement(View13, { style: styles13.chainErrorsContainer }, /* @__PURE__ */ React29.createElement(
       Text11,
       {
-        key: chainId2,
         style: [
-          styles13.chainErrorItem,
+          styles13.chainErrorsTitle,
           { color: theme.colors.error }
         ]
       },
-      "\u2022 ",
-      chain?.name,
-      ": ",
-      error
-    );
-  }))), errorMessage ? /* @__PURE__ */ React29.createElement(Alert, { variant: "destructive" }, /* @__PURE__ */ React29.createElement(AlertDescription, null, errorMessage)) : null)), userUsedChains.length > 0 && address && /* @__PURE__ */ React29.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React29.createElement(
+      "Errors:"
+    ), Object.entries(chainErrors).map(([chainId, error]) => {
+      const chain = availableChains.find(
+        (c) => c.id === chainId
+      );
+      return /* @__PURE__ */ React29.createElement(
+        Text11,
+        {
+          key: chainId,
+          style: [
+            styles13.chainErrorItem,
+            { color: theme.colors.error }
+          ]
+        },
+        "\u2022 ",
+        chain?.name ?? chainId,
+        ": ",
+        String(error)
+      );
+    })))
+  ))), availableChains.length > 0 && address && /* @__PURE__ */ React29.createElement(ModalFooter, { style: { paddingVertical: 8 } }, /* @__PURE__ */ React29.createElement(
     Button,
     {
       variant: "outline",
       size: "lg",
       onPress: onSubmitWalletConnect,
       loading: isLoading,
-      disabled: isLoading || !!address && userUsedChains.length > 0 && selectedChains.size === 0,
+      disabled: isLoading || !!address && availableChains.length > 0 && selectedChains.size === 0,
       style: styles13.button
     },
     selectedChains.size > 0 ? `Add ${selectedChains.size} Chain${selectedChains.size > 1 ? "s" : ""}` : "Add Integration"
   ), /* @__PURE__ */ React29.createElement(Footer, null)));
 }
 var styles13 = StyleSheet13.create({
-  connectedTitle: { fontSize: 18, fontWeight: "600", marginBottom: 4 },
+  connectedContainer: {
+    flex: 1
+  },
+  connectedHeader: {
+    marginBottom: 8
+  },
+  connectedTitle: { fontSize: 12, fontWeight: "600", marginBottom: 4 },
   connectedText: { fontSize: 14, marginBottom: 4 },
+  fetchingText: { fontSize: 12, marginBottom: 4, textAlign: "center" },
   infoText: {
     fontSize: 16,
     fontWeight: "600",
     marginBottom: 8,
     textAlign: "center"
   },
+  scrollView: {
+    flex: 1
+  },
   scrollViewContent: {
-    paddingBottom: 100,
+    paddingBottom: 40,
     flexGrow: 1
   },
+  errorMessageContainer: {
+    marginTop: 16
+  },
   headerContent: {
     flexDirection: "row",
     alignItems: "center"
@@ -2498,17 +2629,13 @@ var styles13 = StyleSheet13.create({
   contentContainer: {
     padding: 20,
     // theme.spacing.xl
-    paddingBottom: 40,
+    paddingBottom: 20,
     width: "100%",
     overflow: "hidden",
     alignSelf: "center",
     flexDirection: "column",
     flex: 1
   },
-  chainSelection: {
-    marginBottom: 16
-    // theme.spacing.lg
-  },
   chainTitle: {
     fontSize: 14,
     // theme.fontSize.md
@@ -2560,9 +2687,7 @@ var styles13 = StyleSheet13.create({
     // theme.spacing.xs
   },
   button: {
-    width: "100%",
-    marginTop: 16
-    // theme.spacing.lg - consistent button spacing
+    width: "100%"
   },
   emptyState: {
     flex: 1,
@@ -2594,7 +2719,8 @@ var IntegrationForm = ({
   onAddHandle,
   open,
   setAddIntegrationMode,
-  handleClose
+  handleClose,
+  providersList
 }) => {
   const { clientId, linkToken, user } = useKryptosConnect();
   const theme = useTheme();
@@ -2828,7 +2954,7 @@ var IntegrationForm = ({
           isNftSupported: metadata.isEvmWallet || metadata.nftSupport || false
         };
         if (metadata.community_id) {
-          data.chainId = Number(metadata.community_id);
+          data.chainId = metadata.community_id;
         }
         if (formValues.address) data.address = formValues.address;
         if (formValues.account_name) data.accountName = formValues.account_name;
@@ -2999,7 +3125,8 @@ var IntegrationForm = ({
       onAddHandle,
       modalOpen: open,
       setAddIntegrationMode,
-      handleClose
+      handleClose,
+      providersList
     }
   ));
 };
@@ -3386,7 +3513,8 @@ var Integration = ({
       },
       open: !!addIntegrationMode,
       setAddIntegrationMode,
-      handleClose
+      handleClose,
+      providersList: supportedProviders
     }
   ));
 };
@@ -3413,9 +3541,10 @@ var styles15 = StyleSheet15.create({
     flex: 1
   },
   headerSection: {
-    paddingHorizontal: 20
+    paddingHorizontal: 20,
+    // theme.spacing.xl
+    paddingTop: 10
     // theme.spacing.xl
-    // paddingTop: 10, // theme.spacing.xl
   },
   title: {
     fontSize: 16,
@@ -3914,11 +4043,11 @@ var styles18 = StyleSheet18.create({
 });
 
 // src/molecules/EndModal.tsx
-import React35, { useEffect as useEffect2 } from "react";
+import React35, { useEffect as useEffect3 } from "react";
 import { StyleSheet as StyleSheet19, Text as Text17, View as View19 } from "react-native";
 var EndModal = ({ open, onClose }) => {
   const theme = useTheme();
-  useEffect2(() => {
+  useEffect3(() => {
     if (!open) return;
     const timer = setTimeout(() => {
       onClose();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kryptos_connect/mobile-sdk",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "publishConfig": {
     "access": "public"
   },