Feature/replace lfgm (#1428)

* update link * add surge gif * update mobile * update desktop * fix mobile style * add tooltip * update image * fix merge errors
AstarNetwork · Dec 18, 2024 · f79c109 · f79c109
1 parent a97cd19
commit f79c109
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 29 deletions.
diff --git a/src/assets/img/surge_token.webp b/src/assets/img/surge_token.webp
diff --git a/src/components/header/mobile/MobileNav.vue b/src/components/header/mobile/MobileNav.vue
@@ -55,6 +55,10 @@
             $t('sidenavi.governance')
           }}</a>
         </nav>
+        <a class="surge-mobile" :href="surgeUrl" target="_blank">
+          <img :src="require('src/assets/img/surge_token.webp')" alt="Surge" />
+        </a>
+
         <div class="gradient-bg">
           <astar-domains />
           <!-- <blog-posts /> -->
@@ -90,18 +94,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
-import { useRouter } from 'vue-router';
-import { useBreakpoints, useNetworkInfo, useGovernance } from 'src/hooks';
+import { providerEndpoints } from 'src/config/chainEndpoints';
+import { useBreakpoints, useGovernance, useNetworkInfo } from 'src/hooks';
+import { socialUrl, surgeUrl } from 'src/links';
 import { Path as RoutePath } from 'src/router/routes';
-import { socialUrl } from 'src/links';
 import { useStore } from 'src/store';
-import { providerEndpoints } from 'src/config/chainEndpoints';
+import { computed, defineComponent, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import AstarDomains from './AstarDomains.vue';
 import CommunityLinks from './CommunityLinks.vue';
+import LightDarkMode from './LightDarkMode.vue';
 // import BlogPosts from './BlogPosts.vue';
 import LocaleChanger from './LocaleChanger.vue';
-import LightDarkMode from './LightDarkMode.vue';
 
 export default defineComponent({
   components: { AstarDomains, CommunityLinks, LocaleChanger, LightDarkMode },
@@ -125,6 +129,7 @@ export default defineComponent({
       RoutePath,
       network,
       isZkyoto,
+      surgeUrl,
       socialUrl,
       isGovernanceEnabled,
       governanceUrl,
@@ -215,14 +220,13 @@ export default defineComponent({
   padding: 0 16px;
 }
 
-.lfgm-mobile {
+.surge-mobile {
   display: flex;
   justify-content: center;
   margin: 40px 0px;
   img {
     width: 100%;
-    height: 150px;
-    background: $navy-3;
+    max-width: 150px;
   }
 }
 </style>
diff --git a/src/components/sidenav/SidebarDesktop.vue b/src/components/sidenav/SidebarDesktop.vue
@@ -88,6 +88,14 @@
           </div>
         </a>
       </div>
+      <div>
+        <a class="surge" :href="surgeUrl" target="_blank">
+          <img :src="require('src/assets/img/surge_token.webp')" alt="Surge" />
+        </a>
+        <q-tooltip>
+          <span class="text--tooltip">{{ $t('joinSurge') }}</span>
+        </q-tooltip>
+      </div>
       <div class="menu__indicator" :class="getIndicatorClass(path)" />
     </nav>
 
@@ -98,16 +106,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
-import { useStore } from 'src/store';
-import { useGovernance, useNetworkInfo, useSidebar } from 'src/hooks';
 import { providerEndpoints } from 'src/config/chainEndpoints';
-import Logo from '../common/Logo.vue';
-import { useRouter } from 'vue-router';
+import { useGovernance, useNetworkInfo, useSidebar } from 'src/hooks';
+import { socialUrl, surgeUrl } from 'src/links';
 import { Path as RoutePath } from 'src/router/routes';
-import IconEcosystem from './components/IconEcosystem.vue';
+import { useStore } from 'src/store';
+import { computed, defineComponent, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import Logo from '../common/Logo.vue';
 import SidebarOptionDesktop from './SidebarOptionDesktop.vue';
-import { socialUrl } from 'src/links';
+import IconEcosystem from './components/IconEcosystem.vue';
 
 export default defineComponent({
   components: {
@@ -129,7 +137,7 @@ export default defineComponent({
     const path = computed(() => router.currentRoute.value.path.split('/')[2]);
 
     const getIndicatorClass = (path: string): string => {
-      let indicatorClassObject: Record<string, string> = {
+      const indicatorClassObject: Record<string, string> = {
         dashboard: 'menu__dashboard',
         assets: 'menu__assets',
         'dapp-staking': 'menu__staking',
@@ -155,6 +163,7 @@ export default defineComponent({
       RoutePath,
       socialUrl,
       isZkyoto,
+      surgeUrl,
       isGovernanceEnabled,
       governanceUrl,
     };

diff --git a/src/components/sidenav/styles/sidebar-desktop.scss b/src/components/sidenav/styles/sidebar-desktop.scss
@@ -97,34 +97,32 @@
 }
 
 .menu__assets {
-  margin-top: calc(-276px);
-
+  margin-top: calc(-276px - 158px);
   &.governance_activated {
-    margin-top: calc(-276px - 46px);
+    margin-top: calc(-276px - 158px - 46px);
+
   }
 }
 
 .menu__dashboard {
-  margin-top: calc(-230px);
-
+  margin-top: calc(-230px - 158px);
   &.governance_activated {
-    margin-top: calc(-230px - 46px);
+    margin-top: calc(-230px - 158px - 46px);
   }
 }
 
 .menu__staking {
-  margin-top: calc(-184px);
-
+  margin-top: calc(-184px - 158px);
   &.governance_activated {
-    margin-top: calc(-184px - 46px);
+    margin-top: calc(-184px - 158px - 46px);
   }
 }
 
 .menu__bridge {
-  margin-top: calc(-138px);
+  margin-top: calc(-138px - 158px);
 
   &.governance_activated {
-    margin-top: calc(-138px - 46px);
+    margin-top: calc(-138px - 158px - 46px);
   }
 }
 
@@ -150,3 +148,22 @@
     background: transparent;
   }
 }
+
+.surge {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 8px;
+  color: #fff;
+  position: relative;
+  transition: all 0.3s ease 0s;
+  img {
+    margin: 25px 0;
+    width: 100px;
+    height: 100px;
+  }
+}
+
+.surge:hover {
+  background: black;
+}
+
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
@@ -44,6 +44,7 @@ export default {
   help: 'Help',
   share: 'Share',
   multisig: 'Multisig',
+  joinSurge: 'Join Astar Surge',
   sort: {
     sortBy: 'Sort by',
     amountHightToLow: 'Amount: High to Low',

diff --git a/src/links/index.ts b/src/links/index.ts
@@ -1,6 +1,6 @@
 import { endpointKey, providerEndpoints } from 'src/config/chainEndpoints';
 import { blockExplorerUrls } from 'src/config/web3';
-import Web3 from 'web3';
+import type Web3 from 'web3';
 
 export const docsUrl = {
   topPage: 'https://docs.astar.network',
@@ -53,6 +53,8 @@ export const polkadotJsUrl = {
   },
 };
 
+export const surgeUrl = 'https://surge.sakefinance.com/';
+
 export const ccipExplorerUrl = 'https://ccip.chain.link';
 
 export const getSubscanExtrinsic = ({