feat: account switching

packages/app/src/Pages/settings/Accounts.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import ProfilePreview from "Element/ProfilePreview";
+import { LoginStore } from "Login";
+import useLoginHandler from "Hooks/useLoginHandler";
+import AsyncButton from "Element/AsyncButton";
+import { getActiveSubscriptions } from "Subscription";
+
+export default function AccountsPage() {
+  const { formatMessage } = useIntl();
+  const [key, setKey] = useState("");
+  const [error, setError] = useState("");
+  const loginHandler = useLoginHandler();
+  const logins = LoginStore.getSessions();
+  const sub = getActiveSubscriptions(LoginStore.allSubscriptions());
+
+  async function doLogin() {
+    try {
+      setError("");
+      await loginHandler.doLogin(key);
+      setKey("");
+    } catch (e) {
+      if (e instanceof Error) {
+        setError(e.message);
+      } else {
+        setError(
+          formatMessage({
+            defaultMessage: "Unknown login error",
+          })
+        );
+      }
+      console.error(e);
+    }
+  }
+
+  return (
+    <>
+      <h3>
+        <FormattedMessage defaultMessage="Logins" />
+      </h3>
+      {logins.map(a => (
+        <div className="card flex" key={a}>
+          <ProfilePreview
+            pubkey={a}
+            options={{
+              about: false,
+            }}
+            actions={
+              <div className="f-1">
+                <button className="mb10" onClick={() => LoginStore.switchAccount(a)}>
+                  <FormattedMessage defaultMessage="Switch" />
+                </button>
+                <button onClick={() => LoginStore.removeSession(a)}>
+                  <FormattedMessage defaultMessage="Logout" />
+                </button>
+              </div>
+            }
+          />
+        </div>
+      ))}
+
+      {sub && (
+        <>
+          <h3>
+            <FormattedMessage defaultMessage="Add Account" />
+          </h3>
+          <div className="flex">
+            <input
+              dir="auto"
+              type="text"
+              placeholder={formatMessage({
+                defaultMessage: "nsec, npub, nip-05, hex, mnemonic",
+              })}
+              className="f-grow mr10"
+              onChange={e => setKey(e.target.value)}
+            />
+            <AsyncButton onClick={() => doLogin()}>
+              <FormattedMessage defaultMessage="Login" />
+            </AsyncButton>
+          </div>
+        </>
+      )}
+      {error && <b className="error">{error}</b>}
+    </>
+  );
+}