harb/web-app/src/components/collapse/CollapseHistory.vue
johba f8927b426e webapp - ESLint + Prettier with pre-commit hooks (#54)
resolves #47

Co-authored-by: johba <johba@harb.eth>
Reviewed-on: https://codeberg.org/johba/harb/pulls/54
2025-10-03 16:51:44 +02:00

56 lines
1.8 KiB
Vue

<template>
<FCollapse class="f-collapse-history">
<template v-slot:header>
<div class="collapse-header">
<div><span class="subheader2">Tax</span> {{ props.taxRate }} %</div>
<div>
<span class="subheader2">ID</span> <span class="number-small">{{ props.id }}</span>
</div>
<div class="collapse-amount">
<span class="number-small">{{ compactNumber(props.amount) }}</span>
<span class="caption"> $KRK</span>
</div>
</div>
</template>
<div class="collapsed-body history">
<div>
<span class="subheader2">Tax paid</span><span class="number-small">{{ props.taxPaid }}</span
><span class="caption"> $KRK</span>
</div>
<div>
<span class="subheader2">Profit</span><span class="number-small">{{ profit }}</span
><span class="caption"> $KRK</span>
</div>
</div>
</FCollapse>
</template>
<script setup lang="ts">
import type { Position } from '@/composables/usePositions';
import FCollapse from '@/components/fcomponents/FCollapse.vue';
import { compactNumber } from '@/utils/helper';
import { formatUnits } from 'viem';
import { computed } from 'vue';
const props = defineProps<{
taxRate: number;
taxPaid: string;
treshold: number;
id: bigint;
amount: number;
position: Position;
}>();
const profit = computed(() => {
const multiplier = Number(formatUnits(props.position.totalSupplyInit, 18)) / Number(formatUnits(props.position.totalSupplyEnd!, 18));
return Number(formatUnits(props.position.totalSupplyEnd!, 18)) * multiplier - Number(formatUnits(props.position.totalSupplyEnd!, 18));
});
</script>
<style lang="sass">
@use 'collapse'
.f-collapse
&.f-collapse-history
.collapse-header, .collapsableDiv
margin-right: 32px
</style>