Inject the credits state from main app instead

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -57,11 +57,10 @@ import {
   usePricingModalStore,
   useCreditsModalStore,
 } from "@storyteller/ui-pricing-modal";
-import { useCreditsBalanceChangedEvent } from "@storyteller/tauri-events";
-import { useSubscriptionPlanChangedEvent } from "@storyteller/tauri-events";
-import { useCreditsState } from "@storyteller/credits";
+import { useCreditsBalanceChangedEvent, useSubscriptionPlanChangedEvent } from "@storyteller/tauri-events";
 import { useSubscriptionState } from "@storyteller/subscription";
 import { UploadImagesButton } from "./UploadImagesButton";
+import { useCreditsState } from "~/signals/billing/billing";
 
 interface Props {
   pageName: string;
@@ -493,6 +492,7 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
         onClose={() => setIsSettingsModalOpen(false)}
         globalAccountLogoutCallback={() => setLogoutStates()}
         initialSection={settingsSection}
+        creditsState={creditsStore}
       />
 
       <GalleryModal

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/Controls3D/Controls3D.tsx

@@ -45,6 +45,7 @@ import {
 } from "@storyteller/ui-gallery-modal";
 import { twMerge } from "tailwind-merge";
 import { UploadModalImage } from "../../../../components/reusable/UploadModalImage";
+import { useCreditsState } from "~/signals/billing/billing";
 
 export const Controls3D = () => {
   useSignals();
@@ -59,6 +60,8 @@ export const Controls3D = () => {
   // Track processed 3D models by their media token to prevent duplicates
   const processedModelsRef = useRef<Record<string, boolean>>({});
 
+  const creditsStore = useCreditsState();
+
   useEffect(() => {
     // Check if scene is empty and onboarding helper is not visible
     const checkSceneEmpty = () => {
@@ -327,11 +330,10 @@ export const Controls3D = () => {
                     ]}
                     onPanelAction={handleAddAssetAction}
                     showIconsInList
-                    buttonClassName={`h-9 w-9 rounded-[10px] text-lg ${
-                      showEmptySceneTooltip
+                    buttonClassName={`h-9 w-9 rounded-[10px] text-lg ${showEmptySceneTooltip
                         ? "bg-primary/90 hover:bg-primary/70"
                         : "border-transparent bg-primary/90 hover:bg-primary/70"
-                    }`}
+                      }`}
                     triggerIcon={
                       <FontAwesomeIcon icon={faPlus} className="text-xl" />
                     }
@@ -372,6 +374,7 @@ export const Controls3D = () => {
         onClose={() => setIsSettingsModalOpen(false)}
         globalAccountLogoutCallback={() => setLogoutStates()}
         initialSection="accounts"
+        creditsState={creditsStore}
       />
 
       <UploadModal3D

frontend/apps/editor3d/app/src/signals/billing/billing.ts

@@ -0,0 +1,30 @@
+import { ArtcraftGetCredits } from "@storyteller/tauri-api";
+import { CreditsState, CreditsActions } from "@storyteller/credits";
+import { create } from "zustand";
+
+export const useCreditsState = create<CreditsState & CreditsActions>((set) => ({
+  freeCredits: 0,
+  monthlyCredits: 0,
+  bankedCredits: 0,
+  totalCredits: 0,
+
+  // Call to fetch credits from the server
+  fetchFromServer: async () => {
+    let data;
+    try {
+      data = await ArtcraftGetCredits();
+    } catch (error) {
+      console.error("Error fetching credits", error);
+      return;
+    }
+    console.log("Fetched credits from server: ", data);
+    if (data.payload) {
+      set((state) => ({
+        freeCredits: data.payload.free_credits,
+        monthlyCredits: data.payload.monthly_credits,
+        bankedCredits: data.payload.banked_credits,
+        totalCredits: data.payload.sum_total_credits,
+      }));
+    }
+  }
+}))

frontend/libs/components/settings-modal/src/lib/panes/BillingSettingsPane.tsx

@@ -9,7 +9,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { usePricingModalStore } from "@storyteller/ui-pricing-modal";
 import { useCreditsModalStore } from "@storyteller/ui-pricing-modal";
-import { useCreditsState, CreditsState } from "@storyteller/credits";
+import { CreditsActions, CreditsState } from "@storyteller/credits";
 import {
   FREE_PLAN,
   SubscriptionPlanDetails,
@@ -18,12 +18,14 @@ import {
 import { SUBSCRIPTION_PLANS_BY_SLUG } from "@storyteller/subscription";
 import { invoke } from "@tauri-apps/api/core";
 
-interface BillingSettingsPaneProps {}
+interface BillingSettingsPaneProps {
+  creditsStore: CreditsState & CreditsActions;
+}
 
 export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
   const { toggleModal: toggleSubscriptionModal } = usePricingModalStore();
 
-  const creditsStore = useCreditsState();
+  const creditsStore = args.creditsStore;
 
   const sumTotalCredits = creditsStore.totalCredits;
 

frontend/libs/components/settings-modal/src/lib/settings-modal.module.css

@@ -1,7 +0,0 @@
-/*
- * Replace this with your own classes
- *
- * e.g.
- * .container {
- * }
-*/

frontend/libs/components/settings-modal/src/lib/settings-modal.spec.tsx

@@ -1,12 +0,0 @@
-import { render } from '@testing-library/react';
-
-import SettingsModal from './settings-modal';
-
-describe('SettingsModal', () => {
-  
-  it('should render successfully', () => {
-    const { baseElement } = render(<SettingsModal />);
-    expect(baseElement).toBeTruthy();
-  });
-  
-});

frontend/libs/components/settings-modal/src/lib/settings-modal.tsx

@@ -19,12 +19,14 @@ import { ProviderPrioritySettingsPane } from "./panes/ProviderPrioritySettingsPa
 import { gtagEvent } from "@storyteller/google-analytics";
 import { BillingSettingsPane } from "./panes/BillingSettingsPane";
 import { AppearanceSettingsPane } from "./panes/AppearanceSettingsPane";
+import { CreditsActions, CreditsState } from "@storyteller/credits";
 
 interface SettingsModalProps {
   isOpen: boolean;
   onClose: () => void;
   globalAccountLogoutCallback: () => void;
   initialSection?: SettingsSection;
+  creditsState: CreditsState & CreditsActions;
 }
 
 type SettingsSection =
@@ -41,6 +43,7 @@ export const SettingsModal = ({
   onClose,
   globalAccountLogoutCallback,
   initialSection = "general",
+  creditsState,
 }: SettingsModalProps) => {
   const [selectedSection, setSelectedSection] =
     useState<SettingsSection>(initialSection);
@@ -89,7 +92,7 @@ export const SettingsModal = ({
       case "provider_priority":
         return <ProviderPrioritySettingsPane />;
       case "billing":
-        return <BillingSettingsPane />;
+        return <BillingSettingsPane creditsStore={creditsState} />;
     }
   };
 

frontend/libs/state/credits/src/lib/state/credits-state.ts

@@ -1,6 +1,3 @@
-import { create } from 'zustand'
-import { ArtcraftGetCredits } from "@storyteller/tauri-api";
-
 export interface CreditsState {
   // Daily free credits (if/when we offer them)
   freeCredits: number,
@@ -20,29 +17,3 @@ export type CreditsActions = {
   fetchFromServer: () => Promise<void>
 }
 
-export const useCreditsState = create<CreditsState & CreditsActions>((set) => ({
-  freeCredits: 0,
-  monthlyCredits: 0,
-  bankedCredits: 0,
-  totalCredits: 0,
-
-  // Call to fetch credits from the server
-  fetchFromServer: async () => {
-    let data;
-    try {
-      data = await ArtcraftGetCredits(); 
-    } catch (error) {
-      console.error("Error fetching credits", error);
-      return;
-    }
-    console.log("Fetched credits from server: ", data);
-    if (!!data.payload) {
-      set((state) => ({
-        freeCredits: data.payload.free_credits,
-        monthlyCredits: data.payload.monthly_credits,
-        bankedCredits: data.payload.banked_credits,
-        totalCredits: data.payload.sum_total_credits,
-      }));
-    }
-  }
-}))