From 58b4cf8e285b21789a656bb4e0804214aaee8e0b Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Wed, 8 Nov 2023 12:52:00 +0100
Subject: [PATCH] FIX: fixes for release (#1549)

* FIX: replace plugin change modal

* FIX: relays icons

* FIX: replace

* FIX: custom network dropdown

* FIX: preset dropdown & validation

* FIX: arm monitoring check
---
 .../{Gnosis Agnostic.png => agnostic.png}     | Bin
 launcher/public/output.css                    |  82 ++++++++++++++----
 .../components/CustomPath.vue                 |  65 ++++++++------
 .../components/plugin/ConfigBody.vue          |   4 +-
 .../components/plugin/InstallationPath.vue    |   6 +-
 .../components/plugin/PluginRows.vue          |  10 ++-
 .../components/presets/PresetBody.vue         |  46 +++++++---
 launcher/src/store/nodeManage.js              |   4 +-
 8 files changed, 154 insertions(+), 63 deletions(-)
 rename launcher/public/img/icon/click-installation/{Gnosis Agnostic.png => agnostic.png} (100%)

diff --git a/launcher/public/img/icon/click-installation/Gnosis Agnostic.png b/launcher/public/img/icon/click-installation/agnostic.png
similarity index 100%
rename from launcher/public/img/icon/click-installation/Gnosis Agnostic.png
rename to launcher/public/img/icon/click-installation/agnostic.png
diff --git a/launcher/public/output.css b/launcher/public/output.css
index 54d210391..28d3b68d7 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -1848,6 +1848,54 @@ video {
           transform-origin: top right;
 }
 
+.-translate-y-2{
+  --tw-translate-y: -0.5rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-10{
+  --tw-translate-y: -2.5rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-10{
+  --tw-translate-y: 2.5rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-4{
+  --tw-translate-y: -1rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1{
+  --tw-translate-y: -0.25rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-0{
+  --tw-translate-y: -0px;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-0{
+  --tw-translate-y: 0px;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-4{
+  --tw-translate-y: 1rem;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .rotate-180{
   --tw-rotate: 180deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2898,6 +2946,11 @@ video {
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
 }
 
+.bg-teal-500{
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
+}
+
 .bg-teal-600{
   --tw-bg-opacity: 1;
   background-color: rgb(13 148 136 / var(--tw-bg-opacity));
@@ -3098,6 +3151,10 @@ video {
   padding-top: 0.5rem;
 }
 
+.pt-20{
+  padding-top: 5rem;
+}
+
 .pt-4{
   padding-top: 1rem;
 }
@@ -3110,10 +3167,6 @@ video {
   padding-top: 2rem;
 }
 
-.pt-20{
-  padding-top: 5rem;
-}
-
 .text-left{
   text-align: left;
 }
@@ -3621,6 +3674,15 @@ video {
           transition-duration: 150ms;
 }
 
+.transition-opacity{
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
+}
+
 .delay-100{
   -webkit-transition-delay: 100ms;
           transition-delay: 100ms;
@@ -3909,13 +3971,6 @@ html body {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:scale-90:hover{
-  --tw-scale-x: .9;
-  --tw-scale-y: .9;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .hover\:scale-95:hover{
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -3970,11 +4025,6 @@ html body {
   border-color: rgb(13 148 136 / var(--tw-border-opacity));
 }
 
-.hover\:bg-\[\#141517\]:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(20 21 23 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-\[\#224141\]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(34 65 65 / var(--tw-bg-opacity));
diff --git a/launcher/src/components/UI/custom-installation/components/CustomPath.vue b/launcher/src/components/UI/custom-installation/components/CustomPath.vue
index f69a852d3..425dbf328 100755
--- a/launcher/src/components/UI/custom-installation/components/CustomPath.vue
+++ b/launcher/src/components/UI/custom-installation/components/CustomPath.vue
@@ -9,20 +9,22 @@
         <div class="col-start-1 col-span-full row-start-1 row-span-2 flex justify-center items-center p-2">
           <span class="text-left text-gray-200 text-sm"> {{ $t("customInstallation.customInstallationText") }}</span>
         </div>
-        <div class="col-start-1 col-span-full row-start-3 row-span-full grid grid-cols-12 grid-rows-7">
+        <div
+          class="col-start-1 col-span-full row-start-3 row-span-full grid grid-cols-12 grid-rows-7 relative duration-500"
+        >
           <div
             class="col-start-3 col-span-8 row-start-1 row-span-1 bg-gray-200 rounded-md grid grid-cols-6 cursor-pointer"
             @click="networkListDropdown = !networkListDropdown"
           >
             <img
-              v-if="currentNetwork.icon"
+              v-if="displayItem?.icon"
               class="col-start-1 col-span-1 w-7 h-7 justify-self-center self-center"
-              :src="currentNetwork?.icon"
+              :src="displayItem?.icon"
               alt="Arrow icon"
             />
             <span
               class="col-start-2 col-end-6 justify-self-center self-center text-center text-gray-800 text-lg font-semibold"
-              >{{ currentNetwork?.name ? currentNetwork?.name : "Select Network" }}</span
+              >{{ displayItem?.name ? displayItem?.name : displayItem }}</span
             >
 
             <svg
@@ -36,29 +38,30 @@
               <path stroke-linecap="round" stroke-width="2" d="M5 10l7 7 7-7"></path>
             </svg>
           </div>
-          <Transition name="slide-fade">
-            <ul
-              v-if="networkListDropdown"
-              class="col-start-3 col-span-8 row-start-2 row-span-full transition-all max-h-[200px] duration-400 ease-in-out bg-gray-700 rounded-lg shadow-lg pb-1 w-full z-10 divide-y overflow-y-auto flex flex-col justify-start items-center mt-2"
+          <TransitionGroup
+            v-if="networkListDropdown"
+            tag="ul"
+            name="slide-fade"
+            class="col-start-3 col-span-8 row-start-2 row-span-full max-h-[200px] bg-gray-700 rounded-lg shadow-lg pb-1 w-full z-10 divide-y overflow-y-auto flex flex-col justify-start items-center mt-2"
+            :duration="500"
+          >
+            <li
+              v-for="item in networkList"
+              :key="item.name"
+              class="w-full min-h-[40px] max-h-[40px] grid grid-cols-6 px-4 hover:bg-blue-400"
+              @click="selectNetwork(item)"
             >
-              <li
-                v-for="item in networkList"
-                :key="item.name"
-                class="w-full min-h-[40px] max-h-[40px] grid grid-cols-6 px-4 hover:bg-blue-400"
-                @click="selectNetwork(item)"
+              <img
+                class="h-[30px] col-start-1 col-end-2 self-center justify-self-center"
+                :src="item.icon"
+                alt="service Icon"
+              />
+              <span
+                class="col-start-3 col-end-6 px-4 py-1 flex justify-start items-center outline-0 whitespace-nowrap cursor-pointer text-lg text-gray-200 font-semibold"
+                >{{ item.name }}</span
               >
-                <img
-                  class="h-[30px] col-start-1 col-end-2 self-center justify-self-center"
-                  :src="item.icon"
-                  alt="service Icon"
-                />
-                <span
-                  class="col-start-3 col-end-6 px-4 py-1 flex justify-start items-center outline-0 whitespace-nowrap cursor-pointer text-lg text-gray-200 font-semibold"
-                  >{{ item.name }}</span
-                >
-              </li>
-            </ul>
-          </Transition>
+            </li>
+          </TransitionGroup>
           <div
             class="w-full col-start-1 col-span-full row-start-3 row-span-full mx-auto flex flex-col justify-start items-center px-2"
           >
@@ -104,6 +107,7 @@ export default {
       selectedNetworkName: "",
       inputTitle: "Choose your installation path where Stereum will be installed",
       nextBtnDisabled: false,
+      displayItem: "Click to select a network",
     };
   },
 
@@ -121,12 +125,16 @@ export default {
     this.activeBtn();
     this.getInstallPath();
   },
+  mounted() {
+    this.displayItem = "Click to select a network";
+  },
 
   methods: {
     selectNetwork(network) {
       this.selectedNetworkIcon = network.icon;
       this.selectedNetworkName = network.name;
       this.currentNetwork = network;
+      this.displayItem = network;
       this.nextBtnDisabled = true;
       this.networkListDropdown = false;
     },
@@ -158,15 +166,18 @@ export default {
 
 <style scoped>
 .slide-fade-enter-active {
-  transition: all 0.2s ease-out;
+  transition-duration: 500;
+  opacity: 0;
 }
 
 .slide-fade-leave-active {
-  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+  transition-duration: 500;
+  opacity: 0;
 }
 
 .slide-fade-enter-from,
 .slide-fade-leave-to {
+  transition-duration: 500;
   transform: translateY(-20px);
 }
 .custom-layer_parent {
diff --git a/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue b/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
index 7cc897dc6..2ccdd50f1 100644
--- a/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
+++ b/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
@@ -97,7 +97,7 @@ const selectedPluginsValidation = () => {
 };
 const pluginChangeHandler = (plugin, item, idx) => {
   plugin.openReplaceModal = false;
-  const oldPluginIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.id === plugin.id);
+  const oldPluginIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.id === plugin?.id);
 
   if (oldPluginIndex !== -1) {
     clickStore.selectedPreset.includedPlugins.splice(oldPluginIndex, 1);
@@ -154,7 +154,7 @@ const pluginExChange = (el) => {
   if (el.category !== "service") {
     clickStore.selectedPreset.includedPlugins.filter((item) => {
       item.openReplaceModal = false;
-      if (item?.service === el.service) {
+      if (item.service === el.service) {
         checkPluginCategory(item);
       }
     });
diff --git a/launcher/src/components/UI/one-click/components/plugin/InstallationPath.vue b/launcher/src/components/UI/one-click/components/plugin/InstallationPath.vue
index 4cc85d966..2f85f7abe 100644
--- a/launcher/src/components/UI/one-click/components/plugin/InstallationPath.vue
+++ b/launcher/src/components/UI/one-click/components/plugin/InstallationPath.vue
@@ -29,7 +29,6 @@
             <input
               id="MarketingAccept"
               v-model="clickStore.installMonitoring"
-              a
               type="checkbox"
               name="marketing_accept"
               class="h-5 w-5 rounded-md border-gray-200 bg-white shadow-sm"
@@ -50,6 +49,11 @@
 
 <script setup>
 import { useClickInstall } from "@/store/clickInstallation";
+import { onMounted } from "vue";
 
 const clickStore = useClickInstall();
+
+onMounted(() => {
+  clickStore.installMonitoring = false;
+});
 </script>
diff --git a/launcher/src/components/UI/one-click/components/plugin/PluginRows.vue b/launcher/src/components/UI/one-click/components/plugin/PluginRows.vue
index b514f1e55..26986fe17 100644
--- a/launcher/src/components/UI/one-click/components/plugin/PluginRows.vue
+++ b/launcher/src/components/UI/one-click/components/plugin/PluginRows.vue
@@ -17,11 +17,13 @@
         <div
           v-for="(item, idx) in props.filteredPlugin"
           :key="idx"
-          class="col-span-1 w-9 h-9 flex justify-center items-center relative bg-[#191c21] rounded-md p-1 justify-self-center self-center hover:bg-[#141517] hover:scale-90 transition-all duration-200 ease-in-out cursor-pointer"
+          class="col-span-1 w-9 h-9 flex justify-center items-center relative rounded-md p-1 justify-self-center self-center hover:scale-105 transition-all duration-200 ease-in-out cursor-pointer active:scale-100"
+          :class="item.replacePanel ? 'bg-teal-500' : 'bg-[#191c21]'"
           @mouseover="runningTooltip(item)"
           @mouseleave="item.displayTooltip = false"
+          @click="changeHandler(plugin, item, idx)"
         >
-          <img :src="item.icon" alt="icon" class="w-5" @click="changeHandler(plugin, item, idx)" />
+          <img :src="item.icon" alt="icon" class="w-5" />
           <span
             class="absolute -bottom-8 -right-4 text-xs text-[#14171a] font-semibold bg-gray-300 rounded-md px-2 py-1 z-50"
             :class="item.displayTooltip ? 'block' : 'invisible'"
@@ -55,6 +57,10 @@ const runningTooltip = (el) => {
 };
 
 const changeHandler = (plugin, item, idx) => {
+  clickStore.selectedPreset.includedPlugins.forEach((i) => {
+    i.replacePanel = false;
+  });
+  item.replacePanel = true;
   emit("changeHandler", plugin, item, idx);
 };
 
diff --git a/launcher/src/components/UI/one-click/components/presets/PresetBody.vue b/launcher/src/components/UI/one-click/components/presets/PresetBody.vue
index cdc93c9af..76f22c071 100644
--- a/launcher/src/components/UI/one-click/components/presets/PresetBody.vue
+++ b/launcher/src/components/UI/one-click/components/presets/PresetBody.vue
@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 <template>
   <div class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto">
     <div
@@ -16,14 +16,14 @@ import { ref } from 'vue';
           @click="dropdownHandler"
         >
           <img
-            v-if="manageStore.currentNetwork.icon"
+            v-if="displayItem?.icon"
             class="col-start-1 col-span-1 w-7 h-7 justify-self-center self-center"
-            :src="manageStore.currentNetwork?.icon"
+            :src="displayItem?.icon"
             alt="Arrow icon"
           />
           <span
             class="col-start-2 col-end-6 justify-self-center self-center text-center text-gray-800 text-lg font-semibold"
-            >{{ manageStore.currentNetwork?.name ? manageStore.currentNetwork?.name : "Select Network" }}</span
+            >{{ displayItem?.name ? displayItem?.name : displayItem }}</span
           >
 
           <svg
@@ -69,16 +69,17 @@ import { ref } from 'vue';
             class="col-span-1 row-span-1 justify-self-center self-center hover:border hover:border-teal-500 rounded-md hover:shadow-lg hover:shadow-[#050505] transition-all duration-300 ease-in-out active:scale-100 active:shadow-none cursor-pointer"
             :class="{
               'opacity-30 pointer-events-none':
-                !manageStore.currentNetwork?.support?.includes(preset.name) || !manageStore.currentNetwork,
+                !manageStore.currentNetwork?.support?.includes(preset.name) || !displayItem?.name,
             }"
             @click="getPreset(preset)"
           >
             <img
               class="w-20"
-              :class="{
-                'scale-125 border-2 border-blue-400 rounded-md hover:scale-125 shadow-xl shadow-[#101010] transition-all duration-300 ease-in-out':
-                  preset.selected,
-              }"
+              :class="
+                preset.selected
+                  ? 'scale-125 border-2 border-blue-400 rounded-md hover:scale-125 shadow-xl shadow-[#101010] transition-all duration-300 ease-in-out'
+                  : ''
+              "
               :src="preset.icon"
               alt="Preset Icon"
             />
@@ -91,7 +92,7 @@ import { ref } from 'vue';
 <script setup>
 import { useNodeManage } from "@/store/nodeManage";
 import { useClickInstall } from "@/store/clickInstallation";
-import { ref } from "vue";
+import { ref, onMounted, watch } from "vue";
 
 const emit = defineEmits(["installPreset"]);
 //Store
@@ -99,8 +100,24 @@ const manageStore = useNodeManage();
 const clickStore = useClickInstall();
 
 //Refs
+let displayItem = ref(null);
 const openDropdown = ref(false);
 
+//watchers
+
+watch(displayItem, () => {
+  if (displayItem.value === "Click to select a network") {
+    clickStore.selectedPreset = null;
+  }
+});
+
+//Lifecycle
+
+onMounted(() => {
+  displayItem.value = "Click to select a network";
+  clickStore.presets.forEach((p) => (p.selected = false));
+});
+
 //Methods
 const dropdownHandler = () => {
   openDropdown.value = !openDropdown.value;
@@ -110,16 +127,19 @@ const getNetwork = (network) => {
   openDropdown.value = false;
   clickStore.presets.forEach((p) => (p.selected = false));
   manageStore.currentNetwork = network;
+  displayItem.value = network;
 };
 
 const getPreset = (preset) => {
-  preset.selected = true;
-  emit("installPreset", preset);
+  if (displayItem?.value.name) {
+    preset.selected = true;
+    emit("installPreset", preset);
+  }
 };
 </script>
 <style scoped>
 .slide-fade-enter-active {
-  transition: all 0.2s ease-out;
+  transition: all 0.4s ease-out;
 }
 
 .slide-fade-leave-active {
diff --git a/launcher/src/store/nodeManage.js b/launcher/src/store/nodeManage.js
index 1df17597e..60c233ad1 100755
--- a/launcher/src/store/nodeManage.js
+++ b/launcher/src/store/nodeManage.js
@@ -96,7 +96,7 @@ export const useNodeManage = defineStore("nodeManage", {
           freeCensorship: true,
         },
         {
-          icon: "/img/icon/click-installation/Gnosis Agnostic.png",
+          icon: "/img/icon/click-installation/agnostic.png",
           name: "Agnostic",
           mainnet:
             "https://0xa7ab7a996c8584251c8f925da3170bdfd6ebc75d50f5ddc4050a6fdc77f2a3b5fce2cc750d0865e05d7228af97d69561@agnostic-relay.net",
@@ -120,7 +120,7 @@ export const useNodeManage = defineStore("nodeManage", {
           freeCensorship: false,
         },
         {
-          icon: "/img/icon/click-installation/Relayoor.png",
+          icon: "/img/icon/click-installation/relayoor.png",
           name: "Relayooor's",
           mainnet:
             "https://0x84e78cb2ad883861c9eeeb7d1b22a8e02332637448f84144e245d20dff1eb97d7abdde96d4e7f80934e5554e11915c56@relayooor.wtf",