From 6c185e6086bbf9d12c145dfeceb2bc47c1fc150a Mon Sep 17 00:00:00 2001 From: Christopher Cali Date: Wed, 1 Nov 2023 16:14:04 -0400 Subject: [PATCH] Remove eigenlayer from register operator modal and begin fixing withdrawal flow --- apps/web/src/pages/operators/Operator.vue | 4 +- .../src/pages/overview/components/Staking.vue | 182 ++++++++++++++---- 2 files changed, 142 insertions(+), 44 deletions(-) diff --git a/apps/web/src/pages/operators/Operator.vue b/apps/web/src/pages/operators/Operator.vue index e9f996811..ec1571b37 100644 --- a/apps/web/src/pages/operators/Operator.vue +++ b/apps/web/src/pages/operators/Operator.vue @@ -617,7 +617,7 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => { -
+
diff --git a/apps/web/src/pages/overview/components/Staking.vue b/apps/web/src/pages/overview/components/Staking.vue index ecb9abd63..1369e1616 100644 --- a/apps/web/src/pages/overview/components/Staking.vue +++ b/apps/web/src/pages/overview/components/Staking.vue @@ -27,10 +27,12 @@ const formattedAmountToStakeOrWithdraw = ref('') const formattedWalletOptions = ref>([]) const selectedStakingProvider = ref('') const selectedWalletAddress = ref(null as null | string) +const selectedOperatorGroup = ref(null as null | 'Default' | 'Eigen') // Wallet Select Refs const errorMessage = ref(null as null | string) const openSelectWalletInput = ref(false) +const openSelectOperatorGroupInput = ref(false) const openTermsOfService = ref(false) const termsOfServiceCheckbox = ref(false) @@ -67,14 +69,14 @@ function toggleEstimatedAPY() { } } -const handleInputOnAmountToStake = (event: any) => { +const handleInputOnAmountToStakeOrWithdraw = (event: any) => { const value = event.target.value.replace(/[^\d.]/g, '') const parts = value.split('.') parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',') - // Limit to two decimal places - if (parts[1] && parts[1].length > 2) { - parts[1] = parts[1].slice(0, 2) + // Limit to 18 decimal places + if (parts[1] && parts[1].length > 18) { + parts[1] = parts[1].slice(0, 18) } // Update the model value @@ -122,8 +124,6 @@ watch(formattedAmountToStakeOrWithdraw, async () => { if (formattedAmountToStakeOrWithdraw.value) { const floatAmount = parseFloat(formattedAmountToStakeOrWithdraw.value?.replace(/,/g, '')) let maxAmount - // minAmount is 0.0001 ETH - let minAmount = 0.0001 if (selectedWalletAddress.value) { maxAmount = await getEthersBalance(selectedWalletAddress.value) } else { @@ -132,8 +132,6 @@ watch(formattedAmountToStakeOrWithdraw, async () => { if (floatAmount > maxAmount) { errorMessage.value = 'Insufficient Funds' - } else if (floatAmount < minAmount) { - errorMessage.value = 'Minimun Staking is 0.0001 ETH' } else { errorMessage.value = null } @@ -198,6 +196,15 @@ const handleOutsideClickForWalletInput = (event: any) => { } } +const handleOutsideClickForOperatorGroupInput = (event: any) => { + const selectOperatorGroupInputContainer = document.getElementById('selectOperatorGroupInputContainer') + const selectOperatorGroupInputButton = document.getElementById('selectOperatorGroupInputButton') + + if(!selectOperatorGroupInputContainer?.contains(event.target) && !selectOperatorGroupInputButton?.contains(event.target)){ + openSelectOperatorGroupInput.value = false + } +} + const handleOutsideClickForTermsOfService = (event: any) => { const termsOfServiceContainer = document.getElementById('termsOfServiceContainer') const termsOfServiceButton = document.getElementById('termsOfServiceButton') @@ -216,6 +223,14 @@ watch(openSelectWalletInput, ()=>{ } }) +watch(openSelectOperatorGroupInput, ()=>{ + if(openSelectWalletInput.value){ + window.addEventListener('click', handleOutsideClickForOperatorGroupInput) + }else { + window.removeEventListener('click', handleOutsideClickForOperatorGroupInput) + } +}) + watch(openTermsOfService, ()=>{ if(openTermsOfService.value){ window.addEventListener('click', handleOutsideClickForTermsOfService) @@ -239,8 +254,8 @@ const handleDeposit = async () => { type: stakeType.value }) - if (!result) stakeButtonText.value = 'Failed!' - stakeButtonText.value = 'Staked!' + if (result === false) stakeButtonText.value = 'User Rejected Signature' + else stakeButtonText.value = 'Staked!' setTimeout(() =>{ stakeButtonText.value = 'Stake' @@ -264,7 +279,7 @@ const handleDeposit = async () => { const handleWithdraw = async () => { stakeButtonText.value = 'Withdrawing...' - + selectedOperatorGroup.value = null // const activeAddress = await detectActiveWalletAddress(selectedStakingProvider.value) // if (activeAddress !== selectedWalletAddress.value) { // formattedAmountToStakeOrWithdraw.value = '' @@ -289,7 +304,7 @@ const handleWithdraw = async () => { }) if (!result) stakeButtonText.value = 'Failed!' - stakeButtonText.value = 'Withdrawn!' + else stakeButtonText.value = 'Withdrawn!' setTimeout(() =>{ stakeButtonText.value = 'Withdraw' @@ -430,10 +445,10 @@ function setStakeOrWithdraw(option: 'stake' | 'withdraw') { id="amount_input" v-model="formattedAmountToStakeOrWithdraw" type="text" - pattern="^\d{1,3}(,\d{3})*(\.\d+)?$" + pattern="^\d{1,3}(,\d{3})*(\.\d{1,18})?$" placeholder="0.00" - class=" outline-none" - @input="handleInputOnAmountToStake" + class="outline-none" + @input="handleInputOnAmountToStakeOrWithdraw" >
@@ -443,41 +458,119 @@ function setStakeOrWithdraw(option: 'stake' | 'withdraw') {
- -
-
-
- Fees + +
+
+
+
+ Fees +
+
+
+ + 5.00%
-
- - 5.00% -
-
-
-
-
- Exchange Rate +
+
+
+ Exchange Rate +
+
+
+ ${{ currentEthPrice }}/ETH
-
- ${{ currentEthPrice }}/ETH -
-
-
-
-
- Estimated APY +
+
+
+ Estimated APY +
+
+
+ {{ estimatedAPY }}%
-
- {{ estimatedAPY }}% +
+ + +
+
+ Operator Group
+
+ +
+ + + +
+ + +
+
+
-
+