Revert "Fusion lunar NY (#402)"

apps/evm/src/app/[lang]/fusion/components/LotterySections/LotteryModal/LotteryModal.tsx

@@ -18,10 +18,9 @@ import {
 } from '@gobob/ui';
 import { Plural, Trans } from '@lingui/macro';
 import { useParams } from 'next/navigation';
-import Lottie from 'lottie-react';
 
-import foreworksAnimationData from '../lotties/fireworks.json';
-import envelopeAnimationData from '../lotties/envelope.json';
+import { Ticket } from '../icons';
+import confettiAnimationData from '../lotties/confettie.json';
 import { useTimeToNextDraw } from '../hooks';
 
 import { StyledButton, StyledLottie, StyledPoints } from './LotteryModal.style';
@@ -36,14 +35,8 @@ type LotteryModalProps = LotteryStats & {
 };
 
 const MAX_TICKETS = 3;
-
-const prefilledTextsMapping = {
-  en: "I just got a Red Envelope 🧧 from @build_on_bob's fusion lottery.%0A%0AWelcome the Year of Snake 🐍%0A%0AGet yours",
-  zh: '我剛從 @build_on_bob 那裡領取了一個紅包 🧧%0A%0A喜迎蛇年 🐍%0A%0A快來領取你的紅包吧'
-};
-
-const getPrefilledXText = (lang: 'en' | 'zh', refCode: string | undefined) =>
-  `${prefilledTextsMapping[lang]} https://app.gobob.xyz/?refCode=${refCode || ''}`;
+const getPrefilledXText = (refCode: string | undefined) =>
+  `I just won Spice in the @build_on_bob Fusion Lottery!%0A%0AJoin me in the Final Season and explore the Hybrid L2 ecosystem.%0A%0AHere's my referral link https://app.gobob.xyz/?refCode=${refCode || ''}`;
 
 const LotteryModal = ({
   isOpen,
@@ -74,12 +67,11 @@ const LotteryModal = ({
         <ModalBody padding='2xl'>
           <Flex alignItems='center' direction='column' gap='5xl'>
             <Chip background='grey-500' borderColor='grey-200' startAdornment={<SolidClock size='s' />}>
-              <Trans>New envelopes drop in {timeToNextDraw}</Trans>
+              <Trans>new tickets drop in {timeToNextDraw}</Trans>
             </Chip>
             <H3 align='center' size='2xl'>
               <Trans>
-                You need at least {Intl.NumberFormat(locale).format(minPointsToRoll)} Spice to participate in Lunar New
-                Year Lottery.
+                You need at least {Intl.NumberFormat(locale).format(minPointsToRoll)} Spice to participate in Lottery.
               </Trans>
             </H3>
             <P align='center' color='grey-50' size='s'>
@@ -108,7 +100,7 @@ const LotteryModal = ({
   const isNotWinner = lotteryRollData !== undefined && lotteryRollData.winningPackageId === null;
 
   const getHeaderText = () => {
-    if (allRollsUsed && !lotteryRollData) return <Trans>You Have 0 Envelopes</Trans>;
+    if (allRollsUsed && !lotteryRollData) return <Trans>You Have 0 Tickets</Trans>;
 
     return (
       <>
@@ -126,7 +118,7 @@ const LotteryModal = ({
           <Span color='primary-500' size='unset'>
             {rollsRemaining}/3
           </Span>{' '}
-          <Plural one='Envelope' other='Envelopes' value={rollsRemaining || 0} /> Remaining
+          <Plural one='Ticket' other='Tickets' value={rollsRemaining || 0} /> Remaining
         </Trans>
       </>
     );
@@ -136,54 +128,53 @@ const LotteryModal = ({
     if (votesNotUsed)
       return (
         <Trans>
-          Each envelope is your chance to win big! Vote for your favourite app to receive 3 new envelopes daily and
-          boost your chances.
+          Each ticket is your chance to win big! Vote for your favourite app to receive 3 new tickets daily and boost
+          your chances.
         </Trans>
       );
 
     if (allTicketsUsed)
       return (
         <Trans>
-          You&apos;ve used all your envelopes for today, new envelopes will be available once the timer resets! Remember
-          to participate in Weekly Fusion Voting to be eligible for daily envelopes.
+          You&apos;ve used all your tickets for today, new tickets will be available once the timer resets! Remember to
+          participate in Weekly Fusion Voting to be eligible for daily tickets.
         </Trans>
       );
 
     return (
       <Trans>
-        Maximize your chances by using all your envelopes before the countdown resets. Don&apos;t forget to participate
-        in Weekly Fusion Voting to claim your 3 Lottery envelopes daily.
+        Maximize your chances by using all your tickets before the countdown resets. Don&apos;t forget to participate in
+        Weekly Fusion Voting to claim your 3 Lottery tickets daily.
       </Trans>
     );
   };
 
   return (
     <Modal isDismissable isOpen={isOpen} size='s' onClose={onClose}>
-      {isWinner && <StyledLottie autoplay animationData={structuredClone(foreworksAnimationData)} />}
+      <StyledLottie
+        key={lotteryRollData?.rollsRemaining}
+        autoplay
+        animationData={confettiAnimationData}
+        hidden={!isWinner}
+      />
       <ModalBody padding='2xl'>
         <Flex alignItems='center' direction='column' gap='5xl'>
           <Chip background='grey-500' borderColor='grey-200' startAdornment={<SolidClock size='s' />}>
-            <Trans>New envelopes drop in {timeToNextDraw}</Trans>
+            <Trans>new tickets drop in {timeToNextDraw}</Trans>
           </Chip>
           <H3 align='center' size='2xl'>
             {getHeaderText()}
           </H3>
           {rollsNotUsed || votesNotUsed || notPlayed ? (
-            <Lottie
-              key={lotteryRollData?.rollsRemaining}
-              autoplay
-              animationData={envelopeAnimationData}
-              loop={false}
-              style={{ position: 'relative', left: 10 }}
-            />
+            <Ticket size='3xl' />
           ) : (
             <StyledPoints>
               <Spice size='3xl' /> {Intl.NumberFormat(locale).format(lotteryRollData?.prize || 0)}
             </StyledPoints>
           )}
           {isWinner && (
             <H4 align='center' size='lg'>
-              Share it on X with your referral link.
+              Share it on X with your referral link!
             </H4>
           )}
           <P align='center' color='grey-50' size='s'>
@@ -195,7 +186,7 @@ const LotteryModal = ({
         <Flex alignItems='stretch' gap='xl' justifyContent='space-between'>
           {!allVotesUsed && (
             <StyledButton elementType={Link} variant='outline' {...{ href: `/${lang}${RoutesPath.APPS}` }}>
-              <Trans>Get envelopes</Trans>
+              <Trans>Get tickets</Trans>
             </StyledButton>
           )}
           {allRollsUsed && (
@@ -207,9 +198,7 @@ const LotteryModal = ({
             <StyledButton
               elementType={Link}
               variant='outline'
-              {...{
-                href: `https://x.com/intent/tweet?text=${getPrefilledXText(lang as Parameters<typeof getPrefilledXText>[0], user?.referral_code)}`
-              }}
+              {...{ href: `https://x.com/intent/tweet?text=${getPrefilledXText(user?.referral_code)}` }}
             >
               <Trans>Share on X</Trans>
             </StyledButton>

apps/evm/src/app/[lang]/fusion/components/LotterySections/LotterySections.tsx

@@ -2,8 +2,7 @@ import { Chip, Flex, H2, P, Skeleton, SolidClock, Span } from '@gobob/ui';
 import { Plural, t, Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { useParams } from 'next/navigation';
-import lunarLotteryEN from '@public/assets/lunar_lottery_en.webp';
-import lunarLotteryCN from '@public/assets/lunar_lottery_cn.webp';
+import lottery from '@public/assets/lottery.png';
 import Image from 'next/image';
 import { useState } from 'react';
 import { useIsClient } from 'usehooks-ts';
@@ -15,11 +14,6 @@ import { useTimeToNextDraw } from './hooks';
 
 import { useGetUser, useLotteryStats } from '@/hooks';
 
-const lotteryBannerMapping = {
-  en: lunarLotteryEN,
-  zh: lunarLotteryCN
-};
-
 const LotterySection = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { address } = useAccount();
@@ -41,10 +35,10 @@ const LotterySection = () => {
           padding='none'
         >
           <Image
-            alt={t(i18n)`Lunar lottery`}
+            alt={t(i18n)`Lottery`}
             placeholder='blur'
             sizes='100vw'
-            src={lotteryBannerMapping[lang as keyof typeof lotteryBannerMapping]! || lunarLotteryEN}
+            src={lottery}
             style={{
               width: '100%',
               height: 'auto'
@@ -58,25 +52,22 @@ const LotterySection = () => {
             </Chip>
             <H2 size='4xl'>
               {!isClient || (!address && isClient) || !user || isError || isLoading ? (
-                <Trans>Lunar New Year Lottery</Trans>
+                <Trans>Lottery</Trans>
               ) : (
                 <Trans>
                   <Span color='primary-500' size='unset'>
                     {lotteryStatsData?.rollsRemaining ?? 0}{' '}
-                    <Plural one='Envelope' other='Envelopes' value={lotteryStatsData?.rollsRemaining || 0} />{' '}
+                    <Plural one='Ticket' other='Tickets' value={lotteryStatsData?.rollsRemaining || 0} />{' '}
                   </Span>
                   Remaining
                 </Trans>
               )}
             </H2>
             <P color='grey-50'>
               <Trans>
-                Claim your red envelope to win Spice and celebrate the Lunar New Year with BOB.
-                <br />
-                Participate in Fusion voting to receive 3 envelopes daily until January 29th.
+                Feeling lucky? Try your luck with the daily lottery!
                 <br />
-                Win 888, 168 or 88 Spice with every envelope. Then share your winnings on X and follow the campaign
-                rules for a chance to win an extra 100,000 Spice.
+                Participate in Fusion voting to receive 3 lottery tickets each day.
               </Trans>
             </P>
           </Flex>

apps/evm/src/app/[lang]/fusion/components/LotterySections/icons/Ticket.tsx

@@ -0,0 +1,15 @@
+import { forwardRef } from 'react';
+import { Icon, IconProps } from '@gobob/ui';
+
+const Ticket = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon ref={ref} fill='none' viewBox='0 0 58 46' xmlns='http://www.w3.org/2000/svg' {...props}>
+    <path
+      d='M39.1434 36.2667L29.0001 29.75L18.8567 36.2667L21.9167 24.5933L12.5951 17L24.6367 16.2633L29.0001 5.1L33.3634 16.2633L45.4051 17L36.0834 24.5933M51.6668 22.6667C51.6668 21.1638 52.2638 19.7224 53.3265 18.6597C54.3892 17.597 55.8305 17 57.3334 17V5.66667C57.3334 4.16377 56.7364 2.72243 55.6737 1.65973C54.611 0.597022 53.1696 0 51.6668 0H6.33342C4.83052 0 3.38918 0.597022 2.32648 1.65973C1.26377 2.72243 0.666748 4.16377 0.666748 5.66667V17C2.16964 17 3.61098 17.597 4.67369 18.6597C5.73639 19.7224 6.33342 21.1638 6.33342 22.6667C6.33342 24.1696 5.73639 25.6109 4.67369 26.6736C3.61098 27.7363 2.16964 28.3333 0.666748 28.3333V39.6667C0.666748 41.1696 1.26377 42.6109 2.32648 43.6736C3.38918 44.7363 4.83052 45.3333 6.33342 45.3333H51.6668C53.1696 45.3333 54.611 44.7363 55.6737 43.6736C56.7364 42.6109 57.3334 41.1696 57.3334 39.6667V28.3333C55.8305 28.3333 54.3892 27.7363 53.3265 26.6736C52.2638 25.6109 51.6668 24.1696 51.6668 22.6667Z'
+      fill='white'
+    />
+  </Icon>
+));
+
+Ticket.displayName = 'Ticket';
+
+export { Ticket };

apps/evm/src/app/[lang]/fusion/components/LotterySections/icons/index.tsx

@@ -0,0 +1 @@
+export { Ticket } from './Ticket';