metamask / metamask-sdk

The simplest yet most secure way to connect your blockchain-based applications to millions of MetaMask Wallet users.

MetaMask SDK

MetaMask SDK enables developers to easily connect their dapps with the MetaMask browser extension and MetaMask Mobile.

It supports the following dapp platforms:

• Javascript-based apps
  • React
  • Pure JavaScript
  • Other web frameworks
  • React Native
  • Node.js
  • Electron
• Gaming apps
  • Unity
  • Unreal Engine (coming soon)
• Mobile Native apps
  • iOS
  • Android

Read more about setting up MetaMask SDK and MetaMask SDK concepts.

This repository contains the JavaScript SDK and examples. You can also see the Android SDK repository and the iOS SDK repository.

Features

• Session persistence
• Multi MetaMask provider (let user choose between browser extension and mobile wallet)
• Batch RPC calls (send multiple requests to your wallet at once)
• Read-only RPC calls and Infura integration
• Wagmi hook integration (alpha)
• i18n
• Full modal UI customization
• Smart contract library (coming soon)

Get started

Install the SDK:

yarn add @metamask/sdk

or

npm i @metamask/sdk

Web dapps

See the following examples:

• Next.js
• React
• Vue.js
• Pure JavaScript

Read the documentation for using the SDK with JavaScript for more information.

React Native

We recommend using React Native v0.71.4 or higher to avoid performance issues on Android.

See the React Native example and read the documentation for using the SDK with React Native for more information.

Node.js

See the Node.js example and read the documentation for using the SDK with Node.js for more information.

Electron

See the Electron example and read the documentation for using the SDK with Electron for more information.

SDK options

See the full list of JavaScript SDK options.

Contributing

To contribute to MetaMask SDK, see the contribution guidelines.

Contacts

Fill out this form for a complimentary design optimization workshop.

metamask-sdk's Issues

[JS] - Update JS Docs

1. Update Dapp links

https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/guide/metamask-sdk-js/metamask-sdk-pure-javascript.html#examples

This dapp (Hosted Test Dapp with SDK installed) doesn't have SDK integrated.
Update the hyperlink with the link below.
https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/test-dapp-2/

2. Add initial step to make a request to JS SDK docs.

First developers need to “connect” by doing an eth_requestAccounts the web app to MM mobile wallet like below.

import MetaMaskSDK from "@metamask/sdk";

const sdk = new MetaMaskSDK({
  useDeeplink: false,
  communicationLayerPreference: "socket",
});

function App() {
  ...

  const connect = () => {
    window.ethereum
      .request({
        method: "eth_requestAccounts",
        params: [],
      })
      .then((res) => console.log("request accounts", res))
      .catch((e) => console.log("request accounts ERR", e));
  };

NodeJS trying to show an alert instead of throwing a proper exception

Describe the bug
When MetaMask disconnects a session using NodeJS, the SDK tries to show an alert which doesn't exist in NodeJS specifically, a proper exception should be thrown in order to be caught

To Reproduce

1. Launch NodeJS -> Connect
2. In MMM disconnect the session
3. See error in terminal

Expected behaviour
An exception is thrown

Screenshots

** Provide environment information**

Additional context

[JS] Integrating MetaMask SDK into Blocknative Web3 Onboarding

User story

We recently decided to have a new distribution strategy for MM SDK, which is to update the MM connectors on different web3 libraries with MM SDK. This way we can have SDK adoption without causing dapps that are using these libraries extra work to change their set up just for MM.

Task/Expected Behavior

Here are the docs
Web3-onboard packages can be found in this folder within the repo: https://github.com/blocknative/web3-onboard/tree/develop/packages) for with examples for adding a wallet module -

The current MetaMask integration can be found here within their injected wallets module
As you can see they don’t currently have to patch any MM operations so integration of the SDK should be fairly straight forward.
For integrating the MM SDK the workflow would be something like:

• Create a new folder/module within the packages/ directory (you can checkout the Coinbase module for an idea on the module and connector structure).
• Add the specific deps and the preferred MM icon.
• Structure our connector with the typed properties we would like to extend to devs.
• Patch any wallet ops needed (although since it looks like we are following 1193 standards this may not be needed depending on how the SDK handles those).
• Return the provider (and SDK instance if applicable).
  To test the module
• Add the new MetaMask module to the internal testing demo within the w3o repo at packages/demo (this can be committed).
• From the top level of the web3-onboard project run yarn && yarn dev
• This will spin up a testing interface available at localhost:8080 to testing connect, sign, send, switch chains, disconnect

A note here, as they support MM through the injected-wallets module, be sure to add the new MM module at the top of the wallets array (or comment out the injected module) within the web3-onboard init in the demo This will avoid any false positives/negatives while testing the module.
If you can grant blocknative team ([email protected] - Adam Carpenter) write access to the web3-onboard fork when we are all set for a PR he can setup the build/publish flow for the package.

Acceptance criteria

Users who are connecting their MM wallet to a dapp that uses blocknative's web3 onboarding should be able to connect via MM SDK when they don't have any extension installed.

[iOS] Add networking (socket.io) module

MetaMask SDK event tracking

User story

We track a limited number of events and data from dApps/users who connect through the SDK. To better comprehend the value that the SDK connection brings to MetaMask, we aim to enhance our event tracking capabilities across all platform SDKs. This expansion will cover additional events that provide deeper insights into users connecting to MetaMask via the SDK.

User insights

Currently we have two event properties about the SDK.

1. request_source
2. request_platform

Request_source should show where the dapp connection is from, so it should be in-app browser, WalletConnect, or MetaMask SDK.
Request_platform should show the platform of the connection, should be iOS, Android, Unity, NodeJS, Electron, Web-Mobile, Web-Desktop, and React Native.

Task/Expected Behavior

1. Fix "request_source" event property to accurately track

• In-app browser
• WalletConnect
• MetaMask SDK

2. Add "request_source" event property into the following events:

• Dapp Transaction Started
• Dapp interactions
• Dapp Transaction Completed
• Changed Dapp Permission (for future)
• Viewed Dapp Permissions
• Dapp Transaction Cancelled
• Send Transaction Completed
• Send Transaction Started
• App Session
• Transactions
• Onboarding
• Swap Completed
• On-ramp Cancelled
• On-ramp Purchase Completed
• On-ramp Opened

3. Fix "request_platform" event property to report

• iOS
• Android
• Unity
• NodeJS
• Electron
• Web-Mobile
• Web-Desktop
• React Native

4. Add "request_platform" event property to every event where "request_source" event property is present.

Resources

Currently request_source event property is present in following events.
Currently request_platform event property is present in following events.

Acceptance criteria

• Event tracking is successfully implemented in all 4 SDKs. (JS, iOS, Android, Unity)
• Event properties "request_source" and "request_platform" are accurately captured.

Product success criteria

The outcome and impact expected from this work include better understanding of user interactions, facilitating data-driven decisions, and enhancing the overall user experience.

Client stylesheet interferes with <WidgetWrapper />

Describe the bug
The client stylesheet overrides MetaMask modal's one

To Reproduce

1. Apply this style at the top level of the application

p, 
span {
    color: white;
}

Expected behaviour
The client stylesheet should not interfere with MetaMask SDK <WidgetWrapper /> one

Screenshots

** Provide environment information**

• React + nextjs
• MetaMask SDK Version: 0.1.0
• MetaMask Mobile Version: -
• Browser (if relevant): any

[JS] - P0 - Segment integration for JS

Install the Segment snippet on your website
Copy the Segment snippet and paste it high in the of your website. Learn more about setting up Segment in the Analytics.js guide.

<script>
  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="YOUR_API_KEY";;analytics.SNIPPET_VERSION="4.15.3";
  analytics.load("YOUR_API_KEY");
  analytics.page();
  }}();
</script>

[iOS] Add QR code generator

[Unity] - Add Unity SDK to request_platform event property in MM mobile app

[MM Mobile app] - Add button to disconnect each connection individually

Description

Currently when user connects to one or multiple dapps using MetaMask sdk, there is only one way to clear all MetaMask connections at once via SDK. User should be able to select each connection and be able to disconnect one by one instead of all at once.

Steps to reproduce

1. Connect to a dapp via MetaMask SDK.
2. On MetaMask wallet app click on to the menu bar on top left corner.
3. Click on “Settings” from the menu.
4. Click on “Experimental”
5. You can see “MetaMask SDK Connections” & “Clear all MetaMask SDK Connections” button.
6. When user clicks on this button, MetaMask wallet clears all existing connections through MetaMask SDK.

Screenshots

Task/Expected Behavior

1. Connect to a dapp via MetaMask SDK.
2. On MetaMask wallet app click on to the menu bar on top left corner.
3. Click on “Settings” from the menu.
4. Click on “Experimental”
5. You can see “MetaMask SDK Connections”.
6. We should display each connection separately as a list with button options to disconnect. (Design can be different according to Yanrong’s decision.
7. User to chose a connection and just disconnects that connection while the others stay connected.

Resources

Design - https://www.figma.com/file/ITU1jpQaSMoDVnFKVapPFN/Manage-Mobile-SDK-Connections?node-id=0%3A1&t=jVV0kI6sYEf5349D-0

Acceptance criteria

• MetaMask wallet app to display each connection separately.
• User to clear each connection one by one.
• User to clear all connections at once.

[ReactNative, ios] Issues occurred in the use of Contract's ABI (MetaMask SDK: v0.2.3, MetaMask Mobile: v6.3.0)

Describe the bug

• Information cannot be retrieved normally when the readonly api of the contract is executed.
  • ex) basic api - contract.name(), contract.symbol(), contract.decimals(),,,
• The test source is basically a function that reads the contract information, and the web app and mobile app were compared and tested with the same code.
  • base source of web app: /examples/create-react-app
  • base source of mobile app: examples/reactNativeDemo
• The modified source to test the contract function is as follows.
  • app source: https://github.com/reese-1eco/metamask-sdk-reactNativeDemo
  • web source: https://github.com/reese-1eco/metamask-sdk-reactNativeDemo/blob/main/refer-examples-CRA-web-app/create-react-app.tgz

To Reproduce
Steps to reproduce the behaviour:

1. Run the recatNativeDemo app.
2. Click the 'connect' button.
3. Connect a Metamask account and switch to recatNativeDemo.
4. Display the connect info on recatNativeDemo.
5. Click the "try to get contraint info" Click
6. check call function with debugging tools

Expected behaviour
expect to be able to read information normally and use contract abi.

Screenshots

• test to read contract information
  • 
  • 

Provide environment information

• Platform : React-Native
• MetaMask SDK Version: v0.2.3
• MetaMask Mobile Version: v6.3.0(1095)
• Browser (if relevant): Chrome 113.0.5672.92 (arm64)

Additional context

[JS] - Connection delay on JS SDK

User story

As a user, I want to be able to connect to a desktop dapp using my mobile wallet app.

When developers test to connect to MetaMask mobile app from their desktop dapp they see delays on connection. On Android connection takes even longer than iOS.

User insights

This has been reported by dapps testing the JS SDK. The behaviour happens both on iOS and Android. After user clicks on "connect" button on the dapp and is being redirected to the MetaMask app, the connect button on the MM app doesn't appear for a long time. There is a very visible delay, which we should work on resolving as soon as possible. Fandom (tiktok NFT marketplace) removed our SDK and reverted back to WalletConnect until we resolve this issue.

Steps to reproduce

1. Click on “Connect” on your desktop dapp.
2. Scan the QR code via your mobile app.
3. Wait for connection modal to be displayed on mobile app.
4. It takes long time on both iOS and Android to display connect modal on MM mobile app.

Screenshots

Video links - https://www.notion.so/Connection-delay-on-JS-SDK-6f27ead403f34dd5972338f2e2d2f1c0#949c05aacf65418b8657518c3f17b6be

Task/Expected Behavior

We should investigate the root cause of this delay on our JS SDK.

• Does it happen due to our communication layer?
• Is there anything we can update with our socket.io servers that could prevent this delay?
• Why is Android having a longer connection time than iOS?
• Can we isolate this behaviour for certain OS version/App version/Device/Location?

Acceptance criteria

JS SDK to provide a fast and successful connection for desktop dapps on both iOS and Android MM mobile app. (less than 3 seconds)

[JS] - Create Samsung Internet Browser Extension that injects JS SDK into mobile web dapps

Description

Samsung is launching their mobile internet browser and it's extensions to their users.
They want to make wallet connection easier for their users. Our solution is to create an extension for JS SDK that automatically injects JS SDK into mobile web dapps.

Task/Expected Behavior

1. I think we already have an extension for Chrome that we prototyped for the JS SDK. (Andre would know about it)
2. Check if this extension can be modified according to Samsung Internet Browser requirements.
3. It should automatically inject JS SDK into mobile web dapps that have connect library.
4. User flow should be like this. - https://www.figma.com/file/3OBUcQidtLDBxSKmBadQTc/Samsung-Integration-Flow?node-id=0%3A1&t=2ZQXFdzpfmeqLlm3-0
5. Extension should be able to fetch the latest version of the JS SDK and inject into mobile web dapps.

Resources

Samsung Internet Browser documents - https://developer.samsung.com/internet/android/extension-guide.html

Acceptance criteria

1. Extension should work on Samsung Internet Browser on Mobile Devices.
2. Extension should automatically fetch the latest version of the SDK.
3. Extension should detect the connect library on the dapp.
4. Extension should inject JS SDK into the dapps automatically.
5. Extension should add "Connect" button on the mobie dapp's connect UI
6. User should be able to click on "connect" button for MetaMask after adding SDK extension into their Samsung Internet Browser and connect to MetaMask wallet app via deeplinks.
7. If user doesn't have MetaMask wallet installed after clicking on "connect" button on the dapp user should be redirected to the google play store metamask mobile app page.

Deadline May 1st.

[ReactNative, ios] When re-connect is repeated, there is a problem that does not connect normally (MetaMask SDK Version: v0.2.3)

Describe the bug

• When re-connected, it does not connect normally.
  • case1, after calling terminate()
  • case2, after closing reactNativeDemo app

To Reproduce
Steps to reproduce the behaviour:

1. Run the recatNativeDemo app.
2. Click the 'connect' button.
3. Connect a Metamask account and switch to recatNativeDemo.
4. Display the connect info on recatNativeDemo.
5. Click the terminate button.
6. Retry from step 2 (clicking the 'connect' button) onwards -> -> Success or Failure (no specific error message is displayed).

Expected behaviour
I expect it to connect successfully to metamask after calling "terminate()" or after re-running "recatNativeDemo".

Screenshots
Attach "reconnect-failed.mp4" including the test process.

• reconnect-failed.mp4

Provide environment information

• Platform : React-Native
• MetaMask SDK Version: v0.2.3
• MetaMask Mobile Version: v6.3.0(1095)
• Browser (if relevant): Chrome 113.0.5672.92 (arm64)

Additional context

• No problem connecting web app(examples/create-react-app) and chrome extension metamask(v10.29.0)
• When using metamask-sdk(v0.2.3) and metamask-mobile(v6.3.0(1095)), there is no session information in wellectConnect sessions even if the connection is successful
• In case of connection problem, if you close metamask-mobile and try to connect, it connects normally, i.e. the first one always succeeds
• The source used in the above video is shared at https://github.com/reese-1eco/metamask-sdk-reactNativeDemo.

Unable to process contracts after upgrade @metamask/sdk from 0.1.0 to >= 0.2.0 and other issues

Describe the bug
After upgrading sdk from 0.1.0 some functionality stopped working, especially one that interacts with a contracts which worked prior with sdk 0.1.0 and metamask-mobile 6.2.0. SDK v0.1.0 stoped work with versions higher than metamask-mobile 6.2.0.
Interaction with contracts was ok and worked as expected, however after upgrading in't no longer working. In addition there are

Not working contract:

2023-05-13.04.18.28.mp4

Here is also a screencapture of unstable work:

telegram-cloud-document-2-5402154240787360527.mp4

To Reproduce

reproduction repo

Expected behaviour
Contract interation works and sdk works stable.

Screenshots
If applicable, add screenshots to help explain your problem.

** Provide environment information**

• Platform (Eg. Web / React-Native / Node.js / Unity): React-Native
• MetaMask SDK Version: 0.2.4
• MetaMask Mobile Version: 6.4.0
• Browser (if relevant):

Additional context
Add any other context about the problem here.

[iOS] Integrate ECIES crypto library

[JS] - P0 - Implement session persistence

Session persistence when dapp is killed

User story

Currently we establish a connection between a dapp and wallet via our communication layer. For each connection we create a uniqe id that is mapped to user's public key. When user kills the app, refreshes the page, even navigates through website in some cases, connection is lost. Session persistence should allow us to expand the usage of this unique id of the each connection.

Option 1

We can store the unique id that is created after every connection in our servers and call from the sdk via an api call. This way we can map user with each connection id when it's needed without needing to reconnect everytime. This unique id we create for each connection is already a nonce and Metamask mobile app stores this id. But the SDK doesn't.

Additional requirements

• add an expiration time
• allow the user to disconnect from a single one

Option 2

In the app we “store” ids of the connection channels so that the app when restarts/resumes tries to reconnect to them.

We can do the same on the dapp side by using asyncstorage that is browser session persistent so the only information that is kept is the channel id, which should be secure enough. We should re-do a key exchange every time a session is resumed. So that we don’t need to store any key pair information. This keeps the same security as the initial connection but without asking the user to re-scan the QRCode, approve connection etc.

Additional requirements

• add an expiration time
• allow the user to disconnect from a single one

Whichever option we chose we should make sure that we can use this for web3 auth and token gating in the future.

Areas to Investigate

1. Possibility of a malicious” dapp having access to the browser asyncstorage and trying to connect to the channel as if it was the original one.
2. Can storing ids on the dapp and app side be useful for token gating & web3 auth?
3. Can this solution work for mobile app, mobile web and desktop apps?
4. How should be the connection id - dapp - device - MM account mapping happen?
   1. User to connect multiple daps through the same MM account.
   2. User to connect multiple dapps through different MM accounts.
5. The ideal expiration time.
   1. WalletConnect has two expiration times for connection. One for user transacting after connecting, the other one is for user connecting and not doing any transactions after the connection.
6. How to measure expiration time for multiple dapp connections on the same wallet app?
7. Identify user actions that requires a re-connection.
   1. Killing and reopening the app
   2. Refreshing the dapp
   3. Navigating inside the dapp
   4. Backgrounding the dapp on all platforms
   5. Connection loss/Service loss

Steps to reproduce

1. User connects to MM mobile app using a dapp with SDK integration
2. User kills the dapp on mobile.
3. User reopens the app
4. Connection is established automatically without following the same user flow.

Task/Expected Behavior

1. User should be able to connect the same dapp without clicking on the “connect” modal or scanning any QR code after connecting once and killing the app.
2. User should have an expiration time for an established connection.
3. MM Mobile app and dapps to store connection id, expiration, MM account being mapped to each connection correctly.
4. Connection should be re-established after every user action that is identified as killing the connection.

Resources

Current design

Concepts | MetaMask Docs

We can benefit from WalletConnect's approach on session persistence.
https://docs.walletconnect.com/2.0/advanced/migrating-from-v1.0#pairings--sessions
https://docs.walletconnect.com/2.0/specs/core/pairing#pairing-lifecycle

Acceptance criteria

TBD

[Global] - Discord update according to public beta launch

• update Discord welcome message
• add public beta announcement to Discord

process is not defined

Describe the bug
I just came across MetaMask SDK and then tried to install and use it in my React DApp, but after the initialization of MetaMask SDK (in a separate React hook), it gives me this error! I even defined process in .env file and did other stuff and solutions but it didn't solve the problem,

I don't know what's wrong with it.

To Reproduce
Steps to reproduce the behaviour:

1. If it's necessary, Go to my DApp repository which is available on GitHub profile.
2. then, Check out the src/hooks/useMetaMask.tsx
3. You can see if there is any mistake I've made or it perhaps is an issue!

Expected behaviour
It must not throw this kind of error!

Screenshots

** Provide environment information**

• Platform (Eg. Web / React-Native / Node.js / Unity): React 18.2.0 | TypeScript
• Node.js Version: v18.16.0
• NPM version: v9.6.6
• MetaMask SDK Version: 1.0.0 (Latest)
• Browser (if relevant): Brave - Version 1.51.114 Chromium: 113.0.5672.92 (Official Build) (64-bit)

[Global] - Tutorials: For example, Using MetaMask server side

Don't use nodeify anymore on RN (replace with https://www.npmjs.com/package/node-libs-react-native)

Don't use nodeify anymore on RN (replace with https://www.npmjs.com/package/node-libs-react-native)

Nodeify introduces a lot of problems. We should use node-libs-react-native instead.

For reference: WalletConnect/walletconnect-monorepo#753

react-native ReferenceError: Property 'MessageEvent' doesn't exist, js engine: hermes

Describe the bug

Hi! I'm having a problem while connecting my RN dapp to metamask-mobile stoped working with sdk 0.1.0 after client has automatically updated to 6.3.0 from store and I believe upgrade sdk to 0.2.0 can help me in this situation. However, upgrading sdk version from 0.1.0 to 0.2.0 react native crashes with message: ReferenceError: Property 'MessageEvent' doesn't exist, js engine: hermes

To Reproduce
Steps to reproduce the behaviour:

1. Upgrade @metamask/sdk from 0.1.0 to 0.2.0
2. See error

Expected behaviour
Works without problems

Screenshots

** Provide environment information**

• Platform (Eg. Web / React-Native / Node.js / Unity): React-Native
• MetaMask SDK Version: 0.2.0
• MetaMask Mobile Version: 6.3.0

[iOS] Add key exchange module

[Global] - P1 - Deploy docs to main website

User story

As a user I want to be able to access MetaMask SDK docs through the main MetaMask website https://docs.metamask.io/. Currently SDK docs are at a separate location and their URL looks like it’s a fake/spam url. This has a negative user experience on users/developers.

https://consensys.slack.com/archives/C027M10HGEA/p1671209710469709

Task/Expected Behavior

Merging should all be done in the metamask-docs repo: https://github.com/MetaMask/metamask-docs

Acceptance criteria

MetaMask SDK docs to locate under https://docs.metamask.io/

[JS] - Pause connection on RN apps on background

[JS] [MOBILE] SDK Support for Permission Systems

Description:
We should add support for permission systems for SDK.

Design:
https://www.figma.com/file/piME5CaTYUz07Gc7Ye7c22/Deeplinking--SDK?type=design&node-id=1633-2285&mode=design&t=egikpsEVgt3xcMNg-0

https://app.zenhub.com/workspaces/metamask-mobile-5f984938ddc0e4001d4b79cb/issues/gh/metamask/mobile-planning/868

Data Tracking: SDK permissions should also be supported by the mobile app permission tracking - https://github.com/MetaMask/mobile-planning/issues/521

[JS] - React Native connection delays on Android

Description

Steps to reproduce

Screenshots

Task/Expected Behavior

Resources

Add here any links that are needed as part of the copy or designs.

Acceptance criteria

WalletConnect V2 Migration

Description

We will migrate to V2 using the light version of the WC V2 - https://github.com/WalletConnect/se-sdk
This also contain their Auth SDK which enables signing with ethereum. However, we won' be supporting this. So if this cannot be disabled we need to ask a new version of the light SDK from WC team.

WalletConnect V2 Reported Issues

Issue 1:
Cannot establish a session between native Kotlin Dapp and MM via deep-link
https://images.zenhubusercontent.com/468319547/25ed3164-1015-4d07-b191-52aa1624c49e/metamast__1_.mp4

Issue 2: Android Only
Noticed that on Rainbow, Trust, and Metamask - wallets are not setting the redirect field. This should be set to a URI that can be used for deep-linking directly to your wallet (ex: metamask:// or rainbow://).
Otherwise, when sending the user to the wallet for an action, the best we can do is show the system app chooser - this is extremely poor UX because the user could accidentally select the wrong wallet (ex: they connected Metamask, but chose to launch Rainbow by accident.)

Issue 3:
Opensea: Sending eth_sendTransaction requests to MM Android from a Kotlin Dapp does not seem to be working
getting java.lang.Throwable: JsonRpcInteractor: Received unknown object type
Native Kotlin test app for WCv2:
https://appdistribution.firebase.dev/i/2b254c3073d2e514

MM is sending back:
{"id":1684337712156700,"jsonrpc":"2.0","error":{"line":3691,"column":1786,"sourceURL":"index.android.bundle"}}
which is not valid JsonRpc format

Other Issues: Tested on Opensea app

Test Cases and results for WalletConnect V2
https://docs.google.com/document/d/1Ugx5w4beLw99ghX4-ccjFHEDbjJ0AyB-XPfWcGCghsg/edit#

[iOS] Add Ethereum requests module

WalletConnect change from universal links to deeplinks

Description:

Hey MetaMask team, we have evaluated that although universal links provided a superior UX when it worked they were blocking users completely when it didn’t work
So with the new Web3Modal v2.3.0 we are moving away to prioritize deep links over universal links instead
We created this new UI which handles the pending state for deep links plus provide fallback buttons… one button for retrial and one button for the previous Universal Link which was preferred before
However we noticed that while MetaMask handles WC links through universal linking… it does NOT handle WC links through deep linking
This means that users in v2.3.0 will be getting stalled through the default pattern and would need to retry the connection with Universal Link instead

Task

Update the deeplinkmanager in the MetaMask Wallet app accordingly.

[iOS] Add crypto (encryption) protocol

Unable to compile

[Unity] WebGL build ios deeplink not work

Describe the bug
WebGL build is on ios, deeplink does not work properly.

IOS Chrome -- I can navigate through the popup, but it only takes me to the app store, even when Metamask is already installed.
IOS Safari -- No response.

Android Chrome -- Works well

Expected behaviour
If MetaMask is not installed, it should point to the app store and if it is already installed, it should be ConnectWallet.

** Provide environment information**

• Platform (Eg. Web / React-Native / Node.js / Unity): Unity Webgl
• MetaMask SDK Version: 1.1.1
• MetaMask Mobile Version: v6.3.0(1095)
• Browser (if relevant): Chrome, Safari

showQRCode option for MetaMaskSDK ignored

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behaviour:
const sdk = new MetaMaskSDK({ shouldShimWeb3: false, showQRCode: false }) const provider = sdk.getProvider() if (provider) { const accounts = await provider.request({ method: "eth_requestAccounts", params: [] }) console.log(">>>>", accounts[0], "<<<<") } else { console.log("Please install MetaMask!") }

Expected behaviour
I do not expect to see the qrcode in the console output

Screenshots

** Provide environment information**

• MetaMask SDK Version:
  0.2.1

[JS] - Aave JS SDK Integration

Description

Aave has no option for MM to connect and they said they are not doing any direct integrations but if we create a PR for it they can merge it.
https://docs.google.com/document/d/1WqDUb-Cw6N3nQjr3VEH_Mv-ZK49pl9NgN7aThPF-CcQ/edit

Task/Expected Behaviour

• Create a PR that integrates MetaMask JS SDK into Aave.
  https://github.com/aave/interface/
• Here is where we need to tap into: https://github.com/aave/interface/blob/main/src/components/WalletConnection/WalletSelector.tsx
  https://github.com/aave/interface/tree/main/src/libs/web3-data-provider

Not redirecting back to app after successful connect

After successfully linking to metamask and establishing a connection MetaMask: Connected to chain with ID "0x1". I am no longer redirected back to my app

To Reproduce
Steps to reproduce the behaviour:

• Create instance of MetaMaskSDK, getProvider, and request accounts
• Metamask deeplink prompted on request account -> click connect
• Successfully connected account but are not redirected back to app

Expected behaviour
Redirected back to app after successful connection

• React Native
• MetaMask SDK Version: 0.1.0
• MetaMask Mobile Version: 6.3.0

[JS] - Update/fix app/dapp examples

[MetaMask Mobile App] - Bypass SDK deeplinks on mobile app to prevent displaying the warning message.

User story

When user is redirected to the MM app from dapp using SDK our app shows a warning message which affects the user experience. We need to add an exception for SDK links in the next version of MM app.

User insights

Developer feedback: It could be cool to avoid this kind of message for our end-users.

Steps to reproduce

1. User clicks on a desktop dapp to connect.
2. QR code is displayed and user scans the QR code with MM mobile app.
3. MM Mobile app shows a warning message before redirecting the user to the connect modal.

Screenshots

Task/Expected Behavior

MM Mobile app to add an exception for SDK links and not show this warning message for desktop dapps using MM SDK to connect to MM mobile app.

Acceptance criteria

Warning message should not be shown for desktop dapps connecting to MM Mobile via MM SDK for both MM iOS and Android apps.

[JS] - Implement modal with loading video animation on both Dapp and Mobile app

Description

When user clicks on “connect” button on a mobile dapp and is redirected to the MetaMask wallet to establish the connection, sometimes connection is killed when dapp is backgrounded. To prevent this and to improve user experience, we want to show an animation that says “Connecting to MetaMask”

1. on dapp
2. on MetaMask app. This will prevent dapp connection to be killed when app is backgrounded but also creates a better user experience for the end user when user is redirected to the MetaMask app and experiences a connection delay.

Task/Expected Behavior

• Add dapp animation into the JS SDK.

• It should be displayed when user clicks on “connect” on the dapp.

• It should continue to play when app is backgrounded until connection is established.

• It should stop playing when connection is established.

• Add app animation into the mobile app.

• It should be displayed before connect modal is displayed.

• Connect modal should be displayed after the loading animation.

Resources

Connection design is for the dapp.https://images.zenhubusercontent.com/468319547/791e3057-34fc-457e-a36e-a751967f2f0f/connecting.mov

Json file - https://drive.google.com/file/d/16FAuWUyI4at233mFIhoZ_S11y9ysk7ER/view?usp=sharing

Connection design for the mobile app - (both for dark mode and light mode) - https://drive.google.com/drive/folders/1DoZ6eBuVkQYq__XiNRnJXCW8QvYLLz-H?usp=sharing

Acceptance criteria

• Animation should be displayed when user clicks on “connect” on the dapp.
• User should be redirected to the MM wallet app in the meantime.
• Animation should continue to play when dapp is backgrounded.
• Animation should stop playing when user clicks on “connect” on MetaMask wallet app.
• Mobile app animation should be displayed when user landed to MetaMask Mobile app from the dapp.
• Animation should be removed when connect modal is displayed on the MetaMask Mobile app.

MetaMask SDK with pure JavaScript is not work

■My Code(test.html)

<script src="https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/cdn/metamask-sdk.js"></script> <script> const MMSDK = new MetaMaskSDK() </script>

■Error Message
Uncaught TypeError: MetaMaskSDK is not a constructor

MetaMaskSDK is not a constructor

Is there any solution?

■Code
import MetaMaskSDK from '@metamask/sdk';
const options = {
injectProvider: false,
communicationLayerPreference: 'webrtc',
};

const MMSDK = new MetaMaskSDK(options);

■Error
MetaMaskSDK is not a constructor

[JS] - P0 - Add ability to disable reliability tracking on SDK

[JS] - SDK React Native Kit

Description
We are creating React Native Kit which will contain libraries and UI designs for developers to integrate and use JS SDK easier.

Task/Expected Behavior
Add wagmi library to the React Native Kit
Add ethers.js library to the React Native Kit
Add UI designs to the React Native Kit. - https://www.figma.com/file/piME5CaTYUz07Gc7Ye7c22/Deeplinking--SDK?node-id=0%3A1&t=TmfRvbS967COX40L-0
Deadline - 30th March

[JS] - Segment integration for react native

[JS] - SDK React Kit

Description

We are creating React Kit which will contain libraries and UI designs for developers to integrate and use JS SDK easier.

Task/Expected Behavior

• Add wagmi library to the React Kit
• Add ethers.js library to the React Kit
• Add UI designs to the React Kit. - https://www.figma.com/file/piME5CaTYUz07Gc7Ye7c22/Deeplinking--SDK?node-id=0%3A1&t=TmfRvbS967COX40L-0

Deadline - 30th March

[iOS] Add support for Swift Package Manager

Add example Dapp

Add an example dapp that integrates the SDK and makes ethereum calls

[JS] - Finish sdk-react

unable to obtain the string from getUniversalLink

Describe the bug
currently is not possible to get the universallink to a variable.

To Reproduce
const sdk = new MetaMaskSDK({ shouldShimWeb3: false, shouldSetOnWindow: false, showQRCode: false, logging: { developerMode: true, sdk: true } }) const ethereum = sdk.getProvider() sdk.getUniversalLink() await ethereum.request({ method: "eth_requestAccounts", params: [] })

Expected Behavor
i should be able to obtain the string in nodejs