diff --git a/gcp/run/lock3r/public/js/main.js b/gcp/run/lock3r/public/js/main.js index 61ce978..5c5fb03 100644 --- 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 = ` +

Your deposit (MATIC): ${deposit}

+

Remaining (MATIC): ${balance.toFixed(3)}

+

Available until: ${availableUntil}

+ ` + $('#locker-remaining-deposit').html(html) + }, 1000) +} + /*********************************************************************************** * API Call ***********************************************************************************/ diff --git a/gcp/run/lock3r/views/index.pug b/gcp/run/lock3r/views/index.pug index c0d0ead..6fa7ce7 100644 --- 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