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.
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
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
