✅
Demo to preview the settings
✅
Introduction
WalletConnect is an open protocol to communicate securely between Wallets and Dapps (Web3 Apps). The protocol establishes a remote connection between two apps and/or devices using a Bridge server to relay payloads. These payloads are symmetrically encrypted through a shared key between the two peers.
The connection is initiated by one peer displaying a QR Code or deep link with a standard WalletConnect URI and is established when the counter-party approves this connection request.
It also includes an optional Push server to allow Native applications to notify the user of incoming payloads for established connections.
The plugin helps you to connect your existing wallet to the Web3 Apps in order to send transactions in the currently opened sessions.
How to set up
To create your wallet connect project and connect it to plugin, you need to complete a simple registration at - https://cloud.walletconnect.com/sign-up.
Next, you need to create a project - https://cloud.walletconnect.com/app
To create a project you need to insert: Name, Type, URL
Next, we copy the Project id
Next, place the plugin element “Wallet Connect 2.0” or “Wallet Connect 4.0” on the page in order to use all possible actions and insert all the values.
All done, our element is set up!
Plugin Elements
Wallet Connect 2.0
This element works with version v2.
WalletConnect v2.0 is NOT backwards-compatible with v1.0. WalletConnect v1.0 and v2.0 offer essentially the same end-user experience, however they work very differently internally.
WalletConnect v1.0 has now been shut down.
Plugin Element Properties
Fields:
Name | Description | Type |
Project ID | Your Project ID gives you access to WalletConnect Cloud. | Text |
Name | The name of your project | Text |
Description | A short description explaining your dapp/wallet | Text |
URL | Metadata. A link to your application | Text |
Logo | Metadata. Image of your application | image |
themeMode | Modal theme. Can be light or dark | Dropdown |
enableExplorer | if false, the modal will be smaller | Yes/No |
Element Actions
Connect 2.0
Connecting Dapps to Wallets.
Сreate a request to connect to the wallet via modal or directly
Fields:
Title | Description | Type |
Show QR Modal | whether the qr code will be shown for scanning or will be prompted to connect to the default wallet immediately | Checkbox |
eth_sendTransaction
Creates new message call transaction or a contract creation, if the data field contains code.
Fields:
Title | Description | Type |
from | DATA, 20 Bytes - The address the transaction is send from. | Text |
to | DATA, 20 Bytes - (optional when creating new contract) The address the transaction is directed to. | Text |
Data | DATA - The compiled code of a contract OR the hash of the invoked method signature and encoded parameters. | Text |
Gas_price | QUANTITY - (optional, default: 90000) Integer of the gas provided for the transaction execution. It will return unused gas. | Text |
Gas | QUANTITY - (optional, default: To-Be-Determined) Integer of the gasPrice used for each paid gas | Text |
Value | QUANTITY - (optional) Integer of the value sent with this transaction | Text |
Nonce | (optional) Integer of a nonce. This allows to overwrite your own pending transactions that use the same nonce. | Text |
eth_signTransaction
Signs a transaction that can be submitted to the network at a later time using with eth_sendRawTransaction
(doesn't work with Metamask)
Fields:
Title | Description | Type |
from | DATA, 20 Bytes - The address the transaction is send from. | Text |
to | DATA, 20 Bytes - (optional when creating new contract) The address the transaction is directed to. | Text |
data | DATA - The compiled code of a contract OR the hash of the invoked method signature and encoded parameters. | Text |
gas price | QUANTITY - (optional, default: 90000) Integer of the gas provided for the transaction execution. It will return unused gas. | Text |
gas | QUANTITY - (optional, default: To-Be-Determined) Integer of the gasPrice used for each paid gas | Text |
value | QUANTITY - (optional) Integer of the value sent with this transaction | Text |
nonce | (optional) Integer of a nonce. This allows to overwrite your own pending transactions that use the same nonce. | Text |
eth_sendRawTransaction (doesn't work everywhere)
Creates new message call transaction or a contract creation for signed transactions.
Fields:
Title | Description | Type |
DATA | The signed transaction data | Text |
Disconnect
Disconnect the connected account from Dapps
personal_sign
The sign method calculates an Ethereum specific signature with:sign(keccak256("\x19Ethereum Signed Message:\n" + len(message) + message))).
Fields:
Title | Description | Type |
Message to sign | DATA, N Bytes - message to sign. | Text |
Address | DATA, 20 Bytes - address | Text |
eth_sign
The sign method calculates an Ethereum specific signature with: sign(keccak256("\x19Ethereum Signed Message:\n" + len(message) + message))).
Fields:
Title | Description | Type |
Address | DATA, 20 Bytes - address | Text |
Message to sign | DATA, N Bytes - message to sign. | Text |
eth_signTypedData
Calculates an Ethereum-specific signature in the form of keccak256("\x19Ethereum Signed Message:\n" + len(message) + message))
Fields:
Title | Description | Type |
Address | DATA, 20 Bytes - address. | Text |
Message to sign | DATA, N Bytes - message to sign containing type information, a domain separator, and data. | Text |
Clear all sessions
Remove all saved connection information from local storage
Exposed states
Name | Description | Type |
Sign Transaction Hash | Hash a signed transaction using the "eth_signTransaction" action | Text |
Send Transaction Hash | Hash a signed transaction using the "eth_sendTransaction" action | Text |
sendRawTransaction Hash | Hash a signed transaction using the "eth_sendRawTransaction" action | Text |
Connected To | Сonnected wallet name. Example: Metamask | Text |
Chain ID | Сonnected chain id. Example: eip155:1 | Text |
Address ID | Сonnected Adress ID. | Text |
Personal sign hash | Signature hash, action result: personal_sign Example: 0x2d6d5dcd……. | Text |
Eth sign hash | Signature hash, action result: eth_sign Example: 0x2d6d5dcd……. | Text |
Eth signTypedData hash | Signature hash, action result: eth_signTypedData Example: 0x2d6d5dcd……. | Text |
Error | Error occurring in any action | Text |
Element Events
Title | Description |
Disconnected | Triggered when the user is disconnected. |
Connected | Triggered when the user is connected. |
Updated | Triggered when the session update |
Modal closed | Triggered when the modal was closed |
Sign transaction success | Triggered when signing a transaction has been committed. |
Sign transaction error | Triggered when signing a transaction has been rejected. |
Send transaction success | Triggered when a transaction has been committed. |
Send transaction error | Triggered when a transaction has been rejected. |
sendRawTransaction success | Triggered when a Raw Transaction has been committed. |
sendRawtransaction error | Triggered when a Raw Transaction has been rejected. |
Init | Triggered when the wallet connect was loaded |
Personal sign success | Triggered when signing personal message has been committed. |
Personal sign error | Triggered when signing personal message has rejected. |
eth sign success | Triggered when signing message has been committed. |
eth sign error | Triggered when signing message has rejected. |
eth_signTypedData success | Triggered when eth_signTypedData has been committed. |
eth_signTypedData error | Triggered when eth_signTypedData has rejected. |
Wallet Connect 4.0
This element works with version v4. (web3modal)
Fields:
Title | Description | Type |
Project ID | Your Project ID gives you access to WalletConnect Cloud. | Text |
Name | The name of your project | Text |
Description | A short description explaining your dapp/wallet | Text |
URL | Your wallet’s URL | Text |
Logo | URL to wallet’s logo/icon | Image |
ThemeMode | Available options: light, dark | Text |
EnableAnalytics | Enable analytics to get more insights on your users activity within your WalletConnect Cloud’s dashboard | Checkbox (yes/no) |
EnableOnramp | Optional - false as default. The Web3Modal SDK seamlessly incorporates Coinbase Pay, enabling users to sign in to their Coinbase accounts and utilize fiat payment methods for purchasing cryptocurrencies. | Checkbox (yes/no) |
𝐃𝐞𝐟𝐚𝐮𝐥𝐭 𝐂𝐡𝐚𝐢𝐧 | ||
ChainId | A unique numeric identifier for the blockchain network, used to ensure transactions are signed and broadcast to the correct network. For example, Ethereum's mainnet has a chainId of 1. | Number |
Name | The common name of the blockchain network, used primarily for user interface purposes to provide a clear, recognizable name for users. Example: 'Ethereum'. | Text |
Currency | The native currency of the blockchain network, used in transactions and for displaying balances. For Ethereum, the currency is 'ETH'. | Text |
ExplorerUrl | A URL to a web application that provides detailed information about transactions and blocks on the blockchain, allowing users to verify transactions and explore network activity. Example: 'https://etherscan.io' for Ethereum. | Text |
RpcUrl | The URL of an RPC endpoint that allows external applications to interact with the blockchain, facilitating queries and transactions. Example: 'https://cloudflare-eth.com' provides a Cloudflare-hosted Ethereum JSON RPC API. | Text |
𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐝 𝐖𝐚𝐥𝐥𝐞𝐭 𝐈𝐝𝐬 | ||
Select wallets that are going to be shown on the modal’s main view. Default wallets are MetaMask and Trust Wallet. Array of wallet ids defined will be prioritized (order is respected). | ||
Wallet IDs | Select wallets that are going to be shown on the modal's main view. Default wallets are MetaMask and Trust Wallet. Array of wallet ids defined will be prioritized (order is respected). | Text |
Terms Conditions Url | You can add an url for the terms and conditions link. | Text (optional) |
Privacy Policy Url | You can add an url for the privacy policy link. | Text (optional) |
Chains | App Type representing the database thing (Chains). | App Type (optional) |
Chains Source | The list of Chains
Type of items equals to field “Chains (App type)” | Item representing Chains(list) (optional) |
ChainId | A unique numeric identifier for the blockchain network, used to ensure transactions are signed and broadcast to the correct network. For example, Ethereum's mainnet has a chainId of 1. | Filed of Chains, represent Number |
Name | The common name of the blockchain network, used primarily for user interface purposes to provide a clear, recognizable name for users. Example: 'Ethereum'. | Filed of Chains, represent Text |
Currency | The native currency of the blockchain network, used in transactions and for displaying balances. For Ethereum, the currency is 'ETH'. | Filed of Chains, represent Text |
ExplorerUrl | A URL to a web application that provides detailed information about transactions and blocks on the blockchain, allowing users to verify transactions and explore network activity. Example: 'https://etherscan.io' for Ethereum. | Filed of Chains, represent Text |
RpcUrl | The URL of an RPC endpoint that allows external applications to interact with the blockchain, facilitating queries and transactions. Example: 'https://cloudflare-eth.com' provides a Cloudflare-hosted Ethereum JSON RPC API. | Filed of Chains, represent Text |
Element Actions
Modal Connect
Сreate a request to connect to the wallet via modal
eth_sendTransaction
Creates new message call transaction or a contract creation, if the data field contains code.
Title | Description | Type |
From | DATA, 20 Bytes - The address the transaction is send from. | Text |
To | DATA, 20 Bytes - (optional when creating new contract) The address the transaction is directed to. | Text (optional) |
Data | DATA - The compiled code of a contract OR the hash of the invoked method signature and encoded parameters. | Text (optional) |
Gas_price | QUANTITY - (optional, default: 90000) Integer of the gas provided for the transaction execution. It will return unused gas. | Text (optional) |
Gas | QUANTITY - (optional, default: To-Be-Determined) Integer of the gasPrice used for each paid gas | Text (optional) |
Value | QUANTITY - (optional) Integer of the value sent with this transaction | Text (optional) |
Nonce | (optional) Integer of a nonce. This allows to overwrite your own pending transactions that use the same nonce. | Text (optional) |
eth_signTransaction
Signs a transaction that can be submitted to the network at a later time using with eth_sendRawTransaction
Title | Description | Type |
From | DATA, 20 Bytes - The address the transaction is send from. | Text |
To | DATA, 20 Bytes - (optional when creating new contract) The address the transaction is directed to. | Text (optional) |
Data | DATA - The compiled code of a contract OR the hash of the invoked method signature and encoded parameters. | Text (optional) |
Gas price | QUANTITY - (optional, default: 90000) Integer of the gas provided for the transaction execution. It will return unused gas. | Text (optional) |
Gas | QUANTITY - (optional, default: To-Be-Determined) Integer of the gasPrice used for each paid gas | Text (optional) |
Value | QUANTITY - (optional) Integer of the value sent with this transaction | Text (optional) |
Nonce | (optional) Integer of a nonce. This allows to overwrite your own pending transactions that use the same nonce. | Text (optional) |
eth_sendRawTransaction (doesn’t work everywhere)
Creates new message call transaction or a contract creation for signed transactions.
Title | Description | Type |
DATA | The signed transaction data | Text |
Disconnect
Disconnect the connected account from Dapps
personal_sign
The sign method calculates an Ethereum specific signature with:sign(keccak256(“19Ethereum Signed Message:” + len(message) + message))).
Title | Description | Type |
Message to sign | DATA, N Bytes - message to sign. | Text |
Address | DATA, 20 Bytes - address | Text |
eth_sign
The sign method calculates an Ethereum specific signature with: sign(keccak256(“19Ethereum Signed Message:” + len(message) + message))).
Title | Description | Type |
Address | DATA, 20 Bytes - address | Text |
Message to sign | DATA, N Bytes - message to sign. | Text |
eth_signTypedData
Calculates an Ethereum-specific signature in the form of keccak256(“19Ethereum Signed Message:” + len(message) + message))
Title | Description | Type |
Address | DATA, 20 Bytes - address. | Text |
Message to sign | DATA, N Bytes - message to sign containing type information, a domain separator, and data | Text |
Modal Account
Open modal with the data of the connected user.
Modal AllWallets
Shows the list of all available wallets
Modal Networks
List of available networks - you can select and target a specific network before connecting
💡
We can switch between the configured networks in the element field "Chains"
Modal WhatIsANetwork
“What is a network” onboarding view
eth_Approve
Token approval is used to give the smart contract permission to use your tokens on your behalf.
Title | Description | Type |
Token address | The token contract address is a distinct Ethereum address linked to a smart contract that defines the behavior of a token, like an ERC-20 token. | Text |
Spender | The address of someone who can transfer tokens on behalf of someone, only if it is approved by the token owner | Text |
Amount | Hex-encoded value of the network’s native currency to send | Text |
From address | Indicates the address from whom the tokens are approved | Text |
Gas | QUANTITY - (optional, default: To-Be-Determined) Integer of the gasPrice used for each paid gas | Text (optional) |
GasPrice | QUANTITY - (optional, default: 90000) Integer of the gas provided for the transaction execution. It will return unused gas. | Text (optional) |
Modal WhatIsAWallet
“What is a wallet” onboarding view
Send Transaction with Contract Address
Sending a transaction using a smart contract. For example, sending a USDT token from the Polygon network. The differs from a regular transaction only that there is need to indicate which token we want to send
Title | Description | Type |
From | A hex-encoded Ethereum address. Must match user’s active address. | Text |
To | A hex-encoded Ethereum address. Required for transactions with a recipient (all transactions except for contract creation). | Text |
Gas | The gas limit provided by the sender in Wei | Text (optional) |
Amount | Hex-encoded value of the network’s native currency to send | Text (optional) |
Token Address | The token contract address is a distinct Ethereum address linked to a smart contract that defines the behavior of a token, like an ERC-20 token. | Text |
Gas Price | QUANTITY - (optional, default: 90000) Integer of the gas provided for the transaction execution. It will return unused gas. | Text |
Nonce (Optional) | (optional) Integer of a nonce. This allows to overwrite your own pending transactions that use the same nonce. | Text (optional) |
Close Modal
Close any open modal
Estimate Gas and getGasPrice
Estimates the required gas for the transaction and obtains the current gas price.
Title | Description | Type |
From | A hex-encoded Ethereum address. Must match user’s active address. | Text |
To | A hex-encoded Ethereum address. Required for transactions with a recipient (all transactions except for contract creation). | Text |
Amount | Hex-encoded value of the network’s native currency to send | Text |
Token address (Optional) | The token contract address is a distinct Ethereum address linked to a smart contract that defines the behavior of a token, like an ERC-20 token. | Text (optional) |
Switch chain
Requests that the wallet switch the necessary chain
Title | Description | Type |
Chain ID | MUST specify the integer ID of the chain as a hexadecimal string or decimal number, per the eth_chainId Ethereum RPC method | Text |
Check Allowance
Action checks the number of the specified token approved for use.
For example: user give the site the right to use 2 usdt. This action is needed to get the amount of usdt, in this case 2
Title | Description | Type |
Token address | The token contract address is a distinct Ethereum address linked to a smart contract that defines the behavior of a token, like an ERC-20 token. | Text |
Owner Address | A unique Ethereum network identifier for individuals or contracts, used for sending and receiving ETH and tokens. | Text |
Spender Address | An Ethereum address authorized to spend a user’s tokens, often granted through the ERC-20 allowance function. | Text |
Exposed states
Title | Description | Type |
Sign Transaction Hash | Hash a signed transaction using the "eth_signTransaction" action | Text |
Send Transaction Hash | Hash a signed transaction using the "eth_sendTransaction" action | Text |
SendRawTransaction Hash | Hash a signed transaction using the "eth_sendRawTransaction" action | Text |
Connected To | Сonnected wallet name. Example: Metamask | Text |
Chain ID | Сonnected chain id. Example: eip155:1 | Number |
Address ID | Сonnected Adress ID. | Text |
Personal sign hash | Signature hash, action result: personal_sign Example: 0x2d6d5dcd……. | Text |
Eth sign hash | Signature hash, action result: eth_sign Example: 0x2d6d5dcd……. | Text |
Eth signTypedData hash | Signature hash, action result: eth_signTypedData Example: 0x2d6d5dcd……. | Text |
Error | Error occurring in any action | Text |
IsConnected | Yes when wallet is connected | Checkbox (yes/no) |
Modal Is Open? | Open state will be true when the modal is open and false when closed. | Checkbox (yes/no) |
Status | Transaction status.
Example: Done, Pending, Error, Rejected, Awaiting confirmation from user | Text |
Gas Price (Gwei) | Return gas price. Use action Estimate Gas and getGasPrice | Number |
Estimate Gas | Return gas price. Use action Estimate Gas and getGasPrice | Number |
Approve Transaction Hash | Return Transaction Hash. Use action
eth_Approve | Text |
Allowance | Return Allowance. Use action
Check Allowance | Number |
Event Name | Filled in when event “New Event” triggered.
Example: connect_success, modal_open, modal_close | Text |
Element Events
Title | Description |
Disconnected | Triggered when the user is disconnected. |
Connected | Triggered when the user is connected. |
Updated | Triggered when the session update |
Modal closed | Triggered when the modal was closed |
Sign transaction success | Triggered when signing a transaction has been committed. |
Sign transaction error | Triggered when signing a transaction has been rejected. |
Send transaction success | Triggered when a transaction has been committed. |
Send transaction error | Triggered when a transaction has been rejected. |
sendRawTransaction success | |
sendRawtransaction error | |
Init | Triggered when the wallet connect was loaded |
personal sign success | Triggered when signing personal message has been committed. |
personal sign error | Triggered when signing personal message has rejected. |
eth sign success | Triggered when signing message has been committed. |
eth sign error | Triggered when signing message has rejected. |
eth_signTypedData success | |
eth_signTypedData error | |
Modal open | Triggered when Modal was opened |
Approved Success | Triggered when transaction status success. Run action eth_Approve to get status |
Estimate Gas Success | Triggered when action Estimate Gas and getGasPrice finished successful. |
Switch chain Success | Triggered after successful completion of the Switch chain action |
Switch chain Rejected | Triggered after rejected completion of the Switch chain action |
Allowance Checked | Triggered after successful completion of the Check Allowance action |
Allowance Checked Error | Triggered after rejected completion of the Check Allowance action |
New Event | Triggered when something happens to wallet connect, the result saved to state Event Name.
Example: connect_success, modal_open, modal_close |
Changelogs
Update 24.10.24 - Version 1.41.0
- Fixed library import.
Update 23.09.24 - Version 1.40.0
- Fixed empty 'Socials' field.
Update 13.08.24 - Version 1.39.0
- Changes to plugin terms and conditions.
Update 12.08.24 - Version 1.38.0
- Minor fixed (added dynamic uploading script).
Update 31.07.24 - Version 1.37.0
- Minor update (Marketing update).
Update 29.07.24 - Version 1.36.0
- Minor update.
Update 23.07.24 - Version 1.35.0
- Minor improvements.
Update 24.06.24 - Version 1.34.0
- Updated demo/service links.
Update 06.06.24 - Version 1.33.0
- Minor update.
Update 24.05.24 - Version 1.32.0
- Updated library.
Update 23.05.24 - Version 1.31.0
- Minor fixes.
Update 20.05.24 - Version 1.30.0
- Minor fixes.
Update 16.05.24 - Version 1.29.0
- Minor fixes.
Update 14.05.24 - Version 1.28.0
- Minor fixes.
Update 06.05.24 - Version 1.27.0
- Minor fixes.
Update 01.05.24 - Version 1.26.0
- Minor fixes.
Update 25.04.24 - Version 1.25.0
- Minor improvements.
Update 16.04.24 - Version 1.24.0
- Minor improvements.
Update 04.04.24 - Version 1.23.0
- Added "Wallet Connect 4.0" element.
Update 03.04.24 - Version 1.22.0
- updated description.
Update 04.03.24 - Version 1.21.0
- Removed "wallet connect" element.
Update 30.01.24 - Version 1.20.0
- Added "Show QR Modal" checkbox in "Connect 2.0" action.
Update 15.11.23 - Version 1.19.0
- Updated the element “Wallet Connect 2.0".
Update 18.10.23 - Version 1.18.0
- Updated description.
Update 16.10.23 - Version 1.17.0
- Migrated the Plugin Editor to Version 4.
Update 15.09.23 - Version 1.16.0
- updated description.
Update 12.09.23 - Version 1.15.0
- minor updates.
Update 06.09.23 - Version 1.14.0
- Obfuscation.
Update 12.07.23 - Version 1.13.0
- updated description.
Update 28.06.23 - Version 1.12.0
- fixed "eth_signTypedData" and "eth_signTransaction" actions in the "Wallet Connect 2.0" element.
Update 23.06.23 - Version 1.11.0
- updated description.
Update 23.06.23 - Version 1.10.0
- updated the description.
Update 19.06.23 - Version 1.9.0
- Updated the description .
Update 03.04.23 - Version 1.8.0
- updated the description.
Update 23.02.23 - Version 1.7.0
- deleted the icons.
Update 22.02.23 - Version 1.6.0
- updated the description.
Update 31.01.23 - Version 1.5.0
- Updated service link.
Update 16.11.22 - Version 1.4.0
- Added disconnect action.
Update 26.09.22 - Version 1.3.0
- Changed doc link.
Update 29.04.22 - Version 1.2.0
- Updated icon and added common part.
Update 28.04.22 - Version 1.1.0
- Updated plugin name.
Update 27.04.22 - Version 1.0.0
- Initial Release.