feat: Handle NIP5 LN Address

packages/app/src/Pages/ProfilePage.css

@@ -72,11 +72,6 @@
   line-height: 23px;
 }
 
-.profile .nip05 {
-  display: flex;
-  font-size: 16px;
-}
-
 .profile-wrapper > .avatar-wrapper {
   z-index: 1;
 }

packages/app/src/Pages/SettingsPage.tsx

@@ -6,7 +6,7 @@ import Relay from "Pages/settings/Relays";
 import Preferences from "Pages/settings/Preferences";
 import RelayInfo from "Pages/settings/RelayInfo";
 import { WalletSettingsRoutes } from "Pages/settings/WalletSettings";
-import Nip5ManagePage from "Pages/settings/ManageNip5";
+import { ManageHandleRoutes } from "Pages/settings/handle";
 
 import messages from "./messages";
 
@@ -44,9 +44,6 @@ export const SettingsRoutes: RouteObject[] = [
     path: "preferences",
     element: <Preferences />,
   },
-  {
-    path: "nip5",
-    element: <Nip5ManagePage />,
-  },
+  ...ManageHandleRoutes,
   ...WalletSettingsRoutes,
 ];

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

@@ -47,7 +47,7 @@ const SettingsIndex = () => {
           <FormattedMessage {...messages.Donate} />
           <Icon name="arrowFront" />
         </div>
-        <div className="settings-row" onClick={() => navigate("nip5")}>
+        <div className="settings-row" onClick={() => navigate("handle")}>
           <Icon name="badge" />
           <FormattedMessage defaultMessage="Manage Nostr Adddress (NIP-05)" />
           <Icon name="arrowFront" />

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

@@ -1,113 +0,0 @@
-import { useEffect, useState } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { Link } from "react-router-dom";
-
-import { ApiHost } from "Const";
-import Modal from "Element/Modal";
-import useEventPublisher from "Feed/EventPublisher";
-import { ServiceError } from "Nip05/ServiceProvider";
-import SnortServiceProvider, { ManageHandle } from "Nip05/SnortServiceProvider";
-
-export default function Nip5ManagePage() {
-  const publisher = useEventPublisher();
-  const { formatMessage } = useIntl();
-  const [handles, setHandles] = useState<Array<ManageHandle>>();
-  const [transfer, setTransfer] = useState("");
-  const [newKey, setNewKey] = useState("");
-  const [error, setError] = useState<Array<string>>([]);
-  const sp = new SnortServiceProvider(publisher, `${ApiHost}/api/v1/n5sp`);
-
-  useEffect(() => {
-    loadHandles().catch(console.error);
-  }, []);
-
-  async function loadHandles() {
-    const list = await sp.list();
-    setHandles(list as Array<ManageHandle>);
-  }
-
-  async function startTransfer() {
-    if (!transfer || !newKey) return;
-    setError([]);
-    const rsp = await sp.transfer(transfer, newKey);
-    if ("error" in rsp) {
-      setError((rsp as ServiceError).errors);
-      return;
-    }
-    await loadHandles();
-    setTransfer("");
-    setNewKey("");
-  }
-
-  function close() {
-    setTransfer("");
-    setNewKey("");
-    setError([]);
-  }
-
-  if (!handles) {
-    return null;
-  }
-  return (
-    <>
-      <h3>
-        <FormattedMessage defaultMessage="Nostr Address" />
-      </h3>
-      {handles.length === 0 && (
-        <FormattedMessage
-          defaultMessage="It looks like you dont have any, check {link} to buy one!"
-          values={{
-            link: (
-              <Link to="/verification">
-                <FormattedMessage defaultMessage="Verification" />
-              </Link>
-            ),
-          }}
-        />
-      )}
-      {handles.map(a => (
-        <>
-          <div className="card flex" key={a.id}>
-            <div className="f-grow">
-              <h4 className="nip05">
-                {a.handle}@
-                <span className="domain" data-domain={a.domain?.toLowerCase()}>
-                  {a.domain}
-                </span>
-              </h4>
-            </div>
-            <div>
-              <button className="button" onClick={() => setTransfer(a.id)}>
-                <FormattedMessage defaultMessage="Transfer" />
-              </button>
-            </div>
-          </div>
-        </>
-      ))}
-      {transfer && (
-        <Modal onClose={close}>
-          <h4>
-            <FormattedMessage defaultMessage="Transfer to Pubkey" />
-          </h4>
-          <div className="flex">
-            <div className="f-grow">
-              <input
-                type="text"
-                className="w-max mr10"
-                placeholder={formatMessage({
-                  defaultMessage: "Public key (npub/nprofile)",
-                })}
-                value={newKey}
-                onChange={e => setNewKey(e.target.value)}
-              />
-            </div>
-            <button className="button" onClick={() => startTransfer()}>
-              <FormattedMessage defaultMessage="Transfer" />
-            </button>
-          </div>
-          {error && <b className="error">{error}</b>}
-        </Modal>
-      )}
-    </>
-  );
-}

packages/app/src/Pages/settings/handle/LNAddress.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { ApiHost } from "Const";
+import AsyncButton from "Element/AsyncButton";
+import useEventPublisher from "Feed/EventPublisher";
+import { LNURL } from "LNURL";
+import SnortServiceProvider, { ManageHandle } from "Nip05/SnortServiceProvider";
+
+export default function LNForwardAddress({ handle }: { handle: ManageHandle }) {
+  const { formatMessage } = useIntl();
+  const publisher = useEventPublisher();
+  const sp = new SnortServiceProvider(publisher, `${ApiHost}/api/v1/n5sp`);
+
+  const [newAddress, setNewAddress] = useState(handle.lnAddress ?? "");
+  const [error, setError] = useState("");
+
+  async function startUpdate() {
+    const req = {
+      lnAddress: newAddress,
+    };
+
+    setError("");
+    try {
+      const svc = new LNURL(newAddress);
+      await svc.load();
+    } catch {
+      setError(
+        formatMessage({
+          defaultMessage: "Invalid LNURL",
+        })
+      );
+      return;
+    }
+
+    const rsp = await sp.patch(handle.id, req);
+    if ("error" in rsp) {
+      setError(rsp.error);
+    }
+  }
+
+  return (
+    <div className="card">
+      <h4>
+        <FormattedMessage defaultMessage="Update Lightning Address" />
+      </h4>
+      <p>
+        <FormattedMessage defaultMessage="Your handle will act like a lightning address and will redirect to your chosen LNURL or Lightning address" />
+      </p>
+      <div className="flex">
+        <div className="f-grow">
+          <input
+            type="text"
+            className="w-max mr10"
+            placeholder={formatMessage({
+              defaultMessage: "LNURL or Lightning Address",
+            })}
+            value={newAddress}
+            onChange={e => setNewAddress(e.target.value)}
+          />
+        </div>
+        <AsyncButton onClick={() => startUpdate()}>
+          <FormattedMessage defaultMessage="Update" />
+        </AsyncButton>
+      </div>
+      {error && <b className="error">{error}</b>}
+    </div>
+  );
+}

packages/app/src/Pages/settings/handle/ListHandles.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { FormattedMessage } from "react-intl";
+import { Link, useNavigate } from "react-router-dom";
+
+import { ApiHost } from "Const";
+import useEventPublisher from "Feed/EventPublisher";
+import SnortServiceProvider, { ManageHandle } from "Nip05/SnortServiceProvider";
+
+export default function ListHandles() {
+  const navigate = useNavigate();
+  const publisher = useEventPublisher();
+  const [handles, setHandles] = useState<Array<ManageHandle>>([]);
+  const sp = new SnortServiceProvider(publisher, `${ApiHost}/api/v1/n5sp`);
+
+  useEffect(() => {
+    loadHandles().catch(console.error);
+  }, []);
+
+  async function loadHandles() {
+    const list = await sp.list();
+    setHandles(list as Array<ManageHandle>);
+  }
+
+  return (
+    <>
+      {handles.length === 0 && (
+        <FormattedMessage
+          defaultMessage="It looks like you dont have any, check {link} to buy one!"
+          values={{
+            link: (
+              <Link to="/verification">
+                <FormattedMessage defaultMessage="Verification" />
+              </Link>
+            ),
+          }}
+        />
+      )}
+      {handles.map(a => (
+        <div className="card flex" key={a.id}>
+          <div className="f-grow">
+            <h4 className="nip05">
+              {a.handle}@
+              <span className="domain" data-domain={a.domain?.toLowerCase()}>
+                {a.domain}
+              </span>
+            </h4>
+          </div>
+          <div>
+            <button
+              onClick={() =>
+                navigate("manage", {
+                  state: a,
+                })
+              }>
+              <FormattedMessage defaultMessage="Manage" />
+            </button>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}

packages/app/src/Pages/settings/handle/Manage.tsx

@@ -0,0 +1,21 @@
+import { ManageHandle } from "Nip05/SnortServiceProvider";
+import { useLocation } from "react-router-dom";
+import LNForwardAddress from "./LNAddress";
+import TransferHandle from "./TransferHandle";
+
+export default function ManageHandleIndex() {
+  const location = useLocation();
+  const handle = location.state as ManageHandle;
+  return (
+    <>
+      <h3 className="nip05">
+        {handle.handle}@
+        <span className="domain" data-domain={handle.domain?.toLowerCase()}>
+          {handle.domain}
+        </span>
+      </h3>
+      <LNForwardAddress handle={handle} />
+      <TransferHandle handle={handle} />
+    </>
+  );
+}

packages/app/src/Pages/settings/handle/TransferHandle.tsx

@@ -0,0 +1,54 @@
+import { ApiHost } from "Const";
+import AsyncButton from "Element/AsyncButton";
+import useEventPublisher from "Feed/EventPublisher";
+import { ServiceError } from "Nip05/ServiceProvider";
+import SnortServiceProvider, { ManageHandle } from "Nip05/SnortServiceProvider";
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+
+export default function TransferHandle({ handle }: { handle: ManageHandle }) {
+  const publisher = useEventPublisher();
+  const navigate = useNavigate();
+  const { formatMessage } = useIntl();
+  const sp = new SnortServiceProvider(publisher, `${ApiHost}/api/v1/n5sp`);
+
+  const [newKey, setNewKey] = useState("");
+  const [error, setError] = useState<Array<string>>([]);
+
+  async function startTransfer() {
+    if (!newKey) return;
+    setError([]);
+    const rsp = await sp.transfer(handle.id, newKey);
+    if ("error" in rsp) {
+      setError((rsp as ServiceError).errors);
+      return;
+    }
+    navigate(-1);
+  }
+
+  return (
+    <div className="card">
+      <h4>
+        <FormattedMessage defaultMessage="Transfer to Pubkey" />
+      </h4>
+      <div className="flex">
+        <div className="f-grow">
+          <input
+            type="text"
+            className="w-max mr10"
+            placeholder={formatMessage({
+              defaultMessage: "Public key (npub/nprofile)",
+            })}
+            value={newKey}
+            onChange={e => setNewKey(e.target.value)}
+          />
+        </div>
+        <AsyncButton onClick={() => startTransfer()}>
+          <FormattedMessage defaultMessage="Transfer" />
+        </AsyncButton>
+      </div>
+      {error && <b className="error">{error}</b>}
+    </div>
+  );
+}

packages/app/src/Pages/settings/handle/index.tsx

@@ -0,0 +1,35 @@
+import { FormattedMessage } from "react-intl";
+import { Outlet, RouteObject, useNavigate } from "react-router-dom";
+
+import ListHandles from "./ListHandles";
+import ManageHandleIndex from "./Manage";
+
+export default function ManageHandlePage() {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <h3 onClick={() => navigate("/settings/handle")} className="pointer">
+        <FormattedMessage defaultMessage="Nostr Address" />
+      </h3>
+      <Outlet />
+    </>
+  );
+}
+
+export const ManageHandleRoutes = [
+  {
+    path: "/settings/handle",
+    element: <ManageHandlePage />,
+    children: [
+      {
+        path: "",
+        element: <ListHandles />,
+      },
+      {
+        path: "manage",
+        element: <ManageHandleIndex />,
+      },
+    ],
+  },
+] as Array<RouteObject>;