From caaaf7236c5a8c89c5fa69624174480606be6fed Mon Sep 17 00:00:00 2001 From: Ayumi Takahashi Date: Wed, 20 Dec 2023 09:39:55 -0800 Subject: [PATCH] Add Shibuya Scope Style (#1078) * add feature dApp area style * add dapps list and data list area style * add ad area style * add Leaderboard area style * move staking section to assets page * update the your projects section style on the assets page * move css files * add staking section style on the assets page * add vote and stake page style * adjust tvl text size * add owner page style * update astar ui * remove dark theme style from the vote page * update vote page style * remove dark theme from dapp staking pages * add project page style * clean up * add Leaderboard style * update dapp style * update lang * add input search * update * update leaderboard style * add category style * add tier paging * Small fix for loading a dApp * Changed a way how to subscribe and handle protocol state * clean up * update dapps search logic * remove operator from filter function --------- Co-authored-by: Bobo --- package.json | 2 +- src/App.vue | 40 ++-- src/components/assets/Assets.vue | 9 +- src/components/assets/Rewards.vue | 26 ++- src/components/assets/YourProject.vue | 3 +- .../assets/styles/your-project.scss | 55 ++--- .../common/styles/back-to-page.scss | 6 + src/i18n/en-US/index.ts | 7 + src/staking-v3/assets/vote_bg_light.webp | Bin 0 -> 177116 bytes src/staking-v3/components/Amount.vue | 6 + src/staking-v3/components/Dapps.vue | 88 +++++--- src/staking-v3/components/DiscoverV3.vue | 46 ++-- src/staking-v3/components/DynamicAdsArea.vue | 26 --- src/staking-v3/components/FeatureDapp.vue | 20 +- src/staking-v3/components/Owner.vue | 1 + src/staking-v3/components/ToggleButtons.vue | 17 +- src/staking-v3/components/Vote.vue | 199 ++++++++++-------- .../dapp-selector/ModalSelectDapp.vue | 14 +- src/staking-v3/components/dapp/Builders.vue | 5 +- src/staking-v3/components/dapp/DappAvatar.vue | 63 +++--- src/staking-v3/components/dapp/DappImages.vue | 2 +- .../components/dapp/DappStatistics.vue | 84 +++----- .../components/dapp/DappStatsCharts.vue | 4 +- src/staking-v3/components/dapp/DappV3.vue | 39 +++- .../components/dapp/ProjectDetails.vue | 17 +- .../components/dapp/ProjectOverview.vue | 5 +- .../components/dapp/styles/builders.scss | 57 ++--- .../components/dapp/styles/dapp-avatar.scss | 114 ++++++---- .../components/dapp/styles/dapp-images.scss | 7 - .../dapp/styles/dapp-statistics.scss | 87 ++------ .../dapp/styles/dapp-stats-charts.scss | 2 + .../components/dapp/styles/dapp.scss | 115 ++++++++-- .../dapp/styles/project-details.scss | 137 ++++-------- .../dapp/styles/project-overview.scss | 23 +- src/staking-v3/components/data/DataCard.vue | 23 +- src/staking-v3/components/data/DataList.vue | 12 +- .../components/leaderboard/DappItem.vue | 48 +++++ .../components/leaderboard/Leaderboard.vue | 89 ++++++-- .../leaderboard/LeaderboardVote.vue | 74 +++---- .../components/leaderboard/Tier.vue | 135 +++++++----- .../components/leaderboard/noEntry.vue | 37 ++++ .../leaderboard/styles/leaderboard.scss | 45 ++++ .../components/leaderboard/styles/tier.scss | 100 +++++++++ .../components/my-staking/MyDapps.vue | 70 +++--- .../components/my-staking/MyStaking.vue | 60 ++++-- .../components/my-staking/MyStakingCard.vue | 15 +- .../components/my-staking/Staking.vue | 87 +++++--- .../components/my-staking/TabComponent.vue | 14 +- .../components/my-staking/Unbonding.vue | 94 ++++++--- .../components/styles/ads-area.scss | 46 ++-- src/staking-v3/components/styles/dapps.scss | 91 +++++--- .../components/styles/discover-v3.scss | 58 ++++- src/staking-v3/components/styles/edit.scss | 24 +-- .../components/styles/feature-dapp.scss | 127 +++++++---- src/staking-v3/components/styles/owner.scss | 25 ++- src/staking-v3/components/styles/vote.scss | 79 ++++--- .../components/styles/your-rewards.scss | 20 +- yarn.lock | 8 +- 58 files changed, 1639 insertions(+), 1068 deletions(-) create mode 100644 src/staking-v3/assets/vote_bg_light.webp create mode 100644 src/staking-v3/components/leaderboard/DappItem.vue create mode 100644 src/staking-v3/components/leaderboard/noEntry.vue create mode 100644 src/staking-v3/components/leaderboard/styles/leaderboard.scss create mode 100644 src/staking-v3/components/leaderboard/styles/tier.scss diff --git a/package.json b/package.json index 5ca954acf..64dd4baa2 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ }, "dependencies": { "@astar-network/astar-sdk-core": "^0.2.8", - "@astar-network/astar-ui": "^0.0.136", + "@astar-network/astar-ui": "^0.0.137", "@astar-network/metamask-astar-adapter": "^0.5.4", "@astar-network/metamask-astar-types": "^0.6.1", "@ethersproject/bignumber": "^5.5.0", diff --git a/src/App.vue b/src/App.vue index 747a899aa..66bb86ad3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -40,7 +40,7 @@ // https://polkadot.js.org/docs/api/FAQ/#since-upgrading-to-the-7x-series-typescript-augmentation-is-missing import 'reflect-metadata'; import '@polkadot/api-augment'; -import { defineComponent, computed, ref, watch } from 'vue'; +import { defineComponent, computed, ref, watch, onMounted } from 'vue'; import DashboardLayout from 'layouts/DashboardLayout.vue'; import { useStore } from 'src/store'; import ModalLoading from 'components/common/ModalLoading.vue'; @@ -143,17 +143,21 @@ export default defineComponent({ }); // **** dApp staking v3 - if (isDappStakingV3.value) { - // dApp staking v3 data changed subscriptions. - container - .get(Symbols.DappStakingRepositoryV3) - .startProtocolStateSubscription(); - - eventAggregator.subscribe(ProtocolStateChangedMessage.name, async (m) => { - const message = m as ProtocolStateChangedMessage; - store.commit('stakingV3/setProtocolState', message.state, { root: true }); + // dApp staking v3 data changed subscriptions. + onMounted(() => { + if (isDappStakingV3.value) { + container + .get(Symbols.DappStakingRepositoryV3) + .startProtocolStateSubscription(); + } + }); + + eventAggregator.subscribe(ProtocolStateChangedMessage.name, async (m) => { + const message = m as ProtocolStateChangedMessage; + console.log('protocol state', message.state); - console.log('protocol state', message.state); + if (message.state) { + store.commit('stakingV3/setProtocolState', message.state, { root: true }); await fetchDappsToStore(); await Promise.all([ getAllRewards(), @@ -163,14 +167,14 @@ export default defineComponent({ fetchStakerInfoToStore(), fetchEraLengthsToStore(), ]); - }); + } + }); - eventAggregator.subscribe(AccountLedgerChangedMessage.name, (m) => { - const message = m as AccountLedgerChangedMessage; - store.commit('stakingV3/setLedger', message.ledger, { root: true }); - console.log('ledger', message.ledger); - }); - } + eventAggregator.subscribe(AccountLedgerChangedMessage.name, (m) => { + const message = m as AccountLedgerChangedMessage; + store.commit('stakingV3/setLedger', message.ledger, { root: true }); + console.log('ledger', message.ledger); + }); // **** end dApp staking v3 // Handle wallet change so we can inject proper wallet diff --git a/src/components/assets/Assets.vue b/src/components/assets/Assets.vue index 673e34f38..0d49f0503 100644 --- a/src/components/assets/Assets.vue +++ b/src/components/assets/Assets.vue @@ -10,9 +10,12 @@ :is-loading-xcm-assets-amount="isLoadingXcmAssetsAmount" /> -
+ +
@@ -50,6 +53,7 @@ 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'; export default defineComponent({ components: { @@ -59,6 +63,7 @@ export default defineComponent({ EvmAssetList, XcmNativeAssetList, YourProject, + Staking, }, setup() { const token = ref(null); diff --git a/src/components/assets/Rewards.vue b/src/components/assets/Rewards.vue index 040146596..c4e59dfe3 100644 --- a/src/components/assets/Rewards.vue +++ b/src/components/assets/Rewards.vue @@ -1,21 +1,19 @@ diff --git a/src/staking-v3/components/DiscoverV3.vue b/src/staking-v3/components/DiscoverV3.vue index a91d4b129..c64a3994c 100644 --- a/src/staking-v3/components/DiscoverV3.vue +++ b/src/staking-v3/components/DiscoverV3.vue @@ -3,23 +3,37 @@ - + - -
- - - - - + +
+
+ + +
+
+ + + + + +
+
- + +
@@ -30,7 +44,7 @@ import FeatureDapp from './FeatureDapp.vue'; import Dapps from './Dapps.vue'; import Leaderboard from './leaderboard/Leaderboard.vue'; import LeaderboardVote from './leaderboard/LeaderboardVote.vue'; -import Staking from './my-staking/Staking.vue'; +// import Staking from './my-staking/Staking.vue'; import DataList from './data/DataList.vue'; import DynamicAdsArea from './DynamicAdsArea.vue'; import ToggleButtons from './ToggleButtons.vue'; @@ -42,7 +56,7 @@ export default defineComponent({ Dapps, Leaderboard, LeaderboardVote, - Staking, + // Staking, DataList, DynamicAdsArea, ToggleButtons, @@ -54,7 +68,9 @@ export default defineComponent({ displayIndex.value = index; }; - return { displayIndex, toggleDapps }; + const searchText = ref(''); + + return { displayIndex, searchText, toggleDapps }; }, }); diff --git a/src/staking-v3/components/DynamicAdsArea.vue b/src/staking-v3/components/DynamicAdsArea.vue index dfc3e342c..5402abd3b 100644 --- a/src/staking-v3/components/DynamicAdsArea.vue +++ b/src/staking-v3/components/DynamicAdsArea.vue @@ -91,29 +91,3 @@ export default defineComponent({ - - diff --git a/src/staking-v3/components/FeatureDapp.vue b/src/staking-v3/components/FeatureDapp.vue index 6492f31b3..6c7712a55 100644 --- a/src/staking-v3/components/FeatureDapp.vue +++ b/src/staking-v3/components/FeatureDapp.vue @@ -5,7 +5,7 @@ isVotingPeriod ? $t('stakingV3.votingNow') : $t('stakingV3.newDappPromotion') }}
-
+
{{ isVotingPeriod ? $t('stakingV3.voteToday') : promotedDapp?.shortDescription }}
@@ -15,9 +15,15 @@ @click="navigateToVote()" > {{ $t('stakingV3.voteNow') }} + - + {{ $t('stakingV3.stakeOn', { name: promotedDapp?.name }) }} +
@@ -30,11 +36,11 @@ -
-
- +
+ +
diff --git a/src/staking-v3/components/Owner.vue b/src/staking-v3/components/Owner.vue index 4ea6c3af4..a3fc2ddfd 100644 --- a/src/staking-v3/components/Owner.vue +++ b/src/staking-v3/components/Owner.vue @@ -23,6 +23,7 @@ :claim-rewards="claimRewards" /> +
diff --git a/src/staking-v3/components/ToggleButtons.vue b/src/staking-v3/components/ToggleButtons.vue index 5a78c312c..8dca703d0 100644 --- a/src/staking-v3/components/ToggleButtons.vue +++ b/src/staking-v3/components/ToggleButtons.vue @@ -40,25 +40,34 @@ export default defineComponent({ @import 'src/css/quasar.variables.scss'; .wrapper--buttons { - display: flex; + display: inline-flex; padding: 8px; border: 1px solid $gray-2; border-radius: 80px; gap: 4px; font-size: 16px; font-weight: 700; - line-height: normal; } .button { - padding: 20px; + height: 54px; + border-radius: 27px; + padding: 0 20px; cursor: pointer; + display: flex; + align-items: center; + &:hover { + background-color: $gray-1; + } } .button--selected { background-color: $navy-1; color: $white; - border-radius: 50px; cursor: default; + transition: all 0.2s ease; + &:hover { + background-color: $navy-1; + } } diff --git a/src/staking-v3/components/Vote.vue b/src/staking-v3/components/Vote.vue index eb0a5cf71..c0fdb8930 100644 --- a/src/staking-v3/components/Vote.vue +++ b/src/staking-v3/components/Vote.vue @@ -4,105 +4,113 @@
{{ isVotingPeriod ? $t('stakingV3.voteTitle') : $t('stakingV3.stakeTitle') }}
-
- {{ $t('toast.note') }} -
    -
  • - {{ - $t('stakingV3.minimumStakingAmount', { - amount: constants?.minStakeAmountToken, - symbol: nativeTokenSymbol, - }) - }} -
    • -
  • - {{ - $t('stakingV3.minBalanceAfterStaking', { - amount: constants?.minBalanceAfterStaking, - symbol: nativeTokenSymbol, - }) - }} -
    • -
-
-
-
- -
-
- -
-
-
- -
-
- {{ $t('stakingV3.availableToVote') }} -
-
{{ $t('stakingV3.totalTransferable') }}
-
-
-
-
- {{ isVotingPeriod ? $t('stakingV3.lockedForVoting') : $t('stakingV3.lockedForStaking') }} +
+
+
+ {{ $t('toast.note') }} +
    +
  • + {{ + $t('stakingV3.minimumStakingAmount', { + amount: constants?.minStakeAmountToken, + symbol: nativeTokenSymbol, + }) + }} +
    • +
  • + {{ + $t('stakingV3.minBalanceAfterStaking', { + amount: constants?.minBalanceAfterStaking, + symbol: nativeTokenSymbol, + }) + }} +
    • +
-
-
-
-
- {{ isVotingPeriod ? $t('stakingV3.alreadyVoted') : $t('stakingV3.alreadyStaked') }} +
+
+ +
+
+ +
-
-
-
-
- {{ - remainLockedToken >= 0 - ? $t('stakingV3.remainLockedToken') - : $t('stakingV3.tokensToBeLocked') - }} +
+
-
- +
+ {{ $t('stakingV3.availableToVote') }} +
+
{{ $t('stakingV3.totalTransferable') }}
+
+
+
+
+ {{ + isVotingPeriod ? $t('stakingV3.lockedForVoting') : $t('stakingV3.lockedForStaking') + }} +
+
+
+
+
+ {{ isVotingPeriod ? $t('stakingV3.alreadyVoted') : $t('stakingV3.alreadyStaked') }} +
+
+
+
+
+ {{ + remainLockedToken >= 0 + ? $t('stakingV3.remainLockedToken') + : $t('stakingV3.tokensToBeLocked') + }} +
+
+ +
+
+
+ {{ + remainLockedToken > BigInt(0) + ? $t('stakingV3.voteLockedTokensWarning') + : $t('stakingV3.additionalTokensLockedWarning') + }} +
+ +
+ + {{ $t('confirm') }} + +
+
-
- {{ - remainLockedToken > BigInt(0) - ? $t('stakingV3.voteLockedTokensWarning') - : $t('stakingV3.additionalTokensLockedWarning') - }} -
-
- -
- - {{ $t('confirm') }} - +
Banners
- +
diff --git a/src/staking-v3/components/dapp/DappAvatar.vue b/src/staking-v3/components/dapp/DappAvatar.vue index 579a5f816..c0b25276f 100644 --- a/src/staking-v3/components/dapp/DappAvatar.vue +++ b/src/staking-v3/components/dapp/DappAvatar.vue @@ -6,38 +6,38 @@
- {{ dapp.extended?.name }} + {{ dapp.extended?.name }} +
+
+ {{ dapp.extended?.description }}
{{ tag }}
-
- - - {{ $t('dappStaking.stake') }} - - - -
-
- - - {{ $t('dappStaking.edit') }} - + +
+ + {{ $t('dappStaking.edit') }} + + + + + + {{ $t('assets.addToFavorite') }} + + + +
@@ -85,20 +85,5 @@ export default defineComponent({ diff --git a/src/staking-v3/components/dapp/DappImages.vue b/src/staking-v3/components/dapp/DappImages.vue index be155db31..821f25d90 100644 --- a/src/staking-v3/components/dapp/DappImages.vue +++ b/src/staking-v3/components/dapp/DappImages.vue @@ -142,5 +142,5 @@ export default defineComponent({ diff --git a/src/staking-v3/components/dapp/DappStatistics.vue b/src/staking-v3/components/dapp/DappStatistics.vue index cb22130a0..133200b53 100644 --- a/src/staking-v3/components/dapp/DappStatistics.vue +++ b/src/staking-v3/components/dapp/DappStatistics.vue @@ -1,68 +1,39 @@ diff --git a/src/staking-v3/components/dapp/DappStatsCharts.vue b/src/staking-v3/components/dapp/DappStatsCharts.vue index 9fb5104db..7d9da7650 100644 --- a/src/staking-v3/components/dapp/DappStatsCharts.vue +++ b/src/staking-v3/components/dapp/DappStatsCharts.vue @@ -1,7 +1,7 @@ diff --git a/src/staking-v3/components/dapp/ProjectOverview.vue b/src/staking-v3/components/dapp/ProjectOverview.vue index 94c5998fd..368155b09 100644 --- a/src/staking-v3/components/dapp/ProjectOverview.vue +++ b/src/staking-v3/components/dapp/ProjectOverview.vue @@ -1,8 +1,5 @@