better ux

hm0429 · Feb 6, 2022 · 13f9a1b · 13f9a1b
1 parent 7d2df63
commit 13f9a1b
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 2 deletions.
diff --git a/gcp/run/lock3r/public/js/main.js b/gcp/run/lock3r/public/js/main.js
@@ -121,6 +121,20 @@ function isSameAddress(a, b) {
 	return ethers.utils.getAddress(a) === ethers.utils.getAddress(b)
 }
 
+function isLockerAvailable(lockerId) {
+	const locker = lockers[lockerId]
+	const fee = ethers.utils.formatEther(locker.fee)
+	const deposit = ethers.utils.formatEther(locker.deposit)
+	const start = moment(locker.startTime.toNumber() * 1000)
+	const availableUntil = start.add(deposit / fee ,'s')
+	const diff = availableUntil.diff(moment())
+	if(diff > 0) {
+		return false
+	} else {
+		return true
+	}
+}
+
 /***********************************************************************************
 * UI - Maps
 ***********************************************************************************/
@@ -255,11 +269,16 @@ function hideLoading() {
 function refreshLockerUI(lockerId) {
 	const locker = lockers[lockerId]
 	if (locker.isUsing === true 
-		&& ethers.utils.getAddress(locker.currentUser) 
-			=== ethers.utils.getAddress(account)) 
+		&& isSameAddress(locker.currentUser, account)) 
 	{
 		$('#locker-start').hide()
 		$('#locker-operation').show()
+		refreshLockerRemainingDeposit(lockerId)
+	} else if (locker.isUsing === true
+		&& isLockerAvailable(lockerId) === false) {
+		$('#locker-start').hide()
+		$('#locker-operation').hide()
+		alert("This locker is currently in use.")
 	} else {
 		$('#locker-start').show()
 		$('#locker-operation').hide()
@@ -271,6 +290,35 @@ function refreshLockerUI(lockerId) {
 	$('#locker-modal').modal('show')
 }
 
+function refreshLockerRemainingDeposit(lockerId) {
+	if (window.lockerRemainingDepositTimer) {
+		clearInterval(window.lockerRemainingDepositTimer)
+	}
+	window.lockerRemainingDepositTimer = setInterval(() => {
+		const locker = lockers[lockerId]
+		const fee = ethers.utils.formatEther(locker.fee)
+		const deposit = ethers.utils.formatEther(locker.deposit)
+
+		const start = moment(locker.startTime.toNumber() * 1000)
+		const availableUntil = start.add(deposit / fee ,'s')
+		const diff = availableUntil.diff(moment()) / 1000
+		const balance = diff * fee
+
+		if (balance < 0) {
+			clearInterval(window.lockerRemainingDepositTimer)
+			window.lockerRemainingDepositTimer = null
+			return
+		}
+
+		const html = `
+		<p>Your deposit (MATIC): ${deposit}</p>
+		<p>Remaining (MATIC): ${balance.toFixed(3)}</p>
+		<p>Available until: ${availableUntil}</p>
+		`
+		$('#locker-remaining-deposit').html(html)
+	}, 1000)
+}
+
 /***********************************************************************************
 * API Call
 ***********************************************************************************/

diff --git a/gcp/run/lock3r/views/index.pug b/gcp/run/lock3r/views/index.pug
@@ -70,6 +70,7 @@ html
                 button.btn.btn-outline-info(onclick="onStartUsingLockerButtonClick()")
                   | Start
             .mt-3#locker-operation
+              #locker-remaining-deposit
               .d-grid.gap-2.m-3
                 button.btn.btn-outline-info(onclick="onUnlockButtonClick()")
                   | Unlock