Production Release

jumperexchange · Sep 9, 2024 · 5fad3d8 · 5fad3d8 · vercel · Sep 9, 2024
2 parents f69ef09 + 89837b9
commit 5fad3d8
Show file tree

Hide file tree

Showing 111 changed files with 4,282 additions and 423 deletions.
diff --git a/src/app/[lng]/quests/[slug]/page.tsx b/src/app/[lng]/quests/[slug]/page.tsx
@@ -0,0 +1,19 @@
+import { getQuestBySlug } from 'src/app/lib/getQuestBySlug';
+import QuestPage from 'src/app/ui/quests/QuestMissionPage';
+
+// todo: adjust metadata for quests-page
+// export async function generateMetadata(): Promise<Metadata> {
+//   return {
+//     title: 'Jumper | Quests',
+//     description: 'Dive into the Quests',
+//     alternates: {
+//       canonical: `${process.env.NEXT_PUBLIC_SITE_URL}/quests/`,
+//     },
+//   };
+// }
+
+export default async function Page({ params }: { params: { slug: string } }) {
+  const { data, url } = await getQuestBySlug(params.slug);
+
+  return <QuestPage quest={data?.data?.[0]} url={url} />;
+}
diff --git a/src/app/[lng]/quests/layout.tsx b/src/app/[lng]/quests/layout.tsx
@@ -0,0 +1,22 @@
+import { ThemeProviderV2 } from '@/providers/ThemeProviderV2';
+import { ThemeProvider as NextThemeProvider } from 'next-themes';
+import React from 'react';
+import { Layout } from 'src/Layout';
+
+export default async function PartnerThemeLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <NextThemeProvider
+      themes={['dark', 'light']}
+      enableSystem
+      enableColorScheme
+    >
+      <ThemeProviderV2>
+        <Layout>{children}</Layout>
+      </ThemeProviderV2>
+    </NextThemeProvider>
+  );
+}
diff --git a/src/app/ui/quests/QuestMissionPage.tsx b/src/app/ui/quests/QuestMissionPage.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import { QuestsMissionPage } from 'src/components/Quests/QuestPage/QuestsMissionPage';
+import { JUMPER_LOYALTY_PATH } from 'src/const/urls';
+
+const QuestPage = ({ quest, url }: any) => {
+  return (
+    <QuestsMissionPage quest={quest} baseUrl={url} path={JUMPER_LOYALTY_PATH} />
+  );
+};
+
+export default QuestPage;
diff --git a/src/app/ui/quests/Quests.tsx b/src/app/ui/quests/Quests.tsx
@@ -0,0 +1,9 @@
+'use client';
+
+import { Quests as QuestsComponent } from 'src/components/Quests';
+
+const Quests = () => {
+  return <QuestsComponent />;
+};
+
+export default Quests;
diff --git a/src/components/Alerts/ChainAlert.tsx b/src/components/Alerts/ChainAlert.tsx
@@ -4,6 +4,8 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InfoAlert } from '.';
 import { InfoAlertClickable } from './InfoAlert/InfoAlertClickable';
+import { useCheckWalletLinking } from 'src/hooks/useCheckWalletLinking';
+import { useAccounts } from 'src/hooks/useAccounts';
 
 export const ChainAlert = () => {
   const { t } = useTranslation();
@@ -14,12 +16,17 @@ export const ChainAlert = () => {
   const [title, setTitle] = useState<string>('');
   const [subtitle, setSubtitle] = useState<string>('');
   const [buttonText, setButtontext] = useState<string>('');
+  const { account } = useAccounts();
+  const { isSuccess: isWalletCheckSuccess, isWalletLinked } =
+    useCheckWalletLinking({
+      userAddress: account?.address,
+      checkWalletLinking:
+        sourceChainToken?.chainId === ChainId.SEI ||
+        destinationChainToken?.chainId === ChainId.SEI,
+    });
 
   useEffect(() => {
-    if (
-      sourceChainToken?.chainId === ChainId.SEI ||
-      destinationChainToken?.chainId === ChainId.SEI
-    ) {
+    if (!isWalletLinked && isWalletCheckSuccess) {
       setIsClickable(true);
       setChainId(ChainId.SEI);
       setTitle(t('seiAlert.title'));
@@ -29,7 +36,7 @@ export const ChainAlert = () => {
       setIsClickable(false);
       setChainId(0);
     }
-  }, [destinationChainToken, sourceChainToken, t]);
+  }, [destinationChainToken, sourceChainToken, t, isWalletLinked]);
 
   return (
     <>

diff --git a/src/components/Blog/BlogArticle/BlogArticle.style.ts b/src/components/Blog/BlogArticle/BlogArticle.style.ts
@@ -170,11 +170,11 @@ export const BlogArticleContentContainer = styled(Box)(({ theme }) => ({
   },
 
   [theme.breakpoints.up('sm' as Breakpoint)]: {
-    margin: theme.spacing(4, 'auto'),
+    margin: theme.spacing(0, 'auto'),
     maxWidth: '100%',
   },
   [theme.breakpoints.up('md' as Breakpoint)]: {
-    margin: theme.spacing(8, 'auto'),
+    margin: theme.spacing(0, 'auto'),
     maxWidth: '100%',
   },
   [theme.breakpoints.up('lg' as Breakpoint)]: {
@@ -195,10 +195,10 @@ export const BlogMetaContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'flex-start',
-  marginTop: theme.spacing(8),
   gap: theme.spacing(2),
   flexDirection: 'column',
   [theme.breakpoints.up('sm' as Breakpoint)]: {
+    marginTop: theme.spacing(8),
     alignItems: 'center',
     flexDirection: 'row',
   },

diff --git a/src/components/Blog/BlogArticle/BlogArticle.tsx b/src/components/Blog/BlogArticle/BlogArticle.tsx
@@ -75,58 +75,72 @@ export const BlogArticle = ({
   return (
     <>
       <BlogArticleContainer>
-        <BlogArticleTopHeader>
-          {!!tags?.data[0]?.attributes.Title ? (
-            <Tag
-              color={tags.data[0]?.attributes.TextColor}
-              backgroundColor={tags.data[0]?.attributes.BackgroundColor}
-              component="span"
-              variant="bodyMediumStrong"
-              key={`blog-article-tag-${tags.data[0]?.id}`}
-            >
-              {tags.data[0].attributes?.Title}
-            </Tag>
-          ) : (
-            <BlogArticleHeaderTagSkeleton variant="rectangular" />
-          )}
-          {!!createdAt ? (
-            <BlogArticleHeaderMeta>
-              <BlogArticleHeaderMetaDate variant="bodyXSmall" as="span">
-                {formatDate(publishedAt || createdAt)}
-              </BlogArticleHeaderMetaDate>
-              <span>{t('blog.minRead', { minRead: minRead })}</span>
-            </BlogArticleHeaderMeta>
-          ) : (
-            <BlogArticleMetaSkeleton variant="text" />
-          )}
-        </BlogArticleTopHeader>
-        {title ? (
-          <BlogArticleTitle variant="h1">{title}</BlogArticleTitle>
-        ) : (
-          <BlogArticleTitleSkeleton />
-        )}
-        <BlogMetaContainer>
-          <BlogAuthorContainer>
-            {author?.data?.attributes?.Avatar.data?.attributes?.url ? (
-              <BlogAuthorAvatar
-                src={`${baseUrl}${author.data.attributes.Avatar.data.attributes.url}`}
-                alt="author-avatar"
-              />
+        <BlogArticleContentContainer sx={{ marginTop: 0 }}>
+          <BlogArticleTopHeader>
+            {tags?.data[0]?.attributes.Title ? (
+              <Tag
+                color={tags.data[0]?.attributes.TextColor}
+                backgroundColor={tags.data[0]?.attributes.BackgroundColor}
+                component="span"
+                variant="bodyMediumStrong"
+                key={`blog-article-tag-${tags.data[0]?.id}`}
+              >
+                {tags.data[0].attributes?.Title}
+              </Tag>
             ) : (
-              <BlogAuthorAvatarSkeleton variant="rounded" />
+              <BlogArticleHeaderTagSkeleton variant="rectangular" />
             )}
-            {author?.data ? (
-              <BlogArticlAuthorName variant="bodyXSmallStrong" component="span">
-                {author.data?.attributes.Name}
-              </BlogArticlAuthorName>
+            {createdAt ? (
+              <BlogArticleHeaderMeta>
+                <BlogArticleHeaderMetaDate variant="bodyXSmall" as="span">
+                  {formatDate(publishedAt || createdAt)}
+                </BlogArticleHeaderMetaDate>
+                <span>{t('blog.minRead', { minRead: minRead })}</span>
+              </BlogArticleHeaderMeta>
             ) : (
-              <BlogArticlAuthorNameSkeleton variant="text" />
+              <BlogArticleMetaSkeleton variant="text" />
             )}
-          </BlogAuthorContainer>
-          <ShareArticleIcons title={title} slug={slug} />
-        </BlogMetaContainer>
-      </BlogArticleContainer>
+          </BlogArticleTopHeader>
 
+          {title ? (
+            <BlogArticleTitle variant="h1">{title}</BlogArticleTitle>
+          ) : (
+            <BlogArticleTitleSkeleton />
+          )}
+
+          {subtitle ? (
+            <BlogArticleSubtitle variant="headerMedium" as="h4">
+              {subtitle}
+            </BlogArticleSubtitle>
+          ) : (
+            <BlogArticleSubtitleSkeleton variant="text" />
+          )}
+
+          <BlogMetaContainer>
+            <BlogAuthorContainer>
+              {author?.data?.attributes?.Avatar.data?.attributes?.url ? (
+                <BlogAuthorAvatar
+                  src={`${baseUrl}${author.data.attributes.Avatar.data.attributes.url}`}
+                  alt="author-avatar"
+                />
+              ) : (
+                <BlogAuthorAvatarSkeleton variant="rounded" />
+              )}
+              {author?.data ? (
+                <BlogArticlAuthorName
+                  variant="bodyXSmallStrong"
+                  component="span"
+                >
+                  {author.data?.attributes.Name}
+                </BlogArticlAuthorName>
+              ) : (
+                <BlogArticlAuthorNameSkeleton variant="text" />
+              )}
+            </BlogAuthorContainer>
+            <ShareArticleIcons title={title} slug={slug} />
+          </BlogMetaContainer>
+        </BlogArticleContentContainer>
+      </BlogArticleContainer>
       <BlogArticleImageContainer>
         {image?.data && (
           <BlogArticleImage
@@ -137,13 +151,6 @@ export const BlogArticle = ({
       </BlogArticleImageContainer>
       <BlogArticleContainer>
         <BlogArticleContentContainer>
-          {subtitle ? (
-            <BlogArticleSubtitle variant="headerMedium" as="h4">
-              {subtitle}
-            </BlogArticleSubtitle>
-          ) : (
-            <BlogArticleSubtitleSkeleton variant="text" />
-          )}
           {content ? (
             <CustomRichBlocks
               id={id}

diff --git a/src/components/Blog/BlogArticleCard/BlogArticleCard.style.ts b/src/components/Blog/BlogArticleCard/BlogArticleCard.style.ts
@@ -19,10 +19,7 @@ export const BlogArticleCardContainer = styled(Card)(({ theme }) => ({
   border: 'unset',
   padding: theme.spacing(2),
   borderRadius: '32px',
-  background:
-    theme.palette.mode === 'light'
-      ? theme.palette.white.main
-      : theme.palette.alphaLight200.main,
+  background: theme.palette.bgTertiary.main,
   transition: 'background-color 250ms',
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     minWidth: 250,

diff --git a/src/components/Blog/BlogCarousel/BlogCarousel.style.ts b/src/components/Blog/BlogCarousel/BlogCarousel.style.ts
@@ -1,19 +1,13 @@
 import type { BoxProps, Breakpoint } from '@mui/material';
-import { Box, alpha, styled } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { ButtonPrimary } from '../../Button';
 
 export const BlogCarouselContainer = styled(Box)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? alpha(theme.palette.white.main, 0.48)
-      : alpha(theme.palette.white.main, 0.12),
+  backgroundColor: theme.palette.bgSecondary.main,
   borderRadius: '32px',
   padding: theme.spacing(2),
   margin: theme.spacing(6, 2, 0),
-  boxShadow:
-    theme.palette.mode === 'dark'
-      ? '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.16)'
-      : '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.08)',
+  boxShadow: theme.palette.shadow.main,
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     margin: theme.spacing(2, 8, 0),
     padding: theme.spacing(3),

diff --git a/src/components/Blog/CTAs/InstructionsAccordion/InstructionsAccordionItem.tsx b/src/components/Blog/CTAs/InstructionsAccordion/InstructionsAccordionItem.tsx
@@ -4,7 +4,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import type { Breakpoint } from '@mui/material';
 import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import type { MouseEventHandler } from 'react';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { sora } from 'src/fonts/fonts';
 import type { InstructionItemProps } from '.';
 import {
@@ -63,11 +63,16 @@ export const InstructionsAccordionItem = ({
 
   const isSuperfest = variant === 'superfest';
 
+  useEffect(() => {
+    if (variant === 'superfest') {
+      setOpen(true);
+    }
+  }, []);
+
   return (
     <InstructionsAccordionItemContainer
       sx={{
         typograpy: isSuperfest ? sora.style.fontFamily : undefined,
-        border: isSuperfest ? '2px dotted' : undefined,
         borderColor: isSuperfest ? theme.palette.black.main : undefined,
       }}
     >
@@ -142,6 +147,10 @@ export const InstructionsAccordionItem = ({
                             component={'span'}
                             mr={'8px'}
                             sx={{
+                              color:
+                                theme.palette.mode === 'light'
+                                  ? '#000000'
+                                  : '#FFFFFF',
                               overflow: 'hidden',
                               textOverflow: 'ellipsis',
                               maxWidth: 208,
@@ -152,7 +161,14 @@ export const InstructionsAccordionItem = ({
                           >
                             {buttonTitles[i]}
                           </Typography>
-                          <ArrowForwardIcon />
+                          <ArrowForwardIcon
+                            style={{
+                              color:
+                                theme.palette.mode === 'light'
+                                  ? '#000000'
+                                  : '#FFFFFF',
+                            }}
+                          />
                         </InstructionsAccordionLinkBox>
                       </a>
                     </InstructionsAccordionButtonMainBox>

diff --git a/src/components/Blog/CustomRichBlocks.style.ts b/src/components/Blog/CustomRichBlocks.style.ts
@@ -34,12 +34,7 @@ export const BlogParagraph = styled(Typography, {
   return {
     display: 'inline',
     fontWeight: bold ? 700 : 400,
-    color: alpha(
-      theme.palette.mode === 'light'
-        ? theme.palette.black.main
-        : theme.palette.white.main,
-      0.75,
-    ),
+    color: theme.palette.text.secondary,
     textDecoration: textDecoration,
     fontStyle: italic ? 'italic' : 'normal',
     fontSize: '18px',

diff --git a/src/components/Blog/CustomRichBlocks.tsx b/src/components/Blog/CustomRichBlocks.tsx
@@ -141,7 +141,6 @@ export const CustomRichBlocks = ({
     },
 
     paragraph: ({ children }: ParagraphElement) => {
-      console.log('PARAGRAPH', children);
       if (children[0].props.text.includes('<JUMPER_CTA')) {
         try {
           const htmlString = children[0].props.text;
@@ -221,7 +220,7 @@ export const CustomRichBlocks = ({
             />
           );
         } catch (error) {
-          //// console.log(error);
+          console.log(error);
           return;
         }
       } else {