From e89fd4013d5124c9800a7506ff28e199c3be2087 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 24 Feb 2026 12:34:36 +0000
Subject: [PATCH 1/6] fix: Post-purchase holder dashboard on landing page
 (#150)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 landing/package.json                          |   1 +
 landing/src/components/WalletCard.vue         |   5 +-
 landing/src/router/index.ts                   |   5 +
 landing/src/views/HolderDashboardView.vue     | 288 ++++++++++++++++
 package-lock.json                             |  15 +-
 packages/ui-shared/package.json               |  11 +
 .../src/components/TransactionHistory.vue     | 312 ++++++++++++++++++
 .../src/composables/useHolderDashboard.ts     | 140 ++++++++
 packages/ui-shared/src/index.ts               |   2 +
 web-app/package.json                          |   3 +-
 web-app/src/views/WalletView.vue              |   2 +-
 11 files changed, 779 insertions(+), 5 deletions(-)
 create mode 100644 landing/src/views/HolderDashboardView.vue
 create mode 100644 packages/ui-shared/package.json
 create mode 100644 packages/ui-shared/src/components/TransactionHistory.vue
 create mode 100644 packages/ui-shared/src/composables/useHolderDashboard.ts
 create mode 100644 packages/ui-shared/src/index.ts

diff --git a/landing/package.json b/landing/package.json
index 76861d6..e724ca8 100644
--- a/landing/package.json
+++ b/landing/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@harb/web3": "*",
+    "@harb/ui-shared": "*",
     "@tanstack/vue-query": "^5.92.9",
     "@wagmi/vue": "^0.2.8",
     "sass": "^1.83.4",
diff --git a/landing/src/components/WalletCard.vue b/landing/src/components/WalletCard.vue
index a2c68c8..c39dba3 100644
--- a/landing/src/components/WalletCard.vue
+++ b/landing/src/components/WalletCard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
+import { RouterLink } from 'vue-router';
 import { useAccount } from '@harb/web3';
 
 const { address, isConnected } = useAccount();
@@ -78,7 +79,7 @@ const pnlPercent = computed(() => {
 
 const pnlClass = computed(() => (pnlPercent.value >= 0 ? 'positive' : 'negative'));
 
-const appUrl = computed(() => `/app/wallet/${address.value}`);
+const walletRoute = computed(() => ({ name: 'wallet', params: { address: address.value } }));
 </script>
 
 <template>
@@ -87,7 +88,7 @@ const appUrl = computed(() => `/app/wallet/${address.value}`);
     <div v-if="avgCost > 0" class="wallet-card__pnl">
       {{ pnlPercent >= 0 ? '+' : '' }}{{ pnlPercent.toFixed(1) }}%
     </div>
-    <a :href="appUrl" class="wallet-card__link">View Dashboard →</a>
+    <RouterLink :to="walletRoute" class="wallet-card__link">View Dashboard →</RouterLink>
   </div>
   <div v-else-if="isConnected && !loading && !hasPosition" class="wallet-card wallet-card--empty">
     <span>No KRK yet</span>
diff --git a/landing/src/router/index.ts b/landing/src/router/index.ts
index 7d65c76..5e52a93 100644
--- a/landing/src/router/index.ts
+++ b/landing/src/router/index.ts
@@ -20,6 +20,11 @@ const router = createRouter({
       name: 'mixed',
       component: () => import('../views/HomeViewMixed.vue'),
     },
+    {
+      path: '/wallet/:address',
+      name: 'wallet',
+      component: () => import('../views/HolderDashboardView.vue'),
+    },
     {
       path: '/docs',
       name: 'Docs',
diff --git a/landing/src/views/HolderDashboardView.vue b/landing/src/views/HolderDashboardView.vue
new file mode 100644
index 0000000..6a48557
--- /dev/null
+++ b/landing/src/views/HolderDashboardView.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="holder-dashboard">
+    <!-- Header -->
+    <div class="holder-dashboard__header">
+      <div class="holder-dashboard__addr-block">
+        <span class="holder-dashboard__label">Wallet</span>
+        <div class="holder-dashboard__addr-row">
+          <span class="holder-dashboard__addr">{{ truncatedAddress }}</span>
+          <button class="copy-btn" :class="{ copied }" @click="copyAddress" title="Copy address">
+            {{ copied ? '✓' : '⎘' }}
+          </button>
+        </div>
+      </div>
+      <div class="holder-dashboard__balance-block">
+        <span class="holder-dashboard__balance-num">{{ formatKrk(balanceKrk) }}</span>
+        <span class="holder-dashboard__balance-sym">KRK</span>
+      </div>
+    </div>
+
+    <!-- Loading / Error -->
+    <div v-if="loading && balanceKrk === 0" class="holder-dashboard__loading">
+      <div class="spinner"></div>
+      <p>Loading wallet data…</p>
+    </div>
+    <div v-if="error" class="holder-dashboard__error">⚠ {{ error }}</div>
+
+    <!-- P&L Card -->
+    <div
+      v-if="avgCostBasis > 0"
+      class="pnl-card"
+      :class="{ positive: unrealizedPnlEth >= 0, negative: unrealizedPnlEth < 0 }"
+    >
+      <div class="pnl-card__label">Unrealized P&amp;L</div>
+      <div class="pnl-card__value">
+        {{ unrealizedPnlEth >= 0 ? '+' : '' }}{{ formatEth(unrealizedPnlEth) }} ETH
+      </div>
+      <div class="pnl-card__percent">
+        {{ unrealizedPnlPercent >= 0 ? '+' : '' }}{{ unrealizedPnlPercent.toFixed(1) }}%
+      </div>
+      <div class="pnl-card__detail">
+        Avg cost: {{ formatEth(avgCostBasis) }} ETH/KRK · Current: {{ formatEth(currentPriceEth) }} ETH/KRK
+      </div>
+    </div>
+
+    <!-- Value Cards -->
+    <div class="value-cards">
+      <div class="value-card">
+        <div class="value-card__label">KRK Balance</div>
+        <div class="value-card__value">{{ formatKrk(balanceKrk) }}</div>
+        <div class="value-card__unit">KRK</div>
+      </div>
+      <div class="value-card">
+        <div class="value-card__label">ETH Backing</div>
+        <div class="value-card__value">{{ formatEth(ethBacking) }}</div>
+        <div class="value-card__unit">ETH</div>
+      </div>
+    </div>
+
+    <!-- Transaction History (buy/sell only) -->
+    <TransactionHistory
+      :address="addressParam"
+      :graphql-url="graphqlUrl"
+      :type-filter="['buy', 'sell']"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useHolderDashboard, TransactionHistory } from '@harb/ui-shared';
+
+const route = useRoute();
+const addressParam = computed(() => String(route.params.address ?? ''));
+
+const graphqlUrl = `${window.location.origin}/api/graphql`;
+
+const { loading, error, balanceKrk, avgCostBasis, currentPriceEth, unrealizedPnlEth, unrealizedPnlPercent, ethBacking } =
+  useHolderDashboard(addressParam, graphqlUrl);
+
+const copied = ref(false);
+
+const truncatedAddress = computed(() => {
+  const a = addressParam.value;
+  if (!a || a.length < 10) return a;
+  return `${a.slice(0, 6)}…${a.slice(-4)}`;
+});
+
+function copyAddress() {
+  navigator.clipboard.writeText(addressParam.value).then(() => {
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 1500);
+  });
+}
+
+function formatKrk(val: number): string {
+  if (!Number.isFinite(val)) return '0.00';
+  return val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 4 });
+}
+
+function formatEth(val: number): string {
+  if (!Number.isFinite(val)) return '0.0000';
+  return val.toLocaleString('en-US', { minimumFractionDigits: 4, maximumFractionDigits: 6 });
+}
+</script>
+
+<style lang="sass" scoped>
+.holder-dashboard
+  display: flex
+  flex-direction: column
+  gap: 28px
+  padding: 16px
+  max-width: 1200px
+  margin: 0 auto
+  @media (min-width: 992px)
+    padding: 48px
+
+// ─── Header ───────────────────────────────────────────────────────────────────
+.holder-dashboard__header
+  background: linear-gradient(135deg, rgba(117, 80, 174, 0.15) 0%, rgba(117, 80, 174, 0.05) 100%)
+  border: 1px solid rgba(117, 80, 174, 0.3)
+  border-radius: 20px
+  padding: 28px 32px
+  display: flex
+  flex-direction: column
+  gap: 16px
+  @media (min-width: 768px)
+    flex-direction: row
+    align-items: center
+    justify-content: space-between
+
+.holder-dashboard__label
+  font-size: 12px
+  text-transform: uppercase
+  letter-spacing: 1.5px
+  color: #7550AE
+  margin-bottom: 6px
+  display: block
+
+.holder-dashboard__addr-row
+  display: flex
+  align-items: center
+  gap: 10px
+
+.holder-dashboard__addr
+  font-size: 16px
+  color: #ffffff
+  font-family: monospace
+  word-break: break-all
+
+.holder-dashboard__balance-block
+  display: flex
+  align-items: baseline
+  gap: 8px
+
+.holder-dashboard__balance-num
+  font-size: 36px
+  color: #7550AE
+  @media (min-width: 768px)
+    font-size: 44px
+
+.holder-dashboard__balance-sym
+  font-size: 18px
+  color: #9A9898
+
+.copy-btn
+  background: rgba(117, 80, 174, 0.2)
+  border: 1px solid rgba(117, 80, 174, 0.4)
+  border-radius: 6px
+  color: #ffffff
+  cursor: pointer
+  font-size: 16px
+  padding: 4px 10px
+  transition: background 0.2s
+  &:hover
+    background: rgba(117, 80, 174, 0.4)
+  &.copied
+    color: #4ADE80
+    border-color: #4ADE80
+
+// ─── Loading / Error ──────────────────────────────────────────────────────────
+.holder-dashboard__loading
+  display: flex
+  align-items: center
+  gap: 12px
+  color: #9A9898
+  padding: 16px
+
+.holder-dashboard__error
+  background: rgba(248, 113, 113, 0.1)
+  border: 1px solid rgba(248, 113, 113, 0.3)
+  border-radius: 12px
+  padding: 16px
+  color: #F87171
+
+.spinner
+  width: 20px
+  height: 20px
+  border: 2px solid rgba(117, 80, 174, 0.3)
+  border-top-color: #7550AE
+  border-radius: 50%
+  animation: spin 0.8s linear infinite
+
+@keyframes spin
+  to
+    transform: rotate(360deg)
+
+// ─── P&L Card ─────────────────────────────────────────────────────────────────
+.pnl-card
+  background: rgba(255,255,255,0.06)
+  border: 1px solid rgba(255,255,255,0.15)
+  border-radius: 16px
+  padding: 1.5rem
+  text-align: center
+
+  &.positive
+    border-color: rgba(16, 185, 129, 0.4)
+    background: rgba(16, 185, 129, 0.08)
+
+  &.negative
+    border-color: rgba(239, 68, 68, 0.4)
+    background: rgba(239, 68, 68, 0.08)
+
+  &__label
+    font-size: 0.85rem
+    color: #9A9898
+    margin-bottom: 0.5rem
+
+  &__value
+    font-size: 1.8rem
+    font-weight: 700
+
+    .positive &
+      color: #10B981
+
+    .negative &
+      color: #EF4444
+
+  &__percent
+    font-size: 1.2rem
+    font-weight: 600
+    margin-top: 0.25rem
+
+    .positive &
+      color: #10B981
+
+    .negative &
+      color: #EF4444
+
+  &__detail
+    font-size: 0.75rem
+    color: #9A9898
+    margin-top: 0.75rem
+
+// ─── Value Cards ──────────────────────────────────────────────────────────────
+.value-cards
+  display: flex
+  flex-direction: column
+  gap: 16px
+  @media (min-width: 768px)
+    flex-direction: row
+
+.value-card
+  flex: 1
+  background: #07111B
+  border: 1px solid rgba(117, 80, 174, 0.2)
+  border-radius: 16px
+  padding: 24px
+  display: flex
+  flex-direction: column
+  gap: 6px
+
+  &__label
+    font-size: 12px
+    text-transform: uppercase
+    letter-spacing: 1px
+    color: #9A9898
+
+  &__value
+    font-size: 28px
+    color: #ffffff
+    line-height: 1.2
+
+  &__unit
+    font-size: 13px
+    color: #7550AE
+    font-weight: 600
+</style>
diff --git a/package-lock.json b/package-lock.json
index 65899d0..e86f862 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "harb-worktree-196",
+  "name": "harb-worktree-150",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -63,6 +63,7 @@
       "name": "vue-kraiken",
       "version": "0.0.0",
       "dependencies": {
+        "@harb/ui-shared": "*",
         "@harb/web3": "*",
         "@tanstack/vue-query": "^5.92.9",
         "@wagmi/vue": "^0.2.8",
@@ -3524,6 +3525,10 @@
         "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/@harb/ui-shared": {
+      "resolved": "packages/ui-shared",
+      "link": true
+    },
     "node_modules/@harb/web3": {
       "resolved": "packages/web3",
       "link": true
@@ -21804,6 +21809,13 @@
         }
       }
     },
+    "packages/ui-shared": {
+      "name": "@harb/ui-shared",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "packages/web3": {
       "name": "@harb/web3",
       "version": "0.1.0",
@@ -21819,6 +21831,7 @@
       "name": "harb-staking",
       "version": "0.0.0",
       "dependencies": {
+        "@harb/ui-shared": "*",
         "@harb/web3": "*",
         "@tanstack/vue-query": "^5.64.2",
         "@vue/test-utils": "^2.4.6",
diff --git a/packages/ui-shared/package.json b/packages/ui-shared/package.json
new file mode 100644
index 0000000..40bf4d5
--- /dev/null
+++ b/packages/ui-shared/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@harb/ui-shared",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  }
+}
diff --git a/packages/ui-shared/src/components/TransactionHistory.vue b/packages/ui-shared/src/components/TransactionHistory.vue
new file mode 100644
index 0000000..7fe87be
--- /dev/null
+++ b/packages/ui-shared/src/components/TransactionHistory.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="tx-history">
+    <h3 class="tx-history__title">
+      Transaction History
+      <span class="tx-history__count" v-if="visibleTransactions.length">{{ visibleTransactions.length }}</span>
+    </h3>
+
+    <div v-if="loading" class="tx-history__loading">
+      <div class="spinner"></div>
+      Loading transactions…
+    </div>
+
+    <div v-else-if="visibleTransactions.length === 0" class="tx-history__empty">No transactions found for this address.</div>
+
+    <div v-else class="tx-history__table-wrapper">
+      <table class="tx-table">
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Type</th>
+            <th class="text-right">Amount (KRK)</th>
+            <th class="text-right">Value (ETH)</th>
+            <th>Tx</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="tx in visibleTransactions" :key="tx.id" :class="txRowClass(tx.type)">
+            <td class="tx-date">{{ formatDate(tx.timestamp) }}</td>
+            <td>
+              <span class="tx-type-badge" :class="txTypeClass(tx.type)">
+                {{ txTypeLabel(tx.type) }}
+              </span>
+            </td>
+            <td class="text-right mono">{{ formatKrk(tx.tokenAmount) }}</td>
+            <td class="text-right mono">{{ tx.ethAmount !== '0' ? formatEth(tx.ethAmount) : '—' }}</td>
+            <td>
+              <a :href="explorerTxUrl(tx.txHash)" target="_blank" rel="noopener noreferrer" class="tx-link" :title="tx.txHash">
+                {{ shortHash(tx.txHash) }} ↗
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+
+interface Transaction {
+  id: string;
+  holder: string;
+  type: string;
+  tokenAmount: string;
+  ethAmount: string;
+  timestamp: string;
+  blockNumber: number;
+  txHash: string;
+}
+
+const props = defineProps<{
+  address: string;
+  graphqlUrl?: string;
+  typeFilter?: string[];
+}>();
+
+const transactions = ref<Transaction[]>([]);
+const loading = ref(true);
+
+const GRAPHQL_URL = props.graphqlUrl || '/api/graphql';
+
+const visibleTransactions = computed(() => {
+  if (!props.typeFilter || props.typeFilter.length === 0) return transactions.value;
+  return transactions.value.filter(tx => props.typeFilter!.includes(tx.type));
+});
+
+async function fetchTransactions(address: string) {
+  if (!address) {
+    loading.value = false;
+    return;
+  }
+  loading.value = true;
+
+  try {
+    const query = `{
+      transactionss(
+        where: { holder: "${address.toLowerCase()}" }
+        orderBy: "timestamp"
+        orderDirection: "desc"
+        limit: 50
+      ) {
+        items {
+          id
+          holder
+          type
+          tokenAmount
+          ethAmount
+          timestamp
+          blockNumber
+          txHash
+        }
+      }
+    }`;
+
+    const res = await fetch(GRAPHQL_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ query }),
+    });
+
+    const data = await res.json();
+    transactions.value = data?.data?.transactionss?.items ?? [];
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to fetch transactions:', e);
+    transactions.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function formatDate(timestamp: string): string {
+  const ts = Number(timestamp) * 1000;
+  if (!ts) return '—';
+  const d = new Date(ts);
+  return (
+    d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: '2-digit' }) +
+    ' ' +
+    d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })
+  );
+}
+
+function formatKrk(raw: string): string {
+  try {
+    const val = Number(BigInt(raw || '0')) / 1e18;
+    return val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 4 });
+  } catch {
+    return '0.00';
+  }
+}
+
+function formatEth(raw: string): string {
+  try {
+    const val = Number(BigInt(raw || '0')) / 1e18;
+    return val.toLocaleString('en-US', { minimumFractionDigits: 4, maximumFractionDigits: 6 });
+  } catch {
+    return '0.0000';
+  }
+}
+
+function shortHash(hash: string): string {
+  if (!hash || hash.length < 12) return hash;
+  return `${hash.slice(0, 6)}…${hash.slice(-4)}`;
+}
+
+function explorerTxUrl(hash: string): string {
+  // Base mainnet explorer; adjust for testnet if needed
+  return `https://basescan.org/tx/${hash}`;
+}
+
+function txTypeLabel(type: string): string {
+  const labels: Record<string, string> = {
+    buy: 'Buy',
+    sell: 'Sell',
+    stake: 'Stake',
+    unstake: 'Unstake',
+    snatch_in: 'Snatched In',
+    snatch_out: 'Snatched Out',
+  };
+  return labels[type] || type;
+}
+
+function txTypeClass(type: string): string {
+  if (['buy', 'unstake', 'snatch_in'].includes(type)) return 'tx-type--positive';
+  if (['sell', 'snatch_out'].includes(type)) return 'tx-type--negative';
+  return 'tx-type--neutral';
+}
+
+function txRowClass(type: string): string {
+  if (['buy', 'unstake'].includes(type)) return 'tx-row--positive';
+  if (['sell', 'snatch_out'].includes(type)) return 'tx-row--negative';
+  return '';
+}
+
+onMounted(() => fetchTransactions(props.address));
+watch(
+  () => props.address,
+  addr => fetchTransactions(addr)
+);
+</script>
+
+<style lang="sass" scoped>
+.tx-history
+  display: flex
+  flex-direction: column
+  gap: 16px
+
+  &__title
+    display: flex
+    align-items: center
+    gap: 10px
+    font-size: 20px
+    color: #ffffff
+    margin: 0
+
+  &__count
+    background: rgba(117, 80, 174, 0.3)
+    color: #7550AE
+    border-radius: 99px
+    padding: 2px 10px
+    font-size: 14px
+    font-weight: 700
+
+  &__loading
+    display: flex
+    align-items: center
+    gap: 12px
+    color: #9A9898
+    padding: 24px
+
+  &__empty
+    color: #9A9898
+    padding: 24px
+    text-align: center
+    background: #07111B
+    border-radius: 12px
+    border: 1px solid rgba(255,255,255,0.07)
+
+  &__table-wrapper
+    overflow-x: auto
+    border-radius: 12px
+    border: 1px solid rgba(255,255,255,0.08)
+
+.tx-table
+  width: 100%
+  border-collapse: collapse
+  font-size: 14px
+
+  th
+    text-align: left
+    padding: 12px 16px
+    color: #9A9898
+    font-size: 11px
+    text-transform: uppercase
+    letter-spacing: 1px
+    border-bottom: 1px solid rgba(255,255,255,0.08)
+    white-space: nowrap
+
+  td
+    padding: 12px 16px
+    border-bottom: 1px solid rgba(255,255,255,0.04)
+    color: #ffffff
+
+  .text-right
+    text-align: right
+
+  .mono
+    font-family: monospace
+
+.tx-date
+  color: #9A9898
+  white-space: nowrap
+  font-size: 13px
+
+.tx-type-badge
+  padding: 3px 10px
+  border-radius: 99px
+  font-size: 12px
+  font-weight: 600
+  text-transform: uppercase
+  letter-spacing: 0.5px
+
+  &.tx-type--positive
+    background: rgba(74, 222, 128, 0.12)
+    color: #4ADE80
+
+  &.tx-type--negative
+    background: rgba(248, 113, 113, 0.12)
+    color: #F87171
+
+  &.tx-type--neutral
+    background: rgba(117, 80, 174, 0.15)
+    color: #7550AE
+
+.tx-row--positive td
+  background: rgba(74, 222, 128, 0.03)
+
+.tx-row--negative td
+  background: rgba(248, 113, 113, 0.03)
+
+.tx-link
+  color: #7550AE
+  text-decoration: none
+  font-family: monospace
+  font-size: 13px
+  white-space: nowrap
+  &:hover
+    text-decoration: underline
+
+.spinner
+  width: 20px
+  height: 20px
+  border: 2px solid rgba(117, 80, 174, 0.3)
+  border-top-color: #7550AE
+  border-radius: 50%
+  animation: spin 0.8s linear infinite
+
+@keyframes spin
+  to
+    transform: rotate(360deg)
+</style>
diff --git a/packages/ui-shared/src/composables/useHolderDashboard.ts b/packages/ui-shared/src/composables/useHolderDashboard.ts
new file mode 100644
index 0000000..3da49bd
--- /dev/null
+++ b/packages/ui-shared/src/composables/useHolderDashboard.ts
@@ -0,0 +1,140 @@
+import { ref, computed, onMounted, onUnmounted, type Ref } from 'vue';
+
+const POLL_INTERVAL_MS = 30_000;
+
+function formatTokenAmount(rawWei: string, decimals = 18): number {
+  try {
+    const big = BigInt(rawWei);
+    const divisor = 10 ** decimals;
+    return Number(big) / divisor;
+  } catch {
+    return 0;
+  }
+}
+
+export function useHolderDashboard(address: Ref<string>, graphqlUrl: string | Ref<string> = '/api/graphql') {
+  const holderBalance = ref<string>('0');
+  const holderTotalEthSpent = ref<string>('0');
+  const holderTotalTokensAcquired = ref<string>('0');
+  const currentPriceWei = ref<string | null>(null);
+  const lastEthReserve = ref<string>('0');
+  const kraikenTotalSupply = ref<string>('0');
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+  let pollTimer: ReturnType<typeof setInterval> | null = null;
+
+  function resolveUrl(): string {
+    return typeof graphqlUrl === 'string' ? graphqlUrl : graphqlUrl.value;
+  }
+
+  async function fetchData() {
+    const addr = address.value?.toLowerCase();
+    if (!addr) return;
+
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const res = await fetch(resolveUrl(), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          query: `query HolderDashboard {
+            holders(address: "${addr}") {
+              balance
+              totalEthSpent
+              totalTokensAcquired
+            }
+            statss(where: { id: "0x01" }) {
+              items {
+                kraikenTotalSupply
+                lastEthReserve
+                currentPriceWei
+              }
+            }
+          }`,
+        }),
+      });
+
+      const json = await res.json();
+
+      if (Array.isArray(json?.errors) && json.errors.length > 0) {
+        const msgs = json.errors.map((e: { message?: string }) => e.message ?? 'GraphQL error').join(', ');
+        throw new Error(msgs);
+      }
+
+      const holder = json?.data?.holders;
+      holderBalance.value = holder?.balance ?? '0';
+      holderTotalEthSpent.value = holder?.totalEthSpent ?? '0';
+      holderTotalTokensAcquired.value = holder?.totalTokensAcquired ?? '0';
+
+      const statsItems = json?.data?.statss?.items;
+      const statsRow = Array.isArray(statsItems) && statsItems.length > 0 ? statsItems[0] : null;
+      currentPriceWei.value = statsRow?.currentPriceWei ?? null;
+      lastEthReserve.value = statsRow?.lastEthReserve ?? '0';
+      kraikenTotalSupply.value = statsRow?.kraikenTotalSupply ?? '0';
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to load holder data';
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  const balanceKrk = computed(() => formatTokenAmount(holderBalance.value));
+
+  const ethBacking = computed(() => {
+    const balance = balanceKrk.value;
+    const reserve = formatTokenAmount(lastEthReserve.value);
+    const totalSupply = formatTokenAmount(kraikenTotalSupply.value);
+    if (totalSupply === 0) return 0;
+    return balance * (reserve / totalSupply);
+  });
+
+  const avgCostBasis = computed(() => {
+    const spent = formatTokenAmount(holderTotalEthSpent.value);
+    const acquired = formatTokenAmount(holderTotalTokensAcquired.value);
+    if (acquired === 0) return 0;
+    return spent / acquired;
+  });
+
+  const currentPriceEth = computed(() => {
+    if (!currentPriceWei.value) return 0;
+    return formatTokenAmount(currentPriceWei.value);
+  });
+
+  const unrealizedPnlEth = computed(() => {
+    const basis = avgCostBasis.value;
+    if (basis === 0) return 0;
+    return (currentPriceEth.value - basis) * balanceKrk.value;
+  });
+
+  const unrealizedPnlPercent = computed(() => {
+    const basis = avgCostBasis.value;
+    if (basis === 0) return 0;
+    return (currentPriceEth.value / basis - 1) * 100;
+  });
+
+  onMounted(async () => {
+    await fetchData();
+    pollTimer = setInterval(() => void fetchData(), POLL_INTERVAL_MS);
+  });
+
+  onUnmounted(() => {
+    if (pollTimer) {
+      clearInterval(pollTimer);
+      pollTimer = null;
+    }
+  });
+
+  return {
+    loading,
+    error,
+    balanceKrk,
+    avgCostBasis,
+    currentPriceEth,
+    unrealizedPnlEth,
+    unrealizedPnlPercent,
+    ethBacking,
+    refresh: fetchData,
+  };
+}
diff --git a/packages/ui-shared/src/index.ts b/packages/ui-shared/src/index.ts
new file mode 100644
index 0000000..efeb6d6
--- /dev/null
+++ b/packages/ui-shared/src/index.ts
@@ -0,0 +1,2 @@
+export { useHolderDashboard } from './composables/useHolderDashboard';
+export { default as TransactionHistory } from './components/TransactionHistory.vue';
diff --git a/web-app/package.json b/web-app/package.json
index 9cc8650..b3adf08 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -33,7 +33,8 @@
     "vue-router": "^4.2.5",
     "vue-tippy": "^6.6.0",
     "vue-toastification": "^2.0.0-rc.5",
-    "@harb/web3": "*"
+    "@harb/web3": "*",
+    "@harb/ui-shared": "*"
   },
   "devDependencies": {
     "@iconify/vue": "^4.3.0",
diff --git a/web-app/src/views/WalletView.vue b/web-app/src/views/WalletView.vue
index 77cad35..e7d8efd 100644
--- a/web-app/src/views/WalletView.vue
+++ b/web-app/src/views/WalletView.vue
@@ -161,7 +161,7 @@
 import { computed, ref } from 'vue';
 import { useRoute, RouterLink } from 'vue-router';
 import { useWalletDashboard } from '@/composables/useWalletDashboard';
-import TransactionHistory from '@/components/TransactionHistory.vue';
+import { TransactionHistory } from '@harb/ui-shared';
 
 const route = useRoute();
 const addressParam = computed(() => String(route.params.address ?? ''));

From 443eda25cf66b4187703862baef29d18f27ecf31 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 24 Feb 2026 13:19:06 +0000
Subject: [PATCH 2/6] ci: overlay @harb/ui-shared in webapp and landing CI
 services (#150)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .woodpecker/e2e.yml | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/.woodpecker/e2e.yml b/.woodpecker/e2e.yml
index dff4408..60a2afb 100644
--- a/.woodpecker/e2e.yml
+++ b/.woodpecker/e2e.yml
@@ -199,6 +199,19 @@ services:
           echo "@harb/web3 linked with wagmi/viem deps"
         fi
 
+        # Overlay @harb/ui-shared shared package from workspace
+        if [ -d "$WS/packages/ui-shared" ]; then
+          mkdir -p /app/packages/ui-shared
+          cp -r "$WS/packages/ui-shared/." /app/packages/ui-shared/
+          # Link @harb/ui-shared into web-app node_modules
+          mkdir -p /app/web-app/node_modules/@harb
+          ln -sf /app/packages/ui-shared /app/web-app/node_modules/@harb/ui-shared
+          # Symlink vue into packages dir so @harb/ui-shared can resolve it
+          mkdir -p /app/packages/ui-shared/node_modules
+          ln -sf /app/web-app/node_modules/vue /app/packages/ui-shared/node_modules/vue
+          echo "@harb/ui-shared linked with vue dep"
+        fi
+
         echo "=== Starting webapp (pre-built image + source overlay) ==="
         cd /app/web-app
         # Explicitly set CI=true to disable Vue DevTools in vite.config.ts
@@ -237,6 +250,19 @@ services:
           echo "@harb/web3 linked for landing"
         fi
 
+        # Overlay @harb/ui-shared shared package from workspace
+        if [ -d "$WS/packages/ui-shared" ]; then
+          mkdir -p /app/packages/ui-shared
+          cp -r "$WS/packages/ui-shared/." /app/packages/ui-shared/
+          # Link @harb/ui-shared into landing node_modules
+          mkdir -p /app/landing/node_modules/@harb
+          ln -sf /app/packages/ui-shared /app/landing/node_modules/@harb/ui-shared
+          # Symlink vue into packages dir so @harb/ui-shared can resolve it
+          mkdir -p /app/packages/ui-shared/node_modules
+          ln -sf /app/landing/node_modules/vue /app/packages/ui-shared/node_modules/vue 2>/dev/null || true
+          echo "@harb/ui-shared linked for landing"
+        fi
+
         echo "=== Starting landing (pre-built image + source overlay) ==="
         cd /app/landing
         exec npm run dev -- --host 0.0.0.0 --port 5174

From b22848269468547ea9839ee764f88d6fa0b6dff4 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 24 Feb 2026 13:42:22 +0000
Subject: [PATCH 3/6] fix: resolve @harb/ui-shared via Vite alias in webapp and
 landing (#150)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 landing/vite.config.ts | 3 ++-
 web-app/vite.config.ts | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/landing/vite.config.ts b/landing/vite.config.ts
index f022561..3b96358 100644
--- a/landing/vite.config.ts
+++ b/landing/vite.config.ts
@@ -13,7 +13,8 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@harb/ui-shared': fileURLToPath(new URL('../packages/ui-shared/src', import.meta.url)),
     },
   },
   server: {
diff --git a/web-app/vite.config.ts b/web-app/vite.config.ts
index 54e429a..6c14c8a 100644
--- a/web-app/vite.config.ts
+++ b/web-app/vite.config.ts
@@ -31,6 +31,7 @@ export default defineConfig(() => {
       alias: {
         '@': path.resolve(process.cwd(), 'src'),
         'kraiken-lib': path.resolve(process.cwd(), '../kraiken-lib/src'),
+        '@harb/ui-shared': path.resolve(process.cwd(), '../packages/ui-shared/src'),
       },
     },
     server: {

From e2ba5c7b62a22c7464626d468079246915052d6a Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 24 Feb 2026 14:03:11 +0000
Subject: [PATCH 4/6] ci: overlay @harb/ui-shared in webapp and landing CI
 services (#150)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .woodpecker/e2e.yml | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/.woodpecker/e2e.yml b/.woodpecker/e2e.yml
index 60a2afb..42e3df0 100644
--- a/.woodpecker/e2e.yml
+++ b/.woodpecker/e2e.yml
@@ -184,6 +184,12 @@ services:
           cp -r "$WS/web-app/src/." /app/web-app/src/
           echo "webapp/src updated from workspace"
         fi
+        for f in vite.config.ts vite.config.js; do
+          if [ -f "$WS/web-app/$f" ]; then
+            cp "$WS/web-app/$f" /app/web-app/"$f"
+            echo "webapp/$f updated from workspace"
+          fi
+        done
 
         # Overlay @harb/web3 shared package from workspace
         if [ -d "$WS/packages/web3" ]; then
@@ -232,6 +238,12 @@ services:
           cp -r "$WS/landing/src/." /app/landing/src/
           echo "landing/src updated from workspace"
         fi
+        for f in vite.config.ts vite.config.js; do
+          if [ -f "$WS/landing/$f" ]; then
+            cp "$WS/landing/$f" /app/landing/"$f"
+            echo "landing/$f updated from workspace"
+          fi
+        done
 
         # Overlay @harb/web3 shared package
         if [ -d "$WS/packages/web3" ]; then

From af10dcf4c68e293956cdc7a79707b8fcab3aff60 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 24 Feb 2026 14:23:57 +0000
Subject: [PATCH 5/6] fix: Post-purchase holder dashboard on landing page
 (#150)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .woodpecker/e2e.yml              | 13 -------------
 web-app/package.json             |  3 +--
 web-app/src/views/WalletView.vue |  2 +-
 web-app/vite.config.ts           |  1 -
 4 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/.woodpecker/e2e.yml b/.woodpecker/e2e.yml
index 42e3df0..4e598ea 100644
--- a/.woodpecker/e2e.yml
+++ b/.woodpecker/e2e.yml
@@ -205,19 +205,6 @@ services:
           echo "@harb/web3 linked with wagmi/viem deps"
         fi
 
-        # Overlay @harb/ui-shared shared package from workspace
-        if [ -d "$WS/packages/ui-shared" ]; then
-          mkdir -p /app/packages/ui-shared
-          cp -r "$WS/packages/ui-shared/." /app/packages/ui-shared/
-          # Link @harb/ui-shared into web-app node_modules
-          mkdir -p /app/web-app/node_modules/@harb
-          ln -sf /app/packages/ui-shared /app/web-app/node_modules/@harb/ui-shared
-          # Symlink vue into packages dir so @harb/ui-shared can resolve it
-          mkdir -p /app/packages/ui-shared/node_modules
-          ln -sf /app/web-app/node_modules/vue /app/packages/ui-shared/node_modules/vue
-          echo "@harb/ui-shared linked with vue dep"
-        fi
-
         echo "=== Starting webapp (pre-built image + source overlay) ==="
         cd /app/web-app
         # Explicitly set CI=true to disable Vue DevTools in vite.config.ts
diff --git a/web-app/package.json b/web-app/package.json
index b3adf08..9cc8650 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -33,8 +33,7 @@
     "vue-router": "^4.2.5",
     "vue-tippy": "^6.6.0",
     "vue-toastification": "^2.0.0-rc.5",
-    "@harb/web3": "*",
-    "@harb/ui-shared": "*"
+    "@harb/web3": "*"
   },
   "devDependencies": {
     "@iconify/vue": "^4.3.0",
diff --git a/web-app/src/views/WalletView.vue b/web-app/src/views/WalletView.vue
index e7d8efd..77cad35 100644
--- a/web-app/src/views/WalletView.vue
+++ b/web-app/src/views/WalletView.vue
@@ -161,7 +161,7 @@
 import { computed, ref } from 'vue';
 import { useRoute, RouterLink } from 'vue-router';
 import { useWalletDashboard } from '@/composables/useWalletDashboard';
-import { TransactionHistory } from '@harb/ui-shared';
+import TransactionHistory from '@/components/TransactionHistory.vue';
 
 const route = useRoute();
 const addressParam = computed(() => String(route.params.address ?? ''));
diff --git a/web-app/vite.config.ts b/web-app/vite.config.ts
index 6c14c8a..54e429a 100644
--- a/web-app/vite.config.ts
+++ b/web-app/vite.config.ts
@@ -31,7 +31,6 @@ export default defineConfig(() => {
       alias: {
         '@': path.resolve(process.cwd(), 'src'),
         'kraiken-lib': path.resolve(process.cwd(), '../kraiken-lib/src'),
-        '@harb/ui-shared': path.resolve(process.cwd(), '../packages/ui-shared/src'),
       },
     },
     server: {

From fad64861524c53b2065d27333cae9720fcf69a47 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 24 Feb 2026 15:02:22 +0000
Subject: [PATCH 6/6] fix: Post-purchase holder dashboard on landing page
 (#150)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 landing/src/views/HolderDashboardView.vue     |  35 ++++-
 .../src/components/TransactionHistory.vue     | 147 +++++++++++++-----
 .../ui-shared/src/composables/useEthPrice.ts  |  65 ++++++++
 .../src/composables/useHolderDashboard.ts     |   4 +-
 packages/ui-shared/src/index.ts               |   1 +
 5 files changed, 203 insertions(+), 49 deletions(-)
 create mode 100644 packages/ui-shared/src/composables/useEthPrice.ts

diff --git a/landing/src/views/HolderDashboardView.vue b/landing/src/views/HolderDashboardView.vue
index 6a48557..d135f81 100644
--- a/landing/src/views/HolderDashboardView.vue
+++ b/landing/src/views/HolderDashboardView.vue
@@ -32,13 +32,16 @@
     >
       <div class="pnl-card__label">Unrealized P&amp;L</div>
       <div class="pnl-card__value">
-        {{ unrealizedPnlEth >= 0 ? '+' : '' }}{{ formatEth(unrealizedPnlEth) }} ETH
+        {{ unrealizedPnlEth >= 0 ? '+' : '−' }}{{ fmtEthUsd(Math.abs(unrealizedPnlEth)) }}
+      </div>
+      <div class="pnl-card__value-secondary" v-if="ethUsdPrice">
+        {{ unrealizedPnlEth >= 0 ? '+' : '−' }}{{ formatEthCompact(Math.abs(unrealizedPnlEth)) }}
       </div>
       <div class="pnl-card__percent">
         {{ unrealizedPnlPercent >= 0 ? '+' : '' }}{{ unrealizedPnlPercent.toFixed(1) }}%
       </div>
       <div class="pnl-card__detail">
-        Avg cost: {{ formatEth(avgCostBasis) }} ETH/KRK · Current: {{ formatEth(currentPriceEth) }} ETH/KRK
+        Avg cost: {{ fmtEthUsd(avgCostBasis) }}/KRK · Current: {{ fmtEthUsd(currentPriceEth) }}/KRK
       </div>
     </div>
 
@@ -51,8 +54,9 @@
       </div>
       <div class="value-card">
         <div class="value-card__label">ETH Backing</div>
-        <div class="value-card__value">{{ formatEth(ethBacking) }}</div>
-        <div class="value-card__unit">ETH</div>
+        <div class="value-card__value">{{ fmtEthUsd(ethBacking) }}</div>
+        <div class="value-card__unit" v-if="ethUsdPrice">{{ formatEthCompact(ethBacking) }}</div>
+        <div class="value-card__unit" v-else>ETH</div>
       </div>
     </div>
 
@@ -68,7 +72,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { useHolderDashboard, TransactionHistory } from '@harb/ui-shared';
+import { useHolderDashboard, useEthPrice, formatUsd, formatEthCompact, TransactionHistory } from '@harb/ui-shared';
 
 const route = useRoute();
 const addressParam = computed(() => String(route.params.address ?? ''));
@@ -78,6 +82,8 @@ const graphqlUrl = `${window.location.origin}/api/graphql`;
 const { loading, error, balanceKrk, avgCostBasis, currentPriceEth, unrealizedPnlEth, unrealizedPnlPercent, ethBacking } =
   useHolderDashboard(addressParam, graphqlUrl);
 
+const { ethUsdPrice } = useEthPrice();
+
 const copied = ref(false);
 
 const truncatedAddress = computed(() => {
@@ -98,9 +104,11 @@ function formatKrk(val: number): string {
   return val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 4 });
 }
 
-function formatEth(val: number): string {
-  if (!Number.isFinite(val)) return '0.0000';
-  return val.toLocaleString('en-US', { minimumFractionDigits: 4, maximumFractionDigits: 6 });
+/** USD primary; ETH fallback when price not yet loaded */
+function fmtEthUsd(val: number): string {
+  if (!Number.isFinite(val)) return '—';
+  if (ethUsdPrice.value !== null) return formatUsd(val * ethUsdPrice.value);
+  return formatEthCompact(val);
 }
 </script>
 
@@ -236,6 +244,17 @@ function formatEth(val: number): string {
     .negative &
       color: #EF4444
 
+  &__value-secondary
+    font-size: 0.85rem
+    margin-top: 0.15rem
+    opacity: 0.6
+
+    .positive &
+      color: #10B981
+
+    .negative &
+      color: #EF4444
+
   &__percent
     font-size: 1.2rem
     font-weight: 600
diff --git a/packages/ui-shared/src/components/TransactionHistory.vue b/packages/ui-shared/src/components/TransactionHistory.vue
index 7fe87be..c7e42b7 100644
--- a/packages/ui-shared/src/components/TransactionHistory.vue
+++ b/packages/ui-shared/src/components/TransactionHistory.vue
@@ -2,7 +2,7 @@
   <div class="tx-history">
     <h3 class="tx-history__title">
       Transaction History
-      <span class="tx-history__count" v-if="visibleTransactions.length">{{ visibleTransactions.length }}</span>
+      <span class="tx-history__count" v-if="transactions.length">{{ transactions.length }}</span>
     </h3>
 
     <div v-if="loading" class="tx-history__loading">
@@ -10,7 +10,9 @@
       Loading transactions…
     </div>
 
-    <div v-else-if="visibleTransactions.length === 0" class="tx-history__empty">No transactions found for this address.</div>
+    <div v-else-if="error" class="tx-history__error">⚠ {{ error }}</div>
+
+    <div v-else-if="transactions.length === 0" class="tx-history__empty">No transactions found for this address.</div>
 
     <div v-else class="tx-history__table-wrapper">
       <table class="tx-table">
@@ -19,12 +21,12 @@
             <th>Date</th>
             <th>Type</th>
             <th class="text-right">Amount (KRK)</th>
-            <th class="text-right">Value (ETH)</th>
+            <th class="text-right">Value</th>
             <th>Tx</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="tx in visibleTransactions" :key="tx.id" :class="txRowClass(tx.type)">
+          <tr v-for="tx in transactions" :key="tx.id" :class="txRowClass(tx.type)">
             <td class="tx-date">{{ formatDate(tx.timestamp) }}</td>
             <td>
               <span class="tx-type-badge" :class="txTypeClass(tx.type)">
@@ -32,7 +34,16 @@
               </span>
             </td>
             <td class="text-right mono">{{ formatKrk(tx.tokenAmount) }}</td>
-            <td class="text-right mono">{{ tx.ethAmount !== '0' ? formatEth(tx.ethAmount) : '—' }}</td>
+            <td class="text-right mono">
+              <template v-if="tx.ethAmount !== '0'">
+                <span :title="formatEthCell(tx.ethAmount)">
+                  {{ ethUsdPrice ? formatCellUsd(tx.ethAmount) : formatEthCell(tx.ethAmount) }}
+                </span>
+                <br v-if="ethUsdPrice" />
+                <span v-if="ethUsdPrice" class="tx-eth-sub">{{ formatEthCell(tx.ethAmount) }}</span>
+              </template>
+              <template v-else>—</template>
+            </td>
             <td>
               <a :href="explorerTxUrl(tx.txHash)" target="_blank" rel="noopener noreferrer" class="tx-link" :title="tx.txHash">
                 {{ shortHash(tx.txHash) }} ↗
@@ -47,6 +58,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
+import { useEthPrice, formatUsd } from '../composables/useEthPrice';
 
 interface Transaction {
   id: string;
@@ -67,13 +79,11 @@ const props = defineProps<{
 
 const transactions = ref<Transaction[]>([]);
 const loading = ref(true);
+const error = ref<string | null>(null);
 
-const GRAPHQL_URL = props.graphqlUrl || '/api/graphql';
+const graphqlUrl = computed(() => props.graphqlUrl || '/api/graphql');
 
-const visibleTransactions = computed(() => {
-  if (!props.typeFilter || props.typeFilter.length === 0) return transactions.value;
-  return transactions.value.filter(tx => props.typeFilter!.includes(tx.type));
-});
+const { ethUsdPrice } = useEthPrice();
 
 async function fetchTransactions(address: string) {
   if (!address) {
@@ -81,45 +91,86 @@ async function fetchTransactions(address: string) {
     return;
   }
   loading.value = true;
+  error.value = null;
 
   try {
-    const query = `{
-      transactionss(
-        where: { holder: "${address.toLowerCase()}" }
-        orderBy: "timestamp"
-        orderDirection: "desc"
-        limit: 50
-      ) {
-        items {
-          id
-          holder
-          type
-          tokenAmount
-          ethAmount
-          timestamp
-          blockNumber
-          txHash
-        }
-      }
-    }`;
+    const hasTypeFilter = props.typeFilter && props.typeFilter.length > 0;
+    const query = hasTypeFilter
+      ? `query TxHistory($holder: String!, $types: [String]) {
+          transactionss(
+            where: { holder: $holder, type_in: $types }
+            orderBy: "timestamp"
+            orderDirection: "desc"
+            limit: 50
+          ) {
+            items {
+              id
+              holder
+              type
+              tokenAmount
+              ethAmount
+              timestamp
+              blockNumber
+              txHash
+            }
+          }
+        }`
+      : `query TxHistory($holder: String!) {
+          transactionss(
+            where: { holder: $holder }
+            orderBy: "timestamp"
+            orderDirection: "desc"
+            limit: 50
+          ) {
+            items {
+              id
+              holder
+              type
+              tokenAmount
+              ethAmount
+              timestamp
+              blockNumber
+              txHash
+            }
+          }
+        }`;
 
-    const res = await fetch(GRAPHQL_URL, {
+    const variables: Record<string, unknown> = { holder: address.toLowerCase() };
+    if (hasTypeFilter) variables.types = props.typeFilter;
+
+    const res = await fetch(graphqlUrl.value, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ query }),
+      body: JSON.stringify({ query, variables }),
     });
 
     const data = await res.json();
+
+    if (Array.isArray(data?.errors) && data.errors.length > 0) {
+      const msgs = data.errors.map((e: { message?: string }) => e.message ?? 'GraphQL error').join(', ');
+      throw new Error(msgs);
+    }
+
     transactions.value = data?.data?.transactionss?.items ?? [];
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error('Failed to fetch transactions:', e);
+    error.value = e instanceof Error ? e.message : 'Failed to load transactions';
     transactions.value = [];
   } finally {
     loading.value = false;
   }
 }
 
+function weiToEth(raw: string): number {
+  try {
+    const big = BigInt(raw || '0');
+    return Number(big * 10000n / (10n ** 18n)) / 10000;
+  } catch {
+    return 0;
+  }
+}
+
 function formatDate(timestamp: string): string {
   const ts = Number(timestamp) * 1000;
   if (!ts) return '—';
@@ -133,20 +184,26 @@ function formatDate(timestamp: string): string {
 
 function formatKrk(raw: string): string {
   try {
-    const val = Number(BigInt(raw || '0')) / 1e18;
+    const big = BigInt(raw || '0');
+    const val = Number(big * 10000n / (10n ** 18n)) / 10000;
     return val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 4 });
   } catch {
     return '0.00';
   }
 }
 
-function formatEth(raw: string): string {
-  try {
-    const val = Number(BigInt(raw || '0')) / 1e18;
-    return val.toLocaleString('en-US', { minimumFractionDigits: 4, maximumFractionDigits: 6 });
-  } catch {
-    return '0.0000';
-  }
+function formatEthCell(raw: string): string {
+  const eth = weiToEth(raw);
+  if (eth === 0) return '0';
+  if (eth >= 1) return `${eth.toFixed(2)} ETH`;
+  if (eth >= 0.01) return `${eth.toFixed(4)} ETH`;
+  if (eth >= 0.0001) return `${eth.toFixed(6)} ETH`;
+  return `${eth.toPrecision(4)} ETH`;
+}
+
+function formatCellUsd(raw: string): string {
+  if (!ethUsdPrice.value) return formatEthCell(raw);
+  return formatUsd(weiToEth(raw) * ethUsdPrice.value);
 }
 
 function shortHash(hash: string): string {
@@ -219,6 +276,13 @@ watch(
     color: #9A9898
     padding: 24px
 
+  &__error
+    background: rgba(248, 113, 113, 0.1)
+    border: 1px solid rgba(248, 113, 113, 0.3)
+    border-radius: 12px
+    padding: 16px
+    color: #F87171
+
   &__empty
     color: #9A9898
     padding: 24px
@@ -298,6 +362,11 @@ watch(
   &:hover
     text-decoration: underline
 
+.tx-eth-sub
+  font-size: 11px
+  color: #9A9898
+  font-family: monospace
+
 .spinner
   width: 20px
   height: 20px
diff --git a/packages/ui-shared/src/composables/useEthPrice.ts b/packages/ui-shared/src/composables/useEthPrice.ts
new file mode 100644
index 0000000..eebadc7
--- /dev/null
+++ b/packages/ui-shared/src/composables/useEthPrice.ts
@@ -0,0 +1,65 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const ETH_PRICE_CACHE_MS = 5 * 60 * 1000; // 5 minutes
+
+// Module-level cache shared across all composable instances on the same page
+let _cachedPrice: number | null = null;
+let _cacheTime = 0;
+
+export function formatUsd(usd: number): string {
+  if (usd >= 1000) return `$${(usd / 1000).toFixed(1)}k`;
+  if (usd >= 1) return `$${usd.toFixed(2)}`;
+  if (usd >= 0.01) return `$${usd.toFixed(3)}`;
+  return `$${usd.toFixed(4)}`;
+}
+
+export function formatEthCompact(eth: number): string {
+  if (eth === 0) return '0 ETH';
+  if (eth >= 1) return `${eth.toFixed(2)} ETH`;
+  if (eth >= 0.01) return `${eth.toFixed(4)} ETH`;
+  if (eth >= 0.0001) return `${eth.toFixed(6)} ETH`;
+  return `${eth.toPrecision(4)} ETH`;
+}
+
+export function useEthPrice() {
+  const ethUsdPrice = ref<number | null>(_cachedPrice);
+
+  async function fetchEthPrice() {
+    const now = Date.now();
+    if (_cachedPrice !== null && now - _cacheTime < ETH_PRICE_CACHE_MS) {
+      ethUsdPrice.value = _cachedPrice;
+      return;
+    }
+    try {
+      const controller = new AbortController();
+      const timeout = setTimeout(() => controller.abort(), 5000);
+      const resp = await fetch(
+        'https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd',
+        { signal: controller.signal },
+      );
+      clearTimeout(timeout);
+      if (!resp.ok) throw new Error('ETH price fetch failed');
+      const data = await resp.json();
+      if (data.ethereum?.usd) {
+        _cachedPrice = data.ethereum.usd;
+        _cacheTime = now;
+        ethUsdPrice.value = _cachedPrice;
+      }
+    } catch {
+      // Keep existing cached price or null; ETH fallback will be used
+    }
+  }
+
+  let interval: ReturnType<typeof setInterval> | null = null;
+
+  onMounted(async () => {
+    await fetchEthPrice();
+    interval = setInterval(() => void fetchEthPrice(), ETH_PRICE_CACHE_MS);
+  });
+
+  onUnmounted(() => {
+    if (interval) clearInterval(interval);
+  });
+
+  return { ethUsdPrice, fetchEthPrice };
+}
diff --git a/packages/ui-shared/src/composables/useHolderDashboard.ts b/packages/ui-shared/src/composables/useHolderDashboard.ts
index 3da49bd..f37031b 100644
--- a/packages/ui-shared/src/composables/useHolderDashboard.ts
+++ b/packages/ui-shared/src/composables/useHolderDashboard.ts
@@ -5,8 +5,8 @@ const POLL_INTERVAL_MS = 30_000;
 function formatTokenAmount(rawWei: string, decimals = 18): number {
   try {
     const big = BigInt(rawWei);
-    const divisor = 10 ** decimals;
-    return Number(big) / divisor;
+    // Use BigInt arithmetic to avoid float64 precision loss at high values
+    return Number(big * 10000n / (10n ** BigInt(decimals))) / 10000;
   } catch {
     return 0;
   }
diff --git a/packages/ui-shared/src/index.ts b/packages/ui-shared/src/index.ts
index efeb6d6..5a32895 100644
--- a/packages/ui-shared/src/index.ts
+++ b/packages/ui-shared/src/index.ts
@@ -1,2 +1,3 @@
 export { useHolderDashboard } from './composables/useHolderDashboard';
+export { useEthPrice, formatUsd, formatEthCompact } from './composables/useEthPrice';
 export { default as TransactionHistory } from './components/TransactionHistory.vue';