@lumiapassport/ui-kit 1.13.10 → 1.14.0

package/README.md

@@ -267,15 +267,14 @@ That's it! The `ConnectWalletButton` provides a complete authentication UI with
 
 ## Using Hooks
 
-> **Note:** The `useLumiaPassportSession` hook is based on pure Zustand store so if you already using hook consider 2 options: 1) refactor state extarction so it uses zustand state extraction feature. 2) consider using new session hooks: `useLumiaPassportAccountSession`, `useLumiaPassportAddress` etc. Otherwise you might experience excessive re-rendering issues
-
-### useLumiaPassportAccountSession, useLumiaPassportLoadingStatus, useLumiaPassportBalance, useLumiaPassportIFrameReady, useLumiaPassportAddress, useLumiaPassportError, useLumiaPassportLoadingStatus, useLumiaPassportRecoveryUserId, useLumiaPassportHasServerVault
+> **Note:** The `useLumiaPassportSession` hook is based on pure Zustand store so if you're already using useLumiaPassportSession hook please consider 2 options: 1) refactor state extarction so it uses zustand state extraction feature. 2) consider using dedicated LumiaPassport shared store values hooks: `useLumiaPassportAccountSession`, `useLumiaPassportAddress` etc. Otherwise you might experience excessive re-rendering issues as LumiaPassport shares its internal store and might update some state values which should not affect app render.
 
 ```tsx
 import { useLumiaPassportAccountSession, useLumiaPassportLoadingStatus } from '@lumiapassport/ui-kit'
 
 function MyComponent() {
-  const session = useLumiaPassportAccountSession() // const session = useLumiaPassportSession(s => s.session) - with prev hook &  Zustand state extraction feature
+  // const session = useLumiaPassportSession(s => s.session) - with prev hook & Zustand state extraction feature, please prefer this instead:
+  const session = useLumiaPassportAccountSession()
   const { isSessionLoading } = useLumiaPassportLoadingStatus()
 
   if (isSessionLoading) return <div>Loading...</div>
@@ -295,6 +294,18 @@ function MyComponent() {
 }
 ```
 
+### Lumia Passport shared store values hooks
+
+- **useLumiaPassportIsMobileView** - Returns boolean indicating if UI is in mobile view mode
+- **useLumiaPassportAccountSession** - Returns current user session object with userId, addresses, and auth info
+- **useLumiaPassportLoadingStatus** - Returns `{ isSessionLoading, sessionStatus }` for tracking authentication state
+- **useLumiaPassportBalance** - Returns wallet balance data: `{ walletBalance, fiatBalance, cryptoRate, fiatSymbol, cryptoSymbol }`
+- **useLumiaPassportIFrameReady** - Returns boolean indicating if the MPC iframe is ready for operations
+- **useLumiaPassportAddress** - Returns the current user's wallet address
+- **useLumiaPassportError** - Returns any error that occurred during authentication or operations
+- **useLumiaPassportRecoveryUserId** - Returns userId for account recovery flow
+- **useLumiaPassportHasServerVault** - Returns boolean indicating if user has server-side keyshare backup
+
 ### useSendTransaction - Send Transactions
 
 ```tsx

package/dist/iframe/index.html

@@ -15,7 +15,7 @@
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <title>Lumia Passport Secure Wallet - iframe version 1.13.10</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.14.0</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -2786,6 +2786,231 @@ var DKGManager = class extends TokenRefreshApiClient {
   }
 };
 
+// src/iframe/lib/onramp/binance.ts
+var API_DOMAIN = "https://api.lumiapassport.com/on-ramp";
+var BinanceOnrampAPI = class {
+  constructor(sendResponseFn) {
+    this.sendResponseFn = sendResponseFn;
+  }
+  async checkIsLumaiAvailableQuery(accessToken) {
+    const response = await fetch(`${API_DOMAIN}/api/binance/pairs`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...accessToken && { Authorization: `Bearer ${accessToken}` } }
+    });
+    const data = await response.json();
+    if (!data.success) {
+      throw new Error(`${data.code}: ${data.message}`);
+    }
+    if (!data.data?.cryptoCurrencies?.includes("LUMIA")) {
+      console.error("Lumia is not available in Binance pairs API");
+      throw new Error("Lumia is not available in API");
+    }
+    return !!data.data.cryptoCurrencies.includes("LUMIA");
+  }
+  async getLumiaNetworkQuery(accessToken) {
+    const response = await fetch(`${API_DOMAIN}/api/binance/networks`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...accessToken && { Authorization: `Bearer ${accessToken}` } }
+    });
+    const data = await response.json();
+    if (!data?.success) {
+      throw new Error(`${data.code}: ${data.message}`);
+    }
+    const lumiaNetwork = data.data?.find((el) => el.cryptoCurrency === "LUMIA") || null;
+    if (!lumiaNetwork) {
+      console.error("Lumia is not available in Binance pairs API");
+      throw new Error("Lumia is not available in API");
+    }
+    return lumiaNetwork;
+  }
+  async getPaymentMethodsQuery(payload, accessToken) {
+    const response = await fetch(`${API_DOMAIN}/api/binance/modes`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...accessToken && { Authorization: `Bearer ${accessToken}` } },
+      body: JSON.stringify(payload)
+    });
+    const data = await response.json();
+    if (!data.success) {
+      throw new Error(`${data.code}: ${data.message}`);
+    }
+    if (!data.data.paymentMethods.length) {
+      throw new Error("No payment methods available yet");
+    }
+    return data.data.paymentMethods;
+  }
+  async getQuoteQuery(payload, accessToken) {
+    const response = await fetch(`${API_DOMAIN}/api/binance/quote`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...accessToken && { Authorization: `Bearer ${accessToken}` } },
+      body: JSON.stringify(payload)
+    });
+    const data = await response.json();
+    if (!data.success) {
+      throw new Error(`${data.code}: ${data.message}`);
+    }
+    return data.data;
+  }
+  async createPreorderMutation(payload, accessToken) {
+    const response = await fetch(`${API_DOMAIN}/api/binance/pre-order`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...accessToken && { Authorization: `Bearer ${accessToken}` } },
+      body: JSON.stringify(payload)
+    });
+    const data = await response.json();
+    if (!data.success) {
+      throw new Error(`${data.code}: ${data.message}`);
+    }
+    return data.data;
+  }
+  async handleMessage(message, origin) {
+    const { type, messageId, data } = message;
+    const { accessToken } = message.data;
+    console.log("[ BINANCE Received message ]", type, message);
+    switch (type) {
+      case "BINANCE_CHECK_IS_LUMIA_AVAILABLE_QUERY":
+        const isLumiaAvalableRes = await this.checkIsLumaiAvailableQuery(accessToken);
+        this.sendResponseFn(messageId, isLumiaAvalableRes, origin);
+        break;
+      case "BINANCE_GET_LUMIA_NETWORK_QUERY":
+        const lumiaNetworkResponse = await this.getLumiaNetworkQuery(accessToken);
+        this.sendResponseFn(messageId, lumiaNetworkResponse, origin);
+        break;
+      case "BINANCE_GET_PAYMENT_METHODS_QUERY":
+        const paymentMethodsResponse = await this.getPaymentMethodsQuery(
+          this.ensurePayload(data, "methods"),
+          accessToken
+        );
+        this.sendResponseFn(messageId, paymentMethodsResponse, origin);
+        break;
+      case "BINANCE_GET_QUOTE_QUERY":
+        const quoteResponse = await this.getQuoteQuery(this.ensurePayload(data, "quote"), accessToken);
+        this.sendResponseFn(messageId, quoteResponse, origin);
+        break;
+      case "BINANCE_CREATE_PREORDER_MUTATION":
+        const preorderResponse = await this.createPreorderMutation(this.ensurePayload(data, "preorder"), accessToken);
+        this.sendResponseFn(messageId, preorderResponse, origin);
+        break;
+      default:
+        throw new Error(`[ BINANCE ]: Unknown message type: ${type}`);
+    }
+  }
+  ensurePayload(data, type) {
+    if (!data || typeof data !== "object") {
+      throw new Error(`Invalid payload: expected object, got ${typeof data}`);
+    }
+    const payload = data;
+    switch (type) {
+      case "methods":
+        if (typeof payload.totalAmount !== "string") {
+          throw new Error("Invalid payload: totalAmount must be a string");
+        }
+        return { totalAmount: payload.totalAmount };
+      case "quote":
+        if (typeof payload.network !== "string") {
+          throw new Error("Invalid payload: network must be a string");
+        }
+        if (typeof payload.walletAddress !== "string") {
+          throw new Error("Invalid payload: walletAddress must be a string");
+        }
+        if (typeof payload.requestedAmount !== "string") {
+          throw new Error("Invalid payload: requestedAmount must be a string");
+        }
+        return {
+          network: payload.network,
+          walletAddress: payload.walletAddress,
+          requestedAmount: payload.requestedAmount,
+          ...payload.payMethodCode && typeof payload.payMethodCode === "string" ? { payMethodCode: payload.payMethodCode } : {},
+          ...payload.payMethodSubCode && typeof payload.payMethodSubCode === "string" ? { payMethodSubCode: payload.payMethodSubCode } : {}
+        };
+      case "preorder":
+        if (typeof payload.requestedAmount !== "string") {
+          throw new Error("Invalid payload: requestedAmount must be a string");
+        }
+        if (typeof payload.address !== "string") {
+          throw new Error("Invalid payload: address must be a string");
+        }
+        if (typeof payload.network !== "string") {
+          throw new Error("Invalid payload: network must be a string");
+        }
+        return {
+          requestedAmount: payload.requestedAmount,
+          address: payload.address,
+          network: payload.network,
+          ...payload.payMethodCode && typeof payload.payMethodCode === "string" ? { payMethodCode: payload.payMethodCode } : {},
+          ...payload.payMethodSubCode && typeof payload.payMethodSubCode === "string" ? { payMethodSubCode: payload.payMethodSubCode } : {},
+          ...payload.redirectUrl && typeof payload.redirectUrl === "string" ? { redirectUrl: payload.redirectUrl } : {},
+          ...payload.failRedirectUrl && typeof payload.failRedirectUrl === "string" ? { failRedirectUrl: payload.failRedirectUrl } : {}
+        };
+      default:
+        throw new Error(`Unknown payload type: ${type}`);
+    }
+  }
+};
+
+// src/iframe/lib/onramp/rampnow.ts
+var API_DOMAIN2 = "https://api.lumiapassport.com/on-ramp";
+var RampnowOnrampAPI = class {
+  constructor(sendResponseFn) {
+    this.sendResponseFn = sendResponseFn;
+  }
+  async getRampnowConfigQuery(accessToken) {
+    const response = await fetch(`${API_DOMAIN2}/api/rampnow/cfg`, {
+      method: "GET",
+      headers: { ...accessToken && { Authorization: accessToken } }
+    });
+    const data = await response.json();
+    return data;
+  }
+  async getRampOrderQuoteQuery(payload, accessToken) {
+    const response = await fetch(`${API_DOMAIN2}/api/rampnow/quote`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...accessToken && { Authorization: accessToken }
+      },
+      body: JSON.stringify(payload)
+    });
+    const data = await response.json();
+    if (!data.data) {
+      throw new Error(`${data.code}: ${data.message}`);
+    }
+    return data;
+  }
+  ensureOrderQuotePayload(payload) {
+    if (typeof payload !== "object" || payload === null || typeof payload?.paymentMode !== "string" || typeof payload?.srcAmount !== "number" || typeof payload?.walletAddress !== "string") {
+      throw new Error("Invalid Ramp order quote payload");
+    }
+    return payload;
+  }
+  // UNUSED due to Rampnow APP redirect order flow
+  //   async ctreateChekoutOrderMutation(payload: CreateCheckoutOrderMutationPayload) {
+  //     const checkoutedOrderData = await axios
+  //       .post('/api/rampnow/order', payload)
+  //       .then((r) => r.data.data as CreateCheckoutOrderMutationResponse)
+  //       .catch((err) => {
+  //         throw new Error(err?.message || 'Ramp quote query failed')
+  //       })
+  //     return checkoutedOrderData
+  //   }
+  async handleMessage(message, origin) {
+    const { type, data, messageId } = message;
+    const { accessToken } = message.data;
+    console.log("[ RAMPNOW Received message ]", type, message);
+    switch (type) {
+      case "RAMPNOW_GET_CONFIG":
+        const ramnowCfg = await this.getRampnowConfigQuery(accessToken);
+        this.sendResponseFn(messageId, ramnowCfg, origin);
+        break;
+      case "RAMPNOW_GET_ORDER_QUOTE":
+        const orderQuote = await this.getRampOrderQuoteQuery(this.ensureOrderQuotePayload(data), accessToken);
+        this.sendResponseFn(messageId, orderQuote, origin);
+        break;
+      default:
+        throw new Error(`[ RAMPNOW ]: Unknown message type: ${type}`);
+    }
+  }
+};
+
 // src/iframe/lib/secure-messenger.ts
 var SecureMessenger = class {
   constructor() {
@@ -2799,7 +3024,7 @@ var SecureMessenger = class {
     this.NONCE_CLEANUP_INTERVAL = 5 * 60 * 1e3;
     // 5 minutes
     // Debug flag: set to true to log all filtered messages (for debugging only)
-    this.DEBUG_FILTERED_MESSAGES = false;
+    this.DEBUG_FILTERED_MESSAGES = true;
     setInterval(() => this.cleanupOldNonces(), this.NONCE_CLEANUP_INTERVAL);
   }
   /**
@@ -2964,9 +3189,10 @@ var SecureMessenger = class {
       "TRUSTED_APP_REMOVED",
       "TOKEN_REFRESHED"
     ];
-    if (!message.type || !validTypes.includes(message.type)) {
-      return false;
-    }
+    const validTypeGroups = ["BINANCE_", "RAMPNOW_"];
+    const isTypeValid = validTypes.includes(message.type);
+    const isGroupTypeValid = validTypeGroups.some((prefix) => message.type.startsWith(prefix));
+    if (!message.type || !isTypeValid && !isGroupTypeValid) return false;
     return !!(message.messageId && message.timestamp);
   }
   /**
@@ -3006,13 +3232,7 @@ var SecureMessenger = class {
     });
     const data = encoder3.encode(payload);
     const key = encoder3.encode(this.sessionToken);
-    const cryptoKey = await crypto.subtle.importKey(
-      "raw",
-      key,
-      { name: "HMAC", hash: "SHA-256" },
-      false,
-      ["sign"]
-    );
+    const cryptoKey = await crypto.subtle.importKey("raw", key, { name: "HMAC", hash: "SHA-256" }, false, ["sign"]);
     const signature = await crypto.subtle.sign("HMAC", cryptoKey, data);
     return Array.from(new Uint8Array(signature)).map((b) => b.toString(16).padStart(2, "0")).join("");
   }
@@ -4010,13 +4230,12 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.13.10";
+var IFRAME_VERSION = "1.14.0";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));
     console.log(`  Lumia Passport Secure Wallet - iframe version ${IFRAME_VERSION}`);
     console.log("=".repeat(60));
-    this.applyThemeColors();
     this.messenger = new SecureMessenger();
     this.sessionManager = new SessionManager();
     this.dkgManager = new DKGManager();
@@ -4025,35 +4244,37 @@ var IframeWallet = class {
     this.storage = new StorageManager();
     this.trustedApps = new TrustedAppsManager();
     this.backupManager = new BackupManager();
-  }
-  applyThemeColors() {
-    try {
-      const params = new URLSearchParams(window.location.search);
-      const bg = params.get("bg");
-      const text = params.get("text");
-      const textSec = params.get("textSec");
-      const border = params.get("border");
-      if (bg || text || textSec || border) {
-        const root = document.documentElement;
-        if (bg) {
-          root.style.setProperty("--iframe-bg", bg);
-          root.style.setProperty("--iframe-modal-bg", bg);
-        }
-        if (text) {
-          root.style.setProperty("--iframe-text", text);
-        }
-        if (textSec) {
-          root.style.setProperty("--iframe-text-secondary", textSec);
-        }
-        if (border) {
-          root.style.setProperty("--iframe-border", border);
-        }
-        console.log("[IframeWallet] Applied theme colors:", { bg, text, textSec, border });
-      }
-    } catch (error) {
-      console.warn("[IframeWallet] Failed to apply theme colors:", error);
-    }
-  }
+    this.binance = new BinanceOnrampAPI(this.messenger.sendResponse.bind(this.messenger));
+    this.rampnow = new RampnowOnrampAPI(this.messenger.sendResponse.bind(this.messenger));
+  }
+  // private applyThemeColors(): void {
+  //   try {
+  //     const params = new URLSearchParams(window.location.search)
+  //     const bg = params.get('bg')
+  //     const text = params.get('text')
+  //     const textSec = params.get('textSec')
+  //     const border = params.get('border')
+  //     if (bg || text || textSec || border) {
+  //       const root = document.documentElement
+  //       if (bg) {
+  //         root.style.setProperty('--iframe-bg', bg)
+  //         root.style.setProperty('--iframe-modal-bg', bg)
+  //       }
+  //       if (text) {
+  //         root.style.setProperty('--iframe-text', text)
+  //       }
+  //       if (textSec) {
+  //         root.style.setProperty('--iframe-text-secondary', textSec)
+  //       }
+  //       if (border) {
+  //         root.style.setProperty('--iframe-border', border)
+  //       }
+  //       console.log('[IframeWallet] Applied theme colors:', { bg, text, textSec, border })
+  //     }
+  //   } catch (error) {
+  //     console.warn('[IframeWallet] Failed to apply theme colors:', error)
+  //   }
+  // }
   async initialize() {
     if (window.location.hostname !== "localhost" && window.location.hostname !== "127.0.0.1" && !window.location.hostname.includes("lumiapassport.com")) {
       console.warn("[iframe] \u26A0\uFE0F Running on unexpected origin!");
@@ -4077,53 +4298,59 @@ var IframeWallet = class {
   async handleMessage(message, origin) {
     const { type, messageId, projectId } = message;
     try {
-      switch (type) {
-        case "SDK_AUTH":
+      switch (true) {
+        case type.startsWith("BINANCE_"):
+          await this.binance.handleMessage(message, origin);
+          break;
+        case type.startsWith("RAMPNOW_"):
+          await this.rampnow.handleMessage(message, origin);
+          break;
+        case type === "SDK_AUTH":
           await this.handleSDKAuth(message, origin);
           break;
-        case "AUTHENTICATE":
+        case type === "AUTHENTICATE":
           await this.handleAuthenticate(message, origin);
           break;
-        case "START_DKG":
+        case type === "START_DKG":
           await this.handleStartDKG(message, origin);
           break;
-        case "SIGN_TRANSACTION":
+        case type === "SIGN_TRANSACTION":
           await this.handleSignTransaction(message, origin);
           break;
-        case "SIGN_TYPED_DATA":
+        case type === "SIGN_TYPED_DATA":
           await this.handleSignTypedData(message, origin);
           break;
-        case "GET_ADDRESS":
+        case type === "GET_ADDRESS":
           await this.handleGetAddress(message, origin);
           break;
-        case "CHECK_KEYSHARE":
+        case type === "CHECK_KEYSHARE":
           await this.handleCheckKeyshare(message, origin);
           break;
-        case "GET_TRUSTED_APPS":
+        case type === "GET_TRUSTED_APPS":
           await this.handleGetTrustedApps(message, origin);
           break;
-        case "REMOVE_TRUSTED_APP":
+        case type === "REMOVE_TRUSTED_APP":
           await this.handleRemoveTrustedApp(message, origin);
           break;
-        case "CLEAR_AUTHORIZATIONS":
+        case type === "CLEAR_AUTHORIZATIONS":
           await this.handleClearAuthorizations(message, origin);
           break;
-        case "CREATE_BACKUP":
+        case type === "CREATE_BACKUP":
           await this.handleCreateBackup(message, origin);
           break;
-        case "GET_BACKUP_STATUS":
+        case type === "GET_BACKUP_STATUS":
           await this.handleGetBackupStatus(message, origin);
           break;
-        case "GET_CLOUD_PROVIDERS":
+        case type === "GET_CLOUD_PROVIDERS":
           await this.handleGetCloudProviders(message, origin);
           break;
-        case "RESTORE_BACKUP":
+        case type === "RESTORE_BACKUP":
           await this.handleRestoreBackup(message, origin);
           break;
-        case "RESTORE_FROM_FILE":
+        case type === "RESTORE_FROM_FILE":
           await this.handleRestoreFromFile(message, origin);
           break;
-        case "ENCRYPT_BACKUP_DATA":
+        case type === "ENCRYPT_BACKUP_DATA":
           await this.handleEncryptBackupData(message, origin);
           break;
         default: