feat: simple donate page

src/element/ProfilePreview.tsx

@@ -1,4 +1,6 @@
 import "./ProfilePreview.css";
+import { ReactNode } from "react";
+
 import ProfileImage from "./ProfileImage";
 import FollowButton from "./FollowButton";
 import useProfile from "../feed/ProfileFeed";
@@ -8,7 +10,8 @@ export interface ProfilePreviewProps {
     pubkey: HexKey,
     options?: {
         about?: boolean
-    }
+    },
+    actions?: ReactNode
 }
 export default function ProfilePreview(props: ProfilePreviewProps) {
     const pubkey = props.pubkey;
@@ -24,7 +27,7 @@ export default function ProfilePreview(props: ProfilePreviewProps) {
                 {options.about ? <div className="f-ellipsis about">
                     {user?.about}
                 </div> : undefined} />
-            <FollowButton pubkey={pubkey} className="ml5" />
+            {props.actions ?? <FollowButton pubkey={pubkey} className="ml5" />}
         </div>
     )
 }

src/element/ZapButton.tsx

@@ -0,0 +1,25 @@
+import { faBolt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+import useProfile from "../feed/ProfileFeed";
+import { HexKey } from "../nostr";
+import LNURLTip from "./LNURLTip";
+
+const ZapButton = ({ pubkey }: { pubkey: HexKey }) => {
+    const profile = useProfile(pubkey)?.get(pubkey);
+    const [zap, setZap] = useState(false);
+    const svc = profile?.lud16 || profile?.lud06;
+
+    if (!svc) return null;
+
+    return (
+        <>
+            <span className="pill" onClick={(e) => setZap(true)}>
+                <FontAwesomeIcon icon={faBolt} />
+            </span>
+            <LNURLTip svc={svc} show={zap} onClose={() => setZap(false)} />
+        </>
+    )
+}
+
+export default ZapButton;

src/index.css

@@ -266,6 +266,14 @@ body.scroll-lock {
   height: 100vh;
 }
 
+.m5 {
+  margin: 5px;
+}
+
+.m10 {
+  margin: 10px;
+}
+
 .mr10 {
   margin-right: 10px;
 }

src/index.tsx

@@ -22,6 +22,7 @@ import ErrorPage from './pages/ErrorPage';
 import VerificationPage from './pages/Verification';
 import MessagesPage from './pages/MessagesPage';
 import ChatPage from './pages/ChatPage';
+import DonatePage from './pages/DonatePage';
 
 /**
  * HTTP query provider
@@ -72,6 +73,10 @@ const router = createBrowserRouter([
       {
         path: "/messages/:id",
         element: <ChatPage />
+      },
+      {
+        path: "/donate",
+        element: <DonatePage />
       }
     ]
   }

src/pages/DonatePage.tsx

@@ -0,0 +1,29 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ProfilePreview from "../element/ProfilePreview";
+import ZapButton from "../element/ZapButton";
+
+const Developers = [
+    "63fe6318dc58583cfe16810f86dd09e18bfd76aabc24a0081ce2856f330504ed", // kieran
+    "7fa56f5d6962ab1e3cd424e758c3002b8665f7b0d8dcee9fe9e288d7751ac194" // verbiricha
+];
+
+const DonatePage = () => {
+    return (
+        <div className="m5">
+            <h2>Help fund the development of Snort</h2>
+            <p>
+                Snort is an open source project built by passionate people in their free time
+            </p>
+            <p>
+                Your donations are greatly appreciated
+            </p>
+            <p>
+                Check out the code here: <a href="https://github.com/v0l/snort" rel="_noref" target="_blank">https://github.com/v0l/snort</a>
+            </p>
+            <h3>Developers</h3>
+            {Developers.map(a => <ProfilePreview pubkey={a} key={a} actions={<ZapButton pubkey={a} />} />)}
+        </div>
+    );
+}
+
+export default DonatePage;