move VITE_MATRIX_HOST & VITE_ELEMENT_HOST to ClientConfig (fixes #41)

packages/client/src/components/App.tsx

@@ -27,32 +27,21 @@ const DynamicallyLoadChat = () => {
 
 // get access to context data
 const AppInner = () => {
-  return (
-    <>
-      <Header />
-      <CanvasWrapper />
-      <ToolbarWrapper />
+  const { config } = useAppContext();
 
-      {/* <DynamicallyLoadChat /> */}
-
-      <DebugModal />
-      <SettingsSidebar />
-      <PixelWhoisSidebar />
-      <KeybindModal />
-      <AuthErrors />
-
-      <ToastContainer position="top-left" />
-    </>
-  );
-};
-
-const App = () => {
   useEffect(() => {
     // detect auth callback for chat, regardless of it being loaded
     // callback token expires quickly, so we should exchange it as quick as possible
     (async () => {
       const params = new URLSearchParams(window.location.search);
       if (params.has("loginToken")) {
+        if (!config) {
+          console.warn(
+            "[App] loginToken parsing is delayed because config is not available"
+          );
+          return;
+        }
+
         // login button opens a new tab that redirects here
         // if we're that tab, we should try to close this tab when we're done
         // should work because this tab is opened by JS
@@ -66,7 +55,7 @@ const App = () => {
         window.history.replaceState({}, "", "/");
 
         const loginReq = await fetch(
-          `https://${import.meta.env.VITE_MATRIX_HOST}/_matrix/client/v3/login`,
+          `https://${config.chat.matrix_homeserver}/_matrix/client/v3/login`,
           {
             method: "POST",
             headers: {
@@ -137,8 +126,28 @@ const App = () => {
         }
       }
     })();
-  }, []);
+  }, [config]);
 
+  return (
+    <>
+      <Header />
+      <CanvasWrapper />
+      <ToolbarWrapper />
+
+      {/* <DynamicallyLoadChat /> */}
+
+      <DebugModal />
+      <SettingsSidebar />
+      <PixelWhoisSidebar />
+      <KeybindModal />
+      <AuthErrors />
+
+      <ToastContainer position="top-left" />
+    </>
+  );
+};
+
+const App = () => {
   return (
     <AppContext>
       <ChatContext>

packages/client/src/components/Chat/OpenChatButton.tsx

@@ -1,7 +1,9 @@
 import { Badge, Button, Link } from "@nextui-org/react";
 import { useChatContext } from "../../contexts/ChatContext";
+import { useAppContext } from "../../contexts/AppContext";
 
 const OpenChatButton = () => {
+  const { config } = useAppContext();
   const { notificationCount } = useChatContext();
 
   return (
@@ -11,11 +13,7 @@ const OpenChatButton = () => {
       color="danger"
       size="sm"
     >
-      <Button
-        as={Link}
-        href={import.meta.env.VITE_ELEMENT_HOST!}
-        target="_blank"
-      >
+      <Button as={Link} href={config.chat.element_host} target="_blank">
         Chat
       </Button>
     </Badge>

packages/client/src/components/Profile/UserCard.tsx

@@ -1,8 +1,10 @@
 import { faMessage, faWarning, faX } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, Link, Spinner } from "@nextui-org/react";
+import { ClientConfig } from "@sc07-canvas/lib/src/net";
 import { MouseEvent, useEffect, useState } from "react";
 import { toast } from "react-toastify";
+import { useAppContext } from "../../contexts/AppContext";
 
 interface IUser {
   sub: string;
@@ -13,11 +15,8 @@ interface IUser {
   isModerator: boolean;
 }
 
-const MATRIX_HOST = import.meta.env.VITE_MATRIX_HOST!; // eg aftermath.gg
-const ELEMENT_HOST = import.meta.env.VITE_ELEMENT_HOST!; // eg https://chat.fediverse.events
-
-const getMatrixLink = (user: IUser) => {
-  return `${ELEMENT_HOST}/#/user/@${user.sub.replace("@", "=40")}:${MATRIX_HOST}`;
+const getMatrixLink = (user: IUser, config: ClientConfig) => {
+  return `${config.chat.element_host}/#/user/@${user.sub.replace("@", "=40")}:${config.chat.matrix_homeserver}`;
 };
 
 /**
@@ -26,15 +25,21 @@ const getMatrixLink = (user: IUser) => {
  * @returns
  */
 export const UserCard = ({ user }: { user: IUser }) => {
+  const { config } = useAppContext();
   const [messageStatus, setMessageStatus] = useState<
     "loading" | "no_account" | "has_account" | "error"
   >("loading");
 
   useEffect(() => {
+    if (!config) {
+      console.warn("[UserCard] config is not available yet");
+      return;
+    }
+
     setMessageStatus("loading");
 
     fetch(
-      `https://${MATRIX_HOST}/_matrix/client/v3/profile/${encodeURIComponent(`@${user.sub.replace("@", "=40")}:${MATRIX_HOST}`)}`
+      `https://${config.chat.matrix_homeserver}/_matrix/client/v3/profile/${encodeURIComponent(`@${user.sub.replace("@", "=40")}:${config.chat.matrix_homeserver}`)}`
     )
       .then((req) => {
         if (req.status === 200) {
@@ -53,7 +58,7 @@ export const UserCard = ({ user }: { user: IUser }) => {
           "Error while getting Matrix account details for " + user.sub
         );
       });
-  }, [user]);
+  }, [user, config]);
 
   const handleMatrixClick = (e: MouseEvent) => {
     if (messageStatus === "no_account") {
@@ -79,7 +84,7 @@ export const UserCard = ({ user }: { user: IUser }) => {
           <Button
             isIconOnly
             as={Link}
-            href={getMatrixLink(user)}
+            href={getMatrixLink(user, config)}
             target="_blank"
             onClick={handleMatrixClick}
           >

packages/client/src/contexts/ChatContext.tsx

@@ -6,6 +6,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { useAppContext } from "./AppContext";
 
 interface IMatrixUser {
   userId: string;
@@ -24,6 +25,7 @@ const chatContext = createContext<IChatContext>({} as any);
 export const useChatContext = () => useContext(chatContext);
 
 export const ChatContext = ({ children }: PropsWithChildren) => {
+  const { config } = useAppContext();
   const checkInterval = useRef<ReturnType<typeof setInterval>>();
   const checkNotifs = useRef<ReturnType<typeof setInterval>>();
 
@@ -38,14 +40,14 @@ export const ChatContext = ({ children }: PropsWithChildren) => {
     checkInterval.current = setInterval(checkForAccessToken, 500);
 
     window.open(
-      `https://${import.meta.env.VITE_MATRIX_HOST}/_matrix/client/v3/login/sso/redirect?redirectUrl=${encodeURIComponent(redirectUrl)}`,
+      `https://${config.chat.matrix_homeserver}/_matrix/client/v3/login/sso/redirect?redirectUrl=${encodeURIComponent(redirectUrl)}`,
       "_blank"
     );
   };
 
   const doLogout = async () => {
     await fetch(
-      `https://${import.meta.env.VITE_MATRIX_HOST}/_matrix/client/v3/logout`,
+      `https://${config.chat.matrix_homeserver}/_matrix/client/v3/logout`,
       {
         method: "POST",
         headers: {
@@ -99,7 +101,7 @@ export const ChatContext = ({ children }: PropsWithChildren) => {
     if (!accessToken) return;
 
     const notifReq = await fetch(
-      `https://${import.meta.env.VITE_MATRIX_HOST}/_matrix/client/v3/notifications?limit=10`,
+      `https://${config.chat.matrix_homeserver}/_matrix/client/v3/notifications?limit=10`,
       {
         headers: {
           Authorization: "Bearer " + accessToken,

packages/lib/src/net.ts

@@ -110,6 +110,17 @@ export type ClientConfig = {
     pixel_cooldown: number;
   };
   canvas: CanvasConfig;
+  chat: {
+    enabled: boolean;
+    /**
+     * @example aftermath.gg
+     */
+    matrix_homeserver: string;
+    /**
+     * @example https://chat.fediverse.events
+     */
+    element_host: string;
+  };
 };
 
 /**

packages/server/src/lib/SocketServer.ts

@@ -68,6 +68,11 @@ const getClientConfig = (): ClientConfig => {
       pixel_cooldown: PIXEL_TIMEOUT_MS,
     },
     canvas: Canvas.getCanvasConfig(),
+    chat: {
+      enabled: true,
+      matrix_homeserver: process.env.MATRIX_HOMESERVER,
+      element_host: process.env.ELEMENT_HOST,
+    },
   };
 };
 

packages/server/src/types.ts

@@ -51,6 +51,9 @@ declare global {
       AUTH_ENDPOINT: string;
       AUTH_CLIENT: string;
       AUTH_SECRET: string;
+
+      MATRIX_HOMESERVER: string;
+      ELEMENT_HOST: string;
     }
   }
 }