diff --git a/src/components/dapp-staking/my-staking/OnChainData.vue b/src/components/dapp-staking/my-staking/OnChainData.vue index 0f74bdc80..d0a84fe43 100644 --- a/src/components/dapp-staking/my-staking/OnChainData.vue +++ b/src/components/dapp-staking/my-staking/OnChainData.vue @@ -51,7 +51,7 @@ >
-
+
{{ dapp.name }} @@ -96,6 +96,8 @@ import TokenBalance from 'src/components/common/TokenBalance.vue'; import { DappCombinedInfo, SmartContractState } from 'src/v2/models'; import { useStore } from 'src/store'; import { paginate } from '@astar-network/astar-sdk-core'; +import { networkParam, Path } from 'src/router/routes'; +import { useRouter } from 'vue-router'; enum Filter { tvl = 'dappStaking.stakingTvl', @@ -111,6 +113,7 @@ interface Data { iconUrl: string; name: string; balance: string; + address: string; } const numItemsTablet = 8; @@ -141,6 +144,7 @@ export default defineComponent({ const isDisplay = ref(true); const goToNext = ref(true); const sortBy = ref(SortBy.amountHighToLow); + const router = useRouter(); const numItems = computed(() => width.value > screenSize.md ? numItemsTablet : numItemsMobile @@ -153,6 +157,12 @@ export default defineComponent({ ); const isShiden = computed(() => currentNetworkName.value === 'Shiden'); + const goDappPageLink = (address: string | undefined): void => { + const base = networkParam + Path.DappStaking + Path.Dapp; + const url = `${base}?dapp=${address?.toLowerCase()}`; + router.push(url); + }; + const getDappStyle = (index: number): string => { if (screenSize.md > width.value) { return ''; @@ -205,6 +215,7 @@ export default defineComponent({ return { iconUrl: it.dapp.iconUrl, name: it.dapp.name, + address: it.dapp.address, balance, }; } else { @@ -268,6 +279,7 @@ export default defineComponent({ changePage, getDappStyle, getBorderStyle, + goDappPageLink, }; }, }); diff --git a/src/components/dapp-staking/my-staking/styles/on-chain-data.scss b/src/components/dapp-staking/my-staking/styles/on-chain-data.scss index 6d883917f..07297f56b 100644 --- a/src/components/dapp-staking/my-staking/styles/on-chain-data.scss +++ b/src/components/dapp-staking/my-staking/styles/on-chain-data.scss @@ -181,6 +181,15 @@ display: flex; align-items: center; column-gap: 12px; + max-width: 255px; + height: 48px; + border-radius: 6px; + padding: 0px 12px; + cursor: pointer; + &:hover { + background: rgba(255, 255, 255, 0.1); + } + @media (min-width: $md) { column-gap: 16px; } @@ -233,8 +242,8 @@ .divider { border-top: 1px solid rgba(255, 255, 255, 0.2); - margin-top: 20px; - margin-bottom: 20px; + margin-top: 8px; + margin-bottom: 8px; } .body--dark { diff --git a/tests/test_specs/dappstaking.spec.ts b/tests/test_specs/dappstaking.spec.ts index 8b97d3a42..c453b0b63 100644 --- a/tests/test_specs/dappstaking.spec.ts +++ b/tests/test_specs/dappstaking.spec.ts @@ -86,4 +86,15 @@ test.describe('on dapp staking screen', () => { const stakeButton = page.getByRole('button', { name: 'Stake Now' }); await expect(stakeButton).toBeVisible(); }); + + test('should clickable item on the on chain data after loading is complete', async ({ page }) => { + const closeButton = page.locator('.modal-close'); + await closeButton.click(); + await page.waitForSelector('.loader', { state: 'hidden' }); + const onChainCard = page + .locator('.wrapper--onchain-data .column--dapp-name:first-child') + .first(); + await expect(onChainCard).toBeVisible(); + await onChainCard.click(); + }); });