Skip to content

Commit

Permalink
FIX: op connection requirements
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaxTheGeeek
MaxTheGeeek committed Feb 18, 2025
1 parent 0577344 commit cf4468a
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 55 deletions.
29 changes: 2 additions & 27 deletions launcher/src/components/UI/edit-page/EditScreen.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@
<ConnectSetup
v-if="setupStore.isConnectSetupModalActive"
@close-window="closeSetupConnectingModal"
@confirm-action="confirmSetupConnection"
@confirm-action="confirmModifyingService"
/>

<!-- Start Setup Infos -->
Expand Down Expand Up @@ -407,6 +407,7 @@ const switchClientConfirm = (properties) => {
// Clients Modifying methods
const confirmModifyingService = (item) => {
console.log("op connection itemmmmm", item);
isModifyModalOpen.value = false;
if (item.client.service === "FlashbotsMevBoostService") {
changeMevboostConnection();
Expand Down Expand Up @@ -1055,32 +1056,6 @@ const backToLogin = async () => {
// Setups methods
const confirmSetupConnection = (services) => {
if (!Array.isArray(services)) {
console.error("Expected an array but got:", services);
return;
}
services.forEach((item) => {
if (!item.config || !item.config.dependencies) {
return;
}
console.log("confirmSetupConnection itemmmmm----", item);
manageStore.confirmChanges.push({
id: generateRandomId(),
content: "MODIFY",
contentIcon: "/img/icon/edit-node-icons/service-connected.png",
service: item, // Ensure this is correct
data: {
executionClients: item.config.dependencies.executionClients || [],
consensusClients: item.config.dependencies.consensusClients || [],
},
});
});
console.log("confirmSetupConnection changesss-----", manageStore.confirmChanges);
};
const editSetupsPrepration = () => {
setupStore.editSetups = setupStore.allSetups.map((setup) => {
if (setup.isActive) {
Expand Down
190 changes: 162 additions & 28 deletions launcher/src/components/UI/edit-page/components/modals/setups/ConnectSetup.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<custom-modal
:main-title="getSelectedSetup?.setupName"
sub-title="Select A Setup"
:main-title="getSelectedOpSetup?.setupName"
:sub-title="subTitle"
:client="selectedSetup"
:confirm-text="'Confirm'"
click-outside-text="Click outside to cancel"
Expand All @@ -10,38 +10,101 @@
@confirm-action="confirmAction"
>
<template #content>
<div class="flex flex-col items-center py-2 px-4 space-y-3 max-height-400px overflow-y-auto">
<template v-if="!selectedSetup">
<div
class="flex flex-col items-center py-2 px-4 space-y-3 max-height-400px overflow-y-auto"
>
<!-- Step 1: Select OP Node -->
<template v-if="!selectedOpNode">
<h3 class="text-lg font-semibold text-gray-300 text-center mb-2">
Select an OP Node
</h3>
<div
v-for="service in getOpNodeFromOpSetup"
:key="service?.config?.serviceID"
class="w-full p-2 border border-gray-700 rounded-md shadow-md transition cursor-pointer"
:class="
isOpNodeSelected(service)
? 'bg-teal-700'
: 'bg-neutral-900/90 hover:bg-gray-700'
"
>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img
v-if="service"
:src="service.icon"
alt="Setup Icon"
class="w-6 h-6 rounded-full mr-3"
/>
<div class="flex flex-col">
<span class="text-sm font-semibold text-gray-200 uppercase">
{{ service.service }}
</span>
<span class="text-xs text-gray-400">
ID: {{ service.config.serviceID }}
</span>
</div>
</div>
<input
type="checkbox"
class="h-5 w-5 accent-teal-500 cursor-pointer"
:checked="isOpNodeSelected(service)"
@change="toggleOpNodeSelection(service)"
/>
</div>
</div>
</template>

<!-- Step 2: Select Setup -->
<template v-else-if="!selectedSetup">
<div
v-for="setup in filteredSetups"
:key="setup.setupId"
class="w-full p-2 border border-gray-700 rounded-md shadow-md transition cursor-pointer"
:class="isSetupSelected(setup) ? 'bg-teal-700' : 'bg-neutral-900/90 hover:bg-gray-700'"
:class="
isSetupSelected(setup)
? 'bg-teal-700'
: 'bg-neutral-900/90 hover:bg-gray-700'
"
@click="selectSetup(setup)"
>
<div class="flex items-center mb-2">
<img v-if="setup.services.length > 0" :src="setup.services[0].icon" alt="Setup Icon" class="w-6 h-6 rounded-full mr-3" />
<img
v-if="setup.services.length > 0"
:src="setup.services[0].icon"
alt="Setup Icon"
class="w-6 h-6 rounded-full mr-3"
/>
<div class="flex flex-col">
<span class="text-sm font-semibold text-gray-200 uppercase">{{ setup.setupName }}</span>
<span class="text-sm font-semibold text-gray-200 uppercase">{{
setup.setupName
}}</span>
<span class="text-xs text-gray-400">Network: {{ setup.network }}</span>
</div>
</div>
</div>
<p v-if="filteredSetups.length === 0" class="text-gray-400 italic">No valid setups available.</p>
<p v-if="filteredSetups.length === 0" class="text-gray-400 italic">
No valid setups available.
</p>
</template>

<!-- Step 3: Select Services -->
<template v-else>
<div class="w-full flex flex-col space-y-2">
<h3 class="text-lg font-semibold text-gray-300 text-center">Select Services to Include</h3>

<div
v-for="service in selectedSetup.services"
:key="service.id"
class="flex items-center justify-between p-2 bg-neutral-800 rounded-md border border-gray-700"
>
<div class="flex items-center">
<img :src="service.icon" alt="Service Icon" class="w-6 h-6 mr-3 rounded" />
<span class="text-gray-300 text-sm font-semibold">{{ service.service }}</span>
<img
:src="service.icon"
alt="Service Icon"
class="w-6 h-6 mr-3 rounded"
/>
<span class="text-gray-300 text-sm font-semibold">{{
service.service
}}</span>
</div>

<input
Expand All @@ -52,7 +115,12 @@
/>
</div>

<p v-if="selectedServices.length === 0" class="text-red-500 text-xs text-center">Please select at least one service.</p>
<p
v-if="selectedServices.length === 0"
class="text-red-500 text-xs text-center"
>
Please select at least one service.
</p>
</div>
</template>
</div>
Expand All @@ -68,48 +136,94 @@ import CustomModal from "../../modals/CustomModal.vue";
const emit = defineEmits(["closeWindow", "confirmAction"]);
const setupStore = useSetups();
const selectedOpNode = ref(null);
const selectedSetup = ref(null);
const selectedServices = ref([]);
const getSelectedSetup = computed(() => setupStore.selectedOPSetup);
const buttonActive = computed(() => selectedServices.value.length === 2);
const getSelectedOpSetup = computed(() => setupStore.selectedOPSetup);
const buttonActive = computed(() => selectedServices.value.length === 3);
const subTitle = computed(() => {
if (!selectedOpNode.value) {
return "Select an OP Node";
} else if (!selectedSetup.value) {
return "Select a Setup";
} else {
return "Select Services";
}
});
const getOpNodeFromOpSetup = computed(() => {
return setupStore.selectedOPSetup?.services?.filter(
(service) =>
service.category === "consensus" && service.service === "OpNodeBeaconService"
);
});
const filteredSetups = computed(() => {
return setupStore.allSetups.filter((setup) => {
const setupNameLower = setup.setupName.toLowerCase();
if (setupNameLower === "commonservices" || setupNameLower.includes("op")) return false;
if (setupNameLower === "commonservices" || setupNameLower.includes("op"))
return false;
const hasExecution = setup.services.some((service) => service.category === "execution");
const hasConsensus = setup.services.some((service) => service.category === "consensus");
const hasExecution = setup.services.some(
(service) => service.category === "execution"
);
const hasConsensus = setup.services.some(
(service) => service.category === "consensus"
);
return hasExecution && hasConsensus;
});
});
const isOpNodeSelected = (node) => selectedOpNode.value?.id === node.id;
const toggleOpNodeSelection = (node) => {
if (selectedOpNode.value?.id === node.id) {
selectedOpNode.value = null;
} else {
selectedOpNode.value = node;
}
};
// const moveToSetupSelection = () => {
// if (selectedOpNode.value) {
// selectedServices.value = [selectedOpNode.value];
// }
// };
const isSetupSelected = (setup) => selectedSetup.value?.setupId === setup.setupId;
const selectSetup = (setup) => {
selectedSetup.value = setup;
selectedServices.value = [];
selectedServices.value = [selectedOpNode.value];
};
const isServiceSelected = (service) => selectedServices.value.includes(service);
const isServiceSelected = (service) =>
selectedServices.value.some((s) => s.id === service.id);
const handleServiceSelection = (service) => {
if (service.category === "execution") {
selectedServices.value = [service];
selectedServices.value = [selectedOpNode.value, service];
const linkedConsensus = selectedSetup.value.services.find(
(s) => s.category === "consensus" && s.config.dependencies.executionClients.some((ec) => ec.service === service.service)
(s) =>
s.category === "consensus" &&
s.config.dependencies.executionClients.some(
(ec) => ec.service === service.service
)
);
if (linkedConsensus) {
selectedServices.value.push(linkedConsensus);
}
} else if (service.category === "consensus") {
selectedServices.value = [service];
selectedServices.value = [selectedOpNode.value, service];
const linkedExecution = selectedSetup.value.services.find((s) => s.category === "execution");
const linkedExecution = selectedSetup.value.services.find(
(s) => s.category === "execution"
);
if (linkedExecution) {
selectedServices.value.push(linkedExecution);
Expand All @@ -118,14 +232,34 @@ const handleServiceSelection = (service) => {
};
const confirmAction = () => {
if (selectedServices.value.length !== 2) {
if (selectedServices.value.length === 0) {
return;
}
const opNode = selectedServices.value.find(
(service) => service.service === "OpNodeBeaconService"
);
const executionService = selectedServices.value.find(
(service) => service.category === "execution"
);
const consensusService = selectedServices.value.find(
(service) =>
service.category === "consensus" && service.service !== "OpNodeBeaconService"
);
if (!opNode || !executionService || !consensusService) {
return;
}
const rawSelectedServices = selectedServices.value.map((service) => JSON.parse(JSON.stringify(service)));
const restructuredData = {
client: opNode,
consensusClients: [executionService],
executionClients: [consensusService],
otherServices: [],
};
setupStore.isConnectSetupModalActive = false;
console.log("confirmAction", rawSelectedServices);
emit("confirmAction", rawSelectedServices);
emit("confirmAction", restructuredData);
};
const closeWindow = () => {
Expand Down

0 comments on commit cf4468a

Please sign in to comment.