From b7fd8e31b08dd708b0e533c9368d1b8b40ce6123 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Wed, 27 Nov 2024 12:16:28 -0800
Subject: [PATCH] devop: remove extra styles

---
 packages/extension/src/ui/action/App.vue      | 14 +--
 .../components/add-network-item.vue           | 99 +++++++++++++++++--
 .../add-network/views/add-network-list.vue    | 12 +--
 3 files changed, 101 insertions(+), 24 deletions(-)

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index b336b8fa3..c9b602b7f 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -80,7 +80,7 @@
     </div>
 
     <add-network
-      v-show="addNetworkShow"
+      v-if="addNetworkShow"
       @close:popup="addNetworkShow = !addNetworkShow"
       @update:active-networks="setActiveNetworks"
     />
@@ -201,13 +201,13 @@ const setActiveNetworks = async () => {
   });
   networks.value = [
     ...pinnedNetworks.value,
-    ...allNetworks.filter(
-      network => !pinnedNetworkNames.includes(network.name),
-    ),
-  ];
-  networks.value = [
-    ...networks.value.filter(network => !network.isTestNetwork),
+    ...allNetworks
+      .filter(network => !pinnedNetworkNames.includes(network.name))
+      .filter(network => !network.isTestNetwork),
   ];
+  // networks.value = [
+  // ...networks.value.filter(network => !network.isTestNetwork),
+  // ];
   // if (!pinnedNetworks.value.includes(currentNetwork.value)) {
   //   setNetwork(pinnedNetworks.value[0]);
   // }
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
index d93b2569c..10de4519a 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-item.vue
@@ -18,20 +18,29 @@
       >
         <close-icon />
       </a>
-      <tooltip
-        v-if="props.showTooltip && props.isActive"
-        text="At least one network must be selected"
-        is-top-right
+      <div
+        class="add-network__link__block"
+        @mouseover="isHovered = true"
+        @mouseleave="isHovered = false"
+        @click="setPinned"
       >
-        <Switch :is-checked="isActive" @update:check="check" />
-      </tooltip>
-      <Switch v-else :is-checked="isActive" @update:check="check" />
+        <p
+          :class="[
+            'add-network__link__block__pin',
+            {
+              'add-network__link__block__pin__active': pinIconIsActive,
+            },
+          ]"
+        >
+          <pin-icon :is-pinned="isActive" :is-active="pinIconIsActive" />
+        </p>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue';
+import { PropType, computed, ref } from 'vue';
 import Switch from '@action/components/switch/index.vue';
 // import InfoIcon from "@action/icons/common/info-icon.vue";
 import CloseIcon from '@action/icons/common/close-icon.vue';
@@ -39,11 +48,15 @@ import { NodeType } from '@/types/provider';
 import { CustomEvmNetwork } from '@/providers/ethereum/types/custom-evm-network';
 import TestNetworkIcon from '@action/icons/common/test-network-icon.vue';
 import Tooltip from '@/ui/action/components/tooltip/index.vue';
+import PinIcon from '@action/icons/actions/pin.vue';
 import customNetworkIcon from '@/ui/action/icons/common/custom-network-icon.vue';
 
+const isHovered = ref(false);
+
 const emit = defineEmits<{
   (e: 'networkToggled', name: string, isActive: boolean): void;
   (e: 'networkDeleted', chainId: string): void;
+  (e: 'update:pinNetwork', network: string, isPinned: boolean): void;
 }>();
 
 const props = defineProps({
@@ -63,6 +76,13 @@ const props = defineProps({
 const check = async (isChecked: boolean) => {
   emit('networkToggled', props.network.name, isChecked);
 };
+const pinIconIsActive = computed(() => {
+  return props.isActive || isHovered.value;
+});
+
+const setPinned = async () => {
+  emit('update:pinNetwork', props.network.name, !props.isActive);
+};
 
 const deleteNetwork = async () => {
   const chainId = (props.network as unknown as CustomEvmNetwork).chainID;
@@ -77,6 +97,69 @@ const deleteNetwork = async () => {
 @import '@action/styles/theme.less';
 
 .add-network {
+  &__link {
+    text-decoration: none;
+    display: flex;
+    justify-content: space-between;
+    justify-self: center;
+    align-items: center;
+    flex-direction: row;
+    width: 96%;
+    min-height: 40px !important;
+    max-height: 40px;
+    margin-bottom: 3px;
+    margin-top: 3px;
+    cursor: pointer;
+    position: relative;
+    border-radius: 10px;
+    padding-right: 8px;
+    &__block {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: row;
+      gap: 4px;
+      &__pin {
+        max-width: 32px;
+        max-height: 24px;
+        padding: 5px 8px 3px 8px;
+        background: transparent;
+        border-radius: 24px;
+        transition: @opacity-noBG-transition;
+        cursor: pointer;
+        &__active {
+          background: @primaryLight;
+        }
+      }
+    }
+
+    img {
+      width: 24px;
+      height: 24px;
+      margin: 0 8px;
+      border-radius: 50%;
+    }
+
+    span {
+      font-style: normal;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: @primaryLabel;
+    }
+
+    &.active {
+      background: @white09;
+      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
+      span {
+        font-weight: 500;
+      }
+      &:hover {
+        background: @white09;
+      }
+    }
+  }
   &__block {
     text-decoration: none;
     display: flex;
diff --git a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
index 42c31c478..1e02528d7 100644
--- a/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
+++ b/packages/extension/src/ui/action/views/add-network/views/add-network-list.vue
@@ -31,8 +31,8 @@
             :network="item"
             :is-active="item.isActive"
             :is-custom-network="true"
-            @network-toggled="onToggle"
             @network-deleted="onNetworkDeleted"
+            @update:pin-network="onToggle"
           />
         </div>
         <div v-else class="add-network__no-custom-networks">
@@ -48,8 +48,8 @@
           :is-custom-network="
             (item as unknown as CustomEvmNetwork).isCustomNetwork
           "
-          @network-toggled="onToggle"
           @network-deleted="onNetworkDeleted"
+          @update:pin-network="onToggle"
         />
       </div>
     </custom-scrollbar>
@@ -68,11 +68,7 @@ import NetworksState from '@/libs/networks-state';
 import CustomNetworksState from '@/libs/custom-networks-state';
 import scrollSettings from '@/libs/utils/scroll-settings';
 import { computed } from 'vue';
-import {
-  CustomEvmNetwork,
-  CustomEvmNetworkOptions,
-} from '@/providers/ethereum/types/custom-evm-network';
-import { BaseNetwork } from '@/types/base-network';
+import { CustomEvmNetwork } from '@/providers/ethereum/types/custom-evm-network';
 import PlusSmallIcon from '@/ui/action/icons/common/plus-small-icon.vue';
 
 interface NodeTypesWithActive extends NodeType {
@@ -88,8 +84,6 @@ const searchInput = ref('');
 const allTestNets = ref<Array<NodeTypesWithActive>>([]);
 const scrollProgress = ref(0);
 const manageNetworkScrollRef = ref<ComponentPublicInstance<HTMLElement>>();
-const showTestNets = ref(false);
-const hasMoreThanOneActiveNetwork = ref(false);
 const allCustomNetworks = ref<CustomEvmNetwork[]>([]);
 
 defineExpose({ manageNetworkScrollRef });