diff --git a/css/styles.css b/css/styles.css index 55376b0..a1bf290 100644 --- a/css/styles.css +++ b/css/styles.css @@ -166,6 +166,20 @@ button } +#address +{ + width: 100%; + margin-bottom: 20px; + + text-align: center; +} + +#address:empty +{ + display: none; +} + + .btn { font-size: 18px; @@ -184,3 +198,9 @@ button border-radius: 10px; background: linear-gradient(to bottom, #6be3fd 0%,#002749 100%); } + + +.send_btn +{ + display: none; +} diff --git a/index.html b/index.html index f23fdf4..88482fa 100644 --- a/index.html +++ b/index.html @@ -26,10 +26,12 @@ -
+
+ + @@ -43,17 +45,40 @@ jetpack.init().then(() => { // Get connectWallet function connectWallet() { - // Get connectWallet jetpack.connectWallet('bostrom').then(() => { + document.getElementById('address').innerText = jetpack.getAddress() + document.querySelector('.btn').style.display = 'none' - document.getElementById('ddd').innerText = jetpack.getAddress() + document.querySelector('.send_btn').style.display = 'inline-block' }).catch(error => { console.log(error) }) } + + // Send Tx + function sendTX() { + jetpack.sendTx([{ + typeUrl: '/cosmos.bank.v1beta1.MsgSend', + value: { + fromAddress: jetpack.getAddress(), + toAddress: 'bostrom1p4hc20yrucx4hk4lf68wmuzvsa0rrxkum3re8f', + amount: [{ + denom: 'boot', + amount: '100000' + }] + } + }]).then(result => { + console.log(result) + }).catch(error => { + console.log(error) + }) + } + + // Add click event listener to the button document.querySelector('.btn').addEventListener('click', connectWallet) + document.querySelector('.send_btn').addEventListener('click', sendTX) }).catch(error => { console.error('Initialization failed:', error) }) diff --git a/js/jetPack.js b/js/jetPack.js index b1a6961..b788721 100644 --- a/js/jetPack.js +++ b/js/jetPack.js @@ -36,6 +36,7 @@ #pubKey = '' #isConnected = false #connectionInterval = 500 + #callbacks = {} // Constructor for JetPack class @@ -91,12 +92,40 @@ } + // Handle data + _handleData(data, resolve, reject) { + // Check the type of received data + if (data.type === 'address') { + // Save data + this.#jwAddress = data.address + + // Resolve the promise + resolve(true) + } else if (data.type === 'error') { + // Reject promise + reject(`Error received: ${data.message}`) + } else { + // Reject promise + reject('Unknown data type received.') + } + + // Check if there is a requestId and if there is a callback for it + if (data.requestId && this.#callbacks[data.requestId]) { + // Execute callback + this.#callbacks[data.requestId](data) + + // Remove callback after execution + delete this.#callbacks[data.requestId] + } + } + + // Public method to connect wallet - async connectWallet(chain_id = 'cosmoshub') { + connectWallet(chain_id = 'cosmoshub') { return new Promise((resolve, reject) => { // Check if already connected if (this.#isConnected) { - // Return false to indicate that no new connection was made + // Reject promise return reject('Already connected. Cannot initiate a new connection.') } @@ -113,7 +142,8 @@ }) // Construct Telegram bot URL - const telegramUrl = `https://t.me/${BOT_USERNAME}/dev_JetWallet?startapp=${encodedData}` + // const telegramUrl = `https://t.me/${BOT_USERNAME}/dev_JetWallet?startapp=${encodedData}` + const telegramUrl = `http://localhost:8081/auth?tgWebAppStartParam=${encodedData}` // Try to open the URL try { @@ -125,61 +155,75 @@ // Save connection this.#conn = this.#peer.connect(`jw-${BOT_ID}-${this.#userId}`) - // Successful connection - this.#conn.on('open', () => { - // Stop the interval - clearInterval(intervalId) - - // Set connected status to true - this.#isConnected = true - }) - - // Processing data receipt - this.#conn.on('data', data => { - // Check the type of received data - if (data.type === 'address') { - // Save data - this.#jwAddress = data.address - - // Resolve the promise with true - resolve(true) - } else if (data.type === 'error') { - // Reject promise - reject(`Error received: ${data.message}`) - } else { + if (this.#conn) { + // Successful connection + this.#conn.on('open', () => { + // Stop the interval + clearInterval(intervalId) + + // Set connected status to true + this.#isConnected = true + }) + + // Processing data receipt + this.#conn.on('data', data => this._handleData(data, resolve, reject)) + + // Error handling + this.#conn.on('error', error => { + // Stop the interval + clearInterval(intervalId) + // Reject promise - reject('Unknown data type received.') - } - }) - - // Error handling - this.#conn.on('error', error => { - // Stop the interval - clearInterval(intervalId) - - // Reject promise on error - reject(error) - }) - - // Handle disconnection event - this.#conn.on('close', () => { - // Set the connection status to false - this.#isConnected = false - }) - - this.#conn.on('disconnected', () => { - // Set the connection status to false - this.#isConnected = false - }) + reject(error) + }) + + // Handle disconnection event + this.#conn.on('close', () => { + // Set the connection status to false + this.#isConnected = false + }) + + this.#conn.on('disconnected', () => { + // Set the connection status to false + this.#isConnected = false + }) + } }, this.#connectionInterval) } catch (error) { - // Reject promise if URL opening fails + // Reject promise reject('Failed to open URL.') } }) } + // Public method to send Tx + sendTx(messages) { + return new Promise((resolve, reject) => { + if (!this.#isConnected || !this.#conn) { + return reject('No connection established.') + } + + // Generate a random ID + const requestId = this._generateRandomId() + + // Save callback + this.#callbacks[requestId] = response => resolve(response) + + // Send message + this.#conn.send({ + method: 'sendTx', + data: { + peer_id: this.#peerID, + chain_id: this.#chainId, + request_id: requestId, + msg: messages + } + }) + }) + } + + // Public method to connection status isConnected() { return this.#isConnected