Created
July 15, 2019 13:21
-
-
Save pedrouid/9462d02ebce991bd1c0f039d4185e7e2 to your computer and use it in GitHub Desktop.
Test WalletConnect (HTML + JS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="shortcut icon" href="/favicon.ico" /> | |
| <meta | |
| name="viewport" | |
| content="width=device-width, initial-scale=1, shrink-to-fit=no" | |
| /> | |
| <meta name="theme-color" content="#000000" /> | |
| <title>WalletConnect Example</title> | |
| <!-- <link rel="stylesheet" type="text/css" href="./style.css" /> --> | |
| </head> | |
| <body> | |
| <div id="content"> | |
| <h1 id="page-title">WalletConnect</h1> | |
| <div id="page-info"></div> | |
| <div id="page-actions"> | |
| <p>Click to Connect</p> | |
| <button onclick="onInit()">WalletConnect</button> | |
| </div> | |
| </div> | |
| <script src="./browser.js"></script> | |
| <script src="./qrcode-modal.js"></script> | |
| <script src="./script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict' | |
| // updates title to display package version | |
| updateTitle() | |
| const WalletConnect = window.WalletConnect.default | |
| const WalletConnectQRCodeModal = window.WalletConnectQRCodeModal.default | |
| const bridge = 'https://bridge.walletconnect.org' | |
| let walletConnector = null | |
| function onInit() { | |
| // Create a walletConnector | |
| walletConnector = new WalletConnect({ | |
| bridge: 'https://bridge.walletconnect.org' // Required | |
| }) | |
| // Check if connection is already established | |
| if (!walletConnector.connected) { | |
| // create new session | |
| walletConnector.createSession().then(() => { | |
| // get uri for QR Code modal | |
| const uri = walletConnector.uri | |
| // display QR Code modal | |
| WalletConnectQRCodeModal.open(uri, () => { | |
| console.log('QR Code Modal closed') | |
| }) | |
| }) | |
| } else { | |
| const { accounts, chainId } = walletConnector | |
| updateSessionDetails({ accounts, chainId }) | |
| } | |
| onSubscribe() | |
| } | |
| function onSubscribe() { | |
| if (!walletConnector) { | |
| throw new Error(`walletConnector hasn't been created yet`) | |
| } | |
| // Subscribe to connection events | |
| walletConnector.on('connect', (error, payload) => { | |
| if (error) { | |
| throw error | |
| } | |
| // Close QR Code Modal | |
| WalletConnectQRCodeModal.close() | |
| // Get provided accounts and chainId | |
| const { accounts, chainId } = payload.params[0] | |
| updateSessionDetails({ accounts, chainId }) | |
| }) | |
| walletConnector.on('session_update', (error, payload) => { | |
| if (error) { | |
| throw error | |
| } | |
| // Get updated accounts and chainId | |
| const { accounts, chainId } = payload.params[0] | |
| updateSessionDetails({ accounts, chainId }) | |
| }) | |
| walletConnector.on('disconnect', (error, payload) => { | |
| if (error) { | |
| throw error | |
| } | |
| // Delete walletConnector | |
| walletConnector = null | |
| onDisconnect() | |
| }) | |
| } | |
| async function updateSessionDetails({ accounts, chainId }) { | |
| const containerEl = document.getElementById('page-actions') | |
| const pTags = containerEl.getElementsByTagName('p') | |
| if (pTags.length === 1) { | |
| const textEl = containerEl.getElementsByTagName('p')[0] | |
| textEl.innerHTML = 'Connected!' | |
| const accountEl = document.createElement('p') | |
| accountEl.innerHTML = `Account: ${accounts[0]}` | |
| insertAfter(accountEl, textEl) | |
| const chainData = await getChainData(chainId) | |
| const chainEl = document.createElement('p') | |
| chainEl.innerHTML = `Chain: ${chainData.name}` | |
| insertAfter(chainEl, accountEl) | |
| const buttonEl = containerEl.getElementsByTagName('button')[0] | |
| buttonEl.innerText = 'Send Transaction' | |
| buttonEl.onclick = sendTestTransaction | |
| } else { | |
| const accountEl = containerEl.getElementsByTagName('p')[1] | |
| accountEl.innerHTML = `Account: ${accounts[0]}` | |
| const chainData = await getChainData(chainId) | |
| const chainEl = containerEl.getElementsByTagName('p')[2] | |
| chainEl.innerHTML = `Chain: ${chainData.name}` | |
| } | |
| } | |
| async function onDisconnect() { | |
| const containerEl = document.getElementById('page-actions') | |
| const pTags = containerEl.getElementsByTagName('p') | |
| const textEl = containerEl.getElementsByTagName('p')[0] | |
| textEl.innerHTML = 'Disconnected!' | |
| const buttonEl = containerEl.getElementsByTagName('button')[0] | |
| buttonEl.innerText = 'WalletConnect' | |
| buttonEl.onclick = onInit | |
| if (pTags.length > 1) { | |
| const accountEl = containerEl.getElementsByTagName('p')[1] | |
| accountEl.remove() | |
| const chainEl = containerEl.getElementsByTagName('p')[1] | |
| chainEl.remove() | |
| } | |
| } | |
| function sendTestTransaction() { | |
| if (!walletConnector) { | |
| throw new Error(`walletConnector hasn't been created yet`) | |
| } | |
| // Draft transaction | |
| const tx = { | |
| from: walletConnector.accounts[0], | |
| to: walletConnector.accounts[0], | |
| data: '0x' // Required | |
| } | |
| // Send transaction | |
| walletConnector | |
| .sendTransaction(tx) | |
| .then(result => { | |
| // Returns transaction id (hash) | |
| console.log(result) | |
| }) | |
| .catch(error => { | |
| // Error returned when rejected | |
| console.error(error) | |
| }) | |
| } | |
| let supportedChains = null | |
| async function getChainData(chainId) { | |
| if (!supportedChains) { | |
| supportedChains = await getJsonFile('./chains.json') | |
| } | |
| const chainData = supportedChains.filter( | |
| chain => chain.chain_id === chainId | |
| )[0] | |
| if (!chainData) { | |
| throw new Error('ChainId missing or not supported') | |
| } | |
| return chainData | |
| } | |
| async function getJsonFile(path) { | |
| const res = await fetch(path) | |
| const json = await res.json() | |
| return json | |
| } | |
| async function updateTitle() { | |
| const { version } = await getJsonFile('../../lerna.json') | |
| const title = document.getElementById('page-title') | |
| title.innerHTML = | |
| title.innerHTML.replace(/\sv(\w.)+.\w+/gi, '') + ` v${version}` | |
| } | |
| function insertAfter(newNode, referenceNode) { | |
| referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling) | |
| } |
Where are these files?
<script src="./browser.js"></script><script src="./qrcode-modal.js"></script>this code is not working for me. can you help me?
not working for me either
Not working
index.js:2 Uncaught ReferenceError: exports is not defined
at index.js:2:23
(anonymous) @ index.js:2
jsdelivr-header.js:7 Uncaught ReferenceError: require is not defined
at jsdelivr-header.js:7:1
(anonymous) @ jsdelivr-header.js:7
script.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'default')
at script.js:6:44
Where are these files?
<script src="./browser.js"></script><script src="./qrcode-modal.js"></script>this code is not working for me. can you help me?
have you been able to resolve this
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Where are these files?
<script src="./browser.js"></script>this code is not working for me. can you help me?