feat: nwc

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

@@ -5,7 +5,9 @@ import { RouteObject, useNavigate } from "react-router-dom";
 
 import BlueWallet from "Icons/BlueWallet";
 import ConnectLNC from "Pages/settings/wallet/LNC";
-import ConnectLNDHub from "./wallet/LNDHub";
+import ConnectLNDHub from "Pages/settings/wallet/LNDHub";
+import ConnectNostrWallet from "Pages/settings/wallet/NWC";
+import NostrIcon from "Icons/Nostrich";
 
 const WalletSettings = () => {
   const navigate = useNavigate();
@@ -19,12 +21,14 @@ const WalletSettings = () => {
           <img src={LndLogo} width={100} />
           <h3 className="f-end">LND with LNC</h3>
         </div>
-        {
-          <div className="card" onClick={() => navigate("/settings/wallet/lndhub")}>
-            <BlueWallet width={100} height={100} />
-            <h3 className="f-end">LNDHub</h3>
-          </div>
-        }
+        <div className="card" onClick={() => navigate("/settings/wallet/lndhub")}>
+          <BlueWallet width={100} height={100} />
+          <h3 className="f-end">LNDHub</h3>
+        </div>
+        <div className="card" onClick={() => navigate("/settings/wallet/nwc")}>
+          <NostrIcon width={100} height={100} />
+          <h3 className="f-end">Nostr Wallet Connect</h3>
+        </div>
       </div>
     </>
   );
@@ -45,4 +49,8 @@ export const WalletSettingsRoutes = [
     path: "/settings/wallet/lndhub",
     element: <ConnectLNDHub />,
   },
+  {
+    path: "/settings/wallet/nwc",
+    element: <ConnectNostrWallet />,
+  },
 ] as Array<RouteObject>;

packages/app/src/Pages/settings/wallet/NWC.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { v4 as uuid } from "uuid";
+
+import AsyncButton from "Element/AsyncButton";
+import { unwrap } from "Util";
+import { WalletConfig, WalletKind, Wallets } from "Wallet";
+import { useNavigate } from "react-router-dom";
+import { NostrConnectWallet } from "Wallet/NostrWalletConnect";
+
+const ConnectNostrWallet = () => {
+  const navigate = useNavigate();
+  const { formatMessage } = useIntl();
+  const [config, setConfig] = useState<string>();
+  const [error, setError] = useState<string>();
+
+  async function tryConnect(config: string) {
+    try {
+      const connection = new NostrConnectWallet(config);
+      await connection.login();
+      const info = await connection.getInfo();
+
+      const newWallet = {
+        id: uuid(),
+        kind: WalletKind.NWC,
+        active: true,
+        info,
+        data: config,
+      } as WalletConfig;
+      Wallets.add(newWallet);
+
+      navigate("/wallet");
+    } catch (e) {
+      if (e instanceof Error) {
+        setError((e as Error).message);
+      } else {
+        setError(
+          formatMessage({
+            defaultMessage: "Unknown error",
+          })
+        );
+      }
+    }
+  }
+
+  return (
+    <>
+      <h4>
+        <FormattedMessage defaultMessage="Enter Nostr Wallet Connect config" />
+      </h4>
+      <div className="flex">
+        <div className="f-grow mr10">
+          <input
+            type="text"
+            placeholder="nostr+walletconnect:<pubkey>?relay=<relay>&secret=<secret>"
+            className="w-max"
+            value={config}
+            onChange={e => setConfig(e.target.value)}
+          />
+        </div>
+        <AsyncButton onClick={() => tryConnect(unwrap(config))} disabled={!config}>
+          <FormattedMessage defaultMessage="Connect" />
+        </AsyncButton>
+      </div>
+      {error && <b className="error p10">{error}</b>}
+    </>
+  );
+};
+
+export default ConnectNostrWallet;