-
Notifications
You must be signed in to change notification settings - Fork 103
/
TokenWithMax.svelte
33 lines (31 loc) · 1.37 KB
/
TokenWithMax.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
<script lang="ts">
import { localize } from '@core/i18n'
import { truncateString } from '@core/utils'
import { formatTokenAmountBestMatch, IAsset } from '@core/wallet'
import { AssetIcon, Button, ButtonSize, FontWeight, Text, TextType } from '@ui'
export let asset: IAsset
export let onMaxClick: () => unknown
</script>
<div class="w-full flex flex-row justify-between items-center">
<div class="flex flex-row items-center text-left space-x-4">
<AssetIcon {asset} />
<div class="flex flex-col">
<Text type={TextType.p} fontWeight={FontWeight.semibold}>
{asset?.metadata?.name ? truncateString(asset?.metadata?.name, 13, 0) : truncateString(asset?.id, 6, 7)}
</Text>
<div class="flex flex-row justify-between items-center text-left">
<Text type={TextType.p} secondary smaller>
{localize('general.availableAmount', {
values: {
amount: formatTokenAmountBestMatch(asset?.balance.total, asset?.metadata),
},
})}
</Text>
<slot name="subLabel" />
</div>
</div>
</div>
<div class="flex flex-col">
<Button outline size={ButtonSize.Small} onClick={onMaxClick}>{localize('actions.max')}</Button>
</div>
</div>