Skip to content

Commit

Permalink
Merge pull request #456 from consensusnetworks/enhancement/no-dup-add…
Browse files Browse the repository at this point in the history 
…resses

P.S. this closes #444
  • Loading branch information
@ccali11
ccali11 authored Nov 2, 2023
2 parents 1209931 + 7006622 commit b638385
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 108 deletions.
4 changes: 4 additions & 0 deletions apps/web/src/components/ConnectWalletsFlow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,10 @@ async function selectAddress(address: string, pathIndex: number): Promise<void>
props.toggleModal(false)
flowState.value = 'select_provider'
}, 1000)
} else if (response === 'Address already exists on this account') {
flowState.value = 'select_address'
errorMessage.value = true
errorMassageText.value = 'Address selected is already connected to your account.'
} else if (
response === 'Address already exists as a primary address on another account' ||
response === 'Address already exists as a secondary address on another account'
Expand Down
169 changes: 70 additions & 99 deletions apps/web/src/pages/operators/Operator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -528,19 +528,17 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => {
class="fixed top-0 left-0 w-[100%] h-[100vh] bg-black/[0.3] rounded-[3px] z-[2]"
>
<div class="flex items-center justify-center w-full h-full">
<div class="card_container w-[80%] overflow-auto px-[30px] py-[20px]">
<div class="flex gap-[10px] flex-wrap justify-between">
<div class="flex flex-col">
<h6 class="card_title">
<div class="modal_card_container w-[80%] overflow-auto px-[30px] py-[20px]">
<div class="flex justify-between items-start">
<div class="flex-grow text-center">
<h5 class="card_title inline-block align-middle">
Register Operator
</h6>

<!-- Even Better Link to Operator Docs -->
</h5>
<div
class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-15 py-9 mt-12 mb-4 w-[400px]"
class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-15 py-6 my-2 w-full"
role="alert"
>
<p class="text-sm">
<p class="text-lg">
Learn how to set up a Casimir operator using
<a
:href="`${docsUrl}/guide/operating`"
Expand All @@ -556,8 +554,11 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => {
</p>
</div>
</div>

<div class="">
<!-- An 'X' to cancel out of the modal -->
<div
class="shrink-0 relative"
style="top: -0.5rem;"
>
<button
type="button"
class="card_title"
Expand All @@ -570,12 +571,16 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => {
</button>
</div>
</div>
<form @submit.prevent="submitRegisterOperatorForm">

<form
class="grid grid-cols-2 grid-rows-4 gap-x-4 gap-y-6 items-center h-[75%] px-40"
@submit.prevent="submitRegisterOperatorForm"
>
<!-- Wallet address input -->
<h6 class="text-[16px] font-[400] mt-[15px] mb-[4px] pl-[5px]">
Wallet
<h6 class="font-[400] mt-[15px] mb-[4px] col-span-1">
Wallet Address:
</h6>
<div class="card_input w-full max-w-[400px] relative">
<div class="card_input w-full col-span-1 relative">
<input
id="walletAddress"
v-model="selectedWallet.address"
Expand All @@ -588,6 +593,7 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => {
>
<button
type="button"
class="absolute right-3 top-1/2 transform -translate-y-1/2"
@click="selectedWallet = { walletProvider: '', address: '' }"
>
<vue-feather
Expand All @@ -599,7 +605,7 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => {
v-show="openSelectWalletOptions"
class="z-[3] absolute top-[110%] left-0 w-full border rounded-[8px] border-[#D0D5DD] p-[15px] bg-white max-h-[200px] overflow-auto"
>
<h6 class="text-[16px]">
<h6 class="">
Your Connected Wallets
</h6>
<button
Expand All @@ -616,49 +622,18 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => {
</div>
</div>

<!-- Enable Eigen Support -->
<!-- <h6 class="text-[16px] font-[400] mt-[15px] mb-[4px] pl-[5px]">
Add Eigen Support to Your Validator (Optional)
</h6>
<button
class="toggle_container mt-10 w-full max-w-[400px] relative"
:disabled="true"
@click="toggleEigenLayerSupport"
>
<div class="tooltip_container">
COMING SOON!
<div class="tooltip_triangle" />
</div>
<img
class="eigen-logo"
src="/eigen.svg"
>
Enable EigenLayer Support
<span
v-if="eigenIsShining"
class="shine-effect"
/>
<div
class="toggle-button"
:style="{ 'background-color': toggleBackgroundColor }"
:class="{ 'toggle-on': eigenIsToggled }"
>
<div class="toggle-circle" />
</div>
</button> -->

<!-- operator id input -->
<h6 class="text-[16px] font-[400] mt-[15px] mb-[4px] pl-[5px]">
Operator ID
<!-- Operator ID input -->
<h6 class="font-[400] mt-[15px] mb-[4px] col-span-1">
Operator ID:
</h6>
<div class="card_input w-full max-w-[400px] relative">
<div class="card_input w-full col-span-1 relative">
<input
id="operator_id"
v-model="selectedOperatorID"
type="text"
readonly
placeholder="Operator ID.."
class=" outline-none text-grey_4 text-[14px] w-full bg-white cursor-pointer"
class="outline-none text-grey_4 text-[14px] w-full bg-white cursor-pointer"
autocomplete="off"
@focus="openSelectOperatorID = true"
@blur="onSelectOperatorIDBlur"
Expand All @@ -677,7 +652,7 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => {
v-show="openSelectOperatorID"
class="z-[3] absolute top-[110%] left-0 w-full border rounded-[8px] border-[#D0D5DD] p-[15px] bg-white max-h-[200px] overflow-auto"
>
<h6 class="text-[16px]">
<h6>
Available Operators
</h6>
<div
Expand All @@ -700,64 +675,48 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => {
</button>
</div>
</div>
<!-- <div class="text-[14px] mt-[4px] text-grey_4 pl-[5px] whitespace-normal">
If no operators found with your SSV owner address, register one
<a
href=""
target="_blank"
class="text-primary underline"
>here</a>.
</div> -->

<!-- <hr class="my-[20px]"> -->

<!-- public node url-->
<h6 class="text-[16px] font-[400] mt-[15px] mb-[4px] pl-[5px]">
DKG Node URL

<!-- Public node URL input -->
<h6 class="font-[400] mt-[15px] mb-[4px] col-span-1">
DKG Node URL:
</h6>
<div class="card_input w-full max-w-[400px] relative">
<div class="card_input w-full col-span-1 relative">
<input
id="operator_id"
id="publicNodeURL"
v-model="selectedPublicNodeURL"
type="text"
placeholder="URL.."
autocomplete="off"
class=" outline-none text-grey_4 text-[14px] w-full"
class="outline-none text-grey_4 text-[14px] w-full"
>
<button
class="absolute right-3 top-1/2 transform -translate-y-1/2"
@click="selectedPublicNodeURL = ''"
>
<button @click="selectedPublicNodeURL = ''">
<vue-feather
type="x"
class="icon w-[12px] h-min"
/>
</button>
</div>
<!-- <div class="text-[14px] mt-[4px] text-grey_4 pl-[5px] whitespace-normal">
Add RockX DKG support to your node as documented
<a
href=""
target="_blank"
class="text-primary underline"
>here</a>.
</div> -->

<!-- <hr class="my-[20px]"> -->

<!-- Collateral-->
<h6 class="text-[16px] font-[400] mt-[15px] mb-[4px] pl-[5px]">
Collateral

<!-- Collateral input -->
<h6 class="font-[400] mt-[15px] mb-[4px] col-span-1">
Collateral:
</h6>
<div class="card_input w-full max-w-[400px] relative">
<div class="card_input w-full col-span-1 relative">
<input
id="operator_id"
id="collateral"
v-model="selectedCollateral"
type="text"
placeholder="0.00"
autocomplete="off"
class=" outline-none text-grey_4 text-[14px] w-full"
class="outline-none text-grey_4 text-[14px] w-full"
@input="handleInputChangeCollateral"
>
<button
type="button"
class="absolute right-3 top-1/2 transform -translate-y-1/2"
@click="selectedCollateral = ''"
>
<vue-feather
Expand All @@ -766,11 +725,9 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => {
/>
</button>
</div>
<!-- <div class="text-[14px] mt-[4px] text-grey_4 pl-[5px]">
Deposit at least 1 ETH per validator you plan to run.
</div> -->

<div class="flex justify-end mt-[10px]">
<!-- Submit button -->
<div class="flex justify-end mt-[10px] col-span-2">
<button
type="submit"
class="export_button"
Expand All @@ -789,7 +746,7 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => {

<style scoped>
.card_input {
padding: 0px 12px;
padding: 0px 8px; /* Adjust as needed */
background: #FFFFFF;
border: 1px solid #D0D5DD;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
Expand Down Expand Up @@ -980,21 +937,35 @@ watch([loadingSessionLogin || loadingInitializeOperators], () => {
}
.card_title {
font-family: 'IBM Plex Sans';
font-style: normal;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 0px;
font-size: 24px;
color: #101828;
margin-top: 16px;
margin-bottom: 16px;
margin: 14px 0;
}
.card_container {
background: #FFFFFF;
border: 1px solid #D0D5DD;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.04);
border-radius: 3px;
min-height: 500px;
}
.modal_card_container {
background: #FFFFFF;
border: 1px solid #D0D5DD;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.04);
border-radius: 8px;
height: 500px;
max-width: 1000px; /* Adjust as needed */
overflow: auto;
}
/* the form h6 tags */
.modal_card_container h6 {
font-size: 18px;
padding-bottom: 10px;
}
.title {
Expand Down
40 changes: 34 additions & 6 deletions apps/web/src/pages/overview/components/Staking.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { computed, ref, onMounted, watch } from 'vue'
import { FormattedWalletOption, ProviderString } from '@casimir/types'
import VueFeather from 'vue-feather'
import useStaking from '@/composables/staking'
Expand All @@ -12,7 +12,7 @@ import TermsOfService from '@/components/TermsOfService.vue'
const { stakingComposableInitialized, deposit, initializeStakingComposable, withdraw, getWithdrawableBalance } = useStaking()
const { getEthersBalance } = useEthers()
const { convertString } = useFormat()
const { convertString, formatNumber } = useFormat()
const { getCurrentPrice } = usePrice()
const { user, updateUserAgreement } = useUser()
Expand Down Expand Up @@ -49,6 +49,32 @@ const isShining = ref(true) // Determines if the shine effect is active
const eigenIsToggled = ref(false) // Determines the toggle state
const toggleBackgroundColor = ref('#eee') // Initial color
const balances = ref<{ [key: string]: string | null }>({})
const fetchBalances = async () => {
const balancePromises = formattedWalletOptions.value.map(async (walletOption) => {
for (const address of walletOption.addresses) {
balances.value[address] = formatNumber(await getEthersBalance(address))
}
})
await Promise.all(balancePromises)
}
watch(formattedWalletOptions, async () => {
await fetchBalances()
})
// const walletOptionsWithBalances = computed(() => {
// return formattedWalletOptions.value.map(walletOption => ({
// ...walletOption,
// addresses: walletOption.addresses.map(address => ({
// address,
// balance: balances.value[address]
// }))
// }))
// })
const toggleShineEffect = () => {
eigenIsToggled.value = !eigenIsToggled.value
isShining.value = eigenIsToggled.value
Expand Down Expand Up @@ -185,6 +211,7 @@ onMounted(async () => {
// currentUserStake.value = await getUserStake(selectedWalletAddress.value as string)
isShining.value = true
}
await fetchBalances()
})
const handleOutsideClickForWalletInput = (event: any) => {
Expand Down Expand Up @@ -414,12 +441,13 @@ function setStakeOrWithdraw(option: 'stake' | 'withdraw') {
hover:bg-grey_1 flex justify-between items-center text-grey_4 hover:text-grey_6"
@click="selectedWalletAddress = address, openSelectWalletInput = false, selectedStakingProvider = item.provider"
>
{{ convertString(address) }}
<vue-feather
<span>{{ convertString(address) }}</span>
<span>{{ balances[address] !== null ? `~${balances[address]} ETH` : 'Loading...' }}</span>
<!-- <vue-feather
type="chevron-right"
size="36"
class="icon w-[20px]"
/>
/> -->
</button>
</div>
</div>
Expand Down Expand Up @@ -524,7 +552,7 @@ function setStakeOrWithdraw(option: 'stake' | 'withdraw') {
<div
v-show="openSelectOperatorGroupInput"
id="selectOperatorGroupInputContainer"
class="absolute top-[110%] w-full bg-white rounded-[8px] border border-[#D0D5DD] px-[10px] py-[14px] max-h-[250px] overflow-auto"
class="absolute top-[110%] w-full bg-white rounded-[8px] border border-[#D0D5DD] px-[10px] py-[8px] max-h-[250px] overflow-auto"
>
<!-- TODO: Update this to only show if user has staked -->
<!-- <div
Expand Down
Loading

0 comments on commit b638385

Please sign in to comment.