@methodfi/opal-react 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,478 +1,20 @@
1
- 'use strict';
1
+ 'use client';
2
+ Object.defineProperty(exports, '__esModule', { value: true });
2
3
 
3
- var require$$0 = require('react');
4
+ var React = require('react');
4
5
 
5
- var jsxRuntime = {exports: {}};
6
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
6
7
 
7
- var reactJsxRuntime_production = {};
8
-
9
- /**
10
- * @license React
11
- * react-jsx-runtime.production.js
12
- *
13
- * Copyright (c) Meta Platforms, Inc. and affiliates.
14
- *
15
- * This source code is licensed under the MIT license found in the
16
- * LICENSE file in the root directory of this source tree.
17
- */
18
-
19
- var hasRequiredReactJsxRuntime_production;
20
-
21
- function requireReactJsxRuntime_production () {
22
- if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
23
- hasRequiredReactJsxRuntime_production = 1;
24
- var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
25
- REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
26
- function jsxProd(type, config, maybeKey) {
27
- var key = null;
28
- void 0 !== maybeKey && (key = "" + maybeKey);
29
- void 0 !== config.key && (key = "" + config.key);
30
- if ("key" in config) {
31
- maybeKey = {};
32
- for (var propName in config)
33
- "key" !== propName && (maybeKey[propName] = config[propName]);
34
- } else maybeKey = config;
35
- config = maybeKey.ref;
36
- return {
37
- $$typeof: REACT_ELEMENT_TYPE,
38
- type: type,
39
- key: key,
40
- ref: void 0 !== config ? config : null,
41
- props: maybeKey
42
- };
43
- }
44
- reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
45
- reactJsxRuntime_production.jsx = jsxProd;
46
- reactJsxRuntime_production.jsxs = jsxProd;
47
- return reactJsxRuntime_production;
48
- }
49
-
50
- var reactJsxRuntime_development = {};
51
-
52
- /**
53
- * @license React
54
- * react-jsx-runtime.development.js
55
- *
56
- * Copyright (c) Meta Platforms, Inc. and affiliates.
57
- *
58
- * This source code is licensed under the MIT license found in the
59
- * LICENSE file in the root directory of this source tree.
60
- */
61
-
62
- var hasRequiredReactJsxRuntime_development;
63
-
64
- function requireReactJsxRuntime_development () {
65
- if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
66
- hasRequiredReactJsxRuntime_development = 1;
67
- "production" !== process.env.NODE_ENV &&
68
- (function () {
69
- function getComponentNameFromType(type) {
70
- if (null == type) return null;
71
- if ("function" === typeof type)
72
- return type.$$typeof === REACT_CLIENT_REFERENCE
73
- ? null
74
- : type.displayName || type.name || null;
75
- if ("string" === typeof type) return type;
76
- switch (type) {
77
- case REACT_FRAGMENT_TYPE:
78
- return "Fragment";
79
- case REACT_PROFILER_TYPE:
80
- return "Profiler";
81
- case REACT_STRICT_MODE_TYPE:
82
- return "StrictMode";
83
- case REACT_SUSPENSE_TYPE:
84
- return "Suspense";
85
- case REACT_SUSPENSE_LIST_TYPE:
86
- return "SuspenseList";
87
- case REACT_ACTIVITY_TYPE:
88
- return "Activity";
89
- }
90
- if ("object" === typeof type)
91
- switch (
92
- ("number" === typeof type.tag &&
93
- console.error(
94
- "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
95
- ),
96
- type.$$typeof)
97
- ) {
98
- case REACT_PORTAL_TYPE:
99
- return "Portal";
100
- case REACT_CONTEXT_TYPE:
101
- return (type.displayName || "Context") + ".Provider";
102
- case REACT_CONSUMER_TYPE:
103
- return (type._context.displayName || "Context") + ".Consumer";
104
- case REACT_FORWARD_REF_TYPE:
105
- var innerType = type.render;
106
- type = type.displayName;
107
- type ||
108
- ((type = innerType.displayName || innerType.name || ""),
109
- (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
110
- return type;
111
- case REACT_MEMO_TYPE:
112
- return (
113
- (innerType = type.displayName || null),
114
- null !== innerType
115
- ? innerType
116
- : getComponentNameFromType(type.type) || "Memo"
117
- );
118
- case REACT_LAZY_TYPE:
119
- innerType = type._payload;
120
- type = type._init;
121
- try {
122
- return getComponentNameFromType(type(innerType));
123
- } catch (x) {}
124
- }
125
- return null;
126
- }
127
- function testStringCoercion(value) {
128
- return "" + value;
129
- }
130
- function checkKeyStringCoercion(value) {
131
- try {
132
- testStringCoercion(value);
133
- var JSCompiler_inline_result = !1;
134
- } catch (e) {
135
- JSCompiler_inline_result = true;
136
- }
137
- if (JSCompiler_inline_result) {
138
- JSCompiler_inline_result = console;
139
- var JSCompiler_temp_const = JSCompiler_inline_result.error;
140
- var JSCompiler_inline_result$jscomp$0 =
141
- ("function" === typeof Symbol &&
142
- Symbol.toStringTag &&
143
- value[Symbol.toStringTag]) ||
144
- value.constructor.name ||
145
- "Object";
146
- JSCompiler_temp_const.call(
147
- JSCompiler_inline_result,
148
- "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
149
- JSCompiler_inline_result$jscomp$0
150
- );
151
- return testStringCoercion(value);
152
- }
153
- }
154
- function getTaskName(type) {
155
- if (type === REACT_FRAGMENT_TYPE) return "<>";
156
- if (
157
- "object" === typeof type &&
158
- null !== type &&
159
- type.$$typeof === REACT_LAZY_TYPE
160
- )
161
- return "<...>";
162
- try {
163
- var name = getComponentNameFromType(type);
164
- return name ? "<" + name + ">" : "<...>";
165
- } catch (x) {
166
- return "<...>";
167
- }
168
- }
169
- function getOwner() {
170
- var dispatcher = ReactSharedInternals.A;
171
- return null === dispatcher ? null : dispatcher.getOwner();
172
- }
173
- function UnknownOwner() {
174
- return Error("react-stack-top-frame");
175
- }
176
- function hasValidKey(config) {
177
- if (hasOwnProperty.call(config, "key")) {
178
- var getter = Object.getOwnPropertyDescriptor(config, "key").get;
179
- if (getter && getter.isReactWarning) return false;
180
- }
181
- return void 0 !== config.key;
182
- }
183
- function defineKeyPropWarningGetter(props, displayName) {
184
- function warnAboutAccessingKey() {
185
- specialPropKeyWarningShown ||
186
- ((specialPropKeyWarningShown = true),
187
- console.error(
188
- "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
189
- displayName
190
- ));
191
- }
192
- warnAboutAccessingKey.isReactWarning = true;
193
- Object.defineProperty(props, "key", {
194
- get: warnAboutAccessingKey,
195
- configurable: true
196
- });
197
- }
198
- function elementRefGetterWithDeprecationWarning() {
199
- var componentName = getComponentNameFromType(this.type);
200
- didWarnAboutElementRef[componentName] ||
201
- ((didWarnAboutElementRef[componentName] = true),
202
- console.error(
203
- "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
204
- ));
205
- componentName = this.props.ref;
206
- return void 0 !== componentName ? componentName : null;
207
- }
208
- function ReactElement(
209
- type,
210
- key,
211
- self,
212
- source,
213
- owner,
214
- props,
215
- debugStack,
216
- debugTask
217
- ) {
218
- self = props.ref;
219
- type = {
220
- $$typeof: REACT_ELEMENT_TYPE,
221
- type: type,
222
- key: key,
223
- props: props,
224
- _owner: owner
225
- };
226
- null !== (void 0 !== self ? self : null)
227
- ? Object.defineProperty(type, "ref", {
228
- enumerable: false,
229
- get: elementRefGetterWithDeprecationWarning
230
- })
231
- : Object.defineProperty(type, "ref", { enumerable: false, value: null });
232
- type._store = {};
233
- Object.defineProperty(type._store, "validated", {
234
- configurable: false,
235
- enumerable: false,
236
- writable: true,
237
- value: 0
238
- });
239
- Object.defineProperty(type, "_debugInfo", {
240
- configurable: false,
241
- enumerable: false,
242
- writable: true,
243
- value: null
244
- });
245
- Object.defineProperty(type, "_debugStack", {
246
- configurable: false,
247
- enumerable: false,
248
- writable: true,
249
- value: debugStack
250
- });
251
- Object.defineProperty(type, "_debugTask", {
252
- configurable: false,
253
- enumerable: false,
254
- writable: true,
255
- value: debugTask
256
- });
257
- Object.freeze && (Object.freeze(type.props), Object.freeze(type));
258
- return type;
259
- }
260
- function jsxDEVImpl(
261
- type,
262
- config,
263
- maybeKey,
264
- isStaticChildren,
265
- source,
266
- self,
267
- debugStack,
268
- debugTask
269
- ) {
270
- var children = config.children;
271
- if (void 0 !== children)
272
- if (isStaticChildren)
273
- if (isArrayImpl(children)) {
274
- for (
275
- isStaticChildren = 0;
276
- isStaticChildren < children.length;
277
- isStaticChildren++
278
- )
279
- validateChildKeys(children[isStaticChildren]);
280
- Object.freeze && Object.freeze(children);
281
- } else
282
- console.error(
283
- "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
284
- );
285
- else validateChildKeys(children);
286
- if (hasOwnProperty.call(config, "key")) {
287
- children = getComponentNameFromType(type);
288
- var keys = Object.keys(config).filter(function (k) {
289
- return "key" !== k;
290
- });
291
- isStaticChildren =
292
- 0 < keys.length
293
- ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
294
- : "{key: someKey}";
295
- didWarnAboutKeySpread[children + isStaticChildren] ||
296
- ((keys =
297
- 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
298
- console.error(
299
- 'A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',
300
- isStaticChildren,
301
- children,
302
- keys,
303
- children
304
- ),
305
- (didWarnAboutKeySpread[children + isStaticChildren] = true));
306
- }
307
- children = null;
308
- void 0 !== maybeKey &&
309
- (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
310
- hasValidKey(config) &&
311
- (checkKeyStringCoercion(config.key), (children = "" + config.key));
312
- if ("key" in config) {
313
- maybeKey = {};
314
- for (var propName in config)
315
- "key" !== propName && (maybeKey[propName] = config[propName]);
316
- } else maybeKey = config;
317
- children &&
318
- defineKeyPropWarningGetter(
319
- maybeKey,
320
- "function" === typeof type
321
- ? type.displayName || type.name || "Unknown"
322
- : type
323
- );
324
- return ReactElement(
325
- type,
326
- children,
327
- self,
328
- source,
329
- getOwner(),
330
- maybeKey,
331
- debugStack,
332
- debugTask
333
- );
334
- }
335
- function validateChildKeys(node) {
336
- "object" === typeof node &&
337
- null !== node &&
338
- node.$$typeof === REACT_ELEMENT_TYPE &&
339
- node._store &&
340
- (node._store.validated = 1);
341
- }
342
- var React = require$$0,
343
- REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
344
- REACT_PORTAL_TYPE = Symbol.for("react.portal"),
345
- REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
346
- REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
347
- REACT_PROFILER_TYPE = Symbol.for("react.profiler");
348
- var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
349
- REACT_CONTEXT_TYPE = Symbol.for("react.context"),
350
- REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
351
- REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
352
- REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
353
- REACT_MEMO_TYPE = Symbol.for("react.memo"),
354
- REACT_LAZY_TYPE = Symbol.for("react.lazy"),
355
- REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
356
- REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
357
- ReactSharedInternals =
358
- React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
359
- hasOwnProperty = Object.prototype.hasOwnProperty,
360
- isArrayImpl = Array.isArray,
361
- createTask = console.createTask
362
- ? console.createTask
363
- : function () {
364
- return null;
365
- };
366
- React = {
367
- "react-stack-bottom-frame": function (callStackForError) {
368
- return callStackForError();
369
- }
370
- };
371
- var specialPropKeyWarningShown;
372
- var didWarnAboutElementRef = {};
373
- var unknownOwnerDebugStack = React["react-stack-bottom-frame"].bind(
374
- React,
375
- UnknownOwner
376
- )();
377
- var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
378
- var didWarnAboutKeySpread = {};
379
- reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
380
- reactJsxRuntime_development.jsx = function (type, config, maybeKey, source, self) {
381
- var trackActualOwner =
382
- 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
383
- return jsxDEVImpl(
384
- type,
385
- config,
386
- maybeKey,
387
- false,
388
- source,
389
- self,
390
- trackActualOwner
391
- ? Error("react-stack-top-frame")
392
- : unknownOwnerDebugStack,
393
- trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
394
- );
395
- };
396
- reactJsxRuntime_development.jsxs = function (type, config, maybeKey, source, self) {
397
- var trackActualOwner =
398
- 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
399
- return jsxDEVImpl(
400
- type,
401
- config,
402
- maybeKey,
403
- true,
404
- source,
405
- self,
406
- trackActualOwner
407
- ? Error("react-stack-top-frame")
408
- : unknownOwnerDebugStack,
409
- trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
410
- );
411
- };
412
- })();
413
- return reactJsxRuntime_development;
414
- }
415
-
416
- if (process.env.NODE_ENV === 'production') {
417
- jsxRuntime.exports = requireReactJsxRuntime_production();
418
- } else {
419
- jsxRuntime.exports = requireReactJsxRuntime_development();
420
- }
421
-
422
- var jsxRuntimeExports = jsxRuntime.exports;
423
-
424
- function OpalIframe({ token, opalUrl, onMessage, style, }) {
425
- const iframeRef = require$$0.useRef(null);
426
- const handleMessage = require$$0.useCallback((event) => {
427
- var _a;
428
- // Check if the event is from an allowed origin
429
- const allowedOrigins = [
430
- 'https://opal.production.methodfi.com',
431
- 'https://opal.sandbox.methodfi.com',
432
- 'https://opal.dev.methodfi.com',
433
- 'http://localhost:3000'
434
- ];
435
- if (!allowedOrigins.includes(event.origin)) {
436
- return;
437
- }
438
- try {
439
- // Forward the properly structured event
440
- if ((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) {
441
- onMessage(event.data);
442
- }
443
- }
444
- catch (error) {
445
- onMessage({
446
- type: 'opal.session.errored',
447
- mode: 'opal',
448
- object: 'session',
449
- action: 'errored',
450
- timestamp: new Date().toISOString(),
451
- data: null,
452
- });
453
- }
454
- }, [onMessage]);
455
- require$$0.useEffect(() => {
456
- // Add event listener for iframe messages
457
- window.addEventListener('message', handleMessage);
458
- return () => {
459
- window.removeEventListener('message', handleMessage);
460
- };
461
- }, [handleMessage]);
462
- if (!token || !opalUrl) {
463
- return null;
464
- }
465
- return (jsxRuntimeExports.jsx("iframe", { ref: iframeRef, src: opalUrl, style: style, sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation", title: "Opal" }));
466
- }
8
+ var React__default = /*#__PURE__*/_interopDefault(React);
467
9
 
468
10
  const OPAL_URLS = {
469
11
  local: 'http://localhost:3000',
470
12
  dev: 'https://opal.dev.methodfi.com',
471
13
  sandbox: 'https://opal.sandbox.methodfi.com',
472
- production: 'https://opal.production.methodfi.com',
14
+ production: 'https://opal.production.methodfi.com'
473
15
  };
474
16
 
475
- const OpalContext = require$$0.createContext(null);
17
+ const OpalContext = /*#__PURE__*/ React.createContext(null);
476
18
  /**
477
19
  * Provider component that wraps your app to enable Opal functionality.
478
20
  * This component manages the Opal iframe state and provides context to child components.
@@ -489,29 +31,24 @@ const OpalContext = require$$0.createContext(null);
489
31
  * );
490
32
  * }
491
33
  * ```
492
- */
493
- function OpalProvider({ children }) {
494
- const [isOpen, setIsOpen] = require$$0.useState(false);
495
- const [isReady, setIsReady] = require$$0.useState(false);
496
- const [error, setError] = require$$0.useState(null);
497
- const [currentToken, setCurrentToken] = require$$0.useState(null);
498
- const [currentConfig, setCurrentConfig] = require$$0.useState({});
34
+ */ function OpalProvider({ children }) {
35
+ const [isOpen, setIsOpen] = React.useState(false);
36
+ const [isReady, setIsReady] = React.useState(false);
37
+ const [error, setError] = React.useState(null);
38
+ const [currentToken, setCurrentToken] = React.useState(null);
39
+ const [currentConfig, setCurrentConfig] = React.useState({});
499
40
  const environment = currentConfig.env || 'production';
500
41
  const baseUrl = OPAL_URLS[environment];
501
- const opalUrl = currentToken
502
- ? `${baseUrl}/?token=${currentToken}`
503
- : '';
504
- const handleMessage = (event) => {
505
- var _a, _b;
42
+ const opalUrl = currentToken ? `${baseUrl}/?token=${currentToken}` : '';
43
+ const handleMessage = (event)=>{
506
44
  // Always call onEvent if provided with properly typed event
507
- (_a = currentConfig.onEvent) === null || _a === void 0 ? void 0 : _a.call(currentConfig, event);
45
+ currentConfig.onEvent == null ? void 0 : currentConfig.onEvent.call(currentConfig, event);
508
46
  // Handle structured event format
509
47
  const { action, data } = event;
510
48
  // Legacy support for action-based handling
511
- switch (action) {
49
+ switch(action){
512
50
  case 'started':
513
- if (!isReady)
514
- setIsReady(true);
51
+ if (!isReady) setIsReady(true);
515
52
  break;
516
53
  case 'exited':
517
54
  close();
@@ -519,29 +56,27 @@ function OpalProvider({ children }) {
519
56
  case 'errored':
520
57
  if (!error && data) {
521
58
  setError(data);
522
- (_b = currentConfig.onError) === null || _b === void 0 ? void 0 : _b.call(currentConfig, data);
59
+ currentConfig.onError == null ? void 0 : currentConfig.onError.call(currentConfig, data);
523
60
  }
524
61
  break;
525
62
  }
526
63
  };
527
- const open = (options) => {
528
- var _a;
64
+ const open = (options)=>{
529
65
  setCurrentToken(options.token);
530
66
  setIsOpen(true);
531
67
  setError(null);
532
68
  setIsReady(false);
533
- (_a = currentConfig.onOpen) === null || _a === void 0 ? void 0 : _a.call(currentConfig);
69
+ currentConfig.onOpen == null ? void 0 : currentConfig.onOpen.call(currentConfig);
534
70
  };
535
- const close = () => {
536
- setTimeout(() => {
537
- var _a;
71
+ const close = ()=>{
72
+ setTimeout(()=>{
538
73
  setIsOpen(false);
539
74
  setIsReady(false);
540
75
  setCurrentToken(null);
541
- (_a = currentConfig.onExit) === null || _a === void 0 ? void 0 : _a.call(currentConfig);
76
+ currentConfig.onExit == null ? void 0 : currentConfig.onExit.call(currentConfig);
542
77
  }, 500);
543
78
  };
544
- const updateConfig = (config) => {
79
+ const updateConfig = (config)=>{
545
80
  setCurrentConfig(config);
546
81
  };
547
82
  const contextValue = {
@@ -550,25 +85,32 @@ function OpalProvider({ children }) {
550
85
  error,
551
86
  open,
552
87
  close,
553
- updateConfig,
88
+ updateConfig
554
89
  };
555
- return (jsxRuntimeExports.jsxs(OpalContext.Provider, { value: contextValue, children: [children, isOpen && currentToken && (jsxRuntimeExports.jsx(OpalIframe, { token: currentToken, opalUrl: opalUrl, onMessage: handleMessage, onClose: close, style: {
556
- position: 'fixed',
557
- inset: 0,
558
- width: '100%',
559
- height: '100%',
560
- border: 'none',
561
- zIndex: 1000,
562
- } }))] }));
90
+ return /*#__PURE__*/ React__default.default.createElement(OpalContext.Provider, {
91
+ value: contextValue
92
+ }, children, isOpen && currentToken && /*#__PURE__*/ React__default.default.createElement(OpalIframe, {
93
+ token: currentToken,
94
+ opalUrl: opalUrl,
95
+ onMessage: handleMessage,
96
+ onClose: close,
97
+ style: {
98
+ position: 'fixed',
99
+ inset: 0,
100
+ width: '100%',
101
+ height: '100%',
102
+ border: 'none',
103
+ zIndex: 1000
104
+ }
105
+ }));
563
106
  }
564
107
  function useOpalContext() {
565
- const context = require$$0.useContext(OpalContext);
108
+ const context = React.useContext(OpalContext);
566
109
  if (!context) {
567
110
  throw new Error('useOpalContext must be used within an OpalProvider');
568
111
  }
569
112
  return context;
570
113
  }
571
-
572
114
  /**
573
115
  * Hook for interacting with Opal within an OpalProvider context.
574
116
  * This hook allows you to configure event handlers and open/close Opal sessions.
@@ -602,11 +144,10 @@ function useOpalContext() {
602
144
  *
603
145
  * @param config Configuration object with event handlers and environment settings
604
146
  * @returns Object with open function and current state
605
- */
606
- function useOpal(config = {}) {
147
+ */ function useOpal(config = {}) {
607
148
  const context = useOpalContext();
608
149
  // Update the provider's config when this hook's config changes
609
- require$$0.useEffect(() => {
150
+ React.useEffect(()=>{
610
151
  context.updateConfig(config);
611
152
  }, []);
612
153
  return {
@@ -614,11 +155,61 @@ function useOpal(config = {}) {
614
155
  close: context.close,
615
156
  isReady: context.isReady,
616
157
  isOpen: context.isOpen,
617
- error: context.error,
158
+ error: context.error
618
159
  };
619
160
  }
161
+ function OpalIframe({ token, opalUrl, onMessage, style }) {
162
+ const iframeRef = React.useRef(null);
163
+ const handleMessage = React.useCallback((event)=>{
164
+ // Check if the event is from an allowed origin
165
+ const allowedOrigins = [
166
+ 'https://opal.production.methodfi.com',
167
+ 'https://opal.sandbox.methodfi.com',
168
+ 'https://opal.dev.methodfi.com',
169
+ 'http://localhost:3000'
170
+ ];
171
+ if (!allowedOrigins.includes(event.origin)) {
172
+ return;
173
+ }
174
+ try {
175
+ var _event_data;
176
+ // Forward the properly structured event
177
+ if ((_event_data = event.data) == null ? void 0 : _event_data.type) {
178
+ onMessage(event.data);
179
+ }
180
+ } catch (error) {
181
+ onMessage({
182
+ type: 'opal.session.errored',
183
+ mode: 'opal',
184
+ object: 'session',
185
+ action: 'errored',
186
+ timestamp: new Date().toISOString(),
187
+ data: null
188
+ });
189
+ }
190
+ }, [
191
+ onMessage
192
+ ]);
193
+ React.useEffect(()=>{
194
+ // Add event listener for iframe messages
195
+ window.addEventListener('message', handleMessage);
196
+ return ()=>{
197
+ window.removeEventListener('message', handleMessage);
198
+ };
199
+ }, [
200
+ handleMessage
201
+ ]);
202
+ if (!token || !opalUrl) {
203
+ return null;
204
+ }
205
+ return /*#__PURE__*/ React__default.default.createElement("iframe", {
206
+ ref: iframeRef,
207
+ src: opalUrl,
208
+ style: style,
209
+ sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation",
210
+ title: "Opal"
211
+ });
212
+ }
620
213
 
621
- exports.OpalIframe = OpalIframe;
622
214
  exports.OpalProvider = OpalProvider;
623
215
  exports.useOpal = useOpal;
624
- //# sourceMappingURL=index.js.map