Merge branch 'main' into issue-10731

.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/Navbar.vue

@@ -290,7 +290,7 @@ const logoSrc = computed(() => {
 const dropsPath = computed(() => {
   const prefix = pickByVm({
     SUB: 'ahp',
-    EVM: 'base',
+    EVM: urlPrefix.value,
   })
   return `/${prefix}/drops`
 })

components/carousel/CarouselTypeDrops.vue

@@ -28,9 +28,10 @@
 <script lang="ts" setup>
 import type { Drop } from '@/components/drops/useDrops'
 import { useDrops } from '@/components/drops/useDrops'
+import { vmOf } from '@/utils/config/chain.config'
 
 let queries = {
-  limit: 12,
+  limit: 14,
   active: [true],
   chain: ['ahp', 'base'],
 }
@@ -47,7 +48,7 @@ if (!isProduction && urlPrefix.value === 'ahk') {
 const container = ref()
 
 const { accountId } = useAuth()
-const { vmOf, vm } = useChain()
+const { vm } = useChain()
 const router = useRouter()
 const { doAfterReconnect } = useDoAfterReconnect()
 const { cols, isReady: isDynamicGridReady } = useDynamicGrid({
@@ -63,7 +64,7 @@ const skeletonCount = computed(() =>
   Number.isInteger(perView.value) ? perView.value : Math.ceil(perView.value),
 )
 
-const { drops, loaded: isReady } = useDrops(queries)
+const { drops, loaded: isReady } = useDrops(queries, { filterOutMinted: true })
 const dropsAlias = computed(() => drops.value.map(drop => drop.alias))
 
 const onDropClick = ({ path, drop }: { path: string, drop: Drop }) => {

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/collection/drop/modal/PaidMint.vue

@@ -7,8 +7,6 @@
       :title="title"
       :scrollable="false"
       :loading="loading"
-      :custom-skeleton-title="preStepTitle"
-      :estimated-time="estimedTime"
       @close="close"
     >
       <MintOverview
@@ -63,8 +61,6 @@ enum ModalStep {
   SUCCEEDED = 'succeded',
 }
 
-const IPFS_ESTIMATED_TIME_SECONDS = 15
-
 const emit = defineEmits(['confirm', 'update:modelValue', 'list', 'close'])
 const props = defineProps<{
   modelValue: boolean
@@ -94,10 +90,6 @@ const isSingleMintNotReady = computed(
   () => amountToMint.value === 1 && !canMint.value,
 )
 
-const estimedTime = computed(() =>
-  isSingleMintNotReady.value ? IPFS_ESTIMATED_TIME_SECONDS : undefined,
-)
-
 const mintButton = computed(() => {
   if (!canMint.value) {
     return {
@@ -117,10 +109,6 @@ const loading = computed(
     || false,
 )
 
-const preStepTitle = computed<string | undefined>(() =>
-  isSingleMintNotReady.value ? $i18n.t('drops.mintDropError') : undefined,
-)
-
 const isMintOverviewStep = computed(
   () => modalStep.value === ModalStep.OVERVIEW,
 )

components/collection/drop/modal/shared/SuccessfulDrop.vue

@@ -34,6 +34,7 @@ const { toast } = useToast()
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
 const { getCollectionFrameUrl } = useSocialShare()
+const { toMintNFTs } = storeToRefs(useDropStore())
 
 const cantList = computed(() => !props.canListNfts)
 const txHash = computed(() => props.mintingSession.txHash ?? '')
@@ -42,30 +43,48 @@ const mintedNft = computed<MintedNFT | undefined>(
   () => props.mintingSession.items[0],
 )
 
-const items = computed<ItemMedia[]>(() =>
-  props.mintingSession.items.map(item => ({
-    id: item.id,
-    name: item.name,
-    image: item.image,
-    collection: item.collection.id,
-    collectionName: item.collection.name,
-    mimeType: item.mimeType,
-  })),
-)
+const itemMedias = props.mintingSession.items.map(item => ({
+  id: item.id,
+  name: item.name,
+  image: item.image,
+  collection: item.collection.id,
+  collectionName: item.collection.name,
+  mimeType: item.mimeType,
+  metadata: item.metadata,
+}))
+const items = ref<ItemMedia[]>(itemMedias)
+
+// update serial number in nft.name asynchronously
+onMounted(async () => {
+  const metadatas = await Promise.all(
+    items.value.map(item => $fetch<{ name?: string }>(item.metadata)),
+  )
+
+  items.value.forEach((_, index) => {
+    const metadata = metadatas[index]
+    if (metadata.name) {
+      items.value[index].name = metadata.name
+      toMintNFTs.value[index].name = metadata.name
+    }
+  })
+})
 
 const nftPath = computed(
-  () => `/${mintedNft.value?.chain}/gallery/${mintedNft.value?.id}`,
+  () =>
+    `/${mintedNft.value?.chain}/gallery/${mintedNft.value?.collection.id}-${mintedNft.value?.id}`,
 )
 const nftFullUrl = computed(() => `${window.location.origin}${nftPath.value}`)
 const userProfilePath = computed(
   () => `/${urlPrefix.value}/u/${accountId.value}`,
 )
 
+const getItemSn = (name: string) => `#${name.split('#')[1]}`
+
 const sharingTxt = computed(() =>
   singleMint.value
-    ? $i18n.t('sharing.dropNft', [`#${mintedNft.value?.index}`])
+    ? $i18n.t('sharing.dropNft', [getItemSn(items.value[0].name)])
     : $i18n.t('sharing.dropNfts', [
-      props.mintingSession.items.map(item => `#${item.index}`).join(', '),
+      items.value.map(item => getItemSn(item.name)).join(', '),
     ]),
 )
 

components/collection/drop/types.ts

@@ -33,8 +33,8 @@ export type MintedNFT = {
   chain: string
   name: string
   image: string
-  index: number
-  collection: { id: string, name: string, max: number }
+  collection: { id: string, name: string, max?: number }
+  metadata: string
   mimeType?: string
 }