61 lines
1.7 KiB
Plaintext
61 lines
1.7 KiB
Plaintext
|
---
|
||
|
|
import { Icon } from 'astro-icon/components'
|
||
|
|
import 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: 128,
|
||
|
|
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="px-7 font-mono text-base leading-snug tracking-wide break-all text-white">
|
||
|
|
<span
|
||
|
|
class="cursor-pointer select-all"
|
||
|
|
set:html={address.length > 12
|
||
|
|
? `<span class="font-bold mr-0.5 text-green-500">${address.substring(0, 6)}</span>${address.substring(6, address.length - 6)}<span class="font-bold ml-0.5 text-green-500">${address.substring(address.length - 6)}</span>`
|
||
|
|
: `<span class="font-bold">${address}</span>`}
|
||
|
|
/>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<img
|
||
|
|
src={qrCodeDataURL}
|
||
|
|
alt={`${cryptoName} QR code`}
|
||
|
|
width="128"
|
||
|
|
height="128"
|
||
|
|
class="mr-4 hidden size-36 rounded sm:block"
|
||
|
|
/>
|
||
|
|
</div>
|