66 lines
1.7 KiB
Plaintext
66 lines
1.7 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
import * as QRCode from 'qrcode'
|
|
|
|
import { cn } from '../lib/cn'
|
|
|
|
type Props = {
|
|
cryptoName: string
|
|
cryptoIcon: string
|
|
address: string
|
|
className?: string
|
|
}
|
|
|
|
const { cryptoName, cryptoIcon, address, className } = Astro.props
|
|
|
|
function getAddressURI(address: string, cryptoName: string) {
|
|
if (cryptoName.toLowerCase() === 'monero') {
|
|
return `monero:${address}?tx_description=KYCnot.me%20Donation`
|
|
}
|
|
|
|
if (cryptoName.toLowerCase() === 'bitcoin') {
|
|
return `bitcoin:${address}?label=KYCnot.me%20Donation`
|
|
}
|
|
|
|
return address
|
|
}
|
|
|
|
const qrCodeDataURL = await QRCode.toDataURL(getAddressURI(address, cryptoName), {
|
|
width: 256,
|
|
margin: 1,
|
|
color: {
|
|
dark: '#ffffff',
|
|
light: '#171721',
|
|
},
|
|
})
|
|
---
|
|
|
|
<div class={cn('bg-night-800 border-night-600 flex items-center gap-2 rounded-lg border px-3', className)}>
|
|
<div class="flex flex-1 flex-col gap-1 py-3">
|
|
<div class="flex items-center gap-2 px-4 pt-3">
|
|
<Icon name={cryptoIcon} class="size-6 text-white" />
|
|
<span class="font-title text-base font-semibold text-white">{cryptoName}</span>
|
|
</div>
|
|
<p
|
|
class="cursor-pointer px-7 font-mono text-base leading-snug tracking-wide break-all text-white select-all"
|
|
>
|
|
{
|
|
address.length > 12
|
|
? [
|
|
<span class="mr-0.5 font-bold text-green-500">{address.substring(0, 6)}</span>,
|
|
address.substring(6, address.length - 6),
|
|
<span class="ml-0.5 font-bold text-green-500">{address.substring(address.length - 6)}</span>,
|
|
]
|
|
: address
|
|
}
|
|
</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeDataURL}
|
|
alt={`${cryptoName} QR code`}
|
|
width="128"
|
|
height="128"
|
|
class="mr-4 hidden size-32 rounded sm:block"
|
|
/>
|
|
</div>
|