feat: Multi Accounts (#237)
* wip: new sync * wip: restructure routes * update * feat: improve sync * feat: repost with multi-account * feat: improve sync * feat: publish with multi account * fix: settings screen * feat: add zap for multi accounts
This commit is contained in:
雨宮蓮
@@ -0,0 +1,189 @@
|
||||
import { commands } from '@/commands.gen'
|
||||
import { appSettings } from '@/commons'
|
||||
import { Spinner } from '@/components'
|
||||
import * as Switch from '@radix-ui/react-switch'
|
||||
import { createLazyFileRoute } from '@tanstack/react-router'
|
||||
import { useStore } from '@tanstack/react-store'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import { message } from '@tauri-apps/plugin-dialog'
|
||||
import { useCallback, useEffect, useState, useTransition } from 'react'
|
||||
|
||||
type Theme = 'auto' | 'light' | 'dark'
|
||||
|
||||
export const Route = createLazyFileRoute('/settings/$id/general')({
|
||||
component: Screen,
|
||||
})
|
||||
|
||||
function Screen() {
|
||||
const [theme, setTheme] = useState<Theme>(null)
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
const changeTheme = useCallback(async (theme: string) => {
|
||||
if (theme === 'auto' || theme === 'light' || theme === 'dark') {
|
||||
invoke('plugin:theme|set_theme', {
|
||||
theme: theme,
|
||||
}).then(() => setTheme(theme))
|
||||
}
|
||||
}, [])
|
||||
|
||||
const updateSettings = () => {
|
||||
startTransition(async () => {
|
||||
const newSettings = JSON.stringify(appSettings.state)
|
||||
const res = await commands.setUserSettings(newSettings)
|
||||
|
||||
if (res.status === 'error') {
|
||||
await message(res.error, { kind: 'error' })
|
||||
}
|
||||
|
||||
return
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
invoke('plugin:theme|get_theme').then((data) => setTheme(data as Theme))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<div className="flex flex-col gap-6 px-3 pb-3">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
|
||||
General
|
||||
</h2>
|
||||
<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
|
||||
<Setting
|
||||
name="Relay Hint"
|
||||
description="Use the relay hint if necessary."
|
||||
label="use_relay_hint"
|
||||
/>
|
||||
<Setting
|
||||
name="Content Warning"
|
||||
description="Shows a warning for notes that have a content warning."
|
||||
label="content_warning"
|
||||
/>
|
||||
<Setting
|
||||
name="Trusted Only"
|
||||
description="Only shows note's replies from your inner circle."
|
||||
label="trusted_only"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
|
||||
Appearance
|
||||
</h2>
|
||||
<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
|
||||
<div className="flex items-start justify-between w-full gap-4 py-3">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-medium">Appearance</h3>
|
||||
<p className="text-sm text-neutral-700 dark:text-neutral-300">
|
||||
Change app theme
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end w-36 shrink-0">
|
||||
<select
|
||||
name="theme"
|
||||
className="w-24 py-1 bg-transparent rounded-lg shadow-none outline-none border-1 border-black/10 dark:border-white/10"
|
||||
defaultValue={theme}
|
||||
onChange={(e) => changeTheme(e.target.value)}
|
||||
>
|
||||
<option value="auto">Auto</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<Setting
|
||||
name="Transparent Effect"
|
||||
description="Use native window transparent effect."
|
||||
label="transparent"
|
||||
/>
|
||||
<Setting
|
||||
name="Show Zap Button"
|
||||
description="Shows the Zap button when viewing a note."
|
||||
label="display_zap_button"
|
||||
/>
|
||||
<Setting
|
||||
name="Show Repost Button"
|
||||
description="Shows the Repost button when viewing a note."
|
||||
label="display_repost_button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
|
||||
Privacy & Performance
|
||||
</h2>
|
||||
<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
|
||||
<Setting
|
||||
name="Proxy"
|
||||
description="Set proxy address."
|
||||
label="proxy"
|
||||
/>
|
||||
<Setting
|
||||
name="Image Resize Service"
|
||||
description="Use weserv/images for resize image on-the-fly."
|
||||
label="image_resize_service"
|
||||
/>
|
||||
<Setting
|
||||
name="Load Remote Media"
|
||||
description="View the remote media directly."
|
||||
label="display_media"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sticky bottom-0 left-0 w-full h-16 flex items-center justify-end px-3">
|
||||
<div className="absolute left-0 bottom-0 w-full h-11 gradient-mask-t-0 bg-neutral-100 dark:bg-neutral-900" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateSettings()}
|
||||
className="relative z-10 inline-flex items-center justify-center w-20 rounded-md shadow h-8 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium"
|
||||
>
|
||||
{isPending ? <Spinner className="size-4" /> : 'Update'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Setting({
|
||||
label,
|
||||
name,
|
||||
description,
|
||||
}: {
|
||||
label: string
|
||||
name: string
|
||||
description: string
|
||||
}) {
|
||||
const state = useStore(appSettings, (state) => state[label])
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
appSettings.setState((state) => {
|
||||
return {
|
||||
...state,
|
||||
[label]: !state[label],
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex items-start justify-between w-full gap-4 py-3">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-medium">{name}</h3>
|
||||
<p className="text-sm text-neutral-700 dark:text-neutral-300">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end w-36 shrink-0">
|
||||
<Switch.Root
|
||||
checked={state}
|
||||
onClick={() => toggle()}
|
||||
className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
|
||||
>
|
||||
<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
||||
</Switch.Root>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { commands } from '@/commands.gen'
|
||||
import { appSettings } from '@/commons'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/settings/$id/general')({
|
||||
beforeLoad: async () => {
|
||||
const res = await commands.getUserSettings()
|
||||
|
||||
if (res.status === 'ok') {
|
||||
appSettings.setState((state) => {
|
||||
return { ...state, ...res.data }
|
||||
})
|
||||
} else {
|
||||
throw new Error(res.error)
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,245 @@
|
||||
import { type Profile, commands } from "@/commands.gen";
|
||||
import { cn, upload } from "@/commons";
|
||||
import { Spinner } from "@/components";
|
||||
import { Plus } from "@phosphor-icons/react";
|
||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import { writeText } from "@tauri-apps/plugin-clipboard-manager";
|
||||
import { message } from "@tauri-apps/plugin-dialog";
|
||||
import {
|
||||
type Dispatch,
|
||||
type ReactNode,
|
||||
type SetStateAction,
|
||||
useState,
|
||||
useTransition,
|
||||
} from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
export const Route = createLazyFileRoute("/settings/$id/profile")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
function Screen() {
|
||||
const { profile } = Route.useRouteContext();
|
||||
const { register, handleSubmit } = useForm({ defaultValues: profile });
|
||||
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [picture, setPicture] = useState<string>("");
|
||||
|
||||
const onSubmit = (data: Profile) => {
|
||||
startTransition(async () => {
|
||||
const newProfile: Profile = { ...profile, ...data, picture };
|
||||
const res = await commands.setProfile(newProfile);
|
||||
|
||||
if (res.status === "error") {
|
||||
await message(res.error, { title: "Profile", kind: "error" });
|
||||
}
|
||||
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col gap-6 px-3 pb-3">
|
||||
<div className="flex items-center flex-1 h-full gap-3">
|
||||
<div className="relative rounded-full size-20 bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
|
||||
{profile.picture ? (
|
||||
<img
|
||||
src={picture || profile.picture}
|
||||
alt="avatar"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="absolute inset-0 z-10 object-cover size-20 rounded-full"
|
||||
/>
|
||||
) : null}
|
||||
<AvatarUploader
|
||||
setPicture={setPicture}
|
||||
className="absolute inset-0 z-20 flex items-center justify-center size-full text-white rounded-full bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
|
||||
>
|
||||
<Plus className="size-5" />
|
||||
</AvatarUploader>
|
||||
</div>
|
||||
<div className="flex-1 flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-lg font-semibold">{profile.display_name}</div>
|
||||
<div className="text-neutral-700 dark:text-neutral-300">
|
||||
{profile.nip05}
|
||||
</div>
|
||||
</div>
|
||||
<PrivkeyButton />
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="flex flex-col gap-3 mb-0"
|
||||
>
|
||||
<div className="flex flex-col w-full gap-1">
|
||||
<label
|
||||
htmlFor="display_name"
|
||||
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
||||
>
|
||||
Display Name
|
||||
</label>
|
||||
<input
|
||||
name="display_name"
|
||||
{...register("display_name")}
|
||||
spellCheck={false}
|
||||
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 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"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col w-full gap-1">
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
name="name"
|
||||
{...register("name")}
|
||||
spellCheck={false}
|
||||
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 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"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col w-full gap-1">
|
||||
<label
|
||||
htmlFor="website"
|
||||
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
||||
>
|
||||
Website
|
||||
</label>
|
||||
<input
|
||||
name="website"
|
||||
type="url"
|
||||
{...register("website")}
|
||||
spellCheck={false}
|
||||
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 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"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col w-full gap-1">
|
||||
<label
|
||||
htmlFor="banner"
|
||||
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
||||
>
|
||||
Cover
|
||||
</label>
|
||||
<input
|
||||
name="banner"
|
||||
type="url"
|
||||
{...register("banner")}
|
||||
spellCheck={false}
|
||||
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 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"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col w-full gap-1">
|
||||
<label
|
||||
htmlFor="nip05"
|
||||
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
||||
>
|
||||
NIP-05
|
||||
</label>
|
||||
<input
|
||||
name="nip05"
|
||||
type="email"
|
||||
{...register("nip05")}
|
||||
spellCheck={false}
|
||||
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 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"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col w-full gap-1">
|
||||
<label
|
||||
htmlFor="lnaddress"
|
||||
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
||||
>
|
||||
Lightning Address
|
||||
</label>
|
||||
<input
|
||||
name="lnaddress"
|
||||
type="email"
|
||||
{...register("lud16")}
|
||||
className="w-full px-3 bg-transparent rounded-lg h-9 border-neutral-300 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"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
className="inline-flex items-center justify-center w-32 px-2 text-sm font-medium text-white bg-blue-500 rounded-lg h-9 hover:bg-blue-600 disabled:opacity-50"
|
||||
>
|
||||
{isPending ? <Spinner className="size-4" /> : "Update Profile"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PrivkeyButton() {
|
||||
const { id } = Route.useParams();
|
||||
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [isCopy, setIsCopy] = useState(false);
|
||||
|
||||
const copyPrivateKey = () => {
|
||||
startTransition(async () => {
|
||||
const res = await commands.getPrivateKey(id);
|
||||
|
||||
if (res.status === "ok") {
|
||||
await writeText(res.data);
|
||||
setIsCopy(true);
|
||||
} else {
|
||||
await message(res.error, { kind: "error" });
|
||||
return;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => copyPrivateKey()}
|
||||
className="inline-flex items-center justify-center px-3 text-sm font-medium text-blue-500 bg-blue-100 border border-blue-300 rounded-full h-7 hover:bg-blue-200 dark:bg-blue-900 dark:border-blue-800 dark:text-blue-300 dark:hover:bg-blue-800"
|
||||
>
|
||||
{isPending ? (
|
||||
<Spinner className="size-4" />
|
||||
) : isCopy ? (
|
||||
"Copied"
|
||||
) : (
|
||||
"Copy Private Key"
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function AvatarUploader({
|
||||
setPicture,
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
setPicture: Dispatch<SetStateAction<string>>;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const uploadAvatar = () => {
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const image = await upload();
|
||||
setPicture(image);
|
||||
} catch (e) {
|
||||
await message(String(e));
|
||||
return;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => uploadAvatar()}
|
||||
className={cn("size-4", className)}
|
||||
>
|
||||
{isPending ? <Spinner className="size-4" /> : children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { type Profile, commands } from "@/commands.gen";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/settings/$id/profile")({
|
||||
beforeLoad: async ({ params }) => {
|
||||
const res = await commands.getProfile(params.id);
|
||||
|
||||
if (res.status === "ok") {
|
||||
const profile: Profile = JSON.parse(res.data);
|
||||
return { profile };
|
||||
} else {
|
||||
throw new Error(res.error);
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,156 @@
|
||||
import { commands } from "@/commands.gen";
|
||||
import { Plus, X } from "@phosphor-icons/react";
|
||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import { message } from "@tauri-apps/plugin-dialog";
|
||||
import { useEffect, useState, useTransition } from "react";
|
||||
|
||||
export const Route = createLazyFileRoute("/settings/$id/relay")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
function Screen() {
|
||||
const { relayList } = Route.useRouteContext();
|
||||
|
||||
const [relays, setRelays] = useState<string[]>([]);
|
||||
const [newRelay, setNewRelay] = useState<string>("");
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const removeRelay = async (relay: string) => {
|
||||
const res = await commands.removeRelay(relay);
|
||||
|
||||
if (res.status === "ok") {
|
||||
return res.data;
|
||||
} else {
|
||||
throw new Error(res.error);
|
||||
}
|
||||
};
|
||||
|
||||
const addNewRelay = () => {
|
||||
startTransition(async () => {
|
||||
try {
|
||||
let url = newRelay;
|
||||
|
||||
if (!url.startsWith("wss://")) {
|
||||
url = `wss://${url}`;
|
||||
}
|
||||
|
||||
const relay = new URL(url);
|
||||
const res = await commands.connectRelay(relay.toString());
|
||||
|
||||
if (res.status === "ok") {
|
||||
setRelays((prev) => [...prev, newRelay]);
|
||||
setNewRelay("");
|
||||
} else {
|
||||
await message(res.error, { title: "Relay", kind: "error" });
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
await message("URL is not valid.", { kind: "error" });
|
||||
return;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setRelays(relayList.connected);
|
||||
}, [relayList]);
|
||||
|
||||
return (
|
||||
<div className="w-full px-3 pb-3">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
|
||||
Connected Relays
|
||||
</h2>
|
||||
<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
|
||||
{relays.map((relay) => (
|
||||
<div
|
||||
key={relay}
|
||||
className="flex items-center justify-between h-11"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 text-sm font-medium">
|
||||
<span className="relative flex size-2">
|
||||
<span className="absolute inline-flex w-full h-full bg-teal-400 rounded-full opacity-75 animate-ping" />
|
||||
<span className="relative inline-flex bg-teal-500 rounded-full size-2" />
|
||||
</span>
|
||||
{relay}
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeRelay(relay)}
|
||||
className="inline-flex items-center justify-center rounded-md size-7 hover:bg-black/10 dark:hover:bg-white/10"
|
||||
>
|
||||
<X className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex items-center h-14">
|
||||
<div className="flex items-center w-full gap-2 mb-0">
|
||||
<input
|
||||
value={newRelay}
|
||||
onChange={(e) => setNewRelay(e.target.value)}
|
||||
name="url"
|
||||
placeholder="wss://..."
|
||||
disabled={isPending}
|
||||
spellCheck={false}
|
||||
className="flex-1 px-3 bg-transparent rounded-lg h-9 border-neutral-300 placeholder:text-neutral-500 focus:border-blue-500 focus:ring-0 dark:border-neutral-700 dark:placeholder:text-neutral-400"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isPending}
|
||||
onClick={() => addNewRelay()}
|
||||
className="inline-flex items-center justify-center w-16 px-2 text-sm font-medium text-white rounded-lg shrink-0 h-9 bg-black/20 dark:bg-white/20 hover:bg-blue-500 disabled:opacity-50"
|
||||
>
|
||||
<Plus className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
|
||||
User Relays (NIP-65)
|
||||
</h2>
|
||||
<div className="flex flex-col px-3 py-2 bg-black/5 dark:bg-white/5 rounded-xl">
|
||||
<p className="text-sm text-yellow-500">
|
||||
Lume will automatically connect to the user's relay list, but the
|
||||
manager function (like adding, removing, changing relay purpose)
|
||||
is not yet available.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col px-3 divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl">
|
||||
{relayList.read?.map((relay) => (
|
||||
<div
|
||||
key={relay}
|
||||
className="flex items-center justify-between h-11"
|
||||
>
|
||||
<div className="text-sm font-medium">{relay}</div>
|
||||
<div className="text-xs font-semibold">READ</div>
|
||||
</div>
|
||||
))}
|
||||
{relayList.write?.map((relay) => (
|
||||
<div
|
||||
key={relay}
|
||||
className="flex items-center justify-between h-11"
|
||||
>
|
||||
<div className="text-sm font-medium">{relay}</div>
|
||||
<div className="text-xs font-semibold">WRITE</div>
|
||||
</div>
|
||||
))}
|
||||
{relayList.both?.map((relay) => (
|
||||
<div
|
||||
key={relay}
|
||||
className="flex items-center justify-between h-11"
|
||||
>
|
||||
<div className="text-sm font-medium">{relay}</div>
|
||||
<div className="text-xs font-semibold">READ + WRITE</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { commands } from "@/commands.gen";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/settings/$id/relay")({
|
||||
beforeLoad: async ({ params }) => {
|
||||
const res = await commands.getRelays(params.id);
|
||||
|
||||
if (res.status === "ok") {
|
||||
return { relayList: res.data };
|
||||
} else {
|
||||
throw new Error(res.error);
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,50 @@
|
||||
import { commands } from "@/commands.gen";
|
||||
import { Button } from "@getalby/bitcoin-connect-react";
|
||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||
import { useState } from "react";
|
||||
|
||||
export const Route = createLazyFileRoute("/settings/$id/wallet")({
|
||||
component: Screen,
|
||||
});
|
||||
|
||||
function Screen() {
|
||||
const [_isConnect, setIsConnect] = useState(false);
|
||||
|
||||
const setWallet = async (uri: string) => {
|
||||
const res = await commands.setWallet(uri);
|
||||
|
||||
if (res.status === "ok") {
|
||||
setIsConnect((prev) => !prev);
|
||||
} else {
|
||||
throw new Error(res.error);
|
||||
}
|
||||
};
|
||||
|
||||
const removeWallet = async () => {
|
||||
const res = await commands.removeWallet();
|
||||
|
||||
if (res.status === "ok") {
|
||||
window.localStorage.removeItem("bc:config");
|
||||
} else {
|
||||
throw new Error(res.error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full px-3 pb-3">
|
||||
<div className="flex flex-col w-full gap-2">
|
||||
<h2 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
|
||||
Wallet
|
||||
</h2>
|
||||
<div className="w-full h-44 flex items-center justify-center bg-black/5 dark:bg-white/5 rounded-xl">
|
||||
<Button
|
||||
onConnected={(provider) =>
|
||||
setWallet(provider.client.nostrWalletConnectUrl)
|
||||
}
|
||||
onDisconnected={() => removeWallet()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { init } from "@getalby/bitcoin-connect-react";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/settings/$id/wallet")({
|
||||
beforeLoad: async () => {
|
||||
init({
|
||||
appName: "Lume",
|
||||
filters: ["nwc"],
|
||||
showBalance: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user