Sweep: Add fireworks particles on click to the pricing page

[wwzeng1]

Checklist

• src/components/PricingPage.tsx ✅ Commit 1e8a46c

[sweep-nightly]

Here's the PR! #518.

💎 Sweep Pro: I'm creating this ticket using GPT-4. You have unlimited GPT-4 tickets.

---

Actions (click)

• ↻ Restart Sweep

---

Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description.

landing-page/src/App.tsx

Lines 34 to 108 in 3e8fdea

	useEffect(() => {
	if (colorMode === "dark") return;
	toggleColorMode();
	}, [colorMode, toggleColorMode]);
	return props.children;
	}
	// @ts-ignore
	window.intercomSettings = {
	api_base: "https://api-iam.intercom.io",
	app_id: "ce8fl00z",
	action_color: "#6b46c1",
	background_color: "#342867",
	};
	export const App = () => {
	useEffect(() => {
	const script = document.createElement("script");
	script.type = "text/javascript";
	script.async = true;
	script.innerHTML = `(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/ce8fl00z';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();`;
	document.body.appendChild(script);
	}, []);
	return (
	<>
	<Helmet>
	<meta property="og:image" content={og_image} />
	<link rel="icon" type="image/png" sizes="16x16" href="/final-sweep-wizard_16x16.png" />
	<link rel="icon" type="image/png" sizes="32x32" href="/final-sweep-wizard_32x32.png" />
	<link rel="icon" type="image/png" sizes="48x48" href="/final-sweep-wizard_48x48.png" />
	<link rel="icon" type="image/png" sizes="64x64" href="/final-sweep-wizard_64x64.png" />
	<link rel="icon" type="image/png" sizes="128x128" href="/final-sweep-wizard_128x128.png" />
	<link rel="icon" type="image/png" sizes="256x256" href="/final-sweep-wizard_256x256.png" />
	</Helmet>
	<ChakraProvider theme={theme}>
	<ForceDarkMode>
	<Box
	textAlign="center"
	fontSize="xl"
	bgColor="#0d0a1a"
	bgImage={circles}
	bgPos="0 0"
	bgSize="100%"
	minH="100vh"
	bgRepeat="no-repeat"
	overflowX="hidden"
	>
	{false && <ColorModeSwitcher />}
	<Banner />
	<Router>
	<Navbar />
	<Switch>
	<Route exact path="/">
	<CallToAction />
	<Users />
	<Features />
	<Testimonials />
	<Conclusion />
	</Route>
	<Route path="/about-us">
	<AboutUs />
	</Route>
	<Route path="/pricing">
	<PricingPage />
	</Route>
	</Switch>
	</Router>
	</Box>
	</ForceDarkMode>
	</ChakraProvider>
	</>
	);

I also found some related docs:

Summary of related docs from https://particles.js.org/docs/modules/tsParticles_Engine.html:

To add fireworks particles on click to the pricing page, you can use the "Fireworks" preset provided by tsParticles. This preset is available as a separate package called "tsparticles-preset-fireworks". You can include this package in your project and configure the particles to appear on click.

Here are the steps to follow:

1. Install the "tsparticles-preset-fireworks" package using npm or yarn:

   npm install tsparticles-preset-fireworks
   

   or

   yarn add tsparticles-preset-fireworks
   

2. Import the necessary modules in your JavaScript file:

   import { tsParticles } from "tsparticles";
   import { loadFireworksPreset } from "tsparticles-preset-fireworks";

3. Load the "Fireworks" preset:

   tsParticles.addPreset("fireworks", loadFireworksPreset);

4. Initialize tsParticles on the desired element:

   tsParticles.load("element-id", {
     preset: "fireworks",
     // other configuration options
   });

   Replace "element-id" with the ID of the element where you want the particles to appear.

5. Add an event listener to trigger the fireworks particles on click:

   const element = document.getElementById("element-id");
   element.addEventListener("click", () => {
     tsParticles.load("element-id", {
       preset: "fireworks",
       // other configuration options
     });
   });

   Replace "element-id" with the ID of the element where you want to trigger the fireworks particles.

By following these steps, you should be able to add fireworks particles on click to the pricing page.

Sources:

• https://particles.js.org/docs/modules/tsParticles_Engine.html

• https://particles.js.org/docs/modules/tsParticles_Engine.html

• https://particles.js.org/docs/modules/tsParticles_Engine.html

• https://particles.js.org/docs/modules/tsParticles_Engine.html

---

Step 2: ⌨️ Coding

• src/components/PricingPage.tsx ✅ Commit 1e8a46c

• Install the "tsparticles-preset-fireworks" package by running the command `yarn add tsparticles-preset-fireworks` in the terminal. • At the top of the PricingPage.tsx file, import the necessary modules by adding the following lines of code: ```javascript import { tsParticles } from "tsparticles"; import { loadFireworksPreset } from "tsparticles-preset-fireworks"; ``` • After the imports, load the "Fireworks" preset by adding the following line of code: ```javascript tsParticles.addPreset("fireworks", loadFireworksPreset); ``` • In the PricingPage component, initialize tsParticles on the desired element. You can do this by adding a useEffect hook that runs once when the component mounts. Inside the useEffect hook, add the following lines of code: ```javascript useEffect(() => { tsParticles.load("pricing-page", { preset: "fireworks", // other configuration options }); }, []); ``` Replace "pricing-page" with the ID of the element where you want the particles to appear. • Still inside the PricingPage component, add an event listener to trigger the fireworks particles on click. You can do this by adding a onClick handler to the element where you want to trigger the fireworks particles. Inside the onClick handler, add the following lines of code: ```javascript const handleOnClick = () => { tsParticles.load("pricing-page", { preset: "fireworks", // other configuration options }); }; ``` Replace "pricing-page" with the ID of the element where you want to trigger the fireworks particles.

---

Step 3: 🔁 Code Review

Here are my self-reviews of my changes at sweep/fireworks-particles.

Here is the 1st review

Hi there, great job on implementing the fireworks particles on click! There's just a small issue that needs to be addressed.

In the file src/components/PricingPage.tsx, you've left the comment "// other configuration options" in two places (lines 10 and 18). This suggests that there may be some unimplemented sections. Please replace these comments with the actual configuration options for the fireworks particles.

Here's an example of how you might do this:

tsParticles.load("pricing-page", {
  preset: "fireworks",
  particles: {
    number: {
      value: 100,
    },
    color: {
      value: "#ff0000",
    },
    // other options...
  },
});

Please make these changes and push them to your branch. Keep up the good work!

I finished incorporating these changes.

---

🎉 Latest improvements to Sweep:

• Getting Sweep to run linters before committing! Check out Sweep Sandbox Configs to set it up.
• Added support for self-hosting! Check out Self-hosting Sweep to get started.
• [Self Hosting] Multiple options to compute vector embeddings, configure your .env file using VECTOR_EMBEDDING_SOURCE

---

💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request.
^{Join Our Discord}