You can use the Test Wallet to test your integration at test.walletconnect.org (Source code). Keep in mind that this is not a secure wallet - Do not store funds.
yarn add @walletconnect/browser @walletconnect/qrcode-modal
npm install --save @walletconnect/browser @walletconnect/qrcode-modal
Syntax shown below is Javascript ES6 which requires bundling and transpiling to run in web browsers. If unfamiliar we recommend setting up an environment using Webpack Starter or Create React App​
import WalletConnect from "@walletconnect/browser";import WalletConnectQRCodeModal from "@walletconnect/qrcode-modal";​// Create a walletConnectorconst walletConnector = new WalletConnect({bridge: "https://bridge.walletconnect.org" // Required});​// Check if connection is already establishedif (!walletConnector.connected) {// create new sessionwalletConnector.createSession().then(() => {// get uri for QR Code modalconst uri = walletConnector.uri;// display QR Code modalWalletConnectQRCodeModal.open(uri, () => {console.log("QR Code Modal closed");});});}​// Subscribe to connection eventswalletConnector.on("connect", (error, payload) => {if (error) {throw error;}​// Close QR Code ModalWalletConnectQRCodeModal.close();​// Get provided accounts and chainIdconst { accounts, chainId } = payload.params[0];});​walletConnector.on("session_update", (error, payload) => {if (error) {throw error;}​// Get updated accounts and chainIdconst { accounts, chainId } = payload.params[0];});​walletConnector.on("disconnect", (error, payload) => {if (error) {throw error;}​// Delete walletConnector});
// Draft transactionconst tx = {from: "0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3", // Requiredto: "0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359", // Required (for non contract deployments)data: "0x", // RequiredgasPrice: "0x02540be400", // OptionalgasLimit: "0x9c40", // Optionalvalue: "0x00", // Optionalnonce: "0x0114" // Optional};​// Send transactionwalletConnector.sendTransaction(tx).then(result => {// Returns transaction id (hash)console.log(result);}).catch(error => {// Error returned when rejectedconsole.error(error);});
// Draft transactionconst tx = {from: "0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3", // Requiredto: "0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359", // Required (for non contract deployments)data: "0x", // RequiredgasPrice: "0x02540be400", // OptionalgasLimit: "0x9c40", // Optionalvalue: "0x00", // Optionalnonce: "0x0114" // Optional};​// Sign transactionwalletConnector.signTransaction(tx).then(result => {// Returns signed transactionconsole.log(result);}).catch(error => {// Error returned when rejectedconsole.error(error);});
// Draft Message Parametersconst message = "My email is john@doe.com - 1537836206101"​const msgParams = [convertUtf8ToHex(message) // Required"0xbc28ea04101f03ea7a94c1379bc3ab32e65e62d3", // Required];​​// Sign personal messagewalletConnector.signPersonalMessage(msgParams).then((result) => {// Returns signature.console.log(result)}).catch(error => {// Error returned when rejectedconsole.error(error);})
// Draft Message Parametersconst message = "My email is john@doe.com - 1537836206101";​const msgParams = ["0xbc28ea04101f03ea7a94c1379bc3ab32e65e62d3", // Requiredkeccak256("\x19Ethereum Signed Message:\n" + len(message) + message)) // Required];​​// Sign messagewalletConnector.signMessage(msgParams).then((result) => {// Returns signature.console.log(result)}).catch(error => {// Error returned when rejectedconsole.error(error);})
// Draft Message Parametersconst typedData = {types: {EIP712Domain: [{ name: "name", type: "string" },{ name: "version", type: "string" },{ name: "chainId", type: "uint256" },{ name: "verifyingContract", type: "address" }],Person: [{ name: "name", type: "string" },{ name: "account", type: "address" }],Mail: [{ name: "from", type: "Person" },{ name: "to", type: "Person" },{ name: "contents", type: "string" }]},primaryType: "Mail",domain: {name: "Example Dapp",version: "1.0.0-beta",chainId: 1,verifyingContract: "0x0000000000000000000000000000000000000000"},message: {from: {name: "Alice",account: "0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"},to: {name: "Bob",account: "0xbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"},contents: "Hey, Bob!"}};​const msgParams = ["0xbc28ea04101f03ea7a94c1379bc3ab32e65e62d3", // RequiredtypedData // Required];​// Sign Typed DatawalletConnector.signTypedData(msgParams).then(result => {// Returns signature.console.log(result);}).catch(error => {// Error returned when rejectedconsole.error(error);});
// Draft Custom Requestconst customRequest = {id: 1337,jsonrpc: "2.0",method: "eth_signTransaction",params: [{from: "0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3",to: "0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359",data: "0x",gasPrice: "0x02540be400",gasLimit: "0x9c40",value: "0x00",nonce: "0x0114"}]};​// Send Custom RequestwalletConnector.sendCustomRequest(customRequest).then(result => {// Returns request resultconsole.log(result);}).catch(error => {// Error returned when rejectedconsole.error(error);});