Merge remote-tracking branch 'origin/develop' into feat/add-evm-netwo…

…rk-recipients

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { Collection } from '@core/nfts'
+    import { selectedCollectionId } from '@core/nfts/stores'
+    import { NftGallery } from '@ui'
+    import { onDestroy } from 'svelte'
+
+    export let collection: Collection
+
+    onDestroy(() => {
+        $selectedCollectionId = undefined
+    })
+</script>
+
+<NftGallery nfts={collection.nfts} />

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

@@ -0,0 +1,65 @@
+<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.entries(collections).map(([id, collection]) => {
+        return { id, ...collection }
+    })
+
+    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,81 @@
+<script lang="ts">
+    import { Collection } from '@core/nfts'
+    import { AssetPillsForNft, MediaPlaceholder, NetworkAvatar, NftMedia } from '@ui'
+    import { Pill, Text } from '@bloomwalletio/ui'
+    import { downloadingNftId, selectedCollectionId } from '@core/nfts/stores'
+    import { localize } from '@core/i18n'
+    import { CollectiblesRoute, collectiblesRouter } from '@core/router'
+
+    export let collection: Collection
+
+    function onCollectionClick(): void {
+        $selectedCollectionId = collection.id
+        $collectiblesRouter?.goTo(CollectiblesRoute.Details)
+        $collectiblesRouter?.setBreadcrumb(collection.name)
+    }
+</script>
+
+<button type="button" on:click={onCollectionClick}>
+    <div class="container">
+        <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="brand">{localize('general.nfts', { count: collection.nfts.length })}</Pill>
+            </nft-pills>
+        </div>
+    </div>
+</button>
+
+<style lang="postcss">
+    .container {
+        @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 z-[2];
+        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;
+        }
+    }
+
+    button {
+        @apply relative;
+
+        &::after,
+        &::before {
+            @apply content-[''] absolute block left-0 right-0 z-[1];
+            @apply rounded-2xl border-t-2 border-x-2 border-solid border-stroke dark:border-stroke-dark;
+            @apply bg-surface-1 dark:bg-surface-1-dark;
+            aspect-ratio: 3 / 4;
+        }
+
+        &::after {
+            @apply top-2.5 mx-2;
+        }
+
+        &::before {
+            @apply top-[0.2rem] mx-4 blur-[1px];
+        }
+    }
+</style>

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

@@ -1,3 +1,5 @@
 export { default as CollectiblesTabs } from './CollectiblesTabs.svelte'
+export { default as CollectionDetails } from './CollectionDetails.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/CollectiblesDetailsView.svelte

@@ -1,21 +1,25 @@
 <script lang="ts">
     import { Pane } from '@ui'
-    import { Nft } from '@core/nfts/interfaces'
+    import { Collection, Nft } from '@core/nfts/interfaces'
     import { getNftByIdFromAllAccountNfts } from '@core/nfts/actions'
     import { NftStandard } from '@core/nfts/enums'
-    import { allAccountNfts, selectedNftId } from '@core/nfts/stores'
+    import { allAccountNfts, selectedAccountCollections, selectedCollectionId, selectedNftId } from '@core/nfts/stores'
     import { selectedAccountIndex } from '@core/account/stores'
-    import { Erc721CollectibleDetails, Irc27CollectibleDetails } from '../components'
+    import { CollectionDetails, Erc721CollectibleDetails, Irc27CollectibleDetails } from '../components'
     import { time } from '@core/app/stores'
     import { collectiblesRouter } from '@core/router'
     import { isIrc27Nft } from '@core/nfts'
 
     let nft: Nft | undefined
+    let collection: Collection | undefined
     $: $allAccountNfts, (nft = getNftByIdFromAllAccountNfts($selectedAccountIndex, $selectedNftId))
+    $: collection = $selectedCollectionId ? $selectedAccountCollections[$selectedCollectionId] : undefined
 
     $: returnIfNftWasSent($allAccountNfts[$selectedAccountIndex], $time)
 
     function returnIfNftWasSent(ownedNfts: Nft[], currentTime: Date): void {
+        if (!nft) return
+
         const ownedNft = ownedNfts.find((_nft) => _nft.id === nft?.id)
         const isLocked = ownedNft && isIrc27Nft(ownedNft) && ownedNft.timelockTime > currentTime.getTime()
         if (ownedNft?.isSpendable || isLocked) {
@@ -26,10 +30,14 @@
     }
 </script>
 
-<Pane classes="h-full">
-    {#if nft?.standard === NftStandard.Irc27}
-        <Irc27CollectibleDetails {nft} />
-    {:else if nft?.standard === NftStandard.Erc721}
-        <Erc721CollectibleDetails {nft} />
-    {/if}
-</Pane>
+{#if collection}
+    <CollectionDetails {collection} />
+{:else}
+    <Pane classes="h-full">
+        {#if nft?.standard === NftStandard.Irc27}
+            <Irc27CollectibleDetails {nft} />
+        {:else if nft?.standard === NftStandard.Erc721}
+            <Erc721CollectibleDetails {nft} />
+        {/if}
+    </Pane>
+{/if}

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/desktop/views/dashboard/components/Breadcrumbs.svelte

@@ -6,6 +6,7 @@
         CollectiblesRoute,
         DashboardRoute,
         GovernanceRoute,
+        collectiblesBreadcrumb,
         collectiblesRoute,
         collectiblesRouter,
         dashboardRoute,
@@ -80,7 +81,7 @@
         />
         {#if $dashboardRoute === DashboardRoute.Collectibles && $collectiblesRoute !== CollectiblesRoute.Gallery}
             <Icon name={IconName.ChevronRight} size="sm" />
-            <Breadcrumb text={$collectiblesRouter.getBreadcrumb() ?? $collectiblesRoute} disabled />
+            <Breadcrumb text={$collectiblesBreadcrumb ?? $collectiblesRoute} disabled />
         {/if}
         {#if $dashboardRoute === DashboardRoute.Governance && $governanceRoute !== GovernanceRoute.Proposals}
             <Icon name={IconName.ChevronRight} size="sm" />