johba/harb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Post-purchase holder dashboard on landing page (#150)

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
openhands 2026-02-24 15:02:22 +00:00
parent af10dcf4c6
commit fad6486152
5 changed files with 203 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

35
landing/src/views/HolderDashboardView.vue
View file

@ -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