Merge branch 'main' into issue-expired-status-delay

Author: vikiival

.github/diagram.svg

@@ -155,11 +155,6 @@ $placeholder-color: #cccccc;
 $search-background-color: #1a1718;
 $select-border-color: #7d7d7d;
 
-$frosted-glass-background: rgba(12, 12, 12, 0.7);
-$frosted-glass-background-dark: #b0b0b0ad;
-$frosted-glass-backdrop-filter: blur(20px);
-$frosted-glass-light-backdrop-filter: blur(4px);
-
 $sleek-primary-border: 1px solid $primary;
 
 $table-sticky-header-height: 60vh;

assets/styles/abstracts/_variables.scss

@@ -66,12 +66,8 @@ const generateMassPreview = () => {
   }))
 }
 
-useEventListener(window, 'message', async (res) => {
-  const hash = res.data.payload.hash
-  if (
-    res.data?.type === 'kodahash/render/completed'
-    && canvasPreviews.value.map(p => p.hash).includes(hash)
-  ) {
+onKodahashRenderCompleted(({ payload: { hash } }) => {
+  if (canvasPreviews.value.map(p => p.hash).includes(hash)) {
     canvasPreviews.value = canvasPreviews.value.map(preview =>
       preview.hash === hash
         ? { ...preview, renderedAt: performance.now(), loading: false }

components/MessageNotify.vue

@@ -1,17 +1,18 @@
 import type { ZipEntry } from 'unzipit'
 import { unzip } from 'unzipit'
 import { blake2AsHex } from '@polkadot/util-crypto'
-import config from './codechecker.config'
-import type { AssetMessage } from './types'
+import config from '../codechecker.config'
+import type { AssetMessage } from '../types'
+import { hasFileProcessing, processFile } from './processing'
 
 type FileEntry = { path: string, content: string }
 
-const cleanFileName = (path) => {
+const cleanFileName = (path): string => {
   const parts = path.split('/')
   return parts[parts.length - 1] // Returns only the file name
 }
 
-const createBlobUrlForEntry = async (entry, mimeType) => {
+const createBlobUrlForEntry = async (entry: ZipEntry, mimeType: string) => {
   const blob = await entry.blob()
   const typedBlob = new Blob([blob], { type: mimeType })
   return URL.createObjectURL(typedBlob)
@@ -39,8 +40,7 @@ const extractAssetAttributes = (
 // process and add a single asset to the assets array
 const processAsset = async (element, entries, assets) => {
   const attributes = extractAssetAttributes(element)
-  const assetType
-    = element.tagName.toLowerCase() === 'script' ? 'script' : 'style'
+  const assetType = element.tagName.toLowerCase() === 'script' ? 'script' : 'style'
 
   const asset: AssetMessage = {
     type: assetType,
@@ -55,15 +55,28 @@ const processAsset = async (element, entries, assets) => {
   }
 
   const cleanName = cleanFileName(attributes.srcOrHref)
-  const matchingEntryKey = Object.keys(entries).find(key =>
-    key.endsWith(cleanName),
-  )
+  const matchingEntryKey = Object
+    .keys(entries)
+    .find(key => key.endsWith(cleanName))
 
-  if (matchingEntryKey) {
-    const blobUrl = await createBlobUrlForEntry(
-      entries[matchingEntryKey],
-      attributes.mimeType,
-    )
+  if (!matchingEntryKey) {
+    return
+  }
+
+  const entry = entries[matchingEntryKey] as ZipEntry
+
+  if (hasFileProcessing(cleanName)) {
+    const blobUrl = await processFile({
+      entry,
+      entries,
+      mimeType: attributes.mimeType,
+      fileName: cleanName,
+    })
+    asset.src = blobUrl
+    assets.push(asset)
+  }
+  else {
+    const blobUrl = await createBlobUrlForEntry(entry, attributes.mimeType)
     asset.src = blobUrl
     assets.push(asset)
   }
@@ -162,7 +175,7 @@ export const extractAssetsFromZip = async (
 export const createSandboxAssets = async (
   indexFile: FileEntry,
   entries: { [key: string]: ZipEntry },
-) => {
+): Promise<Array<AssetMessage>> => {
   const assets: Array<AssetMessage> = []
   const htmlContent = indexFile.content
   const parser = new DOMParser()
@@ -175,6 +188,7 @@ export const createSandboxAssets = async (
   for (const element of assetElements) {
     await processAsset(element, entries, assets)
   }
+
   return assets
 }
 

components/codeChecker/massPreview/Canvas.vue

@@ -0,0 +1,98 @@
+import type { ZipEntry } from 'unzipit'
+import config from '../codechecker.config'
+import { getObjectUrl, getUpload, uploadFile } from '@/services/playground'
+import { getCorsProxiedUrl } from '@/services/cors-proxy'
+
+type FileProcessingHandler = {
+  processInstance: (params: { content: string, entry: ZipEntry, entries: Record<string, ZipEntry> }) => Promise<string>
+  findAll: (content: string) => RegExpMatchArray | null
+}
+
+const loadTableHandler: FileProcessingHandler = {
+  findAll: (content: string) => content.match(/loadTable\([^)]+\)/g),
+  processInstance: async ({ content, entries }) => {
+    const match = content.match(/loadTable\(['"]([^'"]*)['"](.*?)\)/)
+
+    if (!match) {
+      return content
+    }
+
+    const [, fileUrl = '', params = ''] = match
+
+    if (fileUrl.includes('http')) {
+      return content
+    }
+
+    const file = entries[fileUrl] as ZipEntry
+
+    if (!file) {
+      return content
+    }
+
+    const { key } = await uploadFile({
+      file: await file.blob(),
+      fileName: fileUrl,
+      prefix: 'codeChecker',
+    })
+
+    await exponentialBackoff(() => getUpload(key)).catch(console.log)
+
+    // proxy fixes issue with cors
+    const url = getCorsProxiedUrl(getObjectUrl(key))
+
+    return `loadTable("${url}"${params})`
+  },
+}
+
+const fileHandlers: Record<string, FileProcessingHandler[]> = {
+  [config.sketchFile]: [
+    loadTableHandler,
+  ],
+}
+
+const processFileHandler = async ({ content, entry, handler, entries }: { content: string, entry: ZipEntry, entries: Record<string, ZipEntry>, handler: FileProcessingHandler }): Promise<string> => {
+  const matches = handler.findAll(content)
+
+  if (!matches) return content
+
+  let updatedContent = content
+
+  for (const match of matches) {
+    const replacement = await handler.processInstance({
+      entry,
+      content: updatedContent,
+      entries,
+    })
+
+    updatedContent = updatedContent.replace(match, replacement)
+  }
+
+  return updatedContent
+}
+
+export const processFile = async ({
+  entry,
+  mimeType,
+  entries,
+  fileName,
+}: {
+  entry: ZipEntry
+  mimeType: string
+  entries: Record<string, ZipEntry>
+  fileName: string
+},
+): Promise<string> => {
+  let content = await entry.text()
+
+  for (const handler of fileHandlers[fileName]) {
+    if (handler.findAll(content)) {
+      content = await processFileHandler({ handler, content, entry, entries })
+    }
+  }
+
+  return URL.createObjectURL(new Blob([content], { type: mimeType }))
+}
+
+export const hasFileProcessing = (fileName: string): boolean => {
+  return fileHandlers[fileName] !== undefined
+}

components/codeChecker/utils.ts components/codeChecker/utils/index.tscomponents/codeChecker/utils.ts renamed to components/codeChecker/utils/index.ts

@@ -137,27 +137,18 @@ watch(collectionsEntites, handleCollectionsChange, { immediate: true })
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-
 .dropdown-width {
   width: 30rem;
+
+  @apply bulma-mobile:w-full;
 }
 
 .full-width {
   width: 100%;
+
   .dropdown-width,
   :deep(.o-drop__menu) {
     width: 100%;
   }
 }
-
-@include mobile {
-  .dropdown-width {
-    width: 100%;
-  }
-
-  .mobile-width {
-    min-width: 6rem;
-  }
-}
 </style>

components/codeChecker/utils/processing.ts

@@ -116,8 +116,6 @@ const closeModal = () => {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-
 .wallet-asset-menu {
   display: flex;
   justify-content: space-between;
@@ -132,28 +130,24 @@ const closeModal = () => {
 .wallet-asset-footer {
   border-top: 1px solid grey;
   justify-content: space-between;
-  @include mobile {
-    justify-content: center;
-    .language-selector {
-      margin: 0 2rem;
-    }
+
+  @apply bulma-mobile:justify-center;
+
+  .language-selector {
+    @apply bulma-mobile:my-8 bulma-mobile:mx-0;
   }
 
   & > * {
     @apply cursor-pointer flex gap-1;
 
     &:hover {
-      @include ktheme() {
-        color: theme('text-color');
-      }
+      @apply text-text-color;
     }
   }
 
-  @include tablet {
-    // manually center dropdown menu, because no props "postition" to center it
-    :deep(.o-drop__menu) {
-      transform: translateX(50px);
-    }
+  /* manually center dropdown menu, because no props "position" to center it */
+  :deep(.o-drop__menu) {
+    @apply bulma-tablet:translate-x-[50px]
   }
 }
 </style>

components/common/ChooseCollectionDropdown.vue

@@ -60,21 +60,17 @@ watchEffect(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-
 .nfts {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1rem;
 
   & > * {
-    @include ktheme() {
-      border: 1px solid theme('k-grey');
+    border: 1px solid var(--k-grey);
 
-      &:hover {
-        border-color: theme('border-color');
-        opacity: 0.85;
-      }
+    &:hover {
+      border-color: var(--border-color);
+      opacity: 0.85;
     }
   }
 }

components/common/ConnectWallet/WalletAssetMenu.vue

@@ -336,8 +336,6 @@ watchDebounced(
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-
 .btn-height {
   height: 3.5rem;
 }