feat(app): add Cashu ecash token parsing and inline chat display
Create cashu.ts with token parser (cashuA... base64url decode), amount extraction, and mint URL formatting. Add CashuToken.vue inline component with copy-to-clipboard and open-in-wallet deep-link. Integrate detection in ChatMessage.vue with automatic token stripping from display text. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
0f1f576ef5
commit
71125bfde9
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="parsed"
|
||||
class="rounded-xl p-3 space-y-2 my-2"
|
||||
:class="isDark
|
||||
? 'bg-white/[0.03] border border-[#F7931A]/20'
|
||||
: 'bg-black/[0.02] border border-[#F7931A]/20'"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-[#F7931A]/10 flex items-center justify-center">
|
||||
<svg class="w-3.5 h-3.5 text-[#F7931A]" viewBox="0 0 24 24" fill="currentColor">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<text x="12" y="16" text-anchor="middle" fill="white" font-size="12" font-weight="bold">C</text>
|
||||
</svg>
|
||||
</div>
|
||||
<span
|
||||
class="text-xs font-semibold"
|
||||
:class="isDark ? 'text-white/80' : 'text-gray-800'"
|
||||
>
|
||||
Cashu Token
|
||||
</span>
|
||||
<span class="ml-auto text-sm font-bold text-[#F7931A]">
|
||||
{{ formattedAmount }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Mint info -->
|
||||
<div
|
||||
class="text-[10px] font-mono"
|
||||
:class="isDark ? 'text-white/30' : 'text-gray-400'"
|
||||
>
|
||||
Mint: {{ displayMint }}
|
||||
</div>
|
||||
|
||||
<!-- Memo -->
|
||||
<div
|
||||
v-if="parsed.memo"
|
||||
class="text-xs"
|
||||
:class="isDark ? 'text-white/50' : 'text-gray-500'"
|
||||
>
|
||||
{{ parsed.memo }}
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="flex-1 px-3 py-1.5 rounded-lg text-[10px] font-medium transition-colors"
|
||||
:class="isDark
|
||||
? 'bg-white/5 text-white/60 hover:bg-white/10'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
|
||||
@click="copyToken"
|
||||
>
|
||||
{{ copied ? 'Copied!' : 'Copy Token' }}
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 px-3 py-1.5 rounded-lg text-[10px] font-medium transition-colors bg-[#F7931A]/10 text-[#F7931A] hover:bg-[#F7931A]/20"
|
||||
@click="openInWallet"
|
||||
>
|
||||
Open in Wallet
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fallback for unparseable tokens -->
|
||||
<div
|
||||
v-else
|
||||
class="rounded-lg p-2 my-1 text-xs font-mono break-all"
|
||||
:class="isDark ? 'bg-white/5 text-white/40' : 'bg-gray-50 text-gray-500'"
|
||||
>
|
||||
{{ truncatedRaw }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useTheme } from '@/composables/useTheme'
|
||||
import { parseCashuToken, formatMintUrl, formatCashuAmount } from '@/utils/cashu'
|
||||
|
||||
const { isDark } = useTheme()
|
||||
|
||||
const props = defineProps<{
|
||||
token: string
|
||||
}>()
|
||||
|
||||
const copied = ref(false)
|
||||
|
||||
const parsed = computed(() => parseCashuToken(props.token))
|
||||
|
||||
const formattedAmount = computed(() => {
|
||||
if (!parsed.value) return ''
|
||||
return formatCashuAmount(parsed.value.amount, parsed.value.unit)
|
||||
})
|
||||
|
||||
const displayMint = computed(() => {
|
||||
if (!parsed.value) return ''
|
||||
return formatMintUrl(parsed.value.mint)
|
||||
})
|
||||
|
||||
const truncatedRaw = computed(() => {
|
||||
const t = props.token
|
||||
if (t.length <= 40) return t
|
||||
return t.slice(0, 20) + '...' + t.slice(-16)
|
||||
})
|
||||
|
||||
async function copyToken() {
|
||||
await navigator.clipboard.writeText(props.token)
|
||||
copied.value = true
|
||||
setTimeout(() => { copied.value = false }, 2000)
|
||||
}
|
||||
|
||||
function openInWallet() {
|
||||
// Use web+cashu: URI scheme for wallet deep-linking
|
||||
window.open(`web+cashu:${props.token}`, '_blank')
|
||||
}
|
||||
</script>
|
||||
@@ -83,6 +83,14 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="cashuTokens.length > 0" class="mt-3 space-y-1.5" @click.stop>
|
||||
<CashuToken
|
||||
v-for="token in cashuTokens"
|
||||
:key="token"
|
||||
:token="token"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="inlineNewsLinks.length > 0" class="mt-3 space-y-1" @click.stop>
|
||||
<NewsCard
|
||||
v-for="(link, i) in inlineNewsLinks"
|
||||
@@ -195,6 +203,8 @@ import PodcastCard from '@/components/content/PodcastCard.vue'
|
||||
import PlaceCard from '@/components/content/PlaceCard.vue'
|
||||
import NewsCard from '@/components/content/NewsCard.vue'
|
||||
import NostrEmbed from '@/components/chat/NostrEmbed.vue'
|
||||
import CashuToken from '@/components/chat/CashuToken.vue'
|
||||
import { extractCashuTokens } from '@/utils/cashu'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -240,6 +250,11 @@ const nostrUris = computed(() => {
|
||||
return matches ? [...new Set(matches)] : []
|
||||
})
|
||||
|
||||
const cashuTokens = computed(() => {
|
||||
if (isUser.value) return []
|
||||
return extractCashuTokens(props.message.content)
|
||||
})
|
||||
|
||||
const isCodeResponse = computed(() =>
|
||||
!isUser.value && props.triggeringQuery.trim().toLowerCase() === '/code'
|
||||
)
|
||||
@@ -278,6 +293,12 @@ const displayText = computed(() => {
|
||||
let text = stripContentTags(props.message.content)
|
||||
if (inlineNewsLinks.value.length > 0 || inlineWebsitesLinks.value.length > 0) text = stripMarkdownLinks(text)
|
||||
if (nostrUris.value.length > 0) text = text.replace(NOSTR_URI_RE, '').replace(/\n{3,}/g, '\n\n').trim()
|
||||
if (cashuTokens.value.length > 0) {
|
||||
for (const token of cashuTokens.value) {
|
||||
text = text.replace(token, '')
|
||||
}
|
||||
text = text.replace(/\n{3,}/g, '\n\n').trim()
|
||||
}
|
||||
return text
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* Cashu ecash token parsing and display utilities.
|
||||
* AIUI is never a wallet — only parses, displays, and deep-links to external wallets.
|
||||
*/
|
||||
|
||||
interface CashuProof {
|
||||
amount: number
|
||||
id: string
|
||||
secret: string
|
||||
C: string
|
||||
}
|
||||
|
||||
interface CashuTokenEntry {
|
||||
mint: string
|
||||
proofs: CashuProof[]
|
||||
}
|
||||
|
||||
interface CashuTokenData {
|
||||
token: CashuTokenEntry[]
|
||||
unit?: string
|
||||
memo?: string
|
||||
}
|
||||
|
||||
export interface ParsedCashuToken {
|
||||
mint: string
|
||||
amount: number
|
||||
unit: string
|
||||
memo?: string
|
||||
raw: string
|
||||
}
|
||||
|
||||
/** Check if a string looks like a Cashu token */
|
||||
export function isCashuToken(text: string): boolean {
|
||||
return text.trim().startsWith('cashuA')
|
||||
}
|
||||
|
||||
/** Extract Cashu tokens from a text string */
|
||||
export function extractCashuTokens(text: string): string[] {
|
||||
const regex = /cashuA[A-Za-z0-9_-]+/g
|
||||
return [...text.matchAll(regex)].map(m => m[0])
|
||||
}
|
||||
|
||||
/** Parse a Cashu token string (cashuA...) into structured data */
|
||||
export function parseCashuToken(token: string): ParsedCashuToken | null {
|
||||
if (!isCashuToken(token)) return null
|
||||
|
||||
try {
|
||||
// Remove 'cashuA' prefix and decode base64url
|
||||
const encoded = token.slice(6)
|
||||
const padded = encoded.replace(/-/g, '+').replace(/_/g, '/')
|
||||
const json = atob(padded)
|
||||
const data = JSON.parse(json) as CashuTokenData
|
||||
|
||||
if (!data.token || !Array.isArray(data.token) || data.token.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const entry = data.token[0]
|
||||
const totalAmount = entry.proofs.reduce((sum, p) => sum + p.amount, 0)
|
||||
|
||||
return {
|
||||
mint: entry.mint,
|
||||
amount: totalAmount,
|
||||
unit: data.unit ?? 'sat',
|
||||
memo: data.memo,
|
||||
raw: token,
|
||||
}
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/** Format a mint URL for display (truncate) */
|
||||
export function formatMintUrl(url: string): string {
|
||||
try {
|
||||
const parsed = new URL(url)
|
||||
const host = parsed.hostname
|
||||
if (host.length > 30) {
|
||||
return host.slice(0, 15) + '...' + host.slice(-12)
|
||||
}
|
||||
return host
|
||||
} catch {
|
||||
if (url.length > 30) {
|
||||
return url.slice(0, 15) + '...' + url.slice(-12)
|
||||
}
|
||||
return url
|
||||
}
|
||||
}
|
||||
|
||||
/** Format amount with unit */
|
||||
export function formatCashuAmount(amount: number, unit: string): string {
|
||||
if (unit === 'sat' || unit === 'sats') {
|
||||
if (amount >= 1_000_000) return `${(amount / 1_000_000).toFixed(2)}M sats`
|
||||
if (amount >= 1_000) return `${(amount / 1_000).toFixed(amount >= 10_000 ? 0 : 1)}k sats`
|
||||
return `${amount} sats`
|
||||
}
|
||||
return `${amount} ${unit}`
|
||||
}
|
||||
Reference in New Issue
Block a user