feat: new features highlight & wallet landing (#1166)

* feat: new features highlight

* fix: added latest features button to popup nav drawer

* fix: css tweaks

* chore: added changeset

* feat: new get started ui

* feat: new get started ui (user has some accounts)

* fix: added missing i18n

* fix: don't show  unless user has no funds and less than 3 accounts

* feat: learn more and correct popup no-accounts portfolio header

* feat: learn more demo images

* feat: try talisman

* fix: added fullscreen styles to the no-accounts landing

* feat: try talisman link to portfolio

* fix: updated learn more images

* fix: feature crit feedback

* feat: added ens lookup to `Try it` form

* feat: markdown release notes

* fix: pass `Whats New` markdown content through `i18n.t` before converting it to html

* fix: bottom padding in whats new

* chore: added v1.21.0 release notes

* fix: include markdown contents in i18n keys

* fix: prettier fmt

.changeset/tough-cobras-cough.md

@@ -0,0 +1,5 @@
+---
+"@talismn/icons": patch
+---
+
+feat: added stars icon

apps/extension/i18next-parser.config.cjs

@@ -43,9 +43,38 @@ module.exports = {
     // wallet core
     "src/core/**/*.{ts,tsx}",
     // wallet ui
-    "src/ui/**/*.{ts,tsx}",
+    "src/ui/**/*.{ts,tsx,md}",
     // wallet @talisman components
     "src/@talisman/**/*.{ts,tsx}",
   ],
   output: "public/locales/$LOCALE/$NAMESPACE.json",
+
+  lexers: {
+    md: [
+      /**
+       * Custom lexer which extracts markdown files as i18n keys.
+       *
+       * Once these keys are translated, the following will work:
+       *
+       *     import { t } from 'i18next'
+       *     import content from 'MyMarkdownFile.md'
+       *
+       *     console.log(content)    // `# Oh **hello**`
+       *     console.log(t(content)) // `# Oh **salut**`
+       */
+      class CustomLexer {
+        /**
+         * Extracts the translations keys from the file.
+         *
+         * @param {string} content The markdown file contents
+         * @returns {Array<{ key: string }>} The translation keys
+         */
+        extract(content) {
+          return [{ key: content }]
+        }
+
+        on() {}
+      },
+    ],
+  },
 }

apps/extension/package.json

@@ -65,6 +65,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",
@@ -92,6 +93,7 @@
     "dcent-web-connector": "^0.14.1",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.7",
+    "dompurify": "^3.0.6",
     "dotenv": "^16.3.1",
     "dotenv-webpack": "^7.1.1",
     "downshift": "^6.1.12",
@@ -112,9 +114,11 @@
     "loglevel": "^1.8.1",
     "lottie-react": "2.4.0",
     "lz-string": "^1.5.0",
+    "marked": "^11.1.0",
     "nanoid": "3.3.7",
     "posthog-js": "^1.96.1",
     "raptorq": "1.7.24",
+    "raw-loader": "^4.0.2",
     "react": "18.2.0",
     "react-app-polyfill": "3.0.0",
     "react-countup": "^6.5.0",

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

apps/extension/src/core/domains/app/handler.ts

@@ -210,8 +210,8 @@ export default class AppHandler extends ExtensionHandler {
     return true
   }
 
-  private popupOpen(): boolean {
-    // TODO does absolutely nothing ???
+  private popupOpen(argument?: string): boolean {
+    windowManager.popupOpen(argument)
     return true
   }
 
@@ -262,7 +262,7 @@ export default class AppHandler extends ExtensionHandler {
         return this.onboardOpen()
 
       case "pri(app.popupOpen)":
-        return this.popupOpen()
+        return this.popupOpen(request as string | undefined)
 
       case "pri(app.promptLogin)":
         return this.promptLogin(request as boolean)

apps/extension/src/core/domains/app/store.settings.ts

@@ -16,6 +16,7 @@ export interface SettingsStoreData {
   spiritClanFeatures: boolean
   selectableCurrencies: TokenRateCurrency[]
   selectedCurrency: TokenRateCurrency
+  newFeaturesDismissed: string
 }
 
 export class SettingsStore extends StorageProvider<SettingsStoreData> {}
@@ -32,6 +33,7 @@ export const DEFAULT_SETTINGS: SettingsStoreData = {
   spiritClanFeatures: true,
   selectableCurrencies: ["usd", "dot", "eth"],
   selectedCurrency: "usd",
+  newFeaturesDismissed: "0",
 }
 
 export const settingsStore = new SettingsStore("settings", DEFAULT_SETTINGS)

apps/extension/src/core/domains/app/types.ts

@@ -75,7 +75,7 @@ export interface AppMessages {
   "pri(app.checkPassword)": [CheckPasswordRequest, boolean]
   "pri(app.dashboardOpen)": [RequestRoute, boolean]
   "pri(app.onboardOpen)": [null, boolean]
-  "pri(app.popupOpen)": [null, boolean]
+  "pri(app.popupOpen)": [string | undefined, boolean]
   "pri(app.modalOpen.request)": [ModalOpenRequest, boolean]
   "pri(app.sendFunds.open)": [SendFundsOpenRequest, boolean]
   "pri(app.modalOpen.subscribe)": [null, boolean, ModalOpenRequest]

apps/extension/src/core/libs/WindowManager.ts

@@ -122,7 +122,7 @@ class WindowManager {
 
     const popupCreateArgs: Browser.Windows.CreateCreateDataType = {
       ...WINDOW_OPTS,
-      url: Browser.runtime.getURL(`popup.html${argument ? argument : ""}`),
+      url: Browser.runtime.getURL(`popup.html${argument ?? ""}`),
       top,
       left,
       width: WINDOW_OPTS.width + widthDelta,

apps/extension/src/ui/api/api.ts

@@ -24,7 +24,7 @@ export const api: MessageTypes = {
   authStatusSubscribe: (cb) => messageService.subscribe("pri(app.authStatus.subscribe)", null, cb),
   dashboardOpen: (route) => messageService.sendMessage("pri(app.dashboardOpen)", { route }),
   onboardOpen: () => messageService.sendMessage("pri(app.onboardOpen)"),
-  popupOpen: () => messageService.sendMessage("pri(app.popupOpen)"),
+  popupOpen: (argument?: string) => messageService.sendMessage("pri(app.popupOpen)", argument),
   promptLogin: (closeOnSuccess = false) =>
     messageService.sendMessage("pri(app.promptLogin)", closeOnSuccess),
   approveMetaRequest: (id) => messageService.sendMessage("pri(metadata.approve)", { id }),

apps/extension/src/ui/api/types.ts

@@ -80,7 +80,7 @@ export default interface MessageTypes {
   authStatusSubscribe: (cb: (val: LoggedinType) => void) => UnsubscribeFn
   dashboardOpen: (route: string) => Promise<boolean>
   onboardOpen: () => Promise<boolean>
-  popupOpen: () => Promise<boolean>
+  popupOpen: (argument?: string) => Promise<boolean>
   promptLogin: (closeOnSuccess?: boolean) => Promise<boolean>
   approveMetaRequest: (id: RequestMetadataId) => Promise<boolean>
   rejectMetaRequest: (id: RequestMetadataId) => Promise<boolean>

apps/extension/src/ui/apps/dashboard/routes/Portfolio/NoAccountsFullscreen.tsx

@@ -0,0 +1,66 @@
+import { api } from "@ui/api"
+import { AnalyticsPage, sendAnalyticsEvent } from "@ui/api/analytics"
+import { useBuyTokensModal } from "@ui/domains/Asset/Buy/BuyTokensModalContext"
+import { NoAccounts } from "@ui/domains/Portfolio/EmptyStates/NoAccounts"
+import { useAnalyticsPageView } from "@ui/hooks/useAnalyticsPageView"
+import { useCallback } from "react"
+import { useNavigate } from "react-router-dom"
+
+const ANALYTICS_PAGE: AnalyticsPage = {
+  container: "Fullscreen",
+  feature: "Onboarding",
+  featureVersion: 1,
+  page: "Dashboard - No Accounts",
+}
+
+export const NoAccountsFullscreen = () => {
+  useAnalyticsPageView(ANALYTICS_PAGE)
+  const navigate = useNavigate()
+  const { open: openBuyTokensModal } = useBuyTokensModal()
+
+  const onDeposit = useCallback(() => {
+    sendAnalyticsEvent({
+      ...ANALYTICS_PAGE,
+      name: "Goto",
+      action: "add funds",
+    })
+    openBuyTokensModal()
+  }, [openBuyTokensModal])
+
+  const onAddAccount = useCallback(() => {
+    sendAnalyticsEvent({
+      ...ANALYTICS_PAGE,
+      name: "Goto",
+      action: "add account",
+    })
+    navigate("/accounts/add")
+  }, [navigate])
+
+  const onTryTalisman = useCallback(() => {
+    sendAnalyticsEvent({
+      ...ANALYTICS_PAGE,
+      name: "Goto",
+      action: "try talisman",
+    })
+    api.popupOpen("#/portfolio/try-talisman")
+  }, [])
+
+  const onLearnMore = useCallback(() => {
+    sendAnalyticsEvent({
+      ...ANALYTICS_PAGE,
+      name: "Goto",
+      action: "learn more",
+    })
+    api.popupOpen("#/portfolio/learn-more")
+  }, [])
+
+  return (
+    <NoAccounts
+      fullscreen
+      onDeposit={onDeposit}
+      onAddAccount={onAddAccount}
+      onTryTalisman={onTryTalisman}
+      onLearnMore={onLearnMore}
+    />
+  )
+}

apps/extension/src/ui/apps/dashboard/routes/Portfolio/PortfolioAssets.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 import { Button } from "talisman-ui"
 
-import { NoAccountsFullscreen } from "./NoAccounts"
+import { NoAccountsFullscreen } from "./NoAccountsFullscreen"
 
 const FullscreenPortfolioAssets = ({ balances }: { balances: Balances }) => {
   const { t } = useTranslation()

apps/extension/src/ui/apps/dashboard/routes/Portfolio/index.tsx

@@ -1,3 +1,4 @@
+import { useBuyTokensModal } from "@ui/domains/Asset/Buy/BuyTokensModalContext"
 import { PortfolioProvider } from "@ui/domains/Portfolio/context"
 import { useSelectedAccount } from "@ui/domains/Portfolio/SelectedAccountContext"
 import { StakingBannerProvider } from "@ui/domains/Staking/context"
@@ -12,16 +13,26 @@ export const PortfolioRoutes = () => {
   // popup may pass an account in the query string, with expand button
   const { select } = useSelectedAccount()
   const [searchParams, updateSearchParams] = useSearchParams()
+  const { open: openBuyTokensModal } = useBuyTokensModal()
 
   useEffect(() => {
     const account = searchParams.get("account")
-    if (account) {
-      select(account === "all" ? undefined : account)
-      searchParams.delete("account")
-      updateSearchParams(searchParams, { replace: true })
-    }
+    if (!account) return
+
+    select(account === "all" ? undefined : account)
+    searchParams.delete("account")
+    updateSearchParams(searchParams, { replace: true })
   }, [searchParams, select, updateSearchParams])
 
+  useEffect(() => {
+    const buyTokens = searchParams.get("buyTokens")
+    if (buyTokens === null) return
+
+    openBuyTokensModal()
+    searchParams.delete("buyTokens")
+    updateSearchParams(searchParams, { replace: true })
+  }, [openBuyTokensModal, searchParams, updateSearchParams])
+
   return (
     // share layout to prevent sidebar flickering when navigating between the 2 pages
     <DashboardLayout centered large>

apps/extension/src/ui/apps/dashboard/routes/Tokens/TokensPage.tsx

@@ -6,6 +6,7 @@ import { TogglePill } from "@talisman/components/TogglePill"
 import { CustomEvmNetwork, EvmNetwork, EvmNetworkId, Token } from "@talismn/chaindata-provider"
 import { MoreHorizontalIcon, PlusIcon } from "@talismn/icons"
 import { AnalyticsPage, sendAnalyticsEvent } from "@ui/api/analytics"
+import { DashboardLayout } from "@ui/apps/dashboard/layout/DashboardLayout"
 import { TokenLogo } from "@ui/domains/Asset/TokenLogo"
 import { NetworkLogo } from "@ui/domains/Ethereum/NetworkLogo"
 import { EnableTestnetPillButton } from "@ui/domains/Settings/EnableTestnetPillButton"
@@ -33,8 +34,6 @@ import {
 } from "talisman-ui"
 import urlJoin from "url-join"
 
-import { DashboardLayout } from "../../layout/DashboardLayout"
-
 const CustomPill = () => {
   const { t } = useTranslation("admin")
 

apps/extension/src/ui/apps/onboard/routes/Welcome.tsx

@@ -53,8 +53,8 @@ export const WelcomePage = () => {
   return (
     <OnboardLayout analytics={ANALYTICS_PAGE}>
       <div className="my-[8rem] flex flex-col items-center justify-center gap-32 ">
-        <div className="welcome-text flex flex-col items-center text-center xl:w-[76rem]">
-          <div className="flex flex-col items-center gap-24 text-white xl:w-[65.2rem]">
+        <div className="welcome-text flex flex-col items-center gap-14 text-center xl:w-[76rem]">
+          <div className="flex flex-col items-center gap-10 text-white xl:w-[65.2rem]">
             <TalismanWhiteLogo className="h-auto w-96" />
             <div className="font-whyteInkTrap text-[8rem] leading-none tracking-tight lg:text-[12rem]">
               <Trans