From dfeab9e7ee3aff3c92b229f9ea83bb036b1bde26 Mon Sep 17 00:00:00 2001 From: Roy <92044428+impelcrypto@users.noreply.github.com> Date: Wed, 21 Feb 2024 15:07:00 +0800 Subject: [PATCH] fix: dApp staking kaizen (#1193) * fix: added reference link to the error message * fix: switch network * feat: added rewards notification * fix: refactor * fix: refactor * fix: hide onboard modal --- src/App.vue | 32 ++++----- src/components/assets/AnchorLinks.vue | 70 +++++++++++++++++-- src/components/assets/YourProject.vue | 52 +++++++++++--- .../assets/styles/your-project.scss | 63 +++++++++++++---- .../header/modals/ModalNetworkWallet.vue | 19 ++++- src/css/quasar.variables.scss | 2 +- src/i18n/en-US/index.ts | 6 +- src/links/index.ts | 2 + src/staking-v3/components/ErrorPanel.vue | 18 ++++- src/staking-v3/components/Vote.vue | 7 +- .../components/my-staking/MyStakingCard.vue | 6 +- src/staking-v3/hooks/useDappStaking.ts | 49 ++++++++----- 12 files changed, 257 insertions(+), 69 deletions(-) diff --git a/src/App.vue b/src/App.vue index df0525b19..7cc980791 100644 --- a/src/App.vue +++ b/src/App.vue @@ -28,11 +28,11 @@ - + /> --> (false); - if ( - !localStorage.getItem(LOCAL_STORAGE.CLOSE_DAPP_STAKING_V3_ONBOARDING) && - isDappStakingV3.value - ) { - setTimeout(() => { - showOnboardingModal.value = true; - }, 2000); - } - - const setShowOnboardingModal = (isOpen: boolean): void => { - showOnboardingModal.value = isOpen; - }; + // const showOnboardingModal = ref(false); + // if ( + // !localStorage.getItem(LOCAL_STORAGE.CLOSE_DAPP_STAKING_V3_ONBOARDING) && + // isDappStakingV3.value + // ) { + // setTimeout(() => { + // showOnboardingModal.value = true; + // }, 2000); + // } + + // const setShowOnboardingModal = (isOpen: boolean): void => { + // showOnboardingModal.value = isOpen; + // }; const setShowDecommissionModal = (isOpen: boolean): void => { showDecommissionModal.value = isOpen; @@ -277,8 +277,6 @@ export default defineComponent({ showDisclaimerModal, showDecommissionModal, setShowDisclaimerModal, - showOnboardingModal, - setShowOnboardingModal, setShowDecommissionModal, }; }, diff --git a/src/components/assets/AnchorLinks.vue b/src/components/assets/AnchorLinks.vue index 4efd22797..44651961c 100644 --- a/src/components/assets/AnchorLinks.vue +++ b/src/components/assets/AnchorLinks.vue @@ -1,16 +1,36 @@ @@ -65,6 +91,10 @@ export default defineComponent({ } } +.bg--notify { + background-color: $gray-0; +} + .item { border-radius: 12px; cursor: pointer; @@ -75,6 +105,7 @@ export default defineComponent({ padding: 16px; flex-grow: 1; text-align: center; + position: relative; @media (min-width: $sm) { font-size: 16px; padding: 16px 24px; @@ -86,14 +117,41 @@ export default defineComponent({ } } +.dot--bg { + top: -6px; + right: -5px; + position: absolute; + width: 22px; + height: 22px; + background-color: $gray-1; + border-radius: 100%; +} + +.dot--active { + top: 0; + right: 0; + position: absolute; + width: 12px; + height: 12px; + background-color: $astar-pink-1; + border-radius: 100%; +} + .body--dark { .wrapper--anchor-links { - background-color: $navy-3; + background-color: $navy-1; border-color: $navy-3; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.8); } .item { color: $gray-2; } + .bg--notify { + background-color: $navy-3; + } + + .dot--bg { + background-color: $navy-1; + } } diff --git a/src/components/assets/YourProject.vue b/src/components/assets/YourProject.vue index 0822f8672..85f9c06c9 100644 --- a/src/components/assets/YourProject.vue +++ b/src/components/assets/YourProject.vue @@ -9,13 +9,20 @@
-
- {{ dapp.basic.name }} +
+ {{ dapp.basic.name }} +
+ {{ $t('assets.rewardsAvailable') }} +
+
+
+
+
@@ -24,9 +31,11 @@ diff --git a/src/components/assets/styles/your-project.scss b/src/components/assets/styles/your-project.scss index 119c12ae9..f64f6d8e0 100644 --- a/src/components/assets/styles/your-project.scss +++ b/src/components/assets/styles/your-project.scss @@ -8,17 +8,9 @@ } .box--dapps { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); + display: flex; + flex-wrap: wrap; gap: 16px; - - @media (min-width: $md) { - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 32px; - } - @media (min-width: $xxl) { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } } .text--title { @@ -51,7 +43,8 @@ color: $navy-1; line-height: 1.25; transition: all 0.2s ease; - &:hover{ + position: relative; + &:hover { background-color: $gray-2; } } @@ -70,15 +63,59 @@ margin-bottom: 24px; } +.row--dapp-name { + display: flex; + align-items: center; + gap: 10px; +} + +.column--rewards { + border: 1px solid $astar-pink-1; + padding: 8px 4px; + border-radius: 8px; + font-weight: 600; + color: $astar-pink-1; + font-size: 12px; +} + +.dot--bg { + top: -6px; + right: -5px; + position: absolute; + width: 22px; + height: 22px; + background-color: white; + border-radius: 100%; +} + +.dot--active { + top: 0; + right: 0; + position: absolute; + width: 12px; + height: 12px; + background-color: $astar-pink-1; + border-radius: 100%; +} + .body--dark { .card--dapp { background-color: $navy-3; color: $gray-1; - &:hover{ - background-color: lighten($navy-3,5%); + &:hover { + background-color: lighten($navy-3, 5%); } } + .separator { background-color: $navy-3; } + + .bg--notify { + background-color: $navy-3; + } + + .dot--bg { + background-color: $navy-1; + } } diff --git a/src/components/header/modals/ModalNetworkWallet.vue b/src/components/header/modals/ModalNetworkWallet.vue index 6afa734ff..181caa521 100644 --- a/src/components/header/modals/ModalNetworkWallet.vue +++ b/src/components/header/modals/ModalNetworkWallet.vue @@ -78,7 +78,7 @@ import { import { endpointKey, getNetworkName, providerEndpoints } from 'src/config/chainEndpoints'; import { LOCAL_STORAGE } from 'src/config/localStorage'; import { SupportWallet, WalletModalOption } from 'src/config/wallets'; -import { useAccount } from 'src/hooks'; +import { useAccount, useNetworkInfo } from 'src/hooks'; import { buildNetworkUrl } from 'src/router/utils'; import { useStore } from 'src/store'; import { computed, defineComponent, ref, watch } from 'vue'; @@ -157,6 +157,7 @@ export default defineComponent({ const { NETWORK_IDX, SELECTED_ENDPOINT } = LOCAL_STORAGE; const store = useStore(); const { currentAccount, disconnectAccount } = useAccount(); + const { currentNetworkIdx } = useNetworkInfo(); const isClosing = ref(false); const isAnimatedIn = ref(false); @@ -250,7 +251,21 @@ export default defineComponent({ const selectNetwork = async (): Promise => { const networkIdxRef = selNetworkId.value; const { isEndpointChange, newEndpoint } = getNewEndpoint(); - if (isEndpointChange || networkIdxRef === endpointKey.LOCAL) { + + // Memo: zkEVM configuration is using substrate API to fetch the dApp staking information + // that's why `isEndpointChange` returns fails in `isChangeNetwork` variable + const isSwitchBetweenZkEvmTestnet = + networkIdxRef === endpointKey.SHIBUYA && currentNetworkIdx.value === endpointKey.ZKYOTO; + const isSwitchBetweenZkEvmMainnet = + networkIdxRef === endpointKey.ASTAR && currentNetworkIdx.value === endpointKey.ASTAR_ZKEVM; + + const isChangeNetwork = + isEndpointChange || + networkIdxRef === endpointKey.LOCAL || + isSwitchBetweenZkEvmTestnet || + isSwitchBetweenZkEvmMainnet; + + if (isChangeNetwork) { localStorage.setItem(NETWORK_IDX, networkIdxRef.toString()); localStorage.setItem( SELECTED_ENDPOINT, diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss index cb2c4d01e..20e643bf0 100644 --- a/src/css/quasar.variables.scss +++ b/src/css/quasar.variables.scss @@ -21,7 +21,7 @@ $modal-item-bg-dark: #141c34; $astar-blue: #0085ff; $astar-blue-dark: #05b6fd; $astar-pink: #e0338f; -$astar-pink-01: rgba(230, 0, 122, 1); +$astar-pink-1: #e6007a; $astar-purple: #703ac2; $shiden-purple: #770cff; diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts index 6a9a76e22..f6dbb2df9 100644 --- a/src/i18n/en-US/index.ts +++ b/src/i18n/en-US/index.ts @@ -116,6 +116,7 @@ export default { docs: 'Documentation', loading: 'Loading...', comingSoon: 'Coming soon', + checkHowToSolve: 'Check how to solve this problem', speed: { speed: 'Transaction speed', speedTip: 'Transaction speed (Tip)', @@ -532,6 +533,7 @@ export default { yourProject: 'Your Project', verifyWalletCompatibility: 'Please verify wallet compatibility with {network} network before transactions to prevent fund loss', + rewardsAvailable: 'Rewards available', toast: { completedMessage: 'You have sent {transferAmt} {symbol} to {toAddress}', completedBridgeMessage: 'You have sent {transferAmt} {symbol} from {fromChain} to {toChain}', @@ -738,8 +740,7 @@ export default { NotOperatedDApp: 'dApp is part of dApp staking but is not active anymore.', PeriodEndsNextEra: 'Period ends in the next era. It is not possible to stake in the last era of a period.', - TooManyStakedContracts: - 'There are too many contract stake entries for the account. This can be cleaned up by either unstaking or cleaning expired entries.', + TooManyStakedContracts: 'There are too many contract stake entries for the account.', TooManyUnlockingChunks: 'Contract has too many unlocking chunks. Withdraw the existing chunks if possible or wait for current chunks to complete unlocking process to withdraw them.', UnavailableStakeFunds: @@ -850,6 +851,7 @@ export default { alreadyClaimed: 'Already claimed', eras: '{era} eras', days: '{day} days', + day: '{day} day', claimYourRewards: 'Claim your rewards', claimed: 'Claimed', period: 'Period {period}', diff --git a/src/links/index.ts b/src/links/index.ts index 25d91826e..6b5cdeb12 100644 --- a/src/links/index.ts +++ b/src/links/index.ts @@ -13,6 +13,8 @@ export const docsUrl = { 'https://docs.astar.network/docs/learn/dapp-staking/dapp-staking-faq/#q-i-am-a-leger-astar-native-app-user-what-do-i-need-to-do', learnDappStaking: 'https://docs.astar.network/docs/learn/dapp-staking/', dappStakingForStakers: 'https://docs.astar.network/docs/use/dapp-staking/for-stakers/', + dappStakingStaked16Dapps: + 'https://docs.astar.network/docs/learn/dapp-staking/dapp-staking-faq/#q-ive-staked-16-dapps-and-now-i-cant-add-or-move-tokens-and-im-getting-an-error-what-should-i-do', }; export const socialUrl = { diff --git a/src/staking-v3/components/ErrorPanel.vue b/src/staking-v3/components/ErrorPanel.vue index 32e97ed21..eb2e3a989 100644 --- a/src/staking-v3/components/ErrorPanel.vue +++ b/src/staking-v3/components/ErrorPanel.vue @@ -1,5 +1,12 @@ @@ -26,4 +38,8 @@ export default defineComponent({ font-size: 14px; font-weight: 500; } + +.text--link { + text-decoration: underline; +} diff --git a/src/staking-v3/components/Vote.vue b/src/staking-v3/components/Vote.vue index dffa9801b..32a42e64c 100644 --- a/src/staking-v3/components/Vote.vue +++ b/src/staking-v3/components/Vote.vue @@ -101,7 +101,7 @@
- +
(''); + const refUrl = ref(''); const canConfirm = (): boolean => { - const [enabled, message] = canStake(stakeInfo.value, availableToVote.value); + const [enabled, message, url] = canStake(stakeInfo.value, availableToVote.value); errorMessage.value = message; + refUrl.value = url; return enabled && totalStakeAmount.value > 0; }; @@ -397,6 +399,7 @@ export default defineComponent({ docsUrl, isLoading, stakeInfo, + refUrl, }; }, }); diff --git a/src/staking-v3/components/my-staking/MyStakingCard.vue b/src/staking-v3/components/my-staking/MyStakingCard.vue index b1dc70c56..e341e6715 100644 --- a/src/staking-v3/components/my-staking/MyStakingCard.vue +++ b/src/staking-v3/components/my-staking/MyStakingCard.vue @@ -1,7 +1,11 @@