From 388db7a9bc2cdc94729e11be11cebd8abd098b6f Mon Sep 17 00:00:00 2001
From: hmisty <hmisty@gmail.com>
Date: Tue, 9 Jan 2024 18:01:04 +0800
Subject: [PATCH] improve unwrap dialog

---
 scripts/controllers/addressInfoController.js | 44 ++++++++++-
 views/addressInfo.html                       | 80 ++++++++++++++------
 2 files changed, 98 insertions(+), 26 deletions(-)

diff --git a/scripts/controllers/addressInfoController.js b/scripts/controllers/addressInfoController.js
index 9c1ebc2..ae6181a 100644
--- a/scripts/controllers/addressInfoController.js
+++ b/scripts/controllers/addressInfoController.js
@@ -125,11 +125,27 @@ angular.module('ethExplorer')
 			$('#dialog-unwrap-wjoule').modal('show');
 		}
 
+		$scope.wjUnwrapToConfirm = function () {
+			const amt = $('#wj-unwrap-amount')[0].value;
+			const to = $('#wj-unwrap-to')[0].value;
+			const save_info = $('#wj-unwrap-save-info')[0].checked;
+			console.log('wjUnwrapTo', amt, to, save_info);
+
+			$('#confirm-unwrap-wj-from').text($scope.addressId);
+			$('#confirm-unwrap-wj-amount').text(amt ? amt : '0');
+			$('#confirm-unwrap-wj-amount2').text(amt ? amt : '0');
+			$('#confirm-unwrap-wj-to').text(to ? to : $scope.addressId);
+
+			$('#dialog-unwrap-wjoule-confirm').modal({keyboard:false, backdrop:'static'});
+			$('#dialog-unwrap-wjoule-confirm').modal('show');
+		}
+
 		$scope.wjUnwrapTo = function () {
 			const DIALOG_TITLE = 'Unwrap wJ';
 			const amt = $('#wj-unwrap-amount')[0].value;
 			const to = $('#wj-unwrap-to')[0].value;
-			console.log('wjUnwrapTo', amt, to);
+			const save_info = $('#wj-unwrap-save-info')[0].checked;
+			console.log('wjUnwrapTo', amt, to, save_info);
 			
 			if (amt && !isNaN(amt)) { // isNaN works, nice.
 				if (!(amt > 0)) {
@@ -148,6 +164,11 @@ angular.module('ethExplorer')
 								wj_contract.methods.withdraw(e)
 									.send({from: connectedAccount}, handlerShowTx(DIALOG_TITLE))
 									.then(handlerShowRct(DIALOG_TITLE));
+
+								if (!save_info) {
+									$('#wj-unwrap-amount')[0].value = '';
+									$('#wj-unwrap-to')[0].value = '';
+								}
 							} else {
 								dialogShowTxt(DIALOG_TITLE, '错误：无法评估gas：' + err.message); //展示合约逻辑报错
 							}
@@ -158,6 +179,11 @@ angular.module('ethExplorer')
 								wj_contract.methods.withdrawTo(to, e)
 									.send({from: connectedAccount}, handlerShowTx(DIALOG_TITLE))
 									.then(handlerShowRct(DIALOG_TITLE));
+
+								if (!save_info) {
+									$('#wj-unwrap-amount')[0].value = '';
+									$('#wj-unwrap-to')[0].value = '';
+								}
 							} else {
 								dialogShowTxt(DIALOG_TITLE, '错误：无法评估gas：' + err.message); //展示合约逻辑报错
 							}
@@ -234,9 +260,11 @@ angular.module('ethExplorer')
 					console.log('loading golden_idx.json ...');
 				});
 
-				getJNSDAOV();
-				getAllJNS();
-				getAllJNSVote();
+				// JNS -> JNSDAOV, JNSVote, etc.
+				getAllJNS().then(() => {
+					getJNSDAOV();
+					getAllJNSVote();
+				});
 			}
 
 			function getAddressInfos(){
@@ -512,6 +540,8 @@ angular.module('ethExplorer')
 			}
 
 			function getAllJNS() {
+				var deferred = $q.defer();
+
 				$scope.allJNS = [];
 				var addr = $scope.addressId;
 				var contract = new web3.eth.Contract(jns_ABI, jns_contract_address);
@@ -542,6 +572,9 @@ angular.module('ethExplorer')
 								}
 							});
 						}
+
+						if (balance > 0)
+							deferred.resolve();
 					}
 				});
 
@@ -553,6 +586,9 @@ angular.module('ethExplorer')
 					console.log('[addressInfo] chainId: ', $scope.chainId, 'account: ', $scope.account, 'jnsContractOwner: ', $scope.jnsContractOwner);
 					$scope.$apply();
 				});
+
+
+				return deferred.promise;
 			}
 
 			function getAllJNSVote() {
diff --git a/views/addressInfo.html b/views/addressInfo.html
index d00fc06..a7809e4 100644
--- a/views/addressInfo.html
+++ b/views/addressInfo.html
@@ -30,7 +30,7 @@ <h1>
         <tbody>
         <tr>
 			<td><b>能量余额：</b></td>
-			<td>{{balanceInEther || "计算中..."}} J (焦耳)，即 {{balance || "计算中..."}} e (能量单位)</td>
+			<td>{{balanceInEther || "-"}} J (焦耳)，即 {{balance || "-"}} e (能量单位)</td>
         </tr>
         <tr>
 			<td><b>数字资产：</b></td>
@@ -38,7 +38,7 @@ <h1>
         </tr>
         <tr>
             <td>Wrapped Joule</td>
-            <td>{{wjBalanceInJoule || "计算中..."}} wJ
+            <td>{{wjBalanceInJoule || "-"}} wJ
 				<span ng-style="{ 'display': chainId == '0xe52' && account.toLowerCase() == addressId.toLowerCase() ? 'inline-block' : 'none' }">
 					<span ng-style="{ 'display': wjBalance > 0 ? 'inline-block':'none'}">
 						<button ng-click="wjUnwrapDialog()"><font style="color:#0023ed">unwrap</font></button>
@@ -49,26 +49,23 @@ <h1>
         <tr>
 			<td><b>藏品和徽章：</b></td>
 			<td>
-				JTI: {{countJTI || "统计中..."}} 
+				JTI: {{countJTI || "-"}} 
 				<span ng-style="{ 'display': chainId == '0xe52' && account.toLowerCase() == jtiContractOwner.toLowerCase() ? 'inline-block' : 'none' }">
 					<button ng-click="star()">⭐️</button>
 				</span>
-				, 
-				FlyingJ: {{countFlyingJ || "统计中..."}}
-				,
-				CryptoJunks: {{countCryptoJunks || "统计中..."}}
-				,
-				JNSDAO V: {{countJNSDAOV || "统计中..."}}
-				<span ng-style="{ 'display': chainId == '0xe52' && account.toLowerCase() == addressId.toLowerCase() ? 'inline-block' : 'none' }">
-					<button ng-click="register()"><font style="color:#c647ba">npub</font></button>
-				</span>
-				, 
-				JNS: {{countJNS || "统计中..."}}
+				<span ng-style="{ 'display': countFlyingJ > 0 ? 'inline-block' : 'none' }">, FlyingJ: {{countFlyingJ}}</span>
+				<span ng-style="{ 'display': countCryptoJunks > 0 ? 'inline-block' : 'none' }">, CryptoJunks: {{countCryptoJunks}}</span>
+				<span ng-style="{ 'display': countJNS > 0 ? 'inline-block' : 'none' }">, JNS: {{countJNS}}</span>
 				<!--span ng-style="{ 'display': chainId == '0xe52' && account == jnsContractOwner ? 'inline-block' : 'none' }">
 					<button ng-click="mint()">🔨</button>
 				</span-->
-				,
-				JNSVote POAP: {{countJNSVote || "统计中..."}}
+				<span ng-style="{ 'display': countJNSVote > 0 ? 'inline-block' : 'none' }">, JNSVote POAP: {{countJNSVote}}</span>
+				<span ng-style="{ 'display': countJNSDAOV > 0 ? 'inline-block' : 'none' }">
+					, JNSDAO V: {{countJNSDAOV || "统计中..."}}
+					<span ng-style="{ 'display': chainId == '0xe52' && account.toLowerCase() == addressId.toLowerCase() ? 'inline-block' : 'none' }">
+						<button ng-click="register()"><font style="color:#c647ba">npub</font></button>
+					</span>
+				</span>
 			</td>
         </tr>
 		<tr data-ng-repeat="i5 in allJNSDAOV">
@@ -134,15 +131,24 @@ <h4 class="modal-title"><span id="">Unwrap wJ</span></h4>
                 </div></center>
                 <div class="modal-body">
 					<code>
-						<span style="word-break:break-all;" id="">
-							<p>拆开wJ (wrapped Joule)，释放其中的能量到某一地址。需输入：</p>
-							<p>1. 要拆开的wJ数量：<input type="text" id="wj-unwrap-amount"></input> wJ</p>
-							<p>2. 接收能量的链地址（留空则默认为当前地址）：<input type="text" id="wj-unwrap-to"></input></p>
-						</span>
+						<div style="word-break:break-all;" id="">
+							<div>
+								<div>释放wJ (wrapped Joule)中的能量(1 wJ = 1 J)到某一地址作为gas使用。</div>
+								<div>需输入：</div>
+								<div>1. 要释放的Joule量：<input type="text" id="wj-unwrap-amount"></input> J</div>
+							</div>
+							<div style="margin-top:5px;">
+								<div>2. 接收能量的链地址（留空则默认为当前地址）：</div>
+								<div><input style="width:100%" type="text" id="wj-unwrap-to"></input></div>
+							</div>
+							<div style="float:right;margin-top:10px;">
+								<input type="checkbox" checked id="wj-unwrap-save-info"><font color="black">点击确定后不清空输入框</font></input>
+							</div>
+						</div>
 					</code>
                 </div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="wjUnwrapTo()">确定</button>
+					<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="wjUnwrapToConfirm()">确定</button>
 					<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
 				</div>
             </div>
@@ -150,4 +156,34 @@ <h4 class="modal-title"><span id="">Unwrap wJ</span></h4>
     </div>
   <!-- end of dialog for input to unwrap wJoule -->
 
+  <!-- dialog for double checking & confirming to unwrap wJoule -->
+    <div id="dialog-unwrap-wjoule-confirm" class="modal fade" role="dialog">
+        <div class="modal-dialog">
+
+            <!-- Modal content-->
+            <div class="modal-content">
+                <center><div class="modal-header">
+						<h4 class="modal-title"><span id="">Unwrap wJ, 再次确认</span></h4>
+                </div></center>
+                <div class="modal-body">
+					<code>
+						<div style="word-break:break-all;" id="">
+							将从地址：<span id="confirm-unwrap-wj-from"></span>
+							减少：<span id="confirm-unwrap-wj-amount"></span> wJ
+							并将其中的能量：<span id="confirm-unwrap-wj-amount2"></span> J
+							释放到地址：<span id="confirm-unwrap-wj-to"></span>
+							作为gas使用。
+						</div>
+						<div style="float:right;">确认吗？</div>
+					</code>
+                </div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="wjUnwrapTo()">确定</button>
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+				</div>
+            </div>
+        </div>
+    </div>
+  <!-- end of dialog for double checking & confirming to unwrap wJoule -->
+
 </div>