Inconsistent "ready" events between dev and prod environments

[tequdev]

ready event(on('ready',...)) is working as expected in the React production environment, but not in the development environment.

I don't know if this is a problem with React or with this library, but I will share.

You can check the behavior in the following repository

https://github.com/develoQ/react-xumm-on-ready

Development environment
yarn start

Production environment
yarn build
npx serve -s build

The ready event executes alert().

The alert() is executed in the production environment, but not in the development environment.

[WietseWind]

When checked out and running locally, neither the dev environment nor the prod build alert.

The ready event fires when the actual lib is fully ready, meaning there's a session.

Could it be you have a valid localStorage, already signed in, Xumm SDK session on your prod URL, and not locally? Then on prod the SDK will load your existing session and fire ready, while locally (where no valid existing session is in localStorage) ready isn't fired because you still need to trigger the Xumm authorization flow?

-- Edit:

Here's an ugly working sample with React working perfectly both in dev as prod build:
https://github.com/XRPL-Labs/XummSDK-React-Demo

[tequdev]

I tried running both the development and production environments in incognito mode in the browser (Chrome, Safari), but the alert() is executed only in the production environment.

All environments are running on localhost:3000 and I don't think there is any difference in localStrage information.

[tequdev]

I see that in XummSDK-React-Demo, ready is working in both development and production (preview) environments.

[WietseWind]

I'm not getting the alert in prod either, in your example 😇

[WietseWind]

Found it. Wrapping Xumm in a useMemo breaks the event handling: in your example your subscription in the xumm object refers to the const xumm which is the useMemo.

You then refer to xumm.on(...) which actually doesn't refer to the Xumm object, but it refers to the useMemo object.

The trick is just to do this:

  useMemo(() => {
    const xumm = new Xumm("...")
    xumm.on('ready', () => {
      console.log('Xumm ready')
    })
  }, [])

[tequdev]

Oh, I didn't think of that way 🤣.

So it is working perfectly. Thank you very much.

Is there something outside of this library that causes the event handling to break?

[WietseWind]

No, it's simply the fact that in your example the xumm const does not refer to the class, but to the React method.

[tequdev]

I did some research.

Xumm-Universal-SDK/src/index.ts

Lines 459 to 466 in 140d410

	new Promise((resolve: any) => {
	if (_classes?.XummPkce) {
	this.user.account.then(() => resolve());
	_classes.XummPkce?.on("loggedout", () => resolve());
	} else {
	resolve();
	}
	}),

This problem seems to occur only when the following process resolves.

Xumm-Universal-SDK/src/index.ts

Line 462 in 140d410

_classes.XummPkce?.on("loggedout", () => resolve());

In addition, the following cases will also not work

              _classes.XummPkce?.on("loggedout", () => {
                this.emit("ready");
                resolve()
              });

It works in the following cases

              this.emit("ready");
              _classes.XummPkce?.on("loggedout", () => resolve());

[WietseWind]

Thank you for your research, but can you explain this a bit more?

"In addition, the following cases will also not work"

Does not work when? Vs.

"It works in the following cases"

I'm missing some context here. I don't understand how this relates to the previous messages in this issue, and my message with the solution?

[tequdev]

React's StrictMode seemed to be a major factor.

If StrictMode is disabled during development, the desired behavior is achieved.
In production, StrictMode is automatically disabled.