Trust Developer
Search…
WalletConnect
WalletConnect is an open source protocol for connecting dApps to mobile wallets with QR code scanning or deep linking, basically it's a websocket JSON-RPC channel.
There are two common ways to integrate: Standalone Client and Web3Model (Web3 Provider)
Standalone Client
Trust extends WalletConnect 1.x with aditional JSON-RPC methods to support multi-chain dApps. Currently, you can get all accounts and sign transactions for any blockchain implements
signJSON method in wallet core.Supported Coins
- Binance Chain
- Ethereum and forks
- Cosmos, Kava and other sdk based chains
- Tezos
- Nano
- Filecoin
- Harmony
- Solana
- Zilliqa
Installation
1
npm install --save @walletconnect/client @walletconnect/qrcode-modal
Copied!
Initiate Connection
Before you can sign transactions, you have to initiate a connection to a WalletConnect bridge server, and handle all possible states:
1
import WalletConnect from "@walletconnect/client";
2
import QRCodeModal from "@walletconnect/qrcode-modal";
3
4
// Create a connector
5
const connector = new WalletConnect({
6
bridge: "https://bridge.walletconnect.org", // Required
7
qrcodeModal: QRCodeModal,
8
});
9
10
// Check if connection is already established
11
if (!connector.connected) {
12
// create new session
13
connector.createSession();
14
}
15
16
// Subscribe to connection events
17
connector.on("connect", (error, payload) => {
18
if (error) {
19
throw error;
20
}
21
22
// Get provided accounts and chainId
23
const { accounts, chainId } = payload.params[0];
24
});
25
26
connector.on("session_update", (error, payload) => {
27
if (error) {
28
throw error;
29
}
30
31
// Get updated accounts and chainId
32
const { accounts, chainId } = payload.params[0];
33
});
34
35
connector.on("disconnect", (error, payload) => {
36
if (error) {
37
throw error;
38
}
39
40
// Delete connector
41
});
Copied!
code snippet above is copied from https://docs.walletconnect.org/quick-start/dapps/client#initiate-connection, please check out the original link for standard methods.
Get multiple chain accounts from Trust
Once you have
walletconnect client set up, you will be able to get user's accounts:1
const request = connector._formatRequest({
2
method: 'get_accounts',
3
});
4
5
connector
6
._sendCallRequest(request)
7
.then(result => {
8
// Returns the accounts
9
console.log(result);
10
})
11
.catch(error => {
12
// Error returned when rejected
13
console.error(error);
14
});
Copied!
The result is an array with following structure:
1
[
2
{
3
network: number,
4
address: string
5
}
6
]
Copied!
Sign multi chain transaction
Once you have the account list, you will be able to sign a transaction, please note that the json structure is based on WalletCore's proto messages, we suggest using
protobuf.js or @trustwallet/wallet-core to generate it properly.1
const network = 118; // Atom (SLIP-44)
2
const account = accounts.find((account) => account.network === network);
3
// Transaction structure based on Trust's protobuf messages.
4
const tx = {
5
accountNumber: "1035",
6
chainId: "cosmoshub-2",
7
fee: {
8
amounts: [
9
{
10
denom: "uatom",
11
amount: "5000"
12
}
13
],
14
gas: "200000"
15
},
16
sequence: "40",
17
sendCoinsMessage: {
18
fromAddress: account.address,
19
toAddress: "cosmos1zcax8gmr0ayhw2lvg6wadfytgdhen25wrxunxa",
20
amounts: [
21
{
22
denom: "uatom",
23
amount: "100000"
24
}
25
]
26
}
27
};
28
29
const request = connector._formatRequest({
30
method: 'trust_signTransaction',
31
params: [
32
{
33
network,
34
transaction: JSON.stringify(tx),
35
},
36
],
37
});
38
39
connector
40
._sendCallRequest(request)
41
.then(result => {
42
// Returns transaction signed in json or encoded format
43
console.log(result);
44
})
45
.catch(error => {
46
// Error returned when rejected
47
console.error(error);
48
});
Copied!
The result can be either a string JSON or an HEX encoded string. For Atom, the result is JSON:
1
{
2
"tx": {
3
"fee": {
4
"amount": [{
5
"amount": "5000",
6
"denom": "uatom"
7
}],
8
"gas": "200000"
9
},
10
"memo": "",
11
"msg": [{
12
"type": "cosmos-sdk/MsgSend",
13
"value": {
14
"amount": [{
15
"amount": "100000",
16
"denom": "uatom"
17
}],
18
"from_address": "cosmos135qla4294zxarqhhgxsx0sw56yssa3z0f78pm0",
19
"to_address": "cosmos1zcax8gmr0ayhw2lvg6wadfytgdhen25wrxunxa"
20
}
21
}],
22
"signatures": [{
23
"pub_key": {
24
"type": "tendermint/PubKeySecp256k1",
25
"value": "A+mYPFOMSp6IYyXsW5uKTGWbXrBgeOOFXHNhLGDsGFP7"
26
},
27
"signature": "m10iqKAHQ5Ku5f6NcZdP29fPOYRRR+p44FbGHqpIna45AvYWrJFbsM45xbD+0ueX+9U3KYxG/jSs2I8JO55U9A=="
28
}],
29
"type": "cosmos-sdk/MsgSend"
30
}
31
}
Copied!
Web3Modal
Web3Modal is an easy-to-use library to help developers add support for multiple providers (including WalletConnect) in their apps with a simple customizable configuration.
Installation
1
npm install --save web3modal web3 @walletconnect/web3-provider
Copied!
Customize chain id
Sample code for configuring WalletConnect with Binance Smart Chain
1
import Web3 from "web3";
2
import WalletConnectProvider from "@walletconnect/web3-provider";
3
import Web3Modal from "web3modal";
4
5
// set chain id and rpc mapping in provider options
6
const providerOptions = {
7
walletconnect: {
8
package: WalletConnectProvider,
9
options: {
10
rpc: {
11
56: 'https://bsc-dataseed1.binance.org'
12
},
13
chainId: 56
14
}
15
}
16
}
17
18
const web3Modal = new Web3Modal({
19
network: "mainnet", // optional
20
cacheProvider: true, // optional
21
providerOptions // required
22
});
23
24
const provider = await web3Modal.connect();
25
await web3Modal.toggleModal();
26
27
// regular web3 provider methods
28
const newWeb3 = new Web3(provider);
29
const accounts = await newWeb3.eth.getAccounts();
30
31
console.log(accounts);
Copied!
Last modified 8mo ago