ViewIcons: Now opens icons in image viewer

build.mjs

@@ -48,7 +48,7 @@ const globPlugins = {
                     continue;
                 }
                 const mod = `__pluginMod${i}`;
-                code += `import ${mod} from "./${files[i].replace(".ts", "")}";\n`;
+                code += `import ${mod} from "./${files[i].replace(/.tsx?$/, "")}";\n`;
                 obj += `[${mod}.name]: ${mod},`;
             }
             code += `export default {${obj}}`;

src/plugins/viewIcons.tsx

@@ -1,12 +1,31 @@
 import { REACT_GLOBAL } from "../utils/constants";
-import IpcEvents from "../utils/IpcEvents";
+import { Modal, openModal } from "../utils/modal";
 import definePlugin from '../utils/types';
+import { filters, waitFor } from "../webpack";
 
-const OPEN_URL = `VencordNative.ipc.invoke("${IpcEvents.OPEN_EXTERNAL}",`;
+let ImageModal: any;
+let renderMaskedLink: any;
+
+waitFor(filters.byDisplayName("ImageModal"), m => ImageModal = m.default);
+waitFor("renderMaskedLinkComponent", m => renderMaskedLink = m.renderMaskedLinkComponent);
+
+const OPEN_URL = "Vencord.Plugins.plugins.ViewIcons.openImage(";
 export default definePlugin({
     name: "ViewIcons",
     author: "Vendicated",
     description: "Makes Avatars/Banners in user profiles clickable, and adds Guild Context Menu Entries to View Banner/Icon. Crashes if you don't have Developer Mode enabled, will fix in the future.",
+
+    openImage(url: string) {
+        openModal(() => (
+            <ImageModal
+                shouldAnimate={true}
+                original={url}
+                src={url}
+                renderLinkComponent={renderMaskedLink}
+            />
+        ), { size: Modal.ModalSize.DYNAMIC });
+    },
+
     patches: [
         {
             find: "UserProfileModalHeader",

src/utils/modal.tsx

@@ -1,8 +1,8 @@
 import Components from "discord-types/components";
 import { waitFor } from "../webpack";
 
-let Modal: Components.Modal;
+export let Modal: Components.Modal;
-let modals: any;
+export let modals: any;
 
 waitFor("openModalLazy", m => modals = m);
 waitFor("ModalRoot", m => Modal = m);
@@ -14,10 +14,10 @@ let modalId = 1337;
  * @param Component The component to render in the modal
  * @returns The key of this modal. This can be used to close the modal later with closeModal
  */
-export function openModal(Component: React.ComponentType) {
+export function openModal(Component: React.ComponentType, modalProps: Record<string, any>) {
     let key = `Vencord${modalId++}`;
     modals.openModal(props =>
-        <Modal.ModalRoot {...props}>
+        <Modal.ModalRoot {...props} {...modalProps}>
             <Component />
         </Modal.ModalRoot>
         , { modalKey: key });