Skip to content
This repository has been archived by the owner on Oct 7, 2024. It is now read-only.

feat: add redirectUser callback #136

Merged
merged 5 commits into from
Oct 10, 2023
Merged

feat: add redirectUser callback #136

merged 5 commits into from
Oct 10, 2023

Conversation

owencraston
Copy link
Contributor

@owencraston owencraston commented Oct 5, 2023

What

This PR enables this issue: https://github.com/MetaMask/accounts-planning/issues/35

This callback will be implemented in this extension PR.

For async transactions, we call this callback which will trigger a confirmation modal in the extension with the URL and the message as part of the UI. This will be used to instruct users to complete signings at the specified URL or app.

How

  • add a redirectUser callback with the following structure
  redirectUser(
    snapId: string,
    url: string,
    message: string,
    method: string,
  ): Promise<void>;
  • inside submitRequest, add the following block
    if (response.redirect?.message || response.redirect?.url) {
      const { message = '', url = '' } = response.redirect;
      await this.#callbacks.redirectUser(snapId, url, message, method);
    }

@owencraston owencraston force-pushed the feature/handle-redirect branch from a740578 to 526d214 Compare October 10, 2023 14:47
@owencraston owencraston marked this pull request as ready for review October 10, 2023 14:49
@owencraston owencraston added type-enhancement New feature or request team-accounts This should be handled by the Accounts Team labels Oct 10, 2023
@danroc danroc changed the title redirectUser callback feat: add redirectUser callback Oct 10, 2023
@owencraston owencraston merged commit 7c93dc7 into main Oct 10, 2023
16 checks passed
@owencraston owencraston deleted the feature/handle-redirect branch October 10, 2023 19:05
plasmacorral pushed a commit to MetaMask/metamask-extension that referenced this pull request Oct 12, 2023
## **Description**

Progresses: MetaMask/accounts-planning#35

This PR implements the `redirectUser` callback that was added in the
[eth-snap-keyring](MetaMask/eth-snap-keyring#136).
This callbacks allows us to redirect the user to a given url or direct
them with custom instructions to sign an async transaction.


[Design](https://www.figma.com/file/K0csZegZ5XQ6TjfKk3n4Z8/Add-dialog-to-inform-about-redirection-to-snap-site-%2335?type=design&node-id=604-2586&mode=design&t=tRpxcs4qeRiRKxPl-0)

## **Manual testing steps**

1. checkout this
[branch](MetaMask/snap-simple-keyring#98) in the
snap simple keyring repo (this branch is wip but it will work for
testing)
2. run `yarn install` and `yarn start`
3. checkout this branch and run `yarn install && yarn start --build-type
flask`
4. in your browser load the dist folder into the extensions via `load
unpacked`
5. setup a wallet in MM
6. 3. navigate to http://localhost:8000/
7. click `create account` in the dapp site and approve the creation flow
8. toggle the `Use Synchronous Approval` button at the top of the page
so that it is grey. This will turn on async approvals
9. navigate to https://metamask.github.io/test-dapp/
10. connect your MM to the snap
11. scroll down and click `Personal Sign`
12. a pop up should open in MM, accept that sign
13. a new pop up should open that matches the [above
designs](https://www.figma.com/file/K0csZegZ5XQ6TjfKk3n4Z8/Add-dialog-to-inform-about-redirection-to-snap-site-%2335?type=design&node-id=604-2586&mode=design&t=tRpxcs4qeRiRKxPl-0)

## **Screenshots/Recordings**

Blocked URL
<img width="374" alt="Screenshot 2023-10-12 at 11 16 35 AM"
src="https://github.com/MetaMask/metamask-extension/assets/22918444/b2835317-5827-4edb-ad4c-b2382ed24d38">



redirect with message and URL
<img width="378" alt="Screenshot 2023-10-12 at 11 14 55 AM"
src="https://github.com/MetaMask/metamask-extension/assets/22918444/a08109a3-cffe-40a4-aadf-b8f70928d5d2">



without message
<img width="370" alt="Screenshot 2023-10-12 at 11 18 23 AM"
src="https://github.com/MetaMask/metamask-extension/assets/22918444/35b712b8-8116-42ea-b18b-439314cbe63a">



without URL
<img width="392" alt="Screenshot 2023-10-12 at 11 17 33 AM"
src="https://github.com/MetaMask/metamask-extension/assets/22918444/debe40ad-8ebf-49d5-94ba-18da04963a62">




### **Before**

N/A

### **After**



https://github.com/MetaMask/metamask-extension/assets/22918444/05213130-ac5d-4d65-ac10-2fe32a96115a



## **Related issues**
MetaMask/accounts-planning#35

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained:
  - [ ] What problem this PR is solving.
  - [ ] How this problem was solved.
  - [ ] How reviewers can test my changes.
- [ ] I’ve indicated what issue this PR is linked to: Fixes #???
- [ ] I’ve included tests if applicable.
- [ ] I’ve documented any added code.
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: MetaMask Bot <[email protected]>
Co-authored-by: Monte Lai <[email protected]>
Co-authored-by: Daniel Rocha <[email protected]>
k-g-j pushed a commit to MetaMask/metamask-extension that referenced this pull request Nov 1, 2023
## **Description**

Progresses: https://github.com/MetaMask/accounts-planning/issues/35

This PR implements the `redirectUser` callback that was added in the
[eth-snap-keyring](MetaMask/eth-snap-keyring#136).
This callbacks allows us to redirect the user to a given url or direct
them with custom instructions to sign an async transaction.

[Design](https://www.figma.com/file/K0csZegZ5XQ6TjfKk3n4Z8/Add-dialog-to-inform-about-redirection-to-snap-site-%2335?type=design&node-id=604-2586&mode=design&t=tRpxcs4qeRiRKxPl-0)

## **Manual testing steps**

1. checkout this
[branch](MetaMask/snap-simple-keyring#98) in the
snap simple keyring repo (this branch is wip but it will work for
testing)
2. run `yarn install` and `yarn start`
3. checkout this branch and run `yarn install && yarn start --build-type
flask`
4. in your browser load the dist folder into the extensions via `load
unpacked`
5. setup a wallet in MM
6. 3. navigate to http://localhost:8000/
7. click `create account` in the dapp site and approve the creation flow
8. toggle the `Use Synchronous Approval` button at the top of the page
so that it is grey. This will turn on async approvals
9. navigate to https://metamask.github.io/test-dapp/
10. connect your MM to the snap
11. scroll down and click `Personal Sign`
12. a pop up should open in MM, accept that sign
13. a new pop up should open that matches the [above
designs](https://www.figma.com/file/K0csZegZ5XQ6TjfKk3n4Z8/Add-dialog-to-inform-about-redirection-to-snap-site-%2335?type=design&node-id=604-2586&mode=design&t=tRpxcs4qeRiRKxPl-0)

## **Screenshots/Recordings**

Blocked URL
<img width="374" alt="Screenshot 2023-10-12 at 11 16 35 AM"
src="https://github.com/MetaMask/metamask-extension/assets/22918444/b2835317-5827-4edb-ad4c-b2382ed24d38">

redirect with message and URL
<img width="378" alt="Screenshot 2023-10-12 at 11 14 55 AM"
src="https://github.com/MetaMask/metamask-extension/assets/22918444/a08109a3-cffe-40a4-aadf-b8f70928d5d2">

without message
<img width="370" alt="Screenshot 2023-10-12 at 11 18 23 AM"
src="https://github.com/MetaMask/metamask-extension/assets/22918444/35b712b8-8116-42ea-b18b-439314cbe63a">

without URL
<img width="392" alt="Screenshot 2023-10-12 at 11 17 33 AM"
src="https://github.com/MetaMask/metamask-extension/assets/22918444/debe40ad-8ebf-49d5-94ba-18da04963a62">

### **Before**

N/A

### **After**

https://github.com/MetaMask/metamask-extension/assets/22918444/05213130-ac5d-4d65-ac10-2fe32a96115a

## **Related issues**
https://github.com/MetaMask/accounts-planning/issues/35

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained:
  - [ ] What problem this PR is solving.
  - [ ] How this problem was solved.
  - [ ] How reviewers can test my changes.
- [ ] I’ve indicated what issue this PR is linked to: Fixes #???
- [ ] I’ve included tests if applicable.
- [ ] I’ve documented any added code.
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: MetaMask Bot <[email protected]>
Co-authored-by: Monte Lai <[email protected]>
Co-authored-by: Daniel Rocha <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
team-accounts This should be handled by the Accounts Team type-enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants