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

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

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

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

</style>
