Skip to content

Commit

Permalink
add basic style
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayumitk
ayumitk committed Jan 18, 2024
1 parent 86859e7 commit 8b84aa3
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 175 deletions.
31 changes: 8 additions & 23 deletions src/staking-v3/components/Owner.vue
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,14 @@
<template>
<div>
<div v-if="dappAddress && dapp" class="wrapper--owner">
<div class="row--your-dashboard">
<span>{{ $t('stakingV3.yourDashboard') }}</span>
</div>
<div class="container--dapp-hero">
<img :src="dapp.basic.iconUrl" alt="icon" class="img--dapp-icon" />
<span class="text--dapp-name">{{ dapp.basic.name }}</span> ({{ dapp.chain.state }})
<div class="row--your-dashboard-mobile">
<div class="row--owner-header">
<div class="row--your-dashboard">
<span>{{ $t('stakingV3.yourDashboard') }}</span>
</div>
</div>
<div class="row--statistics">
<kpi-card :title="$t('stakingV3.currentTier')">{{
getDappTier(dapp.chain.id) ?? '--'
}}</kpi-card>
<kpi-card :title="$t('stakingV3.numberOfStakers')">
{{ dapp.dappDetails?.stakersCount ?? '--' }}
</kpi-card>
<kpi-card :title="$t('stakingV3.totalEarned')"> -- </kpi-card>
<div class="container--dapp-hero">
<img :src="dapp.basic.iconUrl" alt="icon" class="img--dapp-icon" />
<span class="text--dapp-name">{{ dapp.basic.name }}</span> ({{ dapp.chain.state }})
</div>
</div>
<your-rewards
:total-rewards="totalRewards"
Expand All @@ -39,18 +29,15 @@ import { useRoute } from 'vue-router';
import { useDapps, useDappStakingNavigation, useDappStaking, RewardsPerPeriod } from '../hooks';
import { CombinedDappInfo } from '../logic';
import Edit from './Edit.vue';
import KpiCard from './KpiCard.vue';
import YourRewards from './YourRewards.vue';
import DappBackground from './dapp/DappBackground.vue';
export default defineComponent({
components: { KpiCard, YourRewards, Edit, DappBackground },
components: { YourRewards, Edit, DappBackground },
setup() {
const route = useRoute();
const { nativeTokenSymbol } = useNetworkInfo();
const { getDapp } = useDapps();
const { getDappTier, getDappRewards, getUnclaimedDappRewardsPerPeriod, claimDappRewards } =
useDappStaking();
const { getDappRewards, getUnclaimedDappRewardsPerPeriod, claimDappRewards } = useDappStaking();
const { navigateToHome } = useDappStakingNavigation();
const dappAddress = computed<string>(() => route.query.dapp as string);
Expand Down Expand Up @@ -89,10 +76,8 @@ export default defineComponent({
return {
dappAddress,
dapp,
nativeTokenSymbol,
totalRewards,
rewardsPerPeriod,
getDappTier,
claimRewards,
};
},
Expand Down
125 changes: 22 additions & 103 deletions src/staking-v3/components/YourRewards.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,54 +3,33 @@
<div class="row--title">
<span> {{ $t('stakingV3.yourRewards') }} </span>
</div>
<!-- Memo: Temporary UI -->
<div class="row--claim-temporary">
<div>
<span class="text--lg">Unclaimed Eras: </span>
<span class="text--lg">
<b>{{ unclaimedEras }}</b>
</span>
</div>
<div>
<span class="text--lg">Claimable Amount: </span>
<span class="text--lg">
<b><token-balance-native :balance="totalRewards.toString()" /></b>
</span>
</div>
<div>
<astar-button
:disabled="totalRewards <= BigInt(0)"
class="button--claim"
@click="claimRewards"
>
{{ $t('stakingV3.claim') }}
</astar-button>
</div>
</div>
<div v-if="rewardsPerPeriod.length > 0" class="container--rewards">
<div class="box--rewards">
<div v-for="reward in rewardsPerPeriod" :key="reward.period" class="box__row">
<div>
<span class="text--title">
{{ $t('stakingV3.period', { period: formatPeriod(reward.period) }) }}
</span>
</div>
<div class="row--claim-info">

<div class="container--rewards">
<div v-if="rewardsPerPeriod.length > 0">
<div class="rows--rewards">
<div v-for="reward in rewardsPerPeriod" :key="reward.period" class="box--rewards">
<div>
<span class="text--vivid">
{{ $t('stakingV3.availableToClaim') }}
<span class="text--title">
{{ $t('stakingV3.period', { period: formatPeriod(reward.period) }) }}
</span>
</div>
<div>
<div class="row--claim-info">
<div>
<span class="text--vivid">
{{ $t('stakingV3.eras', { era: reward.erasToReward }) }}
{{ $t('stakingV3.availableToClaim') }}
</span>
</div>
<div>
<span class="text--vivid-bond">
<token-balance-native :balance="reward.rewards.toString()" />
</span>
<div>
<span class="text--vivid">
{{ $t('stakingV3.eras', { era: reward.erasToReward }) }}
</span>
</div>
<div>
<span class="text--vivid-bond">
<token-balance-native :balance="reward.rewards.toString()" />
</span>
</div>
</div>
</div>
</div>
Expand All @@ -67,72 +46,12 @@
class="button--claim"
@click="claimRewards"
>
{{ $t('stakingV3.claim') }}
<span>{{ $t('stakingV3.claim') }}</span>
<span><token-balance-native :balance="totalRewards.toString()" /></span>
</astar-button>
</div>
</div>

<!-- Memo: mocked UI - waiting for indexer -->
<div v-if="false">
<div class="box--rewards">
<div class="box__row">
<div class="row--claim-info">
<div class="box__column">
<div>
<span class="text--title">
{{ $t('stakingV3.period', { period: '004' }) }}
</span>
</div>
<div>
<span class="text--info">
{{ $t('stakingV3.eras', { era: 123 }) }}
</span>
</div>
</div>
<div class="box__column">
<div class="column--status-claimed">
<span>
{{ $t('stakingV3.claimed') }}
</span>
</div>
<div>
<span class="text--info-bond">
<token-balance-native :balance="'1000'" />
</span>
</div>
</div>
</div>
</div>
<div class="box__row">
<div class="row--claim-info">
<div class="box__column">
<div>
<span class="text--title">
{{ $t('stakingV3.period', { period: '003' }) }}
</span>
</div>
<div>
<span class="text--info">
{{ $t('stakingV3.eras', { era: 123 }) }}
</span>
</div>
</div>
<div class="box__column">
<div class="column--status-claimed">
<span>
{{ $t('stakingV3.claimed') }}
</span>
</div>
<div>
<span class="text--info-bond">
<token-balance-native :balance="'1000'" />
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else>no</div>
</div>
</div>
</template>
Expand Down
61 changes: 28 additions & 33 deletions src/staking-v3/components/styles/owner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
.wrapper--owner {
display: flex;
flex-direction: column;
gap: 80px;
margin: 0 auto;
padding: 64px 16px 0 16px;
padding: 0 16px;
max-width: 1140px;
position: relative;
z-index: 1;
Expand All @@ -13,14 +14,37 @@
}
}

.row--owner-header {
padding-top: 52px;
display: flex;
flex-direction: column;
gap: 16px;
@media (min-width: $sm) {
padding-top: 36px;
}
}

.row--your-dashboard {
text-align: center;
font-weight: 800;
color: $navy-1;
font-size: 16px;
order: 2;
@media (min-width: $lg) {
text-align: left;
order: 1;
}
}

.container--dapp-hero {
display: flex;
flex-direction: column;
align-items: center;
order: 1;
@media (min-width: $lg) {
flex-direction: row;
column-gap: 16px;
margin-bottom: 100px;
order: 2;
}
}

Expand All @@ -39,37 +63,8 @@
font-weight: 800;
font-size: 32px;
color: $navy-1;
}

.row--your-dashboard {
display: none;
@media (min-width: $lg) {
display: block;
font-weight: 800;
color: $navy-1;
font-size: 16px;
margin-bottom: 16px;
}
}

.row--your-dashboard-mobile {
font-weight: 800;
font-size: 16px;
color: $navy-1;
margin-top: 16px;
margin-bottom: 84px;
@media (min-width: $lg) {
display: none;
}
}

.row--statistics {
display: flex;
justify-content: center;
column-gap: 4px;
margin-bottom: 80px;
@media (min-width: $lg) {
margin-bottom: 160px;
@media (min-width: $sm) {
font-size: 48px;
}
}

Expand Down
49 changes: 33 additions & 16 deletions src/staking-v3/components/styles/your-rewards.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,47 @@
@import 'src/css/quasar.variables.scss';

.wrapper--your-rewards {
margin-bottom: 80px;
}

.row--title {
font-weight: 800;
font-size: 32px;
color: $navy-1;
margin-bottom: 24px;
@media (min-width: $xl) {
margin-bottom: 44px;
margin-bottom: 40px;
}
}

.container--rewards {
display: flex;
flex-direction: column;
gap: 32px;
border: solid 1px $navy-1;
border-radius: 16px;
padding: 16px;
background-color: white;
@media (min-width: $sm) {
padding: 32px 24px;
}
}

.rows--rewards {
display: flex;
flex-direction: column;
gap: 8px;
}

.box--rewards {
border-radius: 16px;
background-color: $gray-1;
display: flex;
padding: 16px;
flex-direction: column;
gap: 24px;
}





.button--claim {
width: 100%;
max-width: 400px;
Expand Down Expand Up @@ -65,17 +93,6 @@
font-size: 16px;
}

.container--rewards {
display: flex;
flex-direction: column;
row-gap: 12px;
@media (min-width: $md) {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
}
}

.box--rewards {
padding: 16px 12px;
border: solid 1px $navy-1;
Expand Down

0 comments on commit 8b84aa3

Please sign in to comment.