harb/web-app/src/components/collapse/CollapseActive.vue

<template>
  <FCollapse class="f-collapse-active" @collapse:opened="loadActivePositionData" :loading="loading">
    <template v-slot:header>
      <div class="collapse-header">
        <div class="collapse-header-row1">
          <div><span class="subheader2">Tax</span> {{ props.taxRate }} %</div>
          <FButton size="tiny" @click="payTax(props.id)">Pay Tax</FButton>
          <div class="position-id">
            <span class="subheader2">ID</span> <span class="number-small">{{ props.id }}</span>
          </div>
        </div>
        <div class="collapse-header-row2">
          <div>
            <div class="profit-stats-item">
              <div><b>Initial Stake</b></div>
              <div>{{ compactNumber(props.amount) }} $KRK</div>
            </div>
          </div>
          <div class="tags-list">
            <FTag v-if="tag">{{ tag }}</FTag>
          </div>
        </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">
      <div class="profit-stats-wrapper">
        <div class="profit-stats-item">
          <div><b>Tax Paid</b></div>
          <div>{{ taxPaidGes }} $KRK</div>
        </div>
        <div class="profit-stats-item">
          <div><b>Issuance Earned</b></div>
          <div>{{ profit }} $KRK</div>
        </div>
        <div class="profit-stats-item profit-stats-total">
          <div><b>Total</b></div>
          <div>{{ total.toFixed(5) }} $KRK</div>
        </div>
      </div>
    </div>
    <div class="collapsed-body--actions">
      <div :class="{ 'collapse-menu-open': showTaxMenu }">
        <FButton size="small" dense block outlined v-if="adjustTaxRate.state === 'SignTransaction'">Sign Transaction ...</FButton>
        <FButton size="small" dense outlined block v-else-if="adjustTaxRate.state === 'Waiting'" @click="unstakePosition"
          >Waiting ...</FButton
        >
        <FButton size="small" dense block v-else-if="adjustTaxRate.state === 'Action' && !showTaxMenu" @click="showTaxMenu = true"
          >Adjust Tax Rate</FButton
        >
        <template v-else>
          <div class="collapse-menu-input">
            <FSelect :items="filteredTaxRates" v-model="newTaxRate"> </FSelect>
          </div>
          <div>
            <FButton size="small" dense @click="changeTax(props.id, newTaxRate)">Confirm</FButton>
            <FButton size="small" dense outlined @click="showTaxMenu = false">Cancel</FButton>
          </div>
        </template>
      </div>
      <div></div>
      <div>
        <FButton size="small" dense block outlined v-if="unstake.state === 'SignTransaction'">Sign Transaction ...</FButton>
        <FButton size="small" dense outlined block v-else-if="unstake.state === 'Waiting'">Waiting ...</FButton>
        <FButton size="small" dense block v-else-if="unstake.state === 'Unstakeable'" @click="unstakePosition">Unstake</FButton>
      </div>
    </div>
  </FCollapse>
</template>

<script setup lang="ts">
import FButton from '@/components/fcomponents/FButton.vue';
import FTag from '@/components/fcomponents/FTag.vue';
import FSelect from '@/components/fcomponents/FSelect.vue';
import FCollapse from '@/components/fcomponents/FCollapse.vue';
import { compactNumber, formatBigNumber } from '@/utils/helper';
import { useUnstake } from '@/composables/useUnstake';
import { useAdjustTaxRate } from '@/composables/useAdjustTaxRates';
import { computed, ref, onMounted } from 'vue';
import { getTaxDue, payTax } from '@/contracts/stake';
import { type Position, loadPositions } from '@/composables/usePositions';
import { useStatCollection } from '@/composables/useStatCollection';

import { formatUnits } from 'viem';

const unstake = useUnstake();
const adjustTaxRate = useAdjustTaxRate();
const statCollection = useStatCollection();

const props = defineProps<{
  taxRate: number;
  treshold: number;
  id: bigint;
  amount: number;
  position: Position;
}>();

const showTaxMenu = ref(false);
const newTaxRate = ref<number>(1);
const taxDue = ref<bigint>();
const taxPaidGes = ref<string>();
const profit = ref<number>();
const loading = ref<boolean>(false);

const tag = computed(() => {
  if (props.taxRate < props.treshold) {
    return 'Low Tax!';
  }
  return '';
});

const total = computed(() => props.amount + profit.value! + -taxPaidGes.value!);

async function changeTax(id: bigint, newTaxRate: number) {
  await adjustTaxRate.changeTax(id, newTaxRate);
  showTaxMenu.value = false;
}

async function unstakePosition() {
  await unstake.exitPosition(props.id);
  loading.value = true;
  await new Promise(resolve => setTimeout(resolve, 5000));
  await loadPositions();
  loading.value = false;
}

async function loadActivePositionData() {
  //loadTaxDue
  taxDue.value = await getTaxDue(props.id);
  taxPaidGes.value = formatBigNumber(taxDue.value + BigInt(props.position.taxPaid), 18);

  //loadTotalSupply

  const multiplier = Number(formatUnits(props.position.totalSupplyInit, 18)) / Number(formatUnits(statCollection.kraikenTotalSupply, 18));

  profit.value =
    Number(formatUnits(statCollection.kraikenTotalSupply, 18)) * multiplier - Number(formatUnits(statCollection.kraikenTotalSupply, 18));
}

onMounted(() => {
  if (props.position.taxRateIndex !== undefined) {
    const taxRate = adjustTaxRate.taxRates.find(obj => obj.index === props.position.taxRateIndex! + 1);

    if (taxRate) {
      newTaxRate.value = taxRate.year;
    }
  }
});

const filteredTaxRates = computed(() => adjustTaxRate.taxRates.filter(obj => obj.year > props.taxRate));
</script>

<style lang="sass">
@use 'collapse'
.f-collapse
    &.f-collapse-active
        background-color: #07111B
        .collapse-header
            width: 100%
            display: flex
            justify-content: space-between
            flex-direction: column
            position: relative
            gap: 16px
            .collapse-header-row1
                display: flex
                flex-direction: row
                gap: 16px
                align-items: center
                // margin-right: 32px

                .position-id
                    margin-left: auto
            .collapse-header-row2
                display: flex
                justify-content: space-between
                >div
                    width: 50%
                    min-height: 22px
                    .profit-stats-item
                        display: grid
                        grid-template-columns: 1fr 1fr
                        gap: 8px
                        div
                            &:last-child
                                text-align: right
                .tags-list
                    margin-right: 32px
                    text-align: right
.collapsableDiv
    .collapsed-body
        display: flex
        flex-direction: column
        margin-right: 32px
        .collapsed-body--header
            justify-content: space-between
        .profit-stats-wrapper
            display: flex

            flex-direction: column
            gap: 4px
            margin: 0
            margin-top: 4px
            width: 100%
            color: white
            @media (min-width: 768px)
                width: 50%
                margin: 4px auto 0 0
            .profit-stats-item
                display: grid
                grid-template-columns: 1fr 1fr
                gap: 8px
                div
                    &:last-child
                        text-align: right
                &.profit-stats-total
                    border-top: 2px solid var(--color-font)
                    padding-top: 2px
        .collapsed-body--actions
            .collapse-menu-open
                display: flex
                align-items: center
                gap: 4px
                flex: 1 1 auto
                .collapse-menu-input
                    display: flex
                    align-items: center
</style>