Merge pull request #720 from enkryptcom/fix/solana-staking-banner-fix

Fix Solana staking banner UI bugs

Author: kvhnuke

packages/extension/src/ui/action/components/app-menu/components/solana-staking-banner.vue

@@ -55,6 +55,7 @@ const openStakingLink = async () => {
   padding: 0 129px 0 12px;
   box-sizing: border-box;
   overflow: hidden;
+  z-index: 2;
 
   img {
     height: 128px;

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

@@ -159,7 +159,7 @@
 
     <!-- Banners -->
     <solana-staking-banner
-      v-if="isSolanaStackingBanner"
+      v-if="isSolanaStackingBanner && isExpanded"
       @close="closeSolanaStackingBanner"
     />
   </div>
@@ -268,9 +268,9 @@ onMounted(async () => {
   newNetworksWithTags.value.swap = newSwaps.filter(
     net => !usedNetworks.swap.includes(net),
   );
-  // if (await bannersState.showSolanaStakingBanner()) {
-  //   isSolanaStackingBanner.value = true;
-  // }
+  if (await bannersState.showSolanaStakingBanner()) {
+    isSolanaStackingBanner.value = true;
+  }
 });
 
 /** -------------------
@@ -552,12 +552,15 @@ const closeSolanaStackingBanner = () => {
 
 <style lang="less">
 @import '@action/styles/theme.less';
+
 .expand-menu {
   width: 340px;
 }
+
 .collapse-menu {
   width: 56px;
 }
+
 .app__menu {
   height: 600px;
   position: absolute;
@@ -572,28 +575,33 @@ const closeSolanaStackingBanner = () => {
   &-logo {
     margin-left: 8px;
   }
+
   &-updated {
     height: 24px;
     width: 90px;
     cursor: pointer;
     transition: 0.3s;
     filter: brightness(1);
+
     &:hover {
       filter: brightness(0.9);
     }
   }
+
   &-row {
     height: 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: row;
   }
+
   &__search-icon-container {
     margin-left: -4px;
     padding-top: 4px;
     padding-bottom: 4px;
   }
+
   &-add {
     display: flex;
     box-sizing: border-box;
@@ -696,27 +704,33 @@ const closeSolanaStackingBanner = () => {
       }
     }
   }
+
   .networks-menu {
     &-expand {
       padding: 1px 10px 1px 10px;
     }
+
     &-collapse {
       padding: 1px 6px 1px 4px;
     }
+
     transition: background-color 0.5s ease-in-out;
     background-color: transparent;
     box-shadow: none;
     margin: 0px -12px 0px -12px;
     transition:
       background-color 0.4s ease-in-out,
       box-shadow 0.4s ease-in-out;
+
     &__scroll-area {
       &-expand {
         height: 448px;
       }
+
       &-collapse {
         height: 496px;
       }
+
       position: static;
       margin: auto;
       width: 100%;
@@ -730,19 +744,23 @@ const closeSolanaStackingBanner = () => {
       padding-left: 3px;
       padding-bottom: 3px;
       padding-top: 3px;
+
       &::-webkit-scrollbar {
         width: 4px;
       }
+
       &::-webkit-scrollbar-thumb {
         background: rgba(0, 0, 0, 0.36);
         border-radius: 20px;
       }
+
       &__message {
         padding-top: 114px;
         height: 100%;
         max-width: 222px;
         margin-left: auto;
         margin-right: auto;
+
         p {
           color: @tertiaryLabel;
           font-size: 14px;
@@ -753,6 +771,7 @@ const closeSolanaStackingBanner = () => {
           margin-top: 0px;
           margin-bottom: 0px;
         }
+
         &__pin {
           display: flex;
           justify-content: center;
@@ -772,12 +791,14 @@ const closeSolanaStackingBanner = () => {
       }
     }
   }
+
   .has-bg {
     background-color: rgba(247, 239, 244, 1);
     box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.25);
     backdrop-filter: blur(40px);
   }
 }
+
 button {
   background: none;
   color: inherit;

packages/extension/src/ui/action/views/network-assets/components/network-assets-solana-staking-banner.vue

@@ -91,15 +91,15 @@ const openStakingLink = async () => {
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 1;
+    z-index: 0;
   }
 
   &__image {
     height: 110px;
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 2;
+    z-index: 1;
   }
 
   &__content {
@@ -112,7 +112,7 @@ const openStakingLink = async () => {
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 3;
+    z-index: 1;
 
     &-logo {
       margin: 15px 0 1px 0;

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

@@ -59,13 +59,9 @@
       />
     </div>
     <!-- prettier-ignore -->
-    <custom-evm-token
-      v-if="showAddCustomTokens"
-      :address="props.accountInfo.selectedAccount?.address!"
-      :network="(props.network as EvmNetwork)"
-      @update:token-added="addCustomAsset"
-      @update:close="toggleShowAddCustomTokens"
-    ></custom-evm-token>
+    <custom-evm-token v-if="showAddCustomTokens" :address="props.accountInfo.selectedAccount?.address!"
+      :network="(props.network as EvmNetwork)" @update:token-added="addCustomAsset"
+      @update:close="toggleShowAddCustomTokens"></custom-evm-token>
   </div>
 </template>