chore: remove react-confetti (#5443)

package.json

@@ -201,7 +201,6 @@
     "qs": "^6.9.4",
     "rc-slider": "^10.0.1",
     "react": "^18.2.0",
-    "react-confetti": "^6.0.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.8",
     "react-ga4": "^1.4.1",

src/components/Confetti/index.tsx

@@ -1,32 +0,0 @@
-import ReactConfetti from 'react-confetti'
-
-import { useWindowSize } from '../../hooks/useWindowSize'
-
-// eslint-disable-next-line react/prop-types
-export default function Confetti({ start, variant }: { start: boolean; variant?: string }) {
-  const { width, height } = useWindowSize()
-
-  const _variant = variant ? variant : height && width && height > 1.5 * width ? 'bottom' : variant
-
-  return start && width && height ? (
-    <ReactConfetti
-      style={{ zIndex: 1401 }}
-      numberOfPieces={400}
-      recycle={false}
-      run={true}
-      width={width}
-      height={height}
-      confettiSource={{
-        h: height,
-        w: width,
-        x: 0,
-        y: _variant === 'top' ? height * 0.25 : _variant === 'bottom' ? height * 0.75 : height * 0.5,
-      }}
-      initialVelocityX={15}
-      initialVelocityY={30}
-      gravity={0.45}
-      tweenDuration={100}
-      wind={0.05}
-    />
-  ) : null
-}

src/components/claim/AddressClaimModal.tsx

@@ -17,7 +17,6 @@ import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import AddressInputPanel from '../AddressInputPanel'
 import { ButtonPrimary } from '../Button'
 import { AutoColumn, ColumnCenter } from '../Column'
-import Confetti from '../Confetti'
 import { Break, CardSection, DataCard } from '../earn/styled'
 import { CardBGImage, CardBGImageSmaller, CardNoise } from '../earn/styled'
 import Modal from '../Modal'
@@ -97,7 +96,6 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
 
   return (
     <Modal isOpen={isOpen} onDismiss={wrappedOnDismiss} maxHeight={90}>
-      <Confetti start={Boolean(isOpen && claimConfirmed && attempting)} />
       {!attempting && (
         <ContentWrapper gap="lg">
           <ModalUpper>

src/components/claim/ClaimModal.tsx

@@ -17,7 +17,6 @@ import { CloseIcon, CustomLightSpinner, ExternalLink, ThemedText, UniTokenAnimat
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { ButtonPrimary } from '../Button'
 import { AutoColumn, ColumnCenter } from '../Column'
-import Confetti from '../Confetti'
 import { Break, CardBGImage, CardBGImageSmaller, CardNoise, CardSection, DataCard } from '../earn/styled'
 import Modal from '../Modal'
 import { RowBetween } from '../Row'
@@ -92,7 +91,6 @@ export default function ClaimModal() {
 
   return (
     <Modal isOpen={isOpen} onDismiss={toggleClaimModal} maxHeight={90}>
-      <Confetti start={Boolean(isOpen && claimConfirmed)} />
       {!attempting && !claimConfirmed && (
         <ContentWrapper gap="lg">
           <ModalUpper>

yarn.lock

@@ -14815,13 +14815,6 @@ react-clientside-effect@^1.2.2:
   dependencies:
     "@babel/runtime" "^7.12.13"
 
-react-confetti@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/react-confetti/-/react-confetti-6.0.1.tgz"
-  integrity sha512-ZpOTBrqSNhWE4rRXCZ6E6U+wGd7iYHF5MGrqwikoiBpgBq9Akdu0DcLW+FdFnLjyZYC+VfAiV2KeFgYRMyMrkA==
-  dependencies:
-    tween-functions "^1.2.0"
-
 react-dev-utils@^11.0.3:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
@@ -17143,11 +17136,6 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-tween-functions@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz"
-  integrity sha1-GuOlDnxguz3vd06scHrLynO7w/8=
-
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"