Merge remote-tracking branch 'origin/develop' into 2362-move-polling-…

…of-the-network-health-and-status-inside-the-respective-classes

packages/desktop/features/collectibles.features.ts

@@ -8,6 +8,9 @@ const collectiblesFeatures: ICollectiblesFeatures = {
     erc721: {
         enabled: true,
     },
+    collections: {
+        enabled: false,
+    },
 }
 
 export default collectiblesFeatures

packages/desktop/lib/electron/managers/json-file.manager.ts

@@ -0,0 +1,29 @@
+import { IError } from '@core/error/interfaces'
+import { app } from 'electron'
+import fs from 'fs'
+import path from 'path'
+
+export class JsonFileManager {
+    public static saveJsonToFile(filename: string, data: object): void {
+        try {
+            fs.writeFileSync(JsonFileManager.getFilePath(filename), JSON.stringify(data))
+        } catch (err) {
+            console.error(err)
+        }
+    }
+
+    public static loadJsonFromFile(filename: string): object | undefined {
+        try {
+            return JSON.parse(fs.readFileSync(JsonFileManager.getFilePath(filename)).toString())
+        } catch (err) {
+            if (!(err as IError).message?.includes('ENOENT')) {
+                console.error(err)
+            }
+        }
+    }
+
+    private static getFilePath(filename: string): string {
+        const userDataPath = app.getPath('userData')
+        return path.join(userDataPath, filename)
+    }
+}

packages/desktop/lib/electron/processes/main.process.ts

@@ -36,7 +36,7 @@ import { getMachineId } from '../utils/os.utils'
 import { registerPowerMonitorListeners } from '../listeners'
 import ThirdPartyAppManager from '../managers/third-party-profiles.manager'
 import { ITransakWindowData } from '@core/app/interfaces'
-import { IError } from '@core/error'
+import { JsonFileManager } from '../managers/json-file.manager'
 
 export let appIsReady = false
 
@@ -652,7 +652,7 @@ function windowStateKeeper(windowName: string, settingsFilename: string): IAppSt
     }
 
     function setBounds(): void {
-        const settings = <ISettings>loadJsonConfig(settingsFilename)
+        const settings = <ISettings>JsonFileManager.loadJsonFromFile(settingsFilename)
 
         if (settings && settings.windowState && settings.windowState[windowName]) {
             windowState = settings.windowState[windowName]
@@ -666,13 +666,13 @@ function windowStateKeeper(windowName: string, settingsFilename: string): IAppSt
             windowState = window.getBounds() as IAppState
         }
 
-        let settings = loadJsonConfig(settingsFilename) as ISettings
+        let settings = JsonFileManager.loadJsonFromFile(settingsFilename) as ISettings
 
         settings = settings || <ISettings>{}
         settings.windowState = settings.windowState || <IAppState>{}
         settings.windowState[windowName] = windowState
 
-        saveJsonConfig(settingsFilename, settings)
+        JsonFileManager.saveJsonToFile(settingsFilename, settings)
     }
 
     function track(win: BrowserWindow): void {
@@ -712,37 +712,14 @@ interface IAppState {
 
 function updateSettings(data: object): void {
     const filename = 'settings.json'
-    const config = loadJsonConfig(filename)
+    const config = JsonFileManager.loadJsonFromFile(filename)
 
     /**
      * CAUTION: We must be careful saving properties to this file, as
      * once we decide to save it there then it will be there forever
      * even if the name changes later.
      */
-    saveJsonConfig(filename, { ...config, ...data })
-}
-
-function saveJsonConfig(filename: string, data: object): void {
-    try {
-        fs.writeFileSync(getJsonConfig(filename), JSON.stringify(data))
-    } catch (err) {
-        console.error(err)
-    }
-}
-
-function loadJsonConfig(filename: string): object | undefined {
-    try {
-        return JSON.parse(fs.readFileSync(getJsonConfig(filename)).toString())
-    } catch (err) {
-        if (!(err as IError).message?.includes('ENOENT')) {
-            console.error(err)
-        }
-    }
-}
-
-function getJsonConfig(filename: string): string {
-    const userDataPath = app.getPath('userData')
-    return path.join(userDataPath, filename)
+    JsonFileManager.saveJsonToFile(filename, { ...config, ...data })
 }
 
 export function updateAppVersionDetails(details: object): void {

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 />

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}

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'

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>

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>

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'

packages/shared/src/lib/contexts/onboarding/helpers/convertOnboardingProfileToPersistedProfile.ts

@@ -4,7 +4,7 @@ import { DEFAULT_PERSISTED_PROFILE_OBJECT } from '@core/profile/constants'
 import { IOnboardingProfile } from '../interfaces'
 import { DEFAULT_L1_EVM_NETWORK_CONFIGURATION, SupportedNetworkId } from '@core/network/constants'
 import features from '@features/features'
-import { IPureEvmNetworkConfiguration, IStardustNetwork } from '@core/network/interfaces'
+import { IPureEvmNetworkConfiguration } from '@core/network/interfaces'
 
 export function convertOnboardingProfileToPersistedProfile(
     onboardingProfile?: Partial<IOnboardingProfile>
@@ -26,7 +26,7 @@ export function convertOnboardingProfileToPersistedProfile(
 
     return {
         ...structuredClone(DEFAULT_PERSISTED_PROFILE_OBJECT),
-        ...{ network: onboardingProfile?.network as IStardustNetwork },
+        ...{ network },
         ...(evmNetworks && { evmNetworks }),
         ...(onboardingProfile?.name && { name: onboardingProfile.name }),
         ...(onboardingProfile?.id && { id: onboardingProfile.id }),

packages/shared/src/lib/core/network/classes/stardust-network.class.ts

@@ -2,13 +2,15 @@ import { get, writable } from 'svelte/store'
 import { activeProfile, updateActiveProfile } from '@core/profile/stores'
 import { NetworkHealth, NetworkNamespace } from '../enums'
 import { IIscChainConfiguration, IProtocol, IStardustNetwork, IStardustNetworkMetadata } from '../interfaces'
-import { addNetwork } from '../stores'
-import { NetworkId, StardustNetworkId } from '../types'
+import { EvmNetworkId, StardustNetworkId } from '../types'
 
-import { IBaseToken } from '@core/token'
 import { getAndUpdateNodeInfo } from '@core/network/actions'
 import { getNetworkStatusFromNodeInfo } from '@core/network/helpers'
 import { NETWORK_STATUS_POLL_INTERVAL } from '@core/network/constants'
+import { IBaseToken } from '@core/token/interfaces'
+
+import { IscChain } from '../classes'
+import { addChain, removeChain } from '../stores'
 
 export class StardustNetwork implements IStardustNetwork {
     public readonly id: StardustNetworkId
@@ -19,7 +21,7 @@ export class StardustNetwork implements IStardustNetwork {
     public readonly bech32Hrp: string
     public readonly protocol: IProtocol
     public readonly baseToken: IBaseToken
-    public readonly chainConfigurations: IIscChainConfiguration[]
+    public iscChains: IscChain[]
 
     public health = writable(NetworkHealth.Operational)
     public currentMilestone = writable(-1)
@@ -35,7 +37,13 @@ export class StardustNetwork implements IStardustNetwork {
         this.networkName = persistedNetwork.protocol.networkName
         this.protocol = persistedNetwork.protocol
         this.baseToken = persistedNetwork.baseToken
-        this.chainConfigurations = persistedNetwork.chainConfigurations
+
+        this.iscChains = persistedNetwork.chainConfigurations
+            .map((chainConfiguration) => {
+                return new IscChain(chainConfiguration)
+            })
+            .filter(Boolean)
+
         void this.startStatusPoll()
     }
 
@@ -61,29 +69,27 @@ export class StardustNetwork implements IStardustNetwork {
             network.chainConfigurations.push(chainConfiguration)
             updateActiveProfile({ network })
 
-            this.chainConfigurations.push(chainConfiguration)
-            addNetwork(chainConfiguration)
+            const iscChain = new IscChain(chainConfiguration)
+            this.iscChains.push(iscChain)
+            addChain(iscChain)
         }
     }
 
     private isChainAlreadyAdded(chainConfiguration: IIscChainConfiguration): boolean {
-        return this.chainConfigurations.some((evmNetwork) => {
-            const hasSameName = evmNetwork.name === chainConfiguration.name
-            const hasSameId = evmNetwork.id === chainConfiguration.id
+        return this.iscChains.some(({ name, id }) => {
+            const hasSameName = name === chainConfiguration.name
+            const hasSameId = id === chainConfiguration.id
             return hasSameName || hasSameId
         })
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    editChain(networkId: NetworkId, payload: Partial<IIscChainConfiguration>): Promise<void> {
-        return Promise.resolve()
-    }
-
-    removeChain(networkId: NetworkId): void {
+    removeChain(networkId: EvmNetworkId): void {
         const network = get(activeProfile).network
         const newChains = network.chainConfigurations.filter(
             (chainConfiguration) => chainConfiguration.id !== networkId
         )
+        this.iscChains = this.iscChains.filter((chain) => chain.id === networkId)
+        removeChain(networkId)
         updateActiveProfile({ network: { ...network, chainConfigurations: newChains } })
     }
 }