@lumiapassport/ui-kit 1.13.9 → 1.13.11

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.8</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.13.11</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -2786,6 +2786,259 @@ var DKGManager = class extends TokenRefreshApiClient {
   }
 };
 
+// src/iframe/lib/onramp/utils.ts
+var LP_JWT_TOKENS_LS_KEY = "lumia-passport-jwt-tokens";
+function getBearer() {
+  try {
+    const sessionString = localStorage.getItem(LP_JWT_TOKENS_LS_KEY);
+    if (!sessionString) return null;
+    const session = JSON.parse(sessionString);
+    if (session && typeof session.accessToken === "string" && typeof session.userId === "string") {
+      return `Bearer ${session.accessToken}`;
+    }
+    return null;
+  } catch (error) {
+    console.error("Failed to parse Lumia Passport session:", error);
+    return null;
+  }
+}
+
+// src/iframe/lib/onramp/binance.ts
+var API_DOMAIN = "https://api.lumiapassport.com/on-ramp";
+var BinanceOnrampAPI = class {
+  async checkIsLumaiAvailableQuery() {
+    const auth = getBearer();
+    const response = await fetch(`${API_DOMAIN}/api/binance/pairs`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...auth && { Authorization: auth }
+      }
+    });
+    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() {
+    const auth = getBearer();
+    const response = await fetch(`${API_DOMAIN}/api/binance/networks`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...auth && { Authorization: auth }
+      }
+    });
+    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) {
+    const auth = getBearer();
+    const response = await fetch(`${API_DOMAIN}/api/binance/modes`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...auth && { Authorization: auth }
+      },
+      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) {
+    const auth = getBearer();
+    const response = await fetch(`${API_DOMAIN}/api/binance/quote`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...auth && { Authorization: auth }
+      },
+      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) {
+    const auth = getBearer();
+    const response = await fetch(`${API_DOMAIN}/api/binance/pre-order`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...auth && { Authorization: auth }
+      },
+      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, sendResponseFn) {
+    const { type, messageId, data } = message;
+    console.log("[ BINANCE Received message ]", type, message);
+    switch (type) {
+      case "BINANCE_CHECK_IS_LUMIA_AVAILABLE_QUERY":
+        const isLumiaAvalableRes = await this.checkIsLumaiAvailableQuery();
+        sendResponseFn(messageId, isLumiaAvalableRes, origin);
+        break;
+      case "BINANCE_GET_LUMIA_NETWORK_QUERY":
+        const lumiaNetworkResponse = await this.getLumiaNetworkQuery();
+        sendResponseFn(messageId, lumiaNetworkResponse, origin);
+        break;
+      case "BINANCE_GET_PAYMENT_METHODS_QUERY":
+        const paymentMethodsResponse = await this.getPaymentMethodsQuery(this.ensurePayload(data, "methods"));
+        sendResponseFn(messageId, paymentMethodsResponse, origin);
+        break;
+      case "BINANCE_GET_QUOTE_QUERY":
+        const quoteResponse = await this.getQuoteQuery(this.ensurePayload(data, "quote"));
+        sendResponseFn(messageId, quoteResponse, origin);
+        break;
+      case "BINANCE_CREATE_PREORDER_MUTATION":
+        const preorderResponse = await this.createPreorderMutation(this.ensurePayload(data, "preorder"));
+        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 {
+  async getRampnowConfigQuery() {
+    const auth = getBearer();
+    const response = await fetch(`${API_DOMAIN2}/api/rampnow/cfg`, {
+      method: "GET",
+      headers: { ...auth && { Authorization: auth } }
+    });
+    const data = await response.json();
+    return data;
+  }
+  async getRampOrderQuoteQuery(payload) {
+    const auth = getBearer();
+    const response = await fetch(`${API_DOMAIN2}/api/rampnow/quote`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...auth && { Authorization: auth }
+      },
+      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, sendResponseFn) {
+    const { type, data, messageId } = message;
+    console.log("[ BINANCE Received message ]", type, message);
+    switch (type) {
+      case "RAMPNOW_GET_CONFIG":
+        const ramnowCfg = await this.getRampnowConfigQuery();
+        sendResponseFn(messageId, ramnowCfg, origin);
+        break;
+      case "RAMPNOW_GET_ORDER_QUOTE":
+        const orderQuote = await this.getRampOrderQuoteQuery(this.ensureOrderQuotePayload(data));
+        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 +3052,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 +3217,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 +3260,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,7 +4258,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.13.8";
+var IFRAME_VERSION = "1.13.11";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));
@@ -4025,6 +4273,8 @@ var IframeWallet = class {
     this.storage = new StorageManager();
     this.trustedApps = new TrustedAppsManager();
     this.backupManager = new BackupManager();
+    this.binance = new BinanceOnrampAPI();
+    this.rampnow = new RampnowOnrampAPI();
   }
   applyThemeColors() {
     try {
@@ -4076,54 +4326,61 @@ var IframeWallet = class {
   }
   async handleMessage(message, origin) {
     const { type, messageId, projectId } = message;
+    console.log("[IFRAME INTERNAL] message", type, message);
     try {
-      switch (type) {
-        case "SDK_AUTH":
+      switch (true) {
+        case type.startsWith("BINANCE_"):
+          await this.binance.handleMessage(message, origin, this.messenger.sendResponse.bind(this.messenger));
+          break;
+        case type.startsWith("RAMPNOW_"):
+          await this.rampnow.handleMessage(message, origin, this.messenger.sendResponse.bind(this.messenger));
+          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: