diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx index a077cd1198..87ceaf54bb 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx @@ -103,8 +103,7 @@ export function AgentRunDraftView({ const [changedPresetAttributes, setChangedPresetAttributes] = useState< Set >(new Set()); - const { state: onboardingState, completeStep: completeOnboardingStep } = - useOnboarding(); + const { completeStep: completeOnboardingStep } = useOnboarding(); const [cronScheduleDialogOpen, setCronScheduleDialogOpen] = useState(false); // Update values if agentPreset parameter is changed @@ -197,9 +196,7 @@ export function AgentRunDraftView({ .catch(toastOnFail("execute agent preset")); } // Mark run agent onboarding step as completed - if (onboardingState?.completedSteps.includes("MARKETPLACE_ADD_AGENT")) { - completeOnboardingStep("MARKETPLACE_RUN_AGENT"); - } + completeOnboardingStep("MARKETPLACE_RUN_AGENT"); if (runCount > 0) { completeOnboardingStep("RE_RUN_AGENT"); } @@ -210,7 +207,6 @@ export function AgentRunDraftView({ inputCredentials, onRun, toastOnFail, - onboardingState, completeOnboardingStep, ]); @@ -246,7 +242,6 @@ export function AgentRunDraftView({ onCreatePreset, toast, toastOnFail, - onboardingState, completeOnboardingStep, ]); @@ -286,7 +281,6 @@ export function AgentRunDraftView({ onUpdatePreset, toast, toastOnFail, - onboardingState, completeOnboardingStep, ]); @@ -334,7 +328,6 @@ export function AgentRunDraftView({ onCreatePreset, toast, toastOnFail, - onboardingState, completeOnboardingStep, ]); diff --git a/autogpt_platform/frontend/src/components/__legacy__/Wallet.tsx b/autogpt_platform/frontend/src/components/__legacy__/Wallet.tsx index d6de98aba3..5e8af8e23e 100644 --- a/autogpt_platform/frontend/src/components/__legacy__/Wallet.tsx +++ b/autogpt_platform/frontend/src/components/__legacy__/Wallet.tsx @@ -171,21 +171,28 @@ export default function Wallet() { }, [groups]); // Get total completed count for all groups - const completedCount = useMemo(() => { - return groups.reduce( + const [completedCount, setCompletedCount] = useState(null); + // Needed to show confetti when a new step is completed + const [prevCompletedCount, setPrevCompletedCount] = useState( + null, + ); + + const walletRef = useRef(null); + + useEffect(() => { + if (!state) { + return; + } + const completed = groups.reduce( (acc, group) => acc + group.tasks.filter((task) => state?.completedSteps?.includes(task.id)) .length, 0, ); + setCompletedCount(completed); }, [groups, state?.completedSteps]); - // Needed to show confetti when a new step is completed - const [stepsLength, setStepsLength] = useState(completedCount); - - const walletRef = useRef(null); - const onWalletOpen = useCallback(async () => { if (!state?.walletShown) { updateState({ walletShown: true }); @@ -206,19 +213,25 @@ export default function Wallet() { // Confetti effect on the wallet button useEffect(() => { - if (!state?.completedSteps) { - return; - } // It's enough to check completed count, // because the order of completed steps is not important // If the count is the same, we don't need to do anything - if (completedCount === stepsLength) { + if (completedCount === null || completedCount === prevCompletedCount) { + return; + } + // Otherwise, we need to set the new prevCompletedCount + setPrevCompletedCount(completedCount); + // If there was no previous count, we don't show confetti + if (prevCompletedCount === null) { return; } - // Otherwise, we need to set the new length - setStepsLength(completedCount); // And emit confetti if (walletRef.current) { + // Fix confetti appearing in the top left corner + const rect = walletRef.current.getBoundingClientRect(); + if (rect.width === 0 || rect.height === 0) { + return; + } setTimeout(() => { fetchCredits(); party.confetti(walletRef.current!, { @@ -236,7 +249,8 @@ export default function Wallet() { state?.notified, fadeOut, fetchCredits, - stepsLength, + completedCount, + prevCompletedCount, walletRef, ]); @@ -270,7 +284,7 @@ export default function Wallet() { {formatCredits(credits)} - {completedCount < totalCount && ( + {completedCount && completedCount < totalCount && ( )}