React Map Optimization, [missing map keys ] (#283)

* comment unused import ( minmizes js )

* Add keys missing keys on map for better React Diff

* [ImgBot] Optimize images

*Total -- 821.02kb -> 674.06kb (17.9%)

/public/nostrich_512.png -- 650.16kb -> 527.94kb (18.8%)
/public/nostrich_256.png -- 170.86kb -> 146.12kb (14.48%)

Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com>

---------

Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com>
Co-authored-by: ImgBotApp <ImgBotHelp@gmail.com>

src/Element/Note.tsx

@@ -1,5 +1,5 @@
 import "./Note.css";
-import { useCallback, useMemo, useState, useLayoutEffect, ReactNode } from "react";
+import React, { useCallback, useMemo, useState, useLayoutEffect, ReactNode } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { useInView } from "react-intersection-observer";
 import { useIntl, FormattedMessage } from "react-intl";
@@ -127,12 +127,12 @@ export default function Note(props: NoteProps) {
     }
     mentions.sort(a => (a.name.startsWith("npub") ? 1 : -1));
     const othersLength = mentions.length - maxMentions;
-    const renderMention = (m: { link: React.ReactNode }, idx: number) => {
+    const renderMention = (m: { link: React.ReactNode; pk: string; name: string }, idx: number) => {
       return (
-        <>
+        <React.Fragment key={m.pk}>
           {idx > 0 && ", "}
           {m.link}
-        </>
+        </React.Fragment>
       );
     };
     const pubMentions =

src/Element/Text.tsx

@@ -38,7 +38,7 @@ export default function Text({ content, tags, creator, users }: TextProps) {
         if (typeof f === "string") {
           return f.split(UrlRegex).map(a => {
             if (a.startsWith("http")) {
-              return <HyperText link={a} creator={creator} />;
+              return <HyperText key={a} link={a} creator={creator} />;
             }
             return a;
           });
@@ -60,7 +60,7 @@ export default function Text({ content, tags, creator, users }: TextProps) {
               if (ref) {
                 switch (ref.Key) {
                   case "p": {
-                    return <Mention pubkey={ref.PubKey ?? ""} />;
+                    return <Mention key={ref.PubKey} pubkey={ref.PubKey ?? ""} />;
                   }
                   case "e": {
                     const eText = hexToBech32("note", ref.Event).substring(0, 12);
@@ -71,7 +71,7 @@ export default function Text({ content, tags, creator, users }: TextProps) {
                     );
                   }
                   case "t": {
-                    return <Hashtag tag={ref.Hashtag ?? ""} />;
+                    return <Hashtag key={ref.Hashtag} tag={ref.Hashtag ?? ""} />;
                   }
                 }
               }
@@ -109,7 +109,7 @@ export default function Text({ content, tags, creator, users }: TextProps) {
         if (typeof f === "string") {
           return f.split(HashtagRegex).map(i => {
             if (i.toLowerCase().startsWith("#")) {
-              return <Hashtag tag={i.substring(1)} />;
+              return <Hashtag key={i} tag={i.substring(1)} />;
             } else {
               return i;
             }

src/Pages/Login.tsx

@@ -12,7 +12,7 @@ import { DefaultRelays, EmailRegex } from "Const";
 import { bech32ToHex, unwrap } from "Util";
 import { HexKey } from "Nostr";
 import ZapButton from "Element/ZapButton";
-import useImgProxy from "Feed/ImgProxy";
+// import useImgProxy from "Feed/ImgProxy";
 
 interface ArtworkEntry {
   name: string;
@@ -51,7 +51,7 @@ export default function LoginPage() {
   const [key, setKey] = useState("");
   const [error, setError] = useState("");
   const [art, setArt] = useState<ArtworkEntry>();
-  const { proxy } = useImgProxy();
+  // const { proxy } = useImgProxy();
 
   useEffect(() => {
     if (publicKey) {

src/Pages/ProfilePage.tsx

@@ -278,7 +278,7 @@ export default function ProfilePage() {
   }
 
   function renderTab(v: Tab) {
-    return <TabElement t={v} tab={tab} setTab={setTab} />;
+    return <TabElement key={v.value} t={v} tab={tab} setTab={setTab} />;
   }
 
   const w = window.document.querySelector(".page")?.clientWidth;
@@ -293,6 +293,7 @@ export default function ProfilePage() {
       </div>
       <div className="tabs main-content" ref={horizontalScroll}>
         {[ProfileTab.Notes, ProfileTab.Followers, ProfileTab.Follows, ProfileTab.Muted].map(renderTab)}
+
         {optionalTabs.map(renderTab)}
         {isMe && renderTab(ProfileTab.Blocked)}
       </div>