feat: markdown release notes

TalismanSociety · Dec 18, 2023 · 67e3cd0 · 67e3cd0
1 parent 1e503d3
commit 67e3cd0
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 52 deletions.
diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -64,6 +64,7 @@
     "@types/blueimp-md5": "2.18.0",
     "@types/chrome": "^0.0.180",
     "@types/color": "3.0.3",
+    "@types/dompurify": "^3.0.5",
     "@types/jest": "27.4.1",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.180",
@@ -91,6 +92,7 @@
     "dcent-web-connector": "^0.14.1",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.6",
+    "dompurify": "^3.0.6",
     "dotenv": "^16.0.3",
     "dotenv-webpack": "^7.1.1",
     "downshift": "^6.1.12",
@@ -111,9 +113,11 @@
     "loglevel": "^1.8.1",
     "lottie-react": "2.4.0",
     "lz-string": "^1.5.0",
+    "marked": "^11.1.0",
     "nanoid": "3.3.6",
     "posthog-js": "^1.70.2",
     "raptorq": "1.7.22",
+    "raw-loader": "^4.0.2",
     "react": "18.2.0",
     "react-app-polyfill": "3.0.0",
     "react-countup": "^6.4.2",

diff --git a/apps/extension/src/@types/react-app-env.d.ts b/apps/extension/src/@types/react-app-env.d.ts
@@ -96,6 +96,11 @@ declare module "*.svg" {
 declare module "*.woff"
 declare module "*.woff2"
 
+declare module "*.md" {
+  const value: string
+  export default value
+}
+
 declare module "eth-phishing-detect" {
   const isEthPhishingDomain: (url: string) => boolean
   export default isEthPhishingDomain

diff --git a/apps/extension/src/core/domains/app/store.settings.ts b/apps/extension/src/core/domains/app/store.settings.ts
@@ -16,7 +16,7 @@ export interface SettingsStoreData {
   spiritClanFeatures: boolean
   selectableCurrencies: TokenRateCurrency[]
   selectedCurrency: TokenRateCurrency
-  newFeaturesDismissed: number
+  newFeaturesDismissed: string
 }
 
 export class SettingsStore extends StorageProvider<SettingsStoreData> {}
@@ -33,7 +33,7 @@ export const DEFAULT_SETTINGS: SettingsStoreData = {
   spiritClanFeatures: true,
   selectableCurrencies: ["usd", "dot", "eth"],
   selectedCurrency: "usd",
-  newFeaturesDismissed: 0,
+  newFeaturesDismissed: "0",
 }
 
 export const settingsStore = new SettingsStore("settings", DEFAULT_SETTINGS)
diff --git a/apps/extension/src/ui/apps/popup/components/NewFeaturesButton.tsx b/apps/extension/src/ui/apps/popup/components/NewFeaturesButton.tsx
@@ -39,7 +39,7 @@ export const NewFeaturesButton = ({ className }: Props) => {
     [setDismissedVersion]
   )
 
-  if (dismissedVersion >= WhatsNewVersion) return null
+  if (dismissedVersion === WhatsNewVersion) return null
 
   return (
     <div
@@ -80,7 +80,7 @@ export const NewFeaturesButton = ({ className }: Props) => {
           </Trans>
         </div>
         <div className="text-tiny text-grey-200 flex gap-3">
-          <span>{t("See what's new on {{version}}", { version: `v${process.env.VERSION}` })}</span>
+          <span>{t("See what's new on {{version}}", { version: WhatsNewVersion })}</span>
           <button className="underline" onClick={handleDismissClick} type="button">
             {t("Dismiss")}
           </button>

diff --git a/apps/extension/src/ui/apps/popup/pages/Portfolio/PortfolioWhatsNew.tsx b/apps/extension/src/ui/apps/popup/pages/Portfolio/PortfolioWhatsNew.tsx
@@ -2,11 +2,14 @@ import { HandMonoLogo } from "@talisman/theme/logos"
 import { ChevronLeftIcon } from "@talismn/icons"
 import { AnalyticsPage, sendAnalyticsEvent } from "@ui/api/analytics"
 import { useSetting } from "@ui/hooks/useSettings"
+import DOMPurify from "dompurify"
+import { marked } from "marked"
 import { useCallback } from "react"
 import { Trans, useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
 import HeroUrl from "./assets/Whats New - Hero.png"
+import whatsNewContent from "./assets/Whats New.md"
 
 const ANALYTICS_PAGE: AnalyticsPage = {
   container: "Popup",
@@ -16,53 +19,42 @@ const ANALYTICS_PAGE: AnalyticsPage = {
 }
 
 /**
- * This number should be incremented when we want to show the `What's New` banner
+ * This string should be changed when we want to show the `What's New` banner
  * to users who have dismissed it in the past.
  *
  * E.g. when we have new features to tell them about.
  */
-export const WhatsNewVersion = 1
+export const WhatsNewVersion =
+  /version: (?<version>v[0-9.]+)/im.exec(whatsNewContent)?.groups?.version ?? "0"
 
-export const PortfolioWhatsNew = () => {
-  const { t } = useTranslation()
+const whatsNewHtml = DOMPurify.sanitize(
+  marked(whatsNewContent, { gfm: true, async: false }) as string
+)
 
-  return (
-    <div className="text-body-secondary flex flex-col gap-12 text-sm">
-      <div className="relative">
-        <img
-          className="pointer-events-none relative w-full rounded-sm"
-          src={HeroUrl}
-          alt="a hero banner"
-        />
-        <div className="pointer-events-none absolute left-0 top-0 flex h-full w-full flex-col gap-4 p-8">
-          <div className="font-whyteInkTrap flex items-center gap-1 text-sm tracking-tight text-white">
-            <HandMonoLogo className="text-base" />
-            Talisman
-          </div>
-          <div className="text-primary text-2xl font-extrabold">V{process.env.VERSION}</div>
+export const PortfolioWhatsNew = () => (
+  <div className="text-body-secondary flex flex-col gap-12 text-sm">
+    <div className="relative">
+      <img
+        className="pointer-events-none relative w-full rounded-sm"
+        src={HeroUrl}
+        alt="a hero banner"
+      />
+      <div className="pointer-events-none absolute left-0 top-0 flex h-full w-full flex-col gap-4 p-8">
+        <div className="font-whyteInkTrap flex items-center gap-1 text-sm tracking-tight text-white">
+          <HandMonoLogo className="text-base" />
+          Talisman
         </div>
-      </div>
-      <div>
-        <Trans t={t}>
-          <span className="text-body">💹 Real-Time Price Tracking:</span> Stay updated with live
-          crypto prices
-        </Trans>
-      </div>
-      <div>
-        <Trans t={t}>
-          <span className="text-body">🔄 Simplified Swaps:</span> Exchange crypto faster with our
-          streamlined swap interface
-        </Trans>
-      </div>
-      <div>
-        <Trans t={t}>
-          <span className="text-body">👀 Invisible Mode:</span> Toggle on to hide your balances for
-          added privacy
-        </Trans>
+        <div className="text-primary text-2xl font-extrabold capitalize">{WhatsNewVersion}</div>
       </div>
     </div>
-  )
-}
+    <div>
+      <div
+        className="flex flex-col gap-12 [&_strong]:font-normal [&_strong]:text-white"
+        dangerouslySetInnerHTML={{ __html: whatsNewHtml ?? "" }}
+      />
+    </div>
+  </div>
+)
 
 export const PortfolioWhatsNewHeader = () => {
   const { t } = useTranslation()
@@ -94,7 +86,7 @@ export const PortfolioWhatsNewHeader = () => {
         </Trans>
       </div>
       <div className="flex-1 text-right">
-        {dismissedVersion >= WhatsNewVersion ? (
+        {dismissedVersion === WhatsNewVersion ? (
           <span />
         ) : (
           <button

diff --git a/apps/extension/src/ui/apps/popup/pages/Portfolio/assets/Whats New.md b/apps/extension/src/ui/apps/popup/pages/Portfolio/assets/Whats New.md
@@ -0,0 +1,8 @@
+<!-- version: v1.20.1 -->
+<!-- Update this ^ to change the version number shown in the header of the `What's New` view. -->
+
+**💹 Real-Time Price Tracking:** Stay updated with live crypto prices
+
+**🔄 Simplified Swaps:** Exchange crypto faster with our streamlined swap interface
+
+**👀 Invisible Mode:** Toggle on to hide your balances for added privacy
diff --git a/apps/extension/webpack/webpack.common.js b/apps/extension/webpack/webpack.common.js
@@ -79,6 +79,10 @@ const config = (env) => ({
         resourceQuery: { not: [/url/] },
         type: "asset",
       },
+      {
+        test: /\.md$/i,
+        use: "raw-loader",
+      },
       {
         test: /\.css$/,
         use: ["style-loader", "css-loader", "postcss-loader"],