/
AssetFilterItem.svelte
40 lines (34 loc) · 1.28 KB
/
AssetFilterItem.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
<script lang="typescript">
import { Dropdown } from 'shared/components'
import type { IDropdownChoice } from '@core/utils'
import { visibleSelectedAccountAssets } from '@core/wallet'
import { AssetFilterUnit } from '@core/utils/interfaces/filter'
export let filterUnit: AssetFilterUnit
const { baseCoin, nativeTokens } = $visibleSelectedAccountAssets
const choices: IDropdownChoice[] = [baseCoin, ...nativeTokens].map((choice) => ({
label: choice.metadata.name,
value: choice.metadata.name,
}))
if (!filterUnit.selected) {
filterUnit.selected = baseCoin.id
}
let value: string
$: {
const assetId = filterUnit.selected
if (assetId === baseCoin.id) {
value = baseCoin?.metadata.name
} else {
value = nativeTokens.find((_nativeToken) => _nativeToken.id === assetId)?.metadata.name
}
}
function onSelect(item): void {
let asset = undefined
if (item.value === baseCoin.metadata.name) {
asset = baseCoin
} else {
asset = nativeTokens.find((_nativeToken) => _nativeToken.metadata.name === item.value)
}
filterUnit.selected = asset?.id || ''
}
</script>
<Dropdown {value} items={choices} {onSelect} small />