Fusion lunar NY (#402)

* chore: update animations for lunar NY * chore: update lottery banners * chore: update messages, ticket -> envelope * chore: update tweet copy * chore: add chinese tweet copy * chore: add chinese messages
bob-collective · Jan 20, 2025 · 98f65ff · 98f65ff
1 parent 35755c1
commit 98f65ff
Show file tree

Hide file tree

Showing 10 changed files with 6,654 additions and 226 deletions.
diff --git a/apps/evm/public/assets/lunar_lottery_cn.webp b/apps/evm/public/assets/lunar_lottery_cn.webp
diff --git a/apps/evm/public/assets/lunar_lottery_en.webp b/apps/evm/public/assets/lunar_lottery_en.webp
diff --git a/apps/evm/src/app/[lang]/fusion/components/LotterySections/LotteryModal/LotteryModal.tsx b/apps/evm/src/app/[lang]/fusion/components/LotterySections/LotteryModal/LotteryModal.tsx
@@ -18,9 +18,10 @@ import {
 } from '@gobob/ui';
 import { Plural, Trans } from '@lingui/macro';
 import { useParams } from 'next/navigation';
+import Lottie from 'lottie-react';
 
-import { Ticket } from '../icons';
-import confettiAnimationData from '../lotties/confettie.json';
+import foreworksAnimationData from '../lotties/fireworks.json';
+import envelopeAnimationData from '../lotties/envelope.json';
 import { useTimeToNextDraw } from '../hooks';
 
 import { StyledButton, StyledLottie, StyledPoints } from './LotteryModal.style';
@@ -35,8 +36,14 @@ type LotteryModalProps = LotteryStats & {
 };
 
 const MAX_TICKETS = 3;
-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 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 LotteryModal = ({
   isOpen,
@@ -67,15 +74,16 @@ 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 tickets drop in {timeToNextDraw}</Trans>
+              <Trans>New envelopes drop in {timeToNextDraw}</Trans>
             </Chip>
             <H3 align='center' size='2xl'>
               <Trans>
-                You need at least {Intl.NumberFormat(locale).format(minPointsToRoll)} Spice to participate in Lottery.
+                You need at least {Intl.NumberFormat(locale).format(minPointsToRoll)} Spice to participate in Lunar New
+                Year Lottery.
               </Trans>
             </H3>
             <P align='center' color='grey-50' size='s'>
-              <Trans>Harvest {pointsMissing} more Spice to play</Trans>
+              <Trans>Harvest {pointsMissing.toFixed(2)} more Spice to play</Trans>
             </P>
           </Flex>
         </ModalBody>
@@ -100,7 +108,7 @@ const LotteryModal = ({
   const isNotWinner = lotteryRollData !== undefined && lotteryRollData.winningPackageId === null;
 
   const getHeaderText = () => {
-    if (allRollsUsed && !lotteryRollData) return <Trans>You Have 0 Tickets</Trans>;
+    if (allRollsUsed && !lotteryRollData) return <Trans>You Have 0 Envelopes</Trans>;
 
     return (
       <>
@@ -118,7 +126,7 @@ const LotteryModal = ({
           <Span color='primary-500' size='unset'>
             {rollsRemaining}/3
           </Span>{' '}
-          <Plural one='Ticket' other='Tickets' value={rollsRemaining || 0} /> Remaining
+          <Plural one='Envelope' other='Envelopes' value={rollsRemaining || 0} /> Remaining
         </Trans>
       </>
     );
@@ -128,53 +136,56 @@ const LotteryModal = ({
     if (votesNotUsed)
       return (
         <Trans>
-          Each ticket is your chance to win big! Vote for your favourite app to receive 3 new tickets daily and boost
-          your chances.
+          Each envelope is your chance to win big! Vote for your favourite app to receive 3 new envelopes daily and
+          boost your chances.
         </Trans>
       );
 
     if (allTicketsUsed)
       return (
         <Trans>
-          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.
+          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.
         </Trans>
       );
 
     return (
       <Trans>
-        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.
+        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.
       </Trans>
     );
   };
 
   return (
     <Modal isDismissable isOpen={isOpen} size='s' onClose={onClose}>
-      <StyledLottie
-        key={lotteryRollData?.rollsRemaining}
-        autoplay
-        animationData={confettiAnimationData}
-        hidden={!isWinner}
-      />
+      {isWinner && (
+        <StyledLottie key={lotteryRollData?.rollsRemaining} autoplay animationData={foreworksAnimationData} />
+      )}
       <ModalBody padding='2xl'>
         <Flex alignItems='center' direction='column' gap='5xl'>
           <Chip background='grey-500' borderColor='grey-200' startAdornment={<SolidClock size='s' />}>
-            <Trans>new tickets drop in {timeToNextDraw}</Trans>
+            <Trans>New envelopes drop in {timeToNextDraw}</Trans>
           </Chip>
           <H3 align='center' size='2xl'>
             {getHeaderText()}
           </H3>
           {rollsNotUsed || votesNotUsed || notPlayed ? (
-            <Ticket size='3xl' />
+            <Lottie
+              key={lotteryRollData?.rollsRemaining}
+              autoplay
+              animationData={envelopeAnimationData}
+              loop={false}
+              style={{ position: 'relative', left: 10 }}
+            />
           ) : (
             <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'>
@@ -186,7 +197,7 @@ const LotteryModal = ({
         <Flex alignItems='stretch' gap='xl' justifyContent='space-between'>
           {!allVotesUsed && (
             <StyledButton elementType={Link} variant='outline' {...{ href: `/${lang}${RoutesPath.APPS}` }}>
-              <Trans>Get tickets</Trans>
+              <Trans>Get envelopes</Trans>
             </StyledButton>
           )}
           {allRollsUsed && (
@@ -198,7 +209,9 @@ const LotteryModal = ({
             <StyledButton
               elementType={Link}
               variant='outline'
-              {...{ href: `https://x.com/intent/tweet?text=${getPrefilledXText(user?.referral_code)}` }}
+              {...{
+                href: `https://x.com/intent/tweet?text=${getPrefilledXText(lang as Parameters<typeof getPrefilledXText>[0], user?.referral_code)}`
+              }}
             >
               <Trans>Share on X</Trans>
             </StyledButton>

diff --git a/apps/evm/src/app/[lang]/fusion/components/LotterySections/LotterySections.tsx b/apps/evm/src/app/[lang]/fusion/components/LotterySections/LotterySections.tsx
@@ -2,7 +2,8 @@ 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 lottery from '@public/assets/lottery.png';
+import lunarLotteryEN from '@public/assets/lunar_lottery_en.webp';
+import lunarLotteryCN from '@public/assets/lunar_lottery_cn.webp';
 import Image from 'next/image';
 import { useState } from 'react';
 import { useIsClient } from 'usehooks-ts';
@@ -14,6 +15,11 @@ 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();
@@ -35,10 +41,10 @@ const LotterySection = () => {
           padding='none'
         >
           <Image
-            alt={t(i18n)`Lottery`}
+            alt={t(i18n)`Lunar lottery`}
             placeholder='blur'
             sizes='100vw'
-            src={lottery}
+            src={lotteryBannerMapping[lang as keyof typeof lotteryBannerMapping]! || lunarLotteryEN}
             style={{
               width: '100%',
               height: 'auto'
@@ -52,22 +58,25 @@ const LotterySection = () => {
             </Chip>
             <H2 size='4xl'>
               {!isClient || (!address && isClient) || !user || isError || isLoading ? (
-                <Trans>Lottery</Trans>
+                <Trans>Lunar New Year Lottery</Trans>
               ) : (
                 <Trans>
                   <Span color='primary-500' size='unset'>
                     {lotteryStatsData?.rollsRemaining ?? 0}{' '}
-                    <Plural one='Ticket' other='Tickets' value={lotteryStatsData?.rollsRemaining || 0} />{' '}
+                    <Plural one='Envelope' other='Envelopes' value={lotteryStatsData?.rollsRemaining || 0} />{' '}
                   </Span>
                   Remaining
                 </Trans>
               )}
             </H2>
             <P color='grey-50'>
               <Trans>
-                Feeling lucky? Try your luck with the daily lottery!
+                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.
                 <br />
-                Participate in Fusion voting to receive 3 lottery tickets each day.
+                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.
               </Trans>
             </P>
           </Flex>

diff --git a/apps/evm/src/app/[lang]/fusion/components/LotterySections/icons/Ticket.tsx b/apps/evm/src/app/[lang]/fusion/components/LotterySections/icons/Ticket.tsx
diff --git a/apps/evm/src/app/[lang]/fusion/components/LotterySections/icons/index.tsx b/apps/evm/src/app/[lang]/fusion/components/LotterySections/icons/index.tsx