Merge branch 'develop' into 2374-nest-isc-chains-in-stardust-class

bloomwalletio · Apr 26, 2024 · 8c42e4e · 8c42e4e
2 parents f4e0646 + 560cd08
commit 8c42e4e
Show file tree

Hide file tree

Showing 14 changed files with 159 additions and 46 deletions.
diff --git a/firefly.diff b/firefly.diff
diff --git a/packages/desktop/features/collectibles.features.ts b/packages/desktop/features/collectibles.features.ts
@@ -8,6 +8,9 @@ const collectiblesFeatures: ICollectiblesFeatures = {
     erc721: {
         enabled: true,
     },
+    collections: {
+        enabled: false,
+    },
 }
 
 export default collectiblesFeatures
diff --git a/packages/desktop/views/dashboard/collectibles/Collectibles.svelte b/packages/desktop/views/dashboard/collectibles/Collectibles.svelte
@@ -3,7 +3,8 @@
     import features from '@features/features'
     import { selectedAccountIndex } from '@core/account/stores'
     import { collectiblesRoute, CollectiblesRoute, collectiblesRouter } from '@core/router'
-    import { CollectiblesDetailsView, CollectiblesGalleryView } from './views'
+    import { CollectiblesDetailsView, CollectiblesGalleryView, CollectionsGalleryView } from './views'
+    import { selectedCollectiblesTab } from '@core/nfts/stores'
 
     $: $selectedAccountIndex !== undefined && $collectiblesRouter.reset()
 
@@ -14,7 +15,11 @@
 
 <div class="w-full h-full flex flex-col flex-nowrap p-8 relative flex-1">
     {#if $collectiblesRoute === CollectiblesRoute.Gallery}
-        <CollectiblesGalleryView />
+        {#if $selectedCollectiblesTab?.key === 'collectibles'}
+            <CollectiblesGalleryView />
+        {:else if $selectedCollectiblesTab?.key === 'collections'}
+            <CollectionsGalleryView />
+        {/if}
     {/if}
     {#if $collectiblesRoute === CollectiblesRoute.Details}
         <CollectiblesDetailsView />

diff --git a/packages/desktop/views/dashboard/collectibles/components/CollectiblesTabs.svelte b/packages/desktop/views/dashboard/collectibles/components/CollectiblesTabs.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { Tabs } from '@bloomwalletio/ui'
+    import { COLLECTIBLES_TABS } from '@core/nfts'
+    import { selectedCollectiblesTab } from '@core/nfts/stores'
+
+    const selectedIndex = COLLECTIBLES_TABS.findIndex((tab) => tab.key === $selectedCollectiblesTab?.key)
+</script>
+
+{#if COLLECTIBLES_TABS.length > 1}
+    <div class="w-64">
+        <Tabs {selectedIndex} bind:selectedTab={$selectedCollectiblesTab} tabs={COLLECTIBLES_TABS} />
+    </div>
+{/if}
diff --git a/packages/desktop/views/dashboard/collectibles/components/index.ts b/packages/desktop/views/dashboard/collectibles/components/index.ts
@@ -1,2 +1,3 @@
-export { default as Irc27CollectibleDetails } from './Irc27CollectibleDetails.svelte'
+export { default as CollectiblesTabs } from './CollectiblesTabs.svelte'
 export { default as Erc721CollectibleDetails } from './Erc721CollectibleDetails.svelte'
+export { default as Irc27CollectibleDetails } from './Irc27CollectibleDetails.svelte'
diff --git a/packages/desktop/views/dashboard/collectibles/views/CollectiblesGalleryView.svelte b/packages/desktop/views/dashboard/collectibles/views/CollectiblesGalleryView.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import { localize } from '@core/i18n'
-    import { nftFilter, nftSearchTerm, ownedNfts } from '@core/nfts/stores'
-    import { NftGallery, SearchInput } from '@ui'
-    import { Button, IconName, Text, Pill } from '@bloomwalletio/ui'
-    import { PopupId, openPopup } from '@desktop/auxiliary/popup'
-    import features from '@features/features'
+    import { Button, IconName, Pill, Text } from '@bloomwalletio/ui'
     import { CollectiblesListMenu, EmptyListPlaceholder } from '@components'
     import { Filter } from '@components/filter'
+    import { localize } from '@core/i18n'
     import { Nft } from '@core/nfts/interfaces'
+    import { nftFilter, nftSearchTerm, ownedNfts } from '@core/nfts/stores'
     import { isVisibleNft } from '@core/nfts/utils'
+    import { PopupId, openPopup } from '@desktop/auxiliary/popup'
+    import features from '@features/features'
+    import { NftGallery, SearchInput } from '@ui'
+    import { CollectiblesTabs } from '../components'
 
     let queriedNfts: Nft[] = []
     $: $nftSearchTerm,
@@ -24,15 +25,16 @@
     }
 </script>
 
-<collectibles-gallery-view>
-    <div class="flex flex-row justify-between">
-        <div class="flex flex-row text-left gap-2 items-center">
+<collectibles-gallery-view class="flex flex-col w-full h-full gap-4">
+    <header class="flex flex-row items-center justify-between">
+        <div class="flex flex-row text-left gap-2 items-center flex-1">
             <Text type="h6">{localize('views.collectibles.gallery.title')}</Text>
             <Pill color="neutral">
                 <Text textColor="secondary">{String(queriedNfts.length ?? '')}</Text>
             </Pill>
         </div>
-        <div class="flex items-center gap-5 h-10 shrink-0">
+        <CollectiblesTabs />
+        <div class="flex justify-end items-center gap-5 h-10 shrink-0 flex-1">
             {#if $ownedNfts.length}
                 <SearchInput bind:value={$nftSearchTerm} />
                 <Filter filterStore={nftFilter} />
@@ -41,7 +43,7 @@
                 <CollectiblesListMenu />
             {/if}
         </div>
-    </div>
+    </header>
     {#if $ownedNfts.length}
         {#if queriedNfts.length}
             <NftGallery nfts={queriedNfts} />
@@ -61,9 +63,3 @@
         </div>
     {/if}
 </collectibles-gallery-view>
-
-<style lang="postcss">
-    collectibles-gallery-view {
-        @apply flex flex-col w-full h-full gap-4;
-    }
-</style>
diff --git a/packages/desktop/views/dashboard/collectibles/views/CollectionsGalleryView.svelte b/packages/desktop/views/dashboard/collectibles/views/CollectionsGalleryView.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { Button, IconName, Pill, Text } from '@bloomwalletio/ui'
+    import { CollectiblesListMenu, EmptyListPlaceholder } from '@components'
+    import { Filter } from '@components/filter'
+    import { localize } from '@core/i18n'
+    import { PopupId, openPopup } from '@desktop/auxiliary/popup'
+    import features from '@features/features'
+    import { SearchInput } from '@ui'
+    import { writable } from 'svelte/store'
+    import { CollectiblesTabs } from '../components'
+
+    function onReceiveClick(): void {
+        openPopup({
+            id: PopupId.ReceiveAddress,
+        })
+    }
+
+    // MOCKS
+    const collections: { name: string }[] = []
+    let collectionSearchTerm = ''
+    const collectionFilter = writable(undefined)
+    const ownedCollections = collections
+    let queriedCollections: typeof collections = []
+    $: collectionSearchTerm,
+        $collectionFilter,
+        (queriedCollections = ownedCollections
+            .filter((collection) => collection)
+            .sort((collection1, collection2) =>
+                collection1.name.toLowerCase().localeCompare(collection2.name.toLowerCase())
+            ))
+</script>
+
+<collections-gallery-view class="flex flex-col w-full h-full gap-4">
+    <header class="flex flex-row items-center justify-between">
+        <div class="flex flex-row text-left gap-2 items-center flex-1">
+            <Text type="h6">{localize('views.collectibles.collectionsGallery.title')}</Text>
+            <Pill color="neutral">
+                <Text textColor="secondary">{String(queriedCollections.length ?? '')}</Text>
+            </Pill>
+        </div>
+        <CollectiblesTabs />
+        <div class="flex justify-end items-center gap-5 h-10 shrink-0 flex-1">
+            {#if collections.length}
+                <SearchInput bind:value={collectionSearchTerm} />
+                <Filter filterStore={collectionFilter} />
+            {/if}
+            {#if features.collectibles.erc721.enabled}
+                <CollectiblesListMenu />
+            {/if}
+        </div>
+    </header>
+    {#if collections.length}
+        {#if queriedCollections.length}
+            <!-- <CollectionsGallery collections={queriedCollections} /> -->
+        {:else}
+            <div class="w-full h-full flex flex-col items-center justify-center">
+                <EmptyListPlaceholder
+                    title={localize('views.collectibles.collectionsGallery.noResults')}
+                    icon={IconName.Data}
+                />
+            </div>
+        {/if}
+    {:else}
+        <div class="w-full h-full flex flex-col items-center justify-center grow-1 gap-6">
+            <EmptyListPlaceholder
+                title={localize('views.collectibles.collectionsGallery.emptyTitle')}
+                subtitle={localize('views.collectibles.collectionsGallery.emptyDescription')}
+                icon={IconName.Data}
+            />
+            <Button text={localize('actions.getStarted')} on:click={onReceiveClick} />
+        </div>
+    {/if}
+</collections-gallery-view>
diff --git a/packages/desktop/views/dashboard/collectibles/views/index.ts b/packages/desktop/views/dashboard/collectibles/views/index.ts
@@ -1,2 +1,3 @@
 export { default as CollectiblesDetailsView } from './CollectiblesDetailsView.svelte'
 export { default as CollectiblesGalleryView } from './CollectiblesGalleryView.svelte'
+export { default as CollectionsGalleryView } from './CollectionsGalleryView.svelte'
diff --git a/packages/shared/src/lib/core/nfts/constants/collectibles-tabs.constant.ts b/packages/shared/src/lib/core/nfts/constants/collectibles-tabs.constant.ts
@@ -0,0 +1,7 @@
+import { KeyValue } from '@ui'
+import features from '@features/features'
+
+export const COLLECTIBLES_TABS: KeyValue<string>[] = [
+    { key: 'collectibles', value: 'Collectibles' },
+    ...(features.collectibles?.collections.enabled ? [{ key: 'collections', value: 'Collections' }] : []),
+]
diff --git a/packages/shared/src/lib/core/nfts/constants/index.ts b/packages/shared/src/lib/core/nfts/constants/index.ts
@@ -1,3 +1,4 @@
+export * from './collectibles-tabs.constant'
 export * from './current-irc27-version.constant'
 export * from './default-nft-filter.constant'
 export * from './default-nft-name.constant'

diff --git a/packages/shared/src/lib/core/nfts/stores/index.ts b/packages/shared/src/lib/core/nfts/stores/index.ts
@@ -4,4 +4,5 @@ export * from './nft-download-queue.store'
 export * from './nft-filter.store'
 export * from './persisted-nfts.store'
 export * from './selected-account-nfts.store'
+export * from './selected-collectibles-tabs.store'
 export * from './selected-nft.store'
diff --git a/packages/shared/src/lib/core/nfts/stores/selected-collectibles-tabs.store.ts b/packages/shared/src/lib/core/nfts/stores/selected-collectibles-tabs.store.ts
@@ -0,0 +1,5 @@
+import { KeyValue } from '@ui'
+import { Writable, writable } from 'svelte/store'
+import { COLLECTIBLES_TABS } from '../constants'
+
+export const selectedCollectiblesTab: Writable<KeyValue<string>> = writable(COLLECTIBLES_TABS[0])
diff --git a/packages/shared/src/lib/features/interfaces/collectibles-features.interface.ts b/packages/shared/src/lib/features/interfaces/collectibles-features.interface.ts
@@ -3,4 +3,5 @@ import { IFeatureFlag } from './feature-flag.interface'
 export interface ICollectiblesFeatures extends IFeatureFlag {
     useCaching: IFeatureFlag
     erc721: IFeatureFlag
+    collections: IFeatureFlag
 }
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
@@ -669,6 +669,12 @@
                     "unhide": "Unhide NFT",
                     "burn": "Burn NFT"
                 }
+            },
+            "collectionsGallery": {
+                "title": "Collections",
+                "emptyTitle": "No collections found",
+                "noResults": "No results found",
+                "emptyDescription": "Deposit or receive your first collectible!"
             }
         },
         "campaigns": {