fix custom emojis

src/components/content/index.tsx

@@ -4,6 +4,7 @@ import { ComponentMap } from "applesauce-react";
 
 import Mention from "./mention";
 import Cashu from "./cashu";
+import { InlineEmoji } from "./ininle-emoji";
 const InlineFedimintCard = lazy(() => import("../fedimint/inline-fedimint-card"));
 
 export const components: ComponentMap = {
@@ -11,4 +12,5 @@ export const components: ComponentMap = {
   mention: Mention,
   cashu: Cashu,
   fedimint: ({ node }) => <InlineFedimintCard token={node.token} />,
+  emoji: ({ node }) => <InlineEmoji url={node.url} code={node.code} />,
 };

src/components/content/ininle-emoji.tsx

@@ -0,0 +1,16 @@
+import { Image } from "@chakra-ui/react";
+
+export function InlineEmoji({ url, code }: { url: string; code: string }) {
+  return (
+    <Image
+      src={url}
+      h="1.5em"
+      maxW="3em"
+      display="inline-block"
+      verticalAlign="middle"
+      title={code}
+      alt={":" + code + ":"}
+      overflow="hidden"
+    />
+  );
+}

src/components/county-picker.tsx

@@ -10,7 +10,7 @@ export default function CountyPicker({ ...props }: Omit<SelectProps, "children">
   const codes = useMemo(() => Object.keys(getAlpha3Codes()).map((code) => ({ name: getName(code, "en"), code })), []);
 
   return (
-    <Select {...props}>
+    <Select w="auto" {...props}>
       <option value="">Any</option>
       {codes.map(({ code, name }) => (
         <option value={code}>{name}</option>

src/components/external-embeds/types/emoji.tsx

@@ -1,27 +1,16 @@
-import { Image } from "@chakra-ui/react";
 import { EmbedableContent, embedJSX } from "../../../helpers/embeds";
 import { DraftNostrEvent, NostrEvent, isEmojiTag } from "../../../types/nostr-event";
 import { getMatchEmoji } from "../../../helpers/regexp";
+import { InlineEmoji } from "../../content/ininle-emoji";
+import { getEmojiTag } from "applesauce-core/helpers";
 
 export function embedEmoji(content: EmbedableContent, note: NostrEvent | DraftNostrEvent) {
   return embedJSX(content, {
     regexp: getMatchEmoji(),
     render: (match) => {
-      const emojiTag = note.tags.filter(isEmojiTag).find((t) => t[1].toLowerCase() === match[1].toLowerCase());
-      if (emojiTag) {
-        return (
-          <Image
-            src={emojiTag[2]}
-            h="1.5em"
-            maxW="3em"
-            display="inline-block"
-            verticalAlign="middle"
-            title={match[1]}
-            alt={":" + match[1] + ":"}
-            overflow="hidden"
-          />
-        );
-      }
+      const tag = getEmojiTag(note, match[1]);
+
+      if (tag) return <InlineEmoji url={tag[2]!} code={match[1]} />;
       return null;
     },
     name: "emoji",

src/views/discovery/relays/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Flex, Select } from "@chakra-ui/react";
+import { Flex, Select, useDisclosure } from "@chakra-ui/react";
 import { Filter, matchFilters, NostrEvent } from "nostr-tools";
 import { getEventUID } from "nostr-idb";
 import { useThrottle } from "react-use";
@@ -11,7 +11,7 @@ import RelayList from "./components/relay-list";
 import useRouteStateValue from "../../../hooks/use-route-state-value";
 import RelayMap from "./components/relay-map";
 import RelayStatusDetails from "./components/relay-details";
-import { getTagValue, sortByDate } from "../../../helpers/nostr/event";
+import { getTagValue } from "../../../helpers/nostr/event";
 import { SelectedContext } from "./selected-context";
 import CountyPicker from "../../../components/county-picker";
 import { useBreakpointValue } from "../../../providers/global/breakpoint-provider";
@@ -19,7 +19,7 @@ import { useBreakpointValue } from "../../../providers/global/breakpoint-provide
 export default function RelayDiscoveryView() {
   const showMap = useBreakpointValue({ base: false, lg: true });
 
-  const [discoveryRelay, setDiscoveryRelay] = useState("wss://history.nostr.watch/");
+  const [discoveryRelay, setDiscoveryRelay] = useState("wss://relay.nostr.watch");
   const [monitor, setMonitor] = useState("9bbbb845e5b6c831c29789900769843ab43bb5047abe697870cb50b6fc9bf923");
   const [network, setNetwork] = useState("");
   const [county, setCounty] = useState("");
@@ -48,12 +48,13 @@ export default function RelayDiscoveryView() {
     if (!subscription) return;
 
     const filter: Filter = {
-      authors: [monitor],
       kinds: [30166],
       // set from https://github.com/nostr-protocol/nips/pull/230#pullrequestreview-2290873405
       since: Math.round(Date.now() / 1000) - 60 * 60 * 2,
     };
 
+    if (monitor) filter.authors = [monitor];
+
     if (network) filter["#n"] = [network];
     if (county) {
       // if (filter["#L"]) filter["#L"].push("countryCode");
@@ -91,8 +92,14 @@ export default function RelayDiscoveryView() {
             <option value="clearnet">clearnet</option>
             <option value="tor">Tor</option>
             <option value="i2p">I2P</option>
+            <option value="hyper">Hyper</option>
           </Select>
           <CountyPicker value={county} onChange={(e) => setCounty(e.target.value)} w="auto" />
+
+          <Select value={monitor} onChange={(e) => setMonitor(e.target.value)} w="auto">
+            <option value="">Self Published</option>
+            <option value="9bbbb845e5b6c831c29789900769843ab43bb5047abe697870cb50b6fc9bf923">nostr.watch</option>
+          </Select>
         </Flex>
 
         <Flex gap="2" overflow="hidden" h="full">