fix(machine): mobile UI polish and shadcn-vue ScrollArea
- Use h-dvh instead of h-screen for mobile browser viewport - Add ScrollArea component (shadcn-vue) to replace native scrollbars - Move Hide Debug into debug bar row, show Show Debug only when off - Responsive cash-out denomination grid (single col on mobile) - Add safe-area padding for mobile gesture bar - Add business model documentation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan
parent
98e373c5ce
commit
3634509ed4
8 changed files with 750 additions and 525 deletions
|
|
@ -31,9 +31,7 @@ function toggleLiveServices() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex h-screen w-screen flex-col overflow-hidden bg-background font-sans text-foreground"
|
||||
>
|
||||
<div class="flex h-dvh w-screen flex-col overflow-hidden bg-background font-sans text-foreground">
|
||||
<router-view />
|
||||
|
||||
<!-- Connection status + balance (top right) -->
|
||||
|
|
@ -73,7 +71,7 @@ function toggleLiveServices() {
|
|||
<!-- Debug overlay (dev only) -->
|
||||
<div
|
||||
v-if="atmStore.debugMode"
|
||||
class="shrink-0 bg-popover font-mono text-xs text-popover-foreground"
|
||||
class="shrink-0 bg-popover pb-[env(safe-area-inset-bottom)] font-mono text-xs text-popover-foreground"
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-2 px-4 py-2 sm:gap-4">
|
||||
<Button
|
||||
|
|
@ -100,6 +98,14 @@ function toggleLiveServices() {
|
|||
{{ theme.label }}
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="ml-auto h-6 text-xs text-muted-foreground"
|
||||
@click="atmStore.toggleDebug"
|
||||
>
|
||||
Hide Debug
|
||||
</Button>
|
||||
</div>
|
||||
<div v-if="debugExpanded" class="max-h-48 overflow-auto px-4 pb-4">
|
||||
<pre class="text-muted-foreground">{{ JSON.stringify(atmStore.context, null, 2) }}</pre>
|
||||
|
|
|
|||
29
apps/machine/src/components/ui/scroll-area/ScrollArea.vue
Normal file
29
apps/machine/src/components/ui/scroll-area/ScrollArea.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import type { ScrollAreaRootProps } from 'reka-ui'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { reactiveOmit } from '@vueuse/core'
|
||||
import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui'
|
||||
import { cn } from '@/lib/utils'
|
||||
import ScrollBar from './ScrollBar.vue'
|
||||
|
||||
const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, 'class')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ScrollAreaRoot
|
||||
data-slot="scroll-area"
|
||||
v-bind="delegatedProps"
|
||||
:class="cn('relative', props.class)"
|
||||
>
|
||||
<ScrollAreaViewport
|
||||
data-slot="scroll-area-viewport"
|
||||
class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
|
||||
>
|
||||
<slot />
|
||||
</ScrollAreaViewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaCorner />
|
||||
</ScrollAreaRoot>
|
||||
</template>
|
||||
33
apps/machine/src/components/ui/scroll-area/ScrollBar.vue
Normal file
33
apps/machine/src/components/ui/scroll-area/ScrollBar.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<script setup lang="ts">
|
||||
import type { ScrollAreaScrollbarProps } from 'reka-ui'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { reactiveOmit } from '@vueuse/core'
|
||||
import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(),
|
||||
{
|
||||
orientation: 'vertical',
|
||||
}
|
||||
)
|
||||
|
||||
const delegatedProps = reactiveOmit(props, 'class')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ScrollAreaScrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
v-bind="delegatedProps"
|
||||
:class="
|
||||
cn(
|
||||
'flex touch-none p-px transition-colors select-none',
|
||||
orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
|
||||
orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
|
||||
props.class
|
||||
)
|
||||
"
|
||||
>
|
||||
<ScrollAreaThumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
|
||||
</ScrollAreaScrollbar>
|
||||
</template>
|
||||
2
apps/machine/src/components/ui/scroll-area/index.ts
Normal file
2
apps/machine/src/components/ui/scroll-area/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { default as ScrollArea } from './ScrollArea.vue'
|
||||
export { default as ScrollBar } from './ScrollBar.vue'
|
||||
|
|
@ -8,6 +8,7 @@ import { Badge } from '@/components/ui/badge'
|
|||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import QRCode from '@/components/QRCode.vue'
|
||||
import BitcoinIcon from '@/components/BitcoinIcon.vue'
|
||||
|
||||
|
|
@ -196,324 +197,338 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
|
|||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<main
|
||||
class="flex min-h-0 flex-1 items-start justify-center overflow-auto p-4 sm:items-center sm:p-8"
|
||||
>
|
||||
<!-- Fetching Rate -->
|
||||
<Card v-if="nestedState === 'fetchingRate'" class="w-full max-w-80 border-0 bg-white/5">
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Fetching exchange rate...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<ScrollArea class="min-h-0 flex-1">
|
||||
<main class="flex min-h-0 flex-1 items-start justify-center p-4 sm:items-center sm:p-8">
|
||||
<!-- Fetching Rate -->
|
||||
<Card v-if="nestedState === 'fetchingRate'" class="w-full max-w-80 border-0 bg-white/5">
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Fetching exchange rate...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Inserting Bills -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'insertingBills'"
|
||||
class="w-full max-w-96 border-0 bg-white/5"
|
||||
>
|
||||
<CardHeader class="text-center">
|
||||
<CardTitle>Insert Cash</CardTitle>
|
||||
<CardDescription v-if="context">
|
||||
Rate: {{ formatSats(context.exchangeRate) }} sats/$
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
<!-- Bill Status -->
|
||||
<div v-if="context" class="rounded-lg bg-white/5 p-4">
|
||||
<div class="mb-2 flex justify-between">
|
||||
<span class="text-muted-foreground">Inserted:</span>
|
||||
<span class="text-2xl font-bold text-green-400">${{ context.fiatAmount / 100 }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-muted-foreground">You'll receive:</span>
|
||||
<span class="font-semibold text-orange-400"
|
||||
>{{ formatSats(context.satsAmount) }} sats</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Available balance indicator -->
|
||||
<div v-if="context && context.availableBalance > 0" class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">Available:</span>
|
||||
<span :class="balanceLimitReached ? 'text-foreground' : 'text-muted-foreground'">
|
||||
{{ formatSats(context.availableBalance) }} sats
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Bill Acceptor Status -->
|
||||
<p v-if="balanceLimitReached" class="text-center text-sm text-muted-foreground">
|
||||
Maximum amount reached — press Done to continue
|
||||
</p>
|
||||
<p v-else class="text-center text-sm text-muted-foreground">
|
||||
💵 Insert bills into the acceptor
|
||||
</p>
|
||||
|
||||
<!-- Dev: Simulate bill insertion -->
|
||||
<Alert v-if="atmStore.debugMode" class="border-red-500/50 bg-red-500/10">
|
||||
<AlertDescription>
|
||||
<p class="mb-2 text-xs text-red-400">Dev: Simulate bills</p>
|
||||
<div class="flex flex-wrap justify-center gap-2">
|
||||
<Button
|
||||
v-for="denom in [1, 5, 10, 20, 50, 100]"
|
||||
:key="denom"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="h-8"
|
||||
:disabled="!canAcceptBill(denom)"
|
||||
@click="simulateBill(denom)"
|
||||
<!-- Inserting Bills -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'insertingBills'"
|
||||
class="w-full max-w-96 border-0 bg-white/5"
|
||||
>
|
||||
<CardHeader class="text-center">
|
||||
<CardTitle>Insert Cash</CardTitle>
|
||||
<CardDescription v-if="context">
|
||||
Rate: {{ formatSats(context.exchangeRate) }} sats/$
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
<!-- Bill Status -->
|
||||
<div v-if="context" class="rounded-lg bg-white/5 p-4">
|
||||
<div class="mb-2 flex justify-between">
|
||||
<span class="text-muted-foreground">Inserted:</span>
|
||||
<span class="text-2xl font-bold text-green-400"
|
||||
>${{ context.fiatAmount / 100 }}</span
|
||||
>
|
||||
${{ denom }}
|
||||
</Button>
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<Button
|
||||
class="w-full bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
|
||||
size="lg"
|
||||
:disabled="!context || context.billsInserted.length === 0"
|
||||
@click="finishInserting"
|
||||
>
|
||||
Done Inserting
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Generating NDebit -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'generatingNdebit'"
|
||||
class="w-full max-w-80 border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Preparing payment code...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Display QR (unified lightning + clink) -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'displayingQR'"
|
||||
class="w-full max-w-[420px] border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="pt-6 space-y-5">
|
||||
<!-- Amount Display -->
|
||||
<div class="text-center">
|
||||
<p class="text-sm text-muted-foreground">Withdraw</p>
|
||||
<p class="text-3xl font-bold text-orange-400">
|
||||
{{ formatSats(context?.satsAmount || 0) }} sats
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
${{ ((context?.fiatAmount || 0) / 100).toFixed(2) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Scan with selector -->
|
||||
<div class="text-center">
|
||||
<p class="text-xs text-muted-foreground mb-2">Scan with</p>
|
||||
<div class="flex flex-wrap gap-2 justify-center">
|
||||
<Button
|
||||
:variant="qrMode === 'unified' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
class="rounded-full px-4"
|
||||
@click="qrMode = 'unified'"
|
||||
>
|
||||
Universal
|
||||
</Button>
|
||||
<Button
|
||||
:variant="qrMode === 'lnurl' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
class="rounded-full px-4"
|
||||
@click="qrMode = 'lnurl'"
|
||||
>
|
||||
LNURL
|
||||
</Button>
|
||||
<Button
|
||||
:variant="qrMode === 'clink' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
class="rounded-full px-4"
|
||||
@click="qrMode = 'clink'"
|
||||
>
|
||||
CLINK
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QR Code -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="relative">
|
||||
<Skeleton
|
||||
v-if="isGeneratingLnurl && !context?.ndebitUri"
|
||||
class="h-[240px] w-[240px] rounded-xl"
|
||||
/>
|
||||
<div v-else-if="currentQrValue" class="rounded-xl overflow-hidden bg-white p-3">
|
||||
<QRCode :value="currentQrValue" :size="216" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-[240px] w-[240px] items-center justify-center rounded-xl bg-white/10"
|
||||
>
|
||||
<p class="text-sm text-muted-foreground">Generating...</p>
|
||||
</div>
|
||||
<!-- Lightning bolt overlay -->
|
||||
<div
|
||||
v-if="currentQrValue"
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none"
|
||||
>
|
||||
<div
|
||||
class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center shadow-lg"
|
||||
<div class="flex justify-between">
|
||||
<span class="text-muted-foreground">You'll receive:</span>
|
||||
<span class="font-semibold text-orange-400"
|
||||
>{{ formatSats(context.satsAmount) }} sats</span
|
||||
>
|
||||
<span class="text-2xl">⚡</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mode label + truncated URI -->
|
||||
<div class="text-center space-y-1">
|
||||
<p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
{{
|
||||
qrMode === 'unified'
|
||||
? 'Universal'
|
||||
: qrMode === 'lnurl'
|
||||
? 'LNURL-withdraw'
|
||||
: 'CLINK ndebit'
|
||||
}}
|
||||
</p>
|
||||
<div v-if="currentQrValue" class="flex items-center justify-center gap-2">
|
||||
<code class="text-xs text-muted-foreground truncate max-w-[280px]">
|
||||
{{ currentQrValue.split('\n')[0]?.slice(0, 32) }}...
|
||||
</code>
|
||||
<Button variant="ghost" size="sm" class="h-6 w-6 p-0" @click="copyQrValue">
|
||||
<span v-if="copied">✓</span>
|
||||
<span v-else class="text-muted-foreground">📋</span>
|
||||
</Button>
|
||||
<!-- Available balance indicator -->
|
||||
<div
|
||||
v-if="context && context.availableBalance > 0"
|
||||
class="flex justify-between text-sm"
|
||||
>
|
||||
<span class="text-muted-foreground">Available:</span>
|
||||
<span :class="balanceLimitReached ? 'text-foreground' : 'text-muted-foreground'">
|
||||
{{ formatSats(context.availableBalance) }} sats
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alternative: Manual Options (collapsed) -->
|
||||
<details class="rounded-lg bg-white/5 p-3">
|
||||
<summary class="cursor-pointer text-sm text-muted-foreground">
|
||||
Alternative: Manual payment options
|
||||
</summary>
|
||||
<div class="mt-4 space-y-4">
|
||||
<!-- CLINK Debit by pubkey -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs font-medium text-blue-400">Enter your npub/pubkey:</p>
|
||||
<div class="flex gap-2">
|
||||
<Input
|
||||
v-model="pubkeyInput"
|
||||
placeholder="npub1... or hex pubkey"
|
||||
class="flex-1 font-mono text-xs"
|
||||
:disabled="isProcessing"
|
||||
/>
|
||||
<!-- Bill Acceptor Status -->
|
||||
<p v-if="balanceLimitReached" class="text-center text-sm text-muted-foreground">
|
||||
Maximum amount reached — press Done to continue
|
||||
</p>
|
||||
<p v-else class="text-center text-sm text-muted-foreground">
|
||||
💵 Insert bills into the acceptor
|
||||
</p>
|
||||
|
||||
<!-- Dev: Simulate bill insertion -->
|
||||
<Alert v-if="atmStore.debugMode" class="border-red-500/50 bg-red-500/10">
|
||||
<AlertDescription>
|
||||
<p class="mb-2 text-xs text-red-400">Dev: Simulate bills</p>
|
||||
<div class="flex flex-wrap justify-center gap-2">
|
||||
<Button
|
||||
v-for="denom in [1, 5, 10, 20, 50, 100]"
|
||||
:key="denom"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!pubkeyInput.trim() || isProcessing"
|
||||
@click="submitDebitRequest"
|
||||
class="h-8"
|
||||
:disabled="!canAcceptBill(denom)"
|
||||
@click="simulateBill(denom)"
|
||||
>
|
||||
{{ atmStore.isRequestingDebit ? '...' : 'Send' }}
|
||||
${{ denom }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<!-- Invoice paste -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs font-medium text-orange-400">Or paste your invoice:</p>
|
||||
<div class="flex gap-2">
|
||||
<Input
|
||||
v-model="invoiceInput"
|
||||
placeholder="lnbc... or lntb..."
|
||||
class="flex-1 font-mono text-xs"
|
||||
:disabled="isProcessing"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!invoiceInput.trim() || isProcessing"
|
||||
@click="submitInvoice"
|
||||
>
|
||||
{{ atmStore.isPayingInvoice ? '...' : 'Pay' }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
class="w-full bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
|
||||
size="lg"
|
||||
:disabled="!context || context.billsInserted.length === 0"
|
||||
@click="finishInserting"
|
||||
>
|
||||
Done Inserting
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<p v-if="atmStore.paymentError" class="text-xs text-red-400">
|
||||
Error: {{ atmStore.paymentError }}
|
||||
<!-- Generating NDebit -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'generatingNdebit'"
|
||||
class="w-full max-w-80 border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Preparing payment code...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Display QR (unified lightning + clink) -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'displayingQR'"
|
||||
class="w-full max-w-[420px] border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="pt-6 space-y-5">
|
||||
<!-- Amount Display -->
|
||||
<div class="text-center">
|
||||
<p class="text-sm text-muted-foreground">Withdraw</p>
|
||||
<p class="text-3xl font-bold text-orange-400">
|
||||
{{ formatSats(context?.satsAmount || 0) }} sats
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
${{ ((context?.fiatAmount || 0) / 100).toFixed(2) }}
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Debug: Simulate payment button -->
|
||||
<div v-if="atmStore.debugMode" class="pt-2 text-center">
|
||||
<!-- Scan with selector -->
|
||||
<div class="text-center">
|
||||
<p class="text-xs text-muted-foreground mb-2">Scan with</p>
|
||||
<div class="flex flex-wrap gap-2 justify-center">
|
||||
<Button
|
||||
:variant="qrMode === 'unified' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
class="rounded-full px-4"
|
||||
@click="qrMode = 'unified'"
|
||||
>
|
||||
Universal
|
||||
</Button>
|
||||
<Button
|
||||
:variant="qrMode === 'lnurl' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
class="rounded-full px-4"
|
||||
@click="qrMode = 'lnurl'"
|
||||
>
|
||||
LNURL
|
||||
</Button>
|
||||
<Button
|
||||
:variant="qrMode === 'clink' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
class="rounded-full px-4"
|
||||
@click="qrMode = 'clink'"
|
||||
>
|
||||
CLINK
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QR Code -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="relative">
|
||||
<Skeleton
|
||||
v-if="isGeneratingLnurl && !context?.ndebitUri"
|
||||
class="h-[240px] w-[240px] rounded-xl"
|
||||
/>
|
||||
<div v-else-if="currentQrValue" class="rounded-xl overflow-hidden bg-white p-3">
|
||||
<QRCode :value="currentQrValue" :size="216" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-[240px] w-[240px] items-center justify-center rounded-xl bg-white/10"
|
||||
>
|
||||
<p class="text-sm text-muted-foreground">Generating...</p>
|
||||
</div>
|
||||
<!-- Lightning bolt overlay -->
|
||||
<div
|
||||
v-if="currentQrValue"
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none"
|
||||
>
|
||||
<div
|
||||
class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<span class="text-2xl">⚡</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mode label + truncated URI -->
|
||||
<div class="text-center space-y-1">
|
||||
<p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
{{
|
||||
qrMode === 'unified'
|
||||
? 'Universal'
|
||||
: qrMode === 'lnurl'
|
||||
? 'LNURL-withdraw'
|
||||
: 'CLINK ndebit'
|
||||
}}
|
||||
</p>
|
||||
<div v-if="currentQrValue" class="flex items-center justify-center gap-2">
|
||||
<code class="text-xs text-muted-foreground truncate max-w-[280px]">
|
||||
{{ currentQrValue.split('\n')[0]?.slice(0, 32) }}...
|
||||
</code>
|
||||
<Button variant="ghost" size="sm" class="h-6 w-6 p-0" @click="copyQrValue">
|
||||
<span v-if="copied">✓</span>
|
||||
<span v-else class="text-muted-foreground">📋</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alternative: Manual Options (collapsed) -->
|
||||
<details class="rounded-lg bg-white/5 p-3">
|
||||
<summary class="cursor-pointer text-sm text-muted-foreground">
|
||||
Alternative: Manual payment options
|
||||
</summary>
|
||||
<div class="mt-4 space-y-4">
|
||||
<!-- CLINK Debit by pubkey -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs font-medium text-blue-400">Enter your npub/pubkey:</p>
|
||||
<div class="flex gap-2">
|
||||
<Input
|
||||
v-model="pubkeyInput"
|
||||
placeholder="npub1... or hex pubkey"
|
||||
class="flex-1 font-mono text-xs"
|
||||
:disabled="isProcessing"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!pubkeyInput.trim() || isProcessing"
|
||||
@click="submitDebitRequest"
|
||||
>
|
||||
{{ atmStore.isRequestingDebit ? '...' : 'Send' }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Invoice paste -->
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs font-medium text-orange-400">Or paste your invoice:</p>
|
||||
<div class="flex gap-2">
|
||||
<Input
|
||||
v-model="invoiceInput"
|
||||
placeholder="lnbc... or lntb..."
|
||||
class="flex-1 font-mono text-xs"
|
||||
:disabled="isProcessing"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!invoiceInput.trim() || isProcessing"
|
||||
@click="submitInvoice"
|
||||
>
|
||||
{{ atmStore.isPayingInvoice ? '...' : 'Pay' }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="atmStore.paymentError" class="text-xs text-red-400">
|
||||
Error: {{ atmStore.paymentError }}
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Debug: Simulate payment button -->
|
||||
<div v-if="atmStore.debugMode" class="pt-2 text-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="text-xs text-muted-foreground"
|
||||
@click="atmStore.paymentReceived('mock-preimage-' + Date.now())"
|
||||
>
|
||||
Dev: Skip to Success
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Ask for Receipt -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'askForReceipt'"
|
||||
class="w-full max-w-80 border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<div class="text-6xl text-green-400">✅</div>
|
||||
<CardTitle>Payment Sent!</CardTitle>
|
||||
<p class="text-muted-foreground">Would you like a receipt?</p>
|
||||
<div class="flex h-32 w-32 items-center justify-center rounded-lg bg-white">
|
||||
<p class="text-black">📱 Scan npub</p>
|
||||
</div>
|
||||
<Button variant="outline" @click="skipReceipt">No Thanks</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Sending Receipt -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'sendingReceipt'"
|
||||
class="w-full max-w-80 border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Sending receipt...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Complete -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'complete'"
|
||||
class="w-full max-w-80 border-0 bg-green-900/30"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<div class="text-6xl">🎉</div>
|
||||
<CardTitle class="text-green-400">Transaction Complete!</CardTitle>
|
||||
<p v-if="context">
|
||||
You received
|
||||
<Badge variant="secondary">{{ formatSats(context.satsAmount) }} sats</Badge>
|
||||
</p>
|
||||
<p class="text-muted-foreground">Thank you!</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Error -->
|
||||
<Card v-else-if="nestedState === 'error'" class="w-full max-w-80 border-0 bg-red-900/30">
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<div class="text-6xl">⚠️</div>
|
||||
<CardTitle class="text-red-400">Error</CardTitle>
|
||||
<p class="text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="text-xs text-muted-foreground"
|
||||
@click="atmStore.paymentReceived('mock-preimage-' + Date.now())"
|
||||
class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black"
|
||||
@click="cancel"
|
||||
>
|
||||
Dev: Skip to Success
|
||||
Return to Start
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Ask for Receipt -->
|
||||
<Card v-else-if="nestedState === 'askForReceipt'" class="w-full max-w-80 border-0 bg-white/5">
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<div class="text-6xl text-green-400">✅</div>
|
||||
<CardTitle>Payment Sent!</CardTitle>
|
||||
<p class="text-muted-foreground">Would you like a receipt?</p>
|
||||
<div class="flex h-32 w-32 items-center justify-center rounded-lg bg-white">
|
||||
<p class="text-black">📱 Scan npub</p>
|
||||
</div>
|
||||
<Button variant="outline" @click="skipReceipt">No Thanks</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Sending Receipt -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'sendingReceipt'"
|
||||
class="w-full max-w-80 border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Sending receipt...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Complete -->
|
||||
<Card v-else-if="nestedState === 'complete'" class="w-full max-w-80 border-0 bg-green-900/30">
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<div class="text-6xl">🎉</div>
|
||||
<CardTitle class="text-green-400">Transaction Complete!</CardTitle>
|
||||
<p v-if="context">
|
||||
You received
|
||||
<Badge variant="secondary">{{ formatSats(context.satsAmount) }} sats</Badge>
|
||||
</p>
|
||||
<p class="text-muted-foreground">Thank you!</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Error -->
|
||||
<Card v-else-if="nestedState === 'error'" class="w-full max-w-80 border-0 bg-red-900/30">
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<div class="text-6xl">⚠️</div>
|
||||
<CardTitle class="text-red-400">Error</CardTitle>
|
||||
<p class="text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
|
||||
<Button class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black" @click="cancel">
|
||||
Return to Start
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Fallback -->
|
||||
<Card v-else class="w-full max-w-80 border-0 bg-white/5">
|
||||
<CardContent class="p-8 text-center">
|
||||
<p class="text-muted-foreground">State: {{ nestedState }}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
<!-- Fallback -->
|
||||
<Card v-else class="w-full max-w-80 border-0 bg-white/5">
|
||||
<CardContent class="p-8 text-center">
|
||||
<p class="text-muted-foreground">State: {{ nestedState }}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
|
|||
import { Badge } from '@/components/ui/badge'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import QRCode from '@/components/QRCode.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
|
@ -105,247 +106,262 @@ function formatFiat(cents: number): string {
|
|||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<main
|
||||
class="flex min-h-0 flex-1 items-start justify-center overflow-auto p-4 sm:items-center sm:p-8"
|
||||
>
|
||||
<!-- Fetching Rate -->
|
||||
<Card v-if="nestedState === 'fetchingRate'" class="w-full max-w-80 border-0 bg-white/5">
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Fetching exchange rate...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<ScrollArea class="min-h-0 flex-1">
|
||||
<main class="flex min-h-0 flex-1 items-start justify-center p-4 sm:items-center sm:p-8">
|
||||
<!-- Fetching Rate -->
|
||||
<Card v-if="nestedState === 'fetchingRate'" class="w-full max-w-80 border-0 bg-white/5">
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Fetching exchange rate...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Selecting Amount - Main cash-out screen -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'selectingAmount'"
|
||||
class="w-full max-w-[520px] border-0 bg-white/5"
|
||||
>
|
||||
<CardHeader class="text-center">
|
||||
<CardTitle>Select Cash Amount</CardTitle>
|
||||
<CardDescription v-if="context">
|
||||
Rate: <Badge variant="secondary">{{ formatSats(context.exchangeRate) }} sats/$</Badge>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
<!-- Denomination buttons -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div
|
||||
v-for="denom in availableDenominations"
|
||||
:key="denom"
|
||||
class="flex items-center justify-between rounded-lg bg-white/5 p-4"
|
||||
>
|
||||
<span class="text-2xl font-bold text-green-400">${{ denom }}</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!canRemove(denom)"
|
||||
@click="atmStore.removeDenomination(denom)"
|
||||
>
|
||||
-
|
||||
</Button>
|
||||
<span class="w-8 text-center text-lg">{{ selectionCounts[denom] || 0 }}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!canAdd(denom)"
|
||||
@click="atmStore.addDenomination(denom)"
|
||||
>
|
||||
+
|
||||
<!-- Selecting Amount - Main cash-out screen -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'selectingAmount'"
|
||||
class="w-full max-w-[520px] border-0 bg-white/5"
|
||||
>
|
||||
<CardHeader class="text-center">
|
||||
<CardTitle>Select Cash Amount</CardTitle>
|
||||
<CardDescription v-if="context">
|
||||
Rate: <Badge variant="secondary">{{ formatSats(context.exchangeRate) }} sats/$</Badge>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
<!-- Denomination buttons -->
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
|
||||
<div
|
||||
v-for="denom in availableDenominations"
|
||||
:key="denom"
|
||||
class="flex items-center justify-between rounded-lg bg-white/5 px-4 py-3 sm:p-4"
|
||||
>
|
||||
<span class="text-xl font-bold text-green-400 sm:text-2xl">${{ denom }}</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="h-9 w-9"
|
||||
:disabled="!canRemove(denom)"
|
||||
@click="atmStore.removeDenomination(denom)"
|
||||
>
|
||||
-
|
||||
</Button>
|
||||
<span class="w-8 text-center text-lg font-medium">{{
|
||||
selectionCounts[denom] || 0
|
||||
}}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="h-9 w-9"
|
||||
:disabled="!canAdd(denom)"
|
||||
@click="atmStore.addDenomination(denom)"
|
||||
>
|
||||
+
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selected amount summary -->
|
||||
<div class="rounded-lg bg-white/10 p-6 text-center">
|
||||
<p class="text-sm text-muted-foreground">You will receive</p>
|
||||
<p class="text-4xl font-bold text-green-400">
|
||||
${{ context ? formatFiat(context.fiatAmount) : '0.00' }}
|
||||
</p>
|
||||
<p class="mt-2 text-sm text-muted-foreground">
|
||||
You pay:
|
||||
<Badge variant="secondary" class="ml-1">
|
||||
{{ context ? formatSats(context.satsAmount) : 0 }} sats
|
||||
</Badge>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
class="flex-1"
|
||||
:disabled="!context?.cashOutSelection?.length"
|
||||
@click="atmStore.clearSelection()"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
<Button
|
||||
class="flex-1 bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
|
||||
:disabled="!context?.cashOutSelection?.length"
|
||||
@click="atmStore.confirmAmount()"
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Instructions -->
|
||||
<Alert class="border-orange-500/50 bg-orange-500/10">
|
||||
<AlertDescription>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Select the cash amount you want to receive. You'll pay the equivalent in Bitcoin.
|
||||
</p>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Generating Invoice -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'generatingInvoice'"
|
||||
class="w-full max-w-80 border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Creating invoice...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Displaying Invoice - Show QR for payment -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'displayingInvoice'"
|
||||
class="w-full max-w-[480px] border-0 bg-white/5"
|
||||
>
|
||||
<CardHeader class="text-center">
|
||||
<CardTitle>Scan to Pay</CardTitle>
|
||||
<CardDescription v-if="context">
|
||||
Pay <Badge variant="secondary">{{ formatSats(context.satsAmount) }} sats</Badge> to
|
||||
receive <Badge class="bg-green-600">${{ formatFiat(context.fiatAmount) }}</Badge>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
<!-- Invoice QR Code -->
|
||||
<div class="flex flex-col items-center">
|
||||
<QRCode v-if="context?.invoice" :value="context.invoice" :size="220" />
|
||||
<p class="mt-4 text-center text-sm text-muted-foreground">
|
||||
Scan with any Lightning wallet
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Payment status -->
|
||||
<div class="flex flex-col items-center gap-4 py-4">
|
||||
<div class="h-12 w-12 animate-pulse rounded-full bg-orange-500/20">
|
||||
<div class="flex h-full items-center justify-center text-2xl">⏳</div>
|
||||
</div>
|
||||
<p class="text-center text-muted-foreground">Waiting for payment...</p>
|
||||
</div>
|
||||
|
||||
<!-- Invoice info with copy button -->
|
||||
<div v-if="context?.invoice" class="rounded-lg bg-white/5 p-3">
|
||||
<p class="mb-2 truncate text-center font-mono text-xs text-muted-foreground">
|
||||
{{ context.invoice.slice(0, 50) }}...
|
||||
</p>
|
||||
<div class="flex justify-center">
|
||||
<Button variant="outline" size="sm" @click="copyInvoice">
|
||||
{{ copyButtonText }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selected amount summary -->
|
||||
<div class="rounded-lg bg-white/10 p-6 text-center">
|
||||
<p class="text-sm text-muted-foreground">You will receive</p>
|
||||
<p class="text-4xl font-bold text-green-400">
|
||||
${{ context ? formatFiat(context.fiatAmount) : '0.00' }}
|
||||
</p>
|
||||
<p class="mt-2 text-sm text-muted-foreground">
|
||||
You pay:
|
||||
<Badge variant="secondary" class="ml-1">
|
||||
{{ context ? formatSats(context.satsAmount) : 0 }} sats
|
||||
</Badge>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Dev controls -->
|
||||
<Alert v-if="atmStore.debugMode" class="border-red-500/50 bg-red-500/10">
|
||||
<AlertDescription class="text-center">
|
||||
<p class="mb-2 text-xs text-red-400">Dev: Use alice-pay or button below</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="atmStore.paymentReceived('mock-preimage-' + Date.now())"
|
||||
>
|
||||
Simulate Payment
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex gap-4">
|
||||
<!-- Dispensing Cash -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'dispensingCash'"
|
||||
class="w-full max-w-80 border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Dispensing cash...</p>
|
||||
<p class="text-sm text-muted-foreground">Please wait</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Cash Ready -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'waitingForCashTaken'"
|
||||
class="w-full max-w-80 border-0 bg-green-900/30"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<div class="text-6xl text-green-400">✅</div>
|
||||
<CardTitle class="text-green-400">Cash Ready!</CardTitle>
|
||||
<p v-if="context">
|
||||
Please take your
|
||||
<Badge class="bg-green-600 text-lg">${{ formatFiat(context.fiatAmount) }}</Badge>
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
class="flex-1"
|
||||
:disabled="!context?.cashOutSelection?.length"
|
||||
@click="atmStore.clearSelection()"
|
||||
class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
|
||||
size="lg"
|
||||
@click="confirmCashTaken"
|
||||
>
|
||||
Clear
|
||||
I've Taken the Cash
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Ask for Receipt -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'askForReceipt'"
|
||||
class="w-full max-w-80 border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<CardTitle>Would you like a receipt?</CardTitle>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Scan your npub to receive a Nostr DM receipt
|
||||
</p>
|
||||
<div class="flex h-32 w-32 items-center justify-center rounded-lg bg-white">
|
||||
<p class="text-black">📱 Scan npub</p>
|
||||
</div>
|
||||
<Button variant="outline" @click="skipReceipt">No Thanks</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Complete -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'complete'"
|
||||
class="w-full max-w-80 border-0 bg-green-900/30"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<div class="text-6xl">🎉</div>
|
||||
<CardTitle class="text-green-400">Transaction Complete!</CardTitle>
|
||||
<p class="text-muted-foreground">Thank you!</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Error -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'error' || nestedState === 'dispenseError'"
|
||||
class="w-full max-w-80 border-0 bg-red-900/30"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<div class="text-6xl">⚠️</div>
|
||||
<CardTitle class="text-red-400">Error</CardTitle>
|
||||
<p class="text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
|
||||
<Button
|
||||
class="flex-1 bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
|
||||
:disabled="!context?.cashOutSelection?.length"
|
||||
@click="atmStore.confirmAmount()"
|
||||
class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black"
|
||||
@click="cancel"
|
||||
>
|
||||
Continue
|
||||
Return to Start
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Instructions -->
|
||||
<Alert class="border-orange-500/50 bg-orange-500/10">
|
||||
<AlertDescription>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Select the cash amount you want to receive. You'll pay the equivalent in Bitcoin.
|
||||
</p>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Generating Invoice -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'generatingInvoice'"
|
||||
class="w-full max-w-80 border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Creating invoice...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Displaying Invoice - Show QR for payment -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'displayingInvoice'"
|
||||
class="w-full max-w-[480px] border-0 bg-white/5"
|
||||
>
|
||||
<CardHeader class="text-center">
|
||||
<CardTitle>Scan to Pay</CardTitle>
|
||||
<CardDescription v-if="context">
|
||||
Pay <Badge variant="secondary">{{ formatSats(context.satsAmount) }} sats</Badge> to
|
||||
receive <Badge class="bg-green-600">${{ formatFiat(context.fiatAmount) }}</Badge>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
<!-- Invoice QR Code -->
|
||||
<div class="flex flex-col items-center">
|
||||
<QRCode v-if="context?.invoice" :value="context.invoice" :size="220" />
|
||||
<p class="mt-4 text-center text-sm text-muted-foreground">
|
||||
Scan with any Lightning wallet
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Payment status -->
|
||||
<div class="flex flex-col items-center gap-4 py-4">
|
||||
<div class="h-12 w-12 animate-pulse rounded-full bg-orange-500/20">
|
||||
<div class="flex h-full items-center justify-center text-2xl">⏳</div>
|
||||
</div>
|
||||
<p class="text-center text-muted-foreground">Waiting for payment...</p>
|
||||
</div>
|
||||
|
||||
<!-- Invoice info with copy button -->
|
||||
<div v-if="context?.invoice" class="rounded-lg bg-white/5 p-3">
|
||||
<p class="mb-2 truncate text-center font-mono text-xs text-muted-foreground">
|
||||
{{ context.invoice.slice(0, 50) }}...
|
||||
</p>
|
||||
<div class="flex justify-center">
|
||||
<Button variant="outline" size="sm" @click="copyInvoice">
|
||||
{{ copyButtonText }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dev controls -->
|
||||
<Alert v-if="atmStore.debugMode" class="border-red-500/50 bg-red-500/10">
|
||||
<AlertDescription class="text-center">
|
||||
<p class="mb-2 text-xs text-red-400">Dev: Use alice-pay or button below</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="atmStore.paymentReceived('mock-preimage-' + Date.now())"
|
||||
>
|
||||
Simulate Payment
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Dispensing Cash -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'dispensingCash'"
|
||||
class="w-full max-w-80 border-0 bg-white/5"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<Skeleton class="h-10 w-10 rounded-full" />
|
||||
<p class="text-muted-foreground">Dispensing cash...</p>
|
||||
<p class="text-sm text-muted-foreground">Please wait</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Cash Ready -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'waitingForCashTaken'"
|
||||
class="w-full max-w-80 border-0 bg-green-900/30"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<div class="text-6xl text-green-400">✅</div>
|
||||
<CardTitle class="text-green-400">Cash Ready!</CardTitle>
|
||||
<p v-if="context">
|
||||
Please take your
|
||||
<Badge class="bg-green-600 text-lg">${{ formatFiat(context.fiatAmount) }}</Badge>
|
||||
</p>
|
||||
<Button
|
||||
class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
|
||||
size="lg"
|
||||
@click="confirmCashTaken"
|
||||
>
|
||||
I've Taken the Cash
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Ask for Receipt -->
|
||||
<Card v-else-if="nestedState === 'askForReceipt'" class="w-full max-w-80 border-0 bg-white/5">
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8">
|
||||
<CardTitle>Would you like a receipt?</CardTitle>
|
||||
<p class="text-sm text-muted-foreground">Scan your npub to receive a Nostr DM receipt</p>
|
||||
<div class="flex h-32 w-32 items-center justify-center rounded-lg bg-white">
|
||||
<p class="text-black">📱 Scan npub</p>
|
||||
</div>
|
||||
<Button variant="outline" @click="skipReceipt">No Thanks</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Complete -->
|
||||
<Card v-else-if="nestedState === 'complete'" class="w-full max-w-80 border-0 bg-green-900/30">
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<div class="text-6xl">🎉</div>
|
||||
<CardTitle class="text-green-400">Transaction Complete!</CardTitle>
|
||||
<p class="text-muted-foreground">Thank you!</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Error -->
|
||||
<Card
|
||||
v-else-if="nestedState === 'error' || nestedState === 'dispenseError'"
|
||||
class="w-full max-w-80 border-0 bg-red-900/30"
|
||||
>
|
||||
<CardContent class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<div class="text-6xl">⚠️</div>
|
||||
<CardTitle class="text-red-400">Error</CardTitle>
|
||||
<p class="text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
|
||||
<Button class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black" @click="cancel">
|
||||
Return to Start
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Fallback -->
|
||||
<Card v-else class="w-full max-w-80 border-0 bg-white/5">
|
||||
<CardContent class="p-8 text-center">
|
||||
<p class="text-muted-foreground">State: {{ nestedState }}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
<!-- Fallback -->
|
||||
<Card v-else class="w-full max-w-80 border-0 bg-white/5">
|
||||
<CardContent class="p-8 text-center">
|
||||
<p class="text-muted-foreground">State: {{ nestedState }}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,9 @@ function handleCashOut() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-1 flex-col items-center justify-center gap-4 p-4 sm:gap-6 md:gap-8 md:p-8">
|
||||
<div
|
||||
class="flex min-h-0 flex-1 flex-col items-center justify-center gap-4 overflow-auto p-4 sm:gap-6 md:gap-8 md:p-8"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<div class="flex flex-col items-center gap-1 sm:gap-2">
|
||||
<img
|
||||
|
|
@ -187,14 +189,15 @@ function handleCashOut() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Debug toggle -->
|
||||
<!-- Debug toggle (only visible when debug bar is hidden) -->
|
||||
<Button
|
||||
v-if="!atmStore.debugMode"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="absolute bottom-4 right-4 text-xs text-muted-foreground"
|
||||
@click="atmStore.toggleDebug"
|
||||
>
|
||||
{{ atmStore.debugMode ? 'Hide Debug' : 'Show Debug' }}
|
||||
Show Debug
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue