aiolabs/bitspire
9
0
Fork 0
Code Issues 52 Pull requests 2 Projects Releases Packages Wiki Activity Actions

feat(machine): show tx details on completion screen (principal, commission, total)

Browse source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan 2026-03-01 13:58:39 -05:00
commit 398c1d76c6
2 changed files with 76 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

46
apps/machine/src/views/CashInView.vue
View file

@ -3,7 +3,6 @@ import { watch, computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAtmStore } from '@/stores/atm'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Input } from '@/components/ui/input'
import QRCode from '@/components/QRCode.vue'
@ -502,12 +501,45 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
>
<div class="text-[8vh]">🎉</div>
<h3 class="text-[3rem] font-bold text-success">Transaction Complete!</h3>
<p v-if="context" class="text-2xl">
You received
<Badge variant="secondary" class="text-2xl"
>{{ formatSats(context.satsAmount) }} sats</Badge
>
</p>
<!-- Transaction details -->
<div
v-if="context"
class="w-full max-w-md rounded-xl bg-background/60 px-8 py-6 space-y-3"
>
<div class="flex justify-between text-2xl">
<span class="text-muted-foreground">Inserted</span>
<span class="font-semibold"
>{{ atmStore.fiatSymbol }}{{ (context.fiatAmount / 100).toFixed(2) }}</span
>
</div>
<div class="flex justify-between text-2xl">
<span class="text-muted-foreground">Rate</span>
<span>{{ formatSats(context.exchangeRate) }} sats/{{ atmStore.fiatSymbol }}</span>
</div>
<div class="flex justify-between text-2xl">
<span class="text-muted-foreground"
>Commission ({{ (context.feePercent * 100).toFixed(2) }}%)</span
>
<span class="text-destructive"
>-{{
formatSats(
Math.floor(
Math.floor((context.fiatAmount / 100) * context.exchangeRate) *
context.feePercent
)
)
}}
sats</span
>
</div>
<div class="border-t border-border my-2"></div>
<div class="flex justify-between text-[1.8rem] font-bold">
<span class="text-success">You received</span>
<span class="text-success">{{ formatSats(context.satsAmount) }} sats</span>
</div>
</div>
<p class="text-2xl text-muted-foreground">Thank you!</p>
</div>

37
apps/machine/src/views/CashOutView.vue
View file

@ -362,6 +362,43 @@ function formatFiat(cents: number): string {
>
<div class="text-[8vh]">🎉</div>
<h3 class="text-[3rem] font-bold text-success">Transaction Complete!</h3>
<!-- Transaction details -->
<div
v-if="context"
class="w-full max-w-md rounded-xl bg-background/60 px-8 py-6 space-y-3"
>
<div class="flex justify-between text-2xl">
<span class="text-muted-foreground">You paid</span>
<span class="font-semibold">{{ formatSats(context.satsAmount) }} sats</span>
</div>
<div class="flex justify-between text-2xl">
<span class="text-muted-foreground">Rate</span>
<span>{{ formatSats(context.exchangeRate) }} sats/{{ atmStore.fiatSymbol }}</span>
</div>
<div class="flex justify-between text-2xl">
<span class="text-muted-foreground"
>Commission ({{ (context.feePercent * 100).toFixed(2) }}%)</span
>
<span class="text-destructive"
>-{{
formatSats(
context.satsAmount -
Math.floor((context.fiatAmount / 100) * context.exchangeRate)
)
}}
sats</span
>
</div>
<div class="border-t border-border my-2"></div>
<div class="flex justify-between text-[1.8rem] font-bold">
<span class="text-success">Cash received</span>
<span class="text-success"
>{{ atmStore.fiatSymbol }}{{ formatFiat(context.fiatAmount) }}</span
>
</div>
</div>
<p class="text-2xl text-muted-foreground">Thank you!</p>
</div>