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.

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

feat: add Wallet Connect support #284

Merged
merged 7 commits into from
Feb 5, 2024
Merged

feat: add Wallet Connect support #284

merged 7 commits into from
Feb 5, 2024

Conversation

seaona
Copy link
Contributor

@seaona seaona commented Dec 12, 2023

Context

Needed for testing the PPOM module in Mobile + Wallet Connect

What

Adds wallet connect support to the test dapp.

How

  • A button triggers the Wallet Connect Modal. Using the Wallet Connect option, you can scan the QR code using your phone based MetaMask Wallet, to start getting transaction/signatures requests triggered from the test dapp on your phone wallet.
  • Whenever the WalletConnect connection is established, a new provider is added. You can then choose to use MetaMask or WalletConnect providers alternatively to trigger your Extension or your Mobile wallet
  • For Wallet Connect, we only have a subset of functionalities enabled for now: Sends/Signatures but excluding Contract Deployments, as needs some more investigation on how to get the contract address. This can be extended in the future (not currently needed for the purposes of PPOM).
  • When we use the ?contract URI param on the URL, all the buttons (except deploy contracts) are also enabled for Wallet Connect to use, in the same was as it's done for Extension

Screenshots

wc-test-dapp.mp4

Screenshot from 2023-12-11 16-19-41

Future Work

  • Refactor button list and in general the index.js file, as it starts to grow big. We could better organize the different dapp functionalities in the future
  • Add Deploy Smart Contract functionality for Wallet Connect
  • Add SDK support in the same way -- this will enable to test PPOM with SDK

Manual Testing Steps

  1. Build the test dapp locally yarn and yarn start
  2. Go to the browser

Testing the Connection

  1. Click Wallet Connect and select Wallet Connect option
  2. With your phone, scan the QR code within MM wallet
    • See connection prompts to the phone
  3. Accept connect
    • See Wallet Connect Provider is added on top of the test-dapp
    • See current selected provider is now Wallet Connect
    • See Wallet Connect buttons are enabled (Sends and signatures)

Testing tx/signatures with WC

  1. Trigger any tx/signature
    • See the tx/signature is triggered on your phone

Testing Network switch handling

  1. Switch networks
    • See status network on the test dapp is updated

Testing switching providers back and forth (Extension-Mobile)

  1. Click Use Metamask Main
    • See current selected provider is now MetaMask Main
    • See Extension Connected buttons are all enabled
  2. Trigger another tx/signature
    • See now the Extension wallet is triggered
  3. Click Use Wallet Connect
    • See current selected provider is back to Wallet Connect

Testing the old functionality

Furthermore, you can check that the old functionality is 100% preserved when using MetaMask Extension provider.

Copy link

socket-security bot commented Dec 12, 2023

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@babel/runtime@7.23.2 None +1 275 kB nicolo-ribaudo
npm/@ethersproject/abi@5.7.0 Transitive: network +27 2.39 MB ricmoo
npm/@ethersproject/abstract-provider@5.7.0 Transitive: network +24 1.56 MB ricmoo
npm/@ethersproject/abstract-signer@5.7.0 Transitive: network +25 1.64 MB ricmoo
npm/@ethersproject/address@5.7.0 None +7 514 kB ricmoo
npm/@ethersproject/base64@5.7.0 None +2 162 kB ricmoo
npm/@ethersproject/basex@5.7.0 None +3 212 kB ricmoo
npm/@ethersproject/bignumber@5.7.0 None +3 392 kB ricmoo
npm/@ethersproject/bytes@5.7.0 None +1 150 kB ricmoo
npm/@ethersproject/constants@5.7.0 None +4 411 kB ricmoo
npm/@ethersproject/hash@5.7.0 Transitive: network +26 1.9 MB ricmoo
npm/@ethersproject/hdnode@5.7.0 Transitive: network +31 2.44 MB ricmoo
npm/@ethersproject/json-wallets@5.7.0 Transitive: network +35 5.24 MB ricmoo
npm/@ethersproject/keccak256@5.7.0 None +3 209 kB ricmoo
npm/@ethersproject/logger@5.7.0 None 0 69.5 kB ricmoo
npm/@ethersproject/networks@5.7.1 None +1 117 kB ricmoo
npm/@ethersproject/pbkdf2@5.7.0 None +6 237 kB ricmoo
npm/@ethersproject/properties@5.7.0 None +1 100 kB ricmoo
npm/@ethersproject/random@5.7.0 None +2 168 kB ricmoo
npm/@ethersproject/rlp@5.7.0 None +2 180 kB ricmoo
npm/@ethersproject/sha2@5.7.0 None +5 219 kB ricmoo
npm/@ethersproject/signing-key@5.7.0 None +12 819 kB ricmoo
npm/@ethersproject/strings@5.7.0 None +5 530 kB ricmoo
npm/@ethersproject/transactions@5.7.0 None +19 1.19 MB ricmoo
npm/@ethersproject/web@5.7.1 network +8 700 kB ricmoo
npm/@ethersproject/wordlists@5.7.0 Transitive: network +27 2.29 MB ricmoo
npm/@lit-labs/ssr-dom-shim@1.1.2 environment 0 33.7 kB lit-robot
npm/@lit/reactive-element@2.0.1 Transitive: environment +1 856 kB lit-robot
npm/@metamask/safe-event-emitter@2.0.0 None 0 7.65 kB whymarrh
npm/@motionone/animation@10.16.3 None +4 104 kB popmotion
npm/@motionone/dom@10.16.4 None +6 628 kB popmotion
npm/@motionone/types@10.16.3 None 0 11 kB popmotion
npm/@motionone/utils@10.16.3 None +2 52.9 kB popmotion
npm/@noble/hashes@1.3.2 None 0 747 kB paulmillr
npm/@stablelib/random@1.0.2 None +3 157 kB dchest
npm/@types/connect@3.4.38 None +1 712 kB types
npm/@walletconnect/jsonrpc-provider@1.0.13 None +5 851 kB gancho_walletconnect
npm/@walletconnect/jsonrpc-types@1.0.3 None +1 188 kB gancho_walletconnect
npm/@walletconnect/jsonrpc-utils@1.0.8 None +3 533 kB gancho_walletconnect
npm/@walletconnect/modal@2.6.2 Transitive: environment, filesystem, network +51 8.12 MB iljadoesdev
npm/@walletconnect/safe-json@1.0.2 None 0 215 kB gancho_walletconnect
npm/@web3modal/ethers5@3.2.0 Transitive: environment, eval, filesystem, network, shell, unsafe +306 88.9 MB
npm/base64-js@1.5.1 None 0 9.62 kB feross
npm/bn.js@5.2.1 None 0 99 kB fanatid
npm/bs58@4.0.1 None +2 46 kB dcousens
npm/buffer@6.0.3 None +2 108 kB feross
npm/eth-rpc-errors@4.0.2 None +1 91.3 kB rekmarks
npm/ethers@5.7.2 Transitive: environment, filesystem, network +47 18.9 MB ricmoo
npm/eventemitter3@4.0.7 None 0 38 kB lpinca
npm/ieee754@1.2.1 None 0 6.8 kB feross
npm/json-rpc-engine@6.1.0 None +3 146 kB rekmarks
npm/json-rpc-random-id@1.0.1 None 0 2.12 kB kumavis
npm/node-gyp-build@4.6.1 environment, filesystem 0 13.2 kB mafintosh
npm/uint8arrays@3.1.1 None +1 624 kB achingbrain
npm/ws@7.5.9 network Transitive: environment, filesystem +3 952 kB lpinca

🚮 Removed packages: npm/@ethersproject/abi@5.0.13, npm/@ethersproject/abstract-provider@5.0.10, npm/@ethersproject/abstract-signer@5.0.14, npm/@ethersproject/address@5.0.11, npm/@ethersproject/base64@5.0.9, npm/@ethersproject/basex@5.0.9, npm/@ethersproject/bignumber@5.0.15, npm/@ethersproject/bytes@5.0.11, npm/@ethersproject/constants@5.0.10, npm/@ethersproject/hash@5.0.12, npm/@ethersproject/hdnode@5.0.10, npm/@ethersproject/json-wallets@5.0.12, npm/@ethersproject/keccak256@5.0.9, npm/@ethersproject/logger@5.0.10, npm/@ethersproject/networks@5.0.9, npm/@ethersproject/pbkdf2@5.0.9, npm/@ethersproject/properties@5.0.9, npm/@ethersproject/random@5.0.9, npm/@ethersproject/rlp@5.0.9, npm/@ethersproject/sha2@5.0.9, npm/@ethersproject/signing-key@5.0.11, npm/@ethersproject/strings@5.0.10, npm/@ethersproject/transactions@5.0.11, npm/@ethersproject/web@5.0.14, npm/@ethersproject/wordlists@5.0.10, npm/ethers@5.0.32

View full report↗︎

Copy link

socket-security bot commented Dec 12, 2023

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert Package NoteSource
Network access npm/node-fetch@2.7.0
Network access npm/node-fetch@2.7.0
Network access npm/node-fetch@2.7.0
New author npm/react@18.2.0
New author npm/react-dom@18.2.0
New author npm/scheduler@0.23.0
New author npm/use-sync-external-store@1.2.0
Native code npm/utf-8-validate@5.0.10
Network access npm/cross-fetch@3.1.8
New author npm/bs58@4.0.1
New author npm/@solana/buffer-layout@4.0.1
Install scripts npm/bigint-buffer@1.1.5
  • Install script: install
  • Source: npm run rebuild || echo "Couldn't build bindings. Non-native version used."
Native code npm/bigint-buffer@1.1.5
Network access npm/jayson@4.1.0
Network access npm/jayson@4.1.0
Network access npm/jayson@4.1.0
Network access npm/jayson@4.1.0
Native code npm/keccak@3.0.4
New author npm/@walletconnect/environment@1.0.1
Network access npm/@walletconnect/jsonrpc-http-connection@1.0.7
New author npm/@walletconnect/safe-json@1.0.2
New author npm/@walletconnect/events@1.0.1
New author npm/@walletconnect/keyvaluestorage@1.0.2
Network access npm/@walletconnect/modal-core@2.6.2
New author npm/@walletconnect/relay-auth@1.0.4
New author npm/@walletconnect/time@1.0.2
New author npm/@walletconnect/window-getters@1.0.1
New author npm/@walletconnect/window-metadata@1.0.1
New author npm/sonic-boom@2.8.0
Native code npm/bufferutil@4.0.8
Network access npm/@walletconnect/core@2.10.2
Network access npm/@web3modal/core@3.2.0
Network access npm/@solana/web3.js@1.87.4
Network access npm/@solana/web3.js@1.87.4
Network access npm/@solana/web3.js@1.87.4

View full report↗︎

Next steps

What is network access?

This module accesses the network.

Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use.

What is new author?

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Scrutinize new collaborator additions to packages because they now have the ability to publish code into your dependency tree. Packages should avoid frequent or unnecessary additions or changes to publishing rights.

What's wrong with native code?

Contains native code which could be a vector to obscure malicious code, and generally decrease the likelihood of reproducible or reliable installs.

Ensure that native code bindings are expected. Consumers may consider pure JS and functionally similar alternatives to avoid the challenges and risks associated with native code bindings.

What is an install script?

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all

  • @SocketSecurity ignore npm/node-fetch@2.7.0
  • @SocketSecurity ignore npm/react@18.2.0
  • @SocketSecurity ignore npm/react-dom@18.2.0
  • @SocketSecurity ignore npm/scheduler@0.23.0
  • @SocketSecurity ignore npm/use-sync-external-store@1.2.0
  • @SocketSecurity ignore npm/utf-8-validate@5.0.10
  • @SocketSecurity ignore npm/cross-fetch@3.1.8
  • @SocketSecurity ignore npm/bs58@4.0.1
  • @SocketSecurity ignore npm/@solana/buffer-layout@4.0.1
  • @SocketSecurity ignore npm/bigint-buffer@1.1.5
  • @SocketSecurity ignore npm/jayson@4.1.0
  • @SocketSecurity ignore npm/keccak@3.0.4
  • @SocketSecurity ignore npm/@walletconnect/environment@1.0.1
  • @SocketSecurity ignore npm/@walletconnect/jsonrpc-http-connection@1.0.7
  • @SocketSecurity ignore npm/@walletconnect/safe-json@1.0.2
  • @SocketSecurity ignore npm/@walletconnect/events@1.0.1
  • @SocketSecurity ignore npm/@walletconnect/keyvaluestorage@1.0.2
  • @SocketSecurity ignore npm/@walletconnect/modal-core@2.6.2
  • @SocketSecurity ignore npm/@walletconnect/relay-auth@1.0.4
  • @SocketSecurity ignore npm/@walletconnect/time@1.0.2
  • @SocketSecurity ignore npm/@walletconnect/window-getters@1.0.1
  • @SocketSecurity ignore npm/@walletconnect/window-metadata@1.0.1
  • @SocketSecurity ignore npm/sonic-boom@2.8.0
  • @SocketSecurity ignore npm/bufferutil@4.0.8
  • @SocketSecurity ignore npm/@walletconnect/core@2.10.2
  • @SocketSecurity ignore npm/@web3modal/core@3.2.0
  • @SocketSecurity ignore npm/@solana/web3.js@1.87.4

@@ -364,6 +366,32 @@ const initialConnectedButtons = [
maliciousSeaport,
];

// Buttons that are available after connecting via Wallet Connect
Copy link
Contributor Author

Choose a reason for hiding this comment

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

not the same as the ones with Extension, as we don't allow to deploy contracts for now (more logic might be needed for getting deployed contract address)

description: 'This is the E2e Test Dapp',
url: 'https://metamask.github.io/test-dapp/',
icons: ['https://avatars.mywebsite.com/'],
};
Copy link
Contributor Author

Choose a reason for hiding this comment

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

metadata that will be seen on the Mobile device, once connected

image

rdns: 'io.metamask',
},
provider,
};
Copy link
Contributor Author

Choose a reason for hiding this comment

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

provider info that will be displayed on top of the test dapp

Screenshot from 2023-12-12 12-39-35

@@ -1075,7 +1187,7 @@ const initializeFormElements = () => {
watchNFTButton.onclick = async () => {
let watchNftsResult;
try {
watchNftsResult = await ethereum.request({
Copy link
Contributor Author

Choose a reason for hiding this comment

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

in some places, we were using ethereum.request instead of provider. We need to make sure that we are using the provider (whichever is selected)

DDDDDanica
DDDDDanica previously approved these changes Dec 12, 2023
@DDDDDanica
Copy link

LGTM!

@seaona
Copy link
Contributor Author

seaona commented Dec 14, 2023

@Gudahtt do you think we can proceed to merge the PR despite the security warnings? My evaluation is:

  • I think the No Readme and New Author flags are undesired but seem safe
  • The most critical ones seem the Shell Access ones but my understanding is that:
    • lavamoat is okay
    • web3modal/ethers5@3.2.0 seems okay too - maintained by WalletConnect team
  • The Network Requests seem intermediate, but again they come from web3modal/ethers5@3.2.0 which seems a safe dependency

Thank you in advance 🙏

@seaona
Copy link
Contributor Author

seaona commented Dec 14, 2023

To re-evaluate due to the supply chain attack issue

@seaona
Copy link
Contributor Author

seaona commented Feb 4, 2024

[Updates]

Copy link
Contributor

@jpuri jpuri left a comment

Choose a reason for hiding this comment

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

👍 🚢

@seaona seaona merged commit 8439a47 into main Feb 5, 2024
4 of 5 checks passed
@seaona seaona deleted the wallet-connect-2 branch February 5, 2024 13:53
@seaona seaona mentioned this pull request Feb 5, 2024
@seaona seaona mentioned this pull request Feb 19, 2024
@seaona seaona mentioned this pull request May 3, 2024
Copy link

@Necmeddinhammami Necmeddinhammami left a comment

Choose a reason for hiding this comment

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

Yis

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants