wip: redesign nwc

src/shared/alby.tsx

@@ -1,159 +0,0 @@
-import { webln } from '@getalby/sdk';
-import * as Dialog from '@radix-ui/react-dialog';
-import { message } from '@tauri-apps/api/dialog';
-import { WebviewWindow } from '@tauri-apps/api/window';
-import { useState } from 'react';
-
-import { useStorage } from '@libs/storage/provider';
-
-import {
-  AlbyIcon,
-  ArrowRightCircleIcon,
-  CancelIcon,
-  CheckCircleIcon,
-  LoaderIcon,
-  StarsIcon,
-} from '@shared/icons';
-
-import { useStronghold } from '@stores/stronghold';
-
-export function AlbyConnectButton() {
-  const { db } = useStorage();
-  const setWalletConnectURL = useStronghold((state) => state.setWalletConnectURL);
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [isLoading, setIsloading] = useState(false);
-  const [isConnected, setIsConnected] = useState(false);
-
-  const initAlby = async () => {
-    try {
-      setIsloading(true);
-
-      const provider = webln.NostrWebLNProvider.withNewSecret();
-      const walletConnectURL = provider.getNostrWalletConnectUrl(true);
-
-      // get auth url
-      const authURL = provider.getAuthorizationUrl({ name: 'Lume' });
-
-      // open auth window
-      const webview = new WebviewWindow('alby', {
-        title: 'Connect Alby',
-        url: authURL.href,
-        center: true,
-        width: 400,
-        height: 650,
-      });
-
-      webview.listen('tauri://close-requested', async () => {
-        await db.secureSave('walletConnectURL', walletConnectURL, 'alby');
-        setWalletConnectURL(walletConnectURL);
-        setIsConnected(true);
-        setIsloading(false);
-      });
-    } catch (e) {
-      setIsloading(false);
-      await message(e.toString(), { title: 'Connect Alby', type: 'error' });
-    }
-  };
-
-  return (
-    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <div className="relative w-full rounded-xl bg-gradient-to-r from-orange-400 via-red-200 to-yellow-200 p-px">
-        <StarsIcon className="absolute -left-4 -top-3 z-50 h-10 w-10 text-white" />
-        <div className="flex w-full flex-col rounded-xl bg-white/10 backdrop-blur-xl">
-          <div className="absolute right-2 top-2">
-            <button type="button">
-              <CancelIcon className="h-4 w-4 text-black/50" />
-            </button>
-          </div>
-          <div className="flex h-14 w-full flex-col items-center justify-center">
-            <h5 className="text-center text-sm font-semibold leading-tight text-black/50">
-              New feature
-            </h5>
-            <h3 className="transform font-medium leading-tight text-black">
-              Send bitcoin tip with Alby
-            </h3>
-          </div>
-          <Dialog.Trigger asChild>
-            <button
-              type="button"
-              className="inline-flex h-10 w-full shrink-0 items-center justify-center gap-1 rounded-b-xl border-t border-orange-200 bg-white text-sm font-semibold text-orange-400 hover:bg-orange-50"
-            >
-              Connect your Alby account <AlbyIcon className="h-7 w-7" />
-            </button>
-          </Dialog.Trigger>
-        </div>
-      </div>
-      <Dialog.Portal className="relative z-10">
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
-        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
-            <div className="h-min w-full shrink-0 rounded-t-xl border-b border-white/10 bg-white/5 px-5 py-5">
-              <div className="flex flex-col gap-1">
-                <div className="flex items-center justify-between">
-                  <Dialog.Title className="text-lg font-semibold leading-none text-white">
-                    Alby integration (Beta)
-                  </Dialog.Title>
-                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
-                    <CancelIcon className="h-4 w-4 text-white/50" />
-                  </Dialog.Close>
-                </div>
-              </div>
-            </div>
-            <div className="flex flex-col gap-3 px-5 py-5">
-              <div className="relative flex h-40 items-center justify-center gap-4">
-                <div className="inline-flex h-16 w-16 items-end justify-center rounded-lg bg-black pb-2">
-                  <img src="/lume.png" className="w-1/3" alt="Lume Logo" />
-                </div>
-                <div className="w-20 border border-dashed border-white/5" />
-                <div className="inline-flex h-16 w-16 items-center justify-center rounded-lg bg-white">
-                  <AlbyIcon className="h-8 w-8" />
-                </div>
-                {isConnected ? (
-                  <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-                    <CheckCircleIcon className="h-5 w-5 text-green-500" />
-                  </div>
-                ) : null}
-              </div>
-              <div className="flex flex-col gap-2">
-                <p className="text-sm text-white/50">
-                  When you click &quot;Connect&quot;, a new window will open and you need
-                  to click the &quot;Connect Wallet&quot; button to grant Lume permission
-                  to integrate with your Alby account.
-                </p>
-                <p className="text-sm text-white/50">
-                  All information will be encrypted and stored on the local machine.
-                </p>
-              </div>
-              <button
-                type="button"
-                onClick={() => initAlby()}
-                className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
-              >
-                {isLoading ? (
-                  <>
-                    <span className="w-5" />
-                    <span>Connecting...</span>
-                    <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-                  </>
-                ) : isConnected ? (
-                  <>
-                    <span className="w-5" />
-                    <span>Connected</span>
-                    <CheckCircleIcon className="h-5 w-5" />
-                  </>
-                ) : (
-                  <>
-                    <span className="w-5" />
-                    <span>Connect</span>
-                    <ArrowRightCircleIcon className="h-5 w-5" />
-                  </>
-                )}
-              </button>
-            </div>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}

src/shared/icons/index.ts

@@ -63,3 +63,4 @@ export * from './article';
 export * from './follows';
 export * from './alby';
 export * from './stars';
+export * from './nwc';

src/shared/icons/nwc.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function NwcIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M3 6.5A3.5 3.5 0 016.5 3h8.969C16.314 3 17 3.686 17 4.531V8h2.25c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0119.25 21h-7a.75.75 0 010-1.5h7a.25.25 0 00.25-.25v-9.5a.25.25 0 00-.25-.25H6a2.986 2.986 0 01-1.5-.401v2.151a.75.75 0 01-1.5 0V6.5zm1.5 0A1.5 1.5 0 006 8h9.5V4.531a.031.031 0 00-.031-.031H6.5a2 2 0 00-2 2zm-1 9.285v2.93L6 20.173l2.5-1.458v-2.93L6 14.327l-2.5 1.458zm2.122-2.975a.75.75 0 01.756 0l3.25 1.896a.75.75 0 01.372.648v3.792a.75.75 0 01-.372.648l-3.25 1.895a.75.75 0 01-.756 0l-3.25-1.895A.75.75 0 012 19.146v-3.792a.75.75 0 01.372-.648l3.25-1.896z"
+        clipRule="evenodd"
+      ></path>
+      <path fill="currentColor" d="M15.5 15.5a1 1 0 100-2 1 1 0 000 2z"></path>
+    </svg>
+  );
+}

src/shared/navigation.tsx

@@ -7,23 +7,24 @@ import { ChatsList } from '@app/chats/components/list';
 import { useStorage } from '@libs/storage/provider';
 
 import { ActiveAccount } from '@shared/accounts/active';
-import { AlbyConnectButton } from '@shared/alby';
 import { ComposerModal } from '@shared/composer';
 import { Frame } from '@shared/frame';
-import { BellIcon, NavArrowDownIcon, SpaceIcon } from '@shared/icons';
+import { BellIcon, NavArrowDownIcon, NwcIcon, SpaceIcon } from '@shared/icons';
 
 import { useActivities } from '@stores/activities';
 import { useSidebar } from '@stores/sidebar';
-import { useStronghold } from '@stores/stronghold';
 
 import { compactNumber } from '@utils/number';
 
 export function Navigation() {
   const { db } = useStorage();
-  const walletConnectURL = useStronghold((state) => state.walletConnectURL);
 
   const [totalNewActivities] = useActivities((state) => [state.totalNewActivities]);
   const [chats, toggleChats] = useSidebar((state) => [state.chats, state.toggleChats]);
+  const [integrations, toggleIntegrations] = useSidebar((state) => [
+    state.integrations,
+    state.toggleIntegrations,
+  ]);
 
   return (
     <Frame className="relative flex h-full w-[232px] flex-col" lighter>
@@ -77,6 +78,44 @@ export function Navigation() {
             ) : null}
           </NavLink>
         </div>
+        <Collapsible.Root open={integrations} onOpenChange={toggleIntegrations}>
+          <div className="flex flex-col gap-1 pr-2">
+            <Collapsible.Trigger asChild>
+              <button className="flex items-center gap-1 pl-[20px] pr-4">
+                <div
+                  className={twMerge(
+                    'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
+                    integrations ? '' : 'rotate-180'
+                  )}
+                >
+                  <NavArrowDownIcon className="h-3 w-3 text-white/50" />
+                </div>
+                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
+                  Integrations
+                </h3>
+              </button>
+            </Collapsible.Trigger>
+            <Collapsible.Content>
+              <NavLink
+                to="/nwc"
+                preventScrollReset={true}
+                className={({ isActive }) =>
+                  twMerge(
+                    'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
+                    isActive
+                      ? 'border-fuchsia-500 bg-white/5 text-white'
+                      : 'border-transparent text-white/80'
+                  )
+                }
+              >
+                <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+                  <NwcIcon className="h-4 w-4 text-white" />
+                </span>
+                Wallet Connect
+              </NavLink>
+            </Collapsible.Content>
+          </div>
+        </Collapsible.Root>
         <Collapsible.Root open={chats} onOpenChange={toggleChats}>
           <div className="flex flex-col gap-1 pr-2">
             <Collapsible.Trigger asChild>
@@ -101,11 +140,6 @@ export function Navigation() {
         </Collapsible.Root>
       </div>
       <div className="relative shrink-0">
-        {!walletConnectURL ? (
-          <div className="border-l-2 border-transparent pb-2 pl-4 pr-2">
-            <AlbyConnectButton />
-          </div>
-        ) : null}
         <ActiveAccount />
       </div>
     </Frame>