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 @@