Merge branch 'develop' into fix/fix-duplicated-nft-generation

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

@@ -1,57 +1,57 @@
 <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'
+    import { collectionsSearchTerm, selectedAccountCollections } from '@core/nfts/stores'
+    import { Collections, isVisibleCollection } from '@core/nfts'
 
     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())
-            ))
+    let queriedCollections: Collections = {}
+    $: $collectionsSearchTerm,
+        (queriedCollections = Object.fromEntries(
+            Object.entries($selectedAccountCollections)
+                .filter(([, collection]) => isVisibleCollection(collection))
+                .sort(([, collection1], [, collection2]) =>
+                    collection1?.name.toLowerCase().localeCompare(collection2?.name.toLowerCase())
+                )
+        ))
+
+    $: hasCollections = Object.keys($selectedAccountCollections).length > 0
 </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>
+                <Text textColor="secondary">{String(Object.keys($selectedAccountCollections).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 hasCollections}
+                <SearchInput bind:value={$collectionsSearchTerm} />
             {/if}
             {#if features.collectibles.erc721.enabled}
                 <CollectiblesListMenu />
             {/if}
         </div>
     </header>
-    {#if collections.length}
-        {#if queriedCollections.length}
+    {#if hasCollections}
+        {#if Object.keys(queriedCollections).length > 0}
             <!-- <CollectionsGallery collections={queriedCollections} /> -->
+            {#each Object.keys(queriedCollections) as collection}
+                <Text>{queriedCollections[collection].name}</Text>
+            {/each}
         {:else}
             <div class="w-full h-full flex flex-col items-center justify-center">
                 <EmptyListPlaceholder

packages/desktop/views/dashboard/send-flow/views/SelectRecipientView.svelte

@@ -42,17 +42,22 @@
     $: selectedNetworkId = selectorOptions[selectedIndex]?.networkId
     $: selectedRecipient = selectorOptions[selectedIndex]?.selectedRecipient
 
-    let hasNetworkRecipientError: boolean = false
-    $: {
+    let hasInsufficientFunds = false
+    $: $sendFlowParameters, void checkFundsForGas()
+    async function checkFundsForGas(): Promise<void> {
+        if (!$sendFlowParameters) {
+            return
+        }
+
         const originNetworkId = getNetworkIdFromSendFlowParameters($sendFlowParameters)
         if (originNetworkId && isEvmNetwork(originNetworkId)) {
-            hasNetworkRecipientError = !canAccountMakeEvmTransaction(
+            hasInsufficientFunds = !(await canAccountMakeEvmTransaction(
                 $selectedAccountIndex,
                 originNetworkId,
-                $sendFlowParameters?.type
-            )
+                $sendFlowParameters.type
+            ))
         } else {
-            hasNetworkRecipientError = false
+            hasInsufficientFunds = false
         }
     }
 
@@ -247,13 +252,13 @@
 >
     <form on:submit|preventDefault={onContinueClick} id="select-recipient-form">
         <NetworkRecipientSelector
-            hasError={hasNetworkRecipientError}
+            hasError={hasInsufficientFunds}
             bind:this={selector}
             bind:options={selectorOptions}
             bind:selectedIndex
         />
     </form>
-    {#if hasNetworkRecipientError}
+    {#if hasInsufficientFunds}
         <Alert variant="danger" text={localize('error.send.insufficientFundsGasFee')} />
     {/if}
 </PopupTemplate>

packages/desktop/views/dashboard/send-flow/views/SelectTokenView.svelte

@@ -31,21 +31,21 @@
 
     $: $selectedAccountTokens, searchValue, selectedTab, setFilteredTokenList()
 
-    let tokenError: string = ''
-    $: if (
-        selectedToken &&
-        isEvmNetwork(selectedToken.networkId) &&
-        !canAccountMakeEvmTransaction($selectedAccountIndex, selectedToken.networkId, $sendFlowParameters?.type)
-    ) {
-        tokenError = localize('error.send.insufficientFundsTransaction')
-    } else if (
-        selectedToken &&
-        isStardustNetwork(selectedToken.networkId) &&
-        !canAccountMakeStardustTransaction($selectedAccountIndex, $sendFlowParameters?.type)
-    ) {
-        tokenError = localize('error.send.insufficientFundsTransaction')
-    } else {
-        tokenError = ''
+    let tokenError = ''
+    $: selectedToken, $sendFlowParameters, void setTokenError()
+    async function setTokenError(): Promise<void> {
+        let hasEnoughFunds = true
+        if (selectedToken && isEvmNetwork(selectedToken.networkId)) {
+            hasEnoughFunds = await canAccountMakeEvmTransaction(
+                $selectedAccountIndex,
+                selectedToken.networkId,
+                $sendFlowParameters?.type
+            )
+        } else if (selectedToken && isStardustNetwork(selectedToken.networkId)) {
+            hasEnoughFunds = canAccountMakeStardustTransaction($selectedAccountIndex, $sendFlowParameters?.type)
+        }
+
+        tokenError = hasEnoughFunds ? '' : localize('error.send.insufficientFundsTransaction')
     }
 
     const tabs = [

packages/desktop/views/dashboard/wallet/panes/account-summary/AccountSummaryPane.svelte

@@ -5,15 +5,18 @@
     import { networks } from '@core/network'
 
     export let account: IAccountState
+
+    const GRID_COLS = {
+        0: 'grid-cols-1',
+        1: 'grid-cols-2',
+        2: 'grid-cols-3',
+        3: 'grid-cols-4',
+    }
 </script>
 
 <Pane
     classes="
-        w-full flex shrink-0 grid {$networks.length > 0
-        ? $networks.length > 1
-            ? 'grid-cols-4'
-            : 'grid-cols-3'
-        : 'grid-cols-2'}
+        w-full flex shrink-0 grid {GRID_COLS[$networks.length] ?? GRID_COLS[3]}
         bg-surface dark:bg-surface-dark
         border border-solid border-stroke dark:border-stroke-dark
         divide-x divide-solid divide-stroke dark:divide-stroke-dark

packages/shared/src/components/avatars/NetworkAvatar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { DEFAULT_NETWORK_ICON } from '@auxiliary/icon'
-    import { Avatar, Tooltip } from '@bloomwalletio/ui'
-    import { NetworkId, SupportedNetworkId, getNameFromNetworkId, isSupportedNetworkId } from '@core/network'
+    import { Avatar, IconName, Tooltip } from '@bloomwalletio/ui'
+    import { NetworkId, SupportedNetworkId, getNameFromNetworkId } from '@core/network'
 
     export let networkId: NetworkId
     export let networkName: string | undefined = undefined
@@ -26,17 +26,19 @@
     }
 
     let anchor: HTMLElement
-    $: isSupported = isSupportedNetworkId(networkId)
-    $: backgroundColor = isSupported ? AVATAR_BACKGROUND_COLOR[networkId] : 'neutral-4'
-    $: customTextColor = isSupported ? AVATAR_TEXT_COLOR[networkId] : undefined
-    $: icon = isSupported ? DEFAULT_NETWORK_ICON[networkId] : undefined
     $: networkName = networkName ? networkName : networkId ? getNameFromNetworkId(networkId) ?? networkId : networkId
     $: magnify = Object.values(SupportedNetworkId).includes(networkId)
 </script>
 
-<!-- TODO: Add initials for not supported network IDs -->
 <network-avatar bind:this={anchor} class="avatar">
-    <Avatar {size} {shape} {backgroundColor} {customTextColor} {icon} {magnify} />
+    <Avatar
+        {size}
+        {shape}
+        backgroundColor={AVATAR_BACKGROUND_COLOR[networkId] ?? 'neutral-4'}
+        customTextColor={AVATAR_TEXT_COLOR[networkId] ?? 'text-primary'}
+        icon={DEFAULT_NETWORK_ICON[networkId] ?? IconName.Globe}
+        {magnify}
+    />
 </network-avatar>
 {#if showTooltip && networkName}
     <Tooltip {anchor} text={networkName} placement="right" event="hover" />

packages/shared/src/lib/core/layer-2/actions/canAccountMakeEvmTransaction.ts

@@ -1,23 +1,22 @@
 import { EvmNetworkId } from '@core/network/types'
 import { SendFlowType } from '@core/wallet/enums'
-
-import { getEvmChainGasPrice, getLayer2AccountBalanceForToken } from '../stores'
-
+import { getLayer2AccountBalanceForToken } from '../stores'
 import { FALLBACK_ESTIMATED_GAS, GAS_LIMIT_MULTIPLIER } from '../constants'
 import { calculateGasFeeInGlow } from '../helpers'
+import { getEvmNetwork } from '@core/network'
 
-export function canAccountMakeEvmTransaction(
+export async function canAccountMakeEvmTransaction(
     accountIndex: number,
     networkId: EvmNetworkId,
-    sendFlowType: SendFlowType
-): boolean | undefined {
+    sendFlowType: SendFlowType | undefined
+): Promise<boolean> {
     const baseTokenAccountBalance = getLayer2AccountBalanceForToken(accountIndex, networkId)
     const gasLimit = Math.floor(
         FALLBACK_ESTIMATED_GAS[sendFlowType ?? SendFlowType.BaseCoinTransfer] * GAS_LIMIT_MULTIPLIER
     )
-    const gasPrice = getEvmChainGasPrice(networkId)
+    const gasPrice = await getEvmNetwork(networkId)?.getGasPrice()
     if (gasPrice === undefined) {
-        return undefined
+        return false
     }
     const minimumGasFee = calculateGasFeeInGlow(gasLimit, gasPrice)
     return baseTokenAccountBalance > minimumGasFee

packages/shared/src/lib/core/layer-2/actions/index.ts

@@ -5,12 +5,9 @@ export * from './checkForUntrackedTokens'
 export * from './fetchL2BalanceForAccount'
 export * from './getGasFeeForLayer1ToLayer2Transaction'
 export * from './generateAndStoreEvmAddressForAccounts'
-export * from './getGasPriceForNetwork'
 export * from './getIscTransferSmartContractData'
 export * from './getLayer2MetadataForTransfer'
 export * from './getLayer2NetworkFromAddress'
 export * from './getNetworkFromAddress'
-export * from './pollEvmChainGasPrices'
 export * from './pollL2BalanceForAccount'
 export * from './setGasFee'
-export * from './updateEvmChainGasPrice'

packages/shared/src/lib/core/layer-2/stores/index.ts

@@ -1,2 +1 @@
-export * from './evm-chain-gas-prices.store'
 export * from './layer2-balances.store'

packages/shared/src/lib/core/layer-2/types/index.ts

@@ -1,6 +1,5 @@
 export * from './abi.type'
 export * from './contract.type'
-export * from './evm-chain-gas-prices.type'
 export * from './evm-transaction-options.type'
 export * from './evm-transaction-data.type'
 export * from './layer-2-account-balance.type'

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

@@ -76,6 +76,15 @@ export class BaseEvmNetwork implements IEvmNetwork {
         return new this.provider.eth.Contract(abi, address)
     }
 
+    async getGasPrice(): Promise<bigint | undefined> {
+        try {
+            const gasPrice = await this.provider.eth.getGasPrice()
+            return BigInt(gasPrice)
+        } catch {
+            return undefined
+        }
+    }
+
     async getLatestBlock(): Promise<IBlock> {
         const number = await this.provider.eth.getBlockNumber()
         return this.provider.eth.getBlock(number)