Merge branch 'main' into issue-10664

.github/workflows/playwright.yml

@@ -11,8 +11,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6]
-        shardTotal: [6]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

components/codeChecker/CodeChecker.vue

@@ -99,14 +99,6 @@
         v-if="selectedFile && !errorMessage"
         class="border-t border-k-shade pt-5 flex flex-col gap-5"
       >
-        <CodeCheckerTestItem
-          :passed="fileValidity.resizerUsed"
-          :description="$t('codeChecker.automaticResize')"
-        >
-          <template #modalContent>
-            <CodeCheckerIssueHintAutomaticResize />
-          </template>
-        </CodeCheckerTestItem>
         <CodeCheckerTestItem
           :passed="fileValidity.validTitle"
           :description="$t('codeChecker.correctHTMLName')"
@@ -147,40 +139,41 @@
             <CodeCheckerIssueHintUsingParamHash />
           </template>
         </CodeCheckerTestItem>
+
         <CodeCheckerTestItem
-          :passed="!fileValidity.webGlUsed"
-          :description="$t('codeChecker.notUsingWebGl')"
+          :passed="fileValidity.validKodaRenderPayload"
+          :description="$t('codeChecker.validImage')"
         >
           <template #modalContent>
-            <CodeCheckerIssueHintNoWebGl />
+            <CodeCheckerIssueHintValidImage />
           </template>
         </CodeCheckerTestItem>
         <CodeCheckerTestItem
-          :passed="fileValidity.renderDurationValid"
-          :description="
-            $t('codeChecker.variationLoadingTime', [
-              (config.maxAllowedLoadTime / 1000).toFixed(0),
-            ])
-          "
+          :passed="fileValidity.consistent"
+          :description="$t('codeChecker.consistentArt')"
         >
           <template #modalContent>
-            <CodeCheckerIssueHintVariationLoadingTime />
+            <CodeCheckerIssueHintConsistentArt />
           </template>
         </CodeCheckerTestItem>
         <CodeCheckerTestItem
-          :passed="fileValidity.validKodaRenderPayload"
-          :description="$t('codeChecker.validImage')"
+          :passed="fileValidity.resizerUsed"
+          :description="$t('codeChecker.automaticResize')"
+          optional
         >
           <template #modalContent>
-            <CodeCheckerIssueHintValidImage />
+            <CodeCheckerIssueHintAutomaticResize />
           </template>
         </CodeCheckerTestItem>
         <CodeCheckerTestItem
-          :passed="fileValidity.consistent"
-          :description="$t('codeChecker.consistentArt')"
+          :passed="fileValidity.renderDurationValid"
+          :description="
+            $t('codeChecker.variationLoadingTime')
+          "
+          optional
         >
           <template #modalContent>
-            <CodeCheckerIssueHintConsistentArt />
+            <CodeCheckerIssueHintVariationLoadingTime />
           </template>
         </CodeCheckerTestItem>
       </div>
@@ -233,7 +226,7 @@
 
 <script lang="ts" setup>
 import { NeoIcon } from '@kodadot1/brick'
-import { validate, webGlUsed } from './validate'
+import { validate } from './validate'
 import { createSandboxAssets, extractAssetsFromZip } from './utils'
 import config from './codechecker.config'
 import type { AssetMessage, Validity } from './types'
@@ -255,7 +248,6 @@ const RESOURCES_LIST = [
 
 const validtyDefault: Validity = {
   canvasSize: '',
-  webGlUsed: false,
   localP5jsUsed: false,
   kodaRendererUsed: 'unknown',
   kodaRendererCalledOnce: 'unknown',
@@ -287,7 +279,7 @@ const onFileSelected = async (file: File) => {
   clear()
   startClock()
   selectedFile.value = file
-  const { indexFile, sketchFile, entries, jsFiles }
+  const { indexFile, sketchFile, entries }
     = await extractAssetsFromZip(file)
 
   if (!sketchFile) {
@@ -301,9 +293,6 @@ const onFileSelected = async (file: File) => {
   else {
     Object.assign(fileValidity, valid.value)
   }
-  fileValidity.webGlUsed = jsFiles.some(file =>
-    webGlUsed(file.content, file.path),
-  )
 
   if (!fileValidity.kodaRendererUsed) {
     fileValidity.renderDurationValid = 'unknown'
@@ -354,7 +343,6 @@ useEventListener(window, 'message', async (res) => {
     renderEndTime.value = performance.now()
     const duration = renderEndTime.value - renderStartTime.value
     fileValidity.renderDurationValid = duration < config.maxAllowedLoadTime
-
     fileValidity.validKodaRenderPayload
       = Boolean(payload?.image) && hasImage(payload.image)
     if (fileValidity.validKodaRenderPayload) {

components/codeChecker/TestItem.vue

@@ -42,6 +42,7 @@ import type { Passed } from './types'
 const props = defineProps<{
   passed: Passed
   description: string
+  optional?: boolean
 }>()
 
 const showResolveIssuesModal = ref(false)
@@ -54,7 +55,7 @@ const icon = computed(() => {
       spin: true,
     }
   }
-  if (props.passed === 'unknown') {
+  if (props.passed === 'unknown' || (props.optional && !props.passed)) {
     return {
       name: 'question',
       class: 'text-k-grey',

components/codeChecker/issueHint/VariationLoadingTime.vue

@@ -7,17 +7,4 @@
     <li>{{ $t('codeChecker.variationLoadingTimeMeans2') }}</li>
     <li>{{ $t('codeChecker.variationLoadingTimeMeans3') }}</li>
   </ul>
-
-  <CodeCheckerIssueHintCodeBlock
-    class="mt-5"
-    :code="code"
-    lang="javascript"
-  />
 </template>
-
-<script setup lang="ts">
-const code = `
-function windowResized() {  canvasSize = min(windowWidth, windowHeight)
-  resizeCanvas(canvasSize, canvasSize)
-}`
-</script>

components/codeChecker/types.ts

@@ -15,7 +15,6 @@ export type Result<T> = Success<T> | Failure
 export type Validity = {
   canvasSize: string
   title: string
-  webGlUsed: boolean
   localP5jsUsed: boolean
   kodaRendererUsed: Passed
   kodaRendererCalledOnce: Passed

components/codeChecker/validate.ts

@@ -24,7 +24,6 @@ type InnerValidity = Pick<
 
 const constants = {
   canvasRegex: /createCanvas\(([^,]+?),\s*([^\s,]+?)(,\s*WEBGL)?\)/g,
-  graphicsRegex: /createGraphics\(([^,]+?),\s*([^\s,]+?)(,\s*WEBGL)?\)/g,
   getUrlParamsRegex: /\b(const|let|var)\s+(\w+)\s*=\s*getURLParams\(\)\s*/,
   urlSearchParamsRegex:
     /\b(const|let|var)\s+(\w+)\s*=\s*new URLSearchParams\(window.location.search\)\s*/,
@@ -45,24 +44,6 @@ const validateCanvasCreation = (
   return { isSuccess: true, value: canvasMatch }
 }
 
-export const webGlUsed = (content, path) => {
-  const canvasMatches = content.match(constants.canvasRegex)
-  const graphicsMatches = content.match(constants.graphicsRegex)
-
-  const canvasWebGLUsed = canvasMatches
-    ? canvasMatches.some(match => match.includes('WEBGL'))
-    : false
-  const graphicsWebGLUsed = graphicsMatches
-    ? graphicsMatches.some(match => match.includes('WEBGL'))
-    : false
-
-  if (canvasWebGLUsed || graphicsWebGLUsed) {
-    console.warn(`WebGL usage found in file: ${path}`)
-  }
-
-  return canvasWebGLUsed || graphicsWebGLUsed
-}
-
 const validateGetURLParamsUsage = (
   sketchFileContent: string,
 ): Result<RegExpExecArray> => {

components/collection/CollectionHeader/CollectionBanner.vue

@@ -20,7 +20,7 @@
               />
             </div>
             <h1
-              class="collection-banner-name font-bold text-2xl md:text-[31px]"
+              class="collection-banner-name font-bold text-2xl md:text-[31px] w-max max-w-sm"
               data-testid="collection-banner-name"
             >
               {{ collectionName }}

components/common/ConnectWallet/MnemonicNotice.vue

@@ -21,6 +21,7 @@
     </a>
   </div>
 </template>
+
 <script setup lang="ts">
 import { NeoIcon } from '@kodadot1/brick'
 </script>

components/common/Notification.vue

@@ -3,46 +3,74 @@
     :duration="duration"
     :title="title"
     :variant="variant"
+    :icon="icon"
+    :hold-timer="holdTimer"
     auto-close
     show-progress-bar
     @close="emit('close')"
   >
-    <div class="flex gap-2 flex-col">
+    <div
+      class="flex gap-2"
+      :class="{ 'flex-col': variant !== 'success' }"
+    >
       <p class="text-k-grey text-sm break-all">
         {{ message }}
       </p>
 
       <a
         v-if="action"
         v-safe-href="action.url"
-        class="text-[16px] !text-text-color"
+        :class="[
+          variant === 'success'
+            ? '!text-k-blue hover:!text-k-blue-hover !no-underline text-sm'
+            : '!text-text-color text-[16px] ',
+        ]"
         target="_blank"
       >
         {{ action.label }}
+        <NeoIcon :icon="action.icon" />
       </a>
     </div>
   </NeoMessage>
 </template>
 
 <script lang="ts" setup>
-import type { NeoMessageVariant } from '@kodadot1/brick'
-import { NeoMessage } from '@kodadot1/brick'
+import type {
+  NeoMessageIconVariant,
+  NeoMessageVariant } from '@kodadot1/brick'
+import {
+  NeoIcon,
+  NeoMessage,
+} from '@kodadot1/brick'
 
-type NotificationAction = { label: string, url: string }
+type NotificationAction = { label: string, url: string, icon?: string }
 
 const emit = defineEmits(['close'])
-withDefaults(
+const props = withDefaults(
   defineProps<{
-    title: string
-    message: string
+    title: MaybeRef<string>
+    message: MaybeRef<string>
     duration?: number
-    variant?: NeoMessageVariant
-    action?: NotificationAction
+    state?: Ref<LoadingNotificationState>
+    variant?: MaybeRef<NeoMessageVariant>
+    action?: MaybeRef<NotificationAction | undefined>
+    holdTimer?: Ref<boolean>
+    icon?: Ref<NeoMessageIconVariant | undefined>
   }>(),
   {
     variant: 'success',
     duration: 10000,
     action: undefined,
+    state: undefined,
+    holdTimer: undefined,
+    icon: undefined,
   },
 )
+
+const title = computed(() => unref(props.title))
+const message = computed(() => unref(props.message))
+const action = computed(() => unref(props.action))
+const holdTimer = computed(() => unref(props.holdTimer))
+const icon = computed(() => unref(props.icon))
+const variant = computed(() => unref(props.variant))
 </script>

components/drops/Drops.vue

@@ -36,11 +36,10 @@
       :drops="currentDrops"
       :loaded="loaded"
       :default-skeleton-count="DEFAULT_SKELETON_COUNT"
+      :async-skeleton-count="Math.round((count/2) - currentDrops.length)"
       skeleton-key="current-drops-skeleton"
     />
 
-    <hr class="my-14">
-
     <DropsCalendar
       :drops="drops"
       :loaded="loaded"
@@ -57,6 +56,7 @@
       :drops="pastDrops"
       :loaded="loaded"
       :default-skeleton-count="DEFAULT_SKELETON_COUNT"
+      :async-skeleton-count="Math.round((count/2) - pastDrops.length)"
       skeleton-key="skeleton"
     />
 
@@ -80,11 +80,11 @@ const CURRENT_DROP_STATUS = Object.values(DropStatus).filter(
 
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
-const { drops, loaded } = useDrops({
+const { drops, loaded, count } = useDrops({
   active: [true],
   chain: !isProduction ? [urlPrefix.value] : [],
-  limit: 100, // set limit to enable sort from backend
-})
+  limit: 100,
+}, { async: true })
 
 const isCreateEventModalActive = ref(false)