feat: add nostr profile link

src/App.tsx

@@ -1,72 +1,92 @@
+import { SnortContext } from "@snort/system-react"
 import { CostInterval, DiskType, MachineSpec } from "./api"
 import VpsCard from "./components/vps-card"
-import { GiB } from "./const"
+import { GiB, NostrProfile } from "./const"
+import { NostrSystem } from "@snort/system"
+import Profile from "./components/profile"
+
+const Offers: Array<MachineSpec> = [
+  {
+    id: "2x2x80",
+    active: true,
+    cpu: 2,
+    ram: 2 * GiB,
+    disk: {
+      type: DiskType.SSD,
+      size: 80 * GiB
+    },
+    cost: {
+      interval: CostInterval.Month,
+      count: 3,
+      currency: "EUR",
+    }
+  },
+  {
+    id: "4x4x160",
+    active: true,
+    cpu: 4,
+    ram: 4 * GiB,
+    disk: {
+      type: DiskType.SSD,
+      size: 160 * GiB
+    },
+    cost: {
+      interval: CostInterval.Month,
+      count: 5,
+      currency: "EUR",
+    }
+  },
+  {
+    id: "8x8x400",
+    active: true,
+    cpu: 8,
+    ram: 8 * GiB,
+    disk: {
+      type: DiskType.SSD,
+      size: 400 * GiB
+    },
+    cost: {
+      interval: CostInterval.Month,
+      count: 12,
+      currency: "EUR",
+    }
+  }
+]
+
+const system = new NostrSystem({});
+[
+  "wss://relay.snort.social/",
+  "wss://relay.damus.io/",
+  "wss://relay.nostr.band/",
+  "wss://nos.lol/"
+].forEach(a => system.ConnectToRelay(a, { read: true, write: true }));
 
 export default function App() {
-  const offers: Array<MachineSpec> = [
-    {
-      id: "2x2x80",
-      active: true,
-      cpu: 2,
-      ram: 2 * GiB,
-      disk: {
-        type: DiskType.SSD,
-        size: 80 * GiB
-      },
-      cost: {
-        interval: CostInterval.Month,
-        count: 3,
-        currency: "EUR",
-      }
-    },
-    {
-      id: "4x4x160",
-      active: true,
-      cpu: 4,
-      ram: 4 * GiB,
-      disk: {
-        type: DiskType.SSD,
-        size: 160 * GiB
-      },
-      cost: {
-        interval: CostInterval.Month,
-        count: 5,
-        currency: "EUR",
-      }
-    },
-    {
-      id: "8x8x400",
-      active: true,
-      cpu: 8,
-      ram: 8 * GiB,
-      disk: {
-        type: DiskType.SSD,
-        size: 400 * GiB
-      },
-      cost: {
-        interval: CostInterval.Month,
-        count: 12,
-        currency: "EUR",
-      }
-    }
-  ]
+
   return (
-    <div className="w-[700px] mx-auto m-2 p-2">
-      <h1>LNVPS</h1>
+    <SnortContext.Provider value={system}>
+      <div className="w-[700px] mx-auto m-2 p-2">
+        <h1>LNVPS</h1>
 
-      <h1>VPS</h1>
-      <div className="flex flex-col gap-2">
-        <div className="grid grid-cols-3 gap-2">
-          {offers.map(a => <VpsCard spec={a} />)}
-        </div>
+        <h1>VPS</h1>
+        <div className="flex flex-col gap-2">
+          <div className="grid grid-cols-3 gap-2">
+            {Offers.map(a => <VpsCard spec={a} />)}
+          </div>
 
-        <div className="flex flex-col gap-4">
-          <b>Please email sales@lnvps.net after paying the invoice with your order id, desired OS and ssh key</b>
-          <small>
-            All VPS come with 1x IPv4 and 1x IPv6 address and unmetered traffic.
-          </small>
+          <div className="flex flex-col gap-4">
+            <b>Please email <a href="mailto:sales@lnvps.net">sales</a> after paying the invoice with your order id, desired OS and ssh key.</b>
+            <b>You can also find us on nostr: </b>
+            <div className="flex flex-col gap-2">
+              <Profile link={NostrProfile} />
+              <pre className="overflow-x-scroll">{NostrProfile.encode()}</pre>
+            </div>
+            <small>
+              All VPS come with 1x IPv4 and 1x IPv6 address and unmetered traffic.
+            </small>
+          </div>
         </div>
       </div>
-    </div>
+    </SnortContext.Provider>
   )
 }

src/components/profile.tsx

@@ -0,0 +1,13 @@
+import { hexToBech32 } from "@snort/shared";
+import { NostrLink } from "@snort/system";
+import { useUserProfile } from "@snort/system-react";
+
+export default function Profile({ link }: { link: NostrLink }) {
+    const profile = useUserProfile(link.id);
+    return <div className="flex gap-2 items-center">
+        <img src={profile?.picture} className="w-12 h-12 rounded-full bg-neutral-500" />
+        <div>
+            {profile?.display_name ?? profile?.name ?? hexToBech32("npub", link.id).slice(0, 12)}
+        </div>
+    </div>
+}

src/const.ts

@@ -1,3 +1,5 @@
+import { NostrLink, NostrPrefix } from "@snort/system";
+
 export const KiB = 1024;
 export const MiB = KiB * 1024;
 export const GiB = MiB * 1024;
@@ -8,4 +10,11 @@ export const KB = 1000;
 export const MB = KB * 1000;
 export const GB = KB * 1000;
 export const TB = GB * 1000;
-export const PB = TB * 1000;
+export const PB = TB * 1000;
+
+export const NostrProfile = new NostrLink(NostrPrefix.Profile,
+    "fcd818454002a6c47a980393f0549ac6e629d28d5688114bb60d831b5c1832a7",
+    undefined, undefined, [
+    "wss://nos.lol/", "wss://relay.nostr.bg/", "wss://relay.damus.io", "wss://relay.snort.social/"
+]
+);