diff --git a/components/Layout.tsx b/components/Layout.tsx
index 0a9b97f3..7e10eeb9 100644
--- a/components/Layout.tsx
+++ b/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 (
<>
+
+
+
{connected && loadingMangoAccount ? (
diff --git a/components/ParticlesBackground.tsx b/components/ParticlesBackground.tsx
index 3223e390..bb9127b4 100644
--- a/components/ParticlesBackground.tsx
+++ b/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: {
- // 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: {
diff --git a/components/swap/JupiterRouteInfo.tsx b/components/swap/JupiterRouteInfo.tsx
index 0b7a5178..fdc097c7 100644
--- a/components/swap/JupiterRouteInfo.tsx
+++ b/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',
diff --git a/components/swap/SwapSuccessParticles.tsx b/components/swap/SwapSuccessParticles.tsx
new file mode 100644
index 00000000..3cf6d7c2
--- /dev/null
+++ b/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 ? (
+
+ ) : null
+}
+
+export default SwapSuccessParticles
diff --git a/store/mangoStore.ts b/store/mangoStore.ts
index da4c2356..3b9b75f9 100644
--- a/store/mangoStore.ts
+++ b/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()(
outputTokenInfo: undefined,
margin: true,
slippage: 0.5,
+ success: false,
},
wallet: {
tokens: [],