125 lines
4.8 KiB
TypeScript
125 lines
4.8 KiB
TypeScript
import { NWCAlby } from '@app/nwc/components/alby';
|
|
import { NWCOther } from '@app/nwc/components/other';
|
|
|
|
import { useStorage } from '@libs/storage/provider';
|
|
|
|
import { CheckCircleIcon } from '@shared/icons';
|
|
|
|
import { useStronghold } from '@stores/stronghold';
|
|
|
|
export function NWCScreen() {
|
|
const { db } = useStorage();
|
|
|
|
const [walletConnectURL, setWalletConnectURL] = useStronghold((state) => [
|
|
state.walletConnectURL,
|
|
state.setWalletConnectURL,
|
|
]);
|
|
|
|
const remove = async () => {
|
|
setWalletConnectURL('');
|
|
await db.secureSave('walletConnectURL', '', 'nwc');
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center bg-white/5">
|
|
<div className="flex w-full flex-col gap-5">
|
|
<div className="text-center">
|
|
<h3 className="text-2xl font-bold leading-tight">
|
|
Nostr Wallet Connect (Beta)
|
|
</h3>
|
|
<p className="leading-tight text-white/70">
|
|
Sending tips easily via Bitcoin Lightning.
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto max-w-lg">
|
|
{!walletConnectURL ? (
|
|
<div className="flex w-full flex-col gap-4 divide-y divide-white/5 rounded-xl border-t border-white/10 bg-white/20 p-3">
|
|
<NWCAlby />
|
|
<NWCOther />
|
|
</div>
|
|
) : (
|
|
<div className="flex w-full flex-col rounded-xl border-t border-white/10 bg-white/20 p-3">
|
|
<div className="mb-1 inline-flex items-center gap-1.5 text-sm text-green-500">
|
|
<CheckCircleIcon className="h-4 w-4" />
|
|
<p>You're using nostr wallet connect</p>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<textarea
|
|
readOnly
|
|
value={walletConnectURL.substring(0, 120) + '****'}
|
|
className="relative h-40 w-full resize-none rounded-lg bg-white/20 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => remove()}
|
|
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-red-500 hover:bg-white/20 focus:outline-none disabled:opacity-50"
|
|
>
|
|
Remove connection
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="mt-5 flex flex-col gap-4">
|
|
<div className="flex flex-col gap-1.5">
|
|
<h5 className="text-sm font-bold text-white">Introduction</h5>
|
|
<p className="text-sm text-white/70">
|
|
Nostr Wallet Connect (NWC) is a way for applications like Nostr clients to
|
|
access a remote Lightning wallet through a standardized protocol.
|
|
</p>
|
|
<p className="text-sm text-white/70">
|
|
To learn more about the details have a look at{' '}
|
|
<a
|
|
href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md"
|
|
target="_blank"
|
|
className="text-fuchsia-300"
|
|
rel="noreferrer"
|
|
>
|
|
the specs (NIP47)
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
<h5 className="text-sm font-bold text-white">About tipping</h5>
|
|
<p className="text-sm text-white/70">
|
|
Also known as Zap in other Nostr client.
|
|
</p>
|
|
<p className="text-sm text-white/70">
|
|
Lume doesn't take any commission or platform fees when you tip
|
|
someone.
|
|
</p>
|
|
<p className="text-sm text-white/70">Lume doesn't hold your Bitcoin</p>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
<h5 className="text-sm font-bold text-white">
|
|
Recommend wallet that support NWC
|
|
</h5>
|
|
<p className="text-sm text-white/70">
|
|
Mutiny Wallet:{' '}
|
|
<a
|
|
href="https://www.mutinywallet.com/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-fuchsia-300"
|
|
>
|
|
website
|
|
</a>
|
|
</p>
|
|
<p className="text-sm text-white/70">
|
|
Self hosted NWC on Umbrel :{' '}
|
|
<a
|
|
href="https://apps.umbrel.com/app/alby-nostr-wallet-connect"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-fuchsia-300"
|
|
>
|
|
website
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|