[UI] Preliminary UI, ported somewhat from pre-rewrite

src/index.ts

@@ -2,10 +2,13 @@ import patcher from "@lib/patcher";
 import logger from "@lib/logger";
 import * as metro from "@metro/filters";
 import * as common from "@metro/common";
+import initSettings from "./ui/settings";
 
 console.log("Hello from Vendetta!");
 
 try {
+    initSettings();
+
     window.vendetta = {
         patcher: patcher,
         metro: { ...metro, common: common },

src/lib/metro/common.ts

@@ -3,4 +3,8 @@ import { findByProps } from "@metro/filters";
 // Discord
 export const Constants = findByProps("API_HOST");
 export const channels = findByProps("getVoiceChannelId");
-export const i18n = findByProps("Messages");
+export const i18n = findByProps("Messages");
+
+// React
+export const React = findByProps("createElement") as typeof import("react");
+export const ReactNative = findByProps("Text", "Image") as typeof import("react-native");

src/ui/settings/components/Settings.tsx

@@ -0,0 +1,48 @@
+import { React, ReactNative as RN } from "@metro/common";
+import { findByProps } from "@metro/filters";
+import Version from "./Version";
+
+const { FormRow, FormSection, FormText } = findByProps("FormSection");
+const hermesProps = window.HermesInternal.getRuntimeProperties();
+const rnVer = RN.Platform.constants.reactNativeVersion;
+
+export default function Settings() {
+    const versions = [
+        {
+            label: "Discord",
+            version: RN.NativeModules.InfoDictionaryManager.Version,
+        },
+        {
+            label: "React",
+            version: React.version,
+        },
+        {
+            label: "React Native",
+            version: `${rnVer.major || 0}.${rnVer.minor || 0}.${rnVer.patch || 0}`,
+        },
+        {
+            label: "Hermes",
+            version: `${hermesProps["OSS Release Version"]} ${hermesProps["Build"]}`,
+        },
+        {
+            label: "Bytecode",
+            version: hermesProps["Bytecode Version"],
+        },
+    ];
+
+    return ( 
+        <>
+            {/* Why is there still a divider? */}
+            <FormSection title="Actions" android_noDivider>
+                <FormRow
+                    label="Reload Discord"
+                    trailing={FormRow.Arrow}
+                    onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
+                />
+            </FormSection>
+            <FormSection title="Versions">
+                {versions.map((v) => <Version label={v.label} version={v.version} /> )}
+            </FormSection>
+        </>
+    )
+}

src/ui/settings/components/SettingsSection.tsx

@@ -0,0 +1,20 @@
+import { React } from "@metro/common";
+import { findByProps } from "@metro/filters";
+
+const { FormRow, FormSection } = findByProps("FormSection");
+
+interface SettingsSectionProps {
+    navigation: any;
+}
+
+export default function SettingsSection({ navigation }: SettingsSectionProps) {
+    return ( 
+        <FormSection key="Vendetta" title="Vendetta">
+            <FormRow
+                label="Settings"
+                trailing={FormRow.Arrow}
+                onPress={() => navigation.push("VendettaSettings")}
+            />
+        </FormSection>
+    )
+}

src/ui/settings/components/Version.tsx

@@ -0,0 +1,18 @@
+import { React } from "@metro/common";
+import { findByProps } from "@metro/filters";
+
+interface VersionProps {
+    label: string;
+    version: string
+}
+
+const { FormRow, FormText } = findByProps("FormSection");
+
+export default function Version({ label, version }: VersionProps) {
+    return ( 
+        <FormRow
+            label={label}
+            trailing={() => <FormText>{version}</FormText>}
+        />
+    )
+}

src/ui/settings/index.tsx

@@ -0,0 +1,38 @@
+import { React, i18n } from "@metro/common";
+import { findByDisplayName } from "@metro/filters";
+import { after } from "@lib/patcher";
+import findInReactTree from "@utils/findInReactTree";
+import Settings from "./components/Settings";
+import SettingsSection from "./components/SettingsSection";
+
+const screensModule = findByDisplayName("getScreens", false);
+const settingsModule = findByDisplayName("UserSettingsOverviewWrapper", false);
+
+export default function initSettings() {
+    const screensPatch = after("default", screensModule, (args, ret) => {
+        return {
+            ...ret,
+            VendettaSettings: {
+                title: "Vendetta Settings",
+                render: Settings
+            }   
+        }
+    });
+
+    const settingsPatch = after("default", settingsModule, (args, _ret) => {
+        settingsPatch();
+        const toPatch = findInReactTree(_ret.props.children, i => i.type && i.type.name === "UserSettingsOverview");
+
+        // Upload logs button gone
+        after("renderSupportAndAcknowledgements", toPatch.type.prototype, (args, { props: { children } }) => {
+            const index = children.findIndex((c: any) => c?.type?.name === "UploadLogsButton");
+            if (index !== -1) children.splice(index, 1);
+        });
+
+        after("render", toPatch.type.prototype, (args, { props: { children } }) => {
+            const titles = [i18n.Messages["BILLING_SETTINGS"], i18n.Messages["PREMIUM_SETTINGS"]];
+            const index = children.findIndex((c: any) => titles.includes(c.props.title));
+            children.splice(index === -1 ? 4 : index, 0, <SettingsSection navigation={toPatch.props.navigation} />);
+        });
+    });
+}