Signing transaction via an embedded widget vs through a popup window

[randlabs]

Signing transaction via an embedded widget vs through a popup window

[oysterpack]

The pop-ups work as long as the browser is configured to not block pop-ups. For example, on iPhone, the default safari settings block pop-ups. Even worse, is that on safari, the user is not notified that the pop-up was even blocked. As the developer, I knew what was the likely cause, but this is a bit confusing for end users. If the MyAlgo signer can be integrated as an embedded widget, then it would avoid dealing with issues regarding pop-ups being blocked.

[Alex99y]

Hello @oysterpack ! Can you provide me more information about this issue?

• Which browsers are not opening the popups?
• Does all MyAlgo Connect methods are being blocked its popups?
• Can you share with me your code that is failing?

[Alex99y]

@oysterpack MyAlgo Connect works in those browsers (without the need of allowing popups). Unfortunately, not all browsers manage dom events the same. That's why I'm asking you for a code example to help you to solve this issue.

[oysterpack]

The app is built with Flutter Web, and I invoke the following Javascript leveraging Flutter's built in Dart JS integration:

const params = await algodClient.getTransactionParams().do();
const txn = {
    ...params,
    type: "appl",
    appIndex: appId,
    appOnComplete: 0, // OnApplicationComplete.NoOpOC
    from: account,
};

const signedTxn = await myAlgoWallet.signTransaction(txn);

[Alex99y]

@oysterpack Cool. Try removing this line:
const params = await algodClient.getTransactionParams().do();
And call myAlgoWallet.signTransaction as the first method that calls the onClick handler. Maybe, the algod is using/spending the onClick event instead of myAlgoWallet

Edit: Just for testing purposes, use arbitrary data for params values.

[oysterpack]

The issue is easily reproducible on my iPhone using https://test.myalgo.com/. The steps to reproduce the issue are:

1. disable pop-ups in Safari - which is the default setting
2. make a payment transaction
3. after clicking the submit button, the following error is displayed: "Can not open popup window - blocked"

[Alex99y]

@oysterpack Yes, unfortunately, https://test.myalgo.com only works for chrome, once we finished the development of the next version of MyAlgo Connect we will update it to support Firefox and Safari browsers. In this case, the problem is not MyAlgo Connect, it is how had been used it. On every submits call, we fetch params from algoexplorer API and this call "steals" the onClick event that MyAlgo Connect needs. If you clone test.myalgo.com and remove the await fetchParams and try it in Firefox or Safari it will work. If you see, the connect() method does not fail. Just the signTransaction() method fails. Internally, there is no difference between both, just the params are sent to the popup.

[oysterpack]

I confirmed what you said. If the first action in the onClick event is the myAlgoWallet.signTransaction(txn) then the popup is not blocked (even though Safari is configured to block popups).

Thanks for the explanation. Now that I understand the behavior, I can work with this solution. I won't need the embedded widget. Feel free to close out the issue, unless you think an embedded widget is worthwhile.