From 593ad6bdb2b532eb89c5f176339f200c0a191ed1 Mon Sep 17 00:00:00 2001
From: hzrd149 <github@hzrd149.com>
Date: Fri, 30 Jun 2023 14:52:26 -0500
Subject: [PATCH] show type of account on account picker

---
 .changeset/grumpy-apes-tell.md              |  5 ++++
 src/components/account-info-badge.tsx       | 27 +++++++++++++++++++++
 src/components/page/account-switcher.tsx    | 15 +++++++-----
 src/hooks/use-shareable-profile-id.ts       |  4 +--
 src/views/login/components/account-card.tsx | 19 +++++++++------
 src/views/login/start.tsx                   |  2 +-
 src/views/user/about.tsx                    | 17 ++++++++++---
 7 files changed, 70 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/grumpy-apes-tell.md
 create mode 100644 src/components/account-info-badge.tsx

diff --git a/.changeset/grumpy-apes-tell.md b/.changeset/grumpy-apes-tell.md
new file mode 100644
index 000000000..e6a4d56e6
--- /dev/null
+++ b/.changeset/grumpy-apes-tell.md
@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+show type of account on account picker
diff --git a/src/components/account-info-badge.tsx b/src/components/account-info-badge.tsx
new file mode 100644
index 000000000..117aae938
--- /dev/null
+++ b/src/components/account-info-badge.tsx
@@ -0,0 +1,27 @@
+import { Badge, BadgeProps } from "@chakra-ui/react";
+import { Account } from "../services/account";
+
+export default function AccountInfoBadge({ account, ...props }: BadgeProps & { account: Account }) {
+  if (account.useExtension) {
+    return (
+      <Badge {...props} variant="solid" colorScheme="green">
+        extension
+      </Badge>
+    );
+  }
+  if (account.secKey) {
+    return (
+      <Badge {...props} variant="solid" colorScheme="red">
+        nsec
+      </Badge>
+    );
+  }
+  if (account.readonly) {
+    return (
+      <Badge {...props} variant="solid" colorScheme="blue">
+        read-only
+      </Badge>
+    );
+  }
+  return null;
+}
diff --git a/src/components/page/account-switcher.tsx b/src/components/page/account-switcher.tsx
index 935b106e0..dce148950 100644
--- a/src/components/page/account-switcher.tsx
+++ b/src/components/page/account-switcher.tsx
@@ -15,12 +15,14 @@ import {
 import { getUserDisplayName } from "../../helpers/user-metadata";
 import useSubject from "../../hooks/use-subject";
 import { useUserMetadata } from "../../hooks/use-user-metadata";
-import accountService from "../../services/account";
+import accountService, { Account } from "../../services/account";
 import { AddIcon } from "../icons";
 import { UserAvatar } from "../user-avatar";
 import { useLocation, useNavigate } from "react-router-dom";
+import AccountInfoBadge from "../account-info-badge";
 
-function AccountItem({ pubkey }: { pubkey: string }) {
+function AccountItem({ account }: { account: Account }) {
+  const pubkey = account.pubkey;
   const metadata = useUserMetadata(pubkey, []);
   const accord = useAccordionContext();
 
@@ -32,9 +34,10 @@ function AccountItem({ pubkey }: { pubkey: string }) {
   return (
     <Box display="flex" gap="4" alignItems="center" cursor="pointer" onClick={handleClick}>
       <UserAvatar pubkey={pubkey} size="sm" />
-      <Text flex={1} mr="4" overflow="hidden">
-        {getUserDisplayName(metadata, pubkey)}
-      </Text>
+      <Box flex={1}>
+        <Text isTruncated>{getUserDisplayName(metadata, pubkey)}</Text>
+        <AccountInfoBadge fontSize="0.7em" account={account} />
+      </Box>
       <IconButton
         icon={<CloseIcon />}
         aria-label="Remove Account"
@@ -60,7 +63,7 @@ export function AccountSwitcherList() {
   return (
     <Flex gap="2" direction="column" padding="2">
       {otherAccounts.map((account) => (
-        <AccountItem key={account.pubkey} pubkey={account.pubkey} />
+        <AccountItem key={account.pubkey} account={account} />
       ))}
       <Button
         size="sm"
diff --git a/src/hooks/use-shareable-profile-id.ts b/src/hooks/use-shareable-profile-id.ts
index 11e2fd4e0..759fcb910 100644
--- a/src/hooks/use-shareable-profile-id.ts
+++ b/src/hooks/use-shareable-profile-id.ts
@@ -4,13 +4,13 @@ import { RelayMode } from "../classes/relay";
 import { nip19 } from "nostr-tools";
 import { useUserRelays } from "./use-user-relays";
 
-export function useSharableProfileId(pubkey: string) {
+export function useSharableProfileId(pubkey: string, relayCount = 2) {
   const userRelays = useUserRelays(pubkey);
 
   return useMemo(() => {
     const writeUrls = userRelays.filter((r) => r.mode & RelayMode.WRITE).map((r) => r.url);
     const ranked = relayScoreboardService.getRankedRelays(writeUrls);
-    const onlyTwo = ranked.slice(0, 2);
+    const onlyTwo = ranked.slice(0, relayCount);
 
     return onlyTwo.length > 0 ? nip19.nprofileEncode({ pubkey, relays: onlyTwo }) : nip19.npubEncode(pubkey);
   }, [userRelays]);
diff --git a/src/views/login/components/account-card.tsx b/src/views/login/components/account-card.tsx
index 132e57af4..7f85e6f43 100644
--- a/src/views/login/components/account-card.tsx
+++ b/src/views/login/components/account-card.tsx
@@ -2,10 +2,12 @@ import { CloseIcon } from "@chakra-ui/icons";
 import { Box, IconButton, Text } from "@chakra-ui/react";
 import { getUserDisplayName } from "../../../helpers/user-metadata";
 import { useUserMetadata } from "../../../hooks/use-user-metadata";
-import accountService from "../../../services/account";
+import accountService, { Account } from "../../../services/account";
 import { UserAvatar } from "../../../components/user-avatar";
+import AccountInfoBadge from "../../../components/account-info-badge";
 
-export default function AccountCard({ pubkey }: { pubkey: string }) {
+export default function AccountCard({ account }: { account: Account }) {
+  const pubkey = account.pubkey;
   // this wont load unless the data is cached since there are no relay connections yet
   const metadata = useUserMetadata(pubkey, []);
 
@@ -21,10 +23,13 @@ export default function AccountCard({ pubkey }: { pubkey: string }) {
       cursor="pointer"
       onClick={() => accountService.switchAccount(pubkey)}
     >
-      <UserAvatar pubkey={pubkey} size="sm" noProxy />
-      <Text flex={1} mr="4" overflow="hidden">
-        {getUserDisplayName(metadata, pubkey)}
-      </Text>
+      <UserAvatar pubkey={pubkey} size="md" noProxy />
+      <Box flex={1}>
+        <Text isTruncated fontWeight="bold">
+          {getUserDisplayName(metadata, pubkey)}
+        </Text>
+        <AccountInfoBadge account={account} />
+      </Box>
       <IconButton
         icon={<CloseIcon />}
         aria-label="Remove Account"
@@ -32,7 +37,7 @@ export default function AccountCard({ pubkey }: { pubkey: string }) {
           e.stopPropagation();
           accountService.removeAccount(pubkey);
         }}
-        size="sm"
+        size="md"
         variant="ghost"
       />
     </Box>
diff --git a/src/views/login/start.tsx b/src/views/login/start.tsx
index 5426d193b..77a49b28a 100644
--- a/src/views/login/start.tsx
+++ b/src/views/login/start.tsx
@@ -86,7 +86,7 @@ export default function LoginStartView() {
           </Heading>
           <Flex gap="2" direction="column" minW={300}>
             {accounts.map((account) => (
-              <AccountCard key={account.pubkey} pubkey={account.pubkey} />
+              <AccountCard key={account.pubkey} account={account} />
             ))}
           </Flex>
         </>
diff --git a/src/views/user/about.tsx b/src/views/user/about.tsx
index c86abd5c7..8b3926d86 100644
--- a/src/views/user/about.tsx
+++ b/src/views/user/about.tsx
@@ -8,6 +8,7 @@ import {
   AccordionItem,
   AccordionPanel,
   Box,
+  Button,
   Flex,
   Heading,
   IconButton,
@@ -40,6 +41,7 @@ import { readablizeSats } from "../../helpers/bolt11";
 import { UserAvatar } from "../../components/user-avatar";
 import { useIsMobile } from "../../hooks/use-is-mobile";
 import { getUserDisplayName } from "../../helpers/user-metadata";
+import { useSharableProfileId } from "../../hooks/use-shareable-profile-id";
 
 function buildDescriptionContent(description: string) {
   let content: EmbedableContent = [description.trim()];
@@ -59,12 +61,10 @@ export default function UserAboutTab() {
   const metadata = useUserMetadata(pubkey, contextRelays);
   const contacts = useUserContacts(pubkey, contextRelays);
   const npub = normalizeToBech32(pubkey, Bech32Prefix.Pubkey);
+  const nprofile = useSharableProfileId(pubkey);
 
   const { value: stats } = useAsync(() => userTrustedStatsService.getUserStats(pubkey), [pubkey]);
 
-  const account = useCurrentAccount();
-  const isSelf = pubkey === account?.pubkey;
-
   const aboutContent = metadata?.about && buildDescriptionContent(metadata?.about);
 
   return (
@@ -259,6 +259,17 @@ export default function UserAboutTab() {
           </AccordionItem>
         )}
       </Accordion>
+      <Flex gap="2">
+        <Button
+          as={Link}
+          href={`https://nosta.me/${nprofile}`}
+          leftIcon={<Image src="https://nosta.me/images/favicon-32x32.png" w="1.2em" />}
+          rightIcon={<ExternalLinkIcon />}
+          isExternal
+        >
+          Nosta.me page
+        </Button>
+      </Flex>
     </Flex>
   );
 }