feat: access other instances

packages/client/components/app/interface/settings/channel/Overview.tsx

@@ -5,10 +5,10 @@ import { Trans, useLingui } from "@lingui-solid/solid/macro";
 import type { API } from "stoat.js";
 
 import { useClient } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
 import { useModals } from "@revolt/modal";
 import { Button, CircularProgress, Column, Form2, Row, Text } from "@revolt/ui";
 
+import { useInstance } from "@revolt/instance";
 import { ChannelSettingsProps } from "../ChannelSettings";
 
 /**
@@ -18,6 +18,7 @@ export default function ChannelOverview(props: ChannelSettingsProps) {
   const { t } = useLingui();
   const client = useClient();
   const { openModal } = useModals();
+  const instance = useInstance();
 
   /* eslint-disable solid/reactivity */
   // we want to take the initial value only
@@ -64,7 +65,7 @@ export default function ChannelOverview(props: ChannelSettingsProps) {
 
         const [key, value] = client().authenticationHeader;
         const data: { id: string } = await fetch(
-          `${CONFIGURATION.DEFAULT_MEDIA_URL}/icons`,
+          `${instance.mediaUrl}/icons`,
           {
             method: "POST",
             body,

packages/client/components/app/interface/settings/channel/webhooks/ViewWebhook.tsx

@@ -6,7 +6,6 @@ import { useMutation } from "@tanstack/solid-query";
 import { API, ChannelWebhook } from "stoat.js";
 
 import { useClient } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
 import { useModals } from "@revolt/modal";
 import {
   CategoryButton,
@@ -19,6 +18,7 @@ import {
 import MdContentCopy from "@material-design-icons/svg/outlined/content_copy.svg?component-solid";
 import MdDelete from "@material-design-icons/svg/outlined/delete.svg?component-solid";
 
+import { useInstance } from "@revolt/instance";
 import { useSettingsNavigation } from "../../Settings";
 
 /**
@@ -29,6 +29,7 @@ export function ViewWebhook(props: { webhook: ChannelWebhook }) {
   const client = useClient();
   const { showError } = useModals();
   const { navigate } = useSettingsNavigation();
+  const instance = useInstance();
 
   /* eslint-disable solid/reactivity */
   const editGroup = createFormGroup({
@@ -63,7 +64,7 @@ export function ViewWebhook(props: { webhook: ChannelWebhook }) {
 
         const [key, value] = client().authenticationHeader;
         const data: { id: string } = await fetch(
-          `${CONFIGURATION.DEFAULT_MEDIA_URL}/avatars`,
+          `${instance.mediaUrl}/avatars`,
           {
             method: "POST",
             body,
@@ -120,7 +121,7 @@ export function ViewWebhook(props: { webhook: ChannelWebhook }) {
           icon={<MdContentCopy />}
           onClick={() =>
             navigator.clipboard.writeText(
-              `${CONFIGURATION.DEFAULT_API_URL}/webhooks/${props.webhook.id}/${props.webhook.token}`,
+              `${instance.apiUrl}/webhooks/${props.webhook.id}/${props.webhook.token}`,
             )
           }
         >

packages/client/components/app/interface/settings/server/Overview.tsx

@@ -5,7 +5,6 @@ import { Trans, useLingui } from "@lingui-solid/solid/macro";
 import type { API } from "stoat.js";
 
 import { useClient } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
 import {
   CircularProgress,
   Column,
@@ -15,6 +14,7 @@ import {
   Text,
 } from "@revolt/ui";
 
+import { useInstance } from "@revolt/instance";
 import { ServerSettingsProps } from "../ServerSettings";
 
 /**
@@ -23,6 +23,7 @@ import { ServerSettingsProps } from "../ServerSettings";
 export default function ServerOverview(props: ServerSettingsProps) {
   const { t } = useLingui();
   const client = useClient();
+  const instance = useInstance();
 
   /* eslint-disable solid/reactivity */
   const editGroup = createFormGroup({
@@ -144,7 +145,7 @@ export default function ServerOverview(props: ServerSettingsProps) {
         changes.icon = await client().uploadFile(
           "icons",
           editGroup.controls.icon.value[0],
-          CONFIGURATION.DEFAULT_MEDIA_URL,
+          instance.mediaUrl,
         );
       }
     }
@@ -156,7 +157,7 @@ export default function ServerOverview(props: ServerSettingsProps) {
         changes.banner = await client().uploadFile(
           "banners",
           editGroup.controls.banner.value[0],
-          CONFIGURATION.DEFAULT_MEDIA_URL,
+          instance.mediaUrl,
         );
       }
     }

packages/client/components/app/interface/settings/server/emojis/EmojiList.tsx

@@ -6,8 +6,8 @@ import { Server } from "stoat.js";
 import { css } from "styled-system/css";
 
 import { useClient } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
 import { useError } from "@revolt/i18n";
+import { useInstance } from "@revolt/instance";
 import { useModals } from "@revolt/modal";
 import {
   Avatar,
@@ -27,9 +27,10 @@ export function EmojiList(props: { server: Server }) {
   const { t } = useLingui();
   const client = useClient();
   const { openModal } = useModals();
+  const instance = useInstance();
 
   function isDisabled() {
-    return props.server.emojis.length >= CONFIGURATION.MAX_EMOJI;
+    return props.server.emojis.length >= instance.maxEmoji;
   }
 
   const editGroup = createFormGroup(
@@ -50,7 +51,7 @@ export function EmojiList(props: { server: Server }) {
 
     const [key, value] = client().authenticationHeader;
     const data: { id: string } = await fetch(
-      `${CONFIGURATION.DEFAULT_MEDIA_URL}/emojis`,
+      `${instance.mediaUrl}/emojis`,
       {
         method: "POST",
         body,
@@ -99,7 +100,7 @@ export function EmojiList(props: { server: Server }) {
                 <Switch
                   fallback={
                     <Trans>
-                      {CONFIGURATION.MAX_EMOJI - props.server.emojis.length}{" "}
+                      {instance.maxEmoji - props.server.emojis.length}{" "}
                       emoji slots remaining
                     </Trans>
                   }

packages/client/components/app/interface/settings/user/Feedback.tsx

@@ -13,7 +13,7 @@ import MdBugReport from "@material-design-icons/svg/outlined/bug_report.svg?comp
 import MdFormatListNumbered from "@material-design-icons/svg/outlined/format_list_numbered.svg?component-solid";
 import MdStar from "@material-design-icons/svg/outlined/star_outline.svg?component-solid";
 import { useClient } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
+import { useInstance } from "@revolt/instance";
 import { useModals } from "@revolt/modal";
 import { useNavigate } from "@solidjs/router";
 import { Match, Switch } from "solid-js";
@@ -26,8 +26,9 @@ export function Feedback() {
   const { openModal, pop } = useModals();
   const navigate = useNavigate();
   const client = useClient();
+  const instance = useInstance();
 
-  const showLoungeButton = CONFIGURATION.IS_STOAT;
+  const showLoungeButton = instance.isStoat;
   const isInLounge =
     client()!.servers.get("01F7ZSBSFHQ8TA81725KQCSDDP") !== undefined;
 

packages/client/components/app/interface/settings/user/profile/UserProfileEditor.tsx

@@ -6,7 +6,6 @@ import { useQuery, useQueryClient } from "@tanstack/solid-query";
 import { API, User } from "stoat.js";
 
 import { useClient } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
 import {
   CategoryButton,
   CircularProgress,
@@ -18,6 +17,7 @@ import {
 
 import MdBadge from "@material-design-icons/svg/filled/badge.svg?component-solid";
 
+import { useInstance } from "@revolt/instance";
 import { useSettingsNavigation } from "../../Settings";
 
 interface Props {
@@ -28,6 +28,7 @@ export function UserProfileEditor(props: Props) {
   const { t } = useLingui();
   const client = useClient();
   const queryClient = useQueryClient();
+  const instance = useInstance();
 
   const profile = useQuery(() => ({
     queryKey: ["profile", props.user.id],
@@ -102,7 +103,7 @@ export function UserProfileEditor(props: Props) {
         changes.avatar = await client().uploadFile(
           "avatars",
           editGroup.controls.avatar.value[0],
-          CONFIGURATION.DEFAULT_MEDIA_URL,
+          instance.mediaUrl,
         );
       }
     }
@@ -126,10 +127,10 @@ export function UserProfileEditor(props: Props) {
         changes.profile.background = await client().uploadFile(
           "backgrounds",
           editGroup.controls.banner.value[0],
-          CONFIGURATION.DEFAULT_MEDIA_URL,
+          instance.mediaUrl,
         );
 
-        newBannerUrl = `${CONFIGURATION.DEFAULT_MEDIA_URL}/backgrounds/${changes.profile.background}`;
+        newBannerUrl = `${instance.mediaUrl}/backgrounds/${changes.profile.background}`;
       } else {
         newBannerUrl = editGroup.controls.banner.value;
       }

packages/client/components/auth/src/flows/FlowCreate.tsx

@@ -1,6 +1,6 @@
 import { Trans } from "@lingui-solid/solid/macro";
 
-import { CONFIGURATION } from "@revolt/common";
+import { useInstance } from "@revolt/instance";
 import { useNavigate } from "@revolt/routing";
 import { Button, Row, iconSize } from "@revolt/ui";
 
@@ -18,6 +18,7 @@ import { Fields, Form } from "./Form";
 export default function FlowCreate() {
   const api = useApi();
   const navigate = useNavigate();
+  const instance = useInstance();
 
   /**
    * Create an account
@@ -48,7 +49,7 @@ export default function FlowCreate() {
       <FlowTitle subtitle={<Trans>Create an account</Trans>} emoji="wave">
         <Trans>Hello!</Trans>
       </FlowTitle>
-      <Form onSubmit={create} captcha={CONFIGURATION.HCAPTCHA_SITEKEY}>
+      <Form onSubmit={create} captcha={instance.hcaptcha_sitekey}>
         <Fields fields={["email", "password"]} />
         <Row justify>
           <a href="..">

packages/client/components/auth/src/flows/FlowResend.tsx

@@ -1,7 +1,7 @@
 import { Trans } from "@lingui-solid/solid/macro";
 
 import { useApi } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
+import { useInstance } from "@revolt/instance";
 import { useNavigate } from "@revolt/routing";
 import { Button } from "@revolt/ui";
 
@@ -15,6 +15,7 @@ import { Fields, Form } from "./Form";
 export default function FlowResend() {
   const api = useApi();
   const navigate = useNavigate();
+  const instance = useInstance();
 
   /**
    * Resend email verification
@@ -38,7 +39,7 @@ export default function FlowResend() {
       <FlowTitle>
         <Trans>Resend verification</Trans>
       </FlowTitle>
-      <Form onSubmit={resend} captcha={CONFIGURATION.HCAPTCHA_SITEKEY}>
+      <Form onSubmit={resend} captcha={instance.hcaptcha_sitekey}>
         <Fields fields={["email"]} />
         <Button type="submit">
           <Trans>Resend</Trans>

packages/client/components/auth/src/flows/FlowReset.tsx

@@ -1,20 +1,21 @@
 import { Trans } from "@lingui-solid/solid/macro";
 
 import { useApi } from "@revolt/client";
-import { CONFIGURATION } from "@revolt/common";
 import { useNavigate } from "@revolt/routing";
 import { Button } from "@revolt/ui";
 
 import { FlowTitle } from "./Flow";
 import { setFlowCheckEmail } from "./FlowCheck";
 import { Fields, Form } from "./Form";
+import { useInstance } from "@revolt/instance";
 
 /**
  * Flow for sending password reset
  */
 export default function FlowReset() {
   const api = useApi();
   const navigate = useNavigate();
+  const instance = useInstance();
 
   /**
    * Send password reset
@@ -38,7 +39,7 @@ export default function FlowReset() {
       <FlowTitle>
         <Trans>Reset password</Trans>
       </FlowTitle>
-      <Form onSubmit={reset} captcha={CONFIGURATION.HCAPTCHA_SITEKEY}>
+      <Form onSubmit={reset} captcha={instance.hcaptcha_sitekey}>
         <Fields fields={["email"]} />
         <Button type="submit">
           <Trans>Reset</Trans>

packages/client/components/client/Controller.ts

@@ -4,10 +4,10 @@ import { detect } from "detect-browser";
 import { API, Client, ConnectionState } from "stoat.js";
 import { ProtocolV1 } from "stoat.js/lib/events/v1";
 
-import { CONFIGURATION } from "@revolt/common";
 import { ModalControllerExtended } from "@revolt/modal";
 import type { State as ApplicationState } from "@revolt/state";
 import type { Session } from "@revolt/state/stores/Auth";
+import Instance from "../instance/Instance";
 
 export enum State {
   Ready = "Ready",
@@ -126,7 +126,7 @@ class Lifecycle {
     }
 
     this.client = new Client({
-      baseURL: CONFIGURATION.DEFAULT_API_URL,
+      baseURL: this.#controller.instance.apiUrl,
       autoReconnect: false,
       syncUnreads: true,
       debug: import.meta.env.DEV,
@@ -143,11 +143,11 @@ class Lifecycle {
       features: {
         autumn: {
           enabled: true,
-          url: CONFIGURATION.DEFAULT_MEDIA_URL,
+          url: this.#controller.instance.mediaUrl,
         },
         january: {
           enabled: true,
-          url: CONFIGURATION.DEFAULT_PROXY_URL,
+          url: this.#controller.instance.proxyUrl,
         },
         captcha: {} as never,
         email: true,
@@ -158,7 +158,7 @@ class Lifecycle {
         },
       },
       vapid: String(),
-      ws: CONFIGURATION.DEFAULT_WS_URL,
+      ws: this.#controller.instance.wsUrl,
     };
 
     this.client.events.on("state", this.onState);
@@ -445,13 +445,19 @@ export default class ClientController {
    */
   readonly state: ApplicationState;
 
+  /**
+   * Reference to the instance the client connects to
+   */
+  readonly instance: Instance;
+
   /**
    * Construct new client controller
    */
-  constructor(state: ApplicationState) {
+  constructor(state: ApplicationState, instance: Instance) {
     this.state = state;
+    this.instance = instance;
     this.api = new API.API({
-      baseURL: CONFIGURATION.DEFAULT_API_URL,
+      baseURL: instance.apiUrl,
     });
 
     this.lifecycle = new Lifecycle(this);

packages/client/components/client/index.tsx

@@ -15,6 +15,7 @@ import { State } from "@revolt/state";
 
 import { State as LifecycleState } from "./Controller";
 
+import { useInstance } from "@revolt/instance";
 import { CHANGELOG_MODAL_CONST } from "@revolt/modal/modals/Changelog";
 import ClientController from "./Controller";
 
@@ -27,9 +28,10 @@ const clientContext = createContext(null! as ClientController);
  */
 export function ClientContext(props: { state: State; children: JSXElement }) {
   const { openModal } = useModals();
+  const instance = useInstance();
 
   // eslint-disable-next-line solid/reactivity
-  const controller = new ClientController(props.state);
+  const controller = new ClientController(props.state, instance);
   onCleanup(() => controller.dispose());
 
   createEffect(() => {

packages/client/components/i18n/catalogs/ar/messages.po

@@ -72,7 +72,7 @@ msgstr ""
 msgid "{0} changed the channel icon"
 msgstr ""
 
-#. placeholder {0}: CONFIGURATION.MAX_EMOJI - props.server.emojis.length
+#. placeholder {0}: instance.maxEmoji - props.server.emojis.length
 #: components/app/interface/settings/server/emojis/EmojiList.tsx
 msgid "{0} emoji slots remaining"
 msgstr ""