-
Notifications
You must be signed in to change notification settings - Fork 103
/
TogglableAssetBalanceLabel.svelte
41 lines (38 loc) · 1.51 KB
/
TogglableAssetBalanceLabel.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
<script lang="ts">
import { Text, FontWeight, TextType } from '@ui'
import { formatTokenAmountBestMatch, IAsset } from '@core/wallet'
import { formatCurrency, localize } from '@core/i18n'
import { getMarketAmountFromAssetValue } from '@core/market/utils'
export let asset: IAsset
let isToggled = false
function toggle(): void {
isToggled = !isToggled
}
</script>
{#if asset}
<button on:click={toggle}>
<div class="flex flex-col flex-wrap items-start space-y-1">
<Text type={TextType.h1} fontWeight={FontWeight.semibold} fontSize="15" classes="w-full">
{isToggled
? formatCurrency(getMarketAmountFromAssetValue(asset?.balance?.total, asset))
: formatTokenAmountBestMatch(asset?.balance?.total, asset?.metadata)}
</Text>
<Text
type={TextType.p}
fontWeight={FontWeight.medium}
fontSize="15"
color="gray-600"
darkColor="gray-500"
classes="w-full"
>
{localize('general.availableBalanceWithValue', {
values: {
balance: isToggled
? formatCurrency(getMarketAmountFromAssetValue(asset?.balance?.available, asset))
: formatTokenAmountBestMatch(asset?.balance?.available, asset?.metadata),
},
})}
</Text>
</div>
</button>
{/if}