devop: ui fixes

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

@@ -82,7 +82,7 @@
     <add-network
       v-if="addNetworkShow"
       @close:popup="addNetworkShow = !addNetworkShow"
-      @update:active-networks="setActiveNetworks"
+      @update:pin-network="setIsPinnedNetwork"
     />
 
     <settings
@@ -201,9 +201,9 @@ const setActiveNetworks = async () => {
   });
   networks.value = [
     ...pinnedNetworks.value,
-    ...allNetworks
-      .filter(network => !pinnedNetworkNames.includes(network.name))
-      .filter(network => !network.isTestNetwork),
+    ...allNetworks.filter(
+      network => !pinnedNetworkNames.includes(network.name),
+    ),
   ];
   // networks.value = [
   // ...networks.value.filter(network => !network.isTestNetwork),

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

@@ -57,7 +57,7 @@ const setActiveCategory = (category: NetworksCategory) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 40px;
+  height: 32px;
   border-radius: 10px;
   padding: 4px;
   gap: 1px;
@@ -68,7 +68,7 @@ const setActiveCategory = (category: NetworksCategory) => {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 32px;
+    height: 24px;
     width: 100%;
     padding: 4px 8px;
     cursor: pointer;

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

@@ -1,12 +1,12 @@
 <template>
   <div>
     <!-- Sort -->
-    <div>
-      <app-menu-sort :sortBy="sortBy" @update:sort="updateSort" />
-    </div>
+
     <!-- Scrollable Networks  -->
-    <div :class="['app-menu', { 'has-bg': isScrolling }]">
-      <div v-if="!!networks" class="app-menu__scroll-area" ref="scrollDiv">
+    <div :class="['networks-menu', { 'has-bg': isScrolling }]">
+      <div v-if="!!networks" class="networks-menu__scroll-area" ref="scrollDiv">
+        <app-menu-sort :sortBy="sortBy" @update:sort="updateSort" />
+
         <draggable
           v-model="searchNetworks"
           item-key="name"
@@ -29,10 +29,10 @@
             />
           </template>
         </draggable>
-        <div v-if="showMessage" class="app-menu__scroll-area__message">
+        <div v-if="showMessage" class="networks-menu__scroll-area__message">
           <p
             v-if="!searchInput && activeCategory === NetworksCategory.Pinned"
-            class="app-menu__scroll-area__message__pin"
+            class="networks-menu__scroll-area__message__pin"
           >
             Press <pin-icon /> Pin button
           </p>
@@ -219,27 +219,28 @@ const getCanDrag = (network: BaseNetwork) => {
 <style lang="less">
 @import '@action/styles/theme.less';
 
-.app-menu {
+.networks-menu {
   overflow-y: auto;
   transition: background-color 0.5s ease-in-out;
   background-color: transparent;
   box-shadow: none;
   margin: 0px -12px 0px -12px;
-  padding: 1px 8px 1px 10px;
+  padding: 1px 10px 1px 10px;
   transition:
     background-color 0.4s ease-in-out,
     box-shadow 0.4s ease-in-out;
   &__scroll-area {
     position: static;
     margin: auto;
     width: 100%;
-    height: 420px;
+    height: 452px;
     display: flex;
     flex-direction: column;
     overflow-y: scroll;
     scroll-behavior: smooth;
     margin-right: -4px;
-    padding-right: 4px;
+    padding-right: 3px;
+    padding-left: 3px;
     padding-bottom: 3px;
     padding-top: 3px;
     &::-webkit-scrollbar {

packages/extension/src/ui/action/styles/color.less

@@ -39,11 +39,11 @@
 @networkGradientColor: linear-gradient(180deg, #c549ff 0%, #684cff 100%);
 
 @defaultGradient: radial-gradient(
-    100% 50% at 100% 50%,
-    rgba(250, 250, 250, 0.92) 0%,
+    137.35% 97% at 100% 50%,
+    rgba(250, 250, 250, 0.94) 0%,
+    rgba(250, 250, 250, 0.96) 28.91%,
     rgba(250, 250, 250, 0.98) 100%
   ),
   @networkGradientColor;
-
 @orange: #ff6d00;
 @orange01: rgba(255, 109, 0, 0.1);

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

@@ -4,7 +4,7 @@
       <img v-if="!props.isCustomNetwork" :src="network.icon" alt="" />
       <custom-network-icon v-else />
       <span>{{ network.name_long }} </span>
-      <test-network-icon v-if="network.isTestNetwork" />
+      <!-- <test-network-icon v-if="network.isTestNetwork" /> -->
     </div>
 
     <div class="add-network__action">
@@ -14,7 +14,7 @@
       <a
         v-show="isCustomNetwork"
         class="add-network__close"
-        @click="() => editNetwork(network)"
+        @click="() => editNetwork"
       >
         <edit-icon />
       </a>
@@ -28,20 +28,25 @@
           :class="[
             'add-network__link__block__pin',
             {
-              'add-network__link__block__pin__active': pinIconIsActive,
+              'add-network__link__block__pin__active': isHovered,
             },
           ]"
         >
-          <pin-icon :is-pinned="isActive" :is-active="pinIconIsActive" />
+          <pin-icon :is-pinned="isPinned" :is-active="true" />
         </p>
       </div>
+      <Switch
+        v-if="network.isTestNetwork"
+        :is-checked="isActive"
+        @update:check="addTestnet"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { PropType, computed, ref } from 'vue';
-// import Switch from '@action/components/switch/index.vue';
+import Switch from '@action/components/switch/index.vue';
 import editIcon from '@/ui/action/icons/actions/edit.vue';
 import { NodeType } from '@/types/provider';
 import { CustomEvmNetwork } from '@/providers/ethereum/types/custom-evm-network';
@@ -55,37 +60,55 @@ const emit = defineEmits<{
   (e: 'networkToggled', name: string, isActive: boolean): void;
   (e: 'networkDeleted', chainId: string): void;
   (e: 'update:pinNetwork', network: string, isPinned: boolean): void;
+  (e: 'testNetworkToggled', name: string, isActive: boolean): void;
 }>();
 
 const props = defineProps({
   network: {
-    type: Object as PropType<NodeType>,
+    type: Object as PropType<NodeType | CustomEvmNetwork>,
     default: () => {
       return {};
     },
+    required: true,
   },
   isActive: Boolean,
   isCustomNetwork: Boolean,
   showTooltip: {
     type: Boolean,
   },
+  isPinned: {
+    type: Boolean,
+    required: true,
+  },
 });
-
+/**
+ * Pin Network
+ */
 const pinIconIsActive = computed(() => {
-  return props.isActive || isHovered.value;
+  return props.isPinned || isHovered.value;
 });
 
 const setPinned = async () => {
-  emit('update:pinNetwork', props.network.name, !props.isActive);
+  emit('update:pinNetwork', props.network.name, !props.isPinned);
 };
 
+/**
+ * Edit Custom Network
+ */
 const editNetwork = async () => {
   const chainId = (props.network as unknown as CustomEvmNetwork).chainID;
 
   if (chainId !== undefined) {
     emit('networkDeleted', chainId);
   }
 };
+
+/**
+ * Add Testnet
+ */
+const addTestnet = async (value: boolean) => {
+  emit('testNetworkToggled', props.network.name, value);
+};
 </script>
 
 <style lang="less" scoped>
@@ -118,6 +141,7 @@ const editNetwork = async () => {
         max-width: 32px;
         max-height: 24px;
         padding: 5px 8px 3px 8px;
+        margin-right: 4px;
         background: transparent;
         border-radius: 24px;
         transition: @opacity-noBG-transition;
@@ -172,14 +196,14 @@ const editNetwork = async () => {
     flex-direction: row;
 
     img {
-      width: 16px;
-      height: 16px;
-      margin-right: 8px;
+      width: 24px;
+      height: 24px;
+      margin-right: 16px;
     }
     svg {
-      width: 16px;
-      height: 16px;
-      margin-right: 8px;
+      width: 24px;
+      height: 24px;
+      margin-right: 16px;
     }
 
     span {

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

@@ -63,7 +63,7 @@ onClickOutside(tooltip, () => {
       font-size: 0;
       border-radius: 8px;
       transition: background 300ms ease-in-out;
-
+      padding: 8px;
       &:hover {
         background: @black007;
       }

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

@@ -6,7 +6,7 @@
         v-if="isNetworkList"
         :close="closePopup"
         :to-custom="toCustomNetwork"
-        @update:active-networks="setActiveNetworks"
+        @update:pin-network="setPinnedNetwork"
       />
       <add-custom-network v-else :close="closePopup" :back="toNetworkList" />
     </div>
@@ -22,11 +22,11 @@ const isNetworkList = ref(true);
 
 const emit = defineEmits<{
   (e: 'close:popup'): void;
-  (e: 'update:activeNetworks'): void;
+  (e: 'update:pinNetwork', network: string, isPinned: boolean): void;
 }>();
 
-const setActiveNetworks = () => {
-  emit('update:activeNetworks');
+const setPinnedNetwork = (network: string, isPinned: boolean) => {
+  emit('update:pinNetwork', network, isPinned);
 };
 
 const closePopup = () => {
@@ -40,7 +40,7 @@ const toCustomNetwork = () => {
 
 const toNetworkList = () => {
   isNetworkList.value = true;
-  emit('update:activeNetworks');
+  // emit('update:pinnNetworks');
 };
 </script>