fix bug with drawer navigation

fix relays from user contacts overriding nip-65 relays

src/components/icons.tsx

@@ -195,7 +195,6 @@ export const BookmarkedIcon = createIcon({
 export const V4VStreamIcon = PlayCircle;
 export const V4VStopIcon = StopCircle;
 
-/** @deprecated */
 export const AddReactionIcon = createIcon({
   displayName: "AddReactionIcon",
   d: "M19.0001 13.9999V16.9999H22.0001V18.9999H18.9991L19.0001 21.9999H17.0001L16.9991 18.9999H14.0001V16.9999H17.0001V13.9999H19.0001ZM20.2426 4.75736C22.505 7.0244 22.5829 10.636 20.4795 12.992L19.06 11.574C20.3901 10.0499 20.3201 7.65987 18.827 6.1701C17.3244 4.67092 14.9076 4.60701 13.337 6.01688L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L13.412 20.069L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736Z",
@@ -215,7 +214,6 @@ export const AppearanceIcon = Colors;
 export const DatabaseIcon = Database01;
 export const PerformanceIcon = Speedometer03;
 
-/** @deprecated */
 export const CommunityIcon = createIcon({
   displayName: "CommunityIcon",
   d: "M9.55 11.5C8.30736 11.5 7.3 10.4926 7.3 9.25C7.3 8.00736 8.30736 7 9.55 7C10.7926 7 11.8 8.00736 11.8 9.25C11.8 10.4926 10.7926 11.5 9.55 11.5ZM10 19.748V16.4C10 15.9116 10.1442 15.4627 10.4041 15.0624C10.1087 15.0213 9.80681 15 9.5 15C7.93201 15 6.49369 15.5552 5.37091 16.4797C6.44909 18.0721 8.08593 19.2553 10 19.748ZM4.45286 14.66C5.86432 13.6168 7.61013 13 9.5 13C10.5435 13 11.5431 13.188 12.4667 13.5321C13.3447 13.1888 14.3924 13 15.5 13C17.1597 13 18.6849 13.4239 19.706 14.1563C19.8976 13.4703 20 12.7471 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 12.9325 4.15956 13.8278 4.45286 14.66ZM18.8794 16.0859C18.4862 15.5526 17.1708 15 15.5 15C13.4939 15 12 15.7967 12 16.4V20C14.9255 20 17.4843 18.4296 18.8794 16.0859ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM15.5 12.5C14.3954 12.5 13.5 11.6046 13.5 10.5C13.5 9.39543 14.3954 8.5 15.5 8.5C16.6046 8.5 17.5 9.39543 17.5 10.5C17.5 11.6046 16.6046 12.5 15.5 12.5Z",

src/providers/drawer-sub-view-provider.tsx

@@ -144,7 +144,11 @@ export default function DrawerSubViewProvider({
 
           const newRouter = createMemoryRouter(routes, { initialEntries: [subRoute] });
           newRouter.subscribe((e) => {
-            if (e.errors && e.errors[0].status === 404 && e.errors[0].internal) {
+            if (
+              e.errors &&
+              e.errors["__shim-error-route__"].status === 404 &&
+              e.errors["__shim-error-route__"].internal
+            ) {
               openInParent(e.location);
             } else if (direction.current !== "down") {
               log("Updating parent state from Router");

src/services/client-relays.ts

@@ -92,6 +92,7 @@ class ClientRelayService {
     }, 5000);
   }
 
+  /** @deprecated */
   async addRelay(url: string, mode: RelayMode) {
     this.log(`Adding ${url} relay`);
     if (!this.relays.value.some((r) => r.url === url)) {
@@ -99,6 +100,7 @@ class ClientRelayService {
       await this.postUpdatedRelays(newRelays);
     }
   }
+  /** @deprecated */
   async updateRelay(url: string, mode: RelayMode) {
     this.log(`Updating ${url} relay`);
     if (this.relays.value.some((r) => r.url === url)) {
@@ -106,6 +108,7 @@ class ClientRelayService {
       await this.postUpdatedRelays(newRelays);
     }
   }
+  /** @deprecated */
   async removeRelay(url: string) {
     this.log(`Removing ${url} relay`);
     if (this.relays.value.some((r) => r.url === url)) {
@@ -114,6 +117,7 @@ class ClientRelayService {
     }
   }
 
+  /** @deprecated */
   async postUpdatedRelays(newRelays: RelayConfig[]) {
     const rTags: RTag[] = newRelays.map((r) => {
       switch (r.mode) {

src/services/event-count.ts

@@ -6,7 +6,7 @@ import { NostrRequestFilter } from "../types/nostr-query";
 import NostrRequest from "../classes/nostr-request";
 import relayPoolService from "./relay-pool";
 
-// TODO: move this to settings
+/** @deprecated */
 const COUNT_RELAY = "wss://relay.nostr.band";
 
 const RATE_LIMIT = 1000;
@@ -59,6 +59,7 @@ class EventCountService {
   }
 }
 
+/** @deprecated */
 const eventCountService = new EventCountService();
 
 if (import.meta.env.DEV) {

src/services/user-relays.ts

@@ -36,7 +36,8 @@ class UserRelaysService {
     // also fetch the relays from the users contacts
     const contactsSub = userContactsService.requestContacts(pubkey, relays, opts);
     sub.connectWithHandler(contactsSub, (contacts, next, value) => {
-      if (contacts.relays.length > 0 && (!value || contacts.created_at > value.created_at)) {
+      // NOTE: only use relays from contact list if the user dose not have a NIP-65 relay list
+      if (contacts.relays.length > 0 && !value) {
         next({ pubkey: contacts.pubkey, relays: contacts.relays, created_at: contacts.created_at });
       }
     });

src/views/channels/channel.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Button, Flex, Heading, Spinner, useDisclosure } from "@chakra-ui/react";
+import { Button, Flex, Heading, Spacer, Spinner, useDisclosure } from "@chakra-ui/react";
 
 import { safeDecode } from "../../helpers/nip19";
 import useSingleEvent from "../../hooks/use-single-event";
@@ -22,16 +22,17 @@ function ChannelPage({ channel }: { channel: NostrEvent }) {
   const drawer = useDisclosure();
 
   return (
-    <Flex h="100vh" overflow="hidden" direction="column" p="2" gap="2">
+    <Flex h="full" overflow="hidden" direction="column" p="2" gap="2">
       <Flex gap="2" alignItems="center">
         <Button leftIcon={<ChevronLeftIcon />} onClick={() => navigate(-1)}>
           Back
         </Button>
-        <RelaySelectionButton />
+        <RelaySelectionButton hideBelow="lg" />
         <Heading hideBelow="lg" size="lg">
           {metadata?.name}
         </Heading>
-        <ChannelJoinButton channel={channel} ml="auto" />
+        <Spacer />
+        <ChannelJoinButton channel={channel} hideBelow="lg" />
         <Button onClick={drawer.onOpen}>Channel Info</Button>
         <ChannelMenu channel={channel} aria-label="More Options" />
       </Flex>

src/views/channels/components/channel-metadata-drawer.tsx

@@ -1,4 +1,6 @@
 import {
+  Button,
+  ButtonGroup,
   Card,
   Drawer,
   DrawerBody,
@@ -9,7 +11,10 @@ import {
   DrawerProps,
   Flex,
   Heading,
+  Image,
+  Link,
   LinkBox,
+  Text,
 } from "@chakra-ui/react";
 import { NostrEvent } from "../../../types/nostr-event";
 import useChannelMetadata from "../../../hooks/use-channel-metadata";
@@ -23,6 +28,8 @@ import HoverLinkOverlay from "../../../components/hover-link-overlay";
 import UserAvatar from "../../../components/user-avatar";
 import { useRelaySelectionContext } from "../../../providers/relay-selection-provider";
 import { UserDnsIdentityIcon } from "../../../components/user-dns-identity-icon";
+import ChannelJoinButton from "./channel-join-button";
+import { ExternalLinkIcon } from "../../../components/icons";
 
 function UserCard({ pubkey }: { pubkey: string }) {
   return (
@@ -67,10 +74,28 @@ export default function ChannelMetadataDrawer({
       <DrawerOverlay />
       <DrawerContent>
         <DrawerCloseButton />
-        <DrawerHeader>{metadata?.name}</DrawerHeader>
+        <DrawerHeader p="4">{metadata?.name}</DrawerHeader>
 
-        <DrawerBody>
-          <Heading size="sm">Members</Heading>
+        <DrawerBody px="4" pt="0" pb="4">
+          <ButtonGroup>
+            <ChannelJoinButton channel={channel} />
+            <Button
+              as={Link}
+              href={`https://www.nostrchat.io/channel/${channel.id}`}
+              leftIcon={<Image src="https://www.nostrchat.io//favicon.ico" w="6" h="6" />}
+              rightIcon={<ExternalLinkIcon />}
+              isExternal
+            >
+              Open NostrChat
+            </Button>
+          </ButtonGroup>
+          <Heading size="sm" mt="2">
+            About
+          </Heading>
+          <Text whiteSpace="pre">{metadata.about}</Text>
+          <Heading size="sm" mt="2">
+            Members
+          </Heading>
           <ChannelMembers channel={channel} relays={relays} />
         </DrawerBody>
       </DrawerContent>

src/views/communities/explore.tsx

@@ -5,12 +5,12 @@ import PeopleListProvider, { usePeopleListContext } from "../../providers/people
 import PeopleListSelection from "../../components/people-list-selection/people-list-selection";
 import { PointerCommunityCard } from "./components/community-card";
 import VerticalPageLayout from "../../components/vertical-page-layout";
-import { COMMUNITY_DEFINITION_KIND, SUBSCRIBED_COMMUNITIES_LIST_IDENTIFIER } from "../../helpers/nostr/communities";
+import { COMMUNITY_DEFINITION_KIND } from "../../helpers/nostr/communities";
 import { ErrorBoundary } from "../../components/error-boundary";
 import { useReadRelayUrls } from "../../hooks/use-client-relays";
 import useSubjects from "../../hooks/use-subjects";
 import replaceableEventLoaderService from "../../services/replaceable-event-requester";
-import { COMMUNITIES_LIST_KIND, NOTE_LIST_KIND, getCoordinatesFromList } from "../../helpers/nostr/lists";
+import { COMMUNITIES_LIST_KIND, getCoordinatesFromList } from "../../helpers/nostr/lists";
 import { useNavigate } from "react-router-dom";
 import { ChevronLeftIcon } from "../../components/icons";
 import { parseCoordinate } from "../../helpers/nostr/events";

src/views/community/components/community-members-modal.tsx

@@ -11,12 +11,13 @@ import {
   ModalProps,
   SimpleGrid,
 } from "@chakra-ui/react";
+
 import { NostrEvent } from "../../../types/nostr-event";
 import useTimelineLoader from "../../../hooks/use-timeline-loader";
 import { useReadRelayUrls } from "../../../hooks/use-client-relays";
-import { SUBSCRIBED_COMMUNITIES_LIST_IDENTIFIER, getCommunityRelays } from "../../../helpers/nostr/communities";
+import { getCommunityRelays } from "../../../helpers/nostr/communities";
 import { getEventCoordinate } from "../../../helpers/nostr/events";
-import { COMMUNITIES_LIST_KIND, NOTE_LIST_KIND } from "../../../helpers/nostr/lists";
+import { COMMUNITIES_LIST_KIND } from "../../../helpers/nostr/lists";
 import IntersectionObserverProvider from "../../../providers/intersection-observer";
 import useSubject from "../../../hooks/use-subject";
 import { useTimelineCurserIntersectionCallback } from "../../../hooks/use-timeline-cursor-intersection-callback";
@@ -37,7 +38,11 @@ function UserCard({ pubkey }: { pubkey: string }) {
   );
 }
 
-export default function ({ community, onClose, ...props }: Omit<ModalProps, "children"> & { community: NostrEvent }) {
+export default function CommunityMembersModal({
+  community,
+  onClose,
+  ...props
+}: Omit<ModalProps, "children"> & { community: NostrEvent }) {
   const communityCoordinate = getEventCoordinate(community);
   const readRelays = useReadRelayUrls(getCommunityRelays(community));
   const timeline = useTimelineLoader(`${communityCoordinate}-members`, readRelays, [
@@ -47,8 +52,6 @@ export default function ({ community, onClose, ...props }: Omit<ModalProps, "chi
   const lists = useSubject(timeline.timeline);
   const callback = useTimelineCurserIntersectionCallback(timeline);
 
-  // TODO: remove at some future date when apps have transitioned to using k:10004 for communities
-  // https://github.com/nostr-protocol/nips/pull/880
   const listsByPubkey: Record<string, NostrEvent> = {};
   for (const list of lists) {
     if (!listsByPubkey[list.pubkey] || listsByPubkey[list.pubkey].created_at < list.created_at) {

src/views/notifications/notification-item.tsx

@@ -165,7 +165,7 @@ const ZapNotification = forwardRef<HTMLDivElement, { event: NostrEvent }>(({ eve
             <UserAvatarLink pubkey={zap.request.pubkey} />
           </AvatarGroup>
           <Text>{readablizeSats(zap.payment.amount / 1000)} sats</Text>
-          <ExpandableToggleButton aria-label="Toggle event" ml="auto" toggle={expanded} />
+          {eventJSX !== null && <ExpandableToggleButton aria-label="Toggle event" ml="auto" toggle={expanded} />}
         </Flex>
         {expanded.isOpen && eventJSX}
       </Flex>