From 60e5857dd01966ceec195d32f25f1e74010af09b Mon Sep 17 00:00:00 2001 From: roiLeo Date: Wed, 10 Jul 2024 15:25:21 +0200 Subject: [PATCH 01/53] =?UTF-8?q?=E2=9C=A8=20drops=20page=20shortcuts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../collection/drop/GenerativePreview.vue | 10 ++++++++++ components/collection/drop/MintStepper.vue | 13 +++++++++++++ .../shared/modals/keyboardShortcutsModal.vue | 18 +++++++++++++++++- 3 files changed, 40 insertions(+), 1 deletion(-) diff --git a/components/collection/drop/GenerativePreview.vue b/components/collection/drop/GenerativePreview.vue index 8cb08edde4..4cd5b2e184 100644 --- a/components/collection/drop/GenerativePreview.vue +++ b/components/collection/drop/GenerativePreview.vue @@ -140,6 +140,16 @@ const generateNft = () => { imageDataPayload.value = undefined } +function bindDropsEvents(event: KeyboardEvent) { + switch (event.key) { + case 'n': + generateNft() + break + } +} + +useKeyboardEvents({ v: bindDropsEvents }) + watch(imageDataLoaded, () => { if (imageDataLoaded.value) { dropStore.setIsCapturingImage(false) diff --git a/components/collection/drop/MintStepper.vue b/components/collection/drop/MintStepper.vue index 295206e48e..878972f2bf 100644 --- a/components/collection/drop/MintStepper.vue +++ b/components/collection/drop/MintStepper.vue @@ -34,4 +34,17 @@ const max = computed(() => { return dropMax }) + +function bindDropsEvents(event: KeyboardEvent) { + switch (event.key) { + case '-': + amountToMint.value-- + break + case '+': + amountToMint.value++ + break + } +} + +useKeyboardEvents({ v: bindDropsEvents }) diff --git a/components/shared/modals/keyboardShortcutsModal.vue b/components/shared/modals/keyboardShortcutsModal.vue index cdbdf28145..6271084283 100644 --- a/components/shared/modals/keyboardShortcutsModal.vue +++ b/components/shared/modals/keyboardShortcutsModal.vue @@ -44,6 +44,7 @@ interface DifferentTypeShortCuts { navigation: { text: string; shortcut: string }[] item_detail: { text: string; shortcut: string }[] filters: { text: string; shortcut: string }[] + drops: { text: string; shortcut: string }[] } interface DifferentTypeName { @@ -146,6 +147,20 @@ const data = ref({ shortcut: 'f+o', }, ], + drops: [ + { + text: 'New variation', + shortcut: 'v+n', + }, + { + text: 'Mint +1', + shortcut: 'v+-', + }, + { + text: 'Mint -1', + shortcut: 'v++', + }, + ], }) const labels = ref({ @@ -157,11 +172,12 @@ const labels = ref({ const types = ref(Object.keys(data)) const addShortcuts = (shortcuts): DifferentTypeShortCuts => { - const { navigation, item_detail, filters } = data.value + const { navigation, item_detail, filters, drops } = data.value return { navigation, item_detail, + drops, filters: [...filters, ...shortcuts], } } From 26a1ca6dad419f2f6eba35cd67834410d464ed68 Mon Sep 17 00:00:00 2001 From: roiLeo Date: Wed, 17 Jul 2024 12:00:23 +0200 Subject: [PATCH 02/53] =?UTF-8?q?=E2=9C=A8=20KeyboardShortcutModal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/shared/modals/keyboardShortcutsModal.vue | 4 ++-- layouts/centered-half-layout.vue | 1 + layouts/default.vue | 1 + layouts/full-width-layout.vue | 1 + layouts/full-width-no-footer.vue | 1 + layouts/gallery-item-layout.vue | 1 + layouts/no-footer.vue | 1 + layouts/teleport-layout.vue | 1 + layouts/unlockable-mint-layout.vue | 1 + plugins/keyboardEvents.client.ts | 2 +- 10 files changed, 11 insertions(+), 3 deletions(-) diff --git a/components/shared/modals/keyboardShortcutsModal.vue b/components/shared/modals/keyboardShortcutsModal.vue index 6271084283..4e0b5c40bc 100644 --- a/components/shared/modals/keyboardShortcutsModal.vue +++ b/components/shared/modals/keyboardShortcutsModal.vue @@ -1,6 +1,6 @@ diff --git a/layouts/default.vue b/layouts/default.vue index a12cd8fe95..2cabd64f30 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -13,6 +13,7 @@ + diff --git a/layouts/full-width-layout.vue b/layouts/full-width-layout.vue index e4f191aea7..7955d47042 100644 --- a/layouts/full-width-layout.vue +++ b/layouts/full-width-layout.vue @@ -11,6 +11,7 @@ + diff --git a/layouts/full-width-no-footer.vue b/layouts/full-width-no-footer.vue index 4a559eaf53..92dbf74566 100644 --- a/layouts/full-width-no-footer.vue +++ b/layouts/full-width-no-footer.vue @@ -10,6 +10,7 @@ + diff --git a/layouts/gallery-item-layout.vue b/layouts/gallery-item-layout.vue index 49829a23d5..562f341ee1 100644 --- a/layouts/gallery-item-layout.vue +++ b/layouts/gallery-item-layout.vue @@ -13,6 +13,7 @@ + diff --git a/layouts/no-footer.vue b/layouts/no-footer.vue index 287a5f1af3..7d73cbb4cb 100644 --- a/layouts/no-footer.vue +++ b/layouts/no-footer.vue @@ -12,6 +12,7 @@ + diff --git a/layouts/teleport-layout.vue b/layouts/teleport-layout.vue index 5e9b907fa0..0be4e20a82 100644 --- a/layouts/teleport-layout.vue +++ b/layouts/teleport-layout.vue @@ -13,6 +13,7 @@ + diff --git a/layouts/unlockable-mint-layout.vue b/layouts/unlockable-mint-layout.vue index 79479e8919..3bf39a3f48 100644 --- a/layouts/unlockable-mint-layout.vue +++ b/layouts/unlockable-mint-layout.vue @@ -6,6 +6,7 @@ + diff --git a/plugins/keyboardEvents.client.ts b/plugins/keyboardEvents.client.ts index a0c01442ff..a58a6d50b4 100644 --- a/plugins/keyboardEvents.client.ts +++ b/plugins/keyboardEvents.client.ts @@ -80,7 +80,7 @@ const listenGlobalKeyboardEvents = (app) => { if (event.key === '?') { const element: HTMLElement = document.querySelectorAll( - '#keyboardShortcutsModal > .button', + '#keyboardShortcutsModal > button', )[0] as HTMLElement element.click() } From f9fff4f8a16b88954d6f2d35a19b17e1a170daaf Mon Sep 17 00:00:00 2001 From: roiLeo Date: Wed, 17 Jul 2024 14:09:43 +0200 Subject: [PATCH 03/53] =?UTF-8?q?=E2=9C=A8=20KeyboardShortcutModal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/modals/keyboardShortcutsModal.vue | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/components/shared/modals/keyboardShortcutsModal.vue b/components/shared/modals/keyboardShortcutsModal.vue index 4e0b5c40bc..43a8032284 100644 --- a/components/shared/modals/keyboardShortcutsModal.vue +++ b/components/shared/modals/keyboardShortcutsModal.vue @@ -8,17 +8,24 @@
- {{ props.row.text }} +
+ {{ props.row.text }} +
-
+
+ v-for="(shortcut, index) in props.row.shortcut.split('+', 2)" + :key="shortcut" + class="inline-flex"> - {{ shortcut }} + {{ shortcut || '+' }} - + + @@ -139,11 +146,11 @@ const data = ref({ shortcut: 'f+b', }, { - text: $i18n.t('sort.BLOCK_NUMBER_DESC'), + text: $i18n.t('sort.blockNumber_DESC'), shortcut: 'f+n', }, { - text: $i18n.t('sort.BLOCK_NUMBER_ASC'), + text: $i18n.t('sort.blockNumber_ASC'), shortcut: 'f+o', }, ], @@ -154,11 +161,11 @@ const data = ref({ }, { text: 'Mint +1', - shortcut: 'v+-', + shortcut: 'v++', }, { text: 'Mint -1', - shortcut: 'v++', + shortcut: 'v+-', }, ], }) From 3dc75d9411b47dce0763699a31129f4b1c46902b Mon Sep 17 00:00:00 2001 From: roiLeo Date: Wed, 17 Jul 2024 15:58:26 +0200 Subject: [PATCH 04/53] =?UTF-8?q?=E2=9C=A8=20drops=20title?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/shared/modals/keyboardShortcutsModal.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/shared/modals/keyboardShortcutsModal.vue b/components/shared/modals/keyboardShortcutsModal.vue index 43a8032284..c6e117e913 100644 --- a/components/shared/modals/keyboardShortcutsModal.vue +++ b/components/shared/modals/keyboardShortcutsModal.vue @@ -58,6 +58,7 @@ interface DifferentTypeName { navigation: string item_detail: string filters: string + drops: string } const { $i18n } = useNuxtApp() @@ -174,6 +175,7 @@ const labels = ref({ navigation: 'Navigation', item_detail: 'Item Detail', filters: 'Filters', + drops: 'Drops', }) const types = ref(Object.keys(data.value)) From b6529dea93a66d70aafd373aad46535fbe3728ab Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Thu, 1 Aug 2024 12:41:52 +0700 Subject: [PATCH 05/53] fix: drops max count --- .../collection/drop/GenerativePreview.vue | 22 ++++-- components/collection/drop/MintButton.vue | 7 +- components/collection/drop/MintStepper.vue | 13 +-- composables/drop/useGenerativeDropMint.ts | 79 +++++++------------ nuxt.config.ts | 8 ++ utils/drop.ts | 2 - 6 files changed, 57 insertions(+), 74 deletions(-) diff --git a/components/collection/drop/GenerativePreview.vue b/components/collection/drop/GenerativePreview.vue index 653ec6e3c0..c0c40caa0d 100644 --- a/components/collection/drop/GenerativePreview.vue +++ b/components/collection/drop/GenerativePreview.vue @@ -56,16 +56,22 @@
{{ mintedPercent }}% ~
-
- {{ dropStore.mintsCount }}/{{ maxCount }} +
+ {{ nftCount }}/{{ maxCount }} {{ $t('statsOverview.minted') }}
+
+ +
@@ -88,18 +94,18 @@ diff --git a/composables/drop/useGenerativeDropMint.ts b/composables/drop/useGenerativeDropMint.ts index 6e9261b79f..a405e04979 100644 --- a/composables/drop/useGenerativeDropMint.ts +++ b/composables/drop/useGenerativeDropMint.ts @@ -1,9 +1,7 @@ -import { useQuery } from '@tanstack/vue-query' import { type MintedNFT } from '@/components/collection/drop/types' import type { DoResult } from '@/services/fxart' import { setMetadataUrl } from '@/services/fxart' import { useDrop } from '@/components/drops/useDrops' -import unlockableCollectionById from '@/queries/subsquid/general/unlockableCollectionById.graphql' import { FALLBACK_DROP_COLLECTION_MAX } from '@/utils/drop' import type { MassMintNFT, @@ -28,47 +26,38 @@ export type DropCollectionById = { } } -function useCollectionData(collectionId, client) { - const { accountId } = useAuth() - const { vueApp } = useNuxtApp() - return vueApp.runWithContext(() => - useQuery({ - queryKey: ['collection-drop-data', client, collectionId, accountId], - queryFn: () => - collectionId.value - ? useAsyncQuery({ - clientId: client.value, - query: unlockableCollectionById, - variables: { - id: collectionId.value, - search: { issuer_eq: accountId.value }, - }, - }).then(res => res.data.value) - : null, - }), - ) -} - export function useCollectionEntity() { const { drop } = useDrop() - const { client } = usePrefix() - const { data: collectionData } = useCollectionData( - computed(() => drop.value?.collection), - client, - ) - const maxCount = computed(() => collectionData.value?.collectionEntity?.max) - const description = computed( - () => collectionData.value?.collectionEntity?.meta?.description ?? '', - ) - const collectionName = computed( - () => collectionData.value?.collectionEntity?.name ?? '', - ) - const nftCount = computed( - () => collectionData.value?.collectionEntity?.nftCount ?? 0, - ) + const maxSupply = ref() + const nftCount = ref() + const description = ref() + const collectionName = ref() + + watchEffect(async () => { + if (drop.value.collection) { + const api = await useApi().apiInstance.value + const [queryCollectionConfig, queryCollection, queryCollectionMetadata] = await Promise.all([ + api.query.nfts.collectionConfigOf(drop.value.collection), + api.query.nfts.collection(drop.value.collection), + api.query.nfts.collectionMetadataOf(drop.value.collection), + ]) + const collectionConfig = queryCollectionConfig.toJSON() as unknown as { maxSupply?: number } + const collection = queryCollection.toJSON() as unknown as { items?: number } + + maxSupply.value = collectionConfig.maxSupply ?? 0 + nftCount.value = collection.items ?? 0 + + const collectionMetadata = queryCollectionMetadata.toHuman() as unknown as { data?: string } + if (collectionMetadata.data) { + const metadata = await $fetch<{ description?: string, name?: string }>(sanitizeIpfsUrl(collectionMetadata.data)) + description.value = metadata.description + collectionName.value = metadata.name + } + } + }) return { - maxCount, + maxCount: maxSupply, description, collectionName, nftCount, @@ -172,8 +161,7 @@ export const useUpdateMetadata = async () => { export default () => { const dropStore = useDropStore() const { mintedNFTs } = storeToRefs(dropStore) - const { drop } = useDrop() - const { maxCount: collectionMaxCount } = useCollectionEntity() + const { maxCount, nftCount } = useCollectionEntity() const { listNftByNftWithMetadata } = useListingCartModal() const claimedNft = computed({ @@ -181,15 +169,8 @@ export default () => { set: value => dropStore.setClaimedNFT(value), }) - const maxCount = computed( - () => - collectionMaxCount.value - ?? drop.value?.max - ?? FALLBACK_DROP_COLLECTION_MAX, - ) - const mintCountAvailable = computed( - () => dropStore.mintsCount < maxCount.value, + () => nftCount.value < maxCount.value, ) const canListMintedNft = computed(() => Boolean(mintedNFTs.value.length)) diff --git a/nuxt.config.ts b/nuxt.config.ts index 8928d5c60d..1e3613ab7e 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -81,6 +81,14 @@ export default defineNuxtConfig({ 'unzipit', 'vue-chartjs', 'wavesurfer.js', + '@kodadot1/minimark/utils', + 'lodash', + 'jdenticon', + 'gql.tada', + 'viem/chains', + '@web3modal/wagmi/vue', + '@wagmi/core', + 'use-wagmi', ], } : undefined, diff --git a/utils/drop.ts b/utils/drop.ts index cb7bd73a37..5c7d1e41b4 100644 --- a/utils/drop.ts +++ b/utils/drop.ts @@ -16,8 +16,6 @@ export const DROP_COLLECTION_TO_ALIAS_MAP = { 95: 'echo', } -export const DROP_MASSMINT_LIMIT = {} - export const AHK_GENERATIVE_DROPS = [ '176', // Chained ] From c25e266a898c4840016ba7e74e10a439377f79e4 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Thu, 1 Aug 2024 14:03:32 +0700 Subject: [PATCH 06/53] refactor(tests): simplify image loading wait logic in explore.spec.ts --- tests/e2e/explore.spec.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/tests/e2e/explore.spec.ts b/tests/e2e/explore.spec.ts index 5b668eb02c..f5ab1974d4 100644 --- a/tests/e2e/explore.spec.ts +++ b/tests/e2e/explore.spec.ts @@ -24,10 +24,7 @@ test('Explore collections', async ({ page, Commands }) => { // Lazy loading mitigation await test.step('Scroll down and wait for images to load', async () => { await Commands.scrollDownAndStop() - await page.waitForFunction(() => { - const images = Array.from(document.querySelectorAll('img')) - return images.every(img => img.complete) - }) + await page.waitForLoadState('networkidle') }) // Results From 5f4bf39fbdb43c506d2b78325660569813b12375 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Thu, 1 Aug 2024 14:37:30 +0700 Subject: [PATCH 07/53] feat(tests): ensure images load during scroll in e2e explore --- tests/e2e/explore.spec.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/tests/e2e/explore.spec.ts b/tests/e2e/explore.spec.ts index f5ab1974d4..2bdb313ea2 100644 --- a/tests/e2e/explore.spec.ts +++ b/tests/e2e/explore.spec.ts @@ -22,9 +22,26 @@ test('Explore collections', async ({ page, Commands }) => { }) // Lazy loading mitigation + const imageRequests = new Set() + await page.route('https://image-beta.w.kodadot.xyz/**', async (route) => { + const request = route.request() + const url = request.url() + + // Check if it's an image request + if (request.resourceType() === 'image') { + imageRequests.add(url) + } + + // Continue the request and get the response + const response = await route.fetch() + + await route.fulfill({ response }) + }) + await test.step('Scroll down and wait for images to load', async () => { await Commands.scrollDownAndStop() await page.waitForLoadState('networkidle') + expect(imageRequests.size).toBeGreaterThan(0) }) // Results From 5e481d82e13236d3287d9c5ee7b1cc1bb744c04f Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Thu, 1 Aug 2024 14:48:24 +0700 Subject: [PATCH 08/53] refactor(tests): update collection spec to new data and optimize wait times - Updated collection address and name constants. - Added additional wait for network idle state. - Removed redundant sale filter checks. --- tests/e2e/collection.spec.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/tests/e2e/collection.spec.ts b/tests/e2e/collection.spec.ts index fad83f5a56..d808aaca36 100644 --- a/tests/e2e/collection.spec.ts +++ b/tests/e2e/collection.spec.ts @@ -1,12 +1,13 @@ import { expect, test } from './fixtures' -const COLLECTION_ADDRESS_PATH = '/ahp/collection/38/' -const COLLECTION_NAME = 'Pare1d0scope' +const COLLECTION_ADDRESS_PATH = '/ahp/collection/158/' +const COLLECTION_NAME = 'Under the Microscope' const COLLECTION_OWNER = '15CoYMEnJhhWHvdEPXDuTBnZKXwrJzMQdcMwcHGsVx5kXYvW' test('Collection interactions', async ({ page, Commands }) => { await page.goto(COLLECTION_ADDRESS_PATH) await Commands.scrollDownAndStop() + await page.waitForLoadState('networkidle') await test.step('Check collection name and description', async () => { await expect(page.getByTestId('collection-banner-name')).toContainText( COLLECTION_NAME, @@ -15,7 +16,7 @@ test('Collection interactions', async ({ page, Commands }) => { await page.getByTestId('description-show-less-more-button').click() // collection description await expect(page.getByTestId('collection-description')).toContainText( - 'Geometry', + 'Artist: Gorilla Sun', ) }) @@ -72,10 +73,11 @@ test('Collection interactions', async ({ page, Commands }) => { .fill('34') await page.keyboard.press('Enter') await Commands.scrollDownSlow() + await page.waitForLoadState('networkidle') await expect( page.locator('[class="infinite-scroll-item"]').first(), ).toBeVisible() - await expect(page.getByTestId('nft-name')).toHaveText('Pare1d0scope #34') + await expect(page.getByTestId('nft-name')).toHaveText('Under the Microscope #34') }) // art view @@ -115,7 +117,6 @@ test('Collection interactions', async ({ page, Commands }) => { // event filters await test.step('Event Filters(sale,list,mint,transfer)', async () => { const eventTable = page.getByTestId('nfts-event-table') - const saleFilter = page.getByTestId('event-checkbox-filter-sale').nth(1) const listingFilter = page .getByTestId('event-checkbox-filter-listing') .nth(1) @@ -123,9 +124,6 @@ test('Collection interactions', async ({ page, Commands }) => { const transferFilter = page .getByTestId('event-checkbox-filter-transfer') .nth(1) - await saleFilter.check() - await expect(eventTable).toContainText('Sale') - await saleFilter.uncheck() await listingFilter.check() await expect(eventTable).toContainText('List') await listingFilter.uncheck() From c0cbc89053cdf17dbbf238e5c0fdbf67ca2598bf Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Thu, 1 Aug 2024 14:49:06 +0700 Subject: [PATCH 09/53] chore(workflow): increase shard count in Playwright configuration --- .github/workflows/playwright.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index cbee5ce7fe..0b06cca56e 100644 --- a/.github/workflows/playwright.yml +++ b/.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 From ac63e8b0a46ae81fa049df45f12276a79f89ecb3 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Thu, 1 Aug 2024 14:50:36 +0700 Subject: [PATCH 10/53] chore(tests): add network idle state wait in gallery item interactions test --- tests/e2e/galleryitem.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/e2e/galleryitem.spec.ts b/tests/e2e/galleryitem.spec.ts index 6e5076ed2b..4b3dbad3c8 100644 --- a/tests/e2e/galleryitem.spec.ts +++ b/tests/e2e/galleryitem.spec.ts @@ -8,6 +8,7 @@ const ITEM_ROYALTY_RECIPIENT = '1L2xst...ucgnNZ' test('Gallery item Interactions', async ({ page }) => { await page.goto(ITEM_ADDRESS_PATH) + await page.waitForLoadState('networkidle') // Activity tab await test.step('Verifies if activity tab has content', async () => { From 983674313f2aec697be8dac6e3c4eacd5c0669dd Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Thu, 1 Aug 2024 14:58:39 +0700 Subject: [PATCH 11/53] feat(playwright): increase timeout and ensure server start command refactor(e2e): wait for network to be idle in drops page tests --- playwright.config.ts | 4 ++-- tests/e2e/drops.spec.ts | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/playwright.config.ts b/playwright.config.ts index 9436072b45..d80ed1e592 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -22,7 +22,7 @@ export default defineConfig({ /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: 'html', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ - timeout: 1 * 60 * 1000, + timeout: 3 * 60 * 1000, use: { // headless: true, /* Base URL to use in actions like `await page.goto('/')`. */ @@ -73,7 +73,7 @@ export default defineConfig({ /* Run your local dev server before starting the tests */ webServer: { - command: process.env.CI ? 'pnpm start:node' : 'pnpm run dev', + command: 'pnpm start:node', // on local make sure run pnpm generate first url: 'http://localhost:9090', reuseExistingServer: !process.env.CI, timeout: 2 * 60 * 1000, diff --git a/tests/e2e/drops.spec.ts b/tests/e2e/drops.spec.ts index f5b5fb5361..11861232ca 100644 --- a/tests/e2e/drops.spec.ts +++ b/tests/e2e/drops.spec.ts @@ -20,6 +20,7 @@ const collections = TEST_DROPS.map(drop => drop.collection) test('make sure drops page with type holder not broken', async ({ page }) => { await page.goto(addresses[2]) + await page.waitForLoadState('networkidle') await expect(page.locator('div.content-markdown')).toHaveText( ` Artist: Nicolas Lebrun @@ -41,6 +42,7 @@ test('make sure drops page with type holder not broken', async ({ page }) => { // CONVERGENTE test('Drop page verification', async ({ page, Commands }) => { await page.goto(addresses[0]) + await page.waitForLoadState('networkidle') await test.step('Created By', async () => { await expect(page.getByTestId('drop-created-by-container')).toBeVisible({ From 44c96a0f41409a38b585cfbe139c6f2b47231eee Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Thu, 1 Aug 2024 15:11:34 +0700 Subject: [PATCH 12/53] feat(playwright): increase timeout settings and add expect timeout refactor(e2e): remove unnecessary Commands parameter and comment out unused function call --- playwright.config.ts | 5 ++++- tests/e2e/explore.spec.ts | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/playwright.config.ts b/playwright.config.ts index d80ed1e592..38d316aed8 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -22,7 +22,10 @@ export default defineConfig({ /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: 'html', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ - timeout: 3 * 60 * 1000, + timeout: 4 * 60 * 1000, + expect: { + timeout: 4 * 60 * 1000, + }, use: { // headless: true, /* Base URL to use in actions like `await page.goto('/')`. */ diff --git a/tests/e2e/explore.spec.ts b/tests/e2e/explore.spec.ts index 2bdb313ea2..ed63a3b609 100644 --- a/tests/e2e/explore.spec.ts +++ b/tests/e2e/explore.spec.ts @@ -3,7 +3,7 @@ import { expect, test } from './fixtures' const EXPLORE_COLLECTIONS_PATH = '/ahk/explore/collectibles' const EXPLORE_ITEMS_PATH = '/ahk/explore/items?page=1' -test('Explore collections', async ({ page, Commands }) => { +test('Explore collections', async ({ page }) => { await page.goto(EXPLORE_COLLECTIONS_PATH) // Tabs @@ -39,7 +39,7 @@ test('Explore collections', async ({ page, Commands }) => { }) await test.step('Scroll down and wait for images to load', async () => { - await Commands.scrollDownAndStop() + // await Commands.scrollDownAndStop() await page.waitForLoadState('networkidle') expect(imageRequests.size).toBeGreaterThan(0) }) From 318da3f5923a469339bdbad4ac57edc4039be2f1 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Fri, 2 Aug 2024 19:49:33 +0700 Subject: [PATCH 13/53] revert: flaky e2e test --- .github/workflows/playwright.yml | 4 ++-- playwright.config.ts | 7 ++----- tests/e2e/collection.spec.ts | 14 ++++++++------ tests/e2e/drops.spec.ts | 2 -- tests/e2e/explore.spec.ts | 26 ++++++-------------------- tests/e2e/galleryitem.spec.ts | 1 - 6 files changed, 18 insertions(+), 36 deletions(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 0b06cca56e..cbee5ce7fe 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -11,8 +11,8 @@ jobs: strategy: fail-fast: false matrix: - shardIndex: [1, 2, 3, 4, 5, 6, 7, 8] - shardTotal: [8] + shardIndex: [1, 2, 3, 4, 5, 6] + shardTotal: [6] steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 diff --git a/playwright.config.ts b/playwright.config.ts index 38d316aed8..9436072b45 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -22,10 +22,7 @@ export default defineConfig({ /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: 'html', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ - timeout: 4 * 60 * 1000, - expect: { - timeout: 4 * 60 * 1000, - }, + timeout: 1 * 60 * 1000, use: { // headless: true, /* Base URL to use in actions like `await page.goto('/')`. */ @@ -76,7 +73,7 @@ export default defineConfig({ /* Run your local dev server before starting the tests */ webServer: { - command: 'pnpm start:node', // on local make sure run pnpm generate first + command: process.env.CI ? 'pnpm start:node' : 'pnpm run dev', url: 'http://localhost:9090', reuseExistingServer: !process.env.CI, timeout: 2 * 60 * 1000, diff --git a/tests/e2e/collection.spec.ts b/tests/e2e/collection.spec.ts index d808aaca36..fad83f5a56 100644 --- a/tests/e2e/collection.spec.ts +++ b/tests/e2e/collection.spec.ts @@ -1,13 +1,12 @@ import { expect, test } from './fixtures' -const COLLECTION_ADDRESS_PATH = '/ahp/collection/158/' -const COLLECTION_NAME = 'Under the Microscope' +const COLLECTION_ADDRESS_PATH = '/ahp/collection/38/' +const COLLECTION_NAME = 'Pare1d0scope' const COLLECTION_OWNER = '15CoYMEnJhhWHvdEPXDuTBnZKXwrJzMQdcMwcHGsVx5kXYvW' test('Collection interactions', async ({ page, Commands }) => { await page.goto(COLLECTION_ADDRESS_PATH) await Commands.scrollDownAndStop() - await page.waitForLoadState('networkidle') await test.step('Check collection name and description', async () => { await expect(page.getByTestId('collection-banner-name')).toContainText( COLLECTION_NAME, @@ -16,7 +15,7 @@ test('Collection interactions', async ({ page, Commands }) => { await page.getByTestId('description-show-less-more-button').click() // collection description await expect(page.getByTestId('collection-description')).toContainText( - 'Artist: Gorilla Sun', + 'Geometry', ) }) @@ -73,11 +72,10 @@ test('Collection interactions', async ({ page, Commands }) => { .fill('34') await page.keyboard.press('Enter') await Commands.scrollDownSlow() - await page.waitForLoadState('networkidle') await expect( page.locator('[class="infinite-scroll-item"]').first(), ).toBeVisible() - await expect(page.getByTestId('nft-name')).toHaveText('Under the Microscope #34') + await expect(page.getByTestId('nft-name')).toHaveText('Pare1d0scope #34') }) // art view @@ -117,6 +115,7 @@ test('Collection interactions', async ({ page, Commands }) => { // event filters await test.step('Event Filters(sale,list,mint,transfer)', async () => { const eventTable = page.getByTestId('nfts-event-table') + const saleFilter = page.getByTestId('event-checkbox-filter-sale').nth(1) const listingFilter = page .getByTestId('event-checkbox-filter-listing') .nth(1) @@ -124,6 +123,9 @@ test('Collection interactions', async ({ page, Commands }) => { const transferFilter = page .getByTestId('event-checkbox-filter-transfer') .nth(1) + await saleFilter.check() + await expect(eventTable).toContainText('Sale') + await saleFilter.uncheck() await listingFilter.check() await expect(eventTable).toContainText('List') await listingFilter.uncheck() diff --git a/tests/e2e/drops.spec.ts b/tests/e2e/drops.spec.ts index 11861232ca..f5b5fb5361 100644 --- a/tests/e2e/drops.spec.ts +++ b/tests/e2e/drops.spec.ts @@ -20,7 +20,6 @@ const collections = TEST_DROPS.map(drop => drop.collection) test('make sure drops page with type holder not broken', async ({ page }) => { await page.goto(addresses[2]) - await page.waitForLoadState('networkidle') await expect(page.locator('div.content-markdown')).toHaveText( ` Artist: Nicolas Lebrun @@ -42,7 +41,6 @@ test('make sure drops page with type holder not broken', async ({ page }) => { // CONVERGENTE test('Drop page verification', async ({ page, Commands }) => { await page.goto(addresses[0]) - await page.waitForLoadState('networkidle') await test.step('Created By', async () => { await expect(page.getByTestId('drop-created-by-container')).toBeVisible({ diff --git a/tests/e2e/explore.spec.ts b/tests/e2e/explore.spec.ts index ed63a3b609..5b668eb02c 100644 --- a/tests/e2e/explore.spec.ts +++ b/tests/e2e/explore.spec.ts @@ -3,7 +3,7 @@ import { expect, test } from './fixtures' const EXPLORE_COLLECTIONS_PATH = '/ahk/explore/collectibles' const EXPLORE_ITEMS_PATH = '/ahk/explore/items?page=1' -test('Explore collections', async ({ page }) => { +test('Explore collections', async ({ page, Commands }) => { await page.goto(EXPLORE_COLLECTIONS_PATH) // Tabs @@ -22,26 +22,12 @@ test('Explore collections', async ({ page }) => { }) // Lazy loading mitigation - const imageRequests = new Set() - await page.route('https://image-beta.w.kodadot.xyz/**', async (route) => { - const request = route.request() - const url = request.url() - - // Check if it's an image request - if (request.resourceType() === 'image') { - imageRequests.add(url) - } - - // Continue the request and get the response - const response = await route.fetch() - - await route.fulfill({ response }) - }) - await test.step('Scroll down and wait for images to load', async () => { - // await Commands.scrollDownAndStop() - await page.waitForLoadState('networkidle') - expect(imageRequests.size).toBeGreaterThan(0) + await Commands.scrollDownAndStop() + await page.waitForFunction(() => { + const images = Array.from(document.querySelectorAll('img')) + return images.every(img => img.complete) + }) }) // Results diff --git a/tests/e2e/galleryitem.spec.ts b/tests/e2e/galleryitem.spec.ts index 4b3dbad3c8..6e5076ed2b 100644 --- a/tests/e2e/galleryitem.spec.ts +++ b/tests/e2e/galleryitem.spec.ts @@ -8,7 +8,6 @@ const ITEM_ROYALTY_RECIPIENT = '1L2xst...ucgnNZ' test('Gallery item Interactions', async ({ page }) => { await page.goto(ITEM_ADDRESS_PATH) - await page.waitForLoadState('networkidle') // Activity tab await test.step('Verifies if activity tab has content', async () => { From 6cdf1a8f1aad66da96c2a83737cabeda01e7d962 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Mon, 5 Aug 2024 15:41:52 +0700 Subject: [PATCH 14/53] feat(drop): integrate EVM and Substrate collection data handling refactor(onchain): abstract EVM and Substrate collection fetch logic into utility files chore(dependencies): add @farcaster/auth-client to project dependencies --- composables/drop/useGenerativeDropMint.ts | 34 ++++++++-------- nuxt.config.ts | 1 + utils/onchain/evm.ts | 47 +++++++++++++++++++++++ utils/onchain/sub.ts | 22 +++++++++++ utils/{wagmi.ts => viem.ts} | 0 5 files changed, 89 insertions(+), 15 deletions(-) create mode 100644 utils/onchain/evm.ts create mode 100644 utils/onchain/sub.ts rename utils/{wagmi.ts => viem.ts} (100%) diff --git a/composables/drop/useGenerativeDropMint.ts b/composables/drop/useGenerativeDropMint.ts index 28ce558c79..84c2fe03cf 100644 --- a/composables/drop/useGenerativeDropMint.ts +++ b/composables/drop/useGenerativeDropMint.ts @@ -8,6 +8,8 @@ import type { } from '@/composables/drop/massmint/useDropMassMint' import useDropMassMint from '@/composables/drop/massmint/useDropMassMint' import useDropMassMintListing from '@/composables/drop/massmint/useDropMassMintListing' +import { evmCollection } from '~/utils/onchain/evm' +import { subCollection } from '~/utils/onchain/sub' export type DropMintedNft = DoResult & { id: string @@ -32,24 +34,26 @@ export function useCollectionEntity() { const nftCount = ref() const description = ref() const collectionName = ref() + const { isEvm, isSub } = useIsChain(usePrefix().urlPrefix) watchEffect(async () => { if (drop.value.collection) { - const api = await useApi().apiInstance.value - const [queryCollectionConfig, queryCollection, queryCollectionMetadata] = await Promise.all([ - api.query.nfts.collectionConfigOf(drop.value.collection), - api.query.nfts.collection(drop.value.collection), - api.query.nfts.collectionMetadataOf(drop.value.collection), - ]) - const collectionConfig = queryCollectionConfig.toJSON() as unknown as { maxSupply?: number } - const collection = queryCollection.toJSON() as unknown as { items?: number } - - maxSupply.value = collectionConfig.maxSupply ?? 0 - nftCount.value = collection.items ?? 0 - - const collectionMetadata = queryCollectionMetadata.toHuman() as unknown as { data?: string } - if (collectionMetadata.data) { - const metadata = await $fetch<{ description?: string, name?: string }>(sanitizeIpfsUrl(collectionMetadata.data)) + if (isSub.value) { + const { maxSupply: supply, minted, metadata } = await subCollection(drop.value.collection) + + maxSupply.value = supply + nftCount.value = minted + description.value = metadata.description + collectionName.value = metadata.name + } + + if (isEvm.value) { + const { urlPrefix } = usePrefix() + const address = drop.value.collection as `0x${string}` + const { maxSupply: supply, metadata, minted } = await evmCollection(address, urlPrefix.value) + + maxSupply.value = supply + nftCount.value = minted description.value = metadata.description collectionName.value = metadata.name } diff --git a/nuxt.config.ts b/nuxt.config.ts index 1e3613ab7e..715ba9490b 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -89,6 +89,7 @@ export default defineNuxtConfig({ '@web3modal/wagmi/vue', '@wagmi/core', 'use-wagmi', + '@farcaster/auth-client', ], } : undefined, diff --git a/utils/onchain/evm.ts b/utils/onchain/evm.ts new file mode 100644 index 0000000000..2123773446 --- /dev/null +++ b/utils/onchain/evm.ts @@ -0,0 +1,47 @@ +import { http, createConfig, readContract } from '@wagmi/core' +import { base, immutableZkEvm } from '@wagmi/core/chains' +import { GENSOL_ABI } from '~/composables/transaction/evm/utils' + +export const wagmiConfig = createConfig({ + chains: [base, immutableZkEvm], + transports: { + [base.id]: http(), + [immutableZkEvm.id]: http(), + }, +}) + +export const evmCollection = async (address: `0x${string}`, chain: string) => { + const [collectionSupply, collectionMetadata, getCollection] = await Promise.all([ + readContract(wagmiConfig, { + address, + abi: GENSOL_ABI, + functionName: 'totalSupply', + }), + readContract(wagmiConfig, { + address, + abi: GENSOL_ABI, + functionName: 'contractURI', + }), + // usually erc721 contract have minted function to get the minted count + // 1. drops on opensea: https://etherscan.io/token/0xc5d914aea6f463f8e3f2797b4e258904c82cedad + // use totalSupply to get the minted count. maxSupply also exists + // 2. drops on fxhash: https://basescan.org/token/0xAC2D45854EAFF6eF61c2d5c8c7224Ea255937a9C + // also use totalSupply to get the minted count. maxSupply = totalSupply + remainingSupply + // at the moment use api from ogi is because our contract doesn't have the minted function + $fetch<{ collection?: { claimed?: string } }>(`https://ogi-feat--evm-api-for-item-d.workers-ogi.pages.dev/api/evm/${chain}/item/${address}`), + ]) as [bigint, string, { collection?: { claimed?: string } }] + + let metadata = { description: '', name: '', image: '' } + if (collectionMetadata) { + metadata = await $fetch(sanitizeIpfsUrl(collectionMetadata)) + } + + const maxSupply = Number(collectionSupply.toString()) + const minted = Number(getCollection.collection?.claimed) || 0 + + return { + maxSupply, + minted, + metadata, + } +} diff --git a/utils/onchain/sub.ts b/utils/onchain/sub.ts new file mode 100644 index 0000000000..8152554357 --- /dev/null +++ b/utils/onchain/sub.ts @@ -0,0 +1,22 @@ +export const subCollection = async (id: string) => { + const api = await useApi().apiInstance.value + const [queryCollectionConfig, queryCollection, queryCollectionMetadata] = await Promise.all([ + api.query.nfts.collectionConfigOf(id), + api.query.nfts.collection(id), + api.query.nfts.collectionMetadataOf(id), + ]) + const collectionConfig = queryCollectionConfig.toJSON() as unknown as { maxSupply?: number } + const collection = queryCollection.toJSON() as unknown as { items?: number } + + const collectionMetadata = queryCollectionMetadata.toHuman() as unknown as { data?: string } + let metadata = { description: '', name: '', image: '' } + if (collectionMetadata.data) { + metadata = await $fetch(sanitizeIpfsUrl(collectionMetadata.data)) + } + + return { + maxSupply: collectionConfig.maxSupply ?? 0, + minted: collection.items ?? 0, + metadata, + } +} diff --git a/utils/wagmi.ts b/utils/viem.ts similarity index 100% rename from utils/wagmi.ts rename to utils/viem.ts From 841d325541e8684b81dcc9e4afbefd4e245b0b71 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Mon, 5 Aug 2024 15:52:28 +0700 Subject: [PATCH 15/53] refactor(mint-button): add null check for maxCount comparison --- components/collection/drop/MintButton.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/collection/drop/MintButton.vue b/components/collection/drop/MintButton.vue index 8be7d310c0..271cdf2532 100644 --- a/components/collection/drop/MintButton.vue +++ b/components/collection/drop/MintButton.vue @@ -75,7 +75,7 @@ const mintForLabel = computed(() => ) const label = computed(() => { - if (maxCount.value === nftCount.value) { + if (maxCount.value && (maxCount.value === nftCount.value)) { return $i18n.t('mint.unlockable.seeListings') } if (!isLogIn.value) { From fa8b050dcf4c31a3fc72bebcaf667e6c75d1bdcd Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Mon, 5 Aug 2024 16:09:28 +0700 Subject: [PATCH 16/53] Update composables/drop/useGenerativeDropMint.ts Co-authored-by: Hassnian <44554284+hassnian@users.noreply.github.com> --- composables/drop/useGenerativeDropMint.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/composables/drop/useGenerativeDropMint.ts b/composables/drop/useGenerativeDropMint.ts index 84c2fe03cf..78ef7cbd98 100644 --- a/composables/drop/useGenerativeDropMint.ts +++ b/composables/drop/useGenerativeDropMint.ts @@ -8,8 +8,8 @@ import type { } from '@/composables/drop/massmint/useDropMassMint' import useDropMassMint from '@/composables/drop/massmint/useDropMassMint' import useDropMassMintListing from '@/composables/drop/massmint/useDropMassMintListing' -import { evmCollection } from '~/utils/onchain/evm' -import { subCollection } from '~/utils/onchain/sub' +import { evmCollection } from '@/utils/onchain/evm' +import { subCollection } from '@/utils/onchain/sub' export type DropMintedNft = DoResult & { id: string From 90b9695de3e23d483b02bc2bec2a3695efe13319 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Mon, 5 Aug 2024 20:44:50 +0700 Subject: [PATCH 17/53] refactor(onchain): change API endpoint and adjust result parsing --- utils/onchain/evm.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/utils/onchain/evm.ts b/utils/onchain/evm.ts index 2123773446..e8d8ef7210 100644 --- a/utils/onchain/evm.ts +++ b/utils/onchain/evm.ts @@ -28,8 +28,8 @@ export const evmCollection = async (address: `0x${string}`, chain: string) => { // 2. drops on fxhash: https://basescan.org/token/0xAC2D45854EAFF6eF61c2d5c8c7224Ea255937a9C // also use totalSupply to get the minted count. maxSupply = totalSupply + remainingSupply // at the moment use api from ogi is because our contract doesn't have the minted function - $fetch<{ collection?: { claimed?: string } }>(`https://ogi-feat--evm-api-for-item-d.workers-ogi.pages.dev/api/evm/${chain}/item/${address}`), - ]) as [bigint, string, { collection?: { claimed?: string } }] + $fetch(`https://ogi-feat--evm-api-for-item-d.workers-ogi.pages.dev/api/evm/${chain}/collection/${address}`), + ]) as [bigint, string, { claimed?: string }] let metadata = { description: '', name: '', image: '' } if (collectionMetadata) { @@ -37,7 +37,7 @@ export const evmCollection = async (address: `0x${string}`, chain: string) => { } const maxSupply = Number(collectionSupply.toString()) - const minted = Number(getCollection.collection?.claimed) || 0 + const minted = Number(getCollection?.claimed) || 0 return { maxSupply, From ff2ec26e05084b6780234f81c8e82c96ac5aed60 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Wed, 7 Aug 2024 20:28:34 +0700 Subject: [PATCH 18/53] feat(ogi): add service to fetch EVM collection data refactor(evm): integrate ogi service for fetching EVM collection details --- services/ogi.ts | 19 +++++++++++++++++++ utils/onchain/evm.ts | 10 +++++++--- 2 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 services/ogi.ts diff --git a/services/ogi.ts b/services/ogi.ts new file mode 100644 index 0000000000..b3c9ac474c --- /dev/null +++ b/services/ogi.ts @@ -0,0 +1,19 @@ +import type { Prefix } from '@kodadot1/static' + +const api = $fetch.create({ baseURL: 'https://ogi.koda.art' }) + +type EVMCollection = { + metadata?: { + name?: string + image?: string + description?: string + } + supply?: string | null + claimed?: string | null +} + +export const getEvmCollection = async (chain: Prefix, address: string) => { + return await api(`/api/evm/${chain}/collection/${address}`, { + method: 'GET', + }) +} diff --git a/utils/onchain/evm.ts b/utils/onchain/evm.ts index e8d8ef7210..68488faad2 100644 --- a/utils/onchain/evm.ts +++ b/utils/onchain/evm.ts @@ -1,6 +1,8 @@ import { http, createConfig, readContract } from '@wagmi/core' import { base, immutableZkEvm } from '@wagmi/core/chains' -import { GENSOL_ABI } from '~/composables/transaction/evm/utils' +import type { Prefix } from '@kodadot1/static' +import { GENSOL_ABI } from '@/composables/transaction/evm/utils' +import { getEvmCollection } from '@/services/ogi' export const wagmiConfig = createConfig({ chains: [base, immutableZkEvm], @@ -10,7 +12,7 @@ export const wagmiConfig = createConfig({ }, }) -export const evmCollection = async (address: `0x${string}`, chain: string) => { +export const evmCollection = async (address: `0x${string}`, chain: Prefix) => { const [collectionSupply, collectionMetadata, getCollection] = await Promise.all([ readContract(wagmiConfig, { address, @@ -22,13 +24,15 @@ export const evmCollection = async (address: `0x${string}`, chain: string) => { abi: GENSOL_ABI, functionName: 'contractURI', }), + // usually erc721 contract have minted function to get the minted count // 1. drops on opensea: https://etherscan.io/token/0xc5d914aea6f463f8e3f2797b4e258904c82cedad // use totalSupply to get the minted count. maxSupply also exists // 2. drops on fxhash: https://basescan.org/token/0xAC2D45854EAFF6eF61c2d5c8c7224Ea255937a9C // also use totalSupply to get the minted count. maxSupply = totalSupply + remainingSupply + // at the moment use api from ogi is because our contract doesn't have the minted function - $fetch(`https://ogi-feat--evm-api-for-item-d.workers-ogi.pages.dev/api/evm/${chain}/collection/${address}`), + getEvmCollection(chain, address), ]) as [bigint, string, { claimed?: string }] let metadata = { description: '', name: '', image: '' } From 916e98c1cdcaa6cc843a463c533f3184e668b5a0 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Thu, 8 Aug 2024 10:23:50 +0700 Subject: [PATCH 19/53] refactor(drop): replace collection entity references with drop - Refactor to access `collectionName`, `collectionDescription`, `max`, and `minted` directly `drop`. - Remove unused imports and streamline state management for components. - Update types and store defaults to ensure proper interface for `drop` data. --- .../collection/drop/GenerativeLayout.vue | 4 +- .../collection/drop/GenerativePreview.vue | 17 ++-- .../collection/drop/HolderOfGenerative.vue | 4 - components/collection/drop/MintButton.vue | 12 +-- components/collection/drop/PaidGenerative.vue | 5 +- components/collection/drop/types.ts | 2 +- components/drops/useDrops.ts | 95 +++++-------------- composables/drop/massmint/useDropMassMint.ts | 5 +- composables/drop/useGenerativeDropMint.ts | 66 ++----------- params/types.ts | 6 +- stores/drop.ts | 3 + types/nuxt.d.ts | 7 ++ 12 files changed, 63 insertions(+), 163 deletions(-) create mode 100644 types/nuxt.d.ts diff --git a/components/collection/drop/GenerativeLayout.vue b/components/collection/drop/GenerativeLayout.vue index a3144ea76c..54a51ef8e0 100644 --- a/components/collection/drop/GenerativeLayout.vue +++ b/components/collection/drop/GenerativeLayout.vue @@ -29,7 +29,7 @@ @@ -99,7 +99,6 @@ import { useCollectionActivity } from '@/composables/collectionActivity/useColle import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails' import useCursorDropEvents from '@/composables/party/useCursorDropEvents' import { DropEventType } from '@/composables/party/types' -import { useCollectionEntity } from '@/composables/drop/useGenerativeDropMint' import type { DropItem } from '@/params/types' const mdBreakpoint = 768 @@ -108,7 +107,6 @@ const emit = defineEmits(['mint']) const { drop } = useDrop() const { previewItem, userMintsCount } = storeToRefs(useDropStore()) -const { description } = useCollectionEntity() const { width } = useWindowSize() const { emitEvent, completeLastEvent } = useCursorDropEvents() diff --git a/components/collection/drop/GenerativePreview.vue b/components/collection/drop/GenerativePreview.vue index c0c40caa0d..764d4bac53 100644 --- a/components/collection/drop/GenerativePreview.vue +++ b/components/collection/drop/GenerativePreview.vue @@ -57,10 +57,10 @@ {{ mintedPercent }}% ~
- {{ nftCount }}/{{ maxCount }} + {{ drop.minted }}/{{ drop.max }} {{ $t('statsOverview.minted') }}
@@ -70,8 +70,9 @@
@@ -97,15 +98,11 @@ import { NeoButton, NeoIcon, NeoSkeleton } from '@kodadot1/brick' import { sanitizeIpfsUrl } from '@/utils/ipfs' import useGenerativeIframeData from '@/composables/drop/useGenerativeIframeData' -import { useDrop } from '@/components/drops/useDrops' -import { useCollectionEntity } from '@/composables/drop/useGenerativeDropMint' const { accountId } = useAuth() const { chainSymbol, decimals } = useChain() -const { drop } = useDrop() const dropStore = useDropStore() -const { userMintsCount } = storeToRefs(dropStore) -const { maxCount, nftCount } = useCollectionEntity() +const { userMintsCount, drop } = storeToRefs(dropStore) const { imageDataPayload, imageDataLoaded } = useGenerativeIframeData() const { formatted: formattedPrice } = useAmount( computed(() => drop.value.price), @@ -127,10 +124,10 @@ const { start: startTimer } = useTimeoutFn(() => { const generativeImageUrl = ref('') const mintedPercent = computed(() => { - if (!maxCount.value) { + if (!drop.value.max) { return 0 } - return Math.round((nftCount.value / maxCount.value) * 100) + return Math.round((drop.value.minted / drop.value.max) * 100) }) const displayUrl = computed(() => generativeImageUrl.value || drop.value?.image) diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue index 875a57f995..ad8979744e 100644 --- a/components/collection/drop/HolderOfGenerative.vue +++ b/components/collection/drop/HolderOfGenerative.vue @@ -53,7 +53,6 @@ import { NeoModal } from '@kodadot1/brick' import { useDrop, useDropMinimumFunds, - useDropStatus, } from '@/components/drops/useDrops' import useGenerativeDropMint, { useUpdateMetadata, @@ -92,7 +91,6 @@ const { fetchMultipleBalance } = useMultipleBalance() const { hasMinimumFunds } = useDropMinimumFunds() const { drop } = useDrop() -const { subscribeDropStatus } = useDropStatus(drop) const dropStore = useDropStore() const { claimedNft, canListMintedNft } = useGenerativeDropMint() const { availableNfts } = useHolderOfCollection() @@ -241,8 +239,6 @@ useTransactionTracker({ watch(txHash, () => { mintingSession.value.txHash = txHash.value }) - -onBeforeMount(subscribeDropStatus)