Skip to content

Commit

Permalink
Governance links section (#1402)
Browse files Browse the repository at this point in the history
* Governance links section

* Add Governance link to the sidebar

* Rename hook variables

* Add link to mobile nav

* Dark theme support

* Limit link text to 3 lines

* Total rewards claimed
  • Loading branch information
bobo-k2 authored Oct 26, 2024
1 parent d9e20bc commit db3f3e8
Show file tree
Hide file tree
Showing 11 changed files with 385 additions and 117 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
},
"dependencies": {
"@astar-network/astar-sdk-core": "^0.2.8",
"@astar-network/astar-ui": "^0.0.140",
"@astar-network/astar-ui": "^0.0.142",
"@astar-network/metamask-astar-adapter": "^0.5.4",
"@astar-network/metamask-astar-types": "^0.6.1",
"@ethersproject/bignumber": "^5.5.0",
Expand Down
3 changes: 3 additions & 0 deletions src/components/assets/Assets.vue
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@

<div class="column--links">
<voting-period-side-add />
<governance-links />
<side-ads />
<astar-domains />
</div>
Expand Down Expand Up @@ -100,6 +101,7 @@ import { useStore } from 'src/store';
import { EvmAssets, XcmAssets, XvmAssets } from 'src/store/assets/state';
import { Asset } from 'src/v2/models';
import VotingPeriodSideAdd from 'src/staking-v3/components/VotingPeriodSideAdd.vue';
import GovernanceLinks from '../governance/GovernanceLinks.vue';
export default defineComponent({
components: {
Expand All @@ -116,6 +118,7 @@ export default defineComponent({
AnchorLinks,
RegisterBanner,
VotingPeriodSideAdd,
GovernanceLinks,
},
setup() {
const token = ref<Asset | null>(null);
Expand Down
50 changes: 50 additions & 0 deletions src/components/governance/GovernanceLink.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<div class="link-wrapper">
<a :href="url" target="_blank" rel="noopener noreferrer">{{ title }}</a>
<div><astar-icon-arrow-right /></div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
index: {
type: Number,
required: true,
},
title: {
type: String,
required: true,
},
url: {
type: String,
required: true,
},
},
});
</script>

<style lang="scss" scoped>
@import 'src/css/quasar.variables.scss';
.link-wrapper {
display: flex;
color: $astar-blue;
align-items: center;
gap: 8px;
max-height: 80px;
}
a {
color: $astar-blue;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
max-height: 4.5em;
line-height: 1.5em;
}
</style>
75 changes: 75 additions & 0 deletions src/components/governance/GovernanceLinks.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<template>
<div v-if="isGovernanceEnabled" class="governance-links-container governance-container">
<div class="header"><astar-icon-governance />{{ $t('governance.newProposals') }}</div>
<hr class="separator" />
<div class="governance-container">
<div v-for="proposal in proposals" :key="proposal.index">
<governance-link :index="proposal.index" :title="proposal.title" :url="proposal.url" />
</div>
</div>
<div v-if="ongoingReferenda" class="governance-container">
<div class="header"><astar-icon-governance />{{ $t('governance.ongoingReferenda') }}</div>
<hr class="separator" />
<governance-link
:index="ongoingReferenda.index"
:title="ongoingReferenda.title"
:url="ongoingReferenda.url"
/>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useGovernance } from 'src/hooks';
import GovernanceLink from './GovernanceLink.vue';
export default defineComponent({
components: { GovernanceLink },
setup() {
const { isGovernanceEnabled, proposals, ongoingReferenda } = useGovernance();
return { isGovernanceEnabled, proposals, ongoingReferenda };
},
});
</script>

<style lang="scss" scoped>
@import 'src/css/quasar.variables.scss';
.governance-links-container {
background-color: $white;
border: 1px solid $gray-2;
border-radius: 16px;
padding: 16px 24px;
font-size: 15px;
font-weight: 500;
line-height: 18px;
color: $navy-1;
}
.governance-container {
display: flex;
flex-direction: column;
gap: 16px;
}
.separator {
border-top: 1px solid $gray-2;
}
.header {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0 0 4px;
}
.body--dark {
.governance-links-container {
border-color: $navy-3;
background-color: $navy-1;
color: $white;
}
}
</style>
1 change: 1 addition & 0 deletions src/components/header/mobile/MobileNav.vue
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
<span class="text--link">{{ $t('sidenavi.data') }}</span>
</div>
</router-link>
<a href="" target="_blank">{{ $t('sidenavi.governance') }}</a>
</nav>

<div class="gradient-bg">
Expand Down
49 changes: 21 additions & 28 deletions src/components/sidenav/SidebarDesktop.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,7 @@
:to="RoutePath.Assets"
:class="['link', $route.path.split('/')[2] === 'assets' ? 'activeLink' : '']"
>
<astar-icon-base
:class="['iconbase', isShiden ? 'shiden' : '']"
icon-color="currentColor"
icon-name="assets"
>
<astar-icon-base class="iconbase" icon-color="currentColor" icon-name="assets">
<astar-icon-assets />
</astar-icon-base>
<div class="row--item">
Expand All @@ -26,11 +22,7 @@
:to="RoutePath.Dashboard"
:class="['link', $route.path.split('/')[2] === 'dashboard' ? 'activeLink' : '']"
>
<astar-icon-base
:class="['iconbase', isShiden ? 'shiden' : '']"
icon-color="#0085FF"
icon-name="dashboard"
>
<astar-icon-base class="iconbase" icon-color="#0085FF" icon-name="dashboard">
<astar-icon-dashboard />
</astar-icon-base>
<div class="row--item">
Expand All @@ -45,11 +37,7 @@
data-testid="dapp-staking"
:class="['link', $route.path.split('/')[2] === 'dapp-staking' ? 'activeLink' : '']"
>
<astar-icon-base
:class="['iconbase', isShiden ? 'shiden' : '']"
icon-color="currentColor"
icon-name="staking"
>
<astar-icon-base class="iconbase" icon-color="currentColor" icon-name="staking">
<astar-icon-dapp-staking />
</astar-icon-base>
<div class="row--item">
Expand All @@ -62,11 +50,7 @@
:to="RoutePath.Bridge"
:class="['link', $route.path.split('/')[2] === 'bridge' ? 'activeLink' : '']"
>
<astar-icon-base
:class="['iconbase', isShiden ? 'shiden' : '']"
icon-color="currentColor"
icon-name="bridge"
>
<astar-icon-base class="iconbase" icon-color="currentColor" icon-name="bridge">
<astar-icon-bridge />
</astar-icon-base>
<div class="row--item">
Expand All @@ -76,23 +60,31 @@
</div>
<div>
<a :class="['link']" href="https://astar.network/community/ecosystem/" target="_blank">
<astar-icon-base :class="['icon-add', isShiden ? 'shiden' : '']" icon-name="ecosystem">
<astar-icon-base class="icon-add" icon-name="ecosystem">
<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 v-if="isGovernanceEnabled">
<a class="link" :href="governanceUrl" target="_blank">
<astar-icon-base class="icon-add" icon-name="governance" style="stroke-width: 0.5px">
<astar-icon-governance />
</astar-icon-base>
<div class="row--item row--item-ecosystem">
<astar-text type="H4">{{ $t('sidenavi.governance') }}</astar-text>
</div>
</a>
</div>
<div>
<a :class="['link']" :href="socialUrl.forum" target="_blank">
<astar-icon-base :class="['icon-add', isShiden ? 'shiden' : '']" icon-name="forum">
<astar-icon-base class="icon-add" icon-name="forum">
<astar-icon-forum />
</astar-icon-base>
<div class="row--item row--item-ecosystem">
<astar-text type="H4">{{ $t('sidenavi.forum') }}</astar-text>
<astar-icon-external-link />
</div>
</a>
</div>
Expand All @@ -108,8 +100,8 @@
<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { useStore } from 'src/store';
import { useNetworkInfo, useSidebar } from 'src/hooks';
import { providerEndpoints, endpointKey } from 'src/config/chainEndpoints';
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 { Path as RoutePath } from 'src/router/routes';
Expand All @@ -126,12 +118,12 @@ export default defineComponent({
setup() {
const { isOpen } = useSidebar();
const { isZkEvm, isZkyoto } = useNetworkInfo();
const { isGovernanceEnabled, governanceUrl } = useGovernance();
const store = useStore();
const currentNetworkIdx = computed<number>(() => store.getters['general/networkIdx']);
const network = ref(providerEndpoints[currentNetworkIdx.value]);
const isShiden = computed<boolean>(() => currentNetworkIdx.value === endpointKey.SHIDEN);
const router = useRouter();
const path = computed(() => router.currentRoute.value.path.split('/')[2]);
Expand All @@ -154,14 +146,15 @@ export default defineComponent({
return {
isOpen,
network,
isShiden,
getIndicatorClass,
isZkEvm,
router,
path,
RoutePath,
socialUrl,
isZkyoto,
isGovernanceEnabled,
governanceUrl,
};
},
});
Expand Down
1 change: 1 addition & 0 deletions src/hooks/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,4 @@ export * from './useTokenDistribution';
export * from './useTokenCirculation';
export * from './useInflation';
export * from './useBlockTime';
export * from './useGovernance';
Loading

0 comments on commit db3f3e8

Please sign in to comment.