Merge pull request #200 from TrustlessComputer/peter/main-lm

Peter/main lm

src/app/layout.tsx

@@ -13,6 +13,7 @@ import chakraThemes from '@/themes/chakra-themes';
 import { ChakraProvider } from '@chakra-ui/react';
 import dynamic from 'next/dynamic';
 import Script from 'next/script';
+import ModalManager from '@/components/ModalManage';
 
 export const metadata: Metadata = MetadataConfig;
 export const viewport: Viewport = ViewportConfig;
@@ -58,7 +59,10 @@ export default function RootLayout({
             <UserProvider>
               <XVerseProvider>
                 <UnisatProvider>
-                  <Hydrated>{children}</Hydrated>
+                  <Hydrated>
+                    <ModalManager />
+                    {children}
+                  </Hydrated>
                   <ToastOverlay />
                 </UnisatProvider>
               </XVerseProvider>

src/modules/PublicSale/aboveTheFold/index.tsx

@@ -43,7 +43,7 @@ const AboveTheFold = () => {
       <SimpleGrid
         className={`${s.content}`}
         gridTemplateColumns={{ lg: '1fr', xl: '6.5fr 3.5fr' }}
-        gap={[0, '20px']}
+        gap={[0, '40px']}
       >
         <Flex
           className={s.leftSection}

src/modules/PublicSale/activities/AcitivitiesVer2/index.tsx

@@ -11,6 +11,7 @@ interface ICTA {
 
 export interface GameItemProps {
   title: string;
+  subTitle?: string;
   desc: string | any;
   ctas?: ICTA[];
   banner?: string,
@@ -21,17 +22,32 @@ const GAME_LINK = {
   ARCA: "https://play.bitcoinarcade.xyz",
   NAKA: "https://nakachain.xyz/perpetual",
   MODULAR: "https://playmodular.com/workshop",
-  ALPHA: "https://app.alpha.wtf/"
+  ALPHA: "https://alpha.wtf/",
+  AI: "https://eternalai.org/",
 }
 
 
-export const NormalRow = (p: { key: string, value: string }) => {
+export const NormalRow = (p: { key: string, value?: string, mask?: boolean }) => {
+  if (p.mask) {
+
+    return (
+      `
+        <li>
+          <div style="display: flex; flex-direction: row">
+            <span style="font-size: 14px; line-height: 160%; color: white; font-weight: 700">${p.key}</span>
+            <div style="background-color: white; opacity: 0.3; width: 152px; height: 22px; margin-left: 8px" />
+          </div
+        </li>
+      `
+    )
+  }
+
   return (
     `
       <li>
         <p style="font-size: 14px; line-height: 160%">
           <span style="color: white; font-weight: 700">${p.key}</span>
-          <span style="color: white; font-weight: 400; opacity: 0.7; margin-left: 8px;">${p.value}</span>
+         <span style="color: white; font-weight: 400; opacity: 0.7; margin-left: 4px;">${p.value}</span>
         </p>
       </li>
     `
@@ -65,9 +81,9 @@ const ActivitiesVer2 = React.memo(() => {
         title: 'Gaming on Bitcoin',
         desc: `
           <ul>
-            ${NormalRow({ key: "Rewards:", value: "$1000 (1st place), $500 (2nd place), $250 (3rd place)" })}
-            ${NormalRow({ key: "Activities:", value: "Play fully on-chain games" })}
-            ${LinkRow({ key: "Where:", value: "Play fully on-chain games", link: GAME_LINK.ARCA })}
+            ${NormalRow({ key: "Activities:", value: "Play 8 different fully on-chain games to earn rewards." })}
+            ${NormalRow({ key: "Rewards:", value: "Each game: $100 (1st place), $50 (2nd place), $30 (3rd place), $10 (4th), $10 (5th)." })}
+            ${LinkRow({ key: "Bitcoin L2:", value: "Bitcoin Arcade", link: GAME_LINK.ARCA })}
           </ul>
         `,
         banner: 'banner-01.png',
@@ -77,9 +93,9 @@ const ActivitiesVer2 = React.memo(() => {
         title: 'DeFi on Bitcoin',
         desc: `
           <ul>
-            ${NormalRow({ key: "Rewards:", value: "$1000 (1st place), $500 (2nd place), $250 (3rd place)" })}
-            ${NormalRow({ key: "Activities:", value: "Play fully on-chain games" })}
-            ${LinkRow({ key: "Where:", value: "Naka", link: GAME_LINK.NAKA })}
+            ${NormalRow({ key: "Activities:", value: "Trade BRC-20 perpetual futures on-chain." })}
+            ${NormalRow({ key: "Rewards:", value: "$50 every 4 hours." })}
+            ${LinkRow({ key: "Bitcoin L2:", value: "Naka", link: GAME_LINK.NAKA })}
           </ul>
         `,
         banner: 'banner-02.png',
@@ -89,9 +105,9 @@ const ActivitiesVer2 = React.memo(() => {
         title: 'Modular on Bitcoin',
         desc: `
           <ul>
-            ${NormalRow({ key: "Rewards:", value: "$1000 (1st place), $500 (2nd place), $250 (3rd place)" })}
-            ${NormalRow({ key: "Activities:", value: "Play fully on-chain games" })}
-            ${LinkRow({ key: "Where:", value: "Modular", link: GAME_LINK.MODULAR })}
+            ${NormalRow({ key: "Activities:", value: "Learn about modular blockchain architecture via an exciting Lego game." })}
+            ${NormalRow({ key: "Rewards:", value: "Bitcoin Punk 686 (1st place), Rare Modular (2nd place), Common Modular (3rd place)." })}
+            ${LinkRow({ key: "Bitcoin L2:", value: "Modular", link: GAME_LINK.MODULAR })}
           </ul>
         `,
         banner: 'banner-03.png',
@@ -101,20 +117,22 @@ const ActivitiesVer2 = React.memo(() => {
         title: 'Running on Bitcoin',
         desc: `
           <ul>
-            ${NormalRow({ key: "Rewards:", value: "$1000 (1st place), $500 (2nd place), $250 (3rd place)" })}
-            ${NormalRow({ key: "Activities:", value: "Play fully on-chain games" })}
-            ${LinkRow({ key: "Where:", value: "Alpha", link: GAME_LINK.ALPHA })}
+            ${NormalRow({ key: "Activities:", value: "Participate in a charity run." })}
+            ${NormalRow({ key: "Rewards:", value: "For every km you run, you’ll raise $1 for charity and earn 10,000 Alpha points." })}
+            ${LinkRow({ key: "Bitcoin L2:", value: "Alpha", link: GAME_LINK.ALPHA })}
           </ul>
         `,
         banner: 'banner-04.png',
         link: GAME_LINK.ALPHA,
       },
       {
-        title: 'AI x Bitcoin',
+        title: 'AI on Bitcoin',
+        subTitle: " (Available on Monday)",
         desc: `
           <ul>
-            ${NormalRow({ key: "Rewards:", value: "$1000 (1st place), $500 (2nd place), $250 (3rd place)" })}
+            ${NormalRow({ key: "Rewards:", value: undefined, mask: true })}
             ${NormalRow({ key: "Activities:", value: "Play fully on-chain games" })}
+            ${LinkRow({ key: "Bitcoin L2:", value: "Eternal AI", link: GAME_LINK.AI })}
           </ul>
         `,
         banner: 'banner-05.png',
@@ -128,6 +146,7 @@ const ActivitiesVer2 = React.memo(() => {
         <div className={styles.container_item_header}>
           <Text color="white" fontSize="16px" fontWeight="500">
             {item.title}
+            {!!item.subTitle && <span style={{ fontWeight: "400" }}>{item.subTitle}</span>}
           </Text>
         </div>
         <div className={styles.container_item_content}>
@@ -158,10 +177,13 @@ const ActivitiesVer2 = React.memo(() => {
             BITCOIN L2 HOPING WEEKEND
           </Text>
           <Text color="white" fontSize={{ base: "14px", md: "16px" }} lineHeight="140%" opacity={0.7}>
-            Explore Bitcoin like never before. Hop from Bitcoin L2 to Bitcoin L2 to play onchain games, run for charity, trade BRC-20 futures, and more.
+            Explore Bitcoin like never before. Hop from one Bitcoin L2 to another to play on-chain games, trade BRC-20 futures, run for charity, learn about modular architecture, and more!
+          </Text>
+          <Text color="white" fontSize={{ base: "14px", md: "16px" }} lineHeight="140%" opacity={0.7}>
+            Time: from now to 3:30 am UTC Monday, Feb 5
           </Text>
         </Flex>
-        <Flex flexDir="column" gap="8px">
+        <Flex flexDir="column" gap="20px">
           {TASKS.map(renderItem)}
         </Flex>
       </Flex>

src/modules/PublicSale/activities/AcitivitiesVer2/styles.module.scss

@@ -20,17 +20,17 @@
   &_item {
     display: flex;
     flex-direction: column;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.30);
     background: rgba(255, 255, 255, 0.05);
     padding-bottom: 12px;
     ul {
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 8px;
     }
     &_header {
       padding: 10px 16px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
     }
     &_content {
       padding: 12px 12px 12px 34px;

src/modules/PublicSale/activities/index.tsx

@@ -99,7 +99,7 @@ Let's play to earn $ARCA testnet tokens, convertible to $ARCA mainnet tokens in
         ],
         desc:
           'NakaChain is a low-cost and lightning-fast Bitcoin Layer 2 blockchain designed for DeFi apps using Bitcoin for security, Polygon for data availability, and Optimism for execution.' +
-          "<br/><br/>Trade perpetual on $ORDI and $SATS to earn $50 every 4 hours.<br/>"
+          "<br/><br/>Trade perpetual on $BTC and $ORDI to earn $50 every 4 hours.<br/>"
           // '<br/><br/>Total rewards: <span style="color: #FA4E0E">$1,000</span>',
       },
       {

src/modules/PublicSale/dailyReward/index.tsx

@@ -29,7 +29,7 @@ const DailyReward = () => {
   return (
     <Flex direction={"column"} className={s.wrapper}>
       <HourlyReward />
-      <Flex className={s.container}>
+      {/*<Flex className={s.container}>
         <Flex justifyContent={"space-between"} alignItems={"center"}>
           <Text fontSize={"11px"} fontWeight={400} color={"rgba(255, 255, 255, 0.7)"}>Daily Reward</Text>
           <Flex gap={'6px'} className={s.timeWrapper}>
@@ -43,10 +43,10 @@ const DailyReward = () => {
             />
           </Flex>
         </Flex>
-        <RaffleButton />
+        <RaffleButton />*/}
         {/*<Divider />*/}
         {/*<RewardButton />*/}
-      </Flex>
+{/*      </Flex>*/}
     </Flex>
 
   )

src/modules/PublicSale/index.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import s from './styles.module.scss';
 import { Box } from '@chakra-ui/react';
@@ -10,21 +10,24 @@ import TopContent from '@/modules/PublicSale/topContent';
 import React from 'react';
 import IntroVideos from '@/modules/PublicSale/IntroVideos';
 import useTradeNakaEvent from '@/modules/PublicSale/activities/hooks/useTradeNakaEvent';
+import LuckyMoney from '@/modules/PublicSale/luckyMoney';
 
 const PublicSaleModule = () => {
   useTradeNakaEvent();
   return (
     <Box className={s.container}>
       <div className={s.contentTop}>
-        <div className='container'>
+        <div className="container">
           <TopContent />
+          <LuckyMoney />
           <AboveTheFold />
         </div>
       </div>
       <IntroVideos />
       <RoadmapModule />
       <Allocation />
       <FAQContent />
+      <LuckyMoney />
     </Box>
   );
 };