Create DappMode type

In some cases we render different content layouts etc depnding on
whether it is an embedded or standalone application. Here we introduce
the `DappMode` type to simplify code and organize the dapp modes.

dapp/src/components/Layout.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { Outlet } from "react-router-dom"
 import { Flex, VStack } from "@chakra-ui/react"
 import { useIsEmbed, useMobileMode } from "#/hooks"
+import { DappMode } from "#/types"
 import DocsDrawer from "./DocsDrawer"
 import Header from "./Header"
 import ModalRoot from "./ModalRoot"
@@ -10,7 +11,7 @@ import MobileModeBanner from "./MobileModeBanner"
 import Footer from "./Footer"
 
 const PADDING = "2.5rem" // 40px
-const PAGE_MAX_WIDTH = {
+const PAGE_MAX_WIDTH: Record<DappMode, string> = {
   standalone: "63rem", // 1008px
   "ledger-live": "63rem", // 1008px
 }

dapp/src/components/WelcomeModal.tsx

@@ -16,15 +16,21 @@ import {
   Highlight,
 } from "@chakra-ui/react"
 import { H3, TextSm } from "#/components/shared/Typography"
-import { BaseModalProps } from "#/types"
+import { BaseModalProps, DappMode } from "#/types"
 import { EmbedApp } from "#/utils/referralProgram"
 import { useIsEmbed } from "#/hooks"
 import withBaseModal from "./ModalRoot/withBaseModal"
 import step1Video from "../assets/videos/welcome-steps/welcome-step-1.mp4"
 import step2Video from "../assets/videos/welcome-steps/welcome-step-2.mp4"
 import step3Video from "../assets/videos/welcome-steps/welcome-step-3.mp4"
 
-const embeddedAppToContent: Record<EmbedApp, () => ReactElement> = {
+const dappModeToContent: Record<DappMode, () => ReactElement> = {
+  standalone: () => (
+    <>
+      Acre makes earning rewards with your BTC simple and secure. Dedicated to
+      everyone, it&apos;s fun and easy to use. No advanced knowledge required.
+    </>
+  ),
   "ledger-live": () => (
     <Highlight query="Ledger Live">
       Acre makes earning rewards with your BTC simple and secure. Tailored for
@@ -46,15 +52,8 @@ const steps = [
       </H3>
     ),
     content: (embeddedApp?: EmbedApp) =>
-      embeddedApp ? (
-        embeddedAppToContent[embeddedApp]()
-      ) : (
-        <>
-          Acre makes earning rewards with your BTC simple and secure. Dedicated
-          to everyone, it&apos;s fun and easy to use. No advanced knowledge
-          required.
-        </>
-      ),
+      dappModeToContent[embeddedApp ?? "standalone"](),
+
     video: step1Video,
   },
   {

dapp/src/types/dapp-mode.ts

@@ -0,0 +1,3 @@
+import { EmbedApp } from "#/utils/referralProgram"
+
+export type DappMode = EmbedApp | "standalone"

dapp/src/types/index.ts

@@ -14,3 +14,4 @@ export * from "./error"
 export * from "./status"
 export * from "./orangekit"
 export * from "./ledgerLive"
+export * from "./dapp-mode"