swap success animation

components/Layout.tsx

@@ -1,5 +1,5 @@
 import SideNav from './SideNav'
-import { ReactNode, useEffect } from 'react'
+import { ReactNode, useCallback, useEffect } from 'react'
 import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import { useViewport } from '../hooks/useViewport'
 import { breakpoints } from '../utils/theme'
@@ -10,6 +10,9 @@ import TopBar from './TopBar'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import { SIDEBAR_COLLAPSE_KEY } from '../utils/constants'
 import { useWallet } from '@solana/wallet-adapter-react'
+import SwapSuccessParticles from './swap/SwapSuccessParticles'
+import { tsParticles } from 'tsparticles-engine'
+import { loadFull } from 'tsparticles'
 
 const sideBarAnimationDuration = 500
 
@@ -42,8 +45,19 @@ const Layout = ({ children }: { children: ReactNode }) => {
     setIsCollapsed(!isCollapsed)
   }
 
+  const particlesInit = useCallback(async () => {
+    await loadFull(tsParticles)
+  }, [])
+
+  useEffect(() => {
+    particlesInit()
+  }, [])
+
   return (
     <>
+      <div className="fixed z-30">
+        <SwapSuccessParticles />
+      </div>
       {connected && loadingMangoAccount ? (
         <div className="fixed z-30 flex h-screen w-full items-center justify-center bg-[rgba(0,0,0,0.7)]">
           <BounceLoader />

components/ParticlesBackground.tsx

@@ -1,20 +1,9 @@
-import { useCallback } from 'react'
 import Particles from 'react-tsparticles'
-import { loadFull } from 'tsparticles'
 
 const ParticlesBackground = () => {
-  const particlesInit = useCallback(async (engine: any) => {
-    // you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
-    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
-    // starting from v2 you can add only the features you need reducing the bundle size
-    await loadFull(engine)
-  }, [])
-
   return (
     <Particles
       id="tsparticles"
-      init={particlesInit}
-      // loaded={particlesLoaded}
       options={{
         fullScreen: false,
         interactivity: {
@@ -33,40 +22,6 @@ const ParticlesBackground = () => {
           },
         },
         particles: {
-          // groups: {
-          //   z5000: {
-          //     number: {
-          //       value: 70,
-          //     },
-          //     zIndex: {
-          //       value: 50,
-          //     },
-          //   },
-          //   z7500: {
-          //     number: {
-          //       value: 30,
-          //     },
-          //     zIndex: {
-          //       value: 75,
-          //     },
-          //   },
-          //   z2500: {
-          //     number: {
-          //       value: 50,
-          //     },
-          //     zIndex: {
-          //       value: 25,
-          //     },
-          //   },
-          //   z1000: {
-          //     number: {
-          //       value: 40,
-          //     },
-          //     zIndex: {
-          //       value: 10,
-          //     },
-          //   },
-          // },
           move: {
             angle: 10,
             attract: {

components/swap/JupiterRouteInfo.tsx

@@ -152,6 +152,7 @@ const JupiterRouteInfo = ({
       const inputBank = mangoStore.getState().swap.inputBank
       const outputBank = mangoStore.getState().swap.outputBank
       const slippage = mangoStore.getState().swap.slippage
+      const set = mangoStore.getState().set
 
       if (!mangoAccount || !group || !inputBank || !outputBank) return
 
@@ -172,7 +173,9 @@ const JupiterRouteInfo = ({
           userDefinedInstructions: ixs,
           flashLoanType: { swap: {} },
         })
-
+        set((s) => {
+          s.swap.success = true
+        })
         notify({
           title: 'Transaction confirmed',
           type: 'success',

components/swap/SwapSuccessParticles.tsx

@@ -0,0 +1,84 @@
+import mangoStore from '@store/mangoStore'
+import useJupiterMints from 'hooks/useJupiterMints'
+import { useEffect, useMemo } from 'react'
+import Particles from 'react-tsparticles'
+
+const SwapSuccessParticles = () => {
+  const { mangoTokens } = useJupiterMints()
+  const showSwapAnimation = mangoStore((s) => s.swap.success)
+  const swapTokenMint = mangoStore((s) => s.swap.outputBank)?.mint.toString()
+  const set = mangoStore((s) => s.set)
+
+  const tokenLogo = useMemo(() => {
+    if (!mangoTokens.length || !swapTokenMint) return ''
+    const token = mangoTokens.find((t) => t.address === swapTokenMint)
+    return token?.logoURI ? token.logoURI : ''
+  }, [mangoTokens, swapTokenMint])
+
+  useEffect(() => {
+    if (showSwapAnimation) {
+      setTimeout(
+        () =>
+          set((s) => {
+            s.swap.success = false
+          }),
+        8000
+      )
+    }
+  }, [showSwapAnimation])
+
+  return showSwapAnimation && tokenLogo ? (
+    <Particles
+      id="tsparticles"
+      options={{
+        autoPlay: true,
+        detectRetina: true,
+        duration: 3000,
+        particles: {
+          shape: {
+            type: 'images',
+            options: {
+              image: {
+                src: tokenLogo,
+                width: 48,
+                height: 48,
+              },
+            },
+          },
+          rotate: {
+            value: 0,
+            random: true,
+            direction: 'clockwise',
+            animation: {
+              enable: true,
+              speed: 15,
+              sync: false,
+            },
+          },
+          size: {
+            value: 16,
+            random: false,
+          },
+          move: {
+            angle: 10,
+            attract: {
+              rotate: {
+                x: 600,
+                y: 1200,
+              },
+            },
+            direction: 'bottom',
+            enable: true,
+            speed: { min: 7, max: 15 },
+            outMode: 'destroy',
+          },
+          opacity: {
+            value: 1,
+          },
+        },
+      }}
+    />
+  ) : null
+}
+
+export default SwapSuccessParticles

store/mangoStore.ts

@@ -210,6 +210,7 @@ export type MangoStore = {
     outputTokenInfo: Token | undefined
     margin: boolean
     slippage: number
+    success: boolean
   }
   set: (x: (x: MangoStore) => void) => void
   tradeForm: {
@@ -328,6 +329,7 @@ const mangoStore = create<MangoStore>()(
         outputTokenInfo: undefined,
         margin: true,
         slippage: 0.5,
+        success: false,
       },
       wallet: {
         tokens: [],