Skip to content

Commit

Permalink
add sticky anchor links on the assets page (#1149)
Browse files Browse the repository at this point in the history
* add basic style

* add anchor links

* update condition

* Revert "add basic style"

This reverts commit 8b84aa3.

* clean up

* change links position and update dark theme style

* add condition for dapp owner

* refactoring

* clean up
  • Loading branch information
ayumitk authored Jan 29, 2024
1 parent a9f7da3 commit 906e40b
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 35 deletions.
15 changes: 0 additions & 15 deletions src/components/assets/Account.vue
Original file line number Diff line number Diff line change
Expand Up @@ -95,11 +95,6 @@
</div>
</div>

<template v-if="isH160">
<evm-native-token class="container" />
<zk-astr v-if="isZkEvm" class="container" />
</template>

<div v-if="multisig" class="row--details-signatory">
<div class="column-account-name">
<img v-if="iconWallet" width="24" :src="signatoryIconWallet" alt="wallet-icon" />
Expand All @@ -108,10 +103,6 @@
}}</span>
</div>
</div>

<div v-if="!isH160" class="container">
<native-asset-list />
</div>
</div>
</template>
<script lang="ts">
Expand All @@ -120,9 +111,6 @@ import { FrameSystemAccountInfo } from '@polkadot/types/lookup';
import copy from 'copy-to-clipboard';
import { ethers } from 'ethers';
import { $api } from 'src/boot/api';
import EvmNativeToken from 'src/components/assets/EvmNativeToken.vue';
import NativeAssetList from 'src/components/assets/NativeAssetList.vue';
import ZkAstr from 'src/components/assets/ZkAstr.vue';
import AuIcon from 'src/components/header/modals/account-unification/AuIcon.vue';
import { endpointKey, providerEndpoints } from 'src/config/chainEndpoints';
import { supportWalletObj } from 'src/config/wallets';
Expand All @@ -143,9 +131,6 @@ import { useI18n } from 'vue-i18n';
export default defineComponent({
components: {
NativeAssetList,
EvmNativeToken,
ZkAstr,
AuIcon,
},
props: {
Expand Down
99 changes: 99 additions & 0 deletions src/components/assets/AnchorLinks.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<template>
<div class="wrapper--anchor-links">
<div class="item" @click="scrollTo(nativeSection)">{{ nativeTokenSymbol }}</div>
<div class="item" @click="scrollTo(stakingSection)">{{ $t('common.staking') }}</div>
<div v-if="isDappOwner" class="item" @click="scrollTo(projectSection)">
{{ $t('assets.project') }}
</div>
<div class="item" @click="scrollTo(assetsSection)">{{ $t('assets.assets') }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useNetworkInfo } from 'src/hooks';
export default defineComponent({
components: {},
props: {
nativeSection: {
type: HTMLElement,
required: true,
},
stakingSection: {
type: HTMLElement,
required: true,
},
projectSection: {
type: HTMLElement,
required: true,
},
assetsSection: {
type: HTMLElement,
required: true,
},
isDappOwner: {
type: Boolean,
required: true,
},
},
setup() {
const { nativeTokenSymbol } = useNetworkInfo();
const scrollTo = (section: any) => {
section?.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
return { nativeTokenSymbol, scrollTo };
},
});
</script>
<style lang="scss" scoped>
@import 'src/css/quasar.variables.scss';
.wrapper--anchor-links {
background-color: $gray-1;
top: 80px;
position: sticky;
display: flex;
border-radius: 16px;
border: 1px solid $gray-2;
padding: 8px;
gap: 4px;
filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.1));
z-index: 2;
@media (min-width: $lg) {
top: 16px;
}
}
.item {
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
color: $navy-1;
font-size: 14px;
font-weight: 700;
padding: 16px;
flex-grow: 1;
text-align: center;
@media (min-width: $sm) {
font-size: 16px;
padding: 16px 24px;
flex-grow: inherit;
}
&:hover {
background-color: $astar-blue;
color: white;
}
}
.body--dark {
.wrapper--anchor-links {
background-color: $navy-3;
border-color: $navy-3;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.8);
}
.item {
color: $gray-2;
}
}
</style>
80 changes: 71 additions & 9 deletions src/components/assets/Assets.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,52 @@
:is-loading-xcm-assets-amount="isLoadingXcmAssetsAmount"
/>

<staking v-if="isDappStakingV3 && !isZkEvm" />
<your-project v-if="isDappStakingV3 && !isZkEvm" />
<anchor-links
v-if="isDappStakingV3 && !isZkEvm"
:native-section="nativeSection"
:staking-section="stakingSection"
:project-section="projectSection"
:assets-section="assetsSection"
:is-dapp-owner="isDappOwner"
/>

<div v-if="!isLoading">
<div v-if="isH160">
<evm-asset-list :tokens="evmAssets.assets" class="container" />
<template v-if="isH160">
<div ref="nativeSection">
<evm-native-token class="container" />
</div>
<zk-astr v-if="isZkEvm" class="container" />
</template>
<template v-else>
<div ref="nativeSection">
<native-asset-list class="container" />
</div>
</template>

<template v-if="isDappStakingV3 && !isZkEvm">
<div ref="stakingSection">
<staking />
</div>
</template>

<template v-if="isDappStakingV3 && !isZkEvm && isDappOwner">
<div ref="projectSection">
<your-project :own-dapps="ownDapps" />
</div>
<div v-else>
</template>

<div v-if="!isLoading" ref="assetsSection">
<template v-if="isH160">
<evm-asset-list :tokens="evmAssets.assets" class="container" />
</template>
<template v-else>
<!-- Memo: hide xvm panel because AA might replace it -->
<!-- <xvm-native-asset-list v-if="isSupportXvmTransfer" :xvm-assets="xvmAssets.xvmAssets" /> -->
<xcm-native-asset-list
v-if="isEnableXcm"
:xcm-assets="xcmAssets.assets"
class="container"
/>
</div>
</template>
</div>
</div>

Expand All @@ -47,12 +77,16 @@ import YourProject from 'src/components/assets/YourProject.vue';
import { providerEndpoints } from 'src/config/chainEndpoints';
import { LOCAL_STORAGE } from 'src/config/localStorage';
import { useAccount, useBalance, useDispatchGetDapps, useNetworkInfo } from 'src/hooks';
import { useDappStaking } from 'src/staking-v3';
import { useDappStaking, CombinedDappInfo, useDapps } from 'src/staking-v3';
import { useStore } from 'src/store';
import { EvmAssets, XcmAssets, XvmAssets } from 'src/store/assets/state';
import { Asset } from 'src/v2/models';
import { computed, defineComponent, onUnmounted, ref, watch, watchEffect } from 'vue';
import Staking from 'src/staking-v3/components/my-staking/Staking.vue';
import EvmNativeToken from 'src/components/assets/EvmNativeToken.vue';
import NativeAssetList from 'src/components/assets/NativeAssetList.vue';
import ZkAstr from 'src/components/assets/ZkAstr.vue';
import AnchorLinks from 'src/components/assets/AnchorLinks.vue';
export default defineComponent({
components: {
Expand All @@ -63,6 +97,10 @@ export default defineComponent({
XcmNativeAssetList,
YourProject,
Staking,
EvmNativeToken,
NativeAssetList,
ZkAstr,
AnchorLinks,
},
setup() {
const token = ref<Asset | null>(null);
Expand All @@ -74,7 +112,8 @@ export default defineComponent({
const { currentAccount } = useAccount();
const { accountData } = useBalance(currentAccount);
const { isMainnet, currentNetworkIdx, evmNetworkIdx, isZkEvm } = useNetworkInfo();
const { isMainnet, currentNetworkIdx, evmNetworkIdx, isZkEvm, nativeTokenSymbol } =
useNetworkInfo();
// Memo: load the dApps data in advance, so that users can access to dApp staging page smoothly
useDispatchGetDapps();
Expand Down Expand Up @@ -184,6 +223,22 @@ export default defineComponent({
return bg_img.light;
});
const { allDapps } = useDapps();
const ownDapps = computed<CombinedDappInfo[]>(() => {
if (!allDapps.value) return [];
return allDapps.value.filter((dapp) => dapp.chain.owner === currentAccount.value);
});
const isDappOwner = computed<Boolean>(() => {
if (ownDapps.value.length > 0) return true;
return false;
});
const nativeSection = ref<HTMLElement | null>(null);
const stakingSection = ref<HTMLElement | null>(null);
const projectSection = ref<HTMLElement | null>(null);
const assetsSection = ref<HTMLElement | null>(null);
return {
evmAssets,
isLoadingXcmAssetsAmount,
Expand All @@ -199,7 +254,14 @@ export default defineComponent({
isLoading,
bg,
isDappStakingV3,
nativeTokenSymbol,
isZkEvm,
ownDapps,
isDappOwner,
nativeSection,
stakingSection,
projectSection,
assetsSection,
};
},
});
Expand Down
20 changes: 10 additions & 10 deletions src/components/assets/YourProject.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,22 @@
</template>

<script lang="ts">
import { useAccount, useClaimAll } from 'src/hooks';
import { CombinedDappInfo, useDappStakingNavigation, useDapps } from 'src/staking-v3';
import { computed, defineComponent } from 'vue';
import { defineComponent } from 'vue';
import { useClaimAll } from 'src/hooks';
import { CombinedDappInfo, useDappStakingNavigation } from 'src/staking-v3';
export default defineComponent({
props: {
ownDapps: {
type: Array<CombinedDappInfo>,
required: true,
},
},
setup() {
const { currentAccount } = useAccount();
useClaimAll();
const { allDapps } = useDapps();
const { navigateOwnerPage } = useDappStakingNavigation();
const ownDapps = computed<CombinedDappInfo[]>(() => {
if (!allDapps.value) return [];
return allDapps.value.filter((dapp) => dapp.chain.owner === currentAccount.value);
});
return { ownDapps, navigateOwnerPage };
return { navigateOwnerPage };
},
});
</script>
Expand Down
2 changes: 1 addition & 1 deletion src/components/assets/styles/assets.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
background-color: white;
box-shadow: none;
border-radius: 16px;
padding: 16px 0 24px 0;
padding: 16px 0;
@media (min-width: $sm) {
padding-left: 24px;
padding-right: 24px;
Expand Down
1 change: 1 addition & 0 deletions src/i18n/en-US/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -478,6 +478,7 @@ export default {
astarNativeAccount: 'Astar Native Account',
astarEvmAccount: 'Astar EVM Account',
assets: 'Assets',
project: 'Project',
xcmAssetsShort: 'XCM Assets',
xcmAssets: 'XCM (Cross Chain Message) Assets',
xvmAssetsShort: 'XVM ERC-20 Assets',
Expand Down

0 comments on commit 906e40b

Please sign in to comment.