feat: Torque Raffles

package.json

@@ -112,6 +112,7 @@
     "recharts": "^2.15.3",
     "rxjs": "^7.5.6",
     "swr": "^2.2.0",
+    "tsparticles-confetti": "^2.12.0",
     "unionize": "^3.1.0",
     "uuid": "^9.0.1",
     "yup": "^0.32.11",

src/features/Torque/components/TorqueClaimRewards.tsx

@@ -1,11 +1,29 @@
-import { Heading, HStack, Stack, Text, VStack } from '@chakra-ui/react'
-import { useMemo } from 'react'
+import {
+  Button,
+  Heading,
+  HStack,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Modal,
+  Stack,
+  Text,
+  VStack,
+  ModalHeader,
+  useColorMode
+} from '@chakra-ui/react'
+import { useMemo, useState } from 'react'
 import TorqueOfferCard, { TorqueOfferCardSkeleton } from './TorqueOfferCard'
 import { colors } from '@/theme/cssVariables'
 import { TorqueCampaign } from '../types'
 import HistoryIcon from '@/icons/misc/History'
 import GiftIcon from '@/icons/misc/Gift'
 import { useWallet } from '@solana/wallet-adapter-react'
+import Image from 'next/image'
+import { genericConfetti } from './TorqueConfetti'
+import { twitterShareUrl } from '../utils'
+
 interface TorqueClaimRewardsProps {
   claimOffer: (offerId: string) => void
   campaigns: TorqueCampaign[]
@@ -15,6 +33,11 @@ interface TorqueClaimRewardsProps {
 
 export default function TorqueClaimRewards({ claimOffer, campaigns, loading, error }: TorqueClaimRewardsProps) {
   const { wallet } = useWallet()
+  const [isClaimModalOpen, setIsClaimModalOpen] = useState<boolean>(false)
+  const [shareAmount, setShareAmount] = useState<string>('')
+
+  const { colorMode } = useColorMode()
+  const isLight = colorMode === 'light'
 
   const activeCampaigns = useMemo(() => {
     return campaigns.filter((campaign) => campaign.offers.some((offer) => offer.status === 'ACTIVE'))
@@ -37,6 +60,12 @@ export default function TorqueClaimRewards({ claimOffer, campaigns, loading, err
       })
   }, [campaigns])
 
+  const handleOpenClaimModal = (amount: string) => {
+    setShareAmount(amount)
+    setIsClaimModalOpen(true)
+    genericConfetti()
+  }
+
   if (loading) {
     return (
       <VStack gap={6} p={0} w="full">
@@ -69,49 +98,106 @@ export default function TorqueClaimRewards({ claimOffer, campaigns, loading, err
   }
 
   return (
-    <VStack gap={6} p={0} w="full">
-      <Section title="Ready to Claim" icon={<GiftIcon />}>
-        {activeCampaigns.length > 0 ? (
-          activeCampaigns.map((campaign) => <TorqueOfferCard key={campaign.id} {...campaign} claimOffer={claimOffer} />)
-        ) : (
-          <Stack
-            w="full"
-            spacing={4}
-            p={3}
-            minH={24}
-            borderRadius="md"
-            bg={colors.backgroundDark}
-            opacity={0.7}
-            justify="center"
-            align="center"
-          >
-            <Text>{wallet?.adapter.publicKey ? "You don't have any available rewards." : 'Connect your wallet to view your rewards.'}</Text>
-          </Stack>
-        )}
-      </Section>
+    <>
+      <VStack gap={6} p={0} w="full">
+        <Section title="Ready to Claim" icon={<GiftIcon />}>
+          {activeCampaigns.length > 0 ? (
+            activeCampaigns.map((campaign) => (
+              <TorqueOfferCard key={campaign.id} {...campaign} claimOffer={claimOffer} handleOpenClaimModal={handleOpenClaimModal} />
+            ))
+          ) : (
+            <Stack
+              w="full"
+              spacing={4}
+              p={3}
+              minH={24}
+              borderRadius="md"
+              bg={colors.backgroundDark}
+              opacity={0.7}
+              justify="center"
+              align="center"
+            >
+              <Text>
+                {wallet?.adapter.publicKey ? "You don't have any available rewards." : 'Connect your wallet to view your rewards.'}
+              </Text>
+            </Stack>
+          )}
+        </Section>
 
-      <Section title="History" icon={<HistoryIcon />}>
-        {historicalCampaigns.length > 0 ? (
-          historicalCampaigns.map((campaign) => <TorqueOfferCard key={campaign.id} {...campaign} claimOffer={claimOffer} />)
-        ) : (
-          <Stack
-            w="full"
-            spacing={4}
-            p={3}
-            minH={24}
-            borderRadius="md"
-            bg={colors.backgroundDark}
-            opacity={0.7}
-            justify="center"
-            align="center"
-          >
-            <Text>
-              {wallet?.adapter.publicKey ? 'Looks like there are no historical rewards.' : 'Connect your wallet to see historical rewards.'}
-            </Text>
-          </Stack>
-        )}
-      </Section>
-    </VStack>
+        <Section title="History" icon={<HistoryIcon />}>
+          {historicalCampaigns.length > 0 ? (
+            historicalCampaigns.map((campaign) => (
+              <TorqueOfferCard key={campaign.id} {...campaign} claimOffer={claimOffer} handleOpenClaimModal={handleOpenClaimModal} />
+            ))
+          ) : (
+            <Stack
+              w="full"
+              spacing={4}
+              p={3}
+              minH={24}
+              borderRadius="md"
+              bg={colors.backgroundDark}
+              opacity={0.7}
+              justify="center"
+              align="center"
+            >
+              <Text>
+                {wallet?.adapter.publicKey
+                  ? 'Looks like there are no historical rewards.'
+                  : 'Connect your wallet to see historical rewards.'}
+              </Text>
+            </Stack>
+          )}
+        </Section>
+      </VStack>
+      {isClaimModalOpen && (
+        <Modal
+          isOpen={isClaimModalOpen}
+          onClose={() => {
+            setIsClaimModalOpen(false)
+            setShareAmount('')
+          }}
+        >
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>Hold Tight — Reward On The Way</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody>
+              <Stack justifyContent={'center'} alignItems={'center'} gap={4}>
+                <Image alt="Share Reward" src="/images/reward-icon.jpg" width={300} height={300} style={{ borderRadius: '8px' }} />
+                <Text textAlign={'center'}>
+                  Your reward&apos;s en route. While the system does it&apos;s magic, share your referral link on X for more chances to earn
+                  rewards!
+                </Text>
+                <HStack w="full" gap={2} justifyContent={'center'}>
+                  <Button
+                    size="md"
+                    w="full"
+                    flex={2}
+                    background={
+                      isLight
+                        ? 'linear-gradient(245.22deg, #DA2EEF 7.97%, #2B6AFF 49.17%, #39D0D8 92.1%)'
+                        : 'linear-gradient(245.22deg, #FF2FC8 7.97%, #FFB12B 49.17%, #D3D839 92.1%)'
+                    }
+                    _hover={{
+                      background: isLight
+                        ? 'linear-gradient(245.22deg, #DA2EEF 7.97%, #2B6AFF 49.17%, #39D0D8 92.1%)'
+                        : 'linear-gradient(245.22deg, #FF2FC8 7.97%, #FFB12B 49.17%, #D3D839 92.1%)'
+                    }}
+                    onClick={() => {
+                      const url = twitterShareUrl(shareAmount, wallet?.adapter.publicKey?.toString() ?? '')
+                      window.open(url, '_blank')
+                    }}
+                  >
+                    Share to Earn
+                  </Button>
+                </HStack>
+              </Stack>
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      )}
+    </>
   )
 }
 

src/features/Torque/components/TorqueConfetti.ts

@@ -0,0 +1,18 @@
+import { confetti } from 'tsparticles-confetti'
+
+type ConfettiOptions = Parameters<typeof confetti>[0]
+const confettiOptions: ConfettiOptions = {
+  // to layer on top of chakra overlay
+  zIndex: 10_000,
+  spread: 260,
+  ticks: 75,
+  gravity: 0.4,
+  decay: 0.95,
+  startVelocity: 30,
+  particleCount: 300,
+  scalar: 2
+}
+
+export const genericConfetti = () => {
+  return confetti(confettiOptions)
+}

src/features/Torque/components/TorqueOfferCard.tsx

@@ -8,15 +8,11 @@ import Tooltip from '@/components/Tooltip'
 import ClockIcon from '@/icons/misc/Clock'
 import GiftIcon from '@/icons/misc/Gift'
 import ShareIcon from '@/icons/misc/ShareIcon'
-import { displayNumber } from '../utils'
+import { displayNumber, twitterShareUrl } from '../utils'
+import { useWallet } from '@solana/wallet-adapter-react'
 interface TorqueOfferCardProps extends TorqueCampaign {
   claimOffer: (offerId: string) => void
-}
-
-const twitterShareUrl = (amount: string) => {
-  const safeAmount = encodeURIComponent(amount)
-  // TODO: Need to add the final twitter copy here
-  return `https://twitter.com/intent/tweet?text=Thanks%20%40RaydiumProtocol%20for%20my%20${safeAmount},%20see%20if%20you%20are%20eligible%20for%20a%20reward%20too%20https%3A//raydium.io/launchpad/`
+  handleOpenClaimModal: (amount: string) => void
 }
 
 export default function TorqueOfferCard({
@@ -30,12 +26,14 @@ export default function TorqueOfferCard({
   maxParticipants,
   startTime,
   endTime,
-  status
+  status,
+  handleOpenClaimModal
 }: TorqueOfferCardProps) {
   // State
   const [claiming, setClaiming] = useState<boolean>(false)
   const [showAdditionalOffers, setShowAdditionalOffers] = useState<boolean>(false)
   const explorerUrl = useAppStore((s) => s.explorerUrl)
+  const { wallet } = useWallet()
 
   const activeOffer = useMemo(() => {
     // A user should not be eligible for multiple active offers per campaign
@@ -55,6 +53,8 @@ export default function TorqueOfferCard({
       return
     }
 
+    handleOpenClaimModal(`${activeOffer.rewardPerUser} ${rewardDenomination}`)
+
     setClaiming(true)
     await claimOffer(activeOffer.id)
     setClaiming(false)
@@ -180,7 +180,10 @@ export default function TorqueOfferCard({
 
           {pendingOrClaimedOffer?.rewardPerUser ? (
             <Link
-              href={twitterShareUrl(`${pendingOrClaimedOffer.rewardPerUser} ${rewardDenomination}`)}
+              href={twitterShareUrl(
+                `${pendingOrClaimedOffer.rewardPerUser} ${rewardDenomination}`,
+                wallet?.adapter.publicKey?.toString() ?? ''
+              )}
               target="_blank"
               rel="noopener noreferrer"
             >

src/features/Torque/utils.ts

@@ -168,3 +168,8 @@ export function formatBadDateString(date: string, makeUtc = false): string {
 
   return makeUtc ? baseDate + 'T00:00:00Z' : baseDate
 }
+
+export const twitterShareUrl = (amount: string, wallet: string) => {
+  const safeAmount = encodeURIComponent(amount)
+  return `https://twitter.com/intent/post?text=Just%20claimed%20${safeAmount}%20for%20trading%20on%20LaunchLab%20%40RaydiumProtocol%20%F0%9F%92%AA%0A%0ABeen%20in%20the%20trenches%3F%20You%20may%20have%20rewards%20waiting.%20Trade%20using%20my%20link%20for%20more%20chances%20to%20win%20RAY%20%F0%9F%91%89%20https%3A%2F%2Fraydium.io%2Flaunchpad%2F%3Flreferrer%3D${wallet}`
+}