feat(ui): use new alert modal for unproxied plugin install

src/core/ui/settings/pages/Plugins/index.tsx

@@ -5,10 +5,12 @@ import { VdPluginManager } from "@core/vendetta/plugins";
 import { findAssetId } from "@lib/api/assets";
 import { settings } from "@lib/api/settings";
 import { useProxy } from "@lib/api/storage";
-import { showConfirmationAlert } from "@lib/ui/alerts";
 import { showToast } from "@lib/ui/toasts";
 import { BUNNY_PROXY_PREFIX, VD_PROXY_PREFIX } from "@lib/utils/constants";
+import { lazyDestructure } from "@lib/utils/lazy";
 import { Author } from "@lib/utils/types";
+import { findByProps } from "@metro";
+import { Card, Text } from "@metro/common/components";
 import { ComponentProps } from "react";
 
 import unifyVdPlugin from "./models/vendetta";
@@ -28,6 +30,9 @@ export interface UnifiedPluginModel {
     getPluginSettingsComponent(): React.ComponentType<any> | null | undefined;
 }
 
+const { openAlert } = lazyDestructure(() => findByProps("openAlert", "dismissAlert"));
+const { AlertModal, AlertActions, AlertActionButton } = lazyDestructure(() => findByProps("AlertModal", "AlertActions"));
+
 function navigateToPluginBrowser(navigation: any) {
     navigation.push("BUNNY_CUSTOM_PAGE", {
         title: "Plugin Browser",
@@ -71,18 +76,26 @@ export default function Plugins() {
         installAction={{
             label: "Install a plugin",
             fetchFn: async (url: string) => {
-                if (!url.startsWith(VD_PROXY_PREFIX) && !url.startsWith(BUNNY_PROXY_PREFIX) && !settings.developerSettings)
-                    setImmediate(() => showConfirmationAlert({
-                        title: Strings.MODAL_UNPROXIED_PLUGIN_HEADER,
-                        content: Strings.MODAL_UNPROXIED_PLUGIN_DESC,
-                        confirmText: Strings.CONTINUE,
-                        onConfirm: () =>
-                            VdPluginManager.installPlugin(url)
-                                .then(() => showToast(Strings.TOASTS_INSTALLED_PLUGIN, findAssetId("Check")))
-                                .catch(x => showToast(x?.message ?? `${x}`, findAssetId("Small"))),
-                        cancelText: Strings.CANCEL
-                    }));
-                else {
+                if (!url.startsWith(VD_PROXY_PREFIX) && !url.startsWith(BUNNY_PROXY_PREFIX) && !settings.developerSettings) {
+                    openAlert("bunny-plugin-unproxied-confirmation", <AlertModal
+                        title="Hold On!"
+                        content="You're trying to install a plugin from an external source. This means you're trusting the creator to run their code in this app. Are you sure you want to continue?"
+                        extraContent={<Card><Text variant="text-md/bold">{url}</Text></Card>}
+                        actions={<AlertActions>
+                            <AlertActionButton text="Continue" variant="primary" onPress={() => {
+                                VdPluginManager.installPlugin(url)
+                                    .then(() => showToast(Strings.TOASTS_INSTALLED_PLUGIN, findAssetId("Check")))
+                                    .catch(e => openAlert("bunny-plugin-install-failed", <AlertModal
+                                        title="Install Failed"
+                                        content={`Unable to install plugin from '${url}':`}
+                                        extraContent={<Card><Text variant="text-md/normal">{e instanceof Error ? e.message : String(e)}</Text></Card>}
+                                        actions={<AlertActionButton text="Okay" variant="primary" />}
+                                    />));
+                            }} />
+                            <AlertActionButton text="Cancel" variant="secondary" />
+                        </AlertActions>}
+                    />);
+                } else {
                     return await VdPluginManager.installPlugin(url);
                 }
             }