Add ecosystem link & remove wasm banner (#739)

* add ecosystem link

* clean up

* rollback ui-lib version

Author: sirius651

src/components/dapp-staking/StakingTop.vue

@@ -3,7 +3,6 @@
     <div class="container--main">
       <top-metric />
       <register />
-      <wasm-ad-area />
       <dynamic-ads-area />
 
       <div class="divider" />
@@ -38,7 +37,6 @@ import OnChainData from './my-staking/OnChainData.vue';
 import TopMetric from './my-staking/TopMetric.vue';
 import AdsArea from './my-staking/AdsArea.vue';
 import DynamicAdsArea from './my-staking/DynamicAdsArea.vue';
-import WasmAdArea from './my-staking/WasmAdArea.vue';
 import { generateMeta } from 'src/config/metadata';
 import { Path } from 'src/router';
 
@@ -51,7 +49,6 @@ export default defineComponent({
     Register,
     DynamicAdsArea,
     OnChainData,
-    WasmAdArea,
   },
   setup() {
     useMeta(generateMeta(Path.Discover));

src/components/sidenav/IconEcosystem.vue

@@ -0,0 +1,9 @@
+<!-- @TODO: Will be removed after astar-ui library updated-->
+<template>
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M9.00281 17.7096C7.79838 17.7096 6.66626 17.481 5.60647 17.0239C4.54667 16.5668 3.62479 15.9465 2.84084 15.1629C2.05688 14.3793 1.43624 13.4578 0.978934 12.3984C0.521624 11.3391 0.292969 10.2073 0.292969 9.00282C0.292969 7.79838 0.521524 6.66626 0.978636 5.60647C1.43575 4.54667 2.0561 3.62479 2.8397 2.84084C3.62331 2.05688 4.54478 1.43624 5.60411 0.978933C6.66343 0.521624 7.79531 0.292969 8.99974 0.292969C10.2042 0.292969 11.3363 0.521524 12.3961 0.978635C13.4559 1.43575 14.3778 2.0561 15.1617 2.8397C15.9457 3.62331 16.5663 4.54478 17.0236 5.60411C17.4809 6.66343 17.7096 7.79531 17.7096 8.99974C17.7096 10.2042 17.481 11.3363 17.0239 12.3961C16.5668 13.4559 15.9465 14.3778 15.1629 15.1617C14.3793 15.9457 13.4578 16.5663 12.3984 17.0236C11.3391 17.4809 10.2073 17.7096 9.00281 17.7096ZM8.08461 16.2888V14.5013C7.58045 14.5013 7.14885 14.3218 6.78982 13.9627C6.43079 13.6037 6.25128 13.1721 6.25128 12.6679V11.7513L1.85128 7.35128C1.80545 7.62628 1.76343 7.90128 1.72524 8.17628C1.68704 8.45128 1.66795 8.72628 1.66795 9.00128C1.66795 10.8499 2.27524 12.4693 3.48982 13.8596C4.7044 15.2499 6.236 16.0596 8.08461 16.2888ZM14.4096 13.9513C14.7152 13.6152 14.9902 13.2523 15.2346 12.8627C15.4791 12.4732 15.6815 12.0683 15.8419 11.6482C16.0023 11.228 16.1245 10.7964 16.2086 10.3534C16.2926 9.91031 16.3346 9.45961 16.3346 9.00128C16.3346 7.49963 15.9198 6.12822 15.0901 4.88705C14.2604 3.6459 13.1474 2.75032 11.7513 2.20032V2.58461C11.7513 3.08878 11.5718 3.52038 11.2127 3.8794C10.8537 4.23843 10.4221 4.41795 9.91795 4.41795H8.08461V6.25128C8.08461 6.511 7.99677 6.72871 7.82107 6.9044C7.64538 7.0801 7.42767 7.16795 7.16795 7.16795H5.33461V9.00128H10.8346C11.0943 9.00128 11.312 9.08913 11.4877 9.26482C11.6634 9.44052 11.7513 9.65822 11.7513 9.91795V12.6679H12.6679C13.0652 12.6679 13.4242 12.7864 13.745 13.0232C14.0659 13.26 14.2874 13.5693 14.4096 13.9513Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

src/components/sidenav/SidebarDesktop.vue

@@ -57,6 +57,39 @@
         </router-link>
         <div v-else class="dummy-row" />
       </div>
+      <!-- MEMO: need to add later
+        <div>
+        <router-link
+          to="#"
+          :class="['link', $route.path.split('/')[1] === 'astar-nft' ? 'activeLink' : '']"
+        >
+          <astar-icon-base
+            :class="['iconAdd', isShiden ? 'shiden' : '']"
+            stroke="currentColor"
+            icon-name="staking"
+          >
+            <astar-icon-side-nft />
+          </astar-icon-base>
+          <div class="row--item">
+            <astar-text type="H4">NFT</astar-text>
+          </div>
+        </router-link>
+      </div> -->
+      <div>
+        <a :class="['link']" href="https://astar.network/community/ecosystem/" target="_blank">
+          <astar-icon-base
+            :class="['icon-add', isShiden ? 'shiden' : '']"
+            stroke="currentColor"
+            icon-name="staking"
+          >
+            <icon-ecosystem />
+          </astar-icon-base>
+          <div class="row--item row--item-ecosystem">
+            <astar-text type="H4">{{ $t('common.ecosystem') }}</astar-text>
+            <astar-icon-external-link />
+          </div>
+        </a>
+      </div>
       <div class="menu__indicator" :class="getIndicatorClass(path)" />
     </nav>
 
@@ -83,6 +116,7 @@ import Logo from '../common/Logo.vue';
 import ConnectionTrouble from 'src/components/common/ConnectionTrouble.vue';
 import { useRouter } from 'vue-router';
 import { Path as RoutePath } from 'src/router/routes';
+import IconEcosystem from './IconEcosystem.vue';
 
 export default defineComponent({
   components: {
@@ -91,6 +125,7 @@ export default defineComponent({
     LocaleChanger,
     Logo,
     ConnectionTrouble,
+    IconEcosystem,
   },
   setup() {
     const { isOpen } = useSidebar();

src/components/sidenav/SidebarMobile.vue

@@ -30,6 +30,13 @@
             </span>
           </div>
         </router-link>
+        <a :class="['link']" href="https://astar.network/community/ecosystem/" target="_blank">
+          <div class="column--item">
+            <span class="text--link">
+              {{ $t('common.ecosystem') }}
+            </span>
+          </div>
+        </a>
         <div class="tabs__indicator" :class="getIndicatorClass(path)" />
       </nav>
 

src/components/sidenav/styles/sidebar-desktop.scss

@@ -15,6 +15,14 @@
   height: 20px;
 }
 
+.icon-add {
+  color: $astar-blue-dark;
+  width: 20px;
+  height: 20px;
+  margin-top: 5px;
+  margin-left: 1px;
+}
+
 .sidebar {
   width: 224px;
   height: 100%;
@@ -34,6 +42,11 @@
     flex: 1 1 0%;
     margin-left: rem(12);
   }
+  .row--item-ecosystem {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
 }
 
 .link {
@@ -78,15 +91,15 @@
 }
 
 .menu__assets {
-  margin-top: -139px;
+  margin-top: -184px;
 }
 
 .menu__dashboard {
-  margin-top: -92px;
+  margin-top: -138px;
 }
 
 .menu__staking {
-  margin-top: -46px;
+  margin-top: -92px;
 }
 
 .dummy-row {

src/i18n/en-US/index.ts

@@ -81,6 +81,7 @@ export default {
     dappStaking: 'dApp Staking',
     staking: 'Staking',
     contract: 'Contract',
+    ecosystem: 'Ecosystem',
     plasmLockdrop: 'Plasm Lockdrop',
     closeSidebar: 'Close sidebar',
     twitter: 'Twitter',