Merge branch 'main' into feat-art-kind

components/base/MediaItem.vue

@@ -25,6 +25,7 @@
       :preview="preview"
       :autoplay="autoplay"
       :lazy-loading="lazyLoading"
+      :inner-class="innerClass"
     />
     <div
       v-if="isLewd && isLewdBlurredLayer"
@@ -101,6 +102,7 @@ const props = withDefaults(
     lazyLoading?: boolean
     enableNormalTag?: boolean
     sizes?: string
+    innerClass?: string
     imageComponent?:
       | string
       // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types

components/codeChecker/CodeChecker.vue

@@ -279,8 +279,7 @@ const onFileSelected = async (file: File) => {
   clear()
   startClock()
   selectedFile.value = file
-  const { indexFile, sketchFile, entries }
-    = await extractAssetsFromZip(file)
+  const { indexFile, sketchFile, p5File, entries } = await extractAssetsFromZip(file)
 
   if (!indexFile) {
     errorMessage.value = `Index file not found: Please make sure that “index.html” is in the root directory`
@@ -291,6 +290,12 @@ const onFileSelected = async (file: File) => {
     errorMessage.value = `Sketch file not found: ${config.sketchFile}`
     return
   }
+
+  if (!p5File) {
+    errorMessage.value = `p5 file not found: Please make sure that “p5.min.js” is in the root directory`
+    return
+  }
+
   const valid = validate(indexFile.content, sketchFile.content)
   if (!valid.isSuccess) {
     errorMessage.value = valid.error ?? 'Unknown error'

components/codeChecker/codechecker.config.js

@@ -1,6 +1,7 @@
 export default {
   iframeId: 'sketch-iframe',
   sketchFile: 'sketch.js',
+  p5File: 'p5.min.js',
   p5: 'p5',
   maxAllowedLoadTime: 3000, // in ms
   varaitionsOptions: [1, 3, 5, 10, 15, 20],

components/codeChecker/utils.ts

@@ -84,23 +84,29 @@ const calculateCommonPrefix = (filePaths: string[]): string => {
 const categorizeFiles = async (
   entries: { [key: string]: ZipEntry },
   commonPrefix: string,
-): Promise<{ htmlFiles: FileEntry[], jsFiles: FileEntry[] }> => {
+): Promise<{ htmlFiles: FileEntry[], jsFiles: FileEntry[], p5Files: FileEntry[] }> => {
   const htmlFiles: FileEntry[] = []
   const jsFiles: FileEntry[] = []
+  const p5Files: FileEntry[] = []
 
   for (const [path, file] of Object.entries(entries)) {
     const adjustedPath = path.replace(commonPrefix, '')
     const content = await file.text()
+    const isJsFile = path.endsWith('.js')
 
     if (path === 'index.html') {
       htmlFiles.push({ path: adjustedPath, content })
     }
-    else if (path.endsWith('.js') && !path.includes(config.p5)) {
+    // allows p5 libraries
+    else if (path.includes(config.p5) && isJsFile) {
+      p5Files.push({ path: adjustedPath, content })
+    }
+    else if (isJsFile) {
       jsFiles.push({ path: adjustedPath, content })
     }
   }
 
-  return { htmlFiles, jsFiles }
+  return { htmlFiles, jsFiles, p5Files }
 }
 
 // exported functions
@@ -130,6 +136,7 @@ export const extractAssetsFromZip = async (
 ): Promise<{
   indexFile: FileEntry
   sketchFile: FileEntry
+  p5File: FileEntry
   entries: { [key: string]: ZipEntry }
   jsFiles: FileEntry[]
 }> => {
@@ -138,14 +145,15 @@ export const extractAssetsFromZip = async (
 
   const commonPrefix = calculateCommonPrefix(filePaths)
 
-  const { htmlFiles, jsFiles } = await categorizeFiles(entries, commonPrefix)
-  const sketchFile = jsFiles.find(file =>
-    file.path.includes(config.sketchFile),
-  ) as FileEntry
+  const { htmlFiles, jsFiles, p5Files } = await categorizeFiles(entries, commonPrefix)
+
+  const sketchFile = jsFiles.find(file => file.path.includes(config.sketchFile)) as FileEntry
+  const p5File = p5Files.find(file => file.path.includes(config.p5File)) as FileEntry
 
   return {
     indexFile: htmlFiles[0],
     sketchFile,
+    p5File,
     entries,
     jsFiles,
   }

components/codeChecker/validate.ts

@@ -30,14 +30,16 @@ const constants = {
   localP5JsRegex: /<script.*src="(?!http)([^"]*p5[^"]*\.js)"/,
   titleTagRegex: /<title>(.*?)<\/title>/,
   kodaRendererRegex: /kodahash\/render\/completed/,
+  kodaRendererCalledRegex: /(?<!function\s)postMessageKoda\s*\(/,
   resizerRegex: /resizeCanvas\(/,
   disallowedTitle: 'KodaHash',
 }
 
 const validateCanvasCreation = (
   sketchFileContent: string,
 ): Result<RegExpExecArray> => {
-  const canvasMatch = constants.canvasRegex.exec(sketchFileContent)
+  // Create a new regex instance to avoid issues with lastIndex when using the global flag.
+  const canvasMatch = new RegExp(constants.canvasRegex).exec(sketchFileContent)
   if (!canvasMatch) {
     return { isSuccess: false, error: 'createCanvas function not found.' }
   }
@@ -141,7 +143,7 @@ const validateSketchContent = (
     canvasSize,
     localP5jsUsed: false, // This will be set based on HTML content checks
     validTitle: false, // This will be updated after HTML content checks
-    kodaRendererUsed: constants.kodaRendererRegex.test(sketchFileContent),
+    kodaRendererUsed: constants.kodaRendererRegex.test(sketchFileContent) && constants.kodaRendererCalledRegex.test(sketchFileContent),
     resizerUsed: constants.resizerRegex.test(sketchFileContent),
     usesHashParam: validateURLParamsUsage(sketchFileContent).isSuccess,
   }

components/collection/CollectionHeader/CollectionBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="collection-banner relative md:h-[560px] h-72 bg-no-repeat bg-cover bg-center border-b"
-    :style="{ backgroundImage: `url(${bannerImageUrl})` }"
+    :style="{ backgroundImage: `url(${collectionBanner})` }"
   >
     <div class="collection-banner-shadow absolute inset-0" />
 
@@ -55,38 +55,43 @@ const props = defineProps<{
 const route = useRoute()
 
 const collectionAvatar = ref('')
+const collectionBanner = ref('')
 const collectionName = ref('--')
 
-const bannerImageUrl = computed(
-  () => collectionAvatar.value && toOriginalContentUrl(collectionAvatar.value),
-)
-
 watch(() => props.collectionId, () => {
   collectionAvatar.value = ''
+  collectionBanner.value = ''
   collectionName.value = '--'
 })
 
 watchEffect(async () => {
   const collection = props.collection
   const metadata = collection?.metadata
   const image = collection?.meta?.image
+  const banner = collection?.meta?.banner || image
   const name = collection?.name
 
-  if (image && name) {
+  if (image && name && banner) {
     collectionAvatar.value = sanitizeIpfsUrl(image)
+    collectionBanner.value = toOriginalContentUrl(sanitizeIpfsUrl(banner))
     collectionName.value = name
   }
   else {
     const meta = (await processSingleMetadata(
       metadata as string,
     )) as NFTMetadata
     const metaImage = sanitizeIpfsUrl(meta?.image)
+    const metaBanner = meta?.banner ? sanitizeIpfsUrl(meta?.banner) : metaImage
     const metaName = meta?.name
 
     if (metaName) {
       collectionName.value = metaName
     }
 
+    if (metaBanner) {
+      collectionBanner.value = toOriginalContentUrl(metaBanner)
+    }
+
     if (metaImage) {
       collectionAvatar.value = metaImage
     }

components/collection/drop/GenerativePreview.vue

@@ -123,7 +123,7 @@ const { formatted: formattedPrice } = useAmount(
 )
 
 const emit = defineEmits(['generation:start', 'generation:end', 'mint'])
-const isUnlimited = computed(() => drop.value.max !== undefined && drop.value.max > Number.MAX_SAFE_INTEGER)
+const isUnlimited = computed(() => drop.value.max !== undefined && drop.value.max >= Number.MAX_SAFE_INTEGER)
 
 const { start: startTimer } = useTimeoutFn(() => {
   // quick fix: ensure that even if the completed event is not received, the loading state of the drop can be cleared

components/collection/drop/HolderOfGenerative.vue

@@ -157,7 +157,7 @@ const handleSubmitMint = async () => {
   // use paid modal if it's holder of + price
   if (isHolderOfWithPaidMint.value) {
     isMintModalActive.value = true
-    return await massGenerate()
+    return await massGenerate().catch(closeMintModal)
   }
 
   if (hasMinimumFunds.value) {

components/collection/drop/PaidGenerative.vue

@@ -103,7 +103,7 @@ const handleSubmitMint = async () => {
 
   doAfterCheckCurrentChainVM(() => {
     isMintModalActive.value = true
-    massGenerate()
+    massGenerate().catch(handleMintModalClose)
   })
 }
 

components/collection/drop/modal/PaidMint.vue

@@ -94,24 +94,11 @@ const { isTransactionSuccessful } = useTransactionSuccessful({
   isLoading,
 })
 
-const isSingleMintNotReady = computed(
-  () => amountToMint.value === 1 && !canMint.value,
-)
-
-const mintButton = computed(() => {
-  if (!canMint.value) {
-    return {
-      label: $i18n.t('drops.mintDropError'),
-      disabled: true,
-    }
-  }
-
-  return { label: $i18n.t('drops.proceedToSigning'), disabled: false }
-})
+const mintButton = { label: $i18n.t('drops.proceedToSigning'), disabled: false }
 
 const loading = computed(
   () =>
-    isSingleMintNotReady.value
+    !canMint.value
     || mintOverview.value?.loading
     || (autoteleportCompleted.value && !moveSuccessfulDrop.value)
     || false,

components/collection/utils/useCollectionDetails.ts

@@ -145,6 +145,7 @@ export const useCollectionMinimal = ({
 
       collection.value = collectionData
     },
+    { immediate: true },
   )
 
   watchEffect(async () => {

components/common/ChooseCollectionDropdown.vue

@@ -102,7 +102,7 @@ const props = defineProps({
 
 const { isLogIn, accountId } = useAuth()
 
-const { collectionsEntites, isLoading } = useCollectionForMint()
+const { collections: collectionsEntites, isLoading } = useCollectionForMint()
 const selectedCollection = ref<MintedCollection>()
 
 const disabled = computed(() => !isLogIn.value || isLoading.value)

components/common/ConnectWallet/ConnectEvm.vue

@@ -30,7 +30,6 @@ import { useAccount, useDisconnect, useConnections } from '@wagmi/vue'
 const emits = defineEmits(['select'])
 
 const { address, isConnected, isConnecting, chainId } = useAccount()
-const { urlPrefix, setUrlPrefix } = usePrefix()
 const { modal } = useWeb3Modal()
 const { disconnectAsync: disconnect } = useDisconnect()
 const connections = useConnections()
@@ -47,15 +46,12 @@ watch([address, isConnected, chainId], ([address, isConnected, chainId]) => {
   const chainPrefix = CHAIN_ID_TO_PREFIX?.[chainId ?? '']
 
   if (address && isConnected && chainId && chainPrefix) {
-    const isCorrectChainConnected = chainPrefix === urlPrefix.value
-
-    if (!isCorrectChainConnected) {
-      setUrlPrefix(chainPrefix)
-    }
-
     emits('select', {
-      address: address as string,
-      vm: 'EVM',
+      account: {
+        address: address as string,
+        vm: 'EVM',
+      },
+      prefix: chainPrefix,
     })
   }
 })

components/common/ConnectWallet/ConnectSubstrate.vue

@@ -119,11 +119,13 @@ const installedWallet = computed(() => {
 const setAccount = (account: SubstrateWalletAccount) => {
   forceWalletSelect.value = false
   emits('select', {
-    address: account.address,
-    extension: account.source,
-    name: account.name,
-    vm: 'SUB',
-  } as WalletAccount)
+    account: {
+      address: account.address,
+      extension: account.source,
+      name: account.name,
+      vm: 'SUB',
+    } as WalletAccount,
+  })
 }
 
 const refreshWallets = () => {

components/common/ConnectWallet/ConnectWalletModal.vue

@@ -50,9 +50,11 @@
 
 <script setup lang="ts">
 import { NeoModalHead } from '@kodadot1/brick'
-import { type ChainVM, DEFAULT_VM_PREFIX } from '@kodadot1/static'
+import { type ChainVM, type Prefix } from '@kodadot1/static'
+import { DEFAULT_VM_PREFIX } from '@kodadot1/static'
 import WalletAsset from '@/components/common/ConnectWallet/WalletAsset.vue'
 import { ModalCloseType } from '@/components/navbar/types'
+import { arePrefixesOfSameVm } from '@/utils/config/chain.config'
 
 const emit = defineEmits(['close', 'connect'])
 const props = defineProps<{ preselected?: ChainVM }>()
@@ -68,14 +70,15 @@ const selectedTab = ref<ChainVM>(props.preselected ?? 'SUB')
 
 const showAccount = computed(() => Boolean(account.value))
 
-const setAccount = (account: WalletAccount) => {
+const setAccount = ({ account, prefix }: { account: WalletAccount, prefix?: Prefix }) => {
+  prefix ??= DEFAULT_VM_PREFIX[account.vm]
+
   walletStore.setWallet(account)
   identityStore.setAuth({ address: account.address })
 
-  if (!isPrefixVmOf(urlPrefix.value, account.vm)) {
-    const newChain = DEFAULT_VM_PREFIX[account.vm]
-    setUrlPrefix(newChain)
-    redirectAfterChainChange(newChain)
+  if (!arePrefixesOfSameVm(prefix, urlPrefix.value)) {
+    setUrlPrefix(prefix)
+    redirectAfterChainChange(urlPrefix.value)
   }
 
   emit('connect', account)

components/common/Notification.vue

@@ -58,8 +58,6 @@ import {
   NeoMessage,
 } from '@kodadot1/brick'
 
-type NotificationAction = { label: string, url: string, icon?: string }
-
 const emit = defineEmits(['close'])
 const props = withDefaults(
   defineProps<{

components/common/autoTeleport/AutoTeleportActionButton.vue

@@ -62,6 +62,7 @@
         :disabled="isDisabled"
         :loading="loading"
         :loading-with-label="loading"
+        with-shortcut
         class="flex flex-grow btn-height capitalize"
         @click="handleSubmit"
       />
@@ -90,6 +91,7 @@
 
     <OnRampModal
       v-model="onRampActive"
+      no-overlap
       @close="onRampActive = false"
     />
   </div>