Merge pull request #10800 from kodadot/main

(beta): Mid-August 2024 Shark 🦈

.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

QA.md

@@ -12,27 +12,28 @@ KodaDot, an NFT gallery that aims to be builder-owned and the ultimate public go
 - Participate in code reviews, maintaining high code quality standards
 - Use various testing methodologies and tools to validate the functionality and performance of the product
 - Offload 30% of dev work by checking if specific PRs work as intended, reporting and raising bugs that break UX, identifying missing functionality that was accidentally removed
-- Write and update E2E and unit tests (using Vite)
+- Write and update end-to-end (E2E) and unit tests (using Playwright/Vitest)
 - Communicate with the team in issues to help offload major context switching from devs
 - Tech-savvy QA is preferred
 - Give "works-for-me" labels on PRs if things work as intended
 
 ## Requirements
 
-- Strong proficiency in Node.js and adherence to its supported versions
+- Strong proficiency in Node.js/Typescript and adherence to its supported versions
 - Experience with pnpm as a package manager
-- Knowledge of Vue.js and familiarity with Vue Language Features (Volar) and Vue VSCode Snippets
+- Knowledge of Vue.js and familiarity with Nuxt framework
 - Understanding of KodaDot's tech stack and infrastructure
 - Strong communication skills for effective collaboration with the community and team
 - Familiarity with KodaDot's coding conventions and recommendations
+- Knowledge of GraphQL / REST API is an andvantage
 
 ## Quality Assurance
 
 To have a faster pace of development, as our current pace of pull-requests was hitting 250 pull-requests in February on a monthly average, we've realized we need more people to participate and to share more humble and honest feedback with developers on their work.
 
 The result would be that we could deliver user experience quality in a shorter time window. It's pretty natural that developers sometimes miss delivering the 100% specification in an issue or something breaks. It happens, and no need to make drama out of it. Everyone is learning.
 
-Until we have e2e tests complete on KodaDot, we would like to happily reward your participation for your input on our pull-requests to the codebase.
+Until we have E2E tests complete on KodaDot, we would like to happily reward your participation for your input on our pull-requests to the codebase.
 
 To participate, you must respect our code of conduct below.
 

components/Navbar.vue

@@ -97,7 +97,7 @@
         <!-- NAV END -->
         <div class="navbar-end">
           <nuxt-link
-            to="/ahp/drops"
+            :to="dropsPath"
             rel="nofollow"
           >
             <div
@@ -250,7 +250,7 @@
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
 import { nextTick } from 'vue'
 import ShoppingCartButton from './navbar/ShoppingCartButton.vue'
-import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
+import { openConnectWalletModal } from '@/components/common/ConnectWallet/useConnectWallet'
 import ChainSelectDropdown from '@/components/navbar/ChainSelectDropdown.vue'
 import CreateDropdown from '@/components/navbar/CreateDropdown.vue'
 import MobileExpandableSection from '@/components/navbar/MobileExpandableSection.vue'
@@ -287,6 +287,14 @@ const logoSrc = computed(() => {
   return `/${variant}${color}.svg`
 })
 
+const dropsPath = computed(() => {
+  const prefix = pickByVm({
+    SUB: 'ahp',
+    EVM: urlPrefix.value,
+  })
+  return `/${prefix}/drops`
+})
+
 const handleMobileChainSelect = () => {
   showMobileNavbar()
 }
@@ -295,10 +303,7 @@ const closeAllModals = () => neoModal.closeAll()
 
 const openWalletConnectModal = (): void => {
   closeAllModals()
-  neoModal.open({
-    ...ConnectWalletModalConfig,
-    ...(isMobile ? { animation: 'none' } : {}),
-  })
+  openConnectWalletModal()
 }
 
 const showMobileNavbar = () => {

components/balance/MultipleBalances.vue

@@ -66,6 +66,7 @@
         v-if="isBalanceLoading"
         data-testid="skeleton-multiple-balances"
         animated
+        no-margin
       />
     </div>
 
@@ -107,6 +108,7 @@ const displayChainOrder: ChainType[] = [
   'kusamaHub',
 ]
 const identityStore = useIdentityStore()
+
 const rampActive = ref(false)
 
 const { multiBalances } = useMultipleBalance(true)

components/carousel/CarouselTypeDrops.vue

@@ -8,7 +8,11 @@
         :items="drops"
         :config="config"
       >
-        <DropsDropCard :drop="item" />
+        <DropsDropCard
+          :drop="item"
+          emit-on-click
+          @click="onDropClick"
+        />
       </CarouselModuleCarouselAgnostic>
       <CarouselModuleCarouselAgnostic
         v-else
@@ -22,23 +26,31 @@
 </template>
 
 <script lang="ts" setup>
+import type { Drop } from '@/components/drops/useDrops'
 import { useDrops } from '@/components/drops/useDrops'
+import { openReconnectWalletModal } from '@/components/common/ConnectWallet/openReconnectWalletModal'
+import { vmOf } from '@/utils/config/chain.config'
 
 let queries = {
-  limit: 12,
+  limit: 14,
   active: [true],
-  chain: ['ahp'],
+  chain: ['ahp', 'base'],
 }
 
-if (!isProduction) {
+const { urlPrefix } = usePrefix()
+const { getWalletVM } = storeToRefs(useWalletStore())
+
+if (!isProduction && urlPrefix.value === 'ahk') {
   queries = {
     ...queries,
-    chain: ['ahp', 'ahk'],
+    chain: ['ahk'],
   }
 }
 
 const container = ref()
+const { accountId } = useAuth()
 
+const router = useRouter()
 const { cols, isReady: isDynamicGridReady } = useDynamicGrid({
   container,
   itemMintWidth: computed(() => DROP_CARD_MIN_WIDTH),
@@ -52,6 +64,17 @@ 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 }) => {
+  if (getWalletVM.value === vmOf(drop.chain) || !accountId.value) {
+    router.push(path)
+    return
+  }
+
+  openReconnectWalletModal({
+    onSuccess: () => router.push(path),
+  })
+}
 </script>

components/carousel/CarouselTypeGenerative.vue

@@ -1,14 +1,25 @@
 <template>
-  <CarouselIndex
-    data-testid="generative-activity"
-    :title="$t('general.generativeArt')"
-    :nfts="nfts.value"
-    action-type="pagination"
-  />
+  <div ref="carouselDrop">
+    <CarouselIndex
+      data-testid="generative-activity"
+      :title="$t('general.generativeArt')"
+      :nfts="nfts.value"
+      action-type="pagination"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { useElementVisibility } from '@vueuse/core'
 import { useCarouselGenerativeNftEvents } from './utils/useCarouselEvents'
+import { useProfileOnboardingStore } from '@/stores/profileOnboarding'
 
 const nfts = useCarouselGenerativeNftEvents()
+const carouselDrop = ref()
+
+watch([useElementVisibility(carouselDrop)], ([isVisible]) => {
+  if (isVisible) {
+    useProfileOnboardingStore().setCarouselVisited()
+  }
+})
 </script>

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,19 +226,19 @@
 
 <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'
 
 const RESOURCES_LIST = [
   {
     title: 'codeChecker.kodahashTemplate',
-    url: 'https://hello.kodadot.xyz/tutorial/generative-art',
+    url: 'https://github.com/vikiival/kodahash',
   },
   {
     title: 'codeChecker.learnAboutGenArt',
-    url: 'https://github.com/vikiival/kodahash',
+    url: 'https://hello.kodadot.xyz/tutorial/generative-art',
   },
   {
     title: 'codeChecker.codeChecker',
@@ -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',