feat: jumper scan

README.md

@@ -71,8 +71,6 @@ Thank you for your support!
 
 provider for the theme context, it is used to provide the theme to the whole app, must be into the layout.tsx or page.tsx.
 
-
 ### ThemeProviderV2
 
 provider for the MUI theme context, mainly setting up the MUI provider, very linked to the next-theme provider
-

package.json

@@ -10,6 +10,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
+    "@lifi/explorer": "^0.0.1-alpha.12",
     "@lifi/sdk": "^3.1.3",
     "@lifi/wallet-management": "^3.0.6",
     "@lifi/widget": "^3.3.0",
@@ -62,7 +63,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
-    "eslint": "^9.8.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3.6.1",

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "short_name": "Jumper Exchange",
   "name": "Jumper Exchange",
-  "description": "Multi-Chain Bridging & Swapping (powered by LI.FI)",
+  "description": "Multi-Chain Bridging & Swapping",
   "icons": [
     {
       "src": "logo-16x16.svg",
@@ -36,21 +36,36 @@
       "short_name": "swap/bridge",
       "description": "Swap/bridge via Jumper",
       "url": "/?source=pwa",
-      "icons": [{ "src": "/shortcut-icon.png", "sizes": "97x96" }]
+      "icons": [
+        {
+          "src": "/shortcut-icon.png",
+          "sizes": "97x96"
+        }
+      ]
     },
     {
       "name": "Gas",
       "short_name": "Gas",
       "description": "Gas via Jumper",
       "url": "/gas?source=pwa",
-      "icons": [{ "src": "/shortcut-icon.png", "sizes": "97x96" }]
+      "icons": [
+        {
+          "src": "/shortcut-icon.png",
+          "sizes": "97x96"
+        }
+      ]
     },
     {
       "name": "Buy",
       "short_name": "Buy",
       "description": "Buy on Jumper",
       "url": "/buy?source=pwa",
-      "icons": [{ "src": "/shortcut-icon.png", "sizes": "97x96" }]
+      "icons": [
+        {
+          "src": "/shortcut-icon.png",
+          "sizes": "97x96"
+        }
+      ]
     }
   ],
   "start_url": ".",

src/app/[lng]/scan/[[...segments]]/page.tsx

@@ -0,0 +1,48 @@
+'use client';
+import { LiFiExplorer } from '@lifi/explorer';
+import type { PaletteMode } from '@mui/material';
+import { alpha, Box, useTheme } from '@mui/material';
+import { useMemo } from 'react';
+import { ClientOnly } from 'src/components/ClientOnly';
+import { fallbackLng } from 'src/i18n';
+
+export default function Page({
+  params: { lng },
+}: {
+  children: React.ReactNode;
+  params: { lng: string };
+}) {
+  const theme = useTheme();
+
+  const explorerConfig = useMemo(
+    () => ({
+      appearance: 'light' as PaletteMode, //theme.palette.mode, // This controls light and dark mode
+      integrator: process.env.NEXT_PUBLIC_WIDGET_INTEGRATOR, // TODO: change as needed
+      base: lng !== fallbackLng ? `${lng}/scan/` : '/scan/', // Important for the routing and having everything served under /scan. Do not remove!
+      theme: {
+        // These colors and values correspond to the figma design
+        shape: { borderRadiusSecondary: 900, borderRadius: 12 },
+        palette: {
+          background: {
+            default: alpha(theme.palette.white.main, 0.8),
+            paper: alpha(theme.palette.white.main, 0.8),
+          },
+        },
+      },
+    }),
+    [lng, theme.palette.mode, theme.palette.white.main],
+  );
+
+  return (
+    <ClientOnly>
+      <Box
+        sx={{
+          p: 4,
+          paddingBottom: 8,
+        }}
+      >
+        <LiFiExplorer config={explorerConfig} />
+      </Box>
+    </ClientOnly>
+  );
+}

src/app/[lng]/scan/layout.tsx

@@ -0,0 +1,28 @@
+import { ThemeProviderV2 } from '@/providers/ThemeProviderV2';
+import { ThemeProvider as NextThemeProvider } from 'next-themes';
+import { cookies } from 'next/headers';
+import React from 'react';
+import { Layout } from 'src/Layout';
+
+export default async function PartnerThemeLayout({
+  children,
+  params: { partnerTheme },
+}: {
+  children: React.ReactNode;
+  params: { partnerTheme: string };
+}) {
+  const cookiesHandler = cookies();
+
+  return (
+    <NextThemeProvider
+      themes={['light']}
+      forcedTheme={'light'}
+      enableSystem
+      enableColorScheme
+    >
+      <ThemeProviderV2>
+        <Layout>{children}</Layout>
+      </ThemeProviderV2>
+    </NextThemeProvider>
+  );
+}

src/app/lib/metadata.ts

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 
 const siteName = 'Jumper.Exchange';
-const title = 'Jumper | Multi-Chain Bridging & Swapping (powered by LI.FI)';
+const title = 'Jumper | Multi-Chain Bridging & Swapping';
 const description =
   'Jumper is Crypto’s Everything Exchange, enabling seamless swap and bridge transactions across 25 blockchains. By aggregating all of DeFi liquidity, Jumper ensures the best routes for any token transaction.';
 

src/app/ui/error/ErrorPage.tsx

@@ -30,25 +30,23 @@ const ErrorPage = ({ reset }: FallbackErrorProps) => {
   const { t } = useTranslation();
   return (
     <CenteredContainer>
-      <ErrorMessage variant={'lifiBodyLarge'}>
-        {t('error.message')}
-      </ErrorMessage>
+      <ErrorMessage variant={'bodyLarge'}>{t('error.message')}</ErrorMessage>
       <Button
         variant="primary"
         onClick={() => {
           trackEvent({
             category: TrackingCategory.Menu,
             label: 'click-discord-link',
             action: TrackingAction.OpenMenu,
-            data: { [TrackingEventParameter.Menu]: 'lifi_discord' },
+            data: { [TrackingEventParameter.Menu]: 'jumper_discord' },
             disableTrackingTool: [
               EventTrackingTool.ARCx,
               EventTrackingTool.Cookie3,
             ],
           });
           trackPageload({
             source: TrackingCategory.Menu,
-            destination: 'discord-lifi',
+            destination: 'discord-jumper',
             url: DISCORD_URL,
             pageload: true,
             disableTrackingTool: [EventTrackingTool.Cookie3],
@@ -80,7 +78,7 @@ const ErrorPage = ({ reset }: FallbackErrorProps) => {
               : theme.palette.black.main
           }
         />
-        <SupportMessage variant="lifiBodyMediumStrong" component="span">
+        <SupportMessage variant="bodyMediumStrong" component="span">
           {t('navbar.navbarMenu.support')}
         </SupportMessage>
       </Button>

src/components/AccordionFAQ/AccordionFAQ.tsx

@@ -31,7 +31,7 @@ export const AccordionFAQ = ({ content }: AccordionFAQProps) => {
   return !!content?.length ? (
     <Container>
       <AccordionHeader onClick={() => setShow(!show)}>
-        <Typography variant="lifiHeaderMedium" m={theme.spacing(2, 0)}>
+        <Typography variant="headerMedium" m={theme.spacing(2, 0)}>
           {t('blog.faq')}
         </Typography>
         <AccordionToggleButton onClick={handleShowMore}>
@@ -45,7 +45,7 @@ export const AccordionFAQ = ({ content }: AccordionFAQProps) => {
             aria-controls={`panel${index}a-content`}
             id={`panel${index}a-header`}
           >
-            <Typography variant="lifiBodyMediumStrong">
+            <Typography variant="bodyMediumStrong">
               {el.attributes.Question}
             </Typography>
           </AccordionSummary>

src/components/Alerts/InfoAlert/InfoAlert.tsx

@@ -2,11 +2,10 @@ import {
   InfoMessageCard,
   InfoMessageCardTitle,
 } from '@/components/MessageCard';
-import CloseIcon from '@mui/icons-material/Close';
 import InfoIcon from '@mui/icons-material/Info';
 import { Slide, Typography, useTheme } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { InfoAlertButton, InfoAlertContainer } from '.';
+import { InfoAlertContainer } from '.';
 
 export interface InfoAlertProps {
   title: string;
@@ -50,9 +49,9 @@ export const InfoAlert = ({ title, subtitle, active }: InfoAlertProps) => {
                 marginRight: 1,
               }}
             />
-            <Typography variant={'lifiHeaderXSmall'}>{title}</Typography>
+            <Typography variant={'headerXSmall'}>{title}</Typography>
           </InfoMessageCardTitle>
-          <Typography variant={'lifiBodySmall'} pt={theme.spacing(1.5)}>
+          <Typography variant={'bodySmall'} pt={theme.spacing(1.5)}>
             {subtitle}
           </Typography>
         </InfoMessageCard>

src/components/Alerts/InfoAlert/InfoAlertClickable.tsx

@@ -7,8 +7,8 @@ import InfoIcon from '@mui/icons-material/Info';
 import { Slide, Typography, useTheme } from '@mui/material';
 import { useEffect, useState } from 'react';
 import {
-  InfoAlertButton,
   ButtonInfoAlertClickable,
+  InfoAlertButton,
   InfoAlertContainer,
 } from '.';
 
@@ -74,17 +74,17 @@ export const InfoAlertClickable = ({
                   marginRight: 1,
                 }}
               />
-              <Typography variant={'lifiHeaderXSmall'}>{title}</Typography>
+              <Typography variant={'headerXSmall'}>{title}</Typography>
             </InfoMessageCardTitle>
             <Typography
-              variant={'lifiBodySmall'}
+              variant={'bodySmall'}
               pt={theme.spacing(1.5)}
               color={theme.palette.mode === 'light' ? '#000000' : '#ffffff'}
             >
               {subtitle}
             </Typography>
             <ButtonInfoAlertClickable size="small">
-              <Typography variant={'lifiBodySmall'}>{buttonText}</Typography>
+              <Typography variant={'bodySmall'}>{buttonText}</Typography>
             </ButtonInfoAlertClickable>
           </InfoMessageCardClickable>
         </a>

src/components/Blog/BlogArticle/BlogArticle.tsx

@@ -81,7 +81,7 @@ export const BlogArticle = ({
               color={tags.data[0]?.attributes.TextColor}
               backgroundColor={tags.data[0]?.attributes.BackgroundColor}
               component="span"
-              variant="lifiBodyMediumStrong"
+              variant="bodyMediumStrong"
               key={`blog-article-tag-${tags.data[0]?.id}`}
             >
               {tags.data[0].attributes?.Title}
@@ -91,7 +91,7 @@ export const BlogArticle = ({
           )}
           {!!createdAt ? (
             <BlogArticleHeaderMeta>
-              <BlogArticleHeaderMetaDate variant="lifiBodyXSmall" as="span">
+              <BlogArticleHeaderMetaDate variant="bodyXSmall" as="span">
                 {formatDate(publishedAt || createdAt)}
               </BlogArticleHeaderMetaDate>
               <span>{t('blog.minRead', { minRead: minRead })}</span>
@@ -116,10 +116,7 @@ export const BlogArticle = ({
               <BlogAuthorAvatarSkeleton variant="rounded" />
             )}
             {author?.data ? (
-              <BlogArticlAuthorName
-                variant="lifiBodyXSmallStrong"
-                component="span"
-              >
+              <BlogArticlAuthorName variant="bodyXSmallStrong" component="span">
                 {author.data?.attributes.Name}
               </BlogArticlAuthorName>
             ) : (
@@ -141,7 +138,7 @@ export const BlogArticle = ({
       <BlogArticleContainer>
         <BlogArticleContentContainer>
           {subtitle ? (
-            <BlogArticleSubtitle variant="lifiHeaderMedium" as="h4">
+            <BlogArticleSubtitle variant="headerMedium" as="h4">
               {subtitle}
             </BlogArticleSubtitle>
           ) : (
@@ -181,7 +178,7 @@ export const BlogArticle = ({
                 <BlogArticlAuthorNameSkeleton variant="text" />
               )}
               {author?.data ? (
-                <BlogArticlAuthorRole variant="lifiBodyXSmall" component="span">
+                <BlogArticlAuthorRole variant="bodyXSmall" component="span">
                   {author.data.attributes?.Role}
                 </BlogArticlAuthorRole>
               ) : (

src/components/Blog/BlogArticle/ShareArticleIcon.tsx

@@ -30,7 +30,7 @@ export const ShareArticleIcon = ({
       <ShareButton onClick={handleShare} expanded={showMsgActive}>
         {icon}
         {showMsgActive && (
-          <Typography variant="lifiBodySmall" marginLeft={1} marginRight={1}>
+          <Typography variant="bodySmall" marginLeft={1} marginRight={1}>
             {showMsg}
           </Typography>
         )}

src/components/Blog/BlogArticleCard/BlogArticleCard.tsx

@@ -97,20 +97,20 @@ export const BlogArticleCard = ({
         )}
 
         <BlogArticleCardContent>
-          <BlogArticleCardTitle variant="lifiBodyLarge">
+          <BlogArticleCardTitle variant="bodyLarge">
             {title}
           </BlogArticleCardTitle>
           <BlogArticleCardDetails>
             {tags?.data.slice(0, 1).map((tag, index) => (
-              <BlogArticleCardTag key={index} variant="lifiBodyXSmall" as="h3">
+              <BlogArticleCardTag key={index} variant="bodyXSmall" as="h3">
                 {tag.attributes.Title}
               </BlogArticleCardTag>
             ))}
             <BlogArticleCardMetaContainer>
-              <BlogArticleMetaDate variant="lifiBodyXSmall" as="span">
+              <BlogArticleMetaDate variant="bodyXSmall" as="span">
                 {formatDate(publishedAt || createdAt)}
               </BlogArticleMetaDate>
-              <BlogArticleMetaReadingTime variant="lifiBodyXSmall" as="span">
+              <BlogArticleMetaReadingTime variant="bodyXSmall" as="span">
                 {t('blog.minRead', { minRead: minRead })}
               </BlogArticleMetaReadingTime>
             </BlogArticleCardMetaContainer>

src/components/Blog/BlogArticlesBoard/BlogArticlesBoard.tsx

@@ -79,7 +79,7 @@ export const BlogArticlesBoard = ({
 
   return (
     <BlogArticlesBoardContainer id="see-all">
-      <BlogArticlesBoardTitle variant="lifiHeaderMedium">
+      <BlogArticlesBoardTitle variant="headerMedium">
         {t('blog.categories')}
       </BlogArticlesBoardTitle>
       {filteredTags ? (

src/components/Blog/BlogArticlesBoard/Pagination.tsx

@@ -112,10 +112,7 @@ export const BlogArticlesBoardPagination = ({
               onClick={() => handlePage(actualPage)}
               active={actualPage === page}
             >
-              <Typography
-                variant="lifiBodySmallStrong"
-                sx={{ lineHeight: '18px' }}
-              >
+              <Typography variant="bodySmallStrong" sx={{ lineHeight: '18px' }}>
                 {actualPage}
               </Typography>
             </PaginationIndexButton>

src/components/Blog/BlogCarousel/CarouselContainer.tsx

@@ -96,9 +96,7 @@ export const CarouselContainer = ({
   return (
     <Box>
       <CarouselHeader>
-        {title && (
-          <CarouselTitle variant="lifiHeaderMedium">{title}</CarouselTitle>
-        )}
+        {title && <CarouselTitle variant="headerMedium">{title}</CarouselTitle>}
         {Array.isArray(children) && children?.length > 1 && (
           <CarouselNavigationContainer hide={children?.length < 4}>
             <CarouselNavigationButton onClick={() => handleChange('prev')}>