@methodfi/opal-react 0.0.1 → 1.1.0

package/README.md

@@ -33,35 +33,36 @@ export default function App() {
 Use the `useOpal` hook in your components:
 
 ```tsx
-import { useOpal } from '@methodfi/opal-react';
+import { useOpal, OpalEventType } from '@methodfi/opal-react';
 
 function Screen() {
-  const { open } = useOpal({
+  const { open, close, isOpen, error } = useOpal({
     env: 'dev',
     onOpen: () => {},
     onExit: () => {},
-    onError: (error) => console.error('Error:', error),
-    onEvent: (event) => {
+    onEvent: event => {
       switch (event.type) {
-        case 'opal.session.started': { /* ... */ }
-        case 'opal.session.errored': { /* ... */ }
-        case 'opal.session.exited': { /* ... */ }
-        case 'card_connect.card.verified': { /* ... */ }
-        // See events section
+        case OpalEventType.SESSION_STARTED:
+          // ...
+          break;
+        case OpalEventType.SESSION_COMPLETED:
+          // ...
+          break;
+        case OpalEventType.SESSION_ERRORED:
+          // ...
+          break;
+        case OpalEventType.SESSION_EXITED:
+          // ...
+          break;
       }
     },
   });
 
   const onLaunchOpal = async () => {
-    // Resulting token from POST /opal/token (otkn_*)
-    const token = await getOpalToken();
+    const token = await getOpalToken(); // POST /opal/token
     open({ token });
   };
 
-  return (
-    <button onClick={onLaunchOpal}>
-      Launch Opal
-    </button>
-  );
+  return <button onClick={onLaunchOpal}>Launch Opal</button>;
 }
-```
+```

package/dist/index.d.ts

@@ -1,76 +1,56 @@
 import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type OpalEnvironment = 'local' | 'dev' | 'sandbox' | 'production';
 type OpalMode = 'opal' | 'card_connect' | 'account_verification' | string;
 type OpalEventObject = 'session' | 'card' | 'account' | 'bank' | string;
 type OpalEventAction = 'started' | 'errored' | 'exited' | 'verified' | 'completed' | string;
-type OpalEventType = 'opal.session.started' | 'opal.session.errored' | 'opal.session.exited' | 'card_connect.session.started' | 'card_connect.session.errored' | 'card_connect.card.verified' | 'account_verification.session.started' | 'account_verification.session.errored' | 'account_verification.account.verified' | string;
+declare const OpalEventType: {
+    readonly SESSION_STARTED: "opal.session.started";
+    readonly SESSION_ERRORED: "opal.session.errored";
+    readonly SESSION_EXITED: "opal.session.exited";
+    readonly SESSION_COMPLETED: "opal.session.completed";
+};
+type OpalEventType = 'opal.session.started' | 'opal.session.errored' | 'opal.session.exited' | 'opal.session.completed';
 /**
  * Structured event object matching Method's Opal event format
- * Events follow the pattern: <mode>.<object>.<action>
+ * Types follow the pattern: <mode>.<object>.<action>, which is
+ * also split up into those properties for convenience.
  */
 interface OpalEvent {
-    /** The type of event, formatted as <mode>.<object>.<action> */
     type: OpalEventType;
-    /** The operational mode associated with the event (e.g., 'card_connect') */
     mode: OpalMode;
-    /** The object the event is related to (e.g., 'card', 'session') */
     object: OpalEventObject;
-    /** The action that occurred (e.g., 'started', 'verified', 'errored') */
     action: OpalEventAction;
-    /** The ISO 8601 timestamp of when the event occurred */
     timestamp: string;
-    /** Additional context or details related to the event (varies by event type) */
     data?: OpalEventData | null;
 }
 /**
  * Error data structure for Opal session errors
  */
 interface OpalErrorData {
-    /** Error type identifier */
     type: string;
-    /** Error sub-type for more specific categorization */
     sub_type?: string;
-    /** Human-readable error message */
     message: string;
 }
-/**
- * Card verification event data
- */
-interface CardVerifiedEventData {
-    /** The account ID of the verified card */
-    account: string;
-    /** Additional metadata about the card verification */
-    metadata?: Record<string, any>;
-}
-/**
- * Account verification event data
- */
-interface AccountVerifiedEventData {
-    /** The account ID of the verified account */
-    account: string;
-    /** Account verification details */
-    account_verification?: {
-        account_id: string;
-        type: string;
-        [key: string]: any;
-    };
-    /** Additional metadata */
-    metadata?: Record<string, any>;
-}
 /**
  * Union type for all possible event data structures
  */
-type OpalEventData = OpalErrorData | CardVerifiedEventData | AccountVerifiedEventData | Record<string, any>;
-/**
- * Legacy error interface for backward compatibility
- */
-interface OpalError {
-    code: string;
-    message: string;
-    type: 'api_error' | 'connection_error' | 'validation_error';
-}
+type OpalEventData = OpalErrorData | OpalIdentityEventData | OpalConnectEventData | OpalCardConnectEventData | OpalAccountVerificationEventData;
+type OpalIdentityEventData = {
+    entity_id: string;
+};
+type OpalConnectEventData = {
+    entity_id: string;
+    accounts: string[];
+};
+type OpalCardConnectEventData = {
+    entity_id: string;
+    accounts: string[];
+};
+type OpalAccountVerificationEventData = {
+    entity_id: string;
+    accounts: string[];
+};
 /**
  * Configuration object for the useOpal hook
  */
@@ -83,19 +63,6 @@ interface OpalConfig {
     onExit?: (data?: any) => void;
     /** Called for all Opal events with properly typed event object */
     onEvent?: (event: OpalEvent) => void;
-    /** Called when an error occurs */
-    onError?: (error: OpalErrorData) => void;
-    /** Called on successful completion */
-    onSuccess?: (data: OpalSuccessData) => void;
-}
-/**
- * Success data structure for completed Opal sessions
- */
-interface OpalSuccessData {
-    /** The session ID of the completed session */
-    sessionId: string;
-    /** Additional metadata from the session */
-    metadata?: Record<string, any>;
 }
 /**
  * Options for opening an Opal session
@@ -104,46 +71,14 @@ interface OpalOpenOptions {
     /** The Opal token (otkn_*) obtained from POST /opal/token */
     token: string;
 }
-/**
- * Legacy message interface - use OpalEvent instead
- * @deprecated Use OpalEvent for better type safety
- */
-interface OpalMessage {
-    type: string;
-    mode: string;
-    object: string;
-    action: string;
-    timestamp: string;
-}
 /**
  * Return type for the useOpal hook
  */
 interface UseOpalReturn {
-    /** Opens Opal with the provided token and options */
     open: (options: OpalOpenOptions) => void;
-    /** Closes the current Opal session */
     close: () => void;
-    /** Whether Opal is loaded and ready for interaction */
-    isReady: boolean;
-    /** Whether Opal is currently open */
     isOpen: boolean;
-    /** Current error state, if any */
-    error: OpalError | OpalErrorData | null;
-}
-/**
- * Props for the OpalIframe component
- */
-interface OpalIframeProps {
-    /** The Opal token */
-    token: string;
-    /** The full Opal URL with token */
-    opalUrl: string;
-    /** Callback for handling iframe messages */
-    onMessage: (message: OpalEvent) => void;
-    /** Callback for when the iframe should be closed */
-    onClose: () => void;
-    /** Optional styles for the iframe container */
-    style?: React.CSSProperties;
+    error: OpalErrorData | null;
 }
 
 interface OpalProviderProps {
@@ -167,7 +102,6 @@ interface OpalProviderProps {
  * ```
  */
 declare function OpalProvider({ children }: OpalProviderProps): JSX.Element;
-
 /**
  * Hook for interacting with Opal within an OpalProvider context.
  * This hook allows you to configure event handlers and open/close Opal sessions.
@@ -175,21 +109,26 @@ declare function OpalProvider({ children }: OpalProviderProps): JSX.Element;
  *
  * @example
  * ```tsx
- * const { open, close, isReady, isOpen, error } = useOpal({
+ * const { open, close, isOpen, error } = useOpal({
  *   env: 'dev',
  *   onOpen: () => console.log('Opal opened'),
  *   onExit: () => console.log('Opal closed'),
  *   onEvent: (event) => {
  *     switch (event.type) {
- *       case 'opal.session.started':
+ *       case OpalEventType.SESSION_STARTED:
  *         console.log('Session started');
  *         break;
- *       case 'card_connect.card.verified':
- *         console.log('Card verified:', event.data);
+ *       case OpalEventType.SESSION_COMPLETED:
+ *         console.log('Session completed:', event.data);
+ *         break;
+ *       case OpalEventType.SESSION_EXITED:
+ *         console.log('Session exited:', event.data);
+ *         break;
+ *       case OpalEventType.SESSION_ERRORED:
+ *         console.log('Session errored:', event.data);
  *         break;
  *     }
  *   },
- *   onError: (error) => console.error('Opal error:', error),
  * });
  *
  * // Open Opal with a token
@@ -204,7 +143,4 @@ declare function OpalProvider({ children }: OpalProviderProps): JSX.Element;
  */
 declare function useOpal(config?: OpalConfig): UseOpalReturn;
 
-declare function OpalIframe({ token, opalUrl, onMessage, style, }: OpalIframeProps): react_jsx_runtime.JSX.Element | null;
-
-export { OpalIframe, OpalProvider, useOpal };
-export type { AccountVerifiedEventData, CardVerifiedEventData, OpalConfig, OpalEnvironment, OpalError, OpalErrorData, OpalEvent, OpalEventAction, OpalEventData, OpalEventObject, OpalEventType, OpalIframeProps, OpalMessage, OpalMode, OpalOpenOptions, OpalSuccessData, UseOpalReturn };
+export { OpalEventType, OpalProvider, useOpal };