Buy button becomes non-responsive with Hiro wallet installed

[stevel408]

With the hiro wallet installed as a Chrome extension, I can navigate to an inscription page successfully, like this one:

https://openordex.org/inscription?number=3dc8445abc5d4c34dbcdd11f1cd002aaf22eb817911a1274a53076e8883cfa01i0

But then when I click on the "Buy Inscription ... " button, nothing happens.

[stevel408]

Wow, can't believe the moment I wrote this up, things start to work all of a sudden. In any case, I was debugging this a bit earlier when I cannot get this to work repeatedly, and let me share what I found.

Basically I see that there's some logic in the code to call up the Hiro wallet, and uses the window.StacksProvider attribute (among others, perhaps) to determine if the Hiro wallet extension is installed. I noticed that this attribute is undefined in a new browser window/tab:

When the Buy button was not working before I filed this issue, I observed the same thing above. Of course, now when I go back and look again, the attribute has valid value:

I have a reliable Internet connection and don't think there is a problem on my end, but since the problem is not reproducible any more, please feel free to close it. The only reason I can think of for the cause would be that, if the logic to load up the window.StacksProvider attribute is from some remote JS file, and that the fetching of the JS file is slow or has failed, this problem might occur.

In any case, sorry for the interruption, great job on building this valuable and promising project!

[stevel408]

Well well well, what do you know, the problem came right back after I disabled and re-enabled the Hiro wallet extension. And I think I might have found the cause.

First of all, there seems to be an important piece of initialization code:

This code snippet is setting up many variable for later use, such as connectUserSession, which depends on if the system detects the presence of the Hiro wallet. That further is dependent upon the getInstalledWalletName() function call. Inside that function, I set a breakpoint and found the following:

As we can see, at this time, the window.StacksProvider attribute is not defined yet, causing app.js to think that the Hiro wallet is NOT present, thus skipping the creation of connectUserSession.

Later on when I click the "Buy" button, nothing happens in the UI, and I get an error message in the console:

At this time, when I examine the system state, I see that window.StacksProvider is now defined (bottom of the screenshot above). But by now it's too late, the app.js initialization has already run, and have already determined that the Hiro wallet was NOT present, and therefore skipped the initialization of the connectUserSession object. This object is thus undefined, but used when I clicked the Buy button, resulting in the error above.

All in all, now I think there is a simple race condition somewhere, causing the execution of app.js initialization to occur BEFORE the Hiro wallet initialization (or somehow injecting variables into window).