Merge branch 'main' of https://github.com/kodadot/nft-gallery into PO…

…C-gql-tada

components/codeChecker/CodeChecker.vue

@@ -105,7 +105,7 @@
           </template>
         </CodeCheckerTestItem>
         <CodeCheckerTestItem
-          :passed="!fileValidity.webGLSupported"
+          :passed="!fileValidity.webGlUsed"
           :description="$t('codeChecker.notUsingWebGl')">
           <template #modalContent>
             <CodeCheckerIssueHintNoWebGl />
@@ -156,7 +156,7 @@
 
 <script lang="ts" setup>
 import { NeoIcon } from '@kodadot1/brick'
-import { validate } from './validate'
+import { validate, webGlUsed } from './validate'
 import { createSandboxAssets, extractAssetsFromZip } from './utils'
 import config from './codechecker.config'
 import { AssetMessage, Validity } from './types'
@@ -178,7 +178,7 @@ const RESOURCES_LIST = [
 
 const validtyDefault: Validity = {
   canvasSize: '',
-  webGLSupported: false,
+  webGlUsed: false,
   localP5jsUsed: false,
   kodaRendererUsed: 'unknown',
   resizerUsed: 'unknown',
@@ -204,7 +204,8 @@ const onFileSelected = async (file: File) => {
   clear()
   startClock()
   selectedFile.value = file
-  const { indexFile, sketchFile, entries } = await extractAssetsFromZip(file)
+  const { indexFile, sketchFile, entries, jsFiles } =
+    await extractAssetsFromZip(file)
 
   if (!sketchFile) {
     errorMessage.value = `Sketch file not found: ${config.sketchFile}`
@@ -216,6 +217,9 @@ 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'

components/codeChecker/codechecker.config.js

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

components/codeChecker/types.ts

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

components/codeChecker/utils.ts

@@ -93,7 +93,7 @@ const categorizeFiles = async (
 
     if (path.endsWith('index.html')) {
       htmlFiles.push({ path: adjustedPath, content })
-    } else if (path.endsWith(config.sketchFile)) {
+    } else if (path.endsWith('.js') && !path.includes(config.p5)) {
       jsFiles.push({ path: adjustedPath, content })
     }
   }
@@ -126,18 +126,23 @@ export const extractAssetsFromZip = async (
   indexFile: FileEntry
   sketchFile: FileEntry
   entries: { [key: string]: ZipEntry }
+  jsFiles: FileEntry[]
 }> => {
   const { entries } = await unzip(zip)
   const filePaths = Object.keys(entries)
 
   const commonPrefix = calculateCommonPrefix(filePaths)
 
   const { htmlFiles, jsFiles } = await categorizeFiles(entries, commonPrefix)
+  const sketchFile = jsFiles.find((file) =>
+    file.path.includes(config.sketchFile),
+  ) as FileEntry
 
   return {
     indexFile: htmlFiles[0],
-    sketchFile: jsFiles[0],
+    sketchFile,
     entries,
+    jsFiles,
   }
 }
 

components/codeChecker/validate.ts

@@ -10,7 +10,6 @@ type HtmlContentValidationResult = {
 type InnerValidity = Pick<
   Validity,
   | 'canvasSize'
-  | 'webGLSupported'
   | 'localP5jsUsed'
   | 'validTitle'
   | 'kodaRendererUsed'
@@ -20,8 +19,8 @@ type InnerValidity = Pick<
 >
 
 const constants = {
-  canvasRegex: /createCanvas\(([^,]+?),\s*([^\s,]+?)(,\s*WEBGL)?\)/,
-  graphicsRegex: /createGraphics\(([^,]+?),\s*([^\s,]+?)(,\s*WEBGL)?\)/,
+  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*/,
@@ -42,6 +41,24 @@ 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> => {
@@ -99,7 +116,6 @@ const validateSketchContent = (
 ): Pick<
   Validity,
   | 'canvasSize'
-  | 'webGLSupported'
   | 'localP5jsUsed'
   | 'validTitle'
   | 'kodaRendererUsed'
@@ -115,9 +131,6 @@ const validateSketchContent = (
 
   return {
     canvasSize,
-    webGLSupported: Boolean(
-      canvasMatch[3] || constants.graphicsRegex.exec(sketchFileContent)?.[3],
-    ),
     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),

components/profile/ProfileDetail.vue

@@ -202,18 +202,18 @@
             <span class="text-sm text-k-grey">
               {{ $t('profile.followedBy') }}:
             </span>
-            <div class="flex -space-x-3">
-              <NuxtLink
-                v-for="(follower, index) in followers?.followers"
-                :key="index"
-                :to="`/${urlPrefix}/u/${formatAddress(follower.address, chainProperties.ss58Format)}`">
+            <NeoButton variant="text" no-shadow @click="onFollowersClick">
+              <div class="flex -space-x-3">
                 <NuxtImg
+                  v-for="(follower, index) in followers?.followers"
+                  :key="index"
                   :src="follower.image"
                   alt="follower avatar"
                   class="w-8 h-8 rounded-full border object-cover"
                   :style="{ zIndex: 3 - index }" />
-              </NuxtLink>
-            </div>
+              </div>
+            </NeoButton>
+
             <span v-if="followersCount > 3" class="text-sm">
               +
               {{ followersCount - (followers?.followers?.length ?? 0) }}
@@ -417,7 +417,6 @@ const { urlPrefix, client } = usePrefix()
 const { shareOnX, shareOnFarcaster } = useSocialShare()
 const { isRemark } = useIsChain(urlPrefix)
 const listingCartStore = useListingCartStore()
-const { chainProperties } = useChain()
 
 const { hasProfile, userProfile, fetchProfile } = useProfile()
 
@@ -428,12 +427,12 @@ const { data: isFollowingThisAccount, refresh: refreshFollowingStatus } =
     isFollowing(accountId.value, route.params?.id as string),
   )
 
-const { data: followers, refresh: refreshFollowers } = await useAsyncData(
+const { data: followers, refresh: refreshFollowers } = useAsyncData(
   'followers',
   () => fetchFollowersOf(route.params.id as string, 3),
 )
 
-const { data: following, refresh: refreshFollowing } = await useAsyncData(
+const { data: following, refresh: refreshFollowing } = useAsyncData(
   'following',
   () => fetchFollowing(route.params.id as string, 1),
 )

composables/autoTeleport/useAutoTeleportTransitionDetails.ts

@@ -15,7 +15,7 @@ import {
   getChainExistentialDeposit,
 } from './utils'
 
-const BUFFER_FEE_PERCENT = 0.2
+const BUFFER_FEE_PERCENT = 0.4
 const BUFFER_AMOUNT_PERCENT = 0.02
 
 const DEFAULT_AUTO_TELEPORT_FEE_PARAMS = {

libs/static/package.json

@@ -35,8 +35,8 @@
     "eslint": "^8.57.0",
     "eslint-config-unjs": "^0.2.1",
     "prettier": "^3.2.5",
-    "typescript": "^5.4.4",
+    "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
-    "vitest": "^1.4.0"
+    "vitest": "^1.6.0"
   }
 }

libs/ui/package.json

@@ -23,10 +23,10 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.6",
-    "@google/model-viewer": "^3.4.0",
+    "@google/model-viewer": "^3.5.0",
     "@vueuse/core": "^9.13.0",
     "bulma": "0.9.4",
-    "three": "^0.163.0",
-    "vue": "^3.4.21"
+    "three": "^0.164.1",
+    "vue": "^3.4.27"
   }
 }

package.json

@@ -69,7 +69,7 @@
     "@kodadot1/minipfs": "0.4.3-rc.1",
     "@kodadot1/static": "workspace:*",
     "@kodadot1/sub-api": "0.3.1-rc.0",
-    "@nuxt/image": "^1.5.0",
+    "@nuxt/image": "^1.7.0",
     "@nuxtjs/apollo": "5.0.0-alpha.6",
     "@paraspell/sdk": "^5.2.1",
     "@pinia/nuxt": "^0.5.1",
@@ -86,7 +86,7 @@
     "@polkadot/vue-identicon": "^3.6.6",
     "@ramp-network/ramp-instant-sdk": "^4.0.5",
     "@transak/transak-sdk": "^1.4.1",
-    "@types/node": "^20.12.5",
+    "@types/node": "^20.12.11",
     "@vitejs/plugin-vue": "^5.0.4",
     "chart.js": "^4.4.2",
     "chartjs-adapter-date-fns": "^3.0.0",
@@ -109,32 +109,32 @@
     "qrcode.vue": "^3.4.1",
     "slugify": "^1.6.6",
     "unzipit": "^1.4.3",
-    "viem": "^2.9.31",
+    "viem": "^2.10.5",
     "vue-apollo": "^3.1.2",
-    "vue-chartjs": "^5.3.0",
+    "vue-chartjs": "^5.3.1",
     "vue-dompurify-html": "^4.1.4",
     "vue-tippy": "^6.4.1",
-    "wavesurfer.js": "^7.7.10",
+    "wavesurfer.js": "^7.7.14",
     "workbox-window": "^6.6.0"
   },
   "devDependencies": {
     "@0no-co/graphqlsp": "^1.12.2",
     "@dargmuesli/nuxt-cookie-control": "^7.5.1",
     "@nuxt/content": "^2.12.1",
     "@nuxt/types": "^2.17.3",
-    "@nuxtjs/color-mode": "^3.3.3",
+    "@nuxtjs/color-mode": "^3.4.1",
     "@nuxtjs/device": "^3.1.1",
     "@nuxtjs/google-fonts": "^3.2.0",
-    "@nuxtjs/i18n": "^8.3.0",
-    "@nuxtjs/sitemap": "^5.1.3",
-    "@playwright/test": "^1.43.0",
+    "@nuxtjs/i18n": "^8.3.1",
+    "@nuxtjs/sitemap": "^5.1.5",
+    "@playwright/test": "^1.44.0",
     "@types/jest": "^27.5.2",
-    "@types/lodash": "^4.17.0",
-    "@types/markdown-it": "^13.0.7",
-    "@types/prismjs": "^1.26.3",
+    "@types/lodash": "^4.17.1",
+    "@types/markdown-it": "^13.0.8",
+    "@types/prismjs": "^1.26.4",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@vite-pwa/nuxt": "^0.6.0",
+    "@vite-pwa/nuxt": "^0.7.0",
     "@vitest/coverage-istanbul": "^0.34.6",
     "@vueuse/core": "^9.13.0",
     "@vueuse/nuxt": "^9.13.0",
@@ -155,7 +155,7 @@
     "nuxt-gtag": "^1.2.1",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "sass": "^1.74.1",
+    "sass": "^1.77.1",
     "tailwindcss": "^3.4.3",
     "vite-svg-loader": "^5.1.0",
     "vitest": "^0.34.6",