Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enhancement/no dup addresses #456

Merged
merged 5 commits into from
Nov 2, 2023
Merged

Enhancement/no dup addresses #456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c657ae8
Add the balance to the staking component wallet address dropdown
ccali11 Nov 1, 2023
5148c12
Center the title of the form
ccali11 Nov 1, 2023
3bebd56
Form is now stacking and dropdowns are showing as expected
ccali11 Nov 1, 2023
f66eba0
Center and vertically space the form elements
ccali11 Nov 1, 2023
7006622
Add more fe and be measures to prevent adding duplicate accounts
ccali11 Nov 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/web/src/components/ConnectWalletsFlow.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading