use kobalte dialog for modal instead

src/components/App.tsx

@@ -1,33 +1,14 @@
-import { For } from "solid-js";
-import { Motion, Presence } from "@motionone/solid";
-
 import logo from '~/assets/icons/mutiny-logo.svg';
-import send from '~/assets/icons/send.svg';
 import BalanceBox from "~/components/BalanceBox";
 import SafeArea from "~/components/SafeArea";
 import NavBar from "~/components/NavBar";
 import Card from "~/components/Card";
-import { Button, ButtonLink } from "~/components/Button";
-import Modal from "./Modal";
+import { ButtonLink } from "~/components/Button";
 import PeerConnectModal from "./PeerConnectModal";
 
 // TODO: use this reload prompt for real
 // import ReloadPrompt from "./Reload";
 
-function ActivityItem() {
-    return (
-        <div class="flex flex-row border-b border-gray-500 gap-4 py-2">
-            <img src={send} class="App-logo" alt="logo" />
-            <div class='flex flex-col flex-1'>
-                <h1>Bitcoin Beefsteak</h1>
-                <h2>-1,441,851 SAT</h2>
-                <h3 class='text-sm text-gray-500'>Jul 24</h3>
-            </div>
-            <div class='text-sm font-semibold uppercase text-[#E23A5E]'>SEND</div>
-        </div>
-    )
-}
-
 export default function App() {
     return (
         <SafeArea>
@@ -41,7 +22,6 @@ export default function App() {
                     <PeerConnectModal />
                     <ButtonLink target="_blank" rel="noopener noreferrer" href="https://faucet.mutinynet.com/?address=abc123">Tap the Faucet</ButtonLink>
                 </Card>
-
                 {/* safety div */}
                 <div class="h-32" />
             </main>

src/components/Modal.tsx

@@ -1,59 +0,0 @@
-import { ParentComponent, createSignal } from "solid-js";
-import Dismiss from "solid-dismiss";
-import { Motion, Presence } from "@motionone/solid";
-import { Button } from "./Button";
-
-const ModalToggleScrollbar: ParentComponent = (props) => {
-    const [open, setOpen] = createSignal(false);
-    let btnEl!: HTMLButtonElement;
-    let btnSaveEl!: HTMLButtonElement;
-
-    const onClickClose = () => {
-        setOpen(false);
-    };
-
-    const onClickOverlay = (e: Event) => {
-        if (e.target !== e.currentTarget) return;
-        setOpen(false);
-    };
-
-    // TODO: scrollbar toggle is a think if we're experiencing visual jank
-    // https://github.com/aquaductape/solid-dismiss/blob/main/demo/src/components/Examples/ModalToggleScrollbar.tsx
-
-    return (
-        <>
-            <Button ref={btnEl}>
-                Show Peer Connect Info
-            </Button>
-            <Dismiss
-                menuButton={btnEl}
-                open={open}
-                setOpen={setOpen}
-                modal
-                focusElementOnOpen={() => btnSaveEl}
-            >
-                <Presence>
-                    <Motion
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        transition={{ duration: 0.2 }}
-                    >
-                        <div
-                            class={"fixed top-0 left-0 w-full h-full flex justify-center items-center z-50 bg-black/50"}
-                            onClick={onClickOverlay}
-                            role="presentation"
-                        >
-                            <div class={"relative w-[80vw] max-w-[800px] p-4 bg-gray shadow-xl rounded-xl border border-white"} role="dialog" aria-modal="true" tabindex="-1">
-                                {props.children}
-                            </div>
-                        </div>
-                    </Motion>
-                </Presence>
-            </Dismiss >
-
-        </>
-    );
-};
-
-export default ModalToggleScrollbar;

src/components/PeerConnectModal.tsx

@@ -1,19 +1,65 @@
 import { QRCodeSVG } from "solid-qr-code";
-import Modal from "./Modal";
 import Card from "./Card";
+import { As, Dialog } from "@kobalte/core";
+import { Button } from "./Button";
+import { useMegaStore } from "~/state/megaStore";
+import { Show, createResource } from "solid-js";
+import { getExistingSettings } from "~/logic/nodeManagerSetup";
+import getHostname from "~/utils/getHostname";
 
-export default function PeerConnectModal() {
-    const connectString = "mutiny:02a91f8d620f5635a65a5f0cf51279ad9f73fd30f1bfdb4739342deddfba32fb7d@p.mutinywallet.com"
+const OVERLAY = "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+const DIALOG_POSITIONER = "fixed inset-0 z-50 flex items-center justify-center"
+const DIALOG_CONTENT = "w-[80vw] max-w-[400px] p-4 bg-gray/50 backdrop-blur-md shadow-xl rounded-xl border border-white/10"
+const SMALL_HEADER = "text-sm font-semibold uppercase"
+
+export default function PeerConnectModalKobalte() {
+    const [state, _] = useMegaStore()
+
+    const getPeerConnectString = async () => {
+        if (state.node_manager) {
+            const { proxy } = getExistingSettings();
+            const nodes = await state.node_manager.list_nodes();
+            const firstNode = nodes[0] as string || ""
+            const hostName = getHostname(proxy || "")
+            const connectString = `mutiny:${firstNode}@${hostName}`
+            return connectString
+        } else {
+            return undefined
+        }
+    };
+
+    const [peerConnectString] = createResource(getPeerConnectString);
+
+
+    // TODO: a lot of this markup is probably reusable as a "Modal" component
     return (
-        <Modal>
-            <div class="flex flex-col gap-4">
-                <div class="w-full bg-white rounded-xl">
-                    <QRCodeSVG value={connectString} class="w-full h-full p-8 max-h-[400px]" />
+        <Dialog.Root>
+            <Dialog.Trigger asChild>
+                <As component={Button}>Show Peer Connect Info</As>
+            </Dialog.Trigger>
+            <Dialog.Portal>
+                <Dialog.Overlay class={OVERLAY} />
+                <div class={DIALOG_POSITIONER}>
+                    <Dialog.Content class={DIALOG_CONTENT}>
+                        <div class="flex justify-between mb-2">
+                            <Dialog.Title class={SMALL_HEADER}>Peer connect info</Dialog.Title>
+                            <Dialog.CloseButton class="dialog__close-button">
+                                <code>X</code>
+                            </Dialog.CloseButton>
+                        </div>
+                        <Dialog.Description class="flex flex-col gap-4">
+                            <Show when={peerConnectString()}>
+                                <div class="w-full bg-white rounded-xl">
+                                    <QRCodeSVG value={peerConnectString() || ""} class="w-full h-full p-8 max-h-[400px]" />
+                                </div>
+                                <Card>
+                                    <code class="break-all">{peerConnectString() || ""}</code>
+                                </Card>
+                            </Show>
+                        </Dialog.Description>
+                    </Dialog.Content>
                 </div>
-                <Card>
-                    <code class="break-all">{connectString}</code>
-                </Card>
-            </div>
-        </Modal>
+            </Dialog.Portal>
+        </Dialog.Root >
     )
 }

src/utils/getHostname.ts

@@ -0,0 +1,13 @@
+export default function getHostname(url: string): string {
+    // Check if the URL begins with "ws://" or "wss://"
+    if (url.startsWith("ws://")) {
+        // If it does, remove "ws://" from the URL
+        url = url.slice(5);
+    } else if (url.startsWith("wss://")) {
+        // If it begins with "wss://", remove "wss://" from the URL
+        url = url.slice(6);
+    }
+
+    // Return the resulting URL
+    return url;
+}