feat: support onCancel

[fbwoolf]

Try out this version of the Stacks Wallet - download extension builds.

Description

This PR adds the ability for the developer to use an onCancel callback function from connect when a user closes/cancels a transaction window.

This is PR is in Draft status bc the callback is working, but I'm not sure what we actually want to do with the transaction during this process or what (if any) data we would want to return to the developer in the onCancel callback?

For details refer to issue #959

connect PR: hirosystems/connect#122

Type of Change

• New feature
• Bug fix
• API reference/documentation update
• Other

Does this introduce a breaking change?

No.

Are documentation updates required?

No.

Testing information

TBD.

Checklist

• Code is commented where needed
• Unit test coverage for new or modified code paths
• Changelog is updated
• Tag 1 of @hstove or @kyranjamie or @aulneau for review

[changeset-bot]

🦋 Changeset detected

Latest commit: a616e7f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@stacks/wallet-web	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/blockstack/stacks-wallet-web/Gh7Q9M1SdedhXRfA7PVyED9cDwvB
✅ Preview: https://stacks-wallet-web-git-feat-cancel-transaction-blockstack.vercel.app

[aulneau]

Generally I think this is really fantastic! Just left a couple comments and then will do a follow up review after you've made updates

[fbwoolf]

Removing this bc I think it was just left by mistake?

[fbwoolf]

I addressed code comments and will put up the related PR in connect now.

[kyranjamie]

Set up connect and the extension this morning and ran through these changes.

I think it'd be better to reject the promise when the user cancels, rather than altering the resolve data. This is a small change, and just requires rejecting in the inpage.ts file

  transactionRequest: async transactionRequest => {
    const event = new CustomEvent<TransactionRequestEventDetails>(DomEventName.transactionRequest, {
      detail: { transactionRequest },
    });
    document.dispatchEvent(event);
    return new Promise((resolve, reject) => {
      const handleMessage = (event: MessageEvent<TransactionResponseMessage>) => {
        console.log('message in inpage.ts', event);
        if (!isValidEvent(event, Methods.transactionResponse)) return;
        if (event.data.payload?.transactionRequest !== transactionRequest) return;
        window.removeEventListener('message', handleMessage);
        if (event.data.payload.transactionResponse.cancel) {
          reject(event.data.payload.transactionResponse);
          return;
        }
        resolve(event.data.payload.transactionResponse);
      };
      window.addEventListener('message', handleMessage);
    });
  },

Also there are two scenarios I noticed where the callback isn't fired:

• Logged out state where you need to enter your password
• When signed in, but there are async actions running and you close before they finish

We need to find an earlier way to set up the close listener, even before the transaction page.

[fbwoolf]

This is the only component I found during auth that doesn't use the PopupContainer so not great to have duplicate code here. Can this be wrapped in the PopupContainer? Why is this a Screen?

[kyranjamie]

👍🏼 from me, can make other changes later. Per comment, as some of these decisions are temporary, a comment wouldn't go a miss.

[fbwoolf]

Set up connect and the extension this morning and ran through these changes.

I think it'd be better to reject the promise when the user cancels, rather than altering the resolve data. This is a small change, and just requires rejecting in the inpage.ts file

  transactionRequest: async transactionRequest => {
    const event = new CustomEvent<TransactionRequestEventDetails>(DomEventName.transactionRequest, {
      detail: { transactionRequest },
    });
    document.dispatchEvent(event);
    return new Promise((resolve, reject) => {
      const handleMessage = (event: MessageEvent<TransactionResponseMessage>) => {
        console.log('message in inpage.ts', event);
        if (!isValidEvent(event, Methods.transactionResponse)) return;
        if (event.data.payload?.transactionRequest !== transactionRequest) return;
        window.removeEventListener('message', handleMessage);
        if (event.data.payload.transactionResponse.cancel) {
          reject(event.data.payload.transactionResponse);
          return;
        }
        resolve(event.data.payload.transactionResponse);
      };
      window.addEventListener('message', handleMessage);
    });
  },

Also there are two scenarios I noticed where the callback isn't fired:

• Logged out state where you need to enter your password
• When signed in, but there are async actions running and you close before they finish

We need to find an earlier way to set up the close listener, even before the transaction page.

Just circled back and remembered this, maybe I should use this approach at least for now and change the conditional check in connect to just catching the failed promise?

[fbwoolf]

Tests are going to fail here until it points at the changes in connect PR.