Update

bro-n-bro · Oct 19, 2024 · 0993adf · 0993adf
1 parent 707e42a
commit 0993adf
Show file tree

Hide file tree

Showing 3 changed files with 255 additions and 98 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -166,6 +166,77 @@ button
 }
 
 
+.connection_status
+{
+    width: 100%;
+    margin-bottom: 20px;
+
+    text-align: center;
+}
+
+
+.connection_status span
+{
+    position: relative;
+
+    display: none;
+
+    padding-left: 15px;
+
+    vertical-align: top;
+}
+
+
+.connection_status span:before
+{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+
+    width: 5px;
+    height: 5px;
+    margin: auto 0;
+
+    content: '';
+
+    border-radius: 50%;
+}
+
+
+.connection_status span.green:before
+{
+    background: green;
+}
+
+.connection_status span.red:before
+{
+    background: red;
+}
+
+
+.connection_status span.show
+{
+    display: inline-block;
+}
+
+
+.tx_result
+{
+    width: 100%;
+    margin-bottom: 20px;
+
+    text-align: center;
+}
+
+.tx_result:empty
+{
+    display: none;
+}
+
+
 #address
 {
     width: 100%;

diff --git a/index.html b/index.html
@@ -26,6 +26,13 @@
 	<body>
 		<div class="logo">LOGO</div>
 
+		<div class="connection_status">
+			<span class="green">Connected</span>
+			<span class="red" style="display: inline-block;">Disconnected</span>
+		</div>
+
+		<div class="tx_result"></div>
+
 		<div id="address"></div>
 
 		<button class="btn">Connect wallet</button>
@@ -40,54 +47,84 @@
 
 		<script>
 			// Create JetPack instance
-			const jetpack = new JetPack()
-
-			jetpack.init().then(() => {
-				// Get connectWallet
-				function connectWallet() {
-					jetpack.connectWallet('bostrom').then(() => {
-						document.getElementById('address').innerHTML = `Your address:<br> ${jetpack.getAddress().slice(0, 9)}...${jetpack.getAddress().slice(-6)}`
-
-						document.querySelector('.btn').style.display = 'none'
-						document.querySelector('.send_btn').style.display = 'inline-block'
-					}).catch(error => {
-						alert(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 => {
-						if (result.type === 'error') {
-							alert('Status: Error, Desc: ' + result.message)
-						}
-
-						if (result.type === 'tx') {
-							alert('Status: Success, Hash: ' + result.hash)
-						}
-					}).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)
+			const jetpack = new JetPack(true)
+
+			jetpack.on('error', message => {
+				console.log('Error: ' + message)
+
+				alert(message)
+			})
+
+			jetpack.on('connect', () => {
+				console.log('Connection successful.')
+
+				document.querySelector('.connection_status .red').style.display = 'none'
+				document.querySelector('.connection_status .green').style.display = 'inline-block'
 			})
+
+			jetpack.on('disconnect', () => {
+				console.log('Disconnected.')
+
+				document.querySelector('.connection_status .green').style.display = 'none'
+				document.querySelector('.connection_status .red').style.display = 'inline-block'
+
+				document.getElementById('address').innerHTML = ''
+
+				document.querySelector('.send_btn').style.display = 'none'
+				document.querySelector('.btn').style.display = 'inline-block'
+			})
+
+
+			// Get connectWallet
+			function connectWallet() {
+				jetpack.connectWallet('bostrom').then(() => {
+					document.getElementById('address').innerHTML = `Your address:<br> ${jetpack.getAddress().slice(0, 9)}...${jetpack.getAddress().slice(-6)}`
+
+					document.querySelector('.btn').style.display = 'none'
+					document.querySelector('.send_btn').style.display = 'inline-block'
+				}).catch(error => {
+					alert(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 => {
+					if (result.type === 'error') {
+						document.querySelector('.tx_result').innerHTML = `Error:<br> ${result.message}`
+
+						setTimeout(() => {
+							document.querySelector('.tx_result').innerHTML = ''
+						}, 5000)
+					}
+
+					if (result.type === 'tx') {
+						document.querySelector('.tx_result').innerHTML = `Success:<br> ${result.hash}`
+
+						setTimeout(() => {
+							document.querySelector('.tx_result').innerHTML = ''
+						}, 5000)
+					}
+				}).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)
 		</script>
 	</body>
 </html>