@kryptos_connect/mobile-sdk 1.0.6-dev.1 → 2.0.1-dev.0

package/dist/index.cjs

@@ -0,0 +1,367 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  KryptosConnect: () => KryptosConnect,
+  KryptosConnectButton: () => KryptosConnectButton,
+  KryptosConnectProvider: () => KryptosConnectProvider
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var import_react_native_webview = require("react-native-webview");
+var _globalConfig = null;
+var KryptosConnect = {
+  init(config) {
+    _globalConfig = config;
+  }
+};
+var DEFAULT_CDN = "http://app-connect.kryptos.io";
+var BUTTON_LABELS = {
+  en: {
+    connectWith: "Connect with Kryptos",
+    connectAccount: "Connect {name} Account",
+    connecting: "Connecting..."
+  },
+  fr: {
+    connectWith: "Se connecter avec Kryptos",
+    connectAccount: "Connecter le compte {name}",
+    connecting: "Connexion..."
+  },
+  de: {
+    connectWith: "Mit Kryptos verbinden",
+    connectAccount: "{name}-Konto verbinden",
+    connecting: "Verbindung wird hergestellt..."
+  },
+  pt: {
+    connectWith: "Conectar com Kryptos",
+    connectAccount: "Conectar conta {name}",
+    connecting: "Conectando..."
+  },
+  sv: {
+    connectWith: "Anslut med Kryptos",
+    connectAccount: "Anslut {name}-konto",
+    connecting: "Ansluter..."
+  },
+  es: {
+    connectWith: "Conectar con Kryptos",
+    connectAccount: "Conectar cuenta {name}",
+    connecting: "Conectando..."
+  },
+  pl: {
+    connectWith: "Po\u0142\u0105cz z Kryptos",
+    connectAccount: "Po\u0142\u0105cz konto {name}",
+    connecting: "\u0141\u0105czenie..."
+  },
+  it: {
+    connectWith: "Connetti con Kryptos",
+    connectAccount: "Connetti account {name}",
+    connecting: "Connessione..."
+  }
+};
+function getButtonLabels(language) {
+  const lang = language in BUTTON_LABELS ? language : "en";
+  return BUTTON_LABELS[lang];
+}
+function b64Encode(str) {
+  if (typeof btoa === "function") return btoa(str);
+  if (typeof Buffer !== "undefined") return Buffer.from(str).toString("base64");
+  return encodeURIComponent(str);
+}
+function getConnectUrl(config, linkToken, integrationName, isAuthorized) {
+  var _a, _b;
+  const base = (_a = config.cdnBaseUrl) != null ? _a : DEFAULT_CDN;
+  const encoded = b64Encode(JSON.stringify(config));
+  const origin = encodeURIComponent((_b = config.baseUrl) != null ? _b : "https://kryptos.io");
+  let url = `${base}/connect?link_token=${encodeURIComponent(linkToken)}&config=${encodeURIComponent(encoded)}&origin=${origin}`;
+  if (integrationName) url += `&integrationName=${encodeURIComponent(integrationName)}`;
+  if (isAuthorized) url += `&is_authorized=1`;
+  return url;
+}
+var IOS_HIDE_ACCESSORY_JS = `
+(function(){
+  function patch(el){
+    if((el.tagName==='INPUT'||el.tagName==='TEXTAREA')&&!el.dataset.kcPatched){
+      el.setAttribute('inputmode','text');
+      el.dataset.kcPatched='1';
+    }
+  }
+  document.querySelectorAll('input,textarea').forEach(patch);
+  new MutationObserver(function(ms){
+    ms.forEach(function(m){
+      m.addedNodes.forEach(function(n){
+        if(n.nodeType===1){
+          patch(n);
+          n.querySelectorAll&&n.querySelectorAll('input,textarea').forEach(patch);
+        }
+      });
+    });
+  }).observe(document.body,{childList:true,subtree:true});
+  true;
+})();
+`;
+function KryptosConnectButton({
+  config: configProp,
+  generateLinkToken,
+  onConnectSuccess,
+  onConnectError,
+  buttonLabel,
+  buttonHeight = 56,
+  integrationName,
+  extraConfig,
+  style
+}) {
+  var _a, _b, _c, _d;
+  const config = configProp != null ? configProp : _globalConfig;
+  const mergedConfig = config && extraConfig ? __spreadValues(__spreadValues({}, config), extraConfig) : config;
+  const labels = getButtonLabels(config == null ? void 0 : config.language);
+  const resolvedLabel = buttonLabel != null ? buttonLabel : integrationName ? labels.connectAccount.replace(
+    "{name}",
+    integrationName.charAt(0).toUpperCase() + integrationName.slice(1)
+  ) : labels.connectWith;
+  const webViewRef = (0, import_react.useRef)(null);
+  const [modalVisible, setModalVisible] = (0, import_react.useState)(false);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [connectUrl, setConnectUrl] = (0, import_react.useState)(null);
+  const [webViewReady, setWebViewReady] = (0, import_react.useState)(false);
+  const isDark = (config == null ? void 0 : config.theme) === "dark";
+  const loaderBg = isDark ? "#0f0f0f" : "#ffffff";
+  const btnBg = (_b = (_a = mergedConfig == null ? void 0 : mergedConfig.cssVars) == null ? void 0 : _a["--kc-primary"]) != null ? _b : "#00c693";
+  const btnText = (_d = (_c = mergedConfig == null ? void 0 : mergedConfig.cssVars) == null ? void 0 : _c["--kc-primary-text"]) != null ? _d : "#ffffff";
+  async function handlePress() {
+    if (!mergedConfig) {
+      onConnectError(
+        new Error("No config provided. Call KryptosConnect.init() or pass a config prop.")
+      );
+      return;
+    }
+    setLoading(true);
+    try {
+      const result = await generateLinkToken();
+      if (!(result == null ? void 0 : result.link_token)) {
+        onConnectError(new Error("Failed to generate link token"));
+        return;
+      }
+      const url = getConnectUrl(
+        mergedConfig,
+        result.link_token,
+        integrationName,
+        result.isAuthorized
+      );
+      console.log("[Kryptos] connect URL:", url);
+      setConnectUrl(url);
+      setWebViewReady(false);
+      setModalVisible(true);
+    } catch (err) {
+      onConnectError(
+        new Error(err instanceof Error ? err.message : "Failed to generate link token")
+      );
+    } finally {
+      setLoading(false);
+    }
+  }
+  function handleClose() {
+    setModalVisible(false);
+    setConnectUrl(null);
+    setWebViewReady(false);
+  }
+  const handleMessage = (0, import_react.useCallback)(
+    (event) => {
+      var _a2, _b2;
+      let data;
+      try {
+        data = JSON.parse(event.nativeEvent.data);
+      } catch (e) {
+        return;
+      }
+      if (!data.kryptos) return;
+      switch (data.type) {
+        case "success":
+          handleClose();
+          onConnectSuccess(data.payload);
+          break;
+        case "error":
+          handleClose();
+          onConnectError(
+            new Error((_b2 = (_a2 = data.payload) == null ? void 0 : _a2.message) != null ? _b2 : "Connect failed")
+          );
+          break;
+        case "close":
+          handleClose();
+          onConnectError(new Error("Connection closed"));
+          break;
+        case "openUrl": {
+          const url = data.payload.url;
+          import_react_native.Linking.openURL(url).catch(
+            (err) => console.warn("[Kryptos] openUrl failed:", err)
+          );
+          break;
+        }
+        // The connect page may ask for a fresh token if the pre-fetched one expired
+        case "GENERATE_LINK_TOKEN":
+          generateLinkToken().then((result) => {
+            var _a3;
+            (_a3 = webViewRef.current) == null ? void 0 : _a3.injectJavaScript(
+              `(function(){
+                  var e = new MessageEvent('message', { data: ${JSON.stringify(JSON.stringify({ type: "LINK_TOKEN_RESPONSE", payload: result }))} });
+                  window.dispatchEvent(e);
+                  document.dispatchEvent(e);
+                })()`
+            );
+          }).catch((err) => {
+            var _a3, _b3;
+            (_b3 = webViewRef.current) == null ? void 0 : _b3.injectJavaScript(
+              `(function(){
+                  var e = new MessageEvent('message', { data: ${JSON.stringify(JSON.stringify({ type: "LINK_TOKEN_RESPONSE", payload: { error: (_a3 = err == null ? void 0 : err.message) != null ? _a3 : "error" } }))} });
+                  window.dispatchEvent(e);
+                  document.dispatchEvent(e);
+                })()`
+            );
+          });
+          break;
+      }
+    },
+    [generateLinkToken, onConnectSuccess, onConnectError]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_react_native.TouchableOpacity,
+    {
+      onPress: handlePress,
+      disabled: loading,
+      style: [styles.nativeButton, { height: buttonHeight, backgroundColor: btnBg }, style],
+      activeOpacity: 0.85
+    },
+    loading ? /* @__PURE__ */ import_react.default.createElement(import_react_native.Text, { style: [styles.nativeButtonText, { color: btnText }] }, labels.connecting) : /* @__PURE__ */ import_react.default.createElement(import_react_native.Text, { style: [styles.nativeButtonText, { color: btnText }] }, resolvedLabel)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_react_native.Modal,
+    {
+      visible: modalVisible,
+      animationType: "none",
+      transparent: true,
+      onRequestClose: handleClose,
+      statusBarTranslucent: true
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { style: styles.sheet }, (!webViewReady || !connectUrl) && /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { style: [styles.loader, { backgroundColor: loaderBg }] }, /* @__PURE__ */ import_react.default.createElement(import_react_native.ActivityIndicator, { color: "#00c693", size: "large" })), connectUrl && /* @__PURE__ */ import_react.default.createElement(
+      import_react_native_webview.WebView,
+      {
+        ref: webViewRef,
+        source: { uri: connectUrl },
+        onMessage: handleMessage,
+        onLoadEnd: () => setWebViewReady(true),
+        onError: (e) => {
+          console.log("[WebView onError]", e.nativeEvent);
+          handleClose();
+          onConnectError(new Error("Failed to load connect page"));
+        },
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        originWhitelist: ["*"],
+        style: [styles.webview, !webViewReady && styles.hidden],
+        pointerEvents: webViewReady ? "auto" : "none",
+        setSupportMultipleWindows: false,
+        allowsInlineMediaPlayback: true,
+        mediaPlaybackRequiresUserAction: false,
+        automaticallyAdjustContentInsets: false,
+        automaticallyAdjustsScrollIndicatorInsets: false,
+        contentInsetAdjustmentBehavior: "never",
+        keyboardDisplayRequiresUserAction: false,
+        injectedJavaScript: import_react_native.Platform.OS === "ios" ? IOS_HIDE_ACCESSORY_JS : void 0,
+        backgroundColor: "transparent"
+      }
+    ))
+  ));
+}
+function KryptosConnectProvider({ children, style }) {
+  return /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { style: [styles.providerContainer, style] }, children);
+}
+var styles = import_react_native.StyleSheet.create({
+  nativeButton: {
+    width: "100%",
+    borderRadius: 8,
+    backgroundColor: "#00c693",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  nativeButtonText: {
+    color: "#ffffff",
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  sheet: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    backgroundColor: "transparent",
+    overflow: "hidden"
+  },
+  webview: {
+    flex: 1
+  },
+  loader: __spreadProps(__spreadValues({}, import_react_native.StyleSheet.absoluteFillObject), {
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1
+  }),
+  providerContainer: {
+    flex: 1
+  },
+  hidden: {
+    opacity: 0,
+    position: "absolute",
+    width: 0,
+    height: 0
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KryptosConnect,
+  KryptosConnectButton,
+  KryptosConnectProvider
+});

package/dist/index.d.cts

@@ -0,0 +1,44 @@
+import type { StyleProp } from "react-native";
+import type { ViewStyle } from "react-native";
+
+export interface KryptosConfig {
+  appName: string;
+  appLogo?: string;
+  theme?: "light" | "dark" | "auto";
+  clientId?: string;
+  walletConnectProjectId?: string;
+  baseUrl?: string;
+  cdnBaseUrl?: string;
+  cssVars?: Record<string, string>;
+  [key: string]: unknown;
+}
+
+export type UserConsent = {
+  public_token: string;
+  [key: string]: unknown;
+};
+
+export interface KryptosConnectButtonProps {
+  config?: KryptosConfig;
+  generateLinkToken: () => Promise<{ link_token: string; isAuthorized?: boolean }>;
+  onConnectSuccess: (data: UserConsent | null) => void;
+  onConnectError: (error: Error) => void;
+  buttonLabel?: string;
+  buttonHeight?: number;
+  integrationName?: string;
+  extraConfig?: Record<string, unknown>;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface KryptosConnectProviderProps {
+  config?: KryptosConfig;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export declare const KryptosConnect: {
+  init(config: KryptosConfig): void;
+};
+
+export declare function KryptosConnectButton(props: KryptosConnectButtonProps): JSX.Element;
+export declare function KryptosConnectProvider(props: KryptosConnectProviderProps): JSX.Element;

package/dist/index.d.ts

@@ -1,80 +1,44 @@
-import React, { ReactNode } from 'react';
-import { ImageSourcePropType } from 'react-native';
+import type { StyleProp } from "react-native";
+import type { ViewStyle } from "react-native";
 
-type KryptosConfig = {
-    appName: string;
-    appLogo?: ReactNode | string | ImageSourcePropType;
-    theme?: "light" | "dark";
-    clientId: string;
-    walletConnectProjectId?: string;
-    baseUrl?: string;
-};
-type ClientInfo = {
-    name: string;
-    description: string | null;
-    scopes: string;
-    project_stage: string;
-};
-type KryptosUser = {
-    is_anonymous: boolean;
-    user: {
-        email: string | null;
-        first_name: string | null;
-    };
-    user_id: string;
-    workspace_id: string;
-    workspace_name: string;
-};
-type UserConsent = {
-    public_token: string;
+export interface KryptosConfig {
+  appName: string;
+  appLogo?: string;
+  theme?: "light" | "dark" | "auto";
+  clientId?: string;
+  walletConnectProjectId?: string;
+  baseUrl?: string;
+  cdnBaseUrl?: string;
+  cssVars?: Record<string, string>;
+  [key: string]: unknown;
+}
+
+export type UserConsent = {
+  public_token: string;
+  [key: string]: unknown;
 };
-interface KryptosConnectButtonProps {
-    onSuccess?: (userConsent: UserConsent | null) => void;
-    onError?: () => void;
-    generateLinkToken: () => Promise<{
-        link_token: string;
-        isAuthorized?: boolean;
-    }>;
-    children?: ReactNode;
-    style?: object;
-    buttonStyle?: object;
-    integrationName?: string;
-    textStyle?: object;
+
+export interface KryptosConnectButtonProps {
+  config?: KryptosConfig;
+  generateLinkToken: () => Promise<{ link_token: string; isAuthorized?: boolean }>;
+  onConnectSuccess: (data: UserConsent | null) => void;
+  onConnectError: (error: Error) => void;
+  buttonLabel?: string;
+  buttonHeight?: number;
+  integrationName?: string;
+  extraConfig?: Record<string, unknown>;
+  style?: StyleProp<ViewStyle>;
 }
 
-declare const KryptosConnectButton: React.FC<KryptosConnectButtonProps>;
-interface KryptosConnectModalProps {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    onSuccess?: (userConsent: UserConsent | null) => void;
-    onError?: (error?: any) => void;
-    generateLinkToken: () => Promise<{
-        link_token: string;
-        isAuthorized?: boolean;
-    }>;
-    integrationName?: string;
+export interface KryptosConnectProviderProps {
+  config?: KryptosConfig;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
 }
-declare const KryptosConnectModal: React.FC<KryptosConnectModalProps>;
 
-type KryptosContextType = KryptosConfig & {
-    isInitialized: boolean;
-    setIsInitialized: (value: boolean) => void;
-    linkToken: string;
-    setLinkToken: (value: string) => void;
-    user: KryptosUser | null;
-    setUser: (value: KryptosUser | null) => void;
-    email: string;
-    setEmail: (value: string) => void;
-    userConsent: UserConsent | null;
-    setUserConsent: (value: UserConsent | null) => void;
-    clientInfo: ClientInfo | null;
-    isAuthorized: boolean;
-    setIsAuthorized: (value: boolean) => void;
+export declare const KryptosConnect: {
+  init(config: KryptosConfig): void;
 };
-declare const KryptosConnectProvider: React.FC<{
-    children: React.ReactNode;
-    config: KryptosConfig;
-}>;
-declare const useKryptosConnect: () => KryptosContextType;
 
-export { KryptosConnectButton, type KryptosConnectButtonProps, KryptosConnectModal, KryptosConnectProvider, useKryptosConnect };
+export declare function KryptosConnectButton(props: KryptosConnectButtonProps): JSX.Element;
+export declare function KryptosConnectProvider(props: KryptosConnectProviderProps): JSX.Element;