Skip to content

Commit

Permalink
Feature/replace lfgm (#1427)
Browse files Browse the repository at this point in the history
* update link

* add surge gif

* update mobile

* update desktop

* fix mobile style

* add tooltip

* update image
  • Loading branch information
codespool authored Dec 18, 2024
1 parent 6f69b15 commit 4529735
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 40 deletions.
Binary file added src/assets/img/surge_token.webp
Binary file not shown.
23 changes: 11 additions & 12 deletions src/components/header/mobile/MobileNav.vue
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@
$t('sidenavi.governance')
}}</a>
</nav>
<a class="lfgm-mobile" :href="lfgmUrl" target="_blank">
<img :src="require('src/assets/img/lfgm.svg')" alt="LFGM" />
<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 />
Expand Down Expand Up @@ -93,18 +93,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 { lfgmUrl, 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 },
Expand All @@ -128,7 +128,7 @@ export default defineComponent({
RoutePath,
network,
isZkyoto,
lfgmUrl,
surgeUrl,
socialUrl,
isGovernanceEnabled,
governanceUrl,
Expand Down Expand Up @@ -219,14 +219,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>
29 changes: 17 additions & 12 deletions src/components/sidenav/SidebarDesktop.vue
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,14 @@
</div>
</a>
</div>
<a class="lfgm" :href="lfgmUrl" target="_blank">
<img :src="require('src/assets/img/lfgm.svg')" alt="LFGM" />
</a>
<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>

Expand All @@ -101,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, lfgmUrl } from 'src/links';
import IconEcosystem from './components/IconEcosystem.vue';
export default defineComponent({
components: {
Expand All @@ -132,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',
Expand All @@ -158,7 +163,7 @@ export default defineComponent({
RoutePath,
socialUrl,
isZkyoto,
lfgmUrl,
surgeUrl,
isGovernanceEnabled,
governanceUrl,
};
Expand Down
32 changes: 18 additions & 14 deletions src/components/sidenav/styles/sidebar-desktop.scss
Original file line number Diff line number Diff line change
Expand Up @@ -98,34 +98,34 @@

// adding -120px to the margin-top to adjust the position because of the lgfm logo
.menu__assets {
margin-top: calc(-276px - 120px);
margin-top: calc(-276px - 158px);

&.governance_activated {
margin-top: calc(-276px - 120px - 46px);
margin-top: calc(-276px - 158px - 46px);
}
}

.menu__dashboard {
margin-top: calc(-230px - 120px);
margin-top: calc(-230px - 158px);

&.governance_activated {
margin-top: calc(-230px - 120px - 46px);
margin-top: calc(-230px - 158px - 46px);
}
}

.menu__staking {
margin-top: calc(-184px - 120px);
margin-top: calc(-184px - 158px);

&.governance_activated {
margin-top: calc(-184px - 120px - 46px);
margin-top: calc(-184px - 158px - 46px);
}
}

.menu__bridge {
margin-top: calc(-138px - 120px);
margin-top: calc(-138px - 158px);

&.governance_activated {
margin-top: calc(-138px - 120px - 46px);
margin-top: calc(-138px - 158px - 46px);
}
}

Expand All @@ -152,16 +152,20 @@
}
}

.lfgm {
.surge {
display: flex;
align-items: center;
width: 224px;
height: 112px;
justify-content: center;
margin-bottom: 8px;
color: #fff;
position: relative;
transition: all 0.3s ease 0s;
img {
margin: 25px 0;
width: 100px;
height: 100px;
}
}
.lfgm:hover {
background: $navy-3;

.surge:hover {
background: black;
}
1 change: 1 addition & 0 deletions src/i18n/en-US/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions src/links/index.ts
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -53,7 +53,7 @@ export const polkadotJsUrl = {
},
};

export const lfgmUrl = 'https://lfgm.astar.network';
export const surgeUrl = 'https://surge.sakefinance.com/';

export const ccipExplorerUrl = 'https://ccip.chain.link';

Expand Down

0 comments on commit 4529735

Please sign in to comment.