fix: Fix collapse component formatting: taxPaid display, string coercion, BigInt precision (#260)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

kraiken-lib/src/position.ts

@@ -5,6 +5,8 @@
  * This aligns with the Harberger tax economic model where stakers earn from protocol growth.
  */
 
+import { formatUnits } from 'viem';
+
 /**
  * Calculate profit for an active position.
  *
@@ -31,8 +33,8 @@ export function calculateActivePositionProfit(totalSupplyInit: bigint, currentTo
   }
 
   // Convert to token units (assuming 18 decimals)
-  const initSupply = Number(totalSupplyInit) / 1e18;
-  const currentSupply = Number(currentTotalSupply) / 1e18;
+  const initSupply = Number(formatUnits(totalSupplyInit, 18));
+  const currentSupply = Number(formatUnits(currentTotalSupply, 18));
 
   // Calculate new issuance since position creation
   const newIssuance = currentSupply - initSupply;
@@ -67,8 +69,8 @@ export function calculateClosedPositionProfit(totalSupplyInit: bigint, totalSupp
   }
 
   // Convert to token units (assuming 18 decimals)
-  const initSupply = Number(totalSupplyInit) / 1e18;
-  const endSupply = Number(totalSupplyEnd) / 1e18;
+  const initSupply = Number(formatUnits(totalSupplyInit, 18));
+  const endSupply = Number(formatUnits(totalSupplyEnd, 18));
 
   // Calculate new issuance during position lifetime
   const newIssuance = endSupply - initSupply;

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

@@ -84,7 +84,7 @@ 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, formatWei } from 'kraiken-lib/format';
+import { compactNumber, weiToNumber } from 'kraiken-lib/format';
 import { useUnstake } from '@/composables/useUnstake';
 import { useAdjustTaxRate } from '@/composables/useAdjustTaxRates';
 import { computed, ref, onMounted } from 'vue';
@@ -114,7 +114,7 @@ const props = defineProps<{
 const showTaxMenu = ref(false);
 const newTaxRateIndex = ref<number | null>(null);
 const taxDue = ref<bigint>();
-const taxPaidGes = ref<string>();
+const taxPaidGes = ref<number>();
 const profit = ref<number>();
 const loading = ref<boolean>(false);
 
@@ -127,7 +127,7 @@ const tag = computed(() => {
   return '';
 });
 
-const total = computed(() => props.amount + profit.value! + -taxPaidGes.value!);
+const total = computed(() => props.amount + profit.value! - taxPaidGes.value!);
 
 // P&L calculations (FIXED: Use BigInt math to preserve precision)
 const grossReturn = computed(() => {
@@ -216,16 +216,12 @@ async function unstakePosition() {
 async function loadActivePositionData() {
   //loadTaxDue
   taxDue.value = await getTaxDue(props.id);
-  taxPaidGes.value = formatWei(taxDue.value + BigInt(props.position.taxPaid), 18);
+  taxPaidGes.value = weiToNumber(taxDue.value + BigInt(props.position.taxPaid));
 
   //loadTotalSupply
 
   // Calculate issuance earned using kraiken-lib profit calculation
-  profit.value = calculateActivePositionProfit(
-    props.position.totalSupplyInit,
-    statCollection.kraikenTotalSupply,
-    props.position.share
-  );
+  profit.value = calculateActivePositionProfit(props.position.totalSupplyInit, statCollection.kraikenTotalSupply, props.position.share);
 }
 
 onMounted(() => {

web-app/src/components/collapse/CollapseHistory.vue

@@ -20,7 +20,7 @@
     </template>
     <div class="history-body">
       <div>
-        <span class="subheader2">Tax paid</span><span class="number-small">{{ props.taxPaid }}</span
+        <span class="subheader2">Tax paid</span><span class="number-small">{{ compactNumber(props.taxPaid) }}</span
         ><span class="caption"> $KRK</span>
       </div>
       <div>
@@ -53,8 +53,7 @@ import { computed } from 'vue';
 
 const props = defineProps<{
   taxRate: number;
-  taxPaid: string;
-  treshold: number;
+  taxPaid: number;
   id: bigint;
   amount: number;
   position: Position;

web-app/src/views/StakeView.vue

@@ -93,8 +93,7 @@
           v-for="position in myClosedPositions"
           :key="position.id"
           :taxRate="position.taxRatePercentage"
-          :taxPaid="position.taxPaid.toString()"
-          :treshold="tresholdValue"
+          :taxPaid="weiToNumber(position.taxPaid)"
           :id="position.positionId"
           :amount="position.amount"
           :position="position"
@@ -129,7 +128,7 @@ import { usePositions } from '@/composables/usePositions';
 const { status } = useAccount();
 const showPanel = inject('showPanel');
 
-import { commaNumber } from 'kraiken-lib/format';
+import { commaNumber, weiToNumber } from 'kraiken-lib/format';
 const wallet = useWallet();
 const initialChainId = wallet.account.chainId ?? DEFAULT_CHAIN_ID;
 const { myActivePositions, myClosedPositions, tresholdValue, activePositions } = usePositions(initialChainId);