Better Modal & Component Loading. Higher Stability

SammCheese · Dec 20, 2022 · e737b1f · e737b1f
1 parent 008c1c4
commit e737b1f
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 100 deletions.
diff --git a/manifest.json b/manifest.json
@@ -7,7 +7,7 @@
     "discordID": "372148345894076416",
     "github": "SammCheese"
   },
-  "version": "1.0.3",
+  "version": "1.0.4",
   "updater": {
     "type": "github",
     "id": "SammCheese/invisible-chat"

diff --git a/src/components/DecryptionModal.tsx b/src/components/DecryptionModal.tsx
@@ -3,62 +3,77 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  ModalProps,
   ModalRoot,
-  ModalSize,
   closeModal,
   openModal,
 } from "./Modals";
 
 import { buildEmbed, decrypt } from "../index";
 const { React } = common;
 
-let TextInput: any;
+const rawTextInput: any = webpack.waitForModule(
+  webpack.filters.byProps("defaultProps", "Sizes", "contextType"),
+);
+
+const rawButton = webpack.waitForModule(webpack.filters.byProps("Hovers", "Looks", "Sizes"));
+
 let Button: any;
-setTimeout(() => {
-  TextInput = webpack.getByProps(["defaultProps", "Sizes", "contextType"]);
-  Button = webpack.getByProps(["Hovers", "Looks", "Sizes"]);
-}, 3500);
+let TextInput: any;
+
+export async function initDecModal() {
+  TextInput = webpack.getExportsForProps(await rawTextInput, ["contextType"]);
+  Button = webpack.getExportsForProps(await rawButton, ["Link"]);
+}
 
-export function buildDecModal(msg: any) {
-  let secret: string = msg?.content;
-  let password: string = "password";
-  if (!TextInput || !Button) return;
-  if (!ModalRoot || !ModalContent || !ModalHeader || !ModalFooter) return;
-  const s = openModal!((props = msg) => (
-    <ModalRoot {...props} size={ModalSize.MEDIUM}>
+let modalKey: any;
+
+function DecModal(props: ModalProps) {
+  // @ts-ignore
+  let secret: string = props?.message?.content;
+  let [password, setPassword] = React.useState("password");
+
+  return (
+    <ModalRoot {...props}>
       <ModalHeader>
         <div style={{ color: "gray", fontSize: "30px" }}>Decrypt Message</div>
       </ModalHeader>
       <ModalContent>
         <div style={{ color: "gray" }}>Secret</div>
-        <TextInput defaultValue={msg.content} disabled={true}></TextInput>
+        <TextInput defaultValue={secret} disabled={true}></TextInput>
         <div style={{ color: "gray" }}>Password</div>
         <TextInput
           defaultValue={"password"}
           onChange={(e: string) => {
-            password = e;
+            setPassword(e);
           }}></TextInput>
+        <div style={{ marginTop: 10 }} />
       </ModalContent>
       <ModalFooter>
         <Button
           onClick={() => {
             const toSend = decrypt(secret, password);
             if (!toSend) return;
-            buildEmbed(msg, toSend);
             // @ts-ignore
-            closeModal(s);
+            buildEmbed(props?.message, toSend);
+            // @ts-ignore
+            closeModal(modalKey);
           }}>
           Decrypt
         </Button>
         <Button
           style={{ left: 15, position: "absolute" }}
           onClick={() => {
             // @ts-ignore
-            closeModal(s);
+            closeModal(modalKey);
           }}>
           Cancel
         </Button>
       </ModalFooter>
     </ModalRoot>
-  ));
+  );
+}
+
+export function buildDecModal(msg: any): any {
+  modalKey = openModal((props) => <DecModal {...props} {...msg} />);
 }
diff --git a/src/components/EncryptionModal.tsx b/src/components/EncryptionModal.tsx
@@ -1,8 +1,9 @@
-import { webpack, common } from "replugged";
+import { common, webpack } from "replugged";
 import {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  ModalProps,
   ModalRoot,
   ModalSize,
   closeModal,
@@ -13,30 +14,30 @@ import { encrypt } from "../index";
 
 const { React } = common;
 
-let TextInput: any;
+const rawTextInput: any = webpack.waitForModule(
+  webpack.filters.byProps("defaultProps", "Sizes", "contextType"),
+);
+
+const rawButton = webpack.waitForModule(webpack.filters.byProps("Hovers", "Looks", "Sizes"));
+
 let Button: any;
-setTimeout(() => {
-  TextInput = webpack.getByProps(["defaultProps", "Sizes", "contextType"]);
-  Button = webpack.getByProps(["Hovers", "Looks", "Sizes"]);
-}, 3500);
+let TextInput: any;
 
-export function buildEncModal() {
-  let secret: string;
-  let cover: string;
-  let password: string = "password";
-  let valid: boolean = false;
-  if (!TextInput || !Button) return;
-  if (!ModalRoot || !ModalContent || !ModalHeader || !ModalFooter) return;
+export async function initEncModal() {
+  TextInput = webpack.getExportsForProps(await rawTextInput, ["contextType"]);
+  Button = webpack.getExportsForProps(await rawButton, ["Link"]);
+}
 
-  function isValid() {
-    if (secret && cover && cover.match(/\w \w/)) {
-      valid = true;
-    } else {
-      valid = false;
-    } // Enforcing the 2 words, space is NOT a valid thing
-  }
+let modalKey: any;
 
-  const s = openModal!((props) => (
+export function EncModal(props: ModalProps) {
+  let [secret, setSecret] = React.useState("");
+  let [cover, setCover] = React.useState("");
+  let [password, setPassword] = React.useState("password");
+
+  const valid = secret && cover && /\w \w/.test(cover);
+
+  return (
     <ModalRoot {...props} size={ModalSize.MEDIUM}>
       <ModalHeader>
         <div style={{ color: "gray", fontSize: "30px" }}>Encrypt Message</div>
@@ -45,50 +46,50 @@ export function buildEncModal() {
         <div style={{ color: "gray" }}>Secret</div>
         <TextInput
           onChange={(e: string) => {
-            secret = e;
-            isValid();
+            setSecret(e);
           }}></TextInput>
         <div style={{ color: "gray" }}>Cover (2 or more Words!!)</div>
         <TextInput
           onChange={(e: string) => {
-            cover = e;
-            isValid();
+            setCover(e);
           }}></TextInput>
         <div style={{ color: "gray" }}>Password</div>
         <TextInput
           defaultValue={"password"}
           onChange={(e: string) => {
-            isValid();
-            password = e;
+            setPassword(e);
           }}></TextInput>
       </ModalContent>
       <ModalFooter>
         <Button
+          disabled={!valid}
           onClick={() => {
             if (!valid) return;
-            // Adds an indicator (\u200b) after secret
-            // eslint-disable-next-line no-irregular-whitespace
-            const toSend = encrypt(`${secret}`, password, cover);
+            const toSend = encrypt(secret, password, cover);
             if (!toSend) return;
 
             // @ts-expect-error
             common.messages.sendMessage(common.channels.getCurrentlySelectedChannelId(), {
               content: `${toSend}`,
             });
             // @ts-ignore
-            closeModal(s);
+            closeModal(modalKey);
           }}>
           Send
         </Button>
         <Button
           style={{ left: 15, position: "absolute" }}
           onClick={() => {
             // @ts-ignore
-            closeModal(s);
+            closeModal(modalKey);
           }}>
           Cancel
         </Button>
       </ModalFooter>
     </ModalRoot>
-  ));
+  );
+}
+
+export function buildEncModal(): any {
+  modalKey = openModal((props) => <EncModal {...props} />);
 }
diff --git a/src/components/Modals.tsx b/src/components/Modals.tsx
@@ -47,6 +47,7 @@ interface Modals {
 
 interface ModalRootProps {
   transitionState?: ModalTransitionState;
+  /* eslint-disable */
   children: React.ReactNode;
   size?: ModalSize;
   role?: "alertdialog" | "dialog";
@@ -59,46 +60,34 @@ type RenderFunction = (props: ModalProps) => React.ReactNode;
 export let ModalAPI: any;
 export let Modals: Modals;
 
-try {
-  setTimeout(() => {
-    // Populate ModalAPI
-    ModalAPI = {
-      openModal: webpack.getFunctionBySource(
-        "onCloseRequest:null!=",
-        webpack.getBySource("onCloseRequest:null!=")!,
-      ),
-      closeModal: webpack.getFunctionBySource(
-        "onCloseCallback&&",
-        webpack.getBySource("onCloseRequest:null!=")!,
-      ),
-    };
-    // Populate Modal Types
-
-    Modals = {
-      ModalRoot: webpack.getFunctionBySource(
-        "().root",
-        webpack.getBySource("().closeWithCircleBackground")!,
-      ),
-      ModalHeader: webpack.getFunctionBySource(
-        "().header",
-        webpack.getBySource("().closeWithCircleBackground")!,
-      ),
-      ModalContent: webpack.getFunctionBySource(
-        "().content",
-        webpack.getBySource("().closeWithCircleBackground")!,
-      ),
-      ModalFooter: webpack.getFunctionBySource(
-        "().footerSeparator",
-        webpack.getBySource("().closeWithCircleBackground")!,
-      ),
-      ModalCloseButton: webpack.getFunctionBySource(
-        "().closeWithCircleBackground",
-        webpack.getBySource("().closeWithCircleBackground")!,
-      ),
-    };
-  }, 1500);
-} catch (e) {
-  console.log(e);
+export async function initModals() {
+  let rawModalModule = webpack.waitForModule(webpack.filters.bySource("onCloseRequest:null!="));
+  let rawModalsModule = webpack.waitForModule(
+    webpack.filters.bySource("().closeWithCircleBackground"),
+  );
+
+  ModalAPI = {
+    // @ts-ignore
+    openModal: webpack.getFunctionBySource("onCloseRequest:null!=", await rawModalModule),
+    // @ts-ignore
+    closeModal: webpack.getFunctionBySource("onCloseCallback&&", await rawModalModule),
+  };
+
+  Modals = {
+    // @ts-ignore
+    ModalRoot: webpack.getFunctionBySource("().root", await rawModalsModule),
+    // @ts-ignore
+    ModalHeader: webpack.getFunctionBySource("().header", await rawModalsModule)!,
+    // @ts-ignore
+    ModalContent: webpack.getFunctionBySource("().content", await rawModalsModule)!,
+    // @ts-ignore
+    ModalFooter: webpack.getFunctionBySource("().footerSeparator", await rawModalsModule)!,
+    ModalCloseButton: webpack.getFunctionBySource(
+      "().closeWithCircleBackground",
+      // @ts-ignore
+      await rawModalsModule,
+    )!,
+  };
 }
 
 export const ModalRoot = (props: ModalRootProps) => <Modals.ModalRoot {...props} />;
@@ -111,7 +100,7 @@ export function openModal(
   render: RenderFunction,
   options?: ModalOptions,
   contextKey?: string,
-): void {
+): string {
   return ModalAPI.openModal(render, options, contextKey);
 }
 

diff --git a/src/index.ts b/src/index.ts
@@ -4,8 +4,11 @@ import { popoverIcon } from "./assets/popoverIcon";
 import { chatbarLock } from "./assets/chatbarLock";
 import { Indicator } from "./assets/indicator";
 
-import { buildDecModal } from "./components/DecryptionModal";
+import { buildDecModal, initDecModal } from "./components/DecryptionModal";
+import { initModals } from "./components/Modals";
+
 import StegCloak from "./lib/stegcloak.js";
+import { initEncModal } from "./components/EncryptionModal";
 
 const inject = new Injector();
 const steggo: StegCloak = new StegCloak(true, false);
@@ -21,9 +24,11 @@ const URL_DETECTION = new RegExp(
   /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
 );
 
-// eslint-disable-next-line @typescript-eslint/require-await
 export async function start(): Promise<void> {
-  console.log("%c [Invisible Chat] Started!", "color: aquamarine");
+  // Prepare Modals
+  await initModals();
+  await initDecModal();
+  await initEncModal();
 
   // Register the Message Receiver
   // @ts-expect-error We are adding to Window
@@ -34,11 +39,13 @@ export async function start(): Promise<void> {
     chatbarLock,
     Indicator,
   };
+
+  console.log("%c [Invisible Chat] Started!", "color: aquamarine");
 }
 
 // Grab the data from the above Plantext Patches
 function receiver(message: unknown): void {
-  buildDecModal(message);
+  void buildDecModal({ message });
 }
 
 // Gets the Embed of a Link
@@ -98,7 +105,9 @@ export function stop(): void {
 }
 
 export function encrypt(secret: string, password: string, cover: string): string {
-  return steggo.hide(secret, password, cover);
+  // Add Identifier unicode to secret (\u200b)
+  // eslint-disable-next-line no-irregular-whitespace
+  return steggo.hide(`${secret}`, password, cover);
 }
 
 export function decrypt(secret: string, password: string): string {

diff --git a/src/plaintextPatches.ts b/src/plaintextPatches.ts
@@ -11,7 +11,7 @@ const patches: types.PlaintextPatch[] = [
       },
       {
         // Chatbar Lock
-        match: /.=.\.activeCommand,.=.\.activeCommandOption,.{0,155},(.)=\[\];/,
+        match: /.=.\.activeCommand,.=.\.activeCommandOption,.{0,155}(.)=\[\];/,
         replace: "$&;$1.push(window.invisiblechat.chatbarLock);",
       },
       {