69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import { useArk } from "@lume/ark";
|
|
import { ArrowRightIcon, ZapIcon } from "@lume/icons";
|
|
import { Container } from "@lume/ui";
|
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
import { useState } from "react";
|
|
|
|
export const Route = createLazyFileRoute("/nwc")({
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const ark = useArk();
|
|
|
|
const [uri, setUri] = useState("");
|
|
const [isDone, setIsDone] = useState(false);
|
|
|
|
const save = async () => {
|
|
const nwc = await ark.set_nwc(uri);
|
|
|
|
if (nwc) {
|
|
setIsDone(true);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Container withDrag>
|
|
<div className="h-full w-full flex-1 px-5">
|
|
{!isDone ? (
|
|
<>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="inline-flex size-14 items-center justify-center rounded-xl bg-black text-white shadow-md">
|
|
<ZapIcon className="size-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-2xl font-light">
|
|
Connect <span className="font-semibold">bitcoin wallet</span>{" "}
|
|
to start zapping to your favorite content and creator.
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div className="mt-10 flex flex-col gap-2">
|
|
<div className="flex flex-col gap-1.5">
|
|
<label>Paste a Nostr Wallet Connect connection string</label>
|
|
<textarea
|
|
value={uri}
|
|
onChange={(e) => setUri(e.target.value)}
|
|
placeholder="nostrconnect://"
|
|
className="h-24 w-full resize-none rounded-lg border-transparent bg-white placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-black dark:focus:ring-blue-900"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={save}
|
|
className="inline-flex h-11 w-full items-center justify-between gap-1.5 rounded-lg bg-blue-500 px-5 font-medium text-white hover:bg-blue-600"
|
|
>
|
|
<div className="size-5" />
|
|
<div>Save & Connect</div>
|
|
<ArrowRightIcon className="size-5" />
|
|
</button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div>Done</div>
|
|
)}
|
|
</div>
|
|
</Container>
|
|
);
|
|
}
|