Merge branch 'develop' into chore-remove-wf

jumperexchange · Jul 15, 2024 · 05e6be9 · 05e6be9
2 parents 616ec37 + 8e897c4
commit 05e6be9
Show file tree

Hide file tree

Showing 40 changed files with 304 additions and 188 deletions.
diff --git a/src/Layout.tsx b/src/Layout.tsx
@@ -1,12 +1,11 @@
-import { Box } from '@mui/material';
-import Image from 'next/image';
 import type { PropsWithChildren } from 'react';
 import { BackgroundGradient } from './components/BackgroundGradient/BackgroundGradient';
 import { Navbar } from './components/Navbar/Navbar';
 import { PoweredBy } from './components/PoweredBy/PoweredBy';
 import { Snackbar } from './components/Snackbar/Snackbar';
 import { SuperfestPresentedByBox } from './components/Superfest/SuperfestPresentedBy/SuperfestPresentedByBox';
 import { SupportModal } from './components/SupportModal/SupportModal';
+import { PartnerThemeFooterImage } from './components/PartnerThemeFooterImage';
 
 interface LayoutProps {
   fixedPoweredBy?: boolean | undefined;
@@ -23,18 +22,7 @@ export const Layout: React.FC<PropsWithChildren<LayoutProps>> = ({
       {children}
       <SupportModal />
       <Snackbar />
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'row-reverse',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          alignContent: 'center',
-        }}
-      >
-        <PoweredBy fixedPosition={fixedPoweredBy} />
-        <SuperfestPresentedByBox />
-      </Box>
+      <PartnerThemeFooterImage />
     </>
   );
 };
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -39,7 +39,6 @@ export default async function NotFound() {
               <NavbarButtons />
             </NavbarContainer>
             <NotFoundComponent />
-            <PoweredBy fixedPosition={true} />
           </TranslationsProvider>
         </ThemeProvider>
       </AppRouterCacheProvider>

diff --git a/src/components/Alerts/WalletAlert/WalletAlert.tsx b/src/components/Alerts/WalletAlert/WalletAlert.tsx
@@ -1,13 +1,72 @@
+import {
+  MultisigConfirmationModal,
+  MultisigConfirmationModalContainer,
+  MultisigConfirmationModalIcon,
+  MultisigConfirmationModalIconContainer,
+} from 'src/components/MultisigConfirmationModal';
 import { InfoAlert } from '../InfoAlert';
+import { Modal, Theme, Typography, useMediaQuery } from '@mui/material';
+import { Button } from 'src/components/Button';
+import { useEffect, useState } from 'react';
+import { useMetaMask } from 'src/hooks/useMetaMask';
 
 export const WalletAlert = () => {
-  const title = 'Metamask update is required ⚠️';
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const { isMetaMaskConnector } = useMetaMask();
+
+  const title = 'Metamask update is required';
   const subtitle =
     'Please update MetaMask to the latest version. This update solves a bug present in older versions.';
+  const isMobile = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down('md'),
+  );
+
+  useEffect(() => {
+    if (isMetaMaskConnector) {
+      setIsOpen(true);
+    }
+  }, [isMetaMaskConnector]);
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
 
   return (
     <>
-      <InfoAlert active={true} title={title} subtitle={subtitle} />
+      {isMobile ? (
+        <Modal open={isOpen} onClose={onClose}>
+          <MultisigConfirmationModalContainer>
+            <MultisigConfirmationModalIconContainer>
+              <MultisigConfirmationModalIcon />
+            </MultisigConfirmationModalIconContainer>
+            <Typography
+              fontWeight={700}
+              textAlign={'center'}
+              marginY={4}
+              style={{
+                fontSize: '1.125rem',
+              }}
+            >
+              {title}
+            </Typography>
+            <Typography fontSize={'1.125 rem'} marginY={4}>
+              {subtitle}
+            </Typography>
+            <Button
+              variant="primary"
+              muiVariant="contained"
+              styles={{
+                width: '100%',
+              }}
+              onClick={onClose}
+            >
+              {'I confirm'}
+            </Button>
+          </MultisigConfirmationModalContainer>
+        </Modal>
+      ) : (
+        <InfoAlert active={true} title={title} subtitle={subtitle} />
+      )}
     </>
   );
 };
diff --git a/src/components/BackgroundGradient/BackgroundGradient.tsx b/src/components/BackgroundGradient/BackgroundGradient.tsx
@@ -10,7 +10,6 @@ import {
 import { SirBridgeLot } from '../illustrations/SirBridgeLot';
 import { FixBoxWithNoOverflow, MovingBox } from './MovingBox.style';
 import { usePartnerTheme } from 'src/hooks/usePartnerTheme';
-import { usePathname } from 'next/navigation';
 import { useSuperfest } from 'src/hooks/useSuperfest';
 import { useMainPaths } from 'src/hooks/useMainPaths';
 import { useMemo } from 'react';

diff --git a/src/components/MultisigConfirmationModal/MultisigConfirmationModal.style.ts b/src/components/MultisigConfirmationModal/MultisigConfirmationModal.style.ts
@@ -7,11 +7,13 @@ import { styled } from '@mui/material/styles';
 
 export const MultisigConfirmationModalContainer = styled(Box)(({ theme }) => ({
   position: 'absolute',
-  top: 64,
   left: '50%',
   transform: 'translateX(-50%)',
   width: 416,
-  [theme.breakpoints.up('sm' as Breakpoint)]: { top: 72 },
+  top: 200,
+  [theme.breakpoints.down('md' as Breakpoint)]: {
+    top: '50%',
+  },
   [theme.breakpoints.up('md' as Breakpoint)]: {
     top: '50%',
     transform: 'translate(-50%, -50%)',

diff --git a/src/components/OnRamper/OnRamper.tsx b/src/components/OnRamper/OnRamper.tsx
@@ -44,7 +44,7 @@ export const OnRamper = () => {
       welcomeScreenClosed={welcomeScreenClosed}
       className="widget-wrapper"
     >
-      <div>
+      <div style={{ textAlign: 'center' }}>
         <OnRamperIFrame
           src={onRamperSrc}
           height="630px"

diff --git a/src/components/PartnerThemeFooterImage.tsx b/src/components/PartnerThemeFooterImage.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { ChainId } from '@lifi/sdk';
 import Link from 'next/link';
 import { useChainTokenSelectionStore } from 'src/stores/chainTokenSelection';
@@ -6,15 +8,17 @@ import { useMainPaths } from 'src/hooks/useMainPaths';
 import { Theme, useMediaQuery } from '@mui/material';
 import { BackgroundFooterImage } from './Widgets';
 import { usePartnerTheme } from 'src/hooks/usePartnerTheme';
+import { useSuperfest } from 'src/hooks/useSuperfest';
 
 export const PartnerThemeFooterImage = () => {
   const { sourceChainToken, destinationChainToken } =
     useChainTokenSelectionStore();
+  const { isSuperfest } = useSuperfest();
   const { isMainPaths } = useMainPaths();
   const { hasTheme, availableWidgetThemeMode } = usePartnerTheme();
 
-  const isMobile = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down('md'),
+  const isSmallScreen = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down('lg'),
   );
 
   const activeChainAlert =
@@ -23,17 +27,23 @@ export const PartnerThemeFooterImage = () => {
     sourceChainToken?.chainId === ChainId.SOL ||
     destinationChainToken?.chainId === ChainId.SOL;
 
+  const showBasedOnURL = isSuperfest || isMainPaths || !!hasTheme;
+  const showFooterLogo = !activeChainAlert && !isSmallScreen && showBasedOnURL;
+
   return (
-    !activeChainAlert &&
-    !isMobile &&
-    (isMainPaths || !!hasTheme) && (
-      <Link href={'https://li.fi'} target="_blank" style={{ zIndex: 1 }}>
+    showFooterLogo && (
+      <Link
+        href={'https://superfest.optimism.io/'}
+        target="_blank"
+        style={{ zIndex: 100 }}
+      >
         <BackgroundFooterImage
+          style={{ position: isSuperfest ? 'relative' : 'absolute' }}
           alt="footer-image"
           src={
             !!hasTheme && availableWidgetThemeMode === 'dark'
-              ? 'https://strapi.li.finance/uploads/superfest_light_sponsor_card_f92597365f.svg'
-              : 'https://strapi.li.finance/uploads/Superfest_sponsor_card_f3996bea6c.svg'
+              ? 'https://strapi.li.finance/uploads/sponsorcard_superfest_dark_befdd19bcf.svg'
+              : 'https://strapi.li.finance/uploads/Superfest_OP_3_575f5ddd10.svg'
           }
           width={300}
           height={200}

diff --git a/src/components/ProfilePage/QuestCard/QuestCard.tsx b/src/components/ProfilePage/QuestCard/QuestCard.tsx
@@ -95,20 +95,22 @@ export const QuestCard = ({
                 </NoSelectTypography>
               </CenteredBox>
             ) : null}
-            {startDate && endDate ? (
-              <QuestDatesBox>
-                <CenteredBox>
-                  <DateRangeRoundedIcon sx={{ height: '16px' }} />
-                </CenteredBox>
-                <NoSelectTypography
-                  fontSize={'12px'}
-                  lineHeight={'16px'}
-                  fontWeight={700}
-                >
-                  {getStringDateFormatted(startDate, endDate)}
-                </NoSelectTypography>
-              </QuestDatesBox>
-            ) : null}
+            {startDate && endDate
+              ? //Todo: to keep when we'll have quests with timing again
+                // <QuestDatesBox>
+                //   <CenteredBox>
+                //     <DateRangeRoundedIcon sx={{ height: '16px' }} />
+                //   </CenteredBox>
+                //   <NoSelectTypography
+                //     fontSize={'12px'}
+                //     lineHeight={'16px'}
+                //     fontWeight={700}
+                //   >
+                //     {getStringDateFormatted(startDate, endDate)}
+                //   </NoSelectTypography>
+                // </QuestDatesBox>
+                undefined
+              : null}
           </QuestPlatformMainBox>
         ) : (
           <CompletedBox>

diff --git a/src/components/Superfest/AvailableMissionsList/AvailableMissionsList.style.ts b/src/components/Superfest/AvailableMissionsList/AvailableMissionsList.style.ts
@@ -64,5 +64,4 @@ export const AvailableMissionsStack = styled(Stack)(() => ({
   alignItems: 'center',
   display: 'flex',
   justifyContent: 'center',
-  marginLeft: 32,
 }));
diff --git a/src/components/Superfest/AvailableMissionsList/AvailableMissionsList.tsx b/src/components/Superfest/AvailableMissionsList/AvailableMissionsList.tsx
@@ -19,9 +19,13 @@ import { MissionsFilter } from '../MissionsFilter/MissionsFilter';
 
 const chains = ['Optimism', 'Base', 'Mode', 'Fraxtal'];
 
-const rewards_list = ['OP Rewards'];
-
-const category = ['AMM', 'Money Market', 'LRT', 'LST', 'Derivatives', 'Yield'];
+const category = [
+  'AMM',
+  'Money Market',
+  'Liquid Staking',
+  'Derivatives',
+  'Yield',
+];
 
 interface QuestCompletedListProps {
   quests?: Quest[];
@@ -36,7 +40,6 @@ export const AvailableMissionsList = ({
     theme.breakpoints.down('md'),
   );
   const [chainsFilter, setChainsFilter] = useState<string[]>([]);
-  const [rewardsFilter, setRewardsFilter] = useState<string[]>([]);
   const [categoryFilter, setCategoryFilter] = useState<string[]>([]);
   const { url } = useOngoingFestMissions();
 
@@ -56,15 +59,6 @@ export const AvailableMissionsList = ({
     setCategoryFilter(typeof value === 'string' ? value.split(',') : value);
   };
 
-  const handleRewardChange = (
-    event: SelectChangeEvent<typeof rewardsFilter>,
-  ) => {
-    const {
-      target: { value },
-    } = event;
-    setRewardsFilter(typeof value === 'string' ? value.split(',') : value);
-  };
-
   return (
     <AvailableMissionsContainer>
       <AvailableMissionsHeader>
@@ -85,14 +79,6 @@ export const AvailableMissionsList = ({
                 activeChoices={chainsFilter}
                 handleChange={handleChainChange}
               />
-              <Box marginLeft={'4px'}>
-                <MissionsFilter
-                  title="Rewards"
-                  options={rewards_list}
-                  activeChoices={rewardsFilter}
-                  handleChange={handleRewardChange}
-                />
-              </Box>
               <Box marginLeft={'4px'}>
                 <MissionsFilter
                   title="Category"
@@ -120,21 +106,13 @@ export const AvailableMissionsList = ({
               const rewardsAmount = rewards?.amount;
 
               //todo: exclude in a dedicated helper function
-              if (rewardsFilter.length === 1) {
-                if (
-                  rewardsFilter.includes('OP Rewards') &&
-                  (!rewardsAmount || rewardsAmount === 0)
-                ) {
-                  return undefined;
-                }
-              }
               if (chainsFilter && chainsFilter.length > 0) {
                 let included = false;
                 for (const chain of chains) {
                   if (
                     chainsFilter
-                      .map((chain) => chain.toLowerCase())
-                      .includes(chain.name)
+                      .map((elemChain) => elemChain.toLowerCase())
+                      .includes(chain.name.toLowerCase())
                   ) {
                     included = true;
                     break;

diff --git a/src/components/Superfest/HeroBox/HeroBox.tsx b/src/components/Superfest/HeroBox/HeroBox.tsx
@@ -16,7 +16,7 @@ export const HeroBox = () => {
       <>{isMobile ? <SuperfestPresentedBy /> : <SuperfestLogo />}</>
       <Link
         style={{ textDecoration: 'none' }}
-        href={'https://www.superchain.eco/'}
+        href={'https://superfest.optimism.io/'}
         target="_blank"
       >
         <HeroButtonBox>
@@ -27,7 +27,7 @@ export const HeroBox = () => {
             styles={{
               color: '#ffffff',
               alignItems: 'center',
-              minWidth: '400px',
+              minWidth: { xs: '300px', md: '400px' },
               padding: '16px',
             }}
           >

diff --git a/src/components/Superfest/NFTClaimingBox/NFTCard/NFTCard.style.ts b/src/components/Superfest/NFTClaimingBox/NFTCard/NFTCard.style.ts
@@ -1,7 +1,7 @@
 import { Box, styled } from '@mui/material';
 
 export const NFTCardMainBox = styled(Box)(({ theme }) => ({
-  width: '256px',
+  width: '288px',
   height: '344px',
   justifyContent: 'center',
   alignContent: 'center',

diff --git a/src/components/Superfest/NFTClaimingBox/NFTCard/NFTCard.tsx b/src/components/Superfest/NFTClaimingBox/NFTCard/NFTCard.tsx
@@ -88,8 +88,8 @@ export const NFTCard = ({
           }}
           src={image}
           alt={chain}
-          width="256"
-          height="256"
+          width="288"
+          height="288"
         />
         <NFTCardBotomBox>
           <Button

diff --git a/src/components/Superfest/NFTClaimingBox/NFTClaimingBox.style.ts b/src/components/Superfest/NFTClaimingBox/NFTClaimingBox.style.ts
@@ -88,7 +88,7 @@ export const NFTDisplayBox = styled(Box)(({ theme }) => ({
   flexWrap: 'wrap',
   justifyContent: 'center',
   alignContent: 'center',
-  gap: '48px',
+  gap: '16px',
   [theme.breakpoints.down('md' as Breakpoint)]: {
     flexDirection: 'column',
     alignItems: 'center',

diff --git a/src/components/Superfest/NFTClaimingBox/NFTClaimingBox.tsx b/src/components/Superfest/NFTClaimingBox/NFTClaimingBox.tsx
@@ -62,7 +62,7 @@ export const NFTClaimingBox = ({
         <Box marginTop="32px" marginBottom="32px">
           <NFTClaimingDescription>
             {
-              'Explore the Superchain Festival and vibe at the sound of 1.5M OP rewards. Feel the music, complete the tasks and get ready to experience rewards like never before.'
+              'Explore the Superchain Festival and vibe at the sound of 1.5M OP rewards. When you claim OP rewards from a chain, you are eligible to mint a unique Superchain wristband.'
             }
           </NFTClaimingDescription>
         </Box>

diff --git a/src/components/Superfest/QuestCard/QuestCard.style.ts b/src/components/Superfest/QuestCard/QuestCard.style.ts
@@ -8,8 +8,8 @@ export const QuestCardMainBox = styled(Box)(({ theme }) => ({
     theme.palette.mode === 'light'
       ? '#FFFFFF'
       : alpha(theme.palette.white.main, 0.08),
-  height: '416px',
-  width: '256px',
+  height: 450,
+  width: 288,
   textAlign: 'center',
   borderRadius: '8px',
 }));