Add homeserver info to About page

src/app/features/settings/about/About.tsx

@@ -1,11 +1,146 @@
-import { Box, Text, IconButton, Icon, Icons, Scroll, Button, config, toRem } from 'folds';
+import { Box, Text, IconButton, Icon, Icons, Scroll, Button, config, toRem, Spinner } from 'folds';
 import { Page, PageContent, PageHeader } from '$components/page';
 import { SequenceCard } from '$components/sequence-card';
 import { SettingTile } from '$components/setting-tile';
 import CinnySVG from '$public/res/svg/cinny.svg';
 import { clearCacheAndReload } from '$client/initMatrix';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { SequenceCardStyle } from '$features/settings/styles.css';
+import { Method } from '$types/matrix-sdk';
+import { useState } from 'react';
+
+export function HomeserverInfo() {
+  const mx = useMatrixClient();
+  const [federationUrl, setFederationUrl] = useState<string>(mx.baseUrl);
+  const [version, setVersion] = useState<any>(undefined);
+
+  // By default assume the federationUrl is the same as the baseUrl.
+  if (!version)
+    mx.http
+      .request(Method.Get, '/version', undefined, undefined, {
+        prefix: '/_matrix/federation/v1',
+        baseUrl: federationUrl,
+      })
+      .then((fetched_version) => setVersion(fetched_version))
+      .catch((error) => {
+        if (federationUrl === mx.baseUrl) {
+          // Maybe they are *not* the same actually.
+          mx.http
+            .request(Method.Get, '/server', undefined, undefined, {
+              prefix: '/.well-known/matrix',
+              baseUrl: `https://${mx.getSafeUserId().split(':')[1]}`,
+            })
+            .then((well_known: any) => {
+              const newUrl = `https://${well_known['m.server'].split(':')[0]}`;
+              if (newUrl !== federationUrl) {
+                setFederationUrl(newUrl);
+              }
+            })
+            .catch((error2) => setVersion({ error: error2 }));
+        } else {
+          setVersion({ error });
+        }
+      });
+
+  return (
+    <Box direction="Column" gap="100" id="homeserver-info">
+      <Text size="L400">Homeserver</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile title="Domain" description={mx.getSafeUserId().split(':')[1]} />
+      </SequenceCard>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title="Base URL"
+          description={
+            <a href={mx.baseUrl} target="_blank" rel="noopener noreferrer">
+              {mx.baseUrl}
+            </a>
+          }
+        />
+      </SequenceCard>
+      {federationUrl !== mx.baseUrl && (
+        <SequenceCard
+          className={SequenceCardStyle}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="400"
+        >
+          <SettingTile
+            title="Federation URL"
+            description={
+              <a href={federationUrl} target="_blank" rel="noopener noreferrer">
+                {federationUrl}
+              </a>
+            }
+          />
+        </SequenceCard>
+      )}
+      {version ? (
+        <>
+          {version.error && (
+            <SequenceCard
+              className={SequenceCardStyle}
+              variant="SurfaceVariant"
+              direction="Column"
+              gap="400"
+            >
+              {version.error.message}
+            </SequenceCard>
+          )}
+          {version.server?.name && (
+            <SequenceCard
+              className={SequenceCardStyle}
+              variant="SurfaceVariant"
+              direction="Column"
+              gap="400"
+            >
+              <SettingTile title="Name" description={version.server?.name} />
+            </SequenceCard>
+          )}
+          {version.server?.version && (
+            <SequenceCard
+              className={SequenceCardStyle}
+              variant="SurfaceVariant"
+              direction="Column"
+              gap="400"
+            >
+              <SettingTile title="Version" description={version.server?.version} />
+            </SequenceCard>
+          )}
+          {version.server?.compiler && (
+            <SequenceCard
+              className={SequenceCardStyle}
+              variant="SurfaceVariant"
+              direction="Column"
+              gap="400"
+            >
+              <SettingTile title="Compiler" description={version.server?.compiler} />
+            </SequenceCard>
+          )}
+        </>
+      ) : (
+        <SequenceCard
+          className={SequenceCardStyle}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="400"
+        >
+          <Spinner />
+        </SequenceCard>
+      )}
+    </Box>
+  );
+}
 
 type AboutProps = {
   requestClose: () => void;
@@ -107,6 +242,7 @@ export function About({ requestClose }: AboutProps) {
                   />
                 </SequenceCard>
               </Box>
+              <HomeserverInfo />
               <Box direction="Column" gap="100">
                 <Text size="L400">Credits</Text>
                 <SequenceCard