feat: creates CollectionsGallery and CollectionsGalleryItem

packages/desktop/views/dashboard/collectibles/components/CollectionsGallery.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import CollectionsGalleryItem from './CollectionsGalleryItem.svelte'
+    import { Collection, Collections } from '@core/nfts'
+    import VirtualList from '@sveltejs/svelte-virtual-list'
+    import { breakpoint } from '@core/app/stores'
+
+    export let collections: Collections
+
+    $: collectionsArray = Object.values(collections)
+
+    const COLLECTIONS_PER_CHUNK_FOR_SCREEN_SIZE = {
+        sm: 2,
+        md: 3,
+        lg: 3,
+        xl: 4,
+        '2xl': 5,
+    }
+
+    let rowDivElement: HTMLDivElement
+    $: rowDivHeight = getRowDivHeight(rowDivElement?.clientHeight)
+
+    function getRowDivHeight(clientHeight: number | undefined) {
+        if (!clientHeight) {
+            return rowDivHeight
+        }
+
+        if (!rowDivElement) {
+            return clientHeight
+        }
+
+        if (Math.abs(clientHeight - rowDivHeight) > 200) {
+            return rowDivHeight
+        }
+
+        return clientHeight
+    }
+
+    let collectionChunks: (Collection | undefined)[][] = []
+    $: collectionChunks = Array.from(
+        { length: Math.ceil(collectionsArray.length / COLLECTIONS_PER_CHUNK_FOR_SCREEN_SIZE[$breakpoint]) },
+        (_, i) => {
+            return Array.from(
+                { length: COLLECTIONS_PER_CHUNK_FOR_SCREEN_SIZE[$breakpoint] },
+                (_, j) => collectionsArray[i * COLLECTIONS_PER_CHUNK_FOR_SCREEN_SIZE[$breakpoint] + j]
+            )
+        }
+    )
+</script>
+
+<VirtualList items={collectionChunks} let:item itemHeight={rowDivHeight}>
+    <div
+        bind:this={rowDivElement}
+        class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3 2xl:gap-4 pb-3 2xl:pb-4"
+    >
+        {#each item as collection}
+            {#if collection}
+                <CollectionsGalleryItem {collection} />
+            {:else}
+                <div />
+            {/if}
+        {/each}
+    </div>
+</VirtualList>

packages/desktop/views/dashboard/collectibles/components/CollectionsGalleryItem.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { Collection } from '@core/nfts'
+    import { AssetPillsForNft, MediaPlaceholder, NetworkAvatar, NftMedia } from '@ui'
+    import { Pill, Text } from '@bloomwalletio/ui'
+    import { downloadingNftId } from '@core/nfts/stores'
+    import { localize } from '@core/i18n'
+
+    export let collection: Collection
+
+    function onCollectionClick(): void {
+        return
+    }
+</script>
+
+<button type="button" on:click={onCollectionClick}>
+    <div class="flex-1 flex relative bg-surface-2 dark:bg-surface-2-dark rounded-t-[0.9rem] overflow-hidden">
+        <!-- TODO: change media to collection URI instead of first NFT URI -->
+        <NftMedia nft={collection.nfts[0]} classes="min-w-full min-h-full object-cover" loop muted>
+            <MediaPlaceholder
+                type={collection.nfts[0]?.type}
+                downloading={$downloadingNftId === collection.nfts[0]?.id}
+                size="md"
+                slot="placeholder"
+            />
+        </NftMedia>
+    </div>
+    <div class="w-full flex flex-col gap-2 p-3">
+        <nft-name class="w-full flex flex-row items-center gap-2 overflow-hidden">
+            <Text type="body2" truncate>{collection.name}</Text>
+        </nft-name>
+        <nft-pills class="flex flex-row items-center gap-2">
+            <NetworkAvatar networkId={collection.nfts[0].networkId} size="sm" showTooltip />
+            <AssetPillsForNft nft={collection.nfts[0]} />
+            <Pill compact color="primary">{localize('general.nfts', { count: collection.nfts.length })}</Pill>
+        </nft-pills>
+    </div>
+</button>
+
+<style lang="postcss">
+    button {
+        @apply relative w-full flex flex-col mt-4;
+        @apply divide-y divide-solid divide-stroke dark:divide-stroke-dark;
+        @apply rounded-2xl border-2 border-solid border-stroke dark:border-stroke-dark;
+        @apply bg-surface-1 dark:bg-surface-1-dark;
+        @apply duration-300;
+        transition-property: background-color, border-color, box-shadow;
+        aspect-ratio: 3 / 4;
+
+        &:hover,
+        &:focus {
+            @apply shadow-lg dark:shadow-violet-900/25;
+            @apply border-2 border-brand-500;
+            @apply bg-surface dark:bg-surface-dark;
+        }
+
+        &::after {
+            @apply content-[''] absolute block h-1.5 -top-2 left-0 right-0;
+            @apply rounded-t-2xl mx-2;
+            @apply border-t-2 border-x-2 border-solid border-stroke dark:border-stroke-dark;
+            @apply bg-surface-1 dark:bg-surface-1-dark;
+        }
+
+        &::before {
+            @apply content-[''] absolute block h-1.5 -top-3.5 left-0 right-0;
+            @apply rounded-t-2xl mx-4;
+            @apply border-t-2 border-x-2 border-solid border-stroke dark:border-stroke-dark;
+            @apply bg-surface-1 dark:bg-surface-1-dark;
+            @apply blur-[1px];
+        }
+    }
+</style>

packages/desktop/views/dashboard/collectibles/components/index.ts

@@ -1,3 +1,4 @@
 export { default as CollectiblesTabs } from './CollectiblesTabs.svelte'
+export { default as CollectionsGallery } from './CollectionsGallery.svelte'
 export { default as Erc721CollectibleDetails } from './Erc721CollectibleDetails.svelte'
 export { default as Irc27CollectibleDetails } from './Irc27CollectibleDetails.svelte'

packages/desktop/views/dashboard/collectibles/views/CollectionsGalleryView.svelte

@@ -5,7 +5,7 @@
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
     import features from '@features/features'
     import { SearchInput } from '@ui'
-    import { CollectiblesTabs } from '../components'
+    import { CollectiblesTabs, CollectionsGallery } from '../components'
     import { collectionsSearchTerm, selectedAccountCollections } from '@core/nfts/stores'
     import { Collections, isVisibleCollection } from '@core/nfts'
 
@@ -48,10 +48,7 @@
     </header>
     {#if hasCollections}
         {#if Object.keys(queriedCollections).length > 0}
-            <!-- <CollectionsGallery collections={queriedCollections} /> -->
-            {#each Object.keys(queriedCollections) as collection}
-                <Text>{queriedCollections[collection].name}</Text>
-            {/each}
+            <CollectionsGallery collections={queriedCollections} />
         {:else}
             <div class="w-full h-full flex flex-col items-center justify-center">
                 <EmptyListPlaceholder

packages/shared/src/locales/en.json

@@ -1637,6 +1637,7 @@
         "token": "Token",
         "unknownToken": "Unknown Token",
         "nft": "NFT",
+        "nfts": "{count, plural, one {# NFT} other {# NFTs}}",
         "type": "Type",
         "immutableIssuer": "Immutable Issuer",
         "magicContract": "Magic Contract",