devop: update main list on enable/disbale test network, ui fixes

packages/extension/src/ui/action/App.vue

@@ -83,8 +83,8 @@
       v-if="addNetworkShow"
       @close:popup="addNetworkShow = !addNetworkShow"
       @update:pin-network="setIsPinnedNetwork"
+      @update:testNetworkToggle="setIsToggledTestNetwork"
     />
-
     <settings
       v-if="settingsShow"
       @close:popup="settingsShow = !settingsShow"
@@ -546,6 +546,10 @@ const setIsPinnedNetwork = async (network: string, isPinned: boolean) => {
   await networksState.setNetworkStatus(network, isPinned);
   await setActiveNetworks();
 };
+
+const setIsToggledTestNetwork = async () => {
+  await setActiveNetworks();
+};
 </script>
 
 <style lang="less">

packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue

@@ -348,8 +348,9 @@ watch(
       display: none;
     }
   }
-  .test-network-icon {
-    height: 14px;
-  }
+}
+.test-network-icon {
+  height: 14px;
+  width: 14px;
 }
 </style>

packages/extension/src/ui/action/icons/actions/pin.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- NOT PINNED -->
   <svg
-    v-if="!isPinned"
+    v-if="!isPinned && isActive"
     width="16"
     height="16"
     viewBox="0 0 16 16"
@@ -21,6 +21,27 @@
       mask="url(#path-1-inside-1_6475_5454)"
     />
   </svg>
+  <svg
+    v-else-if="!isPinned && !isActive"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask id="path-1-inside-1_6475_5454" fill="white">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.0686 1C4.55167 1 4.07911 1.31861 3.84793 1.823C3.45611 2.67787 3.68078 3.71609 4.38168 4.28955L4.73116 4.57549C5.05778 4.84273 5.25 5.26212 5.25 5.70752C5.25 6.18064 5.03325 6.62245 4.6724 6.88489L4.37866 7.09851C3.20498 7.9521 2.5 9.38912 2.5 10.928C2.5 11.52 2.93998 12 3.48271 12H6.83317L7.41764 15.5068C7.46507 15.7914 7.71131 16 7.99984 16C8.28836 16 8.5346 15.7914 8.58204 15.5068L9.1665 12H12.5173C13.06 12 13.5 11.52 13.5 10.928C13.5 9.38912 12.795 7.9521 11.6213 7.09852L11.3276 6.88489C10.9667 6.62245 10.75 6.18063 10.75 5.70751C10.75 5.26212 10.9422 4.84273 11.2688 4.57549L11.6183 4.28955C12.3192 3.71609 12.5439 2.67787 12.1521 1.823C11.9209 1.31861 11.4483 1 10.9314 1H5.0686Z"
+      />
+    </mask>
+    <path
+      d="M3.84793 1.823L5.30243 2.48965L3.84793 1.823ZM4.38168 4.28955L3.3685 5.52789H3.3685L4.38168 4.28955ZM4.73116 4.57549L5.74434 3.33716L5.74434 3.33716L4.73116 4.57549ZM4.6724 6.88489L3.73132 5.59091H3.73132L4.6724 6.88489ZM4.37866 7.09851L3.43759 5.80454L3.43759 5.80454L4.37866 7.09851ZM6.83317 12L8.4114 11.737L8.18857 10.4H6.83317V12ZM7.41764 15.5068L8.99587 15.2438V15.2438L7.41764 15.5068ZM8.58204 15.5068L10.1603 15.7698V15.7698L8.58204 15.5068ZM9.1665 12V10.4H7.8111L7.58827 11.737L9.1665 12ZM11.6213 7.09852L10.6803 8.39249L10.6803 8.39249L11.6213 7.09852ZM11.3276 6.88489L10.3865 8.17887L11.3276 6.88489ZM11.2688 4.57549L10.2557 3.33716L10.2557 3.33716L11.2688 4.57549ZM11.6183 4.28955L12.6315 5.52789L12.6315 5.52789L11.6183 4.28955ZM12.1521 1.823L10.6976 2.48965L10.6976 2.48965L12.1521 1.823ZM5.30243 2.48965C5.29734 2.50077 5.23379 2.6 5.0686 2.6V-0.6C3.86955 -0.6 2.86088 0.136458 2.39342 1.15635L5.30243 2.48965ZM5.39486 3.05122C5.28717 2.96311 5.19731 2.71901 5.30243 2.48965L2.39342 1.15635C1.71492 2.63673 2.07439 4.46907 3.3685 5.52789L5.39486 3.05122ZM5.74434 3.33716L5.39486 3.05122L3.3685 5.52789L3.71798 5.81382L5.74434 3.33716ZM6.85 5.70752C6.85 4.81279 6.46539 3.92711 5.74434 3.33716L3.71798 5.81382C3.68269 5.78495 3.66585 5.75726 3.65856 5.74134C3.65126 5.72542 3.65 5.71417 3.65 5.70752H6.85ZM5.61347 8.17887C6.41677 7.59466 6.85 6.65631 6.85 5.70752H3.65C3.65 5.70064 3.65138 5.68822 3.66007 5.67051C3.66877 5.65276 3.68914 5.62159 3.73132 5.59091L5.61347 8.17887ZM5.31974 8.39249L5.61347 8.17887L3.73132 5.59091L3.43759 5.80454L5.31974 8.39249ZM4.1 10.928C4.1 9.8648 4.58849 8.92431 5.31974 8.39249L3.43759 5.80454C1.82146 6.9799 0.9 8.91345 0.9 10.928H4.1ZM3.48271 10.4C3.70066 10.4 3.87079 10.4996 3.96728 10.6048C4.06164 10.7078 4.1 10.8262 4.1 10.928H0.9C0.9 12.2698 1.92812 13.6 3.48271 13.6V10.4ZM6.83317 10.4H3.48271V13.6H6.83317V10.4ZM8.99587 15.2438L8.4114 11.737L5.25494 12.263L5.83941 15.7698L8.99587 15.2438ZM7.99984 14.4C8.49345 14.4 8.91472 14.7569 8.99587 15.2438L5.83941 15.7698C6.01542 16.8259 6.92917 17.6 7.99984 17.6V14.4ZM7.00381 15.2438C7.08496 14.7569 7.50622 14.4 7.99984 14.4V17.6C9.07051 17.6 9.98425 16.8259 10.1603 15.7698L7.00381 15.2438ZM7.58827 11.737L7.00381 15.2438L10.1603 15.7698L10.7447 12.263L7.58827 11.737ZM12.5173 10.4H9.1665V13.6H12.5173V10.4ZM11.9 10.928C11.9 10.8262 11.9384 10.7078 12.0327 10.6048C12.1292 10.4996 12.2993 10.4 12.5173 10.4V13.6C14.0719 13.6 15.1 12.2698 15.1 10.928H11.9ZM10.6803 8.39249C11.4115 8.92431 11.9 9.8648 11.9 10.928H15.1C15.1 8.91344 14.1785 6.9799 12.5624 5.80454L10.6803 8.39249ZM10.3865 8.17887L10.6803 8.39249L12.5624 5.80454L12.2687 5.59091L10.3865 8.17887ZM9.15 5.70751C9.15 6.65631 9.58324 7.59466 10.3865 8.17887L12.2687 5.59091C12.3109 5.62159 12.3312 5.65276 12.3399 5.67051C12.3486 5.68822 12.35 5.70064 12.35 5.70751H9.15ZM10.2557 3.33716C9.53461 3.92711 9.15 4.81279 9.15 5.70751H12.35C12.35 5.71417 12.3487 5.72542 12.3414 5.74134C12.3341 5.75726 12.3173 5.78495 12.282 5.81382L10.2557 3.33716ZM10.6051 3.05122L10.2557 3.33716L12.282 5.81382L12.6315 5.52789L10.6051 3.05122ZM10.6976 2.48965C10.8027 2.71901 10.7128 2.96311 10.6051 3.05122L12.6315 5.52789C13.9256 4.46907 14.2851 2.63673 13.6066 1.15635L10.6976 2.48965ZM10.9314 2.6C10.7662 2.6 10.7027 2.50077 10.6976 2.48965L13.6066 1.15636C13.1391 0.136457 12.1304 -0.6 10.9314 -0.6V2.6ZM5.0686 2.6H10.9314V-0.6H5.0686V2.6Z"
+      fill="#5F6368"
+      mask="url(#path-1-inside-1_6475_5454)"
+    />
+  </svg>
   <!-- PINNED and ACTIVE -->
   <svg
     v-else-if="isPinned && isActive"

packages/extension/src/ui/action/views/add-network/components/add-network-item.vue

@@ -32,7 +32,7 @@
             },
           ]"
         >
-          <pin-icon :is-pinned="isPinned" :is-active="true" />
+          <pin-icon :is-pinned="isPinned" :is-active="pinIconIsActive" />
         </p>
       </div>
       <Switch

packages/extension/src/ui/action/views/add-network/index.vue

@@ -7,6 +7,7 @@
         :close="closePopup"
         :to-custom="toCustomNetwork"
         @update:pin-network="setPinnedNetwork"
+        @update:test-network-toggle="emit('update:testNetworkToggle')"
       />
       <add-custom-network v-else :close="closePopup" :back="toNetworkList" />
     </div>
@@ -23,6 +24,7 @@ const isNetworkList = ref(true);
 const emit = defineEmits<{
   (e: 'close:popup'): void;
   (e: 'update:pinNetwork', network: string, isPinned: boolean): void;
+  (e: 'update:testNetworkToggle'): void;
 }>();
 
 const setPinnedNetwork = (network: string, isPinned: boolean) => {

packages/extension/src/ui/action/views/add-network/views/add-network-list.vue

@@ -75,6 +75,7 @@ import { NetworkNames } from '@enkryptcom/types';
 
 const emit = defineEmits<{
   (e: 'update:pinNetwork', network: string, isPinned: boolean): void;
+  (e: 'update:testNetworkToggle'): void;
 }>();
 
 const networksState = new NetworksState();
@@ -157,9 +158,16 @@ const onTogglePin = async (networkName: string, isActive: boolean) => {
   }
 };
 
-const onTestnetToggle = async (networkName: string, isActive: boolean) => {
+const onTestnetToggle = async (
+  networkName: NetworkNames,
+  isActive: boolean,
+) => {
   await networksState.setTestnetStatus(networkName, isActive);
   await setNetworkLists();
+  if (!isActive && getIsPinned(networkName)) {
+    onTogglePin(networkName, false);
+  }
+  emit('update:testNetworkToggle');
 };
 
 const onNetworkDeleted = async (chainId: string) => {