feat: add ParagraphWithLinks component for rendering links in changelog

Author: jungcome7

apps/extension/src/pages/main/components/update-note-modal/index.tsx

@@ -21,6 +21,7 @@ import { InExtensionMessageRequester } from "@keplr-wallet/router-extension";
 import { BACKGROUND_PORT } from "@keplr-wallet/router";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../../../stores";
+import { ParagraphWithLinks } from "./paragraph-with-links";
 
 export type UpdateNotePageData = {
   title: string;
@@ -32,6 +33,9 @@ export type UpdateNotePageData = {
       }
     | undefined;
   paragraph: string;
+  links?: {
+    [key: string]: string;
+  };
   isSidePanelBeta?: boolean;
 };
 
@@ -271,13 +275,9 @@ const CarouselPage: FunctionComponent<{
               : ColorPalette["gray-100"]
           }
         >
-          <FormattedMessage
-            id="update-node/paragraph/noop"
-            defaultMessage={notePageData.paragraph}
-            values={{
-              br: <br />,
-              b: (...chunks: any) => <b>{chunks}</b>,
-            }}
+          <ParagraphWithLinks
+            paragraph={notePageData.paragraph}
+            links={notePageData.links}
           />
         </Body2>
       </Box>

apps/extension/src/pages/main/components/update-note-modal/paragraph-with-links.tsx

@@ -0,0 +1,73 @@
+import React, { FunctionComponent } from "react";
+import { FormattedMessage } from "react-intl";
+import styled from "styled-components";
+import { ColorPalette } from "../../../../styles";
+import { UpdateNotePageData } from ".";
+
+const Styles = {
+  Link: styled.span`
+    color: ${(props) =>
+      props.theme.mode === "light"
+        ? ColorPalette["gray-600"]
+        : ColorPalette["gray-50"]};
+
+    cursor: pointer;
+    text-decoration: underline;
+  `,
+};
+
+export const ParagraphWithLinks: FunctionComponent<{
+  paragraph: string;
+  links?: UpdateNotePageData["links"];
+}> = ({ paragraph, links }) => {
+  return (
+    <FormattedMessage
+      id="update-node/paragraph/noop"
+      defaultMessage={paragraph}
+      values={{
+        br: <br />,
+        b: (...chunks: React.ReactNode[]) => <b>{chunks}</b>,
+        link: links
+          ? (...chunks: React.ReactNode[]) => {
+              const flattenedChunks: React.ReactNode[] = [];
+
+              for (const chunk of chunks) {
+                if (Array.isArray(chunk)) {
+                  flattenedChunks.push(...chunk);
+                } else {
+                  flattenedChunks.push(chunk);
+                }
+              }
+
+              const linkText = flattenedChunks
+                .filter(
+                  (chunk): chunk is string | number =>
+                    typeof chunk === "string" || typeof chunk === "number"
+                )
+                .map((chunk) => String(chunk))
+                .join("")
+                .trim();
+
+              const url = links[linkText];
+
+              if (url) {
+                return (
+                  <Styles.Link
+                    onClick={(e) => {
+                      e.preventDefault();
+
+                      browser.tabs.create({ url });
+                    }}
+                  >
+                    {chunks}
+                  </Styles.Link>
+                );
+              }
+
+              return <React.Fragment>{chunks}</React.Fragment>;
+            }
+          : undefined,
+      }}
+    />
+  );
+};