Clickable each items on on-chain-data board (#838)

* add clickable area

* add e2e testing

* fix on feedback

Author: sirius651

src/components/dapp-staking/my-staking/OnChainData.vue

@@ -51,7 +51,7 @@
         >
           <div class="animate__animated" :class="isDisplay ? inAnimation : outAnimation">
             <div class="row--dapp">
-              <div class="column--dapp-name">
+              <div class="column--dapp-name" @click="goDappPageLink(dapp.address)">
                 <img class="img--logo" :src="dapp.iconUrl" :alt="dapp.name" />
                 <div class="column--name">
                   <span class="text--name"> {{ dapp.name }} </span>
@@ -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<boolean>(true);
     const goToNext = ref<boolean>(true);
     const sortBy = ref<SortBy>(SortBy.amountHighToLow);
+    const router = useRouter();
 
     const numItems = computed<number>(() =>
       width.value > screenSize.md ? numItemsTablet : numItemsMobile
@@ -153,6 +157,12 @@ export default defineComponent({
     );
     const isShiden = computed<boolean>(() => 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,
     };
   },
 });

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 {

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();
+  });
 });