Skip to content
This repository was archived by the owner on Sep 26, 2025. It is now read-only.

Commit 841564b

Browse files
committed
add mobile-linking
1 parent 5211089 commit 841564b

4 files changed

Lines changed: 135 additions & 0 deletions

File tree

193 KB
Loading

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

SUMMARY.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
- [Technical Specification](tech-spec.md)
1313
- [JSON-RPC API Methods](json-rpc.md)
1414
- [Ethereum](json-rpc/ethereum.md)
15+
- [Mobile Linking](mobile-linking.md)
1516
- [Legacy Clients](legacy-clients.md)
1617
- [Client API Reference](client-api.md)
1718
- [Bridge Server API Reference](bridge-server.md)

mobile-linking.md

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# Mobile Linking
2+
3+
For a long time WalletConnect served only as secure remote communication between a mobile wallet and a desktop application.
4+
5+
However connecting a mobile wallet and a mobile application was always possible by design.
6+
7+
Using the URI commonly displayed in the QRCode it is possible to establish a connection by sharing this URI through a deep link or universal link on both Android and iOS.
8+
9+
Despite the multiple UX caveats that mobile linking encountered, we've been able to simplify this pattern with our own QR Code Modal package.
10+
11+
![mobile linking](.gitbook/assets/mobile-linking-preview.png)
12+
13+
The pattern we chose to adhere for a consistent UX across platforms for connection establishment is the following:
14+
15+
1. Dapp prompts user to connect with:
16+
a) single button for Android
17+
b) wallet list for iOS
18+
2. User presses button to connect and is redirected to wallet of choice
19+
3. Wallet prompts user to approve or reject session
20+
4. Wallet prompts user to return to Dapp manually
21+
5. User presses back/return button to return to Dapp
22+
23+
Similar pattern happens when signing requests are required from the user:
24+
25+
1. Dapp redirects user automatically to previously chosen wallet
26+
2. Wallet prompts user to approve or reject request
27+
3. Wallet prompts user to return to Dapp manually
28+
4. User presses back/return button to return to Dapp
29+
30+
In the next sections, we describe how both Wallets and Dapps can support the mobile linking pattern for their WalletConnect integrations.
31+
32+
## Wallet Support
33+
34+
In order to add support for mobile linking within your wallet, you will just need to register the following deep link or universal link subscriptions in your mobile app.
35+
36+
**For Android**
37+
38+
Android has the easiest integration as it's operating system is designed to handle multiple applications subscribing to the same deep linking schema. Hence you will only need to register to the `wc:` schema that is defined per the WalletConnect URI standard.
39+
40+
```bash
41+
# Example
42+
wc:00e46b69-d0cc-4b3e-b6a2-cee442f97188@1?bridge=https%3A%2F%2Fbridge.walletconnect.org&key=91303dedf64285cbbaf9120f6e9d160a5c8aa3deb67017a3874cd272323f48ae
43+
```
44+
45+
Additionally when there is a signing request triggered by the dapp it will hit the deep link with an incomplete URI, this should be ignored and not considered invalid as it's only used for automatically redirecting the users to approve or reject a signing request.
46+
47+
```bash
48+
# Example
49+
wc:00e46b69-d0cc-4b3e-b6a2-cee442f97188@1
50+
```
51+
52+
**For iOS**
53+
54+
iOS has the a little more caveats to the integration but we ensure to make it as straightforward as possible. Since it's operating system is not designed to handle multiple applications subscribing to the same deep linking schema, we've designed the QRCode Modal to list supporting wallets on our [open-source registry](https://github.com/WalletConnect/walletconnect-monorepo/blob/next/packages/helpers/mobile-registry/registry.json) and target specific deep links or universal links for each wallet.
55+
56+
To add your own wallet to the registry, you must submit a pull request to our monorepo on [Github](https://github.com/walletconnect/walletconnect-monorepo).
57+
58+
```json
59+
{
60+
"name": "Example Wallet",
61+
"color": "rgb(255, 255, 255)",
62+
"logo": "https://raw.githubusercontent.com/WalletConnect/walletconnect-monorepo/next/packages/helpers/mobile-registry/logos/wallet-example.png",
63+
"universalLink": "https://example.wallet",
64+
"deepLink": "examplewallet:",
65+
"chromeIntent": ""
66+
}
67+
```
68+
69+
We recommend that universal links are used instead of deep links for iOS since they provide smoother UX with less prompts. When a dapp triggers a mobile connection on iOS, you should expect the following links
70+
71+
```bash
72+
# For deep links
73+
examplewallet://wc?uri=wc:00e46b69-d0cc-4b3e-b6a2-cee442f97188@1?bridge=https%3A%2F%2Fbridge.walletconnect.org&key=91303dedf64285cbbaf9120f6e9d160a5c8aa3deb67017a3874cd272323f48ae
74+
75+
# For universal links
76+
https://example.wallet/wc?uri=wc:00e46b69-d0cc-4b3e-b6a2-cee442f97188@1?bridge=https%3A%2F%2Fbridge.walletconnect.org&key=91303dedf64285cbbaf9120f6e9d160a5c8aa3deb67017a3874cd272323f48ae
77+
```
78+
79+
Additionally when there is a signing request triggered by the dapp it will hit the deep link with an incomplete URI, this should be ignored and not considered invalid as it's only used for automatically redirecting the users to approve or reject a signing request.
80+
81+
```bash
82+
# For deep links
83+
examplewallet://wc?uri=wc:00e46b69-d0cc-4b3e-b6a2-cee442f97188@1
84+
85+
# For universal links
86+
https://example.wallet/wc?uri=wc:00e46b69-d0cc-4b3e-b6a2-cee442f97188@1
87+
```
88+
89+
## Dapp Support
90+
91+
If you are building a Dapp you will be able to support this pattern by simply installing the provided qrcode-modal package we have distributed. This package is already provided through web3-provider package which is what we would recommend you use.
92+
93+
{% tabs %}
94+
{% tab title="yarn" %}
95+
96+
```bash
97+
yarn add @walletconnect/qrcode-modal
98+
```
99+
100+
{% endtab %}
101+
102+
{% tab title="npm" %}
103+
104+
```bash
105+
npm install --save @walletconnect/qrcode-modal
106+
```
107+
108+
{% endtab %}
109+
{% endtabs %}
110+
111+
If you would like to build your own UI for mobile linking, we provide the same assets used in our qrcode-modal package.
112+
113+
{% tabs %}
114+
{% tab title="yarn" %}
115+
116+
```bash
117+
yarn add @walletconnect/utils @walletconnect/mobile-registry
118+
```
119+
120+
{% endtab %}
121+
122+
{% tab title="npm" %}
123+
124+
```bash
125+
npm install --save @walletconnect/utils @walletconnect/mobile-registry
126+
```
127+
128+
{% endtab %}
129+
{% endtabs %}
130+
131+
The mobile-registry package will allow you to list the supported mobile linking wallets and provide you with logo, name, color and targetted deep links.
132+
133+
We highly recommend that you use our provided qrcode-modal package to maintain a consistent UX across WalletConnect integrations however we moduralized our packages to give the option on the ethos of decentralization.

0 commit comments

Comments
 (0)