103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
export const Route = createLazyFileRoute("/settings/zap")({
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
return (
|
|
<div className="mx-auto w-full max-w-xl">
|
|
<div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
|
|
<div className="flex flex-col gap-6 py-3">
|
|
<Connection />
|
|
<DefaultAmount />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Connection() {
|
|
const [uri, setUri] = useState("");
|
|
|
|
const connect = async () => {
|
|
try {
|
|
await invoke("set_nwc", { uri });
|
|
} catch (e) {
|
|
toast.error(String(e));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-start gap-6">
|
|
<div className="w-36 shrink-0 text-end font-medium text-sm">
|
|
Connection
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex w-full flex-col gap-1">
|
|
<label
|
|
htmlFor="nwc"
|
|
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Nostr Wallet Connect
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
name="nwc"
|
|
type="text"
|
|
value={uri}
|
|
onChange={(e) => setUri(e.target.value)}
|
|
placeholder="nostrconnect://"
|
|
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={connect}
|
|
className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
|
|
>
|
|
Connect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DefaultAmount() {
|
|
return (
|
|
<div className="flex items-start gap-6">
|
|
<div className="w-36 shrink-0 text-end font-medium text-sm">
|
|
Default amount
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex w-full flex-col gap-1">
|
|
<label
|
|
htmlFor="amount"
|
|
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Set default amount for quick zapping
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
name="amount"
|
|
type="number"
|
|
value={21}
|
|
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
|
|
>
|
|
Update
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|