back to lightning animation

components/fireworks.js

@@ -1,272 +0,0 @@
-import { useCallback, createContext, useContext, useState, useEffect } from 'react'
-import Particles from 'react-particles'
-import { loadFireworksPreset } from 'tsparticles-preset-fireworks'
-import styles from './fireworks.module.css'
-import {
-  rgbToHsl,
-  setRangeValue,
-  stringToRgb
-} from 'tsparticles-engine'
-import useDarkMode from 'use-dark-mode'
-
-export const FireworksContext = createContext({
-  strike: () => {}
-})
-
-export const FireworksConsumer = FireworksContext.Consumer
-export function useFireworks () {
-  const { strike } = useContext(FireworksContext)
-  return strike
-}
-
-export function FireworksProvider ({ children }) {
-  const [cont, setCont] = useState()
-  const [context, setContext] = useState({ strike: () => {} })
-  const darkMode = useDarkMode(false)
-
-  useEffect(() => {
-    setContext({
-      strike: () => {
-        cont?.addEmitter(
-          {
-            direction: 'top',
-            life: {
-              count: 1,
-              duration: 0.1,
-              delay: 0.1
-            },
-            rate: {
-              delay: 0,
-              quantity: 1
-            },
-            size: {
-              width: 10,
-              height: 0
-            },
-            position: {
-              y: 100,
-              x: 50
-            }
-          })
-      }
-    })
-  }, [cont])
-
-  const particlesLoaded = useCallback((container) => {
-    setCont(container)
-  }, [])
-
-  const particlesInit = useCallback(async engine => {
-    // you can initiate 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 loadFireworksPreset(engine)
-  }, [])
-
-  return (
-    <FireworksContext.Provider value={context}>
-      <Particles
-        className={styles.fireworks}
-        init={particlesInit}
-        loaded={particlesLoaded}
-        options={darkMode.value ? darkOptions : lightOptions}
-      />
-      {children}
-    </FireworksContext.Provider>
-  )
-}
-
-const fixRange = (value, min, max) => {
-  const diffSMax = value.max > max ? value.max - max : 0
-  let res = setRangeValue(value)
-
-  if (diffSMax) {
-    res = setRangeValue(value.min - diffSMax, max)
-  }
-
-  const diffSMin = value.min < min ? value.min : 0
-
-  if (diffSMin) {
-    res = setRangeValue(0, value.max + diffSMin)
-  }
-
-  return res
-}
-
-const fireworksOptions = ['#ff595e', '#ffca3a', '#8ac926', '#1982c4', '#6a4c93']
-  .map((color) => {
-    const rgb = stringToRgb(color)
-
-    if (!rgb) {
-      return undefined
-    }
-
-    const hsl = rgbToHsl(rgb)
-    const sRange = fixRange({ min: hsl.s - 30, max: hsl.s + 30 }, 0, 100)
-    const lRange = fixRange({ min: hsl.l - 30, max: hsl.l + 30 }, 0, 100)
-
-    return {
-      color: {
-        value: {
-          h: hsl.h,
-          s: sRange,
-          l: lRange
-        }
-      },
-      stroke: {
-        width: 0
-      },
-      number: {
-        value: 0
-      },
-      opacity: {
-        value: {
-          min: 0.1,
-          max: 1
-        },
-        animation: {
-          enable: true,
-          speed: 0.7,
-          sync: false,
-          startValue: 'max',
-          destroy: 'min'
-        }
-      },
-      shape: {
-        type: 'circle'
-      },
-      size: {
-        value: { min: 1, max: 2 },
-        animation: {
-          enable: true,
-          speed: 5,
-          count: 1,
-          sync: false,
-          startValue: 'min',
-          destroy: 'none'
-        }
-      },
-      life: {
-        count: 1,
-        duration: {
-          value: {
-            min: 1,
-            max: 2
-          }
-        }
-      },
-      move: {
-        decay: { min: 0.075, max: 0.1 },
-        enable: true,
-        gravity: {
-          enable: true,
-          inverse: false,
-          acceleration: 5
-        },
-        speed: { min: 5, max: 15 },
-        direction: 'none',
-        outMode: {
-          top: 'destroy',
-          default: 'bounce'
-        }
-      }
-    }
-  })
-  .filter((t) => t !== undefined)
-
-const particlesOptions = (theme) => ({
-  number: {
-    value: 0
-  },
-  destroy: {
-    mode: 'split',
-    bounds: {
-      top: { min: 5, max: 40 }
-    },
-    split: {
-      sizeOffset: false,
-      count: 1,
-      factor: {
-        value: 0.333333
-      },
-      rate: {
-        value: { min: 75, max: 150 }
-      },
-      particles: fireworksOptions
-    }
-  },
-  life: {
-    count: 1
-  },
-  shape: {
-    type: 'line'
-  },
-  size: {
-    value: {
-      min: 0.1,
-      max: 50
-    },
-    animation: {
-      enable: true,
-      sync: true,
-      speed: 90,
-      startValue: 'max',
-      destroy: 'min'
-    }
-  },
-  rotate: {
-    path: true
-  },
-  stroke: {
-    color: {
-      value: theme === 'dark' ? '#fff' : '#aaa'
-    },
-    width: 1
-  },
-  move: {
-    enable: true,
-    gravity: {
-      acceleration: 15,
-      enable: true,
-      inverse: true,
-      maxSpeed: 100
-    },
-    speed: {
-      min: 10,
-      max: 20
-    },
-    outModes: {
-      default: 'destroy',
-      top: 'none'
-    },
-    trail: {
-      fillColor: theme === 'dark' ? '#000' : '#f5f5f7',
-      enable: true,
-      length: 10
-    }
-  }
-})
-
-const darkOptions = {
-  fullScreen: { enable: true },
-  detectRetina: true,
-  background: {
-    color: '#000'
-  },
-  zIndex: -1,
-  fpsLimit: 120,
-  emitters: [],
-  particles: particlesOptions('dark')
-}
-
-const lightOptions = {
-  fullScreen: { enable: true },
-  detectRetina: true,
-  background: {
-    color: '#fff'
-  },
-  zIndex: -1,
-  fpsLimit: 120,
-  emitters: [],
-  particles: particlesOptions('light')
-}

components/fireworks.module.css

@@ -1,8 +0,0 @@
-.fireworks {
-  z-index: -1;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}

components/header.js

@@ -19,7 +19,7 @@ import { Form, Select } from './form'
 import SearchIcon from '../svgs/search-line.svg'
 import BackArrow from '../svgs/arrow-left-line.svg'
 import { SUBS } from '../lib/constants'
-import { useFireworks } from './fireworks'
+import { useLightning } from './lightning'
 
 function WalletSummary ({ me }) {
   if (!me) return null
@@ -155,7 +155,7 @@ export default function Header ({ sub }) {
       )
     } else {
       if (!fired) {
-        const strike = useFireworks()
+        const strike = useLightning()
         useEffect(() => {
           let isMounted = true
           if (!localStorage.getItem('striked')) {

components/upvote.js

@@ -1,4 +1,3 @@
-import { LightningConsumer } from './lightning'
 import UpBolt from '../svgs/bolt.svg'
 import styles from './upvote.module.css'
 import { gql, useMutation } from '@apollo/client'
@@ -12,7 +11,7 @@ import LongPressable from 'react-longpressable'
 import { Overlay, Popover } from 'react-bootstrap'
 import { useShowModal } from './modal'
 import { useRouter } from 'next/router'
-import { FireworksConsumer } from './fireworks'
+import { LightningConsumer } from './lightning'
 
 const getColor = (meSats) => {
   if (!meSats || meSats <= 10) {
@@ -176,7 +175,7 @@ export default function UpVote ({ item, className }) {
 
   const color = getColor(item?.meSats)
   return (
-    <FireworksConsumer>
+    <LightningConsumer>
       {({ strike }) =>
         <div ref={ref} className='upvoteParent'>
           <LongPressable
@@ -264,6 +263,6 @@ export default function UpVote ({ item, className }) {
           <TipPopover target={ref.current} show={tipShow} handleClose={() => setTipShow(false)} />
           <UpvotePopover target={ref.current} show={voteShow} handleClose={() => setVoteShow(false)} />
         </div>}
-    </FireworksConsumer>
+    </LightningConsumer>
   )
 }

package-lock.json

@@ -60,7 +60,6 @@
         "react-dom": "^17.0.2",
         "react-longpressable": "^1.1.1",
         "react-markdown": "^8.0.3",
-        "react-particles": "^2.10.1",
         "react-string-replace": "^0.4.4",
         "react-syntax-highlighter": "^15.5.0",
         "react-textarea-autosize": "^8.3.4",
@@ -74,8 +73,6 @@
         "secp256k1": "^4.0.3",
         "swr": "^1.3.0",
         "tldts": "^5.7.104",
-        "tsparticles-engine": "^2.10.1",
-        "tsparticles-preset-fireworks": "^2.10.1",
         "unist-util-visit": "^4.1.1",
         "url-unshort": "^6.1.0",
         "use-dark-mode": "^2.3.1",
@@ -6109,17 +6106,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/deep-eql": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
-      "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
-      "dependencies": {
-        "type-detect": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -13414,33 +13400,6 @@
         "react-dom": ">=16.3.0"
       }
     },
-    "node_modules/react-particles": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/react-particles/-/react-particles-2.10.1.tgz",
-      "integrity": "sha512-7juKgk9LqMsSbfAPLbzU3kBfkmspRWrmJKbFxSpZuzXMrNizjEoQPCvGwwS1/I14w55gMz1pqzowDhB8xvmPSQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
-      "hasInstallScript": true,
-      "dependencies": {
-        "deep-eql": "^4.1.3",
-        "tsparticles-engine": "^2.10.1"
-      },
-      "peerDependencies": {
-        "react": ">=16"
-      }
-    },
     "node_modules/react-resize-detector": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz",
@@ -15906,165 +15865,6 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
-    "node_modules/tsparticles-engine": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.10.1.tgz",
-      "integrity": "sha512-DV2gYsbChyiXYIZYgnXtKHSAZdvnNMJpVf9Cw0gO7vjQ6pcgLAeyboRtvsaTfwKZNzzA7BeSf1lVhgGxorL4CQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
-      "hasInstallScript": true
-    },
-    "node_modules/tsparticles-move-base": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-move-base/-/tsparticles-move-base-2.10.1.tgz",
-      "integrity": "sha512-Q7JHIRPuJZw/Jz7vEeCePMR/69ace5rpWPqZ3+KLJnrtayxDEvj4tNRjnPtZusJ1Ve+wp0IxjOwrfGxeHxbmsQ==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-plugin-emitters": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-plugin-emitters/-/tsparticles-plugin-emitters-2.10.1.tgz",
-      "integrity": "sha512-SHuPH0qYA70gWNeOzn3DXk9W/IjTMtbeYhHWLOruTThrcLgBT4bRI5ooLnITjraMaTYf4FWdl7Mi/1MRkT5yUg==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-plugin-sounds": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-plugin-sounds/-/tsparticles-plugin-sounds-2.10.1.tgz",
-      "integrity": "sha512-bb4kQruLqK35mteVp0tvPJf+wOeRHDnQFKdApvfXSol/tKFp5vZCGDXLB55532Z3mQeIxsIvKdWGOYahhfwzuA==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-preset-fireworks": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-preset-fireworks/-/tsparticles-preset-fireworks-2.10.1.tgz",
-      "integrity": "sha512-ENSqjJU4JfznXo1kK5XGS48vbya/pkxB/RrauMT+YXkIRrqpz4+HrQ0XtwgQl8KQVYrteUfS8pcJLXewgnHxNQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1",
-        "tsparticles-move-base": "^2.10.1",
-        "tsparticles-plugin-emitters": "^2.10.1",
-        "tsparticles-plugin-sounds": "^2.10.1",
-        "tsparticles-shape-circle": "^2.10.1",
-        "tsparticles-shape-line": "^2.10.1",
-        "tsparticles-updater-angle": "^2.9.3",
-        "tsparticles-updater-color": "^2.10.1",
-        "tsparticles-updater-destroy": "^2.10.1",
-        "tsparticles-updater-life": "^2.10.1",
-        "tsparticles-updater-opacity": "^2.10.1",
-        "tsparticles-updater-out-modes": "^2.10.1",
-        "tsparticles-updater-size": "^2.10.1",
-        "tsparticles-updater-stroke-color": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-shape-circle": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-shape-circle/-/tsparticles-shape-circle-2.10.1.tgz",
-      "integrity": "sha512-oWfoF1rwBNDS8X8EBZVwt/UF9wBqh3OpV71LxCvTE9lh73FeUeQZ9aSW46t9XODIsNBMPbnAQNkP1wz4zNiw2A==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-shape-line": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-shape-line/-/tsparticles-shape-line-2.10.1.tgz",
-      "integrity": "sha512-3BWNjY0l1vsvKJvMMjkFNtCts3YPOnnd9w4d0d19XXv03jWNbhXC159Xeho/w+jlVcQWsExMxhVPlJYLOPa+Qw==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-updater-angle": {
-      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-angle/-/tsparticles-updater-angle-2.9.3.tgz",
-      "integrity": "sha512-Z8VLOw2UUxrvV3YH44My5kmeBUcJUHTSCMRUIqFvgvxDs0Q/g2eVWkr1L+Crpw6PE5FJMdDGWRjWwxMwNdVfuQ==",
-      "dependencies": {
-        "tsparticles-engine": "^2.9.3"
-      }
-    },
-    "node_modules/tsparticles-updater-color": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-color/-/tsparticles-updater-color-2.10.1.tgz",
-      "integrity": "sha512-/7FCR/VzpOuiE0ztGEzzN4vNeLGbS9QUBX78OM59GDZujlHfjfWh1jqedyNXrhkb6mf08B3FZWiQWGysPeL31Q==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-updater-destroy": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-destroy/-/tsparticles-updater-destroy-2.10.1.tgz",
-      "integrity": "sha512-lFTyVgLNt4x1T4jBHRs+V8gFUQKwXkMbeNF5JUNwlrmGBr/Mx0A36XBcJ4BKZR5+jWO1C6I8jgYzIrFPx6Z+MQ==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-updater-life": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-life/-/tsparticles-updater-life-2.10.1.tgz",
-      "integrity": "sha512-qhd+uVxxGLS50bN75POU2lHgqBhXBpRmdY/RnW6mwHGrs5SgiU0XoM0il3+RoAnvpscWG/5ZgEXvpm7ZvbNUWA==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-updater-opacity": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.10.1.tgz",
-      "integrity": "sha512-l1FOevfK9CMz9cBRT5prQpHACijYJ+3dHvIfx0Y5M5Do4etoT+PurZxDpQlQU6Yd0vXKm3r37paPiQbH5U3Vqg==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-updater-out-modes": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.10.1.tgz",
-      "integrity": "sha512-nzP/puePd97FlME9gzmjwdQWoqm+O7GtnkbD33a4NBlzJMgtjbGtmz/Tmc4hLicb/qwS5D8j9xvB+srsuxT7LA==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-updater-size": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-size/-/tsparticles-updater-size-2.10.1.tgz",
-      "integrity": "sha512-Kdtskqm0CRrlsovOsJLcS6NXF0alJ6NlwmW7oWnTK6EeLvEKaqisG/hjcFf+l7eXlmL8j9rYgh6wctaef6GBCw==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "node_modules/tsparticles-updater-stroke-color": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-stroke-color/-/tsparticles-updater-stroke-color-2.10.1.tgz",
-      "integrity": "sha512-iYLO1y9lH0bOxxE5gPRdsYR5UVIvtxWpera8C5JBXaHywROkJ8CSXxA2pIe01kUIwIOcOv8j26RJvKNdttv9kQ==",
-      "dependencies": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -16106,14 +15906,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/type-fest": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.2.0.tgz",
@@ -22319,14 +22111,6 @@
         }
       }
     },
-    "deep-eql": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
-      "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
-      "requires": {
-        "type-detect": "^4.0.0"
-      }
-    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -27650,15 +27434,6 @@
         "warning": "^4.0.3"
       }
     },
-    "react-particles": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/react-particles/-/react-particles-2.10.1.tgz",
-      "integrity": "sha512-7juKgk9LqMsSbfAPLbzU3kBfkmspRWrmJKbFxSpZuzXMrNizjEoQPCvGwwS1/I14w55gMz1pqzowDhB8xvmPSQ==",
-      "requires": {
-        "deep-eql": "^4.1.3",
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
     "react-resize-detector": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz",
@@ -29554,136 +29329,6 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
-    "tsparticles-engine": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.10.1.tgz",
-      "integrity": "sha512-DV2gYsbChyiXYIZYgnXtKHSAZdvnNMJpVf9Cw0gO7vjQ6pcgLAeyboRtvsaTfwKZNzzA7BeSf1lVhgGxorL4CQ=="
-    },
-    "tsparticles-move-base": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-move-base/-/tsparticles-move-base-2.10.1.tgz",
-      "integrity": "sha512-Q7JHIRPuJZw/Jz7vEeCePMR/69ace5rpWPqZ3+KLJnrtayxDEvj4tNRjnPtZusJ1Ve+wp0IxjOwrfGxeHxbmsQ==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "tsparticles-plugin-emitters": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-plugin-emitters/-/tsparticles-plugin-emitters-2.10.1.tgz",
-      "integrity": "sha512-SHuPH0qYA70gWNeOzn3DXk9W/IjTMtbeYhHWLOruTThrcLgBT4bRI5ooLnITjraMaTYf4FWdl7Mi/1MRkT5yUg==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "tsparticles-plugin-sounds": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-plugin-sounds/-/tsparticles-plugin-sounds-2.10.1.tgz",
-      "integrity": "sha512-bb4kQruLqK35mteVp0tvPJf+wOeRHDnQFKdApvfXSol/tKFp5vZCGDXLB55532Z3mQeIxsIvKdWGOYahhfwzuA==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "tsparticles-preset-fireworks": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-preset-fireworks/-/tsparticles-preset-fireworks-2.10.1.tgz",
-      "integrity": "sha512-ENSqjJU4JfznXo1kK5XGS48vbya/pkxB/RrauMT+YXkIRrqpz4+HrQ0XtwgQl8KQVYrteUfS8pcJLXewgnHxNQ==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1",
-        "tsparticles-move-base": "^2.10.1",
-        "tsparticles-plugin-emitters": "^2.10.1",
-        "tsparticles-plugin-sounds": "^2.10.1",
-        "tsparticles-shape-circle": "^2.10.1",
-        "tsparticles-shape-line": "^2.10.1",
-        "tsparticles-updater-angle": "^2.9.3",
-        "tsparticles-updater-color": "^2.10.1",
-        "tsparticles-updater-destroy": "^2.10.1",
-        "tsparticles-updater-life": "^2.10.1",
-        "tsparticles-updater-opacity": "^2.10.1",
-        "tsparticles-updater-out-modes": "^2.10.1",
-        "tsparticles-updater-size": "^2.10.1",
-        "tsparticles-updater-stroke-color": "^2.10.1"
-      }
-    },
-    "tsparticles-shape-circle": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-shape-circle/-/tsparticles-shape-circle-2.10.1.tgz",
-      "integrity": "sha512-oWfoF1rwBNDS8X8EBZVwt/UF9wBqh3OpV71LxCvTE9lh73FeUeQZ9aSW46t9XODIsNBMPbnAQNkP1wz4zNiw2A==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "tsparticles-shape-line": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-shape-line/-/tsparticles-shape-line-2.10.1.tgz",
-      "integrity": "sha512-3BWNjY0l1vsvKJvMMjkFNtCts3YPOnnd9w4d0d19XXv03jWNbhXC159Xeho/w+jlVcQWsExMxhVPlJYLOPa+Qw==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "tsparticles-updater-angle": {
-      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-angle/-/tsparticles-updater-angle-2.9.3.tgz",
-      "integrity": "sha512-Z8VLOw2UUxrvV3YH44My5kmeBUcJUHTSCMRUIqFvgvxDs0Q/g2eVWkr1L+Crpw6PE5FJMdDGWRjWwxMwNdVfuQ==",
-      "requires": {
-        "tsparticles-engine": "^2.9.3"
-      }
-    },
-    "tsparticles-updater-color": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-color/-/tsparticles-updater-color-2.10.1.tgz",
-      "integrity": "sha512-/7FCR/VzpOuiE0ztGEzzN4vNeLGbS9QUBX78OM59GDZujlHfjfWh1jqedyNXrhkb6mf08B3FZWiQWGysPeL31Q==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "tsparticles-updater-destroy": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-destroy/-/tsparticles-updater-destroy-2.10.1.tgz",
-      "integrity": "sha512-lFTyVgLNt4x1T4jBHRs+V8gFUQKwXkMbeNF5JUNwlrmGBr/Mx0A36XBcJ4BKZR5+jWO1C6I8jgYzIrFPx6Z+MQ==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "tsparticles-updater-life": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-life/-/tsparticles-updater-life-2.10.1.tgz",
-      "integrity": "sha512-qhd+uVxxGLS50bN75POU2lHgqBhXBpRmdY/RnW6mwHGrs5SgiU0XoM0il3+RoAnvpscWG/5ZgEXvpm7ZvbNUWA==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "tsparticles-updater-opacity": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.10.1.tgz",
-      "integrity": "sha512-l1FOevfK9CMz9cBRT5prQpHACijYJ+3dHvIfx0Y5M5Do4etoT+PurZxDpQlQU6Yd0vXKm3r37paPiQbH5U3Vqg==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "tsparticles-updater-out-modes": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.10.1.tgz",
-      "integrity": "sha512-nzP/puePd97FlME9gzmjwdQWoqm+O7GtnkbD33a4NBlzJMgtjbGtmz/Tmc4hLicb/qwS5D8j9xvB+srsuxT7LA==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "tsparticles-updater-size": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-size/-/tsparticles-updater-size-2.10.1.tgz",
-      "integrity": "sha512-Kdtskqm0CRrlsovOsJLcS6NXF0alJ6NlwmW7oWnTK6EeLvEKaqisG/hjcFf+l7eXlmL8j9rYgh6wctaef6GBCw==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
-    "tsparticles-updater-stroke-color": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/tsparticles-updater-stroke-color/-/tsparticles-updater-stroke-color-2.10.1.tgz",
-      "integrity": "sha512-iYLO1y9lH0bOxxE5gPRdsYR5UVIvtxWpera8C5JBXaHywROkJ8CSXxA2pIe01kUIwIOcOv8j26RJvKNdttv9kQ==",
-      "requires": {
-        "tsparticles-engine": "^2.10.1"
-      }
-    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -29719,11 +29364,6 @@
         "prelude-ls": "^1.2.1"
       }
     },
-    "type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g=="
-    },
     "type-fest": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.2.0.tgz",

package.json

@@ -61,7 +61,6 @@
     "react-dom": "^17.0.2",
     "react-longpressable": "^1.1.1",
     "react-markdown": "^8.0.3",
-    "react-particles": "^2.10.1",
     "react-string-replace": "^0.4.4",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.3.4",
@@ -75,8 +74,6 @@
     "secp256k1": "^4.0.3",
     "swr": "^1.3.0",
     "tldts": "^5.7.104",
-    "tsparticles-engine": "^2.10.1",
-    "tsparticles-preset-fireworks": "^2.10.1",
     "unist-util-visit": "^4.1.1",
     "url-unshort": "^6.1.0",
     "use-dark-mode": "^2.3.1",

pages/_app.js

@@ -13,7 +13,7 @@ import Moon from '../svgs/moon-fill.svg'
 import Layout from '../components/layout'
 import { ShowModalProvider } from '../components/modal'
 import ErrorBoundary from '../components/error-boundary'
-import { FireworksProvider } from '../components/fireworks'
+import { LightningProvider } from '../components/lightning'
 import { ServiceWorkerProvider } from '../components/serviceworker'
 
 function CSRWrapper ({ Component, apollo, ...props }) {
@@ -91,13 +91,13 @@ function MyApp ({ Component, pageProps: { session, ...props } }) {
               <MeProvider me={me}>
                 <ServiceWorkerProvider>
                   <PriceProvider price={price}>
-                    <FireworksProvider>
+                    <LightningProvider>
                       <ShowModalProvider>
                         {data || !apollo?.query
                           ? <Component {...props} />
                           : <CSRWrapper Component={Component} {...props} />}
                       </ShowModalProvider>
-                    </FireworksProvider>
+                    </LightningProvider>
                   </PriceProvider>
                 </ServiceWorkerProvider>
               </MeProvider>