A dApp web application for demonstrating the connectivity(based on EIP-6963) to the Zond Web3 Wallet web extension.
The application renders the following sections:
- Wallets Detected: Displays all the wallets(supporting EIP-6963) installed in the browser in an expandable form. The wallet's icon and name is displayed. To connect to a wallet, click on the connect button of the desired wallet. On connecting to a wallet, all the restricted methods(which requires user's approval to execute) and unrestricted methods(which doesn't require user's approval) will be listed on the screen.
- Selected Wallet: This section will be visible only when the wallet is connected. On successfully connecting to a wallet, the wallet name, connected account address, uuid and rdns are displayed in this section.
- Wallet Response: This section will be visible only when the wallet is connected. On successfully completing a request, the response is displayed here.
- Wallet Error: This section will be visible only when the wallet is connected. For a failed or unsuccessful request, the error is displayed here.
- Run
git clone https://github.com/theQRL/zond-web3-wallet-dapp-example.gitfor cloning this repo to your machine. - Run
npm installfor installing all dependencies of this project. - Run
npm run devto run the application locally. By default, the application will be running athttp://localhost:5173/.
Communication between a dApp and Zond Web3 Wallet happens via JSON-RPC API requests.
The methods when called, asks for user approval before executing. A request screen will be presented with an option to either approve or reject the request.
A method that presents a plain text signature challenge to the user and returns the signed response and the public key for verification. The parameters are hex-encoded UTF-8 challenge string and the address of the requesting account.
const signedData = await provider.request({ method: "personal_sign", params: [ "0x506c65617365207369676e2074686973206d65737361676520746f20636f6e6669726d20796f7572206964656e746974792e", "Z208318ecd68f26726CE7C54b29CaBA94584969B6", ], });
{ "signature": "0x0087c28d899155115254bbd....", "publicKey": "0x04bfcabf8c1b1a5a7e25f9b...." }
A method that opens a confirmation asking the user to add the blockchain to the zond web3 wallet. The caller must specify the blockchain data.
const response = await provider.request({ method: "wallet_addZondChain", params: [ { chainId: "0x44", chainName: "Test chain name", rpcUrls: ["https://testDefaultRpcUrl1", "https://testDefaultRpcUrl2"], blockExplorerUrls: ["https://testDefaultExplorerUrl1"], iconUrls: [ "https://testDefaultIconUrl1", "https://testDefaultIconUrl2", "icons/qrl/default.png", "https://testDefaultIconUrl3", ], nativeCurrency: { name: "Test native currency", symbol: "TSTSMB", decimals: 18, }, }, ], });
null
A method for getting the capabilities of the wallet.
await provider.request({ method: "wallet_getCapabilities", params: ["Z208318ecd68f26726CE7C54b29CaBA94584969B6", ["0x7e7e"]], });
{ "0x7e7e": { "atomic": { "status": "ready" } } }
A method for requesting additional permissions from the user.
await provider.request({ method: "wallet_requestPermissions", params: [ { zond_accounts: {}, }, ], });
[ { "parentCapability": "zond_accounts", "invoker": "https://local-dapp-example.io", "caveats": [ { "type": "restrictReturnedAccounts", "value": ["Z20E7Bde67f00EA38ABb2aC57e1B0DD93f518446c"] } ] } ]
A method for sending a batch of calls to the blockchain. A batch ID will be returned as the response.
await provider.request({ method: "wallet_sendCalls", params: [ { version: "2.0.0", from: "Z208318ecd68f26726CE7C54b29CaBA94584969B6", chainId: "0x1", atomicRequired: true, calls: [ { to: "Z20D20b8026B8F02540246f58120ddAAf35AECD9B", value: "0xde0b6b3a7640000", }, { to: "Z20E7Bde67f00EA38ABb2aC57e1B0DD93f518446c", value: "0x8ac7230489e80000", }, ], }, ], });
{ "id": "0xe670ec64341771606e55d6b4ca35a1a6b75ee3d5145a99d05921026d1527331" }
A method for switching the blockchain to the requested chain ID.
await provider.request({ method: "wallet_switchZondChain", params: [ { chainId: "0x7e7e", }, ], });
null
A method that prompts the user to add an ZRC20 token to the wallet.
const accounts = await provider.request({ method: "wallet_watchAsset", params: [ { type: "ZRC20", options: { address: "Zdf3636e4493d317514de576afbc2bfb6d91d065f", symbol: "FOO", decimals: 18, image: "icons/qrl/default.png", }, }, ], });
true
A method that prompts the user to connect their Zond account(s) with the dApp.
const accounts = await provider.request({ method: "zond_requestAccounts", params: [], });
[ "Z208318ecd68f26726CE7C54b29CaBA94584969B6", "Z20E7Bde67f00EA38ABb2aC57e1B0DD93f518446c" ]
A method that prompts the user to make a transaction like ZND transfer, contract deployment and contract interaction.
const txHash = await provider.request({ method: "zond_sendTransaction", params: [ { to: "Z20E7Bde67f00EA38ABb2aC57e1B0DD93f518446c", from: "Z208318ecd68f26726CE7C54b29CaBA94584969B6", gas: "0x51bc", value: "0x33", data: "0x", gasPrice: "0x777", }, ], });
"0x3e306b5a5a37532e1734503f7d2427a86f2c992fbe471f5be403b9f734e661c5"
A method that presents a data message for the user to sign in a structured and readable format and returns the signature and the public key.
const signedData = await provider.request({ method: "zond_signTypedData_v4", params: [ "Z208318ecd68f26726CE7C54b29CaBA94584969B6" { types: { EIP712Domain: [....], Person: [....], Mail: [....], }, primaryType: "Mail", domain: { name: "Ether Mail", version: "1", chainId: 1, verifyingContract: "ZDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF", }, message: { from: { name: "Last", wallet: "ZCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826", }, to: { name: "Genesis", wallet: "ZbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB", }, contents: "Hello, Genesis!", }, }, ], });
{ "signature": "0x0087c28d899155115254bbd....", "publicKey": "0x04bfcabf8c1b1a5a7e25f9b...." }
The methods when called, silently gives back response without needing any interaction from the user.
A method for checking the status of the batch ID generated using wallet_sendCalls.
await provider.request({ method: "wallet_getCallsStatus", params: [ "0xe670ec64341771606e55d6b4ca35a1a6b75ee3d5145a99d05921026d1527123", ], });
{ "version": "2.0.0", "chainId": "0x1", "id": "0xe670ec64341771606e55d6b4ca35a1a6b75ee3d5145a99d05921026d1527123", "status": 200, "atomic": true, "receipts": [ { "logs": [ { "address": "Z208318ecd68f26726CE7C54b29CaBA94584969B6", "topics": [ "0x5a2a90727cc9d000dd060b1132a5c977c9702bb3a52afe360c9c22f0e9451a68" ], "data": "0xabcd" } ], "status": "0x1", "blockHash": "0xf19bbafd9fd0124ec110b848e8de4ab4f62bf60c189524e54213285e7f540d4a", "blockNumber": "0xabcd", "gasUsed": "0xdef", "transactionHash": "0x9b7bb827c2e5e3c1a0a44dc53e573aa0b3af3bd1f9f5ed03071b100bb039eaff" } ] }
A method for requesting additional permissions from the user.
await provider.request({ method: "wallet_getPermissions", params: [ { zond_accounts: {}, }, ], });
[ { "parentCapability": "zond_accounts", "invoker": "https://local-dapp-example.io", "caveats": [ { "type": "restrictReturnedAccounts", "value": ["Z20E7Bde67f00EA38ABb2aC57e1B0DD93f518446c"] } ] } ]
A method for revoking the previously approved permissions for the dApp.
await provider.request({ method: "wallet_revokePermissions", params: [ { zond_accounts: {}, }, ], });
null
A method for returning the current Zond client version.
const currentVersion = await provider.request({ method: "web3_clientVersion", params: [], });
"Gzond/v0.2.1-stable-c50ef86d/linux-amd64/go1.22.12"
A method that returns the list of accounts that the user has approved to connect.
const accounts = await provider.request({ method: "zond_accounts", params: [], });
["Z20B714091cF2a62DADda2847803e3f1B9D2D3779"]
A method that returns the number of most recent block.
const blockNumber = await provider.request({ method: "zond_blockNumber", params: [], });
"0x3345"
A method for creating a new message call immediately.
const result = await provider.request({ method: "zond_call", params: [ { to: "Z20E7Bde67f00EA38ABb2aC57e1B0DD93f518446c", value: "0x7", }, "latest", ], });
"0x"
A method for returning the chain ID of the current network.
const chainId = await provider.request({ method: "zond_chainId", params: [], });
"0x7e7e"
A method for calculating the estimate of how much gas is necessary for the transaction.
const gas = await provider.request({ method: "zond_estimateGas", params: [ { from: "Z208318ecd68f26726CE7C54b29CaBA94584969B6", to: "Z20B714091cF2a62DADda2847803e3f1B9D2D3779", value: "0x7", }, ], });
"0x5208"
A method that returns the transaction base fee per gas and effective priority fee per gas for a given block range.
const feeHistory = await provider.request({ method: "zond_feeHistory", params: ["0x3", "latest", [10, 50]], });
{ "oldestBlock": "0x17185", "reward": [ ["0x0", "0x0"], ["0x0", "0x0"], ["0x0", "0x0"] ], "baseFeePerGas": ["0x7", "0x7", "0x7", "0x7"], "gasUsedRatio": [0, 0, 0] }
A method for returning the current price per gas.
const gas = await provider.request({ method: "zond_gasPrice", params: [], });
"0x3b9aca07"
A method for returning the balance of the given account.
const balance = await provider.request({ method: "zond_getBalance", params: ["Z208318ecd68f26726CE7C54b29CaBA94584969B6", "latest"], });
"0x6cfe56f3795885980005"
A method for returning information about a block by hash.
const blockInformation = await provider.request({ method: "zond_getBlockByHash", params: [ "0x7daca88be141b9c778aa2d55ae81eab7766e97a9b2549e975680a6f20dd46fde", false, ], });
{ "baseFeePerGas":"0x7", "extraData":"0xd882020085677a6f6e6488676f312e32322e30856c696e7578", "gasLimit":"0x1312d00", "gasUsed":"0x0", "hash":"0x7daca88be141b9c778aa2d55ae81eab7766e97a9b2549e975680a6f20dd46fde", .... }
A method that returns the block information by number.
const block = await provider.request({ method: "zond_getBlockByNumber", params: ["0x324c", false], });
{ "number": "0x68b3", "hash": "0xd5f1812548be429cbdc6376b29611fc49e06f1359758c4ceaaa3b393e2239f9c", "mixHash": "0x24900fb3da77674a861c428429dce0762707ecb6052325bbd9b3c64e74b5af9d", "parentHash": "0x1f68ac259155e2f38211ddad0f0a15394d55417b185a93923e2abe71bb7a4d6d", "nonce": "0x378da40ff335...." .... }
A method for returning the number of transactions in a block from a block matching the given block hash.
const transactionCount = await provider.request({ method: "zond_getBlockTransactionCountByHash", params: [ "0x762881f501a0dd33e1ca3a3a3db42671292c9b33ddaa2108b8958bab6414f4dd", ], });
"0x8"
A method for returning the number of transactions in a block matching the given block number.
const transactionCount = await provider.request({ method: "zond_getBlockTransactionCountByNumber", params: ["0x17187"], });
"0x8"
A method for returning the code at a given address.
const code = await provider.request({ method: "zond_getCode", params: ["Z208318ecd68f26726CE7C54b29CaBA94584969B6", "latest"], });
"0x60806040526004361060485763ffffffff7c01000000000000000000000000000000000000000000000000000000006000350416633fa4f2458114604d57806355241077146071575b600080fd5b348015605857600080fd5b50605f6088565b60408051918252519081900360200190f35b348015607c57600080fd5b506086600435608e565b005b60005481565b60008190556040805182815290517f199cd93e851e4c78c437891155e2112093f8f15394aa89dab09e38d6ca0727879181900360200190a1505600a165627a7a723058209d8929142720a69bde2ab3bfa2da6217674b984899b62753979743c0470a2ea70029"
A method for polling the filter with the given ID (created using zond_newFilter). It returns an array of logs which occurred since last poll.
const logObjects = await provider.request({ method: "zond_getFilterChanges", params: ["0x5d71077f43bcd46f25b74f2409d2f164"], });
[ { "logIndex": "0x0", "removed": false, "blockNumber": "0x233", "blockHash": "0xfc139f5e2edee9e9c888d8df9a2d2226133a9bd87c88ccbd9c930d3d4c9f9ef5", "topics": [ "0x04474795f5b996ff80cb47c148d4c5ccdbe09ef27551820caa9c2f8ed149cce3" ], .... }, { "logIndex": "0x0", "removed": false, "blockNumber": "0x238", "blockHash": "0x98b0ec0f9fea0018a644959accbe69cd046a8582e89402e1ab0ada91cad644ed", "topics": [ "0x04474795f5b996ff80cb47c148d4c5ccdbe09ef27551820caa9c2f8ed149cce3" ], .... } ]
A method for returning an array of all logs matching the filter with the given ID (created using zond_newFilter).
const logObjects = await provider.request({ method: "zond_getFilterLogs", params: ["0x1c2fc22a03559852c88e0b501792be88"], });
[ { "logIndex": "0x0", "removed": false, "blockNumber": "0x233", "blockHash": "0xfc139f5e2edee9e9c888d8df9a2d2226133a9bd87c88ccbd9c930d3d4c9f9ef5", "topics": [ "0x04474795f5b996ff80cb47c148d4c5ccdbe09ef27551820caa9c2f8ed149cce3" ], .... }, { "logIndex": "0x0", "removed": false, "blockNumber": "0x238", "blockHash": "0x98b0ec0f9fea0018a644959accbe69cd046a8582e89402e1ab0ada91cad644ed", "topics": [ "0x04474795f5b996ff80cb47c148d4c5ccdbe09ef27551820caa9c2f8ed149cce3" ], .... } ]
A method for returning an array of all logs matching the specified filter.
const log = await provider.request({ method: "zond_getLogs", params: [ { fromBlock: "0x1234AB", toBlock: "latest", address: "0xd01aaa39b223fe8d0a0e5c4f27ead9083c756dd3", topics: [], }, ], });
[ { "logIndex": "0x0", "removed": false, "blockNumber": "0x233", "blockHash": "0xfc139f5e2edee9e9c888d8df9a2d2226133a9bd87c88ccbd9c930d3d4c9f9ef5", "topics": [ "0x04474795f5b996ff80cb47c148d4c5ccdbe09ef27551820caa9c2f8ed149cce3" ], .... }, { "logIndex": "0x0", "removed": false, "blockNumber": "0x238", "blockHash": "0x98b0ec0f9fea0018a644959accbe69cd046a8582e89402e1ab0ada91cad644ed", "topics": [ "0x04474795f5b996ff80cb47c148d4c5ccdbe09ef27551820caa9c2f8ed149cce3" ], .... } ]
A method that returns the merkle proof for a given account and optionally some storage keys.
const accountProof = await provider.request({ method: "zond_getProof", params: ["Z20D20b8026B8F02540246f58120ddAAf35AECD9B", [], "latest"], });
{ "accountProof": [ "0xf90191a05b49406cc....", "0xf851808080a0eeafb....", "0xf874a02082e4c4652...." ], "balance": "0x1a77e254760c9d13ccacd", "codeHash": "0xc5d2460186f7233c927e7db2dcc703c0e500b653ca82273b7bfad8045d85a470", "nonce": "0xb", "storageHash": "0x56e81f171bcc55a6ff8345e692c0f86e5b48e01b996cadc001622fb5e363b421", "storageProof": [] }
A method for returning the information about a transaction requested by transaction hash.
const storageAt = await provider.request({ method: "zond_getStorageAt", params: ["Z20D20b8026B8F02540246f58120ddAAf35AECD9B", "0x0", "latest"], });
"0x0000000000000000000000000000000000000000000000000000000000000000"
A method for returning information about a transaction by block hash and transaction index position.
const transactionInformation = await provider.request({ method: "zond_getTransactionByBlockHashAndIndex", params: [ "0x28e25a85fe327cea53e461774d989181e71595ce653e193f96836242ae8b8f48", "0x2", ], });
{ "blockHash": "0x510efccf44a192e6e34bcb439a1947e24b86244280762cbb006858c237093fda", "blockNumber": "0x442", "chainId": 345, "from": "Z205fe2f3af6c04C415A82CA456588640435C9746" .... }
A method for returning information about a transaction by block number and transaction index position.
const transactionInformation = await provider.request({ method: "zond_getTransactionByBlockNumberAndIndex", params: [ "0x28e25a85fe327cea53e461774d989181e71595ce653e193f96836242ae8b8f48", "0x2", ], });
{ "blockHash": "0x510efccf44a192e6e34bcb439a1947e24b86244280762cbb006858c237093fda", "blockNumber": "0x442", "chainId": 345, "from": "Z205fe2f3af6c04C415A82CA456588640435C9746" .... }
A method for returning the information about a transaction requested by transaction hash.
const tx = await provider.request({ method: "zond_getTransactionByHash", params: [ "0xa52be92809541220ee0aaaede6047d9a6c5d0cd96a517c854d944ee70a0ebb44", ], });
{ "blockHash": "0x510efccf44a192e6e34bcb439a1947e24b86244280762cbb006858c237093fda", "blockNumber": "0x442", "chainId": 345, "from": "Z205fe2f3af6c04C415A82CA456588640435C9746" .... }
A method for returning the code at a given address.
const transactionCount = await provider.request({ method: "zond_getTransactionCount", params: ["Z20E7Bde67f00EA38ABb2aC57e1B0DD93f518446c", "latest"], });
"0x1"
A method for returning the receipt of a transaction by transaction hash.
const tx = await provider.request({ method: "zond_getTransactionReceipt", params: [ "0x504ce587a65bdbdb6414a0c6c16d86a04dd79bfcc4f2950eec9634b30ce5370f", ], });
{ "blockHash": "0xe7212a92cfb9b06addc80dec2a0dfae9ea94fd344efeb157c41e12994fcad60a", "blockNumber": "0x77", "contractAddress": null, "cumulativeGasUsed": "0x5208", "from": "Z20B714091cF2a62DADda2847803e3f1B9D2D3779" .... }
A method that creates a filter in the node, to notify when a new block arrives.
const filterIdentifier = await provider.request({ method: "zond_newBlockFilter", params: [], });
"0x01"
A method that creates a filter object, based on filter options, to notify when the state changes (logs).
const filterIdentifier = await provider.request({ method: "zond_newFilter", params: [ { fromBlock: "latest", toBlock: "latest", address: "Z208318ecd68f26726CE7C54b29CaBA94584969B6", topics: [], }, ], });
"0x67c04257976e0fa66c592cd5cf6bcfa8"
A method that creates a filter in the node, to notify when new pending transactions arrive.
const filterIdentifier = await provider.request({ method: "zond_newPendingTransactionFilter", params: [], });
"0x4b81b2048ece0cf9eb61dba71b5df8d1"
A method that sends a raw transaction to the blockchain.
const transactionHash = await provider.request({ method: "zond_sendRawTransaction", params: ["0xf869018203e882520894f17...."], });
"0x02f91c4a827e7e0c847735940084...."
A method that subscribes to specific Ethereum events, returning a subscription ID used to receive notifications. A unique subscription ID that can be used to unsubscribe or identify incoming notifications will be returned.
const subscriptionId = await provider.request({ method: "zond_syncing", params: [ "logs", { address: "Z208318ecd68f26726CE7C54b29CaBA94584969B6", topics: [ "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a57b7edb8d6", ], }, ], });
"0xbb0ecff80c39d75faac664a6dff7c43a"
A method that returns an object with data about the sync status or false.
const syncingStatus = await provider.request({ method: "zond_syncing", params: [], });
false
A method for uninstalling a filter with given id.
const isSuccess = await provider.request({ method: "zond_uninstallFilter", params: ["0x19ecc4e804cb0fa1827358325b53312"], });
true
A method that unsubscribes from a specific Ethereum event, using the subscription ID provided by zond_subscribe method.
const unsubscribed = await provider.request({ method: "zond_unsubscribe", params: ["0xbb0ecff80c39d75faac664a6dff7c43a"], });
true
