add win/loss modals

components/rewards/RewardsPage.tsx

@@ -1,10 +1,13 @@
 import Select from '@components/forms/Select'
 import Button, { LinkButton } from '@components/shared/Button'
+import Modal from '@components/shared/Modal'
 import { Disclosure } from '@headlessui/react'
 import { ChevronDownIcon, ClockIcon } from '@heroicons/react/20/solid'
 // import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
 import { useState } from 'react'
+import Particles from 'react-tsparticles'
+import { ModalProps } from 'types/modal'
 
 const tiers = ['Seed', 'Mango', 'Whale', 'Bot']
 
@@ -196,6 +199,8 @@ const Season = () => {
 }
 
 const Claim = () => {
+  const [showWinModal, setShowWinModal] = useState(false)
+  const [showLossModal, setShowLossModal] = useState(false)
   return (
     <>
       <div className="flex items-center justify-center bg-th-bkg-3 px-4 py-3">
@@ -232,7 +237,11 @@ const Claim = () => {
                 height={140}
                 alt="Reward"
               />
-              <Button className="mt-8" size="large">
+              <Button
+                className="mt-8"
+                size="large"
+                onClick={() => setShowLossModal(true)}
+              >
                 Open Box
               </Button>
             </div>
@@ -244,13 +253,29 @@ const Claim = () => {
                 height={140}
                 alt="Reward"
               />
-              <Button className="mt-8" size="large">
+              <Button
+                className="mt-8"
+                onClick={() => setShowWinModal(true)}
+                size="large"
+              >
                 Open Box
               </Button>
             </div>
           </div>
         </div>
       </div>
+      {showWinModal ? (
+        <ClaimWinModal
+          isOpen={showWinModal}
+          onClose={() => setShowWinModal(false)}
+        />
+      ) : null}
+      {showLossModal ? (
+        <ClaimLossModal
+          isOpen={showLossModal}
+          onClose={() => setShowLossModal(false)}
+        />
+      ) : null}
     </>
   )
 }
@@ -314,3 +339,129 @@ const Badge = ({
     </div>
   )
 }
+
+const particleOptions = {
+  detectRetina: true,
+  emitters: {
+    life: {
+      count: 60,
+      delay: 0,
+      duration: 0.1,
+    },
+    startCount: 0,
+    particles: {
+      shape: {
+        type: ['character', 'character', 'character', 'character', 'character'],
+        options: {
+          character: [
+            {
+              fill: true,
+              font: 'Verdana',
+              value: ['🍀', '🦄', '⭐️', '🎉', '💸'],
+              style: '',
+              weight: 400,
+            },
+          ],
+        },
+      },
+      opacity: {
+        value: 1,
+      },
+      rotate: {
+        value: {
+          min: 0,
+          max: 360,
+        },
+        direction: 'random',
+        animation: {
+          enable: true,
+          speed: 30,
+        },
+      },
+      tilt: {
+        direction: 'random',
+        enable: true,
+        value: {
+          min: 0,
+          max: 360,
+        },
+        animation: {
+          enable: true,
+          speed: 30,
+        },
+      },
+      size: {
+        value: 16,
+      },
+      roll: {
+        darken: {
+          enable: true,
+          value: 25,
+        },
+        enable: true,
+        speed: {
+          min: 5,
+          max: 15,
+        },
+      },
+      move: {
+        angle: 10,
+        attract: {
+          rotate: {
+            x: 600,
+            y: 1200,
+          },
+        },
+        direction: 'bottom',
+        enable: true,
+        speed: { min: 8, max: 16 },
+        outMode: 'destroy',
+      },
+    },
+    position: {
+      x: { random: true },
+      y: 0,
+    },
+  },
+}
+
+const ClaimWinModal = ({ isOpen, onClose }: ModalProps) => {
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <div className="mb-6 text-center">
+          <h2 className="mb-6">You&apos;re a winner!</h2>
+          <div
+            className="mx-auto mb-3 h-48 w-48 rounded-lg border border-th-success"
+            style={{
+              boxShadow: '0px 0px 8px 0px var(--success)',
+            }}
+          ></div>
+          <p className="text-lg">Prize name goes here</p>
+        </div>
+        <Button className="w-full" size="large">
+          Claim Prize
+        </Button>
+      </Modal>
+      <div className="relative z-50">
+        <Particles id="tsparticles" options={particleOptions} />
+      </div>
+    </>
+  )
+}
+
+const ClaimLossModal = ({ isOpen, onClose }: ModalProps) => {
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <div className="mb-6 text-center">
+          <h2 className="mb-2">Better luck next time</h2>
+          <p className="text-lg">This box is empty</p>
+        </div>
+        <Button className="w-full" onClick={onClose} size="large">
+          Close
+        </Button>
+      </Modal>
+    </>
+  )
+}