From 45ca2730646d43ff0545acdefcb8e271dd2de3e9 Mon Sep 17 00:00:00 2001 From: Kieran Date: Fri, 21 Apr 2023 21:55:04 +0100 Subject: [PATCH] feat: export keys & new settings page --- packages/app/public/icons.svg | 6 ++ packages/app/src/Element/Collapsed.tsx | 16 +++-- packages/app/src/Pages/SettingsPage.tsx | 5 ++ packages/app/src/Pages/new/NewUserFlow.tsx | 21 +++++- packages/app/src/Pages/settings/Index.css | 28 ++++++-- packages/app/src/Pages/settings/Index.tsx | 74 ++++++++++++++-------- packages/app/src/Pages/settings/Keys.css | 5 ++ packages/app/src/Pages/settings/Keys.tsx | 37 +++++++++++ packages/app/src/index.css | 7 +- 9 files changed, 152 insertions(+), 47 deletions(-) create mode 100644 packages/app/src/Pages/settings/Keys.css create mode 100644 packages/app/src/Pages/settings/Keys.tsx diff --git a/packages/app/public/icons.svg b/packages/app/public/icons.svg index 68067aff..f40715f4 100644 --- a/packages/app/public/icons.svg +++ b/packages/app/public/icons.svg @@ -139,5 +139,11 @@ + + + + + + \ No newline at end of file diff --git a/packages/app/src/Element/Collapsed.tsx b/packages/app/src/Element/Collapsed.tsx index 26b20b7a..b315d672 100644 --- a/packages/app/src/Element/Collapsed.tsx +++ b/packages/app/src/Element/Collapsed.tsx @@ -32,23 +32,25 @@ export const CollapsedIcon = ({ icon, collapsed }: CollapsedIconProps) => { interface CollapsedSectionProps { title: ReactNode; children: ReactNode; + className?: string; } -export const CollapsedSection = ({ title, children }: CollapsedSectionProps) => { +export const CollapsedSection = ({ title, children, className }: CollapsedSectionProps) => { const [collapsed, setCollapsed] = useState(true); const icon = ( -
setCollapsed(!collapsed)}> - +
+
); return ( <> -
-

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; }