diff --git a/README.md b/README.md index f59b8e9..01390c8 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,77 @@ This library provides a Wallet class that extends the [ Web3Wallet ](https://github.com/WalletConnect/walletconnect-monorepo/tree/v2.0/packages/web3wallet) class provided by WalletConnect class +#### Configuration + +There are some required preparations for a wallet to be accessible from the WalletConnect modal. + +##### Mobile + +1. [Support](https://docs.walletconnect.com/web3wallet/mobileLinking) deep links or universal links in the app. +2. Add appropriate deep or universal link to the WalletConnect project (as `Deep link` or `Universal link` respectively). + +##### Chrome extension + +1. Create a separate `/wc` page on a wallet web site (e.g. `https://mycoolwallet.com/wc`). +2. Add a URL handler to the extension content scripts. The handler should detect if the page is correct and parse the `uri` query parameter. That parameter contains the WalletConnect pairing URI. +3. Send the URI to the extension itself and initiate the pairing. +4. Add the wallet web site address to the WalletConnect project (as `Web wallet link`). + +###### Content script code example + +```javascript +const MessageType = { + PAIR_WC = 0, + CLOSE_CURRENT_TAB = 1 +}; + +class Content { + #port; + + constructor() { + this.#port = chrome.runtime.connect({name: "TestContentPort"}); + + this.checkURL() + } + + async #checkURL() { + const urlToCheck = "https://mycoolwallet.com/"; // this URL may be injected at runtime + const uri = new URL(location.href); + + // content scripts are injected into every tab and frame, + // we need to make sure, that the code below will be executed on the correct page only + if (!urlToCheck.startsWith(uri.origin)) { + return; + } + + const wcUri = uri.searchParams.get("uri"); + + // check if route is correct and URI param is present + if (uri.pathname !== "/wc" || !wcUri) { + return; + } + + // pass the pairing URI to the extension + this.sendMessage(MessageType.PAIR_WC, wcUri); + + // this.sendMessage(MessageType.CLOSE_CURRENT_TAB); optionally you can close the current tab + } + + #sendMessage(type, payload) { + // a background script should listen to the same port to get messages + this.#port.postMessage({ + type, + payload + }); + } +} +``` + +##### Desktop app + +1. Support deep links in the app. +2. Add appropriate deep link to the WalletConnect project (as `Deep link`). + #### Event Listeners WalletConnect emits various events during a session. Listen to these events to synchronize the