You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
3.2 KiB
95 lines
3.2 KiB
import { Button } from '@/components/ui/button' |
|
import { getBitcoinConnectWalletDetails } from '@/lib/wallet-connection-details' |
|
import { useZap } from '@/providers/ZapProvider' |
|
import { Copy } from 'lucide-react' |
|
import { useTranslation } from 'react-i18next' |
|
import { toast } from 'sonner' |
|
|
|
export default function WalletConnectionDetails() { |
|
const { t } = useTranslation() |
|
const { isWalletConnected, walletLightningAddress } = useZap() |
|
if (!isWalletConnected) return null |
|
|
|
const details = getBitcoinConnectWalletDetails() |
|
|
|
if (!details) return null |
|
|
|
const connectedWalletAddress = |
|
walletLightningAddress ?? details.nwcLud16FromUrl ?? null |
|
|
|
const copyRelay = () => { |
|
if (!details.nwcRelayUrl) return |
|
navigator.clipboard.writeText(details.nwcRelayUrl) |
|
toast.success(t('Copied to clipboard')) |
|
} |
|
|
|
const copyAddress = () => { |
|
if (!connectedWalletAddress) return |
|
navigator.clipboard.writeText(connectedWalletAddress) |
|
toast.success(t('Copied to clipboard')) |
|
} |
|
|
|
return ( |
|
<div className="mb-3 space-y-2 rounded-lg border border-border/80 bg-muted/25 px-3 py-2.5 text-sm"> |
|
<div> |
|
<p className="text-xs font-medium uppercase tracking-wider text-muted-foreground"> |
|
{t('Wallet connector')} |
|
</p> |
|
<p className="mt-0.5 leading-snug"> |
|
{details.connectorName} |
|
<span className="text-muted-foreground"> ({details.connectorType})</span> |
|
</p> |
|
</div> |
|
<div> |
|
<p className="text-xs font-medium uppercase tracking-wider text-muted-foreground"> |
|
{t('Connected wallet address')} |
|
</p> |
|
{connectedWalletAddress ? ( |
|
<div className="mt-1 flex min-w-0 items-start gap-2"> |
|
<p className="min-w-0 flex-1 break-all font-mono text-xs leading-relaxed text-foreground/90"> |
|
{connectedWalletAddress} |
|
</p> |
|
<Button |
|
type="button" |
|
variant="ghost" |
|
size="icon" |
|
className="size-8 shrink-0" |
|
onClick={copyAddress} |
|
aria-label={t('Copy to clipboard')} |
|
> |
|
<Copy className="size-4" /> |
|
</Button> |
|
</div> |
|
) : ( |
|
<p className="mt-0.5 text-muted-foreground"> |
|
{t('This wallet did not report a Lightning address.')} |
|
</p> |
|
)} |
|
</div> |
|
<div> |
|
<p className="text-xs font-medium uppercase tracking-wider text-muted-foreground"> |
|
{t('NWC relay')} |
|
</p> |
|
{details.nwcRelayUrl ? ( |
|
<div className="mt-1 flex min-w-0 items-start gap-2"> |
|
<p className="min-w-0 flex-1 break-all font-mono text-xs leading-relaxed text-foreground/90"> |
|
{details.nwcRelayUrl} |
|
</p> |
|
<Button |
|
type="button" |
|
variant="ghost" |
|
size="icon" |
|
className="size-8 shrink-0" |
|
onClick={copyRelay} |
|
aria-label={t('Copy to clipboard')} |
|
> |
|
<Copy className="size-4" /> |
|
</Button> |
|
</div> |
|
) : ( |
|
<p className="mt-0.5 text-muted-foreground">{t('Not an NWC connection (no relay URL in config).')}</p> |
|
)} |
|
</div> |
|
</div> |
|
) |
|
}
|
|
|