<template>
    <span>{{fmtAmount}} {{ raw ? '' : (token.symbol || '') }}</span>
</template>

<script setup>
import {useStore} from "@/store/store";
import {getToken} from "@/blockchain/token.js";
import {FixedNumber} from "ethers";
import {computed, ref} from "vue";

const s = useStore()
const props = defineProps(['addr', 'amount', 'raw'])
const token = await getToken(props.addr)
const fmtAmount = computed(() => {
  if( props.amount === null || props.amount === undefined )
    return ''
  return FixedNumber.fromValue(props.amount, token.decimals, {
    width: 256,
    decimals: token.decimals
  }).toUnsafeFloat().toPrecision(5) // todo precision
})
</script>

<style scoped lang="scss">
@use "src/styles/vars" as *;

</style>
