@methodfi/opal-react 1.4.1 → 1.4.3

package/dist/index.d.ts

@@ -6,7 +6,7 @@ declare const OpalMode: {
     readonly CONNECT: "connect";
     readonly CARD_CONNECT: "card_connect";
     readonly ACCOUNT_VERIFICATION: "account_verification";
-    readonly IDENTITY: "identity";
+    readonly IDENTITY: "identity_verification";
     readonly TRANSACTIONS: "transactions";
 };
 type OpalMode = (typeof OpalMode)[keyof typeof OpalMode];
@@ -81,6 +81,7 @@ type OpalAccountVerificationEventData = {
     entity_id: string;
     accounts: string[];
 };
+type AppearanceMode = 'light' | 'dark' | 'system';
 /**
  * Configuration object for the useOpal hook
  */
@@ -100,6 +101,8 @@ interface OpalConfig {
 interface OpalOpenOptions {
     /** The Opal token (otkn_*) obtained from POST /opal/token */
     token: string;
+    /** Appearance mode: 'light', 'dark', or 'system' (uses OS preference) */
+    appearance?: AppearanceMode;
 }
 /**
  * Return type for the useOpal hook
@@ -161,10 +164,10 @@ declare function OpalProvider({ children }: OpalProviderProps): JSX.Element;
  *   },
  * });
  *
- * // Open Opal with a token
+ * // Open Opal with a token and appearance
  * const handleOpenOpal = async () => {
  *   const token = await getOpalToken(); // Your token fetching logic
- *   open({ token });
+ *   open({ token, appearance: 'dark' });
  * };
  * ```
  *
@@ -174,3 +177,4 @@ declare function OpalProvider({ children }: OpalProviderProps): JSX.Element;
 declare function useOpal(config?: OpalConfig): UseOpalReturn;
 
 export { OpalEventType, OpalMode, OpalProvider, useOpal };
+export type { AppearanceMode };

package/dist/index.js

@@ -1,5 +1,5 @@
 'use client';
-import React, { useState, createContext, useEffect, useRef, useCallback, useContext } from 'react';
+import React, { useState, createContext, useEffect, useCallback, useContext } from 'react';
 
 // Opal modes supported by the SDK
 const OpalMode = {
@@ -7,7 +7,7 @@ const OpalMode = {
     CONNECT: 'connect',
     CARD_CONNECT: 'card_connect',
     ACCOUNT_VERIFICATION: 'account_verification',
-    IDENTITY: 'identity',
+    IDENTITY: 'identity_verification',
     TRANSACTIONS: 'transactions'
 };
 // Common Opal event types - supports card_connect and account_verification modes
@@ -78,6 +78,7 @@ const OpalContext = /*#__PURE__*/ createContext(null);
     const [error, setError] = useState(null);
     const [currentToken, setCurrentToken] = useState(null);
     const [currentConfig, setCurrentConfig] = useState({});
+    const [pendingAppearance, setPendingAppearance] = useState(undefined);
     const environment = currentConfig.env || 'production';
     const baseUrl = OPAL_URLS[environment];
     const opalUrl = currentToken ? `${baseUrl}/?token=${currentToken}` : '';
@@ -100,6 +101,7 @@ const OpalContext = /*#__PURE__*/ createContext(null);
     };
     const open = (options)=>{
         setCurrentToken(options.token);
+        setPendingAppearance(options.appearance);
         setIsOpen(true);
         setError(null);
         currentConfig.onOpen == null ? void 0 : currentConfig.onOpen.call(currentConfig);
@@ -126,8 +128,10 @@ const OpalContext = /*#__PURE__*/ createContext(null);
     }, children, isOpen && currentToken && /*#__PURE__*/ React.createElement(OpalIframe, {
         token: currentToken,
         opalUrl: opalUrl,
+        baseUrl: baseUrl,
         onMessage: handleMessage,
         onClose: close,
+        initialAppearance: pendingAppearance,
         style: {
             position: 'fixed',
             inset: 0,
@@ -174,10 +178,10 @@ function useOpalContext() {
  *   },
  * });
  *
- * // Open Opal with a token
+ * // Open Opal with a token and appearance
  * const handleOpenOpal = async () => {
  *   const token = await getOpalToken(); // Your token fetching logic
- *   open({ token });
+ *   open({ token, appearance: 'dark' });
  * };
  * ```
  *
@@ -196,8 +200,8 @@ function useOpalContext() {
         error: context.error
     };
 }
-function OpalIframe({ token, opalUrl, onMessage, style }) {
-    const iframeRef = useRef(null);
+function OpalIframe({ token, opalUrl, baseUrl, onMessage, style, initialAppearance }) {
+    const iframeRef = React.useRef(null);
     const handleMessage = useCallback((event)=>{
         // Check if the event is from an allowed origin
         const allowedOrigins = [
@@ -237,6 +241,19 @@ function OpalIframe({ token, opalUrl, onMessage, style }) {
     }, [
         handleMessage
     ]);
+    const handleLoad = useCallback(()=>{
+        var _iframeRef_current;
+        // Set initial appearance when iframe loads
+        if (initialAppearance && ((_iframeRef_current = iframeRef.current) == null ? void 0 : _iframeRef_current.contentWindow)) {
+            iframeRef.current.contentWindow.postMessage({
+                type: 'OPAL_SET_APPEARANCE',
+                appearance: initialAppearance
+            }, baseUrl);
+        }
+    }, [
+        initialAppearance,
+        baseUrl
+    ]);
     if (!token || !opalUrl) {
         return null;
     }
@@ -245,7 +262,8 @@ function OpalIframe({ token, opalUrl, onMessage, style }) {
         src: opalUrl,
         style: style,
         sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation",
-        title: "Opal"
+        title: "Opal",
+        onLoad: handleLoad
     });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@methodfi/opal-react",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "React SDK for Opal integration",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",