dApp builder image size validation

README.md

@@ -40,7 +40,7 @@ For E2E testing, we utilize [chopsticks](https://github.com/AcalaNetwork/chopsti
 ### Setup chopsticks
 
 ```bash
-@acala-network/chopsticks@latest xcm -p=tests/chopsticks/astar.yml -p=tests/chopsticks/shiden.yml
+npx @acala-network/chopsticks@latest xcm -p=tests/chopsticks/astar.yml -p=tests/chopsticks/shiden.yml
 ```
 
 ### Running tests locally in debug mode

src/components/common/Validators.ts

@@ -2,4 +2,4 @@ import validator from 'validator';
 
 export const isEmailValid = (emailAddress: string): boolean => validator.isEmail(emailAddress);
 
-export const isUrlValid = (url: string): boolean => validator.isURL(url);
+export const isUrlValid = (url: string): boolean => (url ? validator.isURL(url) : false);

src/components/dapp-staking/register/RegisterDapp.vue

@@ -2,8 +2,9 @@
   <div class="container--register">
     <back-to-page :text="$t('dappStaking.stakePage.backToDappList')" :link="Path.DappStaking" />
     <div class="wrapper--register-form">
-      <welcome-banner v-if="isNewDapp" class="welcome" />
-      <q-form ref="dappForm">
+      <welcome-banner v-if="isNewDapp && !isMobileDevice" class="welcome" />
+      <desktop-only-banner v-if="isMobileDevice" class="welcome" />
+      <q-form v-if="!isMobileDevice" ref="dappForm">
         <div style="display: flex; flex-direction: column">
           <q-input
             v-model="data.name"
@@ -82,7 +83,6 @@
 <script lang="ts">
 import { computed, defineComponent, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { isEthereumAddress } from '@polkadot/util-crypto';
 import { $api } from 'boot/api';
 import { FileInfo, NewDappItem } from 'src/store/dapp-staking/state';
 import { Category, Developer } from '@astar-network/astar-sdk-core';
@@ -111,6 +111,8 @@ import { RegisterParameters } from 'src/store/dapp-staking/actions';
 import { Path } from 'src/router';
 import BackToPage from 'src/components/common/BackToPage.vue';
 import { useRouter } from 'vue-router';
+import { isMobileDevice } from 'src/hooks/helper/wallet';
+import DesktopOnlyBanner from './components/DesktopOnlyBanner.vue';
 
 export default defineComponent({
   components: {
@@ -126,6 +128,7 @@ export default defineComponent({
     Tags,
     BackToPage,
     WelcomeBanner,
+    DesktopOnlyBanner,
   },
   setup() {
     const initDeveloper = (): Developer => ({
@@ -173,9 +176,6 @@ export default defineComponent({
     data.imagesContent = [];
     data.imagesContent.push('');
 
-    const isValidAddress = (address: string): boolean => isEthereumAddress(address); // || isValidAddressPolkadotAddress(address);
-    // TODO uncoment the code above when we will support ink contract.
-
     const updateDappLogo = (): void => {
       const reader = new FileReader();
       reader.readAsDataURL(data.icon);
@@ -329,7 +329,7 @@ export default defineComponent({
       errors,
       Path,
       isNewDapp,
-      isValidAddress,
+      isMobileDevice,
       updateDappLogo,
       isUrlValid,
       handleDappChanged,

src/components/dapp-staking/register/components/DesktopOnlyBanner.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="banner--container">{{ $t('dappStaking.desktopOnlyBanner') }}</div>
+</template>
+
+<style lang="scss" scoped>
+@use '../styles/register.scss';
+</style>

src/components/dapp-staking/register/components/ModalAddDeveloper.vue

@@ -55,9 +55,9 @@
         <q-file
           v-model="file"
           outlined
-          max-file-size="1000000"
+          max-file-size="30720"
           accept="image/jpeg, .png"
-          :label="$t('dappStaking.modals.builder.image', { size: '1MB' })"
+          :label="$t('dappStaking.modals.builder.image', { size: '30KB' })"
           class="component"
           lazy-rules="ondemand"
           :rules="[(v: File) => v.size > 0 || `${$t('dappStaking.modals.builder.error.builderImageRequired')}`]"

src/components/dapp-staking/register/components/WelcomeBanner.vue

@@ -1,18 +1,7 @@
 <template>
-  <div class="container">{{ $t('dappStaking.welcomeBanner') }}</div>
+  <div class="banner--container">{{ $t('dappStaking.welcomeBanner') }}</div>
 </template>
 
-<style scoped>
-.container {
-  background-image: url('assets/img/astar_hero.png');
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 157.3%;
-  color: #f7f7f8;
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  padding: 30px;
-  border-radius: 6px;
-}
+<style lang="scss" scoped>
+@use '../styles/register.scss';
 </style>

src/components/dapp-staking/register/styles/register.scss

@@ -56,3 +56,18 @@
   height: 52px;
   width: 328px;
 }
+
+.banner--container {
+  background-image: url('assets/img/astar_hero.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 157.3%;
+  color: #f7f7f8;
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  padding: 30px;
+  border-radius: 6px;
+}

src/i18n/en-US/index.ts

@@ -221,6 +221,7 @@ export default {
     dappRegistered: 'Congrats!! your contract is approved. Please submit the details',
     welcomeBanner:
       'Congratulations 🎉 Please fill in your dApp information to give users better overview of your application. Updated data will appear on the dApp page shortly.',
+    desktopOnlyBanner: 'dApp registration is only available on desktop',
     registerNow: 'Register now',
     transferableBalance: 'Transferable Balance',
     totalStake: 'Total stake:',

tests/chopsticks/astar.yml

@@ -13,6 +13,10 @@ import-storage:
         - providers: 1
           data:
             free: '100000000000000000000000'
+      - - - ZAP5o2BjWAo5uoKDE6b6Xkk4Ju7k6bDu24LNjgZbfM3iyiR # Bob
+        - providers: 1
+          data:
+            free: '100000000000000000000000'
   # Sample list of available assetIds: https://github.com/AstarNetwork/astar-apps/blob/main/src/modules/xcm/tokens/index.ts
   Assets:
     Account:

tests/chopsticks/setup-preconditions-api.js

@@ -2,6 +2,7 @@
 const { ApiPromise, WsProvider } = require('@polkadot/api');
 const { Keyring } = require('@polkadot/keyring');
 const TEST_DAPP_ADDRESS = '0x0000000000000000000000000000000000000001';
+const TEST_DAPP_ADDRESS_2 = '0x0000000000000000000000000000000000000002';
 
 async function run(nodeName, networkInfo, args) {
   const BN = require('bn.js');
@@ -16,6 +17,7 @@ async function run(nodeName, networkInfo, args) {
   // account to submit tx
   const keyring = new Keyring({ type: 'sr25519' });
   const sender = keyring.addFromUri('//' + args[0]);
+  const bob = keyring.addFromUri('//' + args[1]);
 
   // create asset
   console.info('Creating asset with sender: ', sender.address);
@@ -24,8 +26,11 @@ async function run(nodeName, networkInfo, args) {
   await sendTransaction(api.tx.assets.setMetadata(999, 'Test', 'TST', 18), sender);
 
   // register dApp
+  console.info('Registering dApps with sender: ', sender.address);
   const tx4 = api.tx.dappsStaking.register(sender.address, { Evm: TEST_DAPP_ADDRESS });
+  const tx5 = api.tx.dappsStaking.register(bob.address, { Evm: TEST_DAPP_ADDRESS_2 });
   await sendTransaction(api.tx.sudo.sudo(tx4), sender);
+  await sendTransaction(api.tx.sudo.sudo(tx5), sender);
 
   const result = 1;
   return result;

tests/chopsticks/start-chopsticks.js

@@ -32,7 +32,7 @@ async function executeRun() {
     );
     console.info('Chopsticks started with pid:', childProcess.pid);
 
-    result = await setupPreconditions.run(nodeName, networkInfo, ['Alice']);
+    result = await setupPreconditions.run(nodeName, networkInfo, ['Alice', 'Bob']);
     console.info('Setup Preconditions tests completed with result:', result);
 
     result = await startPlaywright.run(nodeName, networkInfo, [args]);

tests/common.ts

@@ -37,6 +37,7 @@ export const selectAccount = async (page: Page, accountName: string): Promise<vo
   await page.getByText('Polkadot.js').click();
   await page.getByText(`${accountName} (extension)`).click();
   await page.getByRole('button', { name: 'Connect', exact: true }).click();
+  await page.waitForTimeout(1000);
 };
 
 export const signTransaction = async (context: BrowserContext): Promise<void> => {

tests/test_specs/dappstaking-register.spec.ts

@@ -0,0 +1,54 @@
+import { BrowserContext, Page, expect } from '@playwright/test';
+import { test } from '../fixtures';
+import {
+  BOB_ACCOUNT_NAME,
+  BOB_ACCOUNT_SEED,
+  closePolkadotWelcomePopup,
+  connectToNetwork,
+  createAccount,
+  selectAccount,
+} from '../common';
+import { ApiPromise } from '@polkadot/api';
+import { getApi } from '../common-api';
+
+let api: ApiPromise;
+test.beforeAll(async () => {
+  api = await getApi();
+});
+
+test.afterAll(async () => {
+  await api.disconnect();
+});
+
+test.beforeEach(async ({ page, context }: { page: Page; context: BrowserContext }) => {
+  await page.goto('/astar/dapp-staking/discover');
+
+  // Close cookies popup
+  await page.getByRole('button', { name: 'Accept' }).click();
+
+  const polkadotButton = page.getByText('Polkadot.js');
+  await polkadotButton.click();
+
+  await closePolkadotWelcomePopup(context);
+  await createAccount(page, BOB_ACCOUNT_SEED, BOB_ACCOUNT_NAME);
+  await page.goto('/astar/dapp-staking/discover');
+  await connectToNetwork(page);
+  await page.waitForSelector('.four', { state: 'hidden' }); // Wait for the page to load
+  await selectAccount(page, BOB_ACCOUNT_NAME);
+});
+
+test.describe('register dApp page', () => {
+  test('validate builder image size', async ({ page }) => {
+    await page.getByRole('link', { name: '🎉 Congrats!! your contract is approved. Please submit the details Register now' }).click();
+    await page.locator('.builders--container > .card > .card--image > .slot > .card-new-item').click();
+    await page.getByLabel('Builder\'s image (maximum upload file size: 30KB)').isVisible();
+    // Upload an image that is too large.
+    await page.getByLabel('Builder\'s image (maximum upload file size: 30KB)').setInputFiles('./tests/assets/invalid_developer_image.jpeg');
+    // Image didn't show up on UI since it is too big. Add image button should be displayed.
+    await expect(page.locator('.builders--container > .card > .card--image > .slot > .image')).toBeHidden();
+    // Upload a valid image.
+    await page.getByLabel('Builder\'s image (maximum upload file size: 30KB)').setInputFiles('./tests/assets/valid_developer_image.jpeg');
+    // Check if image is displayed.
+    await expect(page.locator('.builders--container > .card > .card--image > .image')).toBeVisible();
+  });
+});