Initial bot page stylings

src/context/intermediate/Intermediate.tsx

@@ -24,6 +24,7 @@ export type Screen =
     | { id: "signed_out" }
     | { id: "error"; error: string }
     | { id: "clipboard"; text: string }
+    | { id: "token_reveal"; token: string; username: string }
     | { id: "external_link_prompt"; link: string }
     | {
           id: "_prompt";

src/context/intermediate/Modals.tsx

@@ -10,6 +10,7 @@ import { OnboardingModal } from "./modals/Onboarding";
 import { PromptModal } from "./modals/Prompt";
 import { SignedOutModal } from "./modals/SignedOut";
 import {ExternalLinkModal} from "./modals/ExternalLinkPrompt";
+import { TokenRevealModal } from "./modals/TokenReveal";
 
 export interface Props {
     screen: Screen;
@@ -33,6 +34,8 @@ export default function Modals({ screen, openScreen }: Props) {
             return <SignedOutModal onClose={onClose} {...screen} />;
         case "clipboard":
             return <ClipboardModal onClose={onClose} {...screen} />;
+        case "token_reveal":
+            return <TokenRevealModal onClose={onClose} {...screen} />;
         case "onboarding":
             return <OnboardingModal onClose={onClose} {...screen} />;
         case "external_link_prompt":

src/context/intermediate/modals/TokenReveal.tsx

@@ -0,0 +1,27 @@
+import { Text } from "preact-i18n";
+
+import Modal from "../../../components/ui/Modal";
+
+interface Props {
+    onClose: () => void;
+    token: string;
+    username: string;
+}
+
+export function TokenRevealModal({ onClose, token,username }: Props) {
+    return (
+        <Modal
+            visible={true}
+            onClose={onClose}
+            title={`${username}'s Token`}
+            actions={[
+                {
+                    onClick: onClose,
+                    confirmation: true,
+                    children: <Text id="app.special.modals.actions.close" />,
+                },
+            ]}>
+            <code style={{ userSelect: "all" }}>{token}</code>
+        </Modal>
+    );
+}