mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-29 16:30:55 +00:00
wip: new design
This commit is contained in:
reya
parent
4292def206
commit
60fd09000b
@ -1,13 +0,0 @@
|
|||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Lume</title>
|
|
||||||
</head>
|
|
||||||
<body
|
|
||||||
class="relative w-screen h-screen overflow-hidden font-sans antialiased cursor-default select-none text-neutral-950 dark:text-neutral-50"
|
|
||||||
>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="./src/main.jsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "@lume/desktop",
|
|
||||||
"private": true,
|
|
||||||
"version": "3.0.0",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vite build"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@columns/antenas": "workspace:^",
|
|
||||||
"@columns/default": "workspace:^",
|
|
||||||
"@columns/foryou": "workspace:^",
|
|
||||||
"@columns/global": "workspace:^",
|
|
||||||
"@columns/group": "workspace:^",
|
|
||||||
"@columns/hashtag": "workspace:^",
|
|
||||||
"@columns/thread": "workspace:^",
|
|
||||||
"@columns/timeline": "workspace:^",
|
|
||||||
"@columns/trending-notes": "workspace:^",
|
|
||||||
"@columns/user": "workspace:^",
|
|
||||||
"@columns/waifu": "workspace:^",
|
|
||||||
"@getalby/sdk": "^3.2.3",
|
|
||||||
"@lume/ark": "workspace:^",
|
|
||||||
"@lume/icons": "workspace:^",
|
|
||||||
"@lume/storage": "workspace:^",
|
|
||||||
"@lume/ui": "workspace:^",
|
|
||||||
"@lume/utils": "workspace:^",
|
|
||||||
"@nostr-dev-kit/ndk": "^2.4.0",
|
|
||||||
"@radix-ui/react-accordion": "^1.1.2",
|
|
||||||
"@radix-ui/react-alert-dialog": "^1.0.5",
|
|
||||||
"@radix-ui/react-avatar": "^1.0.4",
|
|
||||||
"@radix-ui/react-checkbox": "^1.0.4",
|
|
||||||
"@radix-ui/react-collapsible": "^1.0.3",
|
|
||||||
"@radix-ui/react-dialog": "^1.0.5",
|
|
||||||
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
|
||||||
"@radix-ui/react-hover-card": "^1.0.7",
|
|
||||||
"@radix-ui/react-popover": "^1.0.7",
|
|
||||||
"@radix-ui/react-select": "^2.0.0",
|
|
||||||
"@radix-ui/react-switch": "^1.0.3",
|
|
||||||
"@radix-ui/react-tooltip": "^1.0.7",
|
|
||||||
"@tanstack/react-query": "^5.18.1",
|
|
||||||
"framer-motion": "^11.0.3",
|
|
||||||
"i18next": "^23.8.2",
|
|
||||||
"i18next-resources-to-backend": "^1.2.0",
|
|
||||||
"jotai": "^2.6.4",
|
|
||||||
"minidenticons": "^4.2.0",
|
|
||||||
"nanoid": "^5.0.5",
|
|
||||||
"nostr-fetch": "^0.15.0",
|
|
||||||
"nostr-tools": "^1.17.0",
|
|
||||||
"react": "^18.2.0",
|
|
||||||
"react-currency-input-field": "^3.6.14",
|
|
||||||
"react-dom": "^18.2.0",
|
|
||||||
"react-hook-form": "^7.50.0",
|
|
||||||
"react-i18next": "^14.0.2",
|
|
||||||
"react-router-dom": "^6.22.0",
|
|
||||||
"smol-toml": "^1.1.4",
|
|
||||||
"sonner": "^1.4.0",
|
|
||||||
"virtua": "^0.23.3"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@lume/tailwindcss": "workspace:^",
|
|
||||||
"@lume/tsconfig": "workspace:^",
|
|
||||||
"@lume/types": "workspace:^",
|
|
||||||
"@types/node": "^20.11.16",
|
|
||||||
"@types/react": "^18.2.52",
|
|
||||||
"@types/react-dom": "^18.2.18",
|
|
||||||
"@vitejs/plugin-react-swc": "^3.6.0",
|
|
||||||
"autoprefixer": "^10.4.17",
|
|
||||||
"cross-env": "^7.0.3",
|
|
||||||
"encoding": "^0.1.13",
|
|
||||||
"postcss": "^8.4.33",
|
|
||||||
"tailwindcss": "^3.4.1",
|
|
||||||
"typescript": "^5.3.3",
|
|
||||||
"vite": "^5.0.12",
|
|
||||||
"vite-plugin-top-level-await": "^1.4.1",
|
|
||||||
"vite-tsconfig-paths": "^4.3.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 428 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 448 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 416 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 381 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 457 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 986 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 473 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 341 KiB |
@ -1,48 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
@layer utilities {
|
|
||||||
.break-p {
|
|
||||||
word-break: break-word;
|
|
||||||
word-wrap: break-word;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose :where(iframe):not(:where([class~='not-prose'] *)) {
|
|
||||||
@apply w-full h-auto mx-auto aspect-video;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow-toolbar {
|
|
||||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 8px 24px 0 rgba(0, 0, 0, .2), 0 2px 8px 0 rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 0 0 2px hsla(0, 0%, 100%, .14)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
@apply cursor-default no-underline !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
@apply cursor-default focus:outline-none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input::-ms-reveal,
|
|
||||||
input::-ms-clear {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-input-placeholder {
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border {
|
|
||||||
background-clip: padding-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
media-controller {
|
|
||||||
@apply w-full;
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
import { ArkProvider } from "@lume/ark";
|
|
||||||
import { StorageProvider } from "@lume/storage";
|
|
||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
||||||
import { I18nextProvider } from "react-i18next";
|
|
||||||
import { Toaster } from "sonner";
|
|
||||||
import i18n from "./i18n";
|
|
||||||
import Router from "./router";
|
|
||||||
|
|
||||||
const queryClient = new QueryClient({
|
|
||||||
defaultOptions: {
|
|
||||||
queries: {
|
|
||||||
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000), // 10 seconds
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
return (
|
|
||||||
<I18nextProvider i18n={i18n} defaultNS={"translation"}>
|
|
||||||
<QueryClientProvider client={queryClient}>
|
|
||||||
<Toaster position="top-center" theme="system" closeButton />
|
|
||||||
<ArkProvider>
|
|
||||||
<StorageProvider>
|
|
||||||
<Router />
|
|
||||||
</StorageProvider>
|
|
||||||
</ArkProvider>
|
|
||||||
</QueryClientProvider>
|
|
||||||
</I18nextProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import { resolveResource } from "@tauri-apps/api/path";
|
|
||||||
import { readTextFile } from "@tauri-apps/plugin-fs";
|
|
||||||
import { locale } from "@tauri-apps/plugin-os";
|
|
||||||
import i18n from "i18next";
|
|
||||||
import resourcesToBackend from "i18next-resources-to-backend";
|
|
||||||
import { initReactI18next } from "react-i18next";
|
|
||||||
|
|
||||||
const currentLocale = (await locale()).slice(0, 2);
|
|
||||||
|
|
||||||
i18n
|
|
||||||
.use(
|
|
||||||
resourcesToBackend(async (language: string) => {
|
|
||||||
const file_path = await resolveResource(`locales/${language}.json`);
|
|
||||||
return JSON.parse(await readTextFile(file_path));
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
.use(initReactI18next)
|
|
||||||
.init({
|
|
||||||
lng: currentLocale,
|
|
||||||
fallbackLng: "en",
|
|
||||||
interpolation: {
|
|
||||||
escapeValue: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default i18n;
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import { createRoot } from "react-dom/client";
|
|
||||||
import App from "./app";
|
|
||||||
import "./app.css";
|
|
||||||
|
|
||||||
const container = document.getElementById("root");
|
|
||||||
const root = createRoot(container);
|
|
||||||
|
|
||||||
root.render(<App />);
|
|
||||||
@ -1,290 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { LoaderIcon } from "@lume/icons";
|
|
||||||
import {
|
|
||||||
RouterProvider,
|
|
||||||
createBrowserRouter,
|
|
||||||
defer,
|
|
||||||
redirect,
|
|
||||||
} from "react-router-dom";
|
|
||||||
import { ErrorScreen } from "./routes/error";
|
|
||||||
|
|
||||||
export default function Router() {
|
|
||||||
const ark = useArk();
|
|
||||||
|
|
||||||
const router = createBrowserRouter([
|
|
||||||
{
|
|
||||||
async lazy() {
|
|
||||||
const { AppLayout } = await import("@lume/ui");
|
|
||||||
return { Component: AppLayout };
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: "/",
|
|
||||||
errorElement: <ErrorScreen />,
|
|
||||||
async lazy() {
|
|
||||||
const { HomeLayout } = await import("@lume/ui");
|
|
||||||
return { Component: HomeLayout };
|
|
||||||
},
|
|
||||||
loader: async () => {
|
|
||||||
const signer = await ark.verify_signer();
|
|
||||||
if (!signer) return redirect("auth");
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
index: true,
|
|
||||||
async lazy() {
|
|
||||||
const { HomeScreen } = await import("./routes/home");
|
|
||||||
return { Component: HomeScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "settings",
|
|
||||||
async lazy() {
|
|
||||||
const { SettingsLayout } = await import("@lume/ui");
|
|
||||||
return { Component: SettingsLayout };
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
index: true,
|
|
||||||
async lazy() {
|
|
||||||
const { GeneralSettingScreen } = await import(
|
|
||||||
"./routes/settings/general"
|
|
||||||
);
|
|
||||||
return { Component: GeneralSettingScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "profile",
|
|
||||||
async lazy() {
|
|
||||||
const { ProfileSettingScreen } = await import(
|
|
||||||
"./routes/settings/profile"
|
|
||||||
);
|
|
||||||
return { Component: ProfileSettingScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "backup",
|
|
||||||
async lazy() {
|
|
||||||
const { BackupSettingScreen } = await import(
|
|
||||||
"./routes/settings/backup"
|
|
||||||
);
|
|
||||||
return { Component: BackupSettingScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "advanced",
|
|
||||||
async lazy() {
|
|
||||||
const { AdvancedSettingScreen } = await import(
|
|
||||||
"./routes/settings/advanced"
|
|
||||||
);
|
|
||||||
return { Component: AdvancedSettingScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "nwc",
|
|
||||||
async lazy() {
|
|
||||||
const { NWCScreen } = await import("./routes/settings/nwc");
|
|
||||||
return { Component: NWCScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "about",
|
|
||||||
async lazy() {
|
|
||||||
const { AboutScreen } = await import("./routes/settings/about");
|
|
||||||
return { Component: AboutScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "activity",
|
|
||||||
async lazy() {
|
|
||||||
const { ActivityScreen } = await import("./routes/activty");
|
|
||||||
return { Component: ActivityScreen };
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: ":id",
|
|
||||||
async lazy() {
|
|
||||||
const { ActivityIdScreen } = await import(
|
|
||||||
"./routes/activty/id"
|
|
||||||
);
|
|
||||||
return { Component: ActivityIdScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "relays",
|
|
||||||
async lazy() {
|
|
||||||
const { RelaysScreen } = await import("./routes/relays");
|
|
||||||
return { Component: RelaysScreen };
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
index: true,
|
|
||||||
async lazy() {
|
|
||||||
const { RelayGlobalScreen } = await import(
|
|
||||||
"./routes/relays/global"
|
|
||||||
);
|
|
||||||
return { Component: RelayGlobalScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "follows",
|
|
||||||
async lazy() {
|
|
||||||
const { RelayFollowsScreen } = await import(
|
|
||||||
"./routes/relays/follows"
|
|
||||||
);
|
|
||||||
return { Component: RelayFollowsScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: ":url",
|
|
||||||
loader: async ({ request, params }) => {
|
|
||||||
return defer({
|
|
||||||
relay: fetch(`https://${params.url}`, {
|
|
||||||
method: "GET",
|
|
||||||
headers: {
|
|
||||||
Accept: "application/nostr+json",
|
|
||||||
},
|
|
||||||
signal: request.signal,
|
|
||||||
}).then((res) => res.json()),
|
|
||||||
});
|
|
||||||
},
|
|
||||||
async lazy() {
|
|
||||||
const { RelayUrlScreen } = await import("./routes/relays/url");
|
|
||||||
return { Component: RelayUrlScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "depot",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
index: true,
|
|
||||||
async lazy() {
|
|
||||||
const { DepotScreen } = await import("./routes/depot");
|
|
||||||
return { Component: DepotScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "onboarding",
|
|
||||||
async lazy() {
|
|
||||||
const { DepotOnboardingScreen } = await import(
|
|
||||||
"./routes/depot/onboarding"
|
|
||||||
);
|
|
||||||
return { Component: DepotOnboardingScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "auth",
|
|
||||||
errorElement: <ErrorScreen />,
|
|
||||||
async lazy() {
|
|
||||||
const { AuthLayout } = await import("@lume/ui");
|
|
||||||
return { Component: AuthLayout };
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
index: true,
|
|
||||||
async lazy() {
|
|
||||||
const { WelcomeScreen } = await import("./routes/auth/welcome");
|
|
||||||
return { Component: WelcomeScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "create",
|
|
||||||
async lazy() {
|
|
||||||
const { CreateAccountScreen } = await import(
|
|
||||||
"./routes/auth/create"
|
|
||||||
);
|
|
||||||
return { Component: CreateAccountScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "create-keys",
|
|
||||||
async lazy() {
|
|
||||||
const { CreateAccountKeys } = await import(
|
|
||||||
"./routes/auth/create-keys"
|
|
||||||
);
|
|
||||||
return { Component: CreateAccountKeys };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "create-address",
|
|
||||||
loader: async () => {
|
|
||||||
// return await ark.getOAuthServices();
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
async lazy() {
|
|
||||||
const { CreateAccountAddress } = await import(
|
|
||||||
"./routes/auth/create-address"
|
|
||||||
);
|
|
||||||
return { Component: CreateAccountAddress };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "login",
|
|
||||||
async lazy() {
|
|
||||||
const { LoginScreen } = await import("./routes/auth/login");
|
|
||||||
return { Component: LoginScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "login-key",
|
|
||||||
async lazy() {
|
|
||||||
const { LoginWithKey } = await import("./routes/auth/login-key");
|
|
||||||
return { Component: LoginWithKey };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "login-nsecbunker",
|
|
||||||
async lazy() {
|
|
||||||
const { LoginWithNsecbunker } = await import(
|
|
||||||
"./routes/auth/login-nsecbunker"
|
|
||||||
);
|
|
||||||
return { Component: LoginWithNsecbunker };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "login-oauth",
|
|
||||||
async lazy() {
|
|
||||||
const { LoginWithOAuth } = await import(
|
|
||||||
"./routes/auth/login-oauth"
|
|
||||||
);
|
|
||||||
return { Component: LoginWithOAuth };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "onboarding",
|
|
||||||
async lazy() {
|
|
||||||
const { OnboardingScreen } = await import(
|
|
||||||
"./routes/auth/onboarding"
|
|
||||||
);
|
|
||||||
return { Component: OnboardingScreen };
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<RouterProvider
|
|
||||||
router={router}
|
|
||||||
fallbackElement={
|
|
||||||
<div className="flex items-center justify-center w-full h-full">
|
|
||||||
<LoaderIcon className="w-6 h-6 animate-spin" />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
future={{ v7_startTransition: true }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
import { User } from "@lume/ark";
|
|
||||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
export function ActivityRepost({ event }: { event: NDKEvent }) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
to={`/activity/${event.id}`}
|
|
||||||
className="block px-5 py-4 border-b border-black/5 dark:border-white/5 hover:bg-black/10 dark:hover:bg-white/10"
|
|
||||||
>
|
|
||||||
<User.Provider pubkey={event.pubkey}>
|
|
||||||
<User.Root className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<User.Avatar className="size-8 rounded-lg shrink-0" />
|
|
||||||
<div className="inline-flex items-center gap-1.5">
|
|
||||||
<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
|
|
||||||
<p className="shrink-0">{t("activity.repost")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<User.Time
|
|
||||||
time={event.created_at}
|
|
||||||
className="text-neutral-500 dark:text-neutral-400"
|
|
||||||
/>
|
|
||||||
</User.Root>
|
|
||||||
</User.Provider>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
import { User } from "@lume/ark";
|
|
||||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
export function ActivityText({ event }: { event: NDKEvent }) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
to={`/activity/${event.id}`}
|
|
||||||
className="block px-5 py-4 border-b border-black/5 dark:border-white/5 hover:bg-black/10 dark:hover:bg-white/10"
|
|
||||||
>
|
|
||||||
<User.Provider pubkey={event.pubkey}>
|
|
||||||
<User.Root className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<User.Avatar className="size-8 rounded-lg shrink-0" />
|
|
||||||
<div className="inline-flex items-center gap-1.5">
|
|
||||||
<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
|
|
||||||
<p className="shrink-0">{t("activity.mention")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<User.Time
|
|
||||||
time={event.created_at}
|
|
||||||
className="text-neutral-500 dark:text-neutral-400"
|
|
||||||
/>
|
|
||||||
</User.Root>
|
|
||||||
</User.Provider>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import { User } from "@lume/ark";
|
|
||||||
import { compactNumber } from "@lume/utils";
|
|
||||||
import { NDKEvent, zapInvoiceFromEvent } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
export function ActivityZap({ event }: { event: NDKEvent }) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const invoice = zapInvoiceFromEvent(event);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
to={`/activity/${event.id}`}
|
|
||||||
className="block px-5 py-4 border-b border-black/5 dark:border-white/5 hover:bg-black/10 dark:hover:bg-white/10"
|
|
||||||
>
|
|
||||||
<User.Provider pubkey={event.pubkey}>
|
|
||||||
<User.Root className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<User.Avatar className="size-8 rounded-lg shrink-0" />
|
|
||||||
<div className="inline-flex items-center gap-1.5">
|
|
||||||
<User.Name className="max-w-[8rem] font-semibold text-neutral-950 dark:text-neutral-50" />
|
|
||||||
<p className="shrink-0">
|
|
||||||
{t("activity.zap")} {compactNumber.format(invoice.amount)} sats
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<User.Time
|
|
||||||
time={event.created_at}
|
|
||||||
className="text-neutral-500 dark:text-neutral-400"
|
|
||||||
/>
|
|
||||||
</User.Root>
|
|
||||||
</User.Provider>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
|
|
||||||
import { FETCH_LIMIT } from "@lume/utils";
|
|
||||||
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { useCallback, useMemo } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { ActivityRepost } from "./activityRepost";
|
|
||||||
import { ActivityText } from "./activityText";
|
|
||||||
import { ActivityZap } from "./activityZap";
|
|
||||||
|
|
||||||
export function ActivityList() {
|
|
||||||
const ark = useArk();
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
|
|
||||||
useInfiniteQuery({
|
|
||||||
queryKey: ["activity"],
|
|
||||||
initialPageParam: 0,
|
|
||||||
queryFn: async ({
|
|
||||||
signal,
|
|
||||||
pageParam,
|
|
||||||
}: {
|
|
||||||
signal: AbortSignal;
|
|
||||||
pageParam: number;
|
|
||||||
}) => {
|
|
||||||
const events = await ark.getInfiniteEvents({
|
|
||||||
filter: {
|
|
||||||
kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Zap],
|
|
||||||
"#p": [ark.account.pubkey],
|
|
||||||
},
|
|
||||||
limit: FETCH_LIMIT,
|
|
||||||
pageParam,
|
|
||||||
signal,
|
|
||||||
});
|
|
||||||
|
|
||||||
return events;
|
|
||||||
},
|
|
||||||
getNextPageParam: (lastPage) => {
|
|
||||||
const lastEvent = lastPage.at(-1);
|
|
||||||
if (!lastEvent) return;
|
|
||||||
return lastEvent.created_at - 1;
|
|
||||||
},
|
|
||||||
initialData: () => {
|
|
||||||
const queryCacheData = queryClient.getQueryState(["activity"])
|
|
||||||
?.data as NDKEvent[];
|
|
||||||
if (queryCacheData) {
|
|
||||||
return {
|
|
||||||
pageParams: [undefined, 1],
|
|
||||||
pages: [queryCacheData],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
staleTime: 360 * 1000,
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
refetchOnMount: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const allEvents = useMemo(
|
|
||||||
() => (data ? data.pages.flatMap((page) => page) : []),
|
|
||||||
[data],
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderEvenKind = useCallback(
|
|
||||||
(event: NDKEvent) => {
|
|
||||||
if (event.pubkey === ark.account.pubkey) return null;
|
|
||||||
switch (event.kind) {
|
|
||||||
case NDKKind.Text:
|
|
||||||
return <ActivityText key={event.id} event={event} />;
|
|
||||||
case NDKKind.Repost:
|
|
||||||
return <ActivityRepost key={event.id} event={event} />;
|
|
||||||
case NDKKind.Zap:
|
|
||||||
return <ActivityZap key={event.id} event={event} />;
|
|
||||||
default:
|
|
||||||
return <ActivityText key={event.id} event={event} />;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[data],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="w-full h-full flex flex-col items-center justify-center">
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : !allEvents.length ? (
|
|
||||||
<div className="w-full h-full flex flex-col items-center justify-center">
|
|
||||||
<p className="mb-2 text-2xl">🎉</p>
|
|
||||||
<p className="text-center font-medium">{t("activity.empty")}</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
allEvents.map((event) => renderEvenKind(event))
|
|
||||||
)}
|
|
||||||
<div className="flex items-center justify-center h-16 px-5">
|
|
||||||
{hasNextPage ? (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => fetchNextPage()}
|
|
||||||
disabled={!hasNextPage || isFetchingNextPage}
|
|
||||||
className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20 rounded-xl focus:outline-none"
|
|
||||||
>
|
|
||||||
{isFetchingNextPage ? (
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<ArrowRightCircleIcon className="size-5" />
|
|
||||||
{t("global.loadMore")}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import { Note, useEvent } from "@lume/ark";
|
|
||||||
|
|
||||||
export function ActivityRootNote({ eventId }: { eventId: string }) {
|
|
||||||
const { isLoading, isError, data } = useEvent(eventId);
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className="relative flex gap-3">
|
|
||||||
<div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
|
|
||||||
<div className="h-4 w-full animate-pulse bg-neutral-300 dark:bg-neutral-700" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isError) {
|
|
||||||
return (
|
|
||||||
<div className="relative flex gap-3">
|
|
||||||
<div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
|
|
||||||
Failed to fetch event
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Note.Provider event={data}>
|
|
||||||
<Note.Root>
|
|
||||||
<div className="flex items-center justify-between px-3 h-14">
|
|
||||||
<Note.User className="flex-1 pr-1" />
|
|
||||||
</div>
|
|
||||||
<Note.Content className="min-w-0 px-3" />
|
|
||||||
<div className="flex items-center justify-between px-3 h-14">
|
|
||||||
<Note.Pin />
|
|
||||||
<div className="inline-flex items-center gap-10" />
|
|
||||||
</div>
|
|
||||||
</Note.Root>
|
|
||||||
</Note.Provider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import { User } from "@lume/ark";
|
|
||||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { ActivityRootNote } from "./rootNote";
|
|
||||||
|
|
||||||
export function ActivitySingleRepost({ event }: { event: NDKEvent }) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const repostId = event.tags.find((el) => el[0] === "e")[1];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="pb-3 flex flex-col">
|
|
||||||
<div className="h-14 shrink-0 border-b border-neutral-100 dark:border-neutral-900 flex flex-col items-center justify-center px-3">
|
|
||||||
<h3 className="text-center font-semibold leading-tight">
|
|
||||||
{t("activity.boost")}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-blue-500 font-medium leading-tight">
|
|
||||||
{t("activity.boostSubtitle")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-h-0">
|
|
||||||
<div className="max-w-xl mx-auto py-6 flex flex-col items-center gap-6">
|
|
||||||
<User.Provider pubkey={event.pubkey}>
|
|
||||||
<User.Root>
|
|
||||||
<User.Avatar className="size-10 shrink-0 rounded-lg object-cover" />
|
|
||||||
</User.Root>
|
|
||||||
</User.Provider>
|
|
||||||
<div className="flex flex-col items-center gap-3">
|
|
||||||
<div className="h-4 w-px bg-blue-500" />
|
|
||||||
<h3 className="font-semibold capitalize">{t("activity.repost")}</h3>
|
|
||||||
<div className="h-4 w-px bg-blue-500" />
|
|
||||||
</div>
|
|
||||||
<ActivityRootNote eventId={repostId} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
import { Note, useArk } from "@lume/ark";
|
|
||||||
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { ActivityRootNote } from "./rootNote";
|
|
||||||
|
|
||||||
export function ActivitySingleText({ event }: { event: NDKEvent }) {
|
|
||||||
const ark = useArk();
|
|
||||||
const thread = ark.getEventThread({
|
|
||||||
content: event.content,
|
|
||||||
tags: event.tags,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="h-full w-full flex flex-col justify-between">
|
|
||||||
<div className="h-14 border-b border-neutral-100 dark:border-neutral-900 flex flex-col items-center justify-center px-3">
|
|
||||||
<h3 className="text-center font-semibold leading-tight">
|
|
||||||
{t("activity.conversation")}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-blue-500 font-medium leading-tight">
|
|
||||||
{t("activity.conversationSubtitle")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="overflow-y-auto">
|
|
||||||
<div className="max-w-xl mx-auto py-6">
|
|
||||||
{thread ? (
|
|
||||||
<div className="flex flex-col gap-3 mb-1">
|
|
||||||
{thread.rootEventId ? (
|
|
||||||
<ActivityRootNote eventId={thread.rootEventId} />
|
|
||||||
) : null}
|
|
||||||
{thread.replyEventId ? (
|
|
||||||
<ActivityRootNote eventId={thread.replyEventId} />
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<div className="mt-3 flex flex-col gap-3">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<p className="text-teal-500 font-medium">
|
|
||||||
{t("activity.newReply")}
|
|
||||||
</p>
|
|
||||||
<div className="flex-1 h-px bg-teal-300" />
|
|
||||||
<div className="w-4 shrink-0 h-px bg-teal-300" />
|
|
||||||
</div>
|
|
||||||
<Note.Provider event={event}>
|
|
||||||
<Note.Root>
|
|
||||||
<div className="flex items-center justify-between px-3 h-14">
|
|
||||||
<Note.User className="flex-1 pr-1" />
|
|
||||||
</div>
|
|
||||||
<Note.Content className="min-w-0 px-3" />
|
|
||||||
<div className="flex items-center justify-between px-3 h-14">
|
|
||||||
<Note.Pin />
|
|
||||||
<div className="inline-flex items-center gap-10" />
|
|
||||||
</div>
|
|
||||||
</Note.Root>
|
|
||||||
</Note.Provider>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import { User } from "@lume/ark";
|
|
||||||
import { compactNumber } from "@lume/utils";
|
|
||||||
import { NDKEvent, zapInvoiceFromEvent } from "@nostr-dev-kit/ndk";
|
|
||||||
import { ActivityRootNote } from "./rootNote";
|
|
||||||
|
|
||||||
export function ActivitySingleZap({ event }: { event: NDKEvent }) {
|
|
||||||
const zapEventId = event.tags.find((el) => el[0] === "e")[1];
|
|
||||||
const invoice = zapInvoiceFromEvent(event);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="h-full w-full flex flex-col justify-between">
|
|
||||||
<div className="h-14 border-b border-neutral-100 dark:border-neutral-900 flex flex-col items-center justify-center px-3">
|
|
||||||
<h3 className="text-center font-semibold leading-tight">
|
|
||||||
Conversation
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-blue-500 font-medium leading-tight">
|
|
||||||
@ Someone has replied to your note
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-h-0">
|
|
||||||
<div className="max-w-xl mx-auto py-6 flex flex-col items-center gap-6">
|
|
||||||
<User.Provider pubkey={event.pubkey}>
|
|
||||||
<User.Root>
|
|
||||||
<User.Avatar className="size-10 shrink-0 rounded-lg object-cover" />
|
|
||||||
</User.Root>
|
|
||||||
</User.Provider>
|
|
||||||
<div className="flex flex-col items-center gap-3">
|
|
||||||
<div className="h-4 w-px bg-blue-500" />
|
|
||||||
<h3 className="font-semibold">
|
|
||||||
Zap you {compactNumber.format(invoice.amount)} sats for
|
|
||||||
</h3>
|
|
||||||
<div className="h-4 w-px bg-blue-500" />
|
|
||||||
</div>
|
|
||||||
<ActivityRootNote eventId={zapEventId} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import { useEvent } from "@lume/ark";
|
|
||||||
import { LoaderIcon } from "@lume/icons";
|
|
||||||
import { NDKKind } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import { ActivitySingleRepost } from "./components/singleRepost";
|
|
||||||
import { ActivitySingleText } from "./components/singleText";
|
|
||||||
import { ActivitySingleZap } from "./components/singleZap";
|
|
||||||
|
|
||||||
export function ActivityIdScreen() {
|
|
||||||
const { id } = useParams();
|
|
||||||
const { isLoading, data } = useEvent(id);
|
|
||||||
|
|
||||||
if (isLoading || !data) {
|
|
||||||
return (
|
|
||||||
<div className="w-full h-full flex items-center justify-center">
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.kind === NDKKind.Text) return <ActivitySingleText event={data} />;
|
|
||||||
if (data.kind === NDKKind.Zap) return <ActivitySingleZap event={data} />;
|
|
||||||
if (data.kind === NDKKind.Repost)
|
|
||||||
return <ActivitySingleRepost event={data} />;
|
|
||||||
|
|
||||||
return <ActivitySingleText event={data} />;
|
|
||||||
}
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import { activityUnreadAtom } from "@lume/utils";
|
|
||||||
import { useSetAtom } from "jotai";
|
|
||||||
import { useEffect } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Outlet } from "react-router-dom";
|
|
||||||
import { ActivityList } from "./components/list";
|
|
||||||
|
|
||||||
export function ActivityScreen() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const setUnreadActivity = useSetAtom(activityUnreadAtom);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setUnreadActivity(0);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-full w-full rounded-xl shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:shadow-none dark:ring-1 dark:ring-white/10">
|
|
||||||
<div className="h-full flex flex-col w-96 shrink-0 rounded-l-xl bg-white/50 backdrop-blur-xl dark:bg-black/50">
|
|
||||||
<div className="h-14 shrink-0 flex items-center px-5 text-lg font-semibold border-b border-black/10 dark:border-white/10">
|
|
||||||
{t("activity.title")}
|
|
||||||
</div>
|
|
||||||
<ActivityList />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 rounded-r-xl bg-white pb-20 dark:bg-black">
|
|
||||||
<Outlet />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,264 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { CheckIcon, ChevronDownIcon, LoaderIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { onboardingAtom } from "@lume/utils";
|
|
||||||
import NDK, {
|
|
||||||
NDKEvent,
|
|
||||||
NDKKind,
|
|
||||||
NDKNip46Signer,
|
|
||||||
NDKPrivateKeySigner,
|
|
||||||
} from "@nostr-dev-kit/ndk";
|
|
||||||
import * as Select from "@radix-ui/react-select";
|
|
||||||
import { UnlistenFn } from "@tauri-apps/api/event";
|
|
||||||
import { Window } from "@tauri-apps/api/window";
|
|
||||||
import { useSetAtom } from "jotai";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { useLoaderData, useNavigate } from "react-router-dom";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
const Item = ({ event }: { event: NDKEvent }) => {
|
|
||||||
const domain = JSON.parse(event.content).nip05.replace("_@", "");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Select.Item
|
|
||||||
value={event.id}
|
|
||||||
className="relative flex items-center pr-10 leading-none rounded-md select-none text-neutral-100 rounded-mg h-9 pl-7"
|
|
||||||
>
|
|
||||||
<Select.ItemText>@{domain}</Select.ItemText>
|
|
||||||
<Select.ItemIndicator className="absolute left-0 inline-flex items-center justify-center transform h-7">
|
|
||||||
<CheckIcon className="size-4" />
|
|
||||||
</Select.ItemIndicator>
|
|
||||||
</Select.Item>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export function CreateAccountAddress() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
const services = useLoaderData() as NDKEvent[];
|
|
||||||
const setOnboarding = useSetAtom(onboardingAtom);
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [serviceId, setServiceId] = useState(services?.[0]?.id);
|
|
||||||
const [loading, setIsLoading] = useState(false);
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { isValid },
|
|
||||||
} = useForm();
|
|
||||||
|
|
||||||
const getDomainName = (id: string) => {
|
|
||||||
const event = services.find((ev) => ev.id === id);
|
|
||||||
return JSON.parse(event.content).nip05.replace("_@", "") as string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = async (data: { username: string; email: string }) => {
|
|
||||||
try {
|
|
||||||
setIsLoading(true);
|
|
||||||
|
|
||||||
const domain = getDomainName(serviceId);
|
|
||||||
const service = services.find((ev) => ev.id === serviceId);
|
|
||||||
|
|
||||||
// generate ndk for nsecbunker
|
|
||||||
const localSigner = NDKPrivateKeySigner.generate();
|
|
||||||
const bunker = new NDK({
|
|
||||||
explicitRelayUrls: [
|
|
||||||
"wss://relay.nsecbunker.com/",
|
|
||||||
"wss://nostr.vulpem.com/",
|
|
||||||
],
|
|
||||||
});
|
|
||||||
await bunker.connect(2000);
|
|
||||||
|
|
||||||
// generate tmp remote singer for create account
|
|
||||||
const remoteSigner = new NDKNip46Signer(
|
|
||||||
bunker,
|
|
||||||
service.pubkey,
|
|
||||||
localSigner,
|
|
||||||
);
|
|
||||||
|
|
||||||
// handle auth url request
|
|
||||||
let unlisten: UnlistenFn;
|
|
||||||
let authWindow: Window;
|
|
||||||
let account: string = undefined;
|
|
||||||
|
|
||||||
remoteSigner.addListener("authUrl", async (authUrl: string) => {
|
|
||||||
authWindow = new Window(`auth-${serviceId}`, {
|
|
||||||
url: authUrl,
|
|
||||||
title: domain,
|
|
||||||
titleBarStyle: "overlay",
|
|
||||||
width: 600,
|
|
||||||
height: 650,
|
|
||||||
center: true,
|
|
||||||
closable: false,
|
|
||||||
});
|
|
||||||
unlisten = await authWindow.onCloseRequested(() => {
|
|
||||||
if (!account) {
|
|
||||||
setIsLoading(false);
|
|
||||||
unlisten();
|
|
||||||
|
|
||||||
return authWindow.close();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// create new account
|
|
||||||
account = await remoteSigner.createAccount(
|
|
||||||
data.username,
|
|
||||||
domain,
|
|
||||||
data.email,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!account) {
|
|
||||||
unlisten();
|
|
||||||
setIsLoading(false);
|
|
||||||
|
|
||||||
authWindow.close();
|
|
||||||
|
|
||||||
return toast.error("Failed to create new account, try again later");
|
|
||||||
}
|
|
||||||
|
|
||||||
unlisten();
|
|
||||||
authWindow.close();
|
|
||||||
|
|
||||||
// add account to storage
|
|
||||||
await storage.createSetting("nsecbunker", "1");
|
|
||||||
const newAccount = await storage.createAccount({
|
|
||||||
pubkey: account,
|
|
||||||
privkey: localSigner.privateKey,
|
|
||||||
});
|
|
||||||
ark.account = newAccount;
|
|
||||||
|
|
||||||
// get final signer with newly created account
|
|
||||||
const finalSigner = new NDKNip46Signer(bunker, account, localSigner);
|
|
||||||
await finalSigner.blockUntilReady();
|
|
||||||
|
|
||||||
// update main ndk instance signer
|
|
||||||
ark.updateNostrSigner({ signer: finalSigner });
|
|
||||||
|
|
||||||
// remove default nsecbunker profile and contact list
|
|
||||||
// await ark.createEvent({ kind: NDKKind.Metadata, content: "", tags: [] });
|
|
||||||
await ark.createEvent({ kind: NDKKind.Contacts, content: "", tags: [] });
|
|
||||||
|
|
||||||
setIsLoading(false);
|
|
||||||
setOnboarding({ open: true, newUser: true });
|
|
||||||
|
|
||||||
return navigate("/auth/onboarding", { replace: true });
|
|
||||||
} catch (e) {
|
|
||||||
setIsLoading(false);
|
|
||||||
toast.error(String(e));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex items-center justify-center w-full h-full">
|
|
||||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
|
||||||
<div className="flex flex-col gap-1 text-center items-center">
|
|
||||||
<h1 className="text-2xl font-semibold">
|
|
||||||
{t("signupWithProvider.title")}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
{!services ? (
|
|
||||||
<div className="flex items-center justify-center w-full">
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
|
||||||
className="flex flex-col gap-3 mb-0"
|
|
||||||
>
|
|
||||||
<div className="flex flex-col gap-6 p-5 bg-neutral-950 rounded-2xl">
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<label
|
|
||||||
htmlFor="username"
|
|
||||||
className="text-sm font-semibold uppercase text-neutral-600"
|
|
||||||
>
|
|
||||||
{t("signupWithProvider.username")}
|
|
||||||
</label>
|
|
||||||
<div className="flex flex-col gap-1.5">
|
|
||||||
<div className="flex items-center justify-between w-full gap-2 bg-neutral-900 rounded-xl">
|
|
||||||
<input
|
|
||||||
type={"text"}
|
|
||||||
{...register("username", {
|
|
||||||
required: true,
|
|
||||||
minLength: 1,
|
|
||||||
})}
|
|
||||||
spellCheck={false}
|
|
||||||
autoComplete="off"
|
|
||||||
autoCorrect="off"
|
|
||||||
autoCapitalize="off"
|
|
||||||
placeholder="alice"
|
|
||||||
className="flex-1 min-w-0 text-xl bg-transparent border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-14 ring-0 placeholder:text-neutral-600"
|
|
||||||
/>
|
|
||||||
<Select.Root value={serviceId} onValueChange={setServiceId}>
|
|
||||||
<Select.Trigger className="inline-flex items-center justify-end gap-2 pr-3 text-xl font-semibold text-blue-500 w-max shrink-0">
|
|
||||||
<Select.Value>@{getDomainName(serviceId)}</Select.Value>
|
|
||||||
<Select.Icon>
|
|
||||||
<ChevronDownIcon className="size-5" />
|
|
||||||
</Select.Icon>
|
|
||||||
</Select.Trigger>
|
|
||||||
<Select.Portal>
|
|
||||||
<Select.Content className="rounded-lg border border-white/20 bg-white/10 backdrop-blur-xl">
|
|
||||||
<Select.Viewport className="p-3">
|
|
||||||
<Select.Group>
|
|
||||||
<Select.Label className="mb-2 text-sm font-medium uppercase px-7 text-neutral-600">
|
|
||||||
{t("signupWithProvider.chooseProvider")}
|
|
||||||
</Select.Label>
|
|
||||||
{services.map((service) => (
|
|
||||||
<Item key={service.id} event={service} />
|
|
||||||
))}
|
|
||||||
</Select.Group>
|
|
||||||
</Select.Viewport>
|
|
||||||
</Select.Content>
|
|
||||||
</Select.Portal>
|
|
||||||
</Select.Root>
|
|
||||||
</div>
|
|
||||||
<span className="text-sm text-neutral-600">
|
|
||||||
{t("signupWithProvider.usernameFooter")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1.5">
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<label
|
|
||||||
htmlFor="email"
|
|
||||||
className="text-sm font-semibold uppercase text-neutral-600"
|
|
||||||
>
|
|
||||||
{t("signupWithProvider.email")}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type={"email"}
|
|
||||||
{...register("email", { required: false })}
|
|
||||||
spellCheck={false}
|
|
||||||
autoCapitalize="none"
|
|
||||||
autoCorrect="none"
|
|
||||||
className="px-3 text-xl border-transparent rounded-xl h-14 bg-neutral-900 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span className="text-sm text-neutral-600">
|
|
||||||
{t("signupWithProvider.emailFooter")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={!isValid}
|
|
||||||
className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
) : (
|
|
||||||
t("global.continue")
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,169 +0,0 @@
|
|||||||
import { CheckIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
|
|
||||||
import { Keys } from "@lume/types";
|
|
||||||
import { onboardingAtom } from "@lume/utils";
|
|
||||||
import * as Checkbox from "@radix-ui/react-checkbox";
|
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
|
||||||
import { desktopDir } from "@tauri-apps/api/path";
|
|
||||||
import { save } from "@tauri-apps/plugin-dialog";
|
|
||||||
import { writeTextFile } from "@tauri-apps/plugin-fs";
|
|
||||||
import { useSetAtom } from "jotai";
|
|
||||||
import { nanoid } from "nanoid";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function CreateAccountKeys() {
|
|
||||||
const setOnboarding = useSetAtom(onboardingAtom);
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [t] = useTranslation();
|
|
||||||
const [key, setKey] = useState("");
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [showKey, setShowKey] = useState(false);
|
|
||||||
const [confirm, setConfirm] = useState({ c1: false, c2: false, c3: false });
|
|
||||||
|
|
||||||
const submit = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
// trigger save key
|
|
||||||
const save = await invoke("save_key", { nsec: key });
|
|
||||||
|
|
||||||
if (!save) {
|
|
||||||
setLoading(false);
|
|
||||||
toast.error("Save account keys failed, please try again later.");
|
|
||||||
}
|
|
||||||
|
|
||||||
// update state
|
|
||||||
setLoading(false);
|
|
||||||
setOnboarding({ open: true, newUser: true });
|
|
||||||
|
|
||||||
// redirect to next step
|
|
||||||
return navigate("/auth/onboarding", { replace: true });
|
|
||||||
} catch (e) {
|
|
||||||
setLoading(false);
|
|
||||||
toast.error(String(e));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function createAccountKeys() {
|
|
||||||
const keys: Keys = await invoke("create_keys");
|
|
||||||
setKey(keys.nsec);
|
|
||||||
}
|
|
||||||
createAccountKeys();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex items-center justify-center w-full h-full">
|
|
||||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
|
||||||
<div className="flex flex-col gap-1 text-center items-center">
|
|
||||||
<h1 className="text-2xl font-semibold">
|
|
||||||
{t("signupWithSelfManage.title")}
|
|
||||||
</h1>
|
|
||||||
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
|
|
||||||
{t("signupWithSelfManage.subtitle")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-6 mb-0">
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
readOnly
|
|
||||||
value={key}
|
|
||||||
type={showKey ? "text" : "password"}
|
|
||||||
className="pl-3 pr-14 w-full resize-none text-xl border-transparent rounded-xl h-14 bg-neutral-900 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowKey((state) => !state)}
|
|
||||||
className="absolute right-2 top-2 size-10 inline-flex items-center justify-center rounded-lg text-white bg-neutral-800 hover:bg-neutral-700"
|
|
||||||
>
|
|
||||||
{showKey ? (
|
|
||||||
<EyeOnIcon className="size-5" />
|
|
||||||
) : (
|
|
||||||
<EyeOffIcon className="size-5" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Checkbox.Root
|
|
||||||
checked={confirm.c1}
|
|
||||||
onCheckedChange={() =>
|
|
||||||
setConfirm((state) => ({ ...state, c1: !state.c1 }))
|
|
||||||
}
|
|
||||||
className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-900 outline-none"
|
|
||||||
id="confirm1"
|
|
||||||
>
|
|
||||||
<Checkbox.Indicator className="text-blue-500">
|
|
||||||
<CheckIcon className="size-4" />
|
|
||||||
</Checkbox.Indicator>
|
|
||||||
</Checkbox.Root>
|
|
||||||
<label
|
|
||||||
className="text-sm leading-none text-neutral-500"
|
|
||||||
htmlFor="confirm1"
|
|
||||||
>
|
|
||||||
{t("signupWithSelfManage.confirm1")}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Checkbox.Root
|
|
||||||
checked={confirm.c2}
|
|
||||||
onCheckedChange={() =>
|
|
||||||
setConfirm((state) => ({ ...state, c2: !state.c2 }))
|
|
||||||
}
|
|
||||||
className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-900 outline-none"
|
|
||||||
id="confirm2"
|
|
||||||
>
|
|
||||||
<Checkbox.Indicator className="text-blue-500">
|
|
||||||
<CheckIcon className="size-4" />
|
|
||||||
</Checkbox.Indicator>
|
|
||||||
</Checkbox.Root>
|
|
||||||
<label
|
|
||||||
className="text-sm leading-none text-neutral-500"
|
|
||||||
htmlFor="confirm2"
|
|
||||||
>
|
|
||||||
{t("signupWithSelfManage.confirm2")}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Checkbox.Root
|
|
||||||
checked={confirm.c3}
|
|
||||||
onCheckedChange={() =>
|
|
||||||
setConfirm((state) => ({ ...state, c3: !state.c3 }))
|
|
||||||
}
|
|
||||||
className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-900 outline-none"
|
|
||||||
id="confirm3"
|
|
||||||
>
|
|
||||||
<Checkbox.Indicator className="text-blue-500">
|
|
||||||
<CheckIcon className="size-4" />
|
|
||||||
</Checkbox.Indicator>
|
|
||||||
</Checkbox.Root>
|
|
||||||
<label
|
|
||||||
className="text-sm leading-none text-neutral-500"
|
|
||||||
htmlFor="confirm3"
|
|
||||||
>
|
|
||||||
{t("signupWithSelfManage.confirm3")}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={submit}
|
|
||||||
disabled={!confirm.c1 || !confirm.c2 || !confirm.c3}
|
|
||||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
) : (
|
|
||||||
t("signupWithSelfManage.button")
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
import { LoaderIcon } from "@lume/icons";
|
|
||||||
import { cn } from "@lume/utils";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
|
|
||||||
export function CreateAccountScreen() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [t] = useTranslation();
|
|
||||||
const [method, setMethod] = useState<"self" | "managed">("self");
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const next = () => {
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
if (method === "self") {
|
|
||||||
navigate("/auth/create-keys");
|
|
||||||
} else {
|
|
||||||
navigate("/auth/create-address");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex items-center justify-center w-full h-full">
|
|
||||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
|
||||||
<div className="flex flex-col gap-1 text-center items-center">
|
|
||||||
<h1 className="text-2xl font-semibold">{t("signup.title")}</h1>
|
|
||||||
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
|
|
||||||
{t("signup.subtitle")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setMethod("self")}
|
|
||||||
className={cn(
|
|
||||||
"flex flex-col items-start px-4 py-3.5 bg-neutral-900 rounded-xl hover:bg-neutral-800",
|
|
||||||
method === "self"
|
|
||||||
? "ring-1 ring-offset-4 ring-offset-black ring-blue-500"
|
|
||||||
: "",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<p className="font-semibold">{t("signup.selfManageMethod")}</p>
|
|
||||||
<p className="text-sm font-medium text-neutral-500">
|
|
||||||
{t("signup.selfManageMethodDescription")}
|
|
||||||
</p>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setMethod("managed")}
|
|
||||||
className={cn(
|
|
||||||
"flex flex-col items-start px-4 py-3.5 bg-neutral-900 rounded-xl hover:bg-neutral-800",
|
|
||||||
method === "managed"
|
|
||||||
? "ring-1 ring-offset-4 ring-offset-black ring-blue-500"
|
|
||||||
: "",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="inline-flex items-center gap-2">
|
|
||||||
<p className="font-semibold">{t("signup.providerMethod")}</p>
|
|
||||||
<span className="text-xs font-medium px-2.5 py-0.5 rounded-full bg-gradient-to-tr from-blue-300 via-sky-500 to-teal-200">
|
|
||||||
Beta
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm font-medium text-neutral-500">
|
|
||||||
{t("signup.providerMethodDescription")}
|
|
||||||
</p>
|
|
||||||
</button>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={next}
|
|
||||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
) : (
|
|
||||||
t("global.continue")
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
{method === "managed" ? (
|
|
||||||
<div className="flex flex-col gap-1 text-sm text-neutral-500">
|
|
||||||
<p className="text-sm font-semibold text-neutral-300">
|
|
||||||
Attention:
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
You're chosing Managed by Provider, this feature still in
|
|
||||||
"Beta".
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Some functions still missing or not work as expected, you
|
|
||||||
shouldn't create your main account with this method
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href="https://github.com/kind-0/nsecbunkerd/blob/master/OAUTH-LIKE-FLOW.md"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="text-blue-500"
|
|
||||||
>
|
|
||||||
Learn more
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,120 +0,0 @@
|
|||||||
import { EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { Trans, useTranslation } from "react-i18next";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function LoginWithKey() {
|
|
||||||
const storage = useStorage();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [showKey, setShowKey] = useState(false);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const { t } = useTranslation("loginWithPrivkey.subtitle");
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
setError,
|
|
||||||
formState: { errors, isValid },
|
|
||||||
} = useForm();
|
|
||||||
|
|
||||||
const onSubmit = async (data: { nsec: string }) => {
|
|
||||||
try {
|
|
||||||
if (!data.nsec.startsWith("nsec1"))
|
|
||||||
return toast.error("You need to enter a private key start with nsec1");
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
// trigger save key
|
|
||||||
const save = await invoke("save_key", { nsec: data.nsec });
|
|
||||||
|
|
||||||
if (!save) {
|
|
||||||
setLoading(false);
|
|
||||||
toast.error("Save account keys failed, please try again later.");
|
|
||||||
}
|
|
||||||
|
|
||||||
// redirect to next step
|
|
||||||
return navigate("/auth/onboarding", { replace: true });
|
|
||||||
} catch (e) {
|
|
||||||
setLoading(false);
|
|
||||||
setError("nsec", {
|
|
||||||
type: "manual",
|
|
||||||
message: String(e),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex items-center justify-center w-full h-full">
|
|
||||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
|
||||||
<div className="flex flex-col gap-1 text-center items-center">
|
|
||||||
<h1 className="text-2xl font-semibold">
|
|
||||||
{t("loginWithPrivkey.title")}
|
|
||||||
</h1>
|
|
||||||
<p className="text-lg font-medium whitespace-pre-line leading-snug text-neutral-600 dark:text-neutral-500">
|
|
||||||
<Trans t={t}>
|
|
||||||
Lume will put your private key to{" "}
|
|
||||||
<span className="text-teal-500">
|
|
||||||
{storage.platform === "macos"
|
|
||||||
? "Apple Keychain"
|
|
||||||
: storage.platform === "windows"
|
|
||||||
? "Credential Manager"
|
|
||||||
: "Secret Service"}
|
|
||||||
</span>
|
|
||||||
. It will be secured by your OS.
|
|
||||||
</Trans>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
|
||||||
className="flex flex-col gap-4 mb-0"
|
|
||||||
>
|
|
||||||
<div className="relative flex flex-col gap-1">
|
|
||||||
<input
|
|
||||||
type={showKey ? "text" : "password"}
|
|
||||||
{...register("nsec", { required: false })}
|
|
||||||
spellCheck={false}
|
|
||||||
autoCapitalize="none"
|
|
||||||
autoCorrect="none"
|
|
||||||
placeholder="nsec1..."
|
|
||||||
className="pl-3 pr-11 text-xl border-transparent rounded-xl h-14 bg-neutral-950 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
|
|
||||||
/>
|
|
||||||
{errors.nsec && (
|
|
||||||
<p className="text-sm text-center text-red-600">
|
|
||||||
{errors.nsec.message as string}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowKey((state) => !state)}
|
|
||||||
className="absolute right-2 top-2 size-10 inline-flex items-center justify-center rounded-lg text-white bg-neutral-900 hover:bg-neutral-800"
|
|
||||||
>
|
|
||||||
{showKey ? (
|
|
||||||
<EyeOnIcon className="size-5" />
|
|
||||||
) : (
|
|
||||||
<EyeOffIcon className="size-5" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={!isValid || loading}
|
|
||||||
className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
) : (
|
|
||||||
t("global.continue")
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,114 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { LoaderIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
|
|
||||||
import { nip19 } from "nostr-tools";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function LoginWithNsecbunker() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
setError,
|
|
||||||
formState: { errors, isValid },
|
|
||||||
} = useForm();
|
|
||||||
|
|
||||||
const onSubmit = async (data: { npub: string }) => {
|
|
||||||
try {
|
|
||||||
if (!data.npub.startsWith("npub1"))
|
|
||||||
return toast.info("You need to enter a token start with npub1");
|
|
||||||
|
|
||||||
if (!data.npub.includes("#"))
|
|
||||||
return toast.info("Token must include #secret");
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
const bunker = new NDK({
|
|
||||||
explicitRelayUrls: [
|
|
||||||
"wss://relay.nsecbunker.com",
|
|
||||||
"wss://nostr.vulpem.com",
|
|
||||||
],
|
|
||||||
});
|
|
||||||
await bunker.connect(2000);
|
|
||||||
|
|
||||||
const pubkey = nip19.decode(data.npub.split("#")[0]).data as string;
|
|
||||||
const localSigner = NDKPrivateKeySigner.generate();
|
|
||||||
const remoteSigner = new NDKNip46Signer(bunker, data.npub, localSigner);
|
|
||||||
await remoteSigner.blockUntilReady();
|
|
||||||
|
|
||||||
ark.updateNostrSigner({ signer: remoteSigner });
|
|
||||||
|
|
||||||
await storage.createSetting("nsecbunker", "1");
|
|
||||||
const account = await storage.createAccount({
|
|
||||||
pubkey: pubkey,
|
|
||||||
privkey: localSigner.privateKey,
|
|
||||||
});
|
|
||||||
ark.account = account;
|
|
||||||
|
|
||||||
return navigate("/auth/onboarding", { replace: true });
|
|
||||||
} catch (e) {
|
|
||||||
setLoading(false);
|
|
||||||
setError("npub", {
|
|
||||||
type: "manual",
|
|
||||||
message: String(e),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex items-center justify-center w-full h-full">
|
|
||||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
|
||||||
<div className="flex flex-col gap-1 text-center items-center">
|
|
||||||
<h1 className="text-2xl font-semibold">
|
|
||||||
{t("loginWithBunker.title")}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
|
||||||
className="flex flex-col gap-4 mb-0"
|
|
||||||
>
|
|
||||||
<div className="relative flex flex-col gap-1">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
{...register("npub", { required: false })}
|
|
||||||
spellCheck={false}
|
|
||||||
autoCapitalize="none"
|
|
||||||
autoCorrect="none"
|
|
||||||
placeholder="npub1...#..."
|
|
||||||
className="px-3 text-xl border-transparent rounded-xl h-14 bg-neutral-950 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
|
|
||||||
/>
|
|
||||||
{errors.npub && (
|
|
||||||
<p className="text-sm text-center text-red-600">
|
|
||||||
{errors.npub.message as string}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={!isValid || loading}
|
|
||||||
className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
) : (
|
|
||||||
t("global.continue")
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { LoaderIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { NIP05 } from "@lume/types";
|
|
||||||
import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
|
|
||||||
import { Window } from "@tauri-apps/api/window";
|
|
||||||
import { fetch } from "@tauri-apps/plugin-http";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
|
|
||||||
|
|
||||||
export function LoginWithOAuth() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
setError,
|
|
||||||
formState: { errors, isValid },
|
|
||||||
} = useForm();
|
|
||||||
|
|
||||||
const onSubmit = async (data: { nip05: string }) => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
if (!emailRegex.test(data.nip05)) {
|
|
||||||
setLoading(false);
|
|
||||||
return toast.error(
|
|
||||||
"Cannot verify your NIP-05 address, please try again later.",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const localPath = data.nip05.split("@")[0];
|
|
||||||
const service = data.nip05.split("@")[1];
|
|
||||||
|
|
||||||
const verifyURL = `https://${service}/.well-known/nostr.json?name=${localPath}`;
|
|
||||||
|
|
||||||
const req = await fetch(verifyURL, {
|
|
||||||
method: "GET",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json; charset=utf-8",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!req.ok) {
|
|
||||||
setLoading(false);
|
|
||||||
return toast.error(
|
|
||||||
"Cannot verify your NIP-05 address, please try again later.",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const res: NIP05 = await req.json();
|
|
||||||
|
|
||||||
if (!res.names[localPath.toLowerCase()] || !res.names[localPath]) {
|
|
||||||
setLoading(false);
|
|
||||||
return toast.error(
|
|
||||||
"Cannot verify your NIP-05 address, please try again later.",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const pubkey =
|
|
||||||
(res.names[localPath] as string) ||
|
|
||||||
(res.names[localPath.toLowerCase()] as string);
|
|
||||||
|
|
||||||
if (!res.nip46[pubkey]) {
|
|
||||||
setLoading(false);
|
|
||||||
return toast.error("Cannot found NIP-46 with this address");
|
|
||||||
}
|
|
||||||
|
|
||||||
const nip46Relays = res.nip46[pubkey] as unknown as string[];
|
|
||||||
|
|
||||||
const bunker = new NDK({
|
|
||||||
explicitRelayUrls: nip46Relays || [
|
|
||||||
"wss://relay.nsecbunker.com",
|
|
||||||
"wss://nostr.vulpem.com",
|
|
||||||
],
|
|
||||||
});
|
|
||||||
await bunker.connect(2000);
|
|
||||||
|
|
||||||
const localSigner = NDKPrivateKeySigner.generate();
|
|
||||||
const remoteSigner = new NDKNip46Signer(bunker, pubkey, localSigner);
|
|
||||||
|
|
||||||
// handle auth url request
|
|
||||||
let authWindow: Window;
|
|
||||||
remoteSigner.addListener("authUrl", (authUrl: string) => {
|
|
||||||
authWindow = new Window(`auth-${pubkey}`, {
|
|
||||||
url: authUrl,
|
|
||||||
title: "Login",
|
|
||||||
titleBarStyle: "overlay",
|
|
||||||
width: 415,
|
|
||||||
height: 600,
|
|
||||||
center: true,
|
|
||||||
closable: false,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const remoteUser = await remoteSigner.blockUntilReady();
|
|
||||||
|
|
||||||
if (remoteUser) {
|
|
||||||
authWindow.close();
|
|
||||||
|
|
||||||
ark.updateNostrSigner({ signer: remoteSigner });
|
|
||||||
|
|
||||||
await storage.createSetting("nsecbunker", "1");
|
|
||||||
const account = await storage.createAccount({
|
|
||||||
pubkey,
|
|
||||||
privkey: localSigner.privateKey,
|
|
||||||
});
|
|
||||||
ark.account = account;
|
|
||||||
|
|
||||||
return navigate("/auth/onboarding", { replace: true });
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
setLoading(false);
|
|
||||||
setError("nip05", {
|
|
||||||
type: "manual",
|
|
||||||
message: String(e),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex items-center justify-center w-full h-full">
|
|
||||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
|
||||||
<div className="flex flex-col gap-1 text-center items-center">
|
|
||||||
<h1 className="text-2xl font-semibold">
|
|
||||||
{t("loginWithAddress.title")}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
|
||||||
className="flex flex-col gap-4 mb-0"
|
|
||||||
>
|
|
||||||
<div className="relative flex flex-col gap-1">
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
{...register("nip05", { required: false })}
|
|
||||||
spellCheck={false}
|
|
||||||
autoCapitalize="none"
|
|
||||||
autoCorrect="none"
|
|
||||||
placeholder="satoshi@nostr.me"
|
|
||||||
className="px-3 text-xl border-transparent rounded-xl h-14 bg-neutral-950 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
|
|
||||||
/>
|
|
||||||
{errors.nip05 && (
|
|
||||||
<p className="text-sm text-center text-red-600">
|
|
||||||
{errors.nip05.message as string}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={!isValid || loading}
|
|
||||||
className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
) : (
|
|
||||||
t("global.continue")
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
export function LoginScreen() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex items-center justify-center w-full h-full">
|
|
||||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
|
||||||
<div className="flex flex-col gap-1 text-center items-center">
|
|
||||||
<h1 className="text-2xl font-semibold">{t("login.title")}</h1>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<Link
|
|
||||||
to="/auth/login-oauth"
|
|
||||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
{t("login.loginWithAddress")}
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/auth/login-nsecbunker"
|
|
||||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
|
|
||||||
>
|
|
||||||
{t("login.loginWithBunker")}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<div className="relative">
|
|
||||||
<div className="absolute inset-0 flex items-center">
|
|
||||||
<div className="w-full border-t border-neutral-900" />
|
|
||||||
</div>
|
|
||||||
<div className="relative flex justify-center">
|
|
||||||
<span className="px-2 font-medium bg-black text-neutral-600">
|
|
||||||
{t("login.or")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Link
|
|
||||||
to="/auth/login-key"
|
|
||||||
className="mb-2 inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
|
|
||||||
>
|
|
||||||
{t("login.loginWithPrivkey")}
|
|
||||||
</Link>
|
|
||||||
<p className="text-sm text-center text-neutral-500">
|
|
||||||
{t("login.footer")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,198 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { InfoIcon, LoaderIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { TranslateRegisterModal } from "@lume/ui";
|
|
||||||
import * as Switch from "@radix-ui/react-switch";
|
|
||||||
import {
|
|
||||||
isPermissionGranted,
|
|
||||||
requestPermission,
|
|
||||||
} from "@tauri-apps/plugin-notification";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function OnboardingScreen() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [t] = useTranslation();
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [apiKey, setAPIKey] = useState("");
|
|
||||||
const [settings, setSettings] = useState({
|
|
||||||
notification: false,
|
|
||||||
lowPower: false,
|
|
||||||
translation: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const toggleLowPower = async () => {
|
|
||||||
await storage.createSetting("lowPower", String(+!settings.lowPower));
|
|
||||||
setSettings((state) => ({ ...state, lowPower: !settings.lowPower }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleTranslation = async () => {
|
|
||||||
await storage.createSetting("translation", String(+!settings.translation));
|
|
||||||
setSettings((state) => ({ ...state, translation: !settings.translation }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleNofitication = async () => {
|
|
||||||
await requestPermission();
|
|
||||||
setSettings((state) => ({
|
|
||||||
...state,
|
|
||||||
notification: !settings.notification,
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const completeAuth = async () => {
|
|
||||||
if (settings.translation) {
|
|
||||||
if (!apiKey.length)
|
|
||||||
return toast.warning(
|
|
||||||
"You need to provide Translate API if enable translation",
|
|
||||||
);
|
|
||||||
|
|
||||||
await storage.createSetting("translateApiKey", apiKey);
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
// get account contacts
|
|
||||||
await ark.getUserContacts();
|
|
||||||
|
|
||||||
navigate("/", { replace: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadSettings() {
|
|
||||||
// get notification permission
|
|
||||||
const permissionGranted = await isPermissionGranted();
|
|
||||||
setSettings((prev) => ({ ...prev, notification: permissionGranted }));
|
|
||||||
|
|
||||||
// get other settings
|
|
||||||
const data = await storage.settings();
|
|
||||||
for (const item of data) {
|
|
||||||
if (item.key === "lowPower")
|
|
||||||
setSettings((prev) => ({
|
|
||||||
...prev,
|
|
||||||
lowPower: !!parseInt(item.value),
|
|
||||||
}));
|
|
||||||
|
|
||||||
if (item.key === "translation")
|
|
||||||
setSettings((prev) => ({
|
|
||||||
...prev,
|
|
||||||
translation: !!parseInt(item.value),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
loadSettings();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex h-full w-full items-center justify-center">
|
|
||||||
<div className="mx-auto flex w-full max-w-md flex-col gap-8">
|
|
||||||
<div className="flex flex-col gap-1 text-center items-center">
|
|
||||||
<h1 className="text-2xl font-semibold">
|
|
||||||
{t("onboardingSettings.title")}
|
|
||||||
</h1>
|
|
||||||
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
|
|
||||||
{t("onboardingSettings.subtitle")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.notification}
|
|
||||||
onClick={() => toggleNofitication()}
|
|
||||||
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
|
||||||
</Switch.Root>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-lg">
|
|
||||||
{t("onboardingSettings.notification.title")}
|
|
||||||
</h3>
|
|
||||||
<p className="text-neutral-500">
|
|
||||||
{t("onboardingSettings.notification.subtitle")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.lowPower}
|
|
||||||
onClick={() => toggleLowPower()}
|
|
||||||
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
|
||||||
</Switch.Root>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-lg">
|
|
||||||
{t("onboardingSettings.lowPower.title")}
|
|
||||||
</h3>
|
|
||||||
<p className="text-neutral-500">
|
|
||||||
{t("onboardingSettings.lowPower.subtitle")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.translation}
|
|
||||||
onClick={() => toggleTranslation()}
|
|
||||||
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
|
||||||
</Switch.Root>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-lg">
|
|
||||||
{t("onboardingSettings.translation.title")}
|
|
||||||
</h3>
|
|
||||||
<p className="text-neutral-500">
|
|
||||||
{t("onboardingSettings.translation.subtitle")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{settings.translation ? (
|
|
||||||
<div className="flex flex-col w-full items-start justify-between gap-2 rounded-xl px-5 py-4 bg-neutral-950">
|
|
||||||
<h3 className="font-semibold">Translate API Key</h3>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
spellCheck={false}
|
|
||||||
value={apiKey}
|
|
||||||
onChange={(e) => setAPIKey(e.target.value)}
|
|
||||||
className="w-full text-xl border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-11 rounded-lg ring-0 placeholder:text-neutral-600 bg-neutral-900"
|
|
||||||
/>
|
|
||||||
<div className="w-full mt-1">
|
|
||||||
<div className="relative">
|
|
||||||
<div className="absolute inset-0 flex items-center">
|
|
||||||
<div className="w-full border-t border-neutral-900" />
|
|
||||||
</div>
|
|
||||||
<div className="relative flex justify-center">
|
|
||||||
<span className="px-2 text-sm font-medium bg-neutral-950 text-neutral-600">
|
|
||||||
Don't have an API key?
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<TranslateRegisterModal setAPIKey={setAPIKey} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<div className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm bg-blue-950 text-blue-300">
|
|
||||||
<InfoIcon className="size-8" />
|
|
||||||
<p>{t("onboardingSettings.footer")}</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={completeAuth}
|
|
||||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
) : (
|
|
||||||
t("global.continue")
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
export function WelcomeScreen() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-between w-full h-full">
|
|
||||||
<div />
|
|
||||||
<div className="flex flex-col items-center w-full max-w-4xl gap-10 mx-auto">
|
|
||||||
<div className="flex flex-col items-center text-center">
|
|
||||||
<img
|
|
||||||
src="/heading.png"
|
|
||||||
srcSet="/heading@2x.png 2x"
|
|
||||||
alt="lume"
|
|
||||||
className="w-2/3"
|
|
||||||
/>
|
|
||||||
<p className="mt-5 text-lg whitespace-pre-line font-medium leading-snug text-neutral-600 dark:text-neutral-500">
|
|
||||||
{t("welcome.title")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col w-full max-w-xs gap-2 mx-auto">
|
|
||||||
<Link
|
|
||||||
to="/auth/create"
|
|
||||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
{t("welcome.signup")}
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/auth/login"
|
|
||||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
|
|
||||||
>
|
|
||||||
{t("welcome.login")}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-center h-11">
|
|
||||||
<p className="text-neutral-700">
|
|
||||||
{t("welcome.footer")}{" "}
|
|
||||||
<Link
|
|
||||||
to="https://nostr.com"
|
|
||||||
target="_blank"
|
|
||||||
className="text-blue-500"
|
|
||||||
>
|
|
||||||
here
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { LoaderIcon, RunIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { User } from "@lume/ui";
|
|
||||||
import { NDKKind } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function DepotContactCard() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
|
|
||||||
const [status, setStatus] = useState(false);
|
|
||||||
|
|
||||||
const backupContact = async () => {
|
|
||||||
try {
|
|
||||||
setStatus(true);
|
|
||||||
|
|
||||||
const event = await ark.getEventByFilter({
|
|
||||||
filter: {
|
|
||||||
authors: [ark.account.pubkey],
|
|
||||||
kinds: [NDKKind.Contacts],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// broadcast to depot
|
|
||||||
const publish = await event.publish();
|
|
||||||
|
|
||||||
if (publish) {
|
|
||||||
setStatus(false);
|
|
||||||
toast.success("Backup contact list successfully.");
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
setStatus(false);
|
|
||||||
toast.error(String(e));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-56 w-full flex-col gap-2 overflow-hidden rounded-xl bg-neutral-100 p-2 dark:bg-neutral-900">
|
|
||||||
<div className="flex flex-1 items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-800">
|
|
||||||
<div className="isolate flex -space-x-2">
|
|
||||||
{ark.account.contacts?.slice(0, 8).map((item) => (
|
|
||||||
<User key={item} pubkey={item} variant="ministacked" />
|
|
||||||
))}
|
|
||||||
{ark.account.contacts?.length > 8 ? (
|
|
||||||
<div className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-300 text-neutral-900 ring-1 ring-white dark:bg-neutral-700 dark:text-neutral-100 dark:ring-black">
|
|
||||||
<span className="text-[8px] font-medium">
|
|
||||||
+{ark.account.contacts?.length - 8}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="inline-flex shrink-0 items-center justify-between">
|
|
||||||
<div className="text-sm font-medium">Contacts</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={backupContact}
|
|
||||||
className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
{status ? (
|
|
||||||
<LoaderIcon className="size-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<RunIcon className="size-4" />
|
|
||||||
)}
|
|
||||||
Backup
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,151 +0,0 @@
|
|||||||
import { CancelIcon, PlusIcon, UserAddIcon, UserRemoveIcon } from "@lume/icons";
|
|
||||||
import { User } from "@lume/ui";
|
|
||||||
import * as Dialog from "@radix-ui/react-dialog";
|
|
||||||
import { resolveResource, resolve } from "@tauri-apps/api/path";
|
|
||||||
import { readTextFile, writeTextFile } from "@tauri-apps/plugin-fs";
|
|
||||||
import { nip19 } from "nostr-tools";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { parse, stringify } from "smol-toml";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { VITE_FLATPAK_RESOURCE } from "@lume/utils";
|
|
||||||
|
|
||||||
export function DepotMembers() {
|
|
||||||
const [members, setMembers] = useState<Set<string>>(null);
|
|
||||||
const [tmpMembers, setTmpMembers] = useState<Array<string>>([]);
|
|
||||||
const [newMember, setNewMember] = useState("");
|
|
||||||
|
|
||||||
const addMember = async () => {
|
|
||||||
if (!newMember.startsWith("npub1"))
|
|
||||||
return toast.error("You need to enter a valid npub");
|
|
||||||
|
|
||||||
try {
|
|
||||||
const pubkey = nip19.decode(newMember).data as string;
|
|
||||||
setTmpMembers((prev) => [...prev, pubkey]);
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeMember = (member: string) => {
|
|
||||||
setTmpMembers((prev) => prev.filter((item) => item !== member));
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateMembers = async () => {
|
|
||||||
setMembers(new Set(tmpMembers));
|
|
||||||
|
|
||||||
const defaultConfig = VITE_FLATPAK_RESOURCE !== null ? await resolve("/",VITE_FLATPAK_RESOURCE) : await resolveResource("resources/config.toml");
|
|
||||||
const config = await readTextFile(defaultConfig);
|
|
||||||
const configContent = parse(config);
|
|
||||||
|
|
||||||
// biome-ignore lint/complexity/useLiteralKeys: <explanation>
|
|
||||||
configContent.authorization["pubkey_whitelist"] = [...members];
|
|
||||||
|
|
||||||
const newConfig = stringify(configContent);
|
|
||||||
|
|
||||||
return await writeTextFile(defaultConfig, newConfig);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadConfig() {
|
|
||||||
const defaultConfig = VITE_FLATPAK_RESOURCE !== null ? await resolve("/",VITE_FLATPAK_RESOURCE) : await resolveResource("resources/config.toml");
|
|
||||||
const config = await readTextFile(defaultConfig);
|
|
||||||
const configContent = parse(config);
|
|
||||||
setTmpMembers(
|
|
||||||
// biome-ignore lint/complexity/useLiteralKeys: <explanation>
|
|
||||||
Array.from(configContent.authorization["pubkey_whitelist"]),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
loadConfig();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog.Root>
|
|
||||||
<div className="flex items-center justify-between rounded-lg bg-neutral-50 p-5 dark:bg-neutral-950">
|
|
||||||
<div className="flex flex-col items-start">
|
|
||||||
<h3 className="text-lg font-semibold">Members</h3>
|
|
||||||
<p className="text-neutral-700 dark:text-neutral-300">
|
|
||||||
Only allowed users can publish event to your Depot
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="inline-flex items-center gap-2">
|
|
||||||
<div className="isolate flex -space-x-2">
|
|
||||||
{tmpMembers.slice(0, 5).map((item) => (
|
|
||||||
<User key={item} pubkey={item} variant="stacked" />
|
|
||||||
))}
|
|
||||||
{tmpMembers.length > 5 ? (
|
|
||||||
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
|
|
||||||
<span className="text-xs font-medium">
|
|
||||||
+{tmpMembers.length}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
<Dialog.Trigger className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-lg bg-blue-500 px-3 text-white hover:bg-blue-600">
|
|
||||||
<UserAddIcon className="size-4" />
|
|
||||||
Manage
|
|
||||||
</Dialog.Trigger>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Dialog.Portal>
|
|
||||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/10 backdrop-blur-sm dark:bg-black/10" />
|
|
||||||
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
|
||||||
<div className="relative h-min w-full max-w-xl overflow-hidden rounded-xl bg-white dark:bg-black">
|
|
||||||
<div className="inline-flex h-14 w-full shrink-0 items-center justify-between border-b border-neutral-100 px-5 dark:border-neutral-900">
|
|
||||||
<Dialog.Title className="text-center font-semibold">
|
|
||||||
Manage member
|
|
||||||
</Dialog.Title>
|
|
||||||
<div className="inline-flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={updateMembers}
|
|
||||||
className="inline-flex h-8 w-max items-center justify-center rounded-lg bg-blue-500 px-2.5 text-sm font-medium text-white hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
Update
|
|
||||||
</button>
|
|
||||||
<Dialog.Close className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800">
|
|
||||||
<CancelIcon className="size-4" />
|
|
||||||
</Dialog.Close>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="pb-3">
|
|
||||||
<div className="relative mb-2 mt-4 w-full px-5">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
spellCheck={false}
|
|
||||||
value={newMember}
|
|
||||||
onChange={(e) => setNewMember(e.target.value)}
|
|
||||||
placeholder="npub1..."
|
|
||||||
className="h-11 w-full rounded-lg border-transparent bg-neutral-100 pl-3 pr-20 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={addMember}
|
|
||||||
className="absolute right-7 top-1/2 inline-flex h-7 w-max -translate-y-1/2 transform items-center justify-center gap-1 rounded-md bg-neutral-200 px-2.5 text-sm font-medium text-blue-500 hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<PlusIcon className="size-4" />
|
|
||||||
Add
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{tmpMembers.map((member) => (
|
|
||||||
<div
|
|
||||||
key={member}
|
|
||||||
className="group flex items-center justify-between px-5 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-900"
|
|
||||||
>
|
|
||||||
<User pubkey={member} variant="simple" />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => removeMember(member)}
|
|
||||||
className="hidden size-6 items-center justify-center rounded-md bg-neutral-200 group-hover:inline-flex hover:bg-red-200 dark:bg-neutral-800 dark:hover:bg-red-800 dark:hover:text-red-200"
|
|
||||||
>
|
|
||||||
<UserRemoveIcon className="size-4 text-red-500" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Portal>
|
|
||||||
</Dialog.Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { LoaderIcon, RunIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { User } from "@lume/ui";
|
|
||||||
import { NDKKind } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function DepotProfileCard() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
|
|
||||||
const [status, setStatus] = useState(false);
|
|
||||||
|
|
||||||
const backupProfile = async () => {
|
|
||||||
try {
|
|
||||||
setStatus(true);
|
|
||||||
|
|
||||||
const event = await ark.getEventByFilter({
|
|
||||||
filter: {
|
|
||||||
authors: [ark.account.pubkey],
|
|
||||||
kinds: [NDKKind.Metadata],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// broadcast to depot
|
|
||||||
const publish = await event.publish();
|
|
||||||
|
|
||||||
if (publish) {
|
|
||||||
setStatus(false);
|
|
||||||
toast.success("Backup profile successfully.");
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
setStatus(false);
|
|
||||||
toast.error(JSON.stringify(e));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-56 w-full flex-col gap-2 overflow-hidden rounded-xl bg-neutral-100 p-2 dark:bg-neutral-900">
|
|
||||||
<div className="flex flex-1 items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-800">
|
|
||||||
<User pubkey={ark.account.pubkey} variant="simple" />
|
|
||||||
</div>
|
|
||||||
<div className="inline-flex shrink-0 items-center justify-between">
|
|
||||||
<div className="text-sm font-medium">Profile</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={backupProfile}
|
|
||||||
className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
{status ? (
|
|
||||||
<LoaderIcon className="size-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<RunIcon className="size-4" />
|
|
||||||
)}
|
|
||||||
Backup
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { LoaderIcon, RunIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { NDKKind } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function DepotRelaysCard() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
|
|
||||||
const [status, setStatus] = useState(false);
|
|
||||||
const [relaySize, setRelaySize] = useState(0);
|
|
||||||
|
|
||||||
const backupRelays = async () => {
|
|
||||||
try {
|
|
||||||
setStatus(true);
|
|
||||||
|
|
||||||
const event = await ark.getEventByFilter({
|
|
||||||
filter: {
|
|
||||||
authors: [ark.account.pubkey],
|
|
||||||
kinds: [NDKKind.RelayList],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// broadcast to depot
|
|
||||||
const publish = await event.publish();
|
|
||||||
|
|
||||||
if (publish) {
|
|
||||||
setStatus(false);
|
|
||||||
toast.success("Backup profile successfully.");
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
setStatus(false);
|
|
||||||
toast.error(JSON.stringify(e));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadRelays() {
|
|
||||||
const event = await ark.getEventByFilter({
|
|
||||||
filter: {
|
|
||||||
authors: [ark.account.pubkey],
|
|
||||||
kinds: [NDKKind.RelayList],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (event) setRelaySize(event.tags.length);
|
|
||||||
}
|
|
||||||
|
|
||||||
loadRelays();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-56 w-full flex-col gap-2 overflow-hidden rounded-xl bg-neutral-100 p-2 dark:bg-neutral-900">
|
|
||||||
<div className="flex flex-1 items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-800">
|
|
||||||
<p className="text-lg font-semibold">{relaySize} relays</p>
|
|
||||||
</div>
|
|
||||||
<div className="inline-flex shrink-0 items-center justify-between">
|
|
||||||
<div className="text-sm font-medium">Relay List</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={backupRelays}
|
|
||||||
className="inline-flex h-8 w-max items-center justify-center gap-2 rounded-md bg-blue-500 pl-2 pr-3 font-medium text-white shadow shadow-blue-500/50 hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
{status ? (
|
|
||||||
<LoaderIcon className="size-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<RunIcon className="size-4" />
|
|
||||||
)}
|
|
||||||
Backup
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,222 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { ChevronDownIcon, DepotIcon, GossipIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { NDKKind } from "@nostr-dev-kit/ndk";
|
|
||||||
import * as Collapsible from "@radix-ui/react-collapsible";
|
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
|
||||||
import { appConfigDir } from "@tauri-apps/api/path";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { DepotContactCard } from "./components/contact";
|
|
||||||
import { DepotMembers } from "./components/members";
|
|
||||||
import { DepotProfileCard } from "./components/profile";
|
|
||||||
import { DepotRelaysCard } from "./components/relays";
|
|
||||||
|
|
||||||
export function DepotScreen() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
|
|
||||||
const [dataPath, setDataPath] = useState("");
|
|
||||||
const [tunnelUrl, setTunnelUrl] = useState("");
|
|
||||||
|
|
||||||
const openFolder = async () => {
|
|
||||||
await invoke("show_in_folder", {
|
|
||||||
path: `${dataPath}/nostr.db`,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateRelayList = async () => {
|
|
||||||
try {
|
|
||||||
if (tunnelUrl.length < 1)
|
|
||||||
return toast.info("Please enter a valid relay url");
|
|
||||||
if (!tunnelUrl.startsWith("ws"))
|
|
||||||
return toast.info("Please enter a valid relay url");
|
|
||||||
|
|
||||||
const relayUrl = new URL(tunnelUrl.replace(/\s/g, ""));
|
|
||||||
if (!/^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/.test(relayUrl.host)) return;
|
|
||||||
|
|
||||||
const relayEvent = await ark.getEventByFilter({
|
|
||||||
filter: {
|
|
||||||
authors: [ark.account.pubkey],
|
|
||||||
kinds: [NDKKind.RelayList],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
let publish: { id: string; seens: string[] };
|
|
||||||
|
|
||||||
if (!relayEvent) {
|
|
||||||
publish = await ark.createEvent({
|
|
||||||
kind: NDKKind.RelayList,
|
|
||||||
tags: [["r", tunnelUrl, ""]],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const newTags = relayEvent.tags ?? [];
|
|
||||||
newTags.push(["r", tunnelUrl, ""]);
|
|
||||||
|
|
||||||
publish = await ark.createEvent({
|
|
||||||
kind: NDKKind.RelayList,
|
|
||||||
tags: newTags,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (publish) {
|
|
||||||
await storage.createSetting("tunnel_url", tunnelUrl);
|
|
||||||
toast.success("Update relay list successfully.");
|
|
||||||
|
|
||||||
setTunnelUrl("");
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
toast.error("Error");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadConfig() {
|
|
||||||
const appDir = await appConfigDir();
|
|
||||||
setDataPath(appDir);
|
|
||||||
}
|
|
||||||
|
|
||||||
loadConfig();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-full w-full rounded-xl shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
|
|
||||||
<div className="h-full w-72 shrink-0 rounded-l-xl bg-white/50 px-8 pt-8 backdrop-blur-xl dark:bg-black/50">
|
|
||||||
<div className="flex flex-col justify-center gap-4">
|
|
||||||
<div className="size-16 rounded-xl bg-gradient-to-bl from-teal-300 to-teal-600 p-1">
|
|
||||||
<div className="relative inline-flex h-full w-full items-center justify-center overflow-hidden rounded-lg bg-gradient-to-bl from-teal-400 to-teal-700 shadow-sm shadow-white/20">
|
|
||||||
<DepotIcon className="size-8 text-white" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h1 className="text-xl font-semibold">Depot is running</h1>
|
|
||||||
</div>
|
|
||||||
<div className="mt-8 flex flex-col gap-4">
|
|
||||||
<div className="flex flex-col gap-1.5">
|
|
||||||
<div className="text-sm font-medium">Relay URL</div>
|
|
||||||
<div className="inline-flex h-10 w-full select-text items-center rounded-lg bg-black/10 px-3 text-sm backdrop-blur-xl dark:bg-white/10">
|
|
||||||
ws://localhost:6090
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1.5">
|
|
||||||
<div className="text-sm font-medium">Database</div>
|
|
||||||
<div className="inline-flex h-10 w-full items-center gap-2 truncate rounded-lg bg-black/10 p-1 backdrop-blur-xl dark:bg-white/10">
|
|
||||||
<p className="shrink-0 pl-2 text-sm">nostr.db (SQLite)</p>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={openFolder}
|
|
||||||
className="inline-flex h-full w-full items-center justify-center rounded-md bg-white text-sm font-medium shadow hover:bg-blue-500 hover:text-white dark:bg-black"
|
|
||||||
>
|
|
||||||
Open
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 overflow-y-auto rounded-r-xl bg-white pb-20 dark:bg-black">
|
|
||||||
<div className="mb-5 flex h-12 items-center border-b border-neutral-100 px-5 dark:border-neutral-900">
|
|
||||||
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
|
||||||
Actions
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-5 px-5">
|
|
||||||
<Collapsible.Root
|
|
||||||
defaultOpen
|
|
||||||
className="flex flex-col overflow-hidden rounded-xl border border-transparent bg-neutral-50 data-[state=open]:border-blue-500 dark:bg-neutral-950"
|
|
||||||
>
|
|
||||||
<Collapsible.Trigger className="flex h-20 items-center justify-between px-5 hover:bg-neutral-100 dark:hover:bg-neutral-900">
|
|
||||||
<div className="flex flex-col items-start">
|
|
||||||
<h3 className="text-lg font-semibold">Expose</h3>
|
|
||||||
<p className="text-neutral-700 dark:text-neutral-300">
|
|
||||||
Make your Depot visible in the Internet, everyone can connect
|
|
||||||
into it.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<ChevronDownIcon className="size-5 shrink-0" />
|
|
||||||
</Collapsible.Trigger>
|
|
||||||
<Collapsible.Content>
|
|
||||||
<div className="flex w-full flex-col gap-4 p-5">
|
|
||||||
<div>
|
|
||||||
<p className="mb-1 font-medium">ngrok</p>
|
|
||||||
<input
|
|
||||||
readOnly
|
|
||||||
value="ngrok http --domain=<your_domain> 6090"
|
|
||||||
className="h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="mb-1 font-medium">Cloudflare Tunnel</p>
|
|
||||||
<input
|
|
||||||
readOnly
|
|
||||||
value="cloudflared tunnel --url localhost:6090"
|
|
||||||
className="h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="mb-1 font-medium">Local Tunnel</p>
|
|
||||||
<input
|
|
||||||
readOnly
|
|
||||||
value="lt --port 6090"
|
|
||||||
className="h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mt-4 border-t border-neutral-100 pt-4 dark:border-neutral-900">
|
|
||||||
<div className="inline-flex items-center gap-2">
|
|
||||||
<GossipIcon className="size-5 text-blue-500" />
|
|
||||||
<h3 className="mb-1 font-semibold">
|
|
||||||
Support Gossip Model (Recommended)
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full max-w-xl">
|
|
||||||
<p className=" text-balance">
|
|
||||||
By adding to Relay List, other Nostr Client which support
|
|
||||||
Gossip Model will automatically connect to your Depot and
|
|
||||||
improve the discoverability.
|
|
||||||
</p>
|
|
||||||
<div className="mt-2 inline-flex w-full items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={tunnelUrl}
|
|
||||||
onChange={(e) => setTunnelUrl(e.target.value)}
|
|
||||||
spellCheck={false}
|
|
||||||
placeholder="wss://"
|
|
||||||
className="h-10 flex-1 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={updateRelayList}
|
|
||||||
className="inline-flex h-10 w-max shrink-0 items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
Update
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Collapsible.Content>
|
|
||||||
</Collapsible.Root>
|
|
||||||
<Collapsible.Root className="flex flex-col overflow-hidden rounded-xl border border-transparent bg-neutral-50 data-[state=open]:border-blue-500 dark:bg-neutral-950">
|
|
||||||
<Collapsible.Trigger className="flex h-20 items-center justify-between px-5 hover:bg-neutral-100 dark:hover:bg-neutral-900">
|
|
||||||
<div className="flex flex-col items-start">
|
|
||||||
<h3 className="text-lg font-semibold">Backup (Recommended)</h3>
|
|
||||||
<p className="text-neutral-700 dark:text-neutral-300">
|
|
||||||
Backup all your data to Depot, it always live on your machine.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<ChevronDownIcon className="size-5 shrink-0" />
|
|
||||||
</Collapsible.Trigger>
|
|
||||||
<Collapsible.Content>
|
|
||||||
<div className="grid grid-cols-3 gap-4 px-5 py-5">
|
|
||||||
<DepotProfileCard />
|
|
||||||
<DepotContactCard />
|
|
||||||
<DepotRelaysCard />
|
|
||||||
</div>
|
|
||||||
</Collapsible.Content>
|
|
||||||
</Collapsible.Root>
|
|
||||||
<DepotMembers />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { LoaderIcon } from "@lume/icons";
|
|
||||||
import { delay, VITE_FLATPAK_RESOURCE } from "@lume/utils";
|
|
||||||
import { resolve, resolveResource } from "@tauri-apps/api/path";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { readTextFile, writeTextFile } from "@tauri-apps/plugin-fs";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { parse, stringify } from "smol-toml";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function DepotOnboardingScreen() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const launchDepot = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
// get default config
|
|
||||||
const defaultConfig =
|
|
||||||
VITE_FLATPAK_RESOURCE !== null
|
|
||||||
? await resolve("/", VITE_FLATPAK_RESOURCE)
|
|
||||||
: await resolveResource("resources/config.toml");
|
|
||||||
const config = await readTextFile(defaultConfig);
|
|
||||||
const parsedConfig = parse(config);
|
|
||||||
|
|
||||||
// add current user to whitelist
|
|
||||||
// biome-ignore lint/complexity/useLiteralKeys: <explanation>
|
|
||||||
parsedConfig.authorization["pubkey_whitelist"].push(ark.account.pubkey);
|
|
||||||
|
|
||||||
// update new config
|
|
||||||
const newConfig = stringify(parsedConfig);
|
|
||||||
await writeTextFile(defaultConfig, newConfig);
|
|
||||||
|
|
||||||
// launch depot
|
|
||||||
await storage.launchDepot();
|
|
||||||
await storage.createSetting("depot", "1");
|
|
||||||
await delay(2000); // delay 2s to make sure depot is running
|
|
||||||
|
|
||||||
// default depot url: ws://localhost:6090
|
|
||||||
// #TODO: user can custom depot url
|
|
||||||
const connect = await ark.connectDepot();
|
|
||||||
|
|
||||||
if (connect) {
|
|
||||||
toast.success("Your Depot is successfully launch.");
|
|
||||||
setLoading(false);
|
|
||||||
|
|
||||||
navigate("/depot/");
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
toast.error(String(e));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-full w-full flex-col items-center justify-center gap-10 rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
|
|
||||||
<div className="flex flex-col items-center gap-8">
|
|
||||||
<div className="text-center">
|
|
||||||
<h1 className="mb-1 text-3xl font-semibold text-neutral-400 dark:text-neutral-600">
|
|
||||||
Run your Personal Nostr Relay inside Lume
|
|
||||||
</h1>
|
|
||||||
<h2 className="text-4xl font-semibold">Your Relay, Your Control.</h2>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-xl bg-blue-100 p-1.5 dark:bg-blue-900">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={launchDepot}
|
|
||||||
className="inline-flex h-11 w-36 transform items-center justify-center gap-2 rounded-lg bg-blue-500 font-medium text-white active:translate-y-1"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<>
|
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
|
||||||
Launching...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="currentColor"
|
|
||||||
className="h-5 w-5"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
d="M12 2.25a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM6.166 5.106a.75.75 0 0 1 0 1.06 8.25 8.25 0 1 0 11.668 0 .75.75 0 1 1 1.06-1.06c3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788a.75.75 0 0 1 1.06 0Z"
|
|
||||||
clipRule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
Launch
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,156 +0,0 @@
|
|||||||
import { downloadDir } from "@tauri-apps/api/path";
|
|
||||||
import { message, save } from "@tauri-apps/plugin-dialog";
|
|
||||||
import { relaunch } from "@tauri-apps/plugin-process";
|
|
||||||
import { useRouteError } from "react-router-dom";
|
|
||||||
|
|
||||||
interface RouteError {
|
|
||||||
statusText: string;
|
|
||||||
message: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ErrorScreen() {
|
|
||||||
const error = useRouteError() as RouteError;
|
|
||||||
|
|
||||||
const restart = async () => {
|
|
||||||
await relaunch();
|
|
||||||
};
|
|
||||||
|
|
||||||
const download = async () => {
|
|
||||||
try {
|
|
||||||
const downloadPath = await downloadDir();
|
|
||||||
const fileName = `nostr_keys_${new Date().toISOString()}.txt`;
|
|
||||||
const filePath = await save({
|
|
||||||
defaultPath: `${downloadPath}/${fileName}`,
|
|
||||||
});
|
|
||||||
/*
|
|
||||||
const nsec = await storage.loadPrivkey(ark.account.pubkey);
|
|
||||||
|
|
||||||
if (filePath) {
|
|
||||||
if (nsec) {
|
|
||||||
await writeTextFile(
|
|
||||||
filePath,
|
|
||||||
`Nostr account, generated by Lume (lume.nu)\nPublic key: ${ark.account.id}\nPrivate key: ${nsec}`,
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
await writeTextFile(
|
|
||||||
filePath,
|
|
||||||
`Nostr account, generated by Lume (lume.nu)\nPublic key: ${ark.account.id}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} // else { user cancel action }
|
|
||||||
*/
|
|
||||||
} catch (e) {
|
|
||||||
await message(e, {
|
|
||||||
title: "Cannot download account keys",
|
|
||||||
type: "error",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-tauri-drag-region
|
|
||||||
className="relative flex h-screen w-screen items-center justify-center bg-blue-500 overflow-hidden rounded-xl"
|
|
||||||
>
|
|
||||||
<div className="flex w-full max-w-2xl flex-col items-start gap-8">
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<h1 className="mb-3 text-4xl font-semibold text-blue-400">
|
|
||||||
Sorry, an unexpected error has occurred.
|
|
||||||
</h1>
|
|
||||||
<h3 className="text-3xl font-semibold leading-snug text-white">
|
|
||||||
Don't panic, your account is safe.
|
|
||||||
<br />
|
|
||||||
Here are what things you can do:
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full flex-col gap-3">
|
|
||||||
<div className="flex items-center justify-between rounded-xl bg-blue-700 px-3 py-4">
|
|
||||||
<div className="text-xl font-semibold text-white">
|
|
||||||
1. Try to close and re-open the app
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => restart()}
|
|
||||||
className="h-9 w-28 rounded-lg bg-blue-800 px-3 font-medium text-white hover:bg-blue-900"
|
|
||||||
>
|
|
||||||
Restart
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between rounded-xl bg-blue-700 px-3 py-4">
|
|
||||||
<div className="text-xl font-semibold text-white">
|
|
||||||
2. Backup Nostr account
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => download()}
|
|
||||||
className="h-9 w-28 rounded-lg bg-blue-800 px-3 font-medium text-white hover:bg-blue-900"
|
|
||||||
>
|
|
||||||
Download
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-xl bg-blue-700 px-3 py-4">
|
|
||||||
<div className="flex w-full flex-col gap-2">
|
|
||||||
<div className="flex w-full items-center justify-between">
|
|
||||||
<div className="text-xl font-semibold text-white">
|
|
||||||
3. Report this issue to Lume
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="https://github.com/lumehq/lume/issues/new"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="inline-flex h-9 w-28 items-center justify-center rounded-lg bg-blue-800 px-3 font-medium text-white hover:bg-blue-900"
|
|
||||||
>
|
|
||||||
Report
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="inline-flex h-16 items-center justify-center overflow-y-auto rounded-lg border border-dashed border-red-300 bg-blue-800 px-5">
|
|
||||||
<p className="select-text break-all text-red-400">
|
|
||||||
{error.statusText || error.message}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-xl bg-blue-700 px-3 py-4">
|
|
||||||
<div className="flex w-full flex-col gap-1.5">
|
|
||||||
<div className="text-xl font-semibold text-white">
|
|
||||||
4. Use another Nostr client
|
|
||||||
</div>
|
|
||||||
<div className="select-text text-lg font-medium text-blue-300">
|
|
||||||
<p>
|
|
||||||
While waiting for Lume release the bug fixes, you always can
|
|
||||||
use other Nostr clients with your account:
|
|
||||||
</p>
|
|
||||||
<div className="mt-2 flex flex-col gap-1 text-white">
|
|
||||||
<a
|
|
||||||
className="hover:!underline"
|
|
||||||
href="https://snort.social/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
snort.social
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="hover:!underline"
|
|
||||||
href="https://nostter.app/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
nostter
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="hover:!underline"
|
|
||||||
href="https://nostrudel.ninja/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
nostrudel.ninja
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,92 +0,0 @@
|
|||||||
import { Timeline } from "@columns/timeline";
|
|
||||||
import {
|
|
||||||
ArrowLeftIcon,
|
|
||||||
ArrowRightIcon,
|
|
||||||
PlusIcon,
|
|
||||||
PlusSquareIcon,
|
|
||||||
} from "@lume/icons";
|
|
||||||
import { useColumn } from "@lume/storage";
|
|
||||||
import * as Tooltip from "@radix-ui/react-tooltip";
|
|
||||||
import { t } from "i18next";
|
|
||||||
import { VList } from "virtua";
|
|
||||||
|
|
||||||
export function HomeScreen() {
|
|
||||||
const { vlistRef } = useColumn();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative w-full h-full">
|
|
||||||
<VList
|
|
||||||
ref={vlistRef}
|
|
||||||
className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
|
|
||||||
itemSize={420}
|
|
||||||
tabIndex={0}
|
|
||||||
horizontal
|
|
||||||
>
|
|
||||||
<Timeline column={{ id: 1, title: "", content: "" }} />
|
|
||||||
<div className="w-[420px] h-full flex items-center justify-center">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="size-16 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-900 rounded-2xl"
|
|
||||||
>
|
|
||||||
<PlusIcon className="size-6" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</VList>
|
|
||||||
<Tooltip.Provider>
|
|
||||||
<div className="absolute bottom-3 right-3">
|
|
||||||
<div className="flex items-center gap-1 p-1 bg-black/50 dark:bg-white/30 backdrop-blur-xl rounded-xl shadow-toolbar">
|
|
||||||
<Tooltip.Root delayDuration={150}>
|
|
||||||
<Tooltip.Trigger asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
|
||||||
>
|
|
||||||
<ArrowLeftIcon className="size-5" />
|
|
||||||
</button>
|
|
||||||
</Tooltip.Trigger>
|
|
||||||
<Tooltip.Portal>
|
|
||||||
<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
|
||||||
{t("global.moveLeft")}
|
|
||||||
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
|
|
||||||
</Tooltip.Content>
|
|
||||||
</Tooltip.Portal>
|
|
||||||
</Tooltip.Root>
|
|
||||||
<Tooltip.Root delayDuration={150}>
|
|
||||||
<Tooltip.Trigger asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
|
||||||
>
|
|
||||||
<ArrowRightIcon className="size-5" />
|
|
||||||
</button>
|
|
||||||
</Tooltip.Trigger>
|
|
||||||
<Tooltip.Portal>
|
|
||||||
<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
|
||||||
{t("global.moveRight")}
|
|
||||||
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
|
|
||||||
</Tooltip.Content>
|
|
||||||
</Tooltip.Portal>
|
|
||||||
</Tooltip.Root>
|
|
||||||
<Tooltip.Root delayDuration={150}>
|
|
||||||
<Tooltip.Trigger asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
|
|
||||||
>
|
|
||||||
<PlusSquareIcon className="size-5" />
|
|
||||||
</button>
|
|
||||||
</Tooltip.Trigger>
|
|
||||||
<Tooltip.Portal>
|
|
||||||
<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
|
||||||
{t("global.newColumn")}
|
|
||||||
<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
|
|
||||||
</Tooltip.Content>
|
|
||||||
</Tooltip.Portal>
|
|
||||||
</Tooltip.Root>
|
|
||||||
<div className="w-px h-6 bg-white/10" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Tooltip.Provider>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
import { NoteSkeleton, RepostNote, TextNote, useArk } from "@lume/ark";
|
|
||||||
import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
|
|
||||||
import { FETCH_LIMIT } from "@lume/utils";
|
|
||||||
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
||||||
import { useCallback, useMemo } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { VList } from "virtua";
|
|
||||||
|
|
||||||
export function RelayEventList({ relayUrl }: { relayUrl: string }) {
|
|
||||||
const ark = useArk();
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
|
||||||
useInfiniteQuery({
|
|
||||||
queryKey: ["relay-events", relayUrl],
|
|
||||||
initialPageParam: 0,
|
|
||||||
queryFn: async ({
|
|
||||||
signal,
|
|
||||||
pageParam,
|
|
||||||
}: {
|
|
||||||
signal: AbortSignal;
|
|
||||||
pageParam: number;
|
|
||||||
}) => {
|
|
||||||
const url = `wss://${relayUrl}`;
|
|
||||||
const events = await ark.getRelayEvents({
|
|
||||||
relayUrl: url,
|
|
||||||
filter: {
|
|
||||||
kinds: [NDKKind.Text, NDKKind.Repost],
|
|
||||||
},
|
|
||||||
limit: FETCH_LIMIT,
|
|
||||||
pageParam,
|
|
||||||
signal,
|
|
||||||
});
|
|
||||||
|
|
||||||
return events;
|
|
||||||
},
|
|
||||||
getNextPageParam: (lastPage) => {
|
|
||||||
const lastEvent = lastPage.at(-1);
|
|
||||||
if (!lastEvent) return;
|
|
||||||
return lastEvent.created_at - 1;
|
|
||||||
},
|
|
||||||
select: (data) => data?.pages.flatMap((page) => page),
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const renderItem = useCallback(
|
|
||||||
(event: NDKEvent) => {
|
|
||||||
switch (event.kind) {
|
|
||||||
case NDKKind.Text:
|
|
||||||
return <TextNote key={event.id} event={event} className="mt-3" />;
|
|
||||||
case NDKKind.Repost:
|
|
||||||
return <RepostNote key={event.id} event={event} className="mt-3" />;
|
|
||||||
default:
|
|
||||||
return <TextNote key={event.id} event={event} className="mt-3" />;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[data],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<VList className="mx-auto h-full w-full max-w-[500px] px-3 scrollbar-none">
|
|
||||||
{status === "pending" ? (
|
|
||||||
<NoteSkeleton />
|
|
||||||
) : (
|
|
||||||
data.map((item) => renderItem(item))
|
|
||||||
)}
|
|
||||||
<div className="flex h-16 items-center justify-center px-3 pb-3">
|
|
||||||
{hasNextPage ? (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => fetchNextPage()}
|
|
||||||
disabled={!hasNextPage || isFetchingNextPage}
|
|
||||||
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
|
|
||||||
>
|
|
||||||
{isFetchingNextPage ? (
|
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<ArrowRightCircleIcon className="h-5 w-5" />
|
|
||||||
{t("global.loading")}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</VList>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
import { useRelaylist } from "@lume/ark";
|
|
||||||
import { PlusIcon } from "@lume/icons";
|
|
||||||
import { normalizeRelayUrl } from "nostr-fetch";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function RelayForm() {
|
|
||||||
const { connectRelay } = useRelaylist();
|
|
||||||
|
|
||||||
const [relay, setRelay] = useState<{
|
|
||||||
url: WebSocket["url"];
|
|
||||||
purpose: "read" | "write" | undefined;
|
|
||||||
}>({ url: "", purpose: undefined });
|
|
||||||
|
|
||||||
const create = () => {
|
|
||||||
if (relay.url.length < 1) return toast.info("Please enter relay url");
|
|
||||||
try {
|
|
||||||
const relayUrl = new URL(relay.url.replace(/\s/g, ""));
|
|
||||||
|
|
||||||
if (relayUrl.protocol === "wss:" || relayUrl.protocol === "ws:") {
|
|
||||||
connectRelay.mutate(normalizeRelayUrl(relay.url));
|
|
||||||
setRelay({ url: "", purpose: undefined });
|
|
||||||
} else {
|
|
||||||
return toast.error(
|
|
||||||
"URL is invalid, a relay must use websocket protocol (start with wss:// or ws://). Please check again",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
return toast.error("Relay URL is not valid. Please check again");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<input
|
|
||||||
className="h-11 w-full rounded-lg border-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 bg-white/50 dark:bg-black/50 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
||||||
placeholder="wss://"
|
|
||||||
spellCheck={false}
|
|
||||||
autoComplete="off"
|
|
||||||
autoCorrect="off"
|
|
||||||
autoCapitalize="off"
|
|
||||||
value={relay.url}
|
|
||||||
onChange={(e) => setRelay((prev) => ({ ...prev, url: e.target.value }))}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => create()}
|
|
||||||
className="inline-flex size-11 shrink-0 items-center justify-center rounded-lg bg-blue-500 text-white hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
<PlusIcon className="size-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
import { User, useRelaylist } from "@lume/ark";
|
|
||||||
import { PlusIcon, SearchIcon } from "@lume/icons";
|
|
||||||
import { normalizeRelayUrl } from "nostr-fetch";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
export function RelayItem({ url, users }: { url: string; users?: string[] }) {
|
|
||||||
const domain = new URL(url).hostname;
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { connectRelay } = useRelaylist();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-14 w-full items-center justify-between border-b border-neutral-100 px-5 dark:border-neutral-950">
|
|
||||||
<div className="inline-flex items-center gap-2">
|
|
||||||
<span className="text-sm font-semibold text-neutral-500 dark:text-neutral-400">
|
|
||||||
{t("global.relay")}:{" "}
|
|
||||||
</span>
|
|
||||||
<span className="max-w-[200px] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
|
||||||
{url}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="inline-flex items-center gap-2">
|
|
||||||
{users ? (
|
|
||||||
<div className="isolate flex -space-x-2 mr-4">
|
|
||||||
{users.slice(0, 4).map((item) => (
|
|
||||||
<User.Provider pubkey={item}>
|
|
||||||
<User.Root>
|
|
||||||
<User.Avatar className="size-8 inline-block rounded-full ring-1 ring-neutral-100 dark:ring-neutral-900" />
|
|
||||||
</User.Root>
|
|
||||||
</User.Provider>
|
|
||||||
))}
|
|
||||||
{users.length > 4 ? (
|
|
||||||
<div className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-100 text-neutral-900 ring-1 ring-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:ring-neutral-800">
|
|
||||||
<span className="text-xs font-medium">+{users.length - 4}</span>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<Link
|
|
||||||
to={`/relays/${domain}/`}
|
|
||||||
className="inline-flex h-8 items-center justify-center gap-2 rounded-lg bg-neutral-100 px-2 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<SearchIcon className="size-4" />
|
|
||||||
{t("global.inspect")}
|
|
||||||
</Link>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => connectRelay.mutate(normalizeRelayUrl(url))}
|
|
||||||
className="inline-flex size-8 items-center justify-center rounded-lg bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 hover:dark:bg-blue-800"
|
|
||||||
>
|
|
||||||
<PlusIcon className="size-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
import { useArk, useRelaylist } from "@lume/ark";
|
|
||||||
import { CancelIcon, LoaderIcon, RefreshIcon } from "@lume/icons";
|
|
||||||
import { cn } from "@lume/utils";
|
|
||||||
import { NDKKind, NDKSubscriptionCacheUsage } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { RelayForm } from "./relayForm";
|
|
||||||
|
|
||||||
export function RelaySidebar({ className }: { className?: string }) {
|
|
||||||
const ark = useArk();
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { removeRelay } = useRelaylist();
|
|
||||||
const { status, data, isRefetching, refetch } = useQuery({
|
|
||||||
queryKey: ["relay-personal"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const event = await ark.getEventByFilter({
|
|
||||||
filter: {
|
|
||||||
kinds: [NDKKind.RelayList],
|
|
||||||
authors: [ark.account.pubkey],
|
|
||||||
},
|
|
||||||
cache: NDKSubscriptionCacheUsage.ONLY_RELAY,
|
|
||||||
});
|
|
||||||
if (!event) return [];
|
|
||||||
return event.tags.filter((tag) => tag[0] === "r");
|
|
||||||
},
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
refetchOnMount: false,
|
|
||||||
refetchOnReconnect: false,
|
|
||||||
staleTime: Infinity,
|
|
||||||
});
|
|
||||||
|
|
||||||
const currentRelays = new Set(
|
|
||||||
ark.ndk.pool.connectedRelays().map((item) => item.url),
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"rounded-l-xl bg-white/50 backdrop-blur-xl dark:bg-black/50",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="inline-flex items-center justify-between w-full h-14 px-3 border-b border-black/10 dark:border-white/10">
|
|
||||||
<h3 className="font-semibold">{t("relays.sidebar.title")}</h3>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => refetch()}
|
|
||||||
className="inline-flex items-center justify-center w-6 h-6 rounded-md shrink-0 hover:bg-neutral-100 dark:hover:bg-neutral-900"
|
|
||||||
>
|
|
||||||
<RefreshIcon
|
|
||||||
className={cn("size-4", isRefetching ? "animate-spin" : "")}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-2 px-3 mt-3">
|
|
||||||
{status === "pending" ? (
|
|
||||||
<div className="flex items-center justify-center w-full h-20 rounded-lg bg-black/10 dark:bg-white/10">
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : !data.length ? (
|
|
||||||
<div className="flex items-center justify-center w-full h-20 rounded-lg bg-black/10 dark:bg-white/10">
|
|
||||||
<p className="text-sm font-medium">{t("relays.sidebar.empty")}</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
data.map((item) => (
|
|
||||||
<div
|
|
||||||
key={item[1]}
|
|
||||||
className="flex items-center justify-between px-3 rounded-lg group h-11 bg-white/50 dark:bg-black/50"
|
|
||||||
>
|
|
||||||
<div className="inline-flex items-baseline gap-2">
|
|
||||||
{currentRelays.has(item[1]) ? (
|
|
||||||
<span className="relative flex w-2 h-2">
|
|
||||||
<span className="absolute inline-flex w-full h-full bg-green-400 rounded-full opacity-75 animate-ping" />
|
|
||||||
<span className="relative inline-flex w-2 h-2 bg-teal-500 rounded-full" />
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="relative flex w-2 h-2">
|
|
||||||
<span className="absolute inline-flex w-full h-full bg-red-400 rounded-full opacity-75 animate-ping" />
|
|
||||||
<span className="relative inline-flex w-2 h-2 bg-red-500 rounded-full" />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<p className="max-w-[20rem] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
|
||||||
{item[1]
|
|
||||||
.replace("wss://", "")
|
|
||||||
.replace("ws://", "")
|
|
||||||
.replace("/", "")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="inline-flex items-center gap-2">
|
|
||||||
{item[2]?.length ? (
|
|
||||||
<div className="inline-flex items-center justify-center h-6 px-2 text-xs font-medium capitalize rounded w-max bg-neutral-200 dark:bg-neutral-800">
|
|
||||||
{item[2]}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => removeRelay.mutate(item[1])}
|
|
||||||
className="items-center justify-center hidden size-6 rounded group-hover:inline-flex hover:bg-neutral-300 dark:hover:bg-neutral-700"
|
|
||||||
>
|
|
||||||
<CancelIcon className="size-4 text-neutral-900 dark:text-neutral-100" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
<RelayForm />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { LoaderIcon } from "@lume/icons";
|
|
||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
import { VList } from "virtua";
|
|
||||||
import { RelayItem } from "./components/relayItem";
|
|
||||||
|
|
||||||
export function RelayFollowsScreen() {
|
|
||||||
const ark = useArk();
|
|
||||||
const {
|
|
||||||
isLoading,
|
|
||||||
isError,
|
|
||||||
data: relays,
|
|
||||||
} = useQuery({
|
|
||||||
queryKey: ["relay-follows"],
|
|
||||||
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
|
||||||
const data = await ark.getAllRelaysFromContacts({ signal });
|
|
||||||
if (!data) throw new Error("Failed to get relay list from contacts");
|
|
||||||
return data;
|
|
||||||
},
|
|
||||||
refetchOnMount: false,
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
refetchOnReconnect: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isError || !relays) {
|
|
||||||
return (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<p>Error</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<VList itemSize={49}>
|
|
||||||
{[...relays].map(([key, value]) => (
|
|
||||||
<RelayItem key={key} url={key} users={value} />
|
|
||||||
))}
|
|
||||||
</VList>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import { LoaderIcon } from "@lume/icons";
|
|
||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
import { fetch } from "@tauri-apps/plugin-http";
|
|
||||||
import { VList } from "virtua";
|
|
||||||
import { RelayItem } from "./components/relayItem";
|
|
||||||
|
|
||||||
export function RelayGlobalScreen() {
|
|
||||||
const { isLoading, data: relays } = useQuery({
|
|
||||||
queryKey: ["relay-global"],
|
|
||||||
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
|
||||||
const res = await fetch("https://api.nostr.watch/v1/online", { signal });
|
|
||||||
if (!res.ok) throw new Error("Failed to get online relays");
|
|
||||||
return (await res.json()) as string[];
|
|
||||||
},
|
|
||||||
refetchOnMount: false,
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
refetchOnReconnect: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<LoaderIcon className="size-5 animate-spin" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<VList itemSize={49}>
|
|
||||||
{relays.map((item: string) => (
|
|
||||||
<RelayItem key={item} url={item} />
|
|
||||||
))}
|
|
||||||
</VList>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import { cn } from "@lume/utils";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { NavLink, Outlet } from "react-router-dom";
|
|
||||||
import { RelaySidebar } from "./components/sidebar";
|
|
||||||
|
|
||||||
export function RelaysScreen() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid h-full w-full lg:grid-cols-4 xl:grid-cols-5 rounded-xl shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:shadow-none dark:ring-1 dark:ring-white/10">
|
|
||||||
<RelaySidebar className="col-span-1" />
|
|
||||||
<div className="col-span-3 xl:col-span-4 flex flex-col rounded-r-xl bg-white dark:bg-black">
|
|
||||||
<div className="h-14 shrink-0 flex px-5 items-center gap-6 border-b border-neutral-100 dark:border-neutral-950">
|
|
||||||
<NavLink
|
|
||||||
end
|
|
||||||
to={"/relays/"}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
cn(
|
|
||||||
"h-9 w-24 rounded-lg inline-flex items-center justify-center font-medium",
|
|
||||||
isActive
|
|
||||||
? "bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-950 dark:hover:bg-neutral-900"
|
|
||||||
: "",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("relays.global")}
|
|
||||||
</NavLink>
|
|
||||||
<NavLink
|
|
||||||
to={"/relays/follows/"}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
cn(
|
|
||||||
"h-9 w-24 rounded-lg inline-flex items-center justify-center font-medium",
|
|
||||||
isActive
|
|
||||||
? "bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-950 dark:hover:bg-neutral-900"
|
|
||||||
: "",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("relays.follows")}
|
|
||||||
</NavLink>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
|
|
||||||
<Outlet />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,160 +0,0 @@
|
|||||||
import { LoaderIcon } from "@lume/icons";
|
|
||||||
import { NIP11 } from "@lume/types";
|
|
||||||
import { User } from "@lume/ui";
|
|
||||||
import { Suspense } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Await, useLoaderData, useParams } from "react-router-dom";
|
|
||||||
import { RelayEventList } from "./components/relayEventList";
|
|
||||||
|
|
||||||
export function RelayUrlScreen() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { url } = useParams();
|
|
||||||
|
|
||||||
const data: { relay?: { [key: string]: string } } = useLoaderData();
|
|
||||||
|
|
||||||
const getSoftwareName = (url: string) => {
|
|
||||||
const filename = url.substring(url.lastIndexOf("/") + 1);
|
|
||||||
return filename.replace(".git", "");
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleCase = (s: string) => {
|
|
||||||
return s
|
|
||||||
.replace(/^[-_]*(.)/, (_, c) => c.toUpperCase())
|
|
||||||
.replace(/[-_]+(.)/g, (_, c) => ` ${c.toUpperCase()}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid h-full w-full grid-cols-3">
|
|
||||||
<div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
|
|
||||||
<RelayEventList relayUrl={url} />
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 px-3 py-3">
|
|
||||||
<Suspense
|
|
||||||
fallback={
|
|
||||||
<div className="flex items-center gap-2 text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
|
||||||
{t("global.loading")}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Await
|
|
||||||
resolve={data.relay}
|
|
||||||
errorElement={
|
|
||||||
<div className="text-sm font-medium">
|
|
||||||
<p>{t("relays.relayView.empty")}</p>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{(resolvedRelay: NIP11) => (
|
|
||||||
<div className="flex flex-col gap-5">
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold">{resolvedRelay.name}</h3>
|
|
||||||
<p className="text-sm text-neutral-600 dark:text-neutral-500">
|
|
||||||
{resolvedRelay.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{resolvedRelay.pubkey ? (
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
|
||||||
{t("relays.relayView.owner")}:
|
|
||||||
</h5>
|
|
||||||
<div className="w-full rounded-lg bg-neutral-100 px-2 py-2 dark:bg-neutral-900">
|
|
||||||
<User pubkey={resolvedRelay.pubkey} variant="simple" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
{resolvedRelay.contact ? (
|
|
||||||
<div>
|
|
||||||
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
|
||||||
{t("relays.relayView.contact")}:
|
|
||||||
</h5>
|
|
||||||
<a
|
|
||||||
href={`mailto:${resolvedRelay.contact}`}
|
|
||||||
target="_blank"
|
|
||||||
className="truncate underline after:content-['_↗'] hover:text-blue-500"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
{resolvedRelay.contact}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<div>
|
|
||||||
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
|
||||||
{t("relays.relayView.software")}:
|
|
||||||
</h5>
|
|
||||||
<a
|
|
||||||
href={resolvedRelay.software}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="underline after:content-['_↗'] hover:text-blue-500"
|
|
||||||
>
|
|
||||||
{`${getSoftwareName(resolvedRelay.software)} - ${
|
|
||||||
resolvedRelay.version
|
|
||||||
}`}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
|
||||||
{t("relays.relayView.nips")}:
|
|
||||||
</h5>
|
|
||||||
<div className="mt-2 grid grid-cols-7 gap-2">
|
|
||||||
{resolvedRelay.supported_nips.map((item) => (
|
|
||||||
<a
|
|
||||||
key={item}
|
|
||||||
href={`https://nips.be/${item}`}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="inline-flex aspect-square h-auto w-full items-center justify-center rounded bg-neutral-100 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
|
|
||||||
>
|
|
||||||
{item}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{resolvedRelay.limitation ? (
|
|
||||||
<div>
|
|
||||||
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
|
||||||
{t("relays.relayView.limit")}
|
|
||||||
</h5>
|
|
||||||
<div className="flex flex-col gap-2 divide-y divide-white/5">
|
|
||||||
{Object.keys(resolvedRelay.limitation).map((key) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={key}
|
|
||||||
className="flex items-baseline justify-between pt-2"
|
|
||||||
>
|
|
||||||
<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
|
||||||
{titleCase(key)}:
|
|
||||||
</p>
|
|
||||||
<p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
|
|
||||||
{resolvedRelay.limitation[key].toString()}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
{resolvedRelay.payments_url ? (
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<a
|
|
||||||
href={resolvedRelay.payments_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
{t("relays.relayView.payment")}
|
|
||||||
</a>
|
|
||||||
<span className="text-center text-xs text-neutral-600 dark:text-neutral-400">
|
|
||||||
{t("relays.relayView.paymentNote")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Await>
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
import { getVersion } from "@tauri-apps/api/app";
|
|
||||||
import { relaunch } from "@tauri-apps/plugin-process";
|
|
||||||
import { Update, check } from "@tauri-apps/plugin-updater";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function AboutScreen() {
|
|
||||||
const [t] = useTranslation();
|
|
||||||
const [version, setVersion] = useState("");
|
|
||||||
const [newUpdate, setNewUpdate] = useState<Update>(null);
|
|
||||||
|
|
||||||
const checkUpdate = async () => {
|
|
||||||
const update = await check();
|
|
||||||
if (!update) toast.info("There is no update available");
|
|
||||||
setNewUpdate(update);
|
|
||||||
};
|
|
||||||
|
|
||||||
const installUpdate = async () => {
|
|
||||||
await newUpdate.downloadAndInstall();
|
|
||||||
await relaunch();
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadVersion() {
|
|
||||||
const appVersion = await getVersion();
|
|
||||||
setVersion(appVersion);
|
|
||||||
}
|
|
||||||
|
|
||||||
loadVersion();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx-auto w-full max-w-lg">
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<h1 className="leading-tight text-xl font-semibold">Lume</h1>
|
|
||||||
<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
|
||||||
{t("settings.about.version")} {version}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="mx-auto mt-4 flex w-full max-w-xs flex-col gap-2">
|
|
||||||
{!newUpdate ? (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => checkUpdate()}
|
|
||||||
className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium text-white hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
{t("settings.about.checkUpdate")}
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => installUpdate()}
|
|
||||||
className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium text-white hover:bg-blue-600"
|
|
||||||
>
|
|
||||||
{t("settings.about.installUpdate")} {newUpdate.version}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<Link
|
|
||||||
to="https://lume.nu"
|
|
||||||
className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
|
|
||||||
>
|
|
||||||
Website
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="https://github.com/lumehq/lume/issues"
|
|
||||||
className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
|
|
||||||
>
|
|
||||||
Report a issue
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
export function AdvancedSettingScreen() {
|
|
||||||
const storage = useStorage();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const clearCache = async () => {
|
|
||||||
await storage.clearCache();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx-auto w-full max-w-lg">
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<div className="flex w-full items-center justify-between">
|
|
||||||
<div className="flex items-center gap-8">
|
|
||||||
<div className="w-24 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.advanced.cache.title")}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm">
|
|
||||||
{t("settings.advanced.cache.subtitle")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => clearCache()}
|
|
||||||
className="h-8 w-max rounded-lg px-3 text-sm font-semibold text-blue-500 bg-blue-100 hover:bg-blue-200"
|
|
||||||
>
|
|
||||||
{t("settings.advanced.cache.button")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { EyeOffIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { nip19 } from "nostr-tools";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
export function BackupSettingScreen() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
|
|
||||||
const [t] = useTranslation();
|
|
||||||
const [privkey, setPrivkey] = useState(null);
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
|
|
||||||
const removePrivkey = async () => {
|
|
||||||
await storage.removePrivkey(ark.account.pubkey);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadPrivkey() {
|
|
||||||
const key = await storage.loadPrivkey(ark.account.pubkey);
|
|
||||||
if (key) setPrivkey(key);
|
|
||||||
}
|
|
||||||
|
|
||||||
loadPrivkey();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx-auto w-full max-w-lg">
|
|
||||||
<div>
|
|
||||||
{privkey ? (
|
|
||||||
<div>
|
|
||||||
<div className="mb-2 text-sm font-semibold">
|
|
||||||
{t("settings.backup.privkey.title")}
|
|
||||||
</div>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
readOnly
|
|
||||||
type={showPassword ? "text" : "password"}
|
|
||||||
value={nip19.nsecEncode(privkey)}
|
|
||||||
className="relative h-11 w-full resize-none rounded-lg border-none bg-neutral-200 py-1 pl-3 pr-11 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
className="absolute right-1.5 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 transform items-center justify-center rounded-lg bg-neutral-50 dark:bg-neutral-950"
|
|
||||||
>
|
|
||||||
<EyeOffIcon className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => removePrivkey()}
|
|
||||||
className="mt-2 inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-red-200 dark:bg-red-800 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:hover:text-white"
|
|
||||||
>
|
|
||||||
{t("settings.backup.privkey.button")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { LoaderIcon } from "@lume/icons";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function AvatarUpload({ setPicture }) {
|
|
||||||
const ark = useArk();
|
|
||||||
|
|
||||||
const [t] = useTranslation();
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const upload = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
// upload image to nostr.build server
|
|
||||||
// #TODO: support multiple server
|
|
||||||
const image = await ark.upload({ fileExts: [] });
|
|
||||||
|
|
||||||
if (!image)
|
|
||||||
toast.error("Failed to upload image, please try again later.");
|
|
||||||
|
|
||||||
setPicture(image);
|
|
||||||
setLoading(false);
|
|
||||||
} catch (e) {
|
|
||||||
setLoading(false);
|
|
||||||
toast.error("Failed to upload image, please try again later.");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={upload}
|
|
||||||
disabled={loading}
|
|
||||||
className="inline-flex items-center justify-center w-36 font-medium rounded-lg h-8 bg-blue-500 hover:bg-blue-600 text-white disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<LoaderIcon className="size-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
t("user.avatarButton")
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { LoaderIcon } from "@lume/icons";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function CoverUpload({ setBanner }) {
|
|
||||||
const ark = useArk();
|
|
||||||
|
|
||||||
const [t] = useTranslation();
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const upload = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
// upload image to nostr.build server
|
|
||||||
// #TODO: support multiple server
|
|
||||||
const image = await ark.upload({ fileExts: [] });
|
|
||||||
|
|
||||||
if (!image)
|
|
||||||
toast.error("Failed to upload image, please try again later.");
|
|
||||||
|
|
||||||
setBanner(image);
|
|
||||||
setLoading(false);
|
|
||||||
} catch (e) {
|
|
||||||
setLoading(false);
|
|
||||||
toast.error("Failed to upload image, please try again later.");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={upload}
|
|
||||||
disabled={loading}
|
|
||||||
className="inline-flex items-center justify-center w-32 font-medium rounded-lg h-8 bg-blue-500 hover:bg-blue-600 text-white disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<LoaderIcon className="size-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
t("user.coverButton")
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,320 +0,0 @@
|
|||||||
import { DarkIcon, LightIcon, SystemModeIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { cn } from "@lume/utils";
|
|
||||||
import * as Switch from "@radix-ui/react-switch";
|
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
|
||||||
import { getCurrent } from "@tauri-apps/api/window";
|
|
||||||
import { disable, enable, isEnabled } from "@tauri-apps/plugin-autostart";
|
|
||||||
import {
|
|
||||||
isPermissionGranted,
|
|
||||||
requestPermission,
|
|
||||||
} from "@tauri-apps/plugin-notification";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
export function GeneralSettingScreen() {
|
|
||||||
const storage = useStorage();
|
|
||||||
|
|
||||||
const [t] = useTranslation();
|
|
||||||
const [apiKey, setAPIKey] = useState("");
|
|
||||||
const [settings, setSettings] = useState({
|
|
||||||
...storage.settings,
|
|
||||||
notification: false,
|
|
||||||
autolaunch: false,
|
|
||||||
appearance: "system",
|
|
||||||
});
|
|
||||||
|
|
||||||
const changeTheme = async (theme: "light" | "dark" | "auto") => {
|
|
||||||
await invoke("plugin:theme|set_theme", { theme });
|
|
||||||
// update state
|
|
||||||
setSettings((prev) => ({ ...prev, appearance: theme }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleLowPower = async () => {
|
|
||||||
await storage.createSetting("lowPower", String(+!settings.lowPower));
|
|
||||||
setSettings((state) => ({ ...state, lowPower: !settings.lowPower }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleAutolaunch = async () => {
|
|
||||||
if (!settings.autolaunch) {
|
|
||||||
await enable();
|
|
||||||
// update state
|
|
||||||
setSettings((prev) => ({ ...prev, autolaunch: true }));
|
|
||||||
} else {
|
|
||||||
await disable();
|
|
||||||
// update state
|
|
||||||
setSettings((prev) => ({ ...prev, autolaunch: false }));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleMedia = async () => {
|
|
||||||
await storage.createSetting("media", String(+!settings.media));
|
|
||||||
storage.settings.media = !settings.media;
|
|
||||||
// update state
|
|
||||||
setSettings((prev) => ({ ...prev, media: !settings.media }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleHashtag = async () => {
|
|
||||||
await storage.createSetting("hashtag", String(+!settings.hashtag));
|
|
||||||
storage.settings.hashtag = !settings.hashtag;
|
|
||||||
// update state
|
|
||||||
setSettings((prev) => ({ ...prev, hashtag: !settings.hashtag }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleAutoupdate = async () => {
|
|
||||||
await storage.createSetting("autoupdate", String(+!settings.autoupdate));
|
|
||||||
storage.settings.autoupdate = !settings.autoupdate;
|
|
||||||
// update state
|
|
||||||
setSettings((prev) => ({ ...prev, autoupdate: !settings.autoupdate }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleNofitication = async () => {
|
|
||||||
if (settings.notification) return;
|
|
||||||
|
|
||||||
await requestPermission();
|
|
||||||
// update state
|
|
||||||
setSettings((prev) => ({ ...prev, notification: !settings.notification }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleTranslation = async () => {
|
|
||||||
await storage.createSetting("translation", String(+!settings.translation));
|
|
||||||
storage.settings.translation = !settings.translation;
|
|
||||||
// update state
|
|
||||||
setSettings((prev) => ({ ...prev, translation: !settings.translation }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveApi = async () => {
|
|
||||||
await storage.createSetting("translateApiKey", apiKey);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function loadSettings() {
|
|
||||||
const theme = await getCurrent().theme();
|
|
||||||
setSettings((prev) => ({ ...prev, appearance: theme }));
|
|
||||||
|
|
||||||
const autostart = await isEnabled();
|
|
||||||
setSettings((prev) => ({ ...prev, autolaunch: autostart }));
|
|
||||||
|
|
||||||
const permissionGranted = await isPermissionGranted();
|
|
||||||
setSettings((prev) => ({ ...prev, notification: permissionGranted }));
|
|
||||||
}
|
|
||||||
|
|
||||||
loadSettings();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx-auto w-full max-w-lg">
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<div className="flex w-full items-center justify-between">
|
|
||||||
<div className="flex items-center gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.general.update.title")}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm">
|
|
||||||
{t("settings.general.update.subtitle")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.autoupdate}
|
|
||||||
onClick={() => toggleAutoupdate()}
|
|
||||||
className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-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 className="flex w-full items-center justify-between">
|
|
||||||
<div className="flex items-center gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.general.lowPower.title")}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm">
|
|
||||||
{t("settings.general.lowPower.subtitle")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.lowPower}
|
|
||||||
onClick={() => toggleLowPower()}
|
|
||||||
className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-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 className="flex w-full items-center justify-between">
|
|
||||||
<div className="flex items-center gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.general.startup.title")}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm">
|
|
||||||
{t("settings.general.startup.subtitle")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.autolaunch}
|
|
||||||
onClick={() => toggleAutolaunch()}
|
|
||||||
className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-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 className="flex w-full items-center justify-between">
|
|
||||||
<div className="flex items-center gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.general.media.title")}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm">
|
|
||||||
{t("settings.general.media.subtitle")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.media}
|
|
||||||
onClick={() => toggleMedia()}
|
|
||||||
className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-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 className="flex w-full items-center justify-between">
|
|
||||||
<div className="flex items-center gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.general.hashtag.title")}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm">
|
|
||||||
{t("settings.general.hashtag.subtitle")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.hashtag}
|
|
||||||
onClick={() => toggleHashtag()}
|
|
||||||
className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-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 className="flex w-full items-center justify-between">
|
|
||||||
<div className="flex items-center gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.general.notification.title")}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm">
|
|
||||||
{t("settings.general.notification.subtitle")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.notification}
|
|
||||||
disabled={settings.notification}
|
|
||||||
onClick={() => toggleNofitication()}
|
|
||||||
className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-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 className="flex w-full items-center justify-between">
|
|
||||||
<div className="flex items-center gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.general.translation.title")}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm">
|
|
||||||
{t("settings.general.translation.subtitle")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.translation}
|
|
||||||
onClick={() => toggleTranslation()}
|
|
||||||
className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-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>
|
|
||||||
{settings.translation ? (
|
|
||||||
<div className="flex w-full items-center gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("global.apiKey")}
|
|
||||||
</div>
|
|
||||||
<div className="relative w-full">
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
spellCheck={false}
|
|
||||||
value={apiKey}
|
|
||||||
onChange={(e) => setAPIKey(e.target.value)}
|
|
||||||
className="w-full border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-9 rounded-lg ring-0 placeholder:text-neutral-600 bg-neutral-100 dark:bg-neutral-900"
|
|
||||||
/>
|
|
||||||
<div className="h-9 absolute right-0 top-0 inline-flex items-center justify-center">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={saveApi}
|
|
||||||
className="mr-1 h-7 w-16 text-sm font-medium shrink-0 inline-flex items-center justify-center rounded-md bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
|
|
||||||
>
|
|
||||||
{t("global.save")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<div className="flex w-full items-start gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.general.appearance.title")}
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-1 gap-6">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => changeTheme("light")}
|
|
||||||
className="flex flex-col items-center justify-center gap-0.5"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"inline-flex h-11 w-11 items-center justify-center rounded-lg",
|
|
||||||
settings.appearance === "light"
|
|
||||||
? "bg-blue-500 text-white"
|
|
||||||
: "bg-neutral-100 dark:bg-neutral-900",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<LightIcon className="h-5 w-5" />
|
|
||||||
</div>
|
|
||||||
<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
|
||||||
{t("settings.general.appearance.light")}
|
|
||||||
</p>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => changeTheme("dark")}
|
|
||||||
className="flex flex-col items-center justify-center gap-0.5"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"inline-flex h-11 w-11 items-center justify-center rounded-lg",
|
|
||||||
settings.appearance === "dark"
|
|
||||||
? "bg-blue-500 text-white"
|
|
||||||
: "bg-neutral-100 dark:bg-neutral-900",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<DarkIcon className="h-5 w-5" />
|
|
||||||
</div>
|
|
||||||
<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
|
||||||
{t("settings.general.appearance.dark")}
|
|
||||||
</p>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => changeTheme("auto")}
|
|
||||||
className="flex flex-col items-center justify-center gap-0.5"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"inline-flex h-11 w-11 items-center justify-center rounded-lg",
|
|
||||||
settings.appearance === "auto"
|
|
||||||
? "bg-blue-500 text-white"
|
|
||||||
: "bg-neutral-100 dark:bg-neutral-900",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<SystemModeIcon className="h-5 w-5" />
|
|
||||||
</div>
|
|
||||||
<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
|
||||||
{t("settings.general.appearance.system")}
|
|
||||||
</p>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,157 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import * as Switch from "@radix-ui/react-switch";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export function NWCScreen() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
|
|
||||||
const [t] = useTranslation();
|
|
||||||
const [settings, setSettings] = useState({
|
|
||||||
nwc: false,
|
|
||||||
instantZap: storage.settings.instantZap,
|
|
||||||
});
|
|
||||||
const [walletConnectURL, setWalletConnectURL] = useState<null | string>(null);
|
|
||||||
const [amount, setAmount] = useState("21");
|
|
||||||
|
|
||||||
const saveNWC = async () => {
|
|
||||||
try {
|
|
||||||
if (!walletConnectURL.startsWith("nostr+walletconnect:")) {
|
|
||||||
return toast.error(
|
|
||||||
"Connect URI is required and must start with format nostr+walletconnect:, please check again",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const uriObj = new URL(walletConnectURL);
|
|
||||||
const params = new URLSearchParams(uriObj.search);
|
|
||||||
|
|
||||||
if (params.has("relay") && params.has("secret")) {
|
|
||||||
await storage.createPrivkey(
|
|
||||||
`${ark.account.pubkey}.nwc`,
|
|
||||||
walletConnectURL,
|
|
||||||
);
|
|
||||||
|
|
||||||
storage.nwc = walletConnectURL;
|
|
||||||
|
|
||||||
setWalletConnectURL(walletConnectURL);
|
|
||||||
setSettings((state) => ({ ...state, nwc: true }));
|
|
||||||
} else {
|
|
||||||
return toast.error("Connect URI is not valid, please check again");
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
toast.error(String(e));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleInstantZap = async () => {
|
|
||||||
await storage.createSetting("instantZap", String(+!settings.instantZap));
|
|
||||||
setSettings((state) => ({ ...state, instantZap: !settings.instantZap }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveAmount = async () => {
|
|
||||||
await storage.createSetting("zapAmount", amount);
|
|
||||||
};
|
|
||||||
|
|
||||||
const remove = async () => {
|
|
||||||
await storage.removePrivkey(`${ark.account.pubkey}.nwc`);
|
|
||||||
|
|
||||||
setWalletConnectURL("");
|
|
||||||
setSettings((state) => ({ ...state, nwc: false }));
|
|
||||||
storage.nwc = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (storage.nwc) {
|
|
||||||
setSettings((state) => ({ ...state, nwc: true }));
|
|
||||||
setWalletConnectURL(storage.nwc);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx-auto w-full max-w-lg">
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<div className="flex w-full items-center justify-between">
|
|
||||||
<div className="flex w-full items-start gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.zap.nwc")}
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-end gap-2 w-full">
|
|
||||||
<textarea
|
|
||||||
spellCheck={false}
|
|
||||||
value={walletConnectURL}
|
|
||||||
onChange={(e) => setWalletConnectURL(e.target.value)}
|
|
||||||
className="w-full h-24 resize-none border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none rounded-lg ring-0 placeholder:text-neutral-600 bg-neutral-100 dark:bg-neutral-900"
|
|
||||||
/>
|
|
||||||
{!settings.nwc ? (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={saveNWC}
|
|
||||||
className="h-8 w-16 text-sm font-medium shrink-0 inline-flex items-center justify-center rounded-md bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
|
|
||||||
>
|
|
||||||
{t("global.save")}
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={remove}
|
|
||||||
className="h-8 w-16 text-sm font-medium shrink-0 inline-flex items-center justify-center rounded-md bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
|
|
||||||
>
|
|
||||||
{t("global.delete")}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{settings.nwc ? (
|
|
||||||
<>
|
|
||||||
<div className="flex w-full items-center justify-between">
|
|
||||||
<div className="flex items-center gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.zap.instant.title")}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm">
|
|
||||||
{t("settings.zap.instant.subtitle")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.instantZap}
|
|
||||||
onClick={() => toggleInstantZap()}
|
|
||||||
className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-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 className="flex w-full items-center justify-between">
|
|
||||||
<div className="flex w-full items-center gap-8">
|
|
||||||
<div className="w-36 shrink-0 text-end text-sm font-semibold">
|
|
||||||
{t("settings.zap.defaultAmount")}
|
|
||||||
</div>
|
|
||||||
<div className="relative w-full">
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
spellCheck={false}
|
|
||||||
value={amount}
|
|
||||||
onChange={(e) => setAmount(e.target.value)}
|
|
||||||
className="w-full border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-9 rounded-lg ring-0 placeholder:text-neutral-600 bg-neutral-100 dark:bg-neutral-900"
|
|
||||||
/>
|
|
||||||
<div className="h-9 absolute right-0 top-0 inline-flex items-center justify-center">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={saveAmount}
|
|
||||||
className="mr-1 h-7 w-16 text-sm font-medium shrink-0 inline-flex items-center justify-center rounded-md bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
|
|
||||||
>
|
|
||||||
{t("global.save")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,248 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { CheckCircleIcon, LoaderIcon, UnverifiedIcon } from "@lume/icons";
|
|
||||||
import { useStorage } from "@lume/storage";
|
|
||||||
import { NDKKind, NDKUserProfile } from "@nostr-dev-kit/ndk";
|
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { AvatarUpload } from "./components/avatarUpload";
|
|
||||||
import { CoverUpload } from "./components/coverUpload";
|
|
||||||
|
|
||||||
export function ProfileSettingScreen() {
|
|
||||||
const ark = useArk();
|
|
||||||
const storage = useStorage();
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [picture, setPicture] = useState("");
|
|
||||||
const [banner, setBanner] = useState("");
|
|
||||||
const [nip05, setNIP05] = useState({ verified: true, text: "" });
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
setError,
|
|
||||||
formState: { isValid, errors },
|
|
||||||
} = useForm({
|
|
||||||
defaultValues: async () => {
|
|
||||||
const res: NDKUserProfile = queryClient.getQueryData([
|
|
||||||
"user",
|
|
||||||
ark.account.pubkey,
|
|
||||||
]);
|
|
||||||
if (res.image) {
|
|
||||||
setPicture(res.image);
|
|
||||||
}
|
|
||||||
if (res.banner) {
|
|
||||||
setBanner(res.banner);
|
|
||||||
}
|
|
||||||
if (res.nip05) {
|
|
||||||
setNIP05((prev) => ({ ...prev, text: res.nip05 }));
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = async (data: NDKUserProfile) => {
|
|
||||||
// start loading
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
let content = {
|
|
||||||
...data,
|
|
||||||
picture,
|
|
||||||
banner,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (data.nip05) {
|
|
||||||
const verify = ark.validateNIP05({
|
|
||||||
pubkey: ark.account.pubkey,
|
|
||||||
nip05: data.nip05,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (verify) {
|
|
||||||
content = { ...content, nip05: data.nip05 };
|
|
||||||
} else {
|
|
||||||
setNIP05((prev) => ({ ...prev, verified: false }));
|
|
||||||
setError("nip05", {
|
|
||||||
type: "manual",
|
|
||||||
message: "Can't verify your NIP-05, please check again",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const publish = await ark.createEvent({
|
|
||||||
kind: NDKKind.Metadata,
|
|
||||||
tags: [],
|
|
||||||
content: JSON.stringify(content),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (publish) {
|
|
||||||
// invalid cache
|
|
||||||
await storage.clearProfileCache(ark.account.pubkey);
|
|
||||||
await queryClient.setQueryData(["user", ark.account.pubkey], () => {
|
|
||||||
return content;
|
|
||||||
});
|
|
||||||
|
|
||||||
// notify
|
|
||||||
toast.success("You've updated profile successfully.");
|
|
||||||
|
|
||||||
// reset state
|
|
||||||
setPicture(null);
|
|
||||||
setBanner(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx-auto w-full max-w-lg">
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="mb-0">
|
|
||||||
<div className="mb-5 flex flex-col items-center justify-center bg-neutral-100 dark:bg-neutral-900 rounded-xl">
|
|
||||||
<div className="relative h-44 w-full">
|
|
||||||
{banner ? (
|
|
||||||
<img
|
|
||||||
src={banner}
|
|
||||||
alt="user's banner"
|
|
||||||
className="h-full w-full rounded-t-xl object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="h-full w-full rounded-t-xl bg-neutral-200 dark:bg-neutral-800" />
|
|
||||||
)}
|
|
||||||
<div className="absolute right-4 top-4">
|
|
||||||
<CoverUpload setBanner={setBanner} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="-mt-7 mb-5 px-4 flex flex-col gap-4 items-center z-10 relative">
|
|
||||||
<div className="size-14 overflow-hidden rounded-xl ring-2 ring-white dark:ring-black">
|
|
||||||
<img
|
|
||||||
src={picture}
|
|
||||||
alt="user's avatar"
|
|
||||||
className="h-14 w-14 rounded-xl object-cover bg-white dark:bg-black"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<AvatarUpload setPicture={setPicture} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="displayName"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
{t("user.displayName")}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type={"text"}
|
|
||||||
{...register("display_name")}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="name"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
{t("user.name")}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type={"text"}
|
|
||||||
{...register("name")}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="nip05"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
NIP-05
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
{...register("nip05")}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
|
|
||||||
{nip05.verified ? (
|
|
||||||
<span className="inline-flex h-6 items-center gap-1 rounded-full bg-teal-500 px-1 pr-1.5 text-xs font-medium text-white">
|
|
||||||
<CheckCircleIcon className="h-4 w-4" />
|
|
||||||
{t("user.verified")}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 pl-1 pr-1.5 text-xs font-medium text-white">
|
|
||||||
<UnverifiedIcon className="h-4 w-4" />
|
|
||||||
{t("user.unverified")}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{errors.nip05 && (
|
|
||||||
<p className="mt-1 text-sm text-red-400">
|
|
||||||
{errors.nip05.message.toString()}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="website"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
{t("user.website")}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type={"text"}
|
|
||||||
{...register("website", { required: false })}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="website"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
{t("user.lna")}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type={"text"}
|
|
||||||
{...register("lud16", { required: false })}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<label
|
|
||||||
htmlFor="about"
|
|
||||||
className="text-sm font-semibold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
{t("user.bio")}
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
{...register("about")}
|
|
||||||
spellCheck={false}
|
|
||||||
className="relative h-36 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="absolute right-4 bottom-4">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={!isValid || loading}
|
|
||||||
className="inline-flex items-center justify-center w-24 pb-[2px] font-semibold border-t rounded-lg border-neutral-900 dark:border-neutral-800 h-9 bg-neutral-950 text-neutral-50 dark:bg-neutral-900 hover:bg-neutral-900 dark:hover:bg-neutral-800"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<LoaderIcon className="size-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
t("global.update")
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import sharedConfig from "@lume/tailwindcss";
|
|
||||||
|
|
||||||
const config = {
|
|
||||||
content: [
|
|
||||||
"./src/**/*.{js,ts,jsx,tsx}",
|
|
||||||
"../../packages/@columns/**/*{.js,.ts,.jsx,.tsx}",
|
|
||||||
"../../packages/ark/**/*{.js,.ts,.jsx,.tsx}",
|
|
||||||
"../../packages/ui/**/*{.js,.ts,.jsx,.tsx}",
|
|
||||||
"index.html",
|
|
||||||
],
|
|
||||||
presets: [sharedConfig],
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "@lume/tsconfig/base.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "dist"
|
|
||||||
},
|
|
||||||
"include": ["src"],
|
|
||||||
"exclude": ["node_modules", "dist"]
|
|
||||||
}
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import react from "@vitejs/plugin-react-swc";
|
|
||||||
import { defineConfig } from "vite";
|
|
||||||
import topLevelAwait from "vite-plugin-top-level-await";
|
|
||||||
import viteTsconfigPaths from "vite-tsconfig-paths";
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [
|
|
||||||
react(),
|
|
||||||
viteTsconfigPaths(),
|
|
||||||
topLevelAwait({
|
|
||||||
// The export name of top-level await promise for each chunk module
|
|
||||||
promiseExportName: "__tla",
|
|
||||||
// The function to generate import names of top-level await promise in each chunk module
|
|
||||||
promiseImportName: (i) => `__tla_${i}`,
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
envPrefix: ["VITE_", "TAURI_"],
|
|
||||||
build: {
|
|
||||||
target: process.env.TAURI_PLATFORM === "windows" ? "chrome105" : "safari13",
|
|
||||||
minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
|
|
||||||
sourcemap: !!process.env.TAURI_DEBUG,
|
|
||||||
outDir: "../../dist",
|
|
||||||
},
|
|
||||||
server: {
|
|
||||||
strictPort: true,
|
|
||||||
port: 3000,
|
|
||||||
},
|
|
||||||
clearScreen: false,
|
|
||||||
});
|
|
||||||
@ -1,16 +1,14 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
<meta charset="UTF-8" />
|
||||||
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<title>Lume Desktop</title>
|
||||||
<title>Lume Desktop</title>
|
</head>
|
||||||
</head>
|
<body
|
||||||
|
class="relative h-screen w-screen cursor-default select-none overflow-hidden bg-white font-sans text-black antialiased dark:bg-black dark:text-white"
|
||||||
<body class="relative w-screen h-screen overflow-hidden font-sans antialiased cursor-default select-none">
|
>
|
||||||
<div class="fixed top-0 left-0 z-50 w-full h-9" data-tauri-drag-region></div>
|
<div id="root" class="h-full w-full"></div>
|
||||||
<div id="root"></div>
|
<script type="module" src="/src/app.tsx"></script>
|
||||||
<script type="module" src="/src/app.tsx"></script>
|
</body>
|
||||||
</body>
|
</html>
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|||||||
@ -14,6 +14,7 @@
|
|||||||
"@lume/storage": "workspace:^",
|
"@lume/storage": "workspace:^",
|
||||||
"@lume/ui": "workspace:^",
|
"@lume/ui": "workspace:^",
|
||||||
"@lume/utils": "workspace:^",
|
"@lume/utils": "workspace:^",
|
||||||
|
"@radix-ui/react-checkbox": "^1.0.4",
|
||||||
"@tanstack/react-query": "^5.18.1",
|
"@tanstack/react-query": "^5.18.1",
|
||||||
"@tanstack/react-router": "^1.16.0",
|
"@tanstack/react-router": "^1.16.0",
|
||||||
"i18next": "^23.8.2",
|
"i18next": "^23.8.2",
|
||||||
@ -21,7 +22,8 @@
|
|||||||
"jotai": "^2.6.4",
|
"jotai": "^2.6.4",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-i18next": "^14.0.2"
|
"react-i18next": "^14.0.2",
|
||||||
|
"sonner": "^1.4.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@lume/tailwindcss": "workspace:^",
|
"@lume/tailwindcss": "workspace:^",
|
||||||
|
|||||||
@ -1,20 +1,89 @@
|
|||||||
import { Navigation } from "@lume/ui";
|
import {
|
||||||
|
BellFilledIcon,
|
||||||
|
BellIcon,
|
||||||
|
HomeFilledIcon,
|
||||||
|
HomeIcon,
|
||||||
|
SpaceFilledIcon,
|
||||||
|
SpaceIcon,
|
||||||
|
} from "@lume/icons";
|
||||||
|
import { useStorage } from "@lume/storage";
|
||||||
|
import { Link } from "@tanstack/react-router";
|
||||||
import { Outlet, createFileRoute } from "@tanstack/react-router";
|
import { Outlet, createFileRoute } from "@tanstack/react-router";
|
||||||
|
import { cn } from "@lume/utils";
|
||||||
|
|
||||||
export const Route = createFileRoute("/app")({
|
export const Route = createFileRoute("/app")({
|
||||||
component: App,
|
component: App,
|
||||||
});
|
});
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
const storage = useStorage();
|
||||||
<div className="flex flex-col w-screen h-screen bg-gradient-to-tl from-gray-1 to-gray-2 dark:from-graydark-1 dark:to-graydark-2">
|
|
||||||
<div data-tauri-drag-region className="h-9 shrink-0" />
|
return (
|
||||||
<div className="flex w-full h-full min-h-0">
|
<div className="flex h-screen w-screen flex-col bg-gradient-to-tr from-neutral-200 to-neutral-100 dark:from-neutral-800 dark:to-neutral-900">
|
||||||
<Navigation />
|
<div
|
||||||
<div className="flex-1 h-full pb-2 pl-1 pr-2">
|
data-tauri-drag-region
|
||||||
<Outlet />
|
className={cn(
|
||||||
</div>
|
"flex h-11 shrink-0 items-center gap-2",
|
||||||
</div>
|
storage.platform === "macos" ? "pl-24" : "",
|
||||||
</div>
|
)}
|
||||||
);
|
>
|
||||||
|
<Link to="/app/home">
|
||||||
|
{({ isActive }) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
|
||||||
|
isActive ? "bg-white shadow dark:bg-black" : "",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isActive ? (
|
||||||
|
<HomeFilledIcon className="size-5" />
|
||||||
|
) : (
|
||||||
|
<HomeIcon className="size-5" />
|
||||||
|
)}
|
||||||
|
<span className="text-sm font-medium">Home</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
<Link to="/app/space">
|
||||||
|
{({ isActive }) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
|
||||||
|
isActive ? "bg-white shadow dark:bg-black" : "",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isActive ? (
|
||||||
|
<SpaceFilledIcon className="size-5" />
|
||||||
|
) : (
|
||||||
|
<SpaceIcon className="size-5" />
|
||||||
|
)}
|
||||||
|
<span className="text-sm font-medium">Space</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
<Link to="/app/activity">
|
||||||
|
{({ isActive }) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg px-3 hover:bg-black/10 dark:hover:bg-white/10",
|
||||||
|
isActive ? "bg-white shadow dark:bg-black" : "",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isActive ? (
|
||||||
|
<BellFilledIcon className="size-5" />
|
||||||
|
) : (
|
||||||
|
<BellIcon className="size-5" />
|
||||||
|
)}
|
||||||
|
<span className="text-sm font-medium">Activity</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="flex h-full min-h-0 w-full">
|
||||||
|
<div className="h-full w-full flex-1 px-2 pb-2">
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
13
apps/desktop2/src/routes/app/activity.lazy.tsx
Normal file
13
apps/desktop2/src/routes/app/activity.lazy.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||||
|
|
||||||
|
export const Route = createLazyFileRoute("/app/activity")({
|
||||||
|
component: Activity,
|
||||||
|
});
|
||||||
|
|
||||||
|
function Activity() {
|
||||||
|
return (
|
||||||
|
<div className="h-full w-full overflow-hidden rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
|
||||||
|
<p>Activity</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
13
apps/desktop2/src/routes/app/home.lazy.tsx
Normal file
13
apps/desktop2/src/routes/app/home.lazy.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||||
|
|
||||||
|
export const Route = createLazyFileRoute("/app/home")({
|
||||||
|
component: Home,
|
||||||
|
});
|
||||||
|
|
||||||
|
function Home() {
|
||||||
|
return (
|
||||||
|
<div className="h-full w-full overflow-hidden rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
|
||||||
|
<p>Home</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,13 +1,13 @@
|
|||||||
import { createLazyFileRoute } from "@tanstack/react-router";
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
||||||
|
|
||||||
export const Route = createLazyFileRoute("/app/space")({
|
export const Route = createLazyFileRoute("/app/space")({
|
||||||
component: Space,
|
component: Space,
|
||||||
});
|
});
|
||||||
|
|
||||||
function Space() {
|
function Space() {
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full rounded-xl overflow-hidden bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
|
<div className="h-full w-full overflow-hidden rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
|
||||||
<p>Hello</p>
|
<p>Space</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,52 +0,0 @@
|
|||||||
import { useArk } from "@lume/ark";
|
|
||||||
import { Keys } from "@lume/types";
|
|
||||||
import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
|
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
export const Route = createLazyFileRoute("/auth/create")({
|
|
||||||
component: Create,
|
|
||||||
});
|
|
||||||
|
|
||||||
function Create() {
|
|
||||||
const ark = useArk();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [keys, setKeys] = useState<Keys>(null);
|
|
||||||
|
|
||||||
const submit = async () => {
|
|
||||||
const save = await ark.save_account(keys);
|
|
||||||
if (save) {
|
|
||||||
navigate({ to: "/" });
|
|
||||||
} else {
|
|
||||||
console.log("create failed");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function genKeys() {
|
|
||||||
const cmd: Keys = await invoke("create_keys");
|
|
||||||
setKeys(cmd);
|
|
||||||
}
|
|
||||||
|
|
||||||
genKeys();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center w-screen h-screen">
|
|
||||||
<div>
|
|
||||||
<h3>Backup your key</h3>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
{keys ? <input name="nsec" readOnly value={keys.nsec} /> : null}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={submit}
|
|
||||||
className="w-full h-11 bg-gray-3 hover:bg-gray-4"
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
108
apps/desktop2/src/routes/auth/create/index.lazy.tsx
Normal file
108
apps/desktop2/src/routes/auth/create/index.lazy.tsx
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
import { LoaderIcon } from "@lume/icons";
|
||||||
|
import { cn } from "@lume/utils";
|
||||||
|
import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
export const Route = createLazyFileRoute("/auth/create/")({
|
||||||
|
component: Screen,
|
||||||
|
});
|
||||||
|
|
||||||
|
function Screen() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const [t] = useTranslation();
|
||||||
|
const [method, setMethod] = useState<"self" | "managed">("self");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const next = () => {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
if (method === "self") {
|
||||||
|
navigate({ to: "/auth/create/self" });
|
||||||
|
} else {
|
||||||
|
navigate({ to: "/auth/create/managed" });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<div className="mx-auto flex w-full max-w-md flex-col gap-8">
|
||||||
|
<div className="flex flex-col items-center gap-2 text-center">
|
||||||
|
<h1 className="text-2xl font-semibold">{t("signup.title")}</h1>
|
||||||
|
<p className="text-lg leading-snug text-neutral-600 dark:text-neutral-500">
|
||||||
|
{t("signup.subtitle")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setMethod("self")}
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col items-start rounded-xl bg-neutral-100 px-4 py-3.5 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800",
|
||||||
|
method === "self"
|
||||||
|
? "ring-1 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-offset-black"
|
||||||
|
: "",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<p className="font-semibold">{t("signup.selfManageMethod")}</p>
|
||||||
|
<p className="text-sm text-neutral-600 dark:text-neutral-500">
|
||||||
|
{t("signup.selfManageMethodDescription")}
|
||||||
|
</p>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setMethod("managed")}
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col items-start rounded-xl bg-neutral-100 px-4 py-3.5 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800",
|
||||||
|
method === "managed"
|
||||||
|
? "ring-1 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-offset-black"
|
||||||
|
: "",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<p className="font-semibold">{t("signup.providerMethod")}</p>
|
||||||
|
<p className="text-sm text-neutral-600 dark:text-neutral-500">
|
||||||
|
{t("signup.providerMethodDescription")}
|
||||||
|
</p>
|
||||||
|
</button>
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={next}
|
||||||
|
className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<LoaderIcon className="size-5 animate-spin" />
|
||||||
|
) : (
|
||||||
|
t("global.continue")
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
{method === "managed" ? (
|
||||||
|
<div className="flex flex-col gap-1.5 rounded-xl border border-red-200 bg-red-100 p-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-900 dark:text-red-200">
|
||||||
|
<p className="font-semibold text-red-900 dark:text-red-100">
|
||||||
|
Attention:
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
You're chosing Managed by Provider, this feature still in
|
||||||
|
"Beta".
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Some functions still missing or not work as expected, you
|
||||||
|
shouldn't create your main account with this method
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="https://github.com/kind-0/nsecbunkerd/blob/master/OAUTH-LIKE-FLOW.md"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="text-blue-500"
|
||||||
|
>
|
||||||
|
Learn more
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
5
apps/desktop2/src/routes/auth/create/managed.lazy.tsx
Normal file
5
apps/desktop2/src/routes/auth/create/managed.lazy.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { createLazyFileRoute } from '@tanstack/react-router'
|
||||||
|
|
||||||
|
export const Route = createLazyFileRoute('/auth/create/managed')({
|
||||||
|
component: () => <div>Hello /auth/create/managed!</div>
|
||||||
|
})
|
||||||
164
apps/desktop2/src/routes/auth/create/self.lazy.tsx
Normal file
164
apps/desktop2/src/routes/auth/create/self.lazy.tsx
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
import { useArk } from "@lume/ark";
|
||||||
|
import { CheckIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
|
||||||
|
import { Keys } from "@lume/types";
|
||||||
|
import { onboardingAtom } from "@lume/utils";
|
||||||
|
import * as Checkbox from "@radix-ui/react-checkbox";
|
||||||
|
import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
|
||||||
|
import { useSetAtom } from "jotai";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
export const Route = createLazyFileRoute("/auth/create/self")({
|
||||||
|
component: Create,
|
||||||
|
});
|
||||||
|
|
||||||
|
function Create() {
|
||||||
|
const ark = useArk();
|
||||||
|
const setOnboarding = useSetAtom(onboardingAtom);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const [t] = useTranslation();
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [showKey, setShowKey] = useState(false);
|
||||||
|
const [confirm, setConfirm] = useState({ c1: false, c2: false, c3: false });
|
||||||
|
const [keys, setKeys] = useState<Keys>(null);
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
const save = await ark.save_account(keys);
|
||||||
|
|
||||||
|
if (!save) {
|
||||||
|
setLoading(false);
|
||||||
|
toast.error("Save account keys failed, please try again later.");
|
||||||
|
}
|
||||||
|
|
||||||
|
// update state
|
||||||
|
setLoading(false);
|
||||||
|
setOnboarding({ open: true, newUser: true });
|
||||||
|
|
||||||
|
// next step
|
||||||
|
navigate({ to: "/app/space", replace: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function genKeys() {
|
||||||
|
const res = await ark.create_keys();
|
||||||
|
setKeys(res);
|
||||||
|
}
|
||||||
|
genKeys();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<div className="mx-auto flex w-full max-w-md flex-col gap-8">
|
||||||
|
<div className="flex flex-col items-center gap-2 text-center">
|
||||||
|
<h1 className="text-2xl font-semibold">
|
||||||
|
{t("signupWithSelfManage.title")}
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg leading-snug text-neutral-600 dark:text-neutral-500">
|
||||||
|
{t("signupWithSelfManage.subtitle")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="mb-0 flex flex-col gap-6">
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="relative">
|
||||||
|
{keys ? (
|
||||||
|
<input
|
||||||
|
readOnly
|
||||||
|
value={keys.nsec}
|
||||||
|
type={showKey ? "text" : "password"}
|
||||||
|
className="h-11 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-10 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowKey((state) => !state)}
|
||||||
|
className="absolute right-2 top-2 inline-flex size-7 items-center justify-center rounded-lg bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
|
||||||
|
>
|
||||||
|
{showKey ? (
|
||||||
|
<EyeOnIcon className="size-4" />
|
||||||
|
) : (
|
||||||
|
<EyeOffIcon className="size-4" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Checkbox.Root
|
||||||
|
checked={confirm.c1}
|
||||||
|
onCheckedChange={() =>
|
||||||
|
setConfirm((state) => ({ ...state, c1: !state.c1 }))
|
||||||
|
}
|
||||||
|
className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-100 outline-none dark:bg-neutral-900"
|
||||||
|
id="confirm1"
|
||||||
|
>
|
||||||
|
<Checkbox.Indicator className="text-blue-500">
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</Checkbox.Indicator>
|
||||||
|
</Checkbox.Root>
|
||||||
|
<label
|
||||||
|
className="text-sm text-neutral-700 dark:text-neutral-400"
|
||||||
|
htmlFor="confirm1"
|
||||||
|
>
|
||||||
|
{t("signupWithSelfManage.confirm1")}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Checkbox.Root
|
||||||
|
checked={confirm.c2}
|
||||||
|
onCheckedChange={() =>
|
||||||
|
setConfirm((state) => ({ ...state, c2: !state.c2 }))
|
||||||
|
}
|
||||||
|
className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-100 outline-none dark:bg-neutral-900"
|
||||||
|
id="confirm2"
|
||||||
|
>
|
||||||
|
<Checkbox.Indicator className="text-blue-500">
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</Checkbox.Indicator>
|
||||||
|
</Checkbox.Root>
|
||||||
|
<label
|
||||||
|
className="text-sm text-neutral-700 dark:text-neutral-400"
|
||||||
|
htmlFor="confirm2"
|
||||||
|
>
|
||||||
|
{t("signupWithSelfManage.confirm2")}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Checkbox.Root
|
||||||
|
checked={confirm.c3}
|
||||||
|
onCheckedChange={() =>
|
||||||
|
setConfirm((state) => ({ ...state, c3: !state.c3 }))
|
||||||
|
}
|
||||||
|
className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-100 outline-none dark:bg-neutral-900"
|
||||||
|
id="confirm3"
|
||||||
|
>
|
||||||
|
<Checkbox.Indicator className="text-blue-500">
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</Checkbox.Indicator>
|
||||||
|
</Checkbox.Root>
|
||||||
|
<label
|
||||||
|
className="text-sm text-neutral-700 dark:text-neutral-400"
|
||||||
|
htmlFor="confirm3"
|
||||||
|
>
|
||||||
|
{t("signupWithSelfManage.confirm3")}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={submit}
|
||||||
|
disabled={!confirm.c1 || !confirm.c2 || !confirm.c3}
|
||||||
|
className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<LoaderIcon className="size-5 animate-spin" />
|
||||||
|
) : (
|
||||||
|
t("signupWithSelfManage.button")
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -3,15 +3,15 @@ import { Link, createFileRoute } from "@tanstack/react-router";
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
export const Route = createFileRoute("/landing/")({
|
export const Route = createFileRoute("/landing/")({
|
||||||
component: Index,
|
component: Screen,
|
||||||
});
|
});
|
||||||
|
|
||||||
function Index() {
|
function Screen() {
|
||||||
const storage = useStorage();
|
const storage = useStorage();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col w-screen h-screen bg-black">
|
<div className="flex w-screen h-screen bg-black">
|
||||||
<div className="flex flex-col items-center justify-between w-full h-full">
|
<div className="flex flex-col items-center justify-between w-full h-full">
|
||||||
<div />
|
<div />
|
||||||
<div className="flex flex-col items-center w-full max-w-4xl gap-10 mx-auto">
|
<div className="flex flex-col items-center w-full max-w-4xl gap-10 mx-auto">
|
||||||
@ -22,27 +22,27 @@ function Index() {
|
|||||||
alt="lume"
|
alt="lume"
|
||||||
className="w-2/3"
|
className="w-2/3"
|
||||||
/>
|
/>
|
||||||
<p className="mt-5 text-lg font-medium leading-snug whitespace-pre-line text-gray-7">
|
<p className="mt-5 text-lg font-medium leading-snug whitespace-pre-line text-neutral-700">
|
||||||
{t("welcome.title")}
|
{t("welcome.title")}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col w-full max-w-xs gap-2 mx-auto">
|
<div className="flex flex-col w-full max-w-sm gap-2 mx-auto">
|
||||||
<Link
|
<Link
|
||||||
to="/auth/create"
|
to="/auth/create"
|
||||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-10 rounded-xl hover:bg-blue-11"
|
className="inline-flex items-center justify-center w-full text-lg font-medium text-white bg-blue-500 h-11 rounded-xl hover:bg-blue-600"
|
||||||
>
|
>
|
||||||
{t("welcome.signup")}
|
{t("welcome.signup")}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/auth/import"
|
to="/auth/import"
|
||||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white rounded-xl bg-gray-12 hover:bg-gray-11"
|
className="inline-flex items-center justify-center w-full text-lg font-medium text-white h-11 rounded-xl bg-neutral-950 hover:bg-neutral-900"
|
||||||
>
|
>
|
||||||
{t("welcome.login")}
|
{t("welcome.login")}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-center h-11">
|
<div className="flex items-center justify-center h-11">
|
||||||
<p className="text-gray-8">
|
<p className="text-neutral-800">
|
||||||
{t("welcome.footer")}{" "}
|
{t("welcome.footer")}{" "}
|
||||||
<Link
|
<Link
|
||||||
to="https://nostr.com"
|
to="https://nostr.com"
|
||||||
|
|||||||
@ -26,7 +26,6 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-currency-input-field": "^3.6.14",
|
"react-currency-input-field": "^3.6.14",
|
||||||
"react-i18next": "^14.0.2",
|
"react-i18next": "^14.0.2",
|
||||||
"react-router-dom": "^6.22.0",
|
|
||||||
"react-string-replace": "^1.1.1",
|
"react-string-replace": "^1.1.1",
|
||||||
"sonner": "^1.4.0",
|
"sonner": "^1.4.0",
|
||||||
"string-strip-html": "^13.4.6",
|
"string-strip-html": "^13.4.6",
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user