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
StarTower 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.
Before you can sign transactions, you have to initiate a connection to a WalletConnect bridge server, and handle all possible states:
import WalletConnect from "@walletconnect/client";import QRCodeModal from "@walletconnect/qrcode-modal";// Create a connectorconst connector = new WalletConnect({ bridge: "https://bridge.walletconnect.org", // Required qrcodeModal: QRCodeModal,});// Check if connection is already establishedif (!connector.connected) {// create new session connector.createSession();}// Subscribe to connection eventsconnector.on("connect", (error, payload) => {if (error) { throw error; }// Get provided accounts and chainIdconst { accounts, chainId } = payload.params[0];});connector.on("session_update", (error, payload) => {if (error) { throw error; }// Get updated accounts and chainIdconst { accounts, chainId } = payload.params[0];});connector.on("disconnect", (error, payload) => {if (error) { throw error; }// Delete connector});
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 Star Tower
Once you have walletconnect client set up, you will be able to get user's accounts:
const request =connector._formatRequest({ method:"get_accounts",});connector._sendCallRequest(request).then((result) => {// Returns the accountsconsole.log(result); }).catch((error) => {// Error returned when rejectedconsole.error(error); });
The result is an array with following structure:
[ { network: number, address: string, },];
Once you have the account list, you will be able to sign a transaction, please note that the json structure is based on , we suggest using protobuf.js
const network = 118; // Atom (SLIP-44)const account = accounts.find((account) => account.network === network);// Transaction structure based on StarTower's protobuf messages.const tx = { accountNumber:"1035", chainId:"cosmoshub-2", fee: { amounts: [ { denom:"uatom", amount:"5000", }, ], gas:"200000", }, sequence:"40", sendCoinsMessage: { fromAddress: account.address, toAddress:"cosmos1zcax8gmr0ayhw2lvg6wadfytgdhen25wrxunxa", amounts: [ { denom:"uatom", amount:"100000", }, ], },};const request = connector._formatRequest({ method:"StarTower_signTransaction", params: [ { network, transaction: JSON.stringify(tx), }, ],});connector ._sendCallRequest(request) .then((result) => {// Returns transaction signed in json or encoded format console.log(result); }) .catch((error) => {// Error returned when rejected console.error(error); });
The result can be either a string JSON or an HEX encoded string. For Atom, the result is JSON:
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.