/
AssetList.svelte
77 lines (67 loc) · 2.98 KB
/
AssetList.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script lang="ts">
import { localize } from '@core/i18n'
import { IAccountAssets, IAsset } from '@core/wallet'
import { assetFilter } from '@core/wallet/stores'
import { isVisibleAsset } from '@core/wallet/utils/isVisibleAsset'
import VirtualList from '@sveltejs/svelte-virtual-list'
import { AssetTile, Text } from '@ui'
import { Filter, SearchInput } from '../components'
import { FilterType } from '../lib/routers/routers'
export let assets: IAccountAssets
export let onAssetTileClick: (asset: IAsset) => unknown = () => {}
let searchValue = ''
let assetList: IAsset[]
$: $assetFilter, assets, (assetList = getFilteredAssetList()), scrollToTop()
$: isEmptyBecauseOfFilter = (assets.baseCoin || assets.nativeTokens?.length > 0) && assetList.length === 0
function scrollToTop(): void {
const listElement = document.querySelector('.asset-list')?.querySelector('svelte-virtual-list-viewport')
if (listElement) {
listElement.scroll(0, 0)
}
}
$: assets, searchValue, (assetList = getFilteredAssetList())
function getFilteredAssetList(): IAsset[] {
const list = []
if (assets?.baseCoin) {
list.push(assets.baseCoin)
}
list.push(...assets?.nativeTokens)
return searchAssets(
list.filter((_nativeToken) => isVisibleAsset(_nativeToken)),
searchValue
)
}
function searchAssets(assets: IAsset[], searchValue: string): IAsset[] {
const filteredAssets = assets?.filter((asset) => {
if (!searchValue) {
return true
} else {
const matchId = asset?.id?.toLowerCase().includes(searchValue.toLowerCase())
const metadataKeys = ['name', 'description', 'unit']
const matchMetadata = metadataKeys.some((key) => {
const hasMatch = asset?.metadata?.[key]?.toLowerCase().includes(searchValue.toLowerCase())
return hasMatch
})
return matchId || matchMetadata
}
})
return filteredAssets
}
</script>
{#if assets}
<asset-list-container class="asset-list h-full flex flex-auto flex-col flex-grow flex-shrink-0">
<asset-list-header class="flex justify-between items-center sticky pb-4">
<Filter filterStoreValue={$assetFilter} filterType={FilterType.Asset} />
<SearchInput bind:value={searchValue} />
</asset-list-header>
{#if assetList.length > 0}
<VirtualList items={assetList} let:item>
<AssetTile classes="mb-2" onClick={() => onAssetTileClick(item)} asset={item} />
</VirtualList>
{:else}
<div class="h-full flex flex-col items-center justify-center text-center">
<Text secondary>{localize(`general.${isEmptyBecauseOfFilter ? 'noFilteredAsset' : 'noAssets'}`)}</Text>
</div>
{/if}
</asset-list-container>
{/if}