-
setCollapsed(!collapsed)}>{title}
+
setCollapsed(!collapsed)}>
+ {title}
-
- {collapsed ? null : children}
+ {!collapsed && children}
>
);
};
diff --git a/packages/app/src/Pages/SettingsPage.tsx b/packages/app/src/Pages/SettingsPage.tsx
index d282b0a0..2ec14ea1 100644
--- a/packages/app/src/Pages/SettingsPage.tsx
+++ b/packages/app/src/Pages/SettingsPage.tsx
@@ -8,6 +8,7 @@ import RelayInfo from "Pages/settings/RelayInfo";
import AccountsPage from "Pages/settings/Accounts";
import { WalletSettingsRoutes } from "Pages/settings/WalletSettings";
import { ManageHandleRoutes } from "Pages/settings/handle";
+import ExportKeys from "Pages/settings/Keys";
import messages from "./messages";
@@ -49,6 +50,10 @@ export const SettingsRoutes: RouteObject[] = [
path: "accounts",
element:
,
},
+ {
+ path: "keys",
+ element:
,
+ },
...ManageHandleRoutes,
...WalletSettingsRoutes,
];
diff --git a/packages/app/src/Pages/new/NewUserFlow.tsx b/packages/app/src/Pages/new/NewUserFlow.tsx
index f34cc2d2..d319f82a 100644
--- a/packages/app/src/Pages/new/NewUserFlow.tsx
+++ b/packages/app/src/Pages/new/NewUserFlow.tsx
@@ -12,7 +12,12 @@ import messages from "./messages";
const WhatIsSnort = () => {
return (
-
}>
+
+
+
+ }>
@@ -28,7 +33,12 @@ const WhatIsSnort = () => {
const HowDoKeysWork = () => {
return (
- }>
+
+
+
+ }>
@@ -44,7 +54,12 @@ const HowDoKeysWork = () => {
const Extensions = () => {
return (
- }>
+
+
+
+ }>
diff --git a/packages/app/src/Pages/settings/Index.css b/packages/app/src/Pages/settings/Index.css
index a7e7c42e..abc47f67 100644
--- a/packages/app/src/Pages/settings/Index.css
+++ b/packages/app/src/Pages/settings/Index.css
@@ -13,16 +13,30 @@
border-radius: 10px;
cursor: pointer;
gap: 10px;
+ margin-bottom: 5px;
}
-.settings-row:hover {
+.settings-row.inner {
+ padding: 0.8em 0;
+ background-color: unset;
+ border-radius: unset;
+ margin: 0;
+}
+
+.settings-group-header {
+ font-weight: 600;
+ font-size: 16px;
+ padding: 0.8em 1em;
+ background-color: var(--note-bg);
+ border-radius: 10px;
+ margin-bottom: 5px;
+}
+
+.settings-row:hover,
+.settings-group-header:hover {
color: var(--highlight);
}
-.settings-row + .settings-row {
- margin-top: 10px;
-}
-
.align-end {
margin-left: auto;
}
@@ -31,3 +45,7 @@
width: 100%;
height: 100%;
}
+
+.settings-group-header .collapse-icon > svg {
+ width: 8px;
+}
diff --git a/packages/app/src/Pages/settings/Index.tsx b/packages/app/src/Pages/settings/Index.tsx
index 0d838ece..7ccc5d02 100644
--- a/packages/app/src/Pages/settings/Index.tsx
+++ b/packages/app/src/Pages/settings/Index.tsx
@@ -6,6 +6,7 @@ import { LoginStore, logout } from "Login";
import useLogin from "Hooks/useLogin";
import { unwrap } from "Util";
import { getCurrentSubscription } from "Subscription";
+import { CollapsedSection } from "Element/Collapsed";
import messages from "./messages";
@@ -22,21 +23,56 @@ const SettingsIndex = () => {
return (
<>
-
navigate("profile")}>
-
-
-
-
-
navigate("relays")}>
-
-
-
-
+
+
+
+
+ }
+ className="settings-group-header">
+
+
navigate("profile")}>
+
+
+
+
+
navigate("relays")}>
+
+
+
+
+
navigate("keys")}>
+
+
+
+
+
navigate("handle")}>
+
+
+
+
+
navigate("/subscribe/manage")}>
+
+
+
+
+ {sub && (
+
navigate("accounts")}>
+
+
+
+
+ )}
+
+
+
navigate("preferences")}>
+
navigate("wallet")}>
@@ -47,23 +83,7 @@ const SettingsIndex = () => {
- navigate("handle")}>
-
-
-
-
- navigate("/subscribe/manage")}>
-
-
-
-
- {sub && (
- navigate("accounts")}>
-
-
-
-
- )}
+
diff --git a/packages/app/src/Pages/settings/Keys.css b/packages/app/src/Pages/settings/Keys.css
new file mode 100644
index 00000000..49e8791e
--- /dev/null
+++ b/packages/app/src/Pages/settings/Keys.css
@@ -0,0 +1,5 @@
+.export-keys > .copy {
+ padding: 12px 16px;
+ border: 2px dashed #222222;
+ border-radius: 16px;
+}
diff --git a/packages/app/src/Pages/settings/Keys.tsx b/packages/app/src/Pages/settings/Keys.tsx
new file mode 100644
index 00000000..1fafd927
--- /dev/null
+++ b/packages/app/src/Pages/settings/Keys.tsx
@@ -0,0 +1,37 @@
+import "./Keys.css";
+import { FormattedMessage } from "react-intl";
+import { encodeTLV, NostrPrefix } from "@snort/nostr";
+
+import Copy from "Element/Copy";
+import useLogin from "Hooks/useLogin";
+import { hexToMnemonic } from "nip6";
+import { hexToBech32 } from "Util";
+
+export default function ExportKeys() {
+ const { publicKey, privateKey, generatedEntropy } = useLogin();
+ return (
+
+
+
+
+
+
+ {privateKey && (
+ <>
+
+
+
+
+ >
+ )}
+ {generatedEntropy && (
+ <>
+
+
+
+
+ >
+ )}
+
+ );
+}
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 3172ac10..b220bacb 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -581,19 +581,16 @@ button.tall {
flex-direction: row;
align-items: center;
justify-content: space-between;
-}
-
-.collapsable-section h3,
-.collapsable-section svg {
cursor: pointer;
}
.collapsable-section .collapse-icon {
+ transform: rotate(90deg);
transition: transform 300ms ease-in-out;
}
.collapsable-section .collapse-icon.flip {
- transform: rotate(180deg);
+ transform: rotate(270deg);
transition: transform 300ms ease-in-out;
}