Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: allow using the injected wallet on mobile #1880

Merged
merged 2 commits into from
Apr 20, 2023
Merged

fix: allow using the injected wallet on mobile #1880

merged 2 commits into from
Apr 20, 2023

Conversation

iamacook
Copy link
Member

@iamacook iamacook commented Apr 19, 2023 •
edited
Loading

Note: I do not have access to an iOS device and have only tested this on Android. Faking the UA on desktop shows it working on iOS, but it should still be tested on a physical device.

What it solves

Resolves #1878

How this PR fixes it

The presence of window.ethereum is also checked before automatically connecting to WalletConnect on mobile. If it is present (an inject wallet exists), no autoconnection occurs.

How to test it

Without injected wallet

  1. Open the Safe on mobile without an injected wallet installed: on Safari (on iPhone) or on Chrome/Firefox with no extensions (on Android).
  2. Click connect and observe the WalletConnect QR immediately shown.

With injected wallet

  1. Open the Safe on mobile with an injected wallet installed: on Chrome/Firefox with the Coinbase/MetaMask extension installed (on Android).
  2. Click connect and observe the standard wallet modal shown.

Screenshots

Without injected wallet

without-injected

With injected wallet

with-injected

Checklist

  • I've tested the branch on Android 📱
  • I've documented how it affects the analytics (if at all) 📊
  • I've written a unit/e2e test for it (if applicable) 🧑‍💻

@iamacook iamacook requested a review from katspaugh April 19, 2023 08:58
@iamacook iamacook self-assigned this Apr 19, 2023
@github-actions
Copy link

github-actions bot commented Apr 19, 2023 •
edited
Loading

Branch preview

✅ Deploy successful!

https://detect_injected--webcore.review-web-core.5afe.dev

@github-actions
Copy link

github-actions bot commented Apr 19, 2023 •
edited
Loading

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type Occurrences Fixable
Errors 0 0
Warnings 0 0
Ignored 0 N/A
  • Result: ✅ success
  • Annotations: 0 total
Report generated by eslint-plus-action

@usame-algan
Copy link
Member

usame-algan commented Apr 19, 2023 •
edited
Loading

Tested it on iOS with the MM app and it gives me options to choose from 👍

Tested it on iOS with the Coinbase Wallet app and it also lets me choose and connects to the Coinbase Wallet.

One small issue I noticed is that there seem to be 2 scrollbars present and sometimes it doesn't let me scroll to the bottom of the list. It might be something that needs to be fixed in Onboard though.

katspaugh
katspaugh reviewed Apr 19, 2023
View reviewed changes
src/hooks/wallets/useOnboard.ts Outdated
Comment on lines 96 to 99
if (typeof window === 'undefined') {
return false
}
return !!window?.ethereum
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please make this one line?

katspaugh
katspaugh reviewed Apr 19, 2023
View reviewed changes
src/hooks/wallets/useOnboard.ts
// On mobile, automatically choose WalletConnect
if (!options && isMobile()) {
// On mobile, automatically choose WalletConnect if there is no injected wallet
if (!options && isMobile() && !hasInjectedWallet()) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Did you manage to test it with the coinbase wallet?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it works nicely.

@katspaugh katspaugh changed the title fix: no autoconnect when injected is present fix: allow using the injected wallet on mobile Apr 19, 2023
katspaugh
katspaugh approved these changes Apr 19, 2023
View reviewed changes
Copy link
Member

@katspaugh katspaugh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@JagoFigueroa
Copy link

Hola que tal. Working as expected for me for both Android (checked Chrome and Firefox) and iOS (Safari). Only different thing is that the WC pop up itself looks a little bit different for me but the behaviour is the expected one so all bueno from me.

Screenshot 2023-04-20 at 16 18 57

@iamacook iamacook merged commit 271e95a into dev Apr 20, 2023
@iamacook iamacook deleted the detect-injected branch April 20, 2023 16:13
@github-actions github-actions bot locked and limited conversation to collaborators Apr 20, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@katspaugh katspaugh katspaugh approved these changes

Assignees

@iamacook iamacook

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Mobile] Enable injected wallet if present
4 participants
@iamacook @usame-algan @JagoFigueroa @katspaugh