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

Wc 2 #3045

Merged
merged 24 commits into from
Nov 8, 2024
Merged

Wc 2 #3045

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
42a5799
Merge branch 'master' of https://github.com/ecadlabs/taquito
hui-an-yang Jul 26, 2024
e45286c
Merge branch 'master' of https://github.com/ecadlabs/taquito
hui-an-yang Aug 29, 2024
903169d
Merge branch 'master' of https://github.com/ecadlabs/taquito
hui-an-yang Sep 12, 2024
e0cb854
feat: revived @taquiot/wallet-connect-2 package
hui-an-yang Sep 12, 2024
bc60f8b
docs: adding website doc with live code example (modal isn't working …
hui-an-yang Sep 19, 2024
37dd379
feat: has qrcode modal working with @walletconnect/legacy-modal
hui-an-yang Sep 26, 2024
410c28c
feat: fill-in wc2 logic of sing and getPK
hui-an-yang Sep 26, 2024
25d970a
test: added unit test ofr sign and getPK
hui-an-yang Sep 26, 2024
e35c000
Merge branch 'master' of https://github.com/ecadlabs/taquito into HEAD
hui-an-yang Sep 26, 2024
4502753
Merge branch 'wc-2' of https://github.com/ecadlabs/taquito into wc-2
hui-an-yang Oct 10, 2024
902b352
chore: dependencies update to fix vulnerbilities
hui-an-yang Oct 10, 2024
f5fdb00
Merge branch 'master' of https://github.com/ecadlabs/taquito into wc-2
hui-an-yang Oct 17, 2024
303376c
feat: testdapp with walletconnect option
hui-an-yang Oct 25, 2024
c1580f5
feat(wallet connect): sign payload using wc in test-dapp
roxaneletourneau Nov 1, 2024
ced7349
Updated docs
roxaneletourneau Nov 5, 2024
b3d7259
Merge pull request #3074 from ecadlabs/wc-2-test-dapp
roxaneletourneau Nov 5, 2024
94e78d2
Merge branch 'wc-2' of https://github.com/ecadlabs/taquito into wc-2
hui-an-yang Nov 5, 2024
1b993e0
fix: make verifySignatureWithTaquito walletconnect compatiable
hui-an-yang Nov 6, 2024
82bcbd5
fix: resolve not subscribeToEvent ACTIVE_ACCOUNT_SET error in console
hui-an-yang Nov 6, 2024
b207276
fix: added registryUrl to fix console 404 error
hui-an-yang Nov 6, 2024
e3230bf
chore: update dependencies
hui-an-yang Nov 6, 2024
b9c0f1e
refactor: rename from walletconnect2 to walletconnect
hui-an-yang Nov 6, 2024
ed93be8
chore: updated sass to 1.80.1
hui-an-yang Nov 7, 2024
3397c63
docs: added (BETA) to walletconnect package
hui-an-yang Nov 7, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 120 additions & 0 deletions docs/wallet_connect_2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
---
title: Wallet Connect 2
author: Roxane Letourneau
---

The `@taquito/wallet-connect-2` package provides a `WalletConnect2` class which implements the `WalletProvider` interface. The package is intended to be used by dapp developers. Similarly to `BeaconWallet`, an instance of `WalletConnect2` can be injected into the `TezosToolkit` to work with the wallet API.

## Instantiate `WalletConnect2` and connect to a wallet

The first step is to instantiate `WalletConnect2` by passing your dapp details as a parameter of the `init` method as follows:

```ts
import { WalletConnect2 } from "@taquito/wallet-connect-2";

const walletConnect = await WalletConnect2.init({
projectId: "YOUR_PROJECT_ID", // Your Project ID gives you access to WalletConnect Cloud
metadata: {
name: "YOUR_DAPP_NAME",
description: "YOUR_DAPP_DESCRIPTION",
icons: ["ICON_URL"],
url: "DAPP_URL",
},
});
```
`YOUR_PROJECT_ID` can be obtained from [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in)

The second step is to establish a connection to a wallet using the `requestPermissions` method:

```ts
import { NetworkType, PermissionScopeMethods } from "@taquito/wallet-connect-2";

await walletConnect.requestPermissions({
permissionScope: {
networks: [NetworkType.GHOSTNET],
methods: [
PermissionScopeMethods.TEZOS_SEND, PermissionScopeMethods.TEZOS_SIGN
],
},
// registryUrl: "https://www.tezos.help/wcdata/"
});
```

The parameter of the `requestPermissions` method has a `permissionScope` property allowing to specify the networks, methods, and events that will be granted permission.

It has an optional `pairingTopic` property, which allows connecting to an existing active pairing. If `pairingTopic` is undefined, a QR/deep-links Modal will open in the dapp, allowing the user to connect to a wallet. If `pairingTopic` is defined, no modal will be shown in the dapp, and a prompt will appear in the corresponding wallet to accept or decline the session proposal. The list of active pairings can be accessed using the `getAvailablePairing` method. A good practice is to show the dapp user available pairings if they exist and to allow him to connect through one of them (skip the QR/deep-links Modal) or to connect using a new pairing (using the QR/deep-links)

The parameter of the `requestPermissions` method also has an optional `registryUrl` parameter allowing to customize the list of wallet deep links to show in the Modal.

If no connection can be established with a wallet, the error `ConnectionFailed` will be thrown.

Suppose there is a need to restore a session in the dapp rather than using the `requestPermissions` method, which would establish a new session. In that case, it is possible to configure the `WalletConnect2` class with an existing session using the `configureWithExistingSessionKey` method. The session will be immediately restored without a prompt in the wallet to accept/decline it. The list of existing sessions can be retrieved with the `getAllExistingSessionKeys` method. An `InvalidSessionKey` error will be thrown if the provided session key doesn't exist.

## Send Tezos operation with `WalletConnect2` and `TezosToolkit`

Once an instance of `WalletConnect2` is created and a session is established, it can be injected into the `TezosToolkit` using its `setWalletProvider` method. Methods of the wallet API can be invoked to send operations to the blockchain. Those operations will be signed and injected by the wallet. The permission `PermissionScopeMethods.TEZOS_SEND` must have been granted, or the error `MissingRequiredScope` will be thrown.

Wallet connect 2 allows granting permission for multiple accounts in a session. The `setActiveAccount` must be called to set the active account that will be used to prepare the operation. It should be called every time the active account is updated in the dapp. It is possible to retrieve a list of all connected accounts using the `getAccounts` method. The `getPKH` method will return the public key hash of the active account. Note that if only one account is present in the session, it will be set as the active one by default.

In the same order of ideas, `setActiveNetwork` must be called to specify the active network. The `getNetworks` method retrieves the list of available networks in the session.

Here is a complete example of using wallet connect to perform a transfer operation:

```js live noInline noConfig
Tezos.setRpcProvider('https://ghostnet.ecadinfra.com/');

WalletConnect2.init({
logger: 'debug',
projectId: '861613623da99d7285aaad8279a87ee9',
metadata: {
name: 'Taquito website',
description: 'Taquito website with WalletConnect2',
url: 'https://tezostaquito.io/',
icons: [],
},
})
.then((walletConnect) => {
walletConnect
.requestPermissions({
permissionScope: {
networks: [NetworkType.GHOSTNET],
methods: [PermissionScopeMethods.TEZOS_SEND],
},
// registryUrl: 'https://www.tezos.help/wcdata/',
})
.then(() => {
Tezos.setWalletProvider(walletConnect);
Tezos.wallet
.transfer({ to: 'tz1h3rQ8wBxFd8L9B3d7Jhaawu6Z568XU3xY', amount: 1 })
.send()
.then((op) => {
console.log(`Waiting for ${op.opHash} to be confirmed...`);
return op.confirmation().then(() => op.opHash);
})
.then((hash) => console.log(`https://ghostnet.tzkt.io/${hash}`));
});
})
.catch((err) => console.log(err));
```

## Sign payload with `WalletConnect2`

The `signPayload` method of `WalletConnect2` can be called to sign a payload. The response will be a string representing the signature. The permission `PermissionScopeMethods.TEZOS_SIGN` must have been granted, or the error `MissingRequiredScope` will be thrown.

## Events handling

Wallet connect 2 allows listening to specific events. Taquito has listeners on the events `session_delete`, `session_expire`, and `session_update` and will update his internal session member accordingly if one of these events is emitted. The dapp should also handle those events as follow:

```ts
walletConnect.signClient.on("session_delete", ({ topic }) => {
// The session was deleted from the wallet
// the dapp should listen for the event and reset the dapp state,
// clean up from user session (for example, go back to the connect wallet page)
});

walletConnect.signClient.on("session_update", ({ topic }) => {
// The session was updated in the wallet
// Does the accounts/network have changed, which requires calling the `setActiveAccount/setActiveNetwork` methods?
// Update the app's state (selected account, available accounts, balance, ...)
});
```
Loading
Loading