feat: signup

src/components/login-button.tsx

@@ -5,16 +5,21 @@ import { loginNip7 } from "../login";
 import useLogin from "../hooks/login";
 import Profile from "./profile";
 import { NostrLink } from "@snort/system";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 export default function LoginButton() {
   const system = useContext(SnortContext);
   const login = useLogin();
+  const navigate = useNavigate();
 
   return !login ? (
     <AsyncButton
       onClick={async () => {
-        await loginNip7(system);
+        if (window.nostr) {
+          await loginNip7(system);
+        } else {
+          navigate("/new-account");
+        }
       }}
     >
       Sign In

src/components/profile.tsx

@@ -4,6 +4,7 @@ import { useUserProfile } from "@snort/system-react";
 
 export default function Profile({ link }: { link: NostrLink }) {
   const profile = useUserProfile(link.id);
+  const name = profile?.display_name ?? profile?.name ?? "";
   return (
     <div className="flex gap-2 items-center">
       <img
@@ -11,9 +12,7 @@ export default function Profile({ link }: { link: NostrLink }) {
         className="w-12 h-12 rounded-full bg-neutral-800 object-cover object-center"
       />
       <div>
-        {profile?.display_name ??
-          profile?.name ??
-          hexToBech32("npub", link.id).slice(0, 12)}
+        {name.length > 0 ? name : hexToBech32("npub", link.id).slice(0, 12)}
       </div>
     </div>
   );

src/components/vps-actions.tsx

@@ -11,7 +11,7 @@ export default function VmActions({ vm }: { vm: VmInstance }) {
           name={state === "running" ? "stop" : "start"}
           className="bg-neutral-700 p-2 rounded-lg hover:bg-neutral-600"
           size={40}
-          onClick={e => {
+          onClick={(e) => {
             e.stopPropagation();
           }}
         />
@@ -19,7 +19,7 @@ export default function VmActions({ vm }: { vm: VmInstance }) {
           name="delete"
           className="bg-neutral-700 p-2 rounded-lg hover:bg-neutral-600"
           size={40}
-          onClick={e => {
+          onClick={(e) => {
             e.stopPropagation();
           }}
         />
@@ -27,7 +27,7 @@ export default function VmActions({ vm }: { vm: VmInstance }) {
           name="refresh-1"
           className="bg-neutral-700 p-2 rounded-lg hover:bg-neutral-600"
           size={40}
-          onClick={e => {
+          onClick={(e) => {
             e.stopPropagation();
           }}
         />

src/components/vps-instance.tsx

@@ -4,16 +4,26 @@ import OsImageName from "./os-image-name";
 import VpsResources from "./vps-resources";
 import VmActions from "./vps-actions";
 
-export default function VpsInstanceRow({ vm, actions }: { vm: VmInstance, actions?: boolean }) {
+export default function VpsInstanceRow({
+  vm,
+  actions,
+}: {
+  vm: VmInstance;
+  actions?: boolean;
+}) {
   const expires = new Date(vm.expires);
   const isExpired = expires <= new Date();
   const navigate = useNavigate();
 
   return (
-    <div className="flex justify-between items-center rounded-xl bg-neutral-900 px-3 py-2 cursor-pointer hover:bg-neutral-800"
-      onClick={() => navigate("/vm", {
-        state: vm
-      })}>
+    <div
+      className="flex justify-between items-center rounded-xl bg-neutral-900 px-3 py-2 cursor-pointer hover:bg-neutral-800"
+      onClick={() =>
+        navigate("/vm", {
+          state: vm,
+        })
+      }
+    >
       <div className="flex flex-col gap-2">
         <div>
           <span className="text-sm text-neutral-400">#{vm.id}</span>