polish nwc connection flow

.gitignore

@@ -17,6 +17,7 @@ out
 pnpm-lock.yaml
 *.db
 *.db-journal
+bun.lockb
 
 # Editor directories and files
 .vscode/*

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-pnpm exec lint-staged
+bun run lint-staged

README.md

@@ -8,6 +8,12 @@ Download Lume for your platform here: [https://github.com/luminous-devs/lume/rel
 
 Supported platform: macOS, Windows and Linux
 
+### Prerequisites
+
+- Bun: https://bun.sh/docs/installation
+
+- Tauri: https://tauri.app/v1/guides/getting-started/prerequisites#setting-up-macos
+
 ### Develop
 
 Clone project
@@ -19,23 +25,17 @@ git clone https://github.com/luminous-devs/lume.git && cd lume
 Install packages
 
 ```
-pnpm install
+bun install
 ```
 
-Run dev
+Run dev build
 
 ```
-pnpm tauri dev
+bun tauri dev
 ```
 
-Build
+Generate production build
 
 ```
-pnpm tauri build
-```
-
-(Advance) - Generate SQLite migration
-
-```
-pnpm add-migrate <migrate_name>
-```
+bun tauri build
+```

package.json

@@ -11,7 +11,7 @@
     "prepare": "husky install",
     "lint": "eslint ./src --fix",
     "format": "prettier ./src --write",
-    "dep-update": "pnpm update && cd src-tauri/ && cargo update"
+    "dep-update": "bun update && cd src-tauri/ && cargo update"
   },
   "lint-staged": {
     "**/*.{ts, tsx}": "eslint --fix",

src-tauri/tauri.conf.json

@@ -1,8 +1,8 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
   "build": {
-    "beforeBuildCommand": "pnpm build",
-    "beforeDevCommand": "pnpm dev",
+    "beforeBuildCommand": "bun run build",
+    "beforeDevCommand": "bun run dev",
     "devPath": "http://localhost:3000",
     "distDir": "../dist",
     "withGlobalTauri": true

src/app/auth/unlock.tsx

@@ -56,7 +56,7 @@ export function UnlockScreen() {
       if (!db.secureDB) db.secureDB = stronghold;
 
       const privkey = await db.secureLoad(db.account.pubkey);
-      const uri = await db.secureLoad('walletConnectURL', 'alby');
+      const uri = await db.secureLoad('walletConnectURL', 'nwc');
 
       if (privkey) setPrivkey(privkey);
       if (uri) setWalletConnectURL(uri);

src/app/nwc/components/alby.tsx

@@ -45,7 +45,7 @@ export function NWCAlby() {
       });
 
       webview.listen('tauri://close-requested', async () => {
-        await db.secureSave('walletConnectURL', walletConnectURL, 'alby');
+        await db.secureSave('walletConnectURL', walletConnectURL, 'nwc');
         setWalletConnectURL(walletConnectURL);
         setIsConnected(true);
         setIsloading(false);
@@ -59,7 +59,7 @@ export function NWCAlby() {
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <div className="flex items-center justify-between">
-        <div className="inline-flex items-center gap-2">
+        <div className="inline-flex items-center gap-2.5">
           <div className="inline-flex h-11 w-11 items-center justify-center rounded-md bg-orange-200">
             <AlbyIcon className="h-8 w-8" />
           </div>
@@ -71,7 +71,7 @@ export function NWCAlby() {
         <Dialog.Trigger asChild>
           <button
             type="button"
-            className="inline-flex h-8 w-min items-center justify-center rounded-md bg-white/10 px-2.5 text-sm font-medium text-white hover:bg-white/20"
+            className="inline-flex h-8 w-min items-center justify-center rounded-md bg-white/10 px-2.5 text-sm font-medium text-white hover:bg-green-500"
           >
             Connect
           </button>

src/app/nwc/components/other.tsx

@@ -57,9 +57,10 @@ export function NWCOther() {
       const params = new URLSearchParams(uriObj.search);
 
       if (params.has('relay') && params.has('secret')) {
-        await db.secureSave('walletConnectURL', data.uri, 'alby');
+        await db.secureSave('walletConnectURL', data.uri, 'nwc');
         setWalletConnectURL(data.uri);
         setIsloading(false);
+        setIsOpen(false);
       }
     } catch (e) {
       setIsloading(false);
@@ -73,22 +74,22 @@ export function NWCOther() {
 
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <div className="flex items-center justify-between pt-3">
-        <div className="inline-flex items-center gap-2">
+      <div className="flex items-center justify-between pt-4">
+        <div className="inline-flex items-center gap-2.5">
           <div className="inline-flex h-11 w-11 items-center justify-center rounded-md bg-white/10">
             <WorldIcon className="h-5 w-5" />
           </div>
           <div>
             <h5 className="font-semibold leading-tight text-white">URI String</h5>
             <p className="text-sm leading-tight text-white/50">
-              Using format nostr+walletconnect://
+              Using format nostr+walletconnect:
             </p>
           </div>
         </div>
         <Dialog.Trigger asChild>
           <button
             type="button"
-            className="inline-flex h-8 w-min items-center justify-center rounded-md bg-white/10 px-2.5 text-sm font-medium text-white hover:bg-white/20"
+            className="inline-flex h-8 w-min items-center justify-center rounded-md bg-white/10 px-2.5 text-sm font-medium text-white hover:bg-green-500"
           >
             Connect
           </button>
@@ -123,6 +124,7 @@ export function NWCOther() {
                 </label>
                 <input
                   {...register('uri', { required: true })}
+                  placeholder="nostr+walletconnect:"
                   spellCheck={false}
                   autoComplete="off"
                   autoCorrect="off"

src/app/nwc/index.tsx

@@ -1,19 +1,95 @@
 import { NWCAlby } from '@app/nwc/components/alby';
 import { NWCOther } from '@app/nwc/components/other';
 
+import { useStorage } from '@libs/storage/provider';
+
+import { CheckCircleIcon } from '@shared/icons';
+
+import { useStronghold } from '@stores/stronghold';
+
 export function NWCScreen() {
+  const { db } = useStorage();
+
+  const [walletConnectURL, setWalletConnectURL] = useStronghold((state) => [
+    state.walletConnectURL,
+    state.setWalletConnectURL,
+  ]);
+
+  const remove = async () => {
+    setWalletConnectURL('');
+    await db.secureSave('walletConnectURL', '', 'nwc');
+  };
+
   return (
     <div className="flex h-full w-full items-center justify-center">
       <div className="flex w-full flex-col gap-5">
         <div className="text-center">
-          <h3 className="text-2xl font-bold leading-tight">Nostr Wallet Connect</h3>
+          <h3 className="text-2xl font-bold leading-tight">
+            Nostr Wallet Connect (Beta)
+          </h3>
           <p className="leading-tight text-white/50">
             Sending tips easily via Bitcoin Lightning.
           </p>
         </div>
-        <div className="mx-auto flex w-full max-w-lg flex-col gap-3 divide-y divide-white/5 rounded-xl bg-white/10 p-3">
-          <NWCAlby />
-          <NWCOther />
+        <div className="mx-auto max-w-lg">
+          {!walletConnectURL ? (
+            <div className="flex w-full flex-col gap-4 divide-y divide-white/5 rounded-xl bg-white/10 p-3">
+              <NWCAlby />
+              <NWCOther />
+            </div>
+          ) : (
+            <div className="flex w-full flex-col rounded-xl bg-white/10 p-3">
+              <div className="mb-1 inline-flex items-center gap-1.5 text-sm text-green-500">
+                <CheckCircleIcon className="h-4 w-4" />
+                <p>You&apos;re using nostr wallet connect</p>
+              </div>
+              <div className="flex flex-col gap-2">
+                <textarea
+                  readOnly
+                  value={walletConnectURL}
+                  className="relative h-40 w-full resize-none rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+                />
+                <button
+                  type="button"
+                  onClick={() => remove()}
+                  className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/5 px-6 font-medium leading-none text-red-500 hover:bg-white/10 focus:outline-none disabled:opacity-50"
+                >
+                  Remove connection
+                </button>
+              </div>
+            </div>
+          )}
+          <div className="mt-5 flex flex-col gap-4">
+            <div className="flex flex-col gap-1.5">
+              <h5 className="text-sm font-bold text-white/80">Introduction</h5>
+              <p className="text-sm text-white/50">
+                Nostr Wallet Connect (NWC) is a way for applications like Nostr clients to
+                access a remote Lightning wallet through a standardized protocol.
+              </p>
+              <p className="text-sm text-white/50">
+                To learn more about the details have a look at{' '}
+                <a
+                  href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md"
+                  target="_blank"
+                  className="text-fuchsia-200"
+                  rel="noreferrer"
+                >
+                  the specs (NIP47)
+                </a>
+              </p>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <h5 className="text-sm font-bold text-white/80">About tipping</h5>
+              <p className="text-sm text-white/50">
+                Also known as Zap in other Nostr client.
+              </p>
+              <p className="text-sm text-white/50">
+                Lume doesn&apos;t take any commission or platform fees when you tip
+                someone.
+              </p>
+              <p className="text-sm text-white/50">Lume doesn&apos;t hold your Bitcoin</p>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/shared/notes/actions/zap.tsx

@@ -3,11 +3,11 @@ import { SendPaymentResponse } from '@getalby/sdk/dist/types';
 import * as Dialog from '@radix-ui/react-dialog';
 import { message } from '@tauri-apps/api/dialog';
 import { QRCodeSVG } from 'qrcode.react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import CurrencyInput from 'react-currency-input-field';
 import TextareaAutosize from 'react-textarea-autosize';
 
-import { AlbyIcon, CancelIcon, ZapIcon } from '@shared/icons';
+import { CancelIcon, ZapIcon } from '@shared/icons';
 
 import { useStronghold } from '@stores/stronghold';
 
@@ -29,6 +29,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
   const [isCompleted, setIsCompleted] = useState(false);
 
   const walletConnectURL = useStronghold((state) => state.walletConnectURL);
+  const nwc = useRef(null);
 
   const createZapRequest = async () => {
     try {
@@ -41,16 +42,16 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
           type: 'error',
         });
 
-      // user don't connect Alby, create QR Code for invoice
+      // user don't connect nwc, create QR Code for invoice
       if (!walletConnectURL) return setInvoice(res);
 
-      // user connect Alby
-      const nwc = new webln.NostrWebLNProvider({
+      // user connect nwc
+      nwc.current = new webln.NostrWebLNProvider({
         nostrWalletConnectUrl: walletConnectURL,
       });
-      await nwc.enable();
+      await nwc.current.enable();
 
-      const send: SendPaymentResponse = await nwc.sendPayment(res);
+      const send: SendPaymentResponse = await nwc.current.sendPayment(res);
       if (send) {
         await sendNativeNotification(
           `You've tipped ${compactNumber.format(send.amount)} sats to ${
@@ -59,7 +60,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
         );
 
         // eose
-        nwc.close();
+        nwc.current.close();
         setIsCompleted(true);
 
         // reset after 3 secs
@@ -67,6 +68,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
         clearTimeout(timeout);
       }
     } catch (e) {
+      nwc.current.close();
       await message(JSON.stringify(e), { title: 'Zap', type: 'error' });
     }
   };
@@ -177,10 +179,18 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
                         <button
                           type="button"
                           onClick={() => createZapRequest()}
-                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-orange-100 px-4 font-medium text-black hover:bg-orange-200"
+                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 px-4 font-medium text-white hover:bg-fuchsia-600"
                         >
-                          <p>{isCompleted ? 'Successfully tipped' : 'Tip with Alby'}</p>
-                          <AlbyIcon className="h-6 w-6" />
+                          {isCompleted ? (
+                            <p>Successfully tipped</p>
+                          ) : (
+                            <span className="flex flex-col">
+                              <p className="mb-px leading-none">Send tip</p>
+                              <p className="text-xs leading-none text-white/70">
+                                You&apos;re using nostr wallet connect
+                              </p>
+                            </span>
+                          )}
                         </button>
                       ) : (
                         <button
@@ -191,10 +201,6 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
                           <p>Create Lightning invoice</p>
                         </button>
                       )}
-                      <span className="text-center text-sm leading-tight text-white/50">
-                        The recipient receives 100% of the amount that you send. Lume does
-                        not take any commission, and you cannot get refund
-                      </span>
                     </div>
                   </div>
                 </>