diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx
index d59e9e3f08..29df29202b 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx
@@ -28,6 +28,7 @@ import { PageEditor } from "~/pages/PageEnigma/PageEditor";
import { GalleryDragComponent } from "@storyteller/ui-gallery-modal";
import { LoadingDots } from "@storyteller/ui-loading";
import { PricingModal } from "@storyteller/ui-pricing-modal";
+import { ProviderSetupModal } from "@storyteller/provider-setup-modal";
import {
isActionReminderOpen,
@@ -35,6 +36,8 @@ import {
ActionReminderModal,
} from "@storyteller/ui-action-reminder-modal";
import { useFlashUserInputErrorEvent } from "@storyteller/tauri-events";
+import { useShowProviderLoginModalEvent } from "@storyteller/tauri-events";
+
export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
useSignals();
@@ -93,6 +96,11 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
toast.error(event.message);
});
+ useShowProviderLoginModalEvent(async (event) => {
+ console.log("Show provider login modal event received:", event);
+ toast.error(event.provider);
+ });
+
useEffect(() => {
console.log("installing event listeners");
InstallSounds();
@@ -120,6 +128,7 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
/>
+
diff --git a/frontend/apps/editor3d/tsconfig.json b/frontend/apps/editor3d/tsconfig.json
index d85bc49534..0bc2dd50d0 100644
--- a/frontend/apps/editor3d/tsconfig.json
+++ b/frontend/apps/editor3d/tsconfig.json
@@ -115,6 +115,9 @@
{
"path": "../../libs/components/upload-modal"
},
+ {
+ "path": "../../libs/components/provider-setup-modal"
+ },
{
"path": "../../libs/components/modal"
},
diff --git a/frontend/libs/common/src/lib/enums/GenerationProvider.ts b/frontend/libs/common/src/lib/enums/GenerationProvider.ts
new file mode 100644
index 0000000000..e25d9f1a46
--- /dev/null
+++ b/frontend/libs/common/src/lib/enums/GenerationProvider.ts
@@ -0,0 +1,6 @@
+export enum GenerationProvider {
+ Artcraft = "artcraft",
+ Fal = "fal",
+ Midjourney = "midjourney",
+ Sora = "sora",
+}
diff --git a/frontend/libs/common/src/lib/enums/index.ts b/frontend/libs/common/src/lib/enums/index.ts
index 424823d2f9..4fbc722446 100644
--- a/frontend/libs/common/src/lib/enums/index.ts
+++ b/frontend/libs/common/src/lib/enums/index.ts
@@ -1,8 +1,9 @@
-export * from "./EditorState";
-export * from "./Queue";
-export * from "./UploaderStates";
-export * from "./Hotkeys";
-export * from "./Toaster";
export * from "./AssetFilterOption";
-export * from "./ThumbnailsFileType";
+export * from "./EditorState";
+export * from "./GenerationProvider";
+export * from "./Hotkeys";
export * from "./MediaFileAnimationType";
+export * from "./Queue";
+export * from "./ThumbnailsFileType";
+export * from "./Toaster";
+export * from "./UploaderStates";
diff --git a/frontend/libs/components/provider-setup-modal/.babelrc b/frontend/libs/components/provider-setup-modal/.babelrc
new file mode 100644
index 0000000000..1ea870ead4
--- /dev/null
+++ b/frontend/libs/components/provider-setup-modal/.babelrc
@@ -0,0 +1,12 @@
+{
+ "presets": [
+ [
+ "@nx/react/babel",
+ {
+ "runtime": "automatic",
+ "useBuiltIns": "usage"
+ }
+ ]
+ ],
+ "plugins": []
+}
diff --git a/frontend/libs/components/provider-setup-modal/README.md b/frontend/libs/components/provider-setup-modal/README.md
new file mode 100644
index 0000000000..73ba461fa6
--- /dev/null
+++ b/frontend/libs/components/provider-setup-modal/README.md
@@ -0,0 +1,7 @@
+# @frontend/provider-setup-modal
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @frontend/provider-setup-modal` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/frontend/libs/components/provider-setup-modal/package.json b/frontend/libs/components/provider-setup-modal/package.json
new file mode 100644
index 0000000000..cc6d4b7b11
--- /dev/null
+++ b/frontend/libs/components/provider-setup-modal/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "@storyteller/provider-setup-modal",
+ "version": "0.0.1",
+ "type": "module",
+ "main": "./dist/index.js",
+ "module": "./dist/index.js",
+ "types": "./dist/index.d.ts",
+ "exports": {
+ "./package.json": "./package.json",
+ ".": {
+ "development": "./src/index.ts",
+ "types": "./dist/index.d.ts",
+ "import": "./dist/index.js",
+ "default": "./dist/index.js"
+ }
+ }
+}
diff --git a/frontend/libs/components/provider-setup-modal/src/index.ts b/frontend/libs/components/provider-setup-modal/src/index.ts
new file mode 100644
index 0000000000..27cb6b35a3
--- /dev/null
+++ b/frontend/libs/components/provider-setup-modal/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/provider-setup-modal';
diff --git a/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.module.css b/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.module.css
new file mode 100644
index 0000000000..d0246c74b9
--- /dev/null
+++ b/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.module.css
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
\ No newline at end of file
diff --git a/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.spec.tsx b/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.spec.tsx
new file mode 100644
index 0000000000..f97e6c5022
--- /dev/null
+++ b/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.spec.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import FrontendProviderSetupModal from './provider-setup-modal';
+
+describe('FrontendProviderSetupModal', () => {
+
+ it('should render successfully', () => {
+ const { baseElement } = render();
+ expect(baseElement).toBeTruthy();
+ });
+
+});
diff --git a/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.tsx b/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.tsx
new file mode 100644
index 0000000000..15b08a797d
--- /dev/null
+++ b/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.tsx
@@ -0,0 +1,118 @@
+import { Modal } from "@storyteller/ui-modal";
+import { invoke } from "@tauri-apps/api/core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faArrowRight,
+ faMagicWandSparkles,
+} from "@fortawesome/pro-solid-svg-icons";
+import { Button } from "@storyteller/ui-button";
+import { useState } from "react";
+import { useShowProviderLoginModalEvent } from "@storyteller/tauri-events";
+import { GenerationProvider } from "@storyteller/common";
+
+interface ProviderSetupModalProps {
+}
+
+export function ProviderSetupModal({
+}: ProviderSetupModalProps) {
+ const [showModal, setShowModal] = useState(false);
+ const [provider, setProvider] = useState(GenerationProvider.Artcraft);
+
+ useShowProviderLoginModalEvent(async (event) => {
+ console.log("Show provider login modal event received from Tauri:", event);
+ setProvider(event.provider);
+ setShowModal(true);
+ });
+
+ const serviceProviderName = getServiceProviderName(provider);
+
+ const modalTitle = `Set up ${serviceProviderName}`;
+ const modalSubTitle = `Add your ${serviceProviderName} account to ArtCraft!`;
+
+ const modalDescription = `You can add your ${serviceProviderName} account to ArtCraft by simply logging in. Use your credits and account directly within Artcraft. You can add all of your AI accounts to Artcraft to use them all in one place and build the ultimate AI art tool.`;
+
+ const modalButtonText = `Set up ${serviceProviderName}`;
+
+ const buttonOnClick = async () => {
+ switch (provider) {
+ case GenerationProvider.Midjourney:
+ await invoke("midjourney_open_login_command");
+ break;
+ case GenerationProvider.Sora:
+ await invoke("open_sora_login_command"); // TODO: Rename in Tauri
+ break;
+ case GenerationProvider.Fal:
+ break; // TODO: None yet.
+ default:
+ break;
+ }
+ setShowModal(false);
+ };
+
+ return (
+ {
+ setShowModal(false);
+ }}
+ className="max-w-2xl max-h-[500px] p-6"
+ showClose={true}
+ >
+
+
+
+
+
+
+
+ {modalTitle}
+
+
+
{modalSubTitle}
+
+
+
+
{modalDescription}
+
+
+
+
+
+
+ {/*
+ Test
+
*/}
+
+