feat: add quest leaderboard change

apps/evm/src/assets/locales/en/translation.json

@@ -52,12 +52,12 @@
     },
     "partners": {
       "title": "Ecosystem",
-      "content": "Explore and interact with BOB Fusion allies to embark on unique adventures and supercharge your Spice accrual.",
+      "content": "Explore and interact with BOB Fusion allies.",
       "alert": "Projects harvest Spice points every hour based on TVL and user activity. Projects are responsible for distributing Spice to their users. Distribution method and frequency may differ from project to project. DYOR."
     },
     "challenges": {
       "title": "Challenges",
-      "content": "Participate in our educational quests to learn more about BOB, leverage your network to spread the word about BOB, get to know the projects. Any successful participation will help you climb the leaderboard even quicker. <challengeLink>View challenges at Intract</challengeLink>."
+      "content": "Participate in our educational quests and climb the leaderboard. <challengeLink>View challenges at Intract</challengeLink>."
     },
     "ecosystem": {
       "title": "Ecosystem",

apps/evm/src/pages/Bridge/components/BannerCarousel/Banner.tsx

@@ -6,7 +6,7 @@ type BannerProps = CardProps;
 
 const Banner = (props: BannerProps) => {
   return (
-    <StyledBanner disableAnimation direction='row' paddingX={{ base: '2xl', s: '7xl' }} paddingY='5xl' {...props} />
+    <StyledBanner disableAnimation direction='row' paddingX={{ base: '3xl', s: '8xl' }} paddingY='6xl' {...props} />
   );
 };
 

apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.style.tsx

@@ -17,15 +17,15 @@ const StyledBannerContent = styled(Flex)`
 
 const StyledSlider = styled(Slider)`
   .slick-prev {
-    left: 10px;
+    left: 20px;
   }
 
   .slick-next {
-    right: 10px;
+    right: 20px;
   }
 
   .slick-dots {
-    bottom: 0;
+    bottom: 10px;
   }
 
   .slick-prev,
@@ -81,6 +81,22 @@ const StyledBanner = styled(Card)`
   max-height: 8.5rem;
 `;
 
+const StyledIntractBannerImg = styled.img`
+  ${({ theme }) => {
+    return css`
+      height: 4rem;
+
+      @media ${theme.breakpoints.down('s')} {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0.2;
+      }
+    `;
+  }}
+`;
+
 const StyledOnrampGraphic = styled(OnrampGraphic)`
   position: absolute;
 
@@ -124,6 +140,7 @@ export {
   StyledCarouselWrapper,
   StyledSlider,
   StyledBanner,
+  StyledIntractBannerImg,
   StyledEcosystemImg,
   StyledOnrampGraphic,
   StyledBannerContent

apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.tsx

@@ -7,6 +7,7 @@ import { useTheme } from 'styled-components';
 import { EcosystemBanner } from './EcosystemBanner';
 import { StyledCarouselWrapper, StyledSlider } from './BannerCarousel.style';
 import { OnrampBanner } from './OnrampBanner';
+import { IntractBanner } from './IntractBanner';
 
 function NextArrow(props: any) {
   const { className, style, onClick } = props;
@@ -57,6 +58,7 @@ const BannerCarousel = ({ onPressOnrampBanner, onPressEcosystemBanner }: BannerC
       <StyledSlider {...settings} arrows={isDesktop}>
         <OnrampBanner onPress={onPressOnrampBanner} />
         <EcosystemBanner onPress={onPressEcosystemBanner} />
+        <IntractBanner />
       </StyledSlider>
     </StyledCarouselWrapper>
   );

apps/evm/src/pages/Bridge/components/BannerCarousel/EcosystemImg.tsx

@@ -2,224 +2,158 @@ import { SVGAttributes } from 'react';
 
 export const EcosystemImg = (props: SVGAttributes<unknown>) => (
   <svg {...props} fill='none' height='768' viewBox='0 0 767 768' width='767' xmlns='http://www.w3.org/2000/svg'>
-    <circle cx='383.323' cy='383.799' r='213.012' stroke='#313743' strokeWidth='2' />
-    <rect
+    <path
+      d='M383.323 596.811C500.966 596.811 596.335 501.442 596.335 383.799C596.335 266.156 500.966 170.787 383.323 170.787C265.68 170.787 170.311 266.156 170.311 383.799C170.311 501.442 265.68 596.811 383.323 596.811Z'
+      stroke='#313743'
+      strokeWidth='2'
+    />
+    <path
+      d='M401.584 193.615H365.06C362.538 193.615 360.494 191.571 360.494 189.049V152.525C360.494 150.003 362.538 147.959 365.06 147.959H401.584C404.106 147.959 406.15 150.003 406.15 152.525V189.049C406.15 191.571 404.106 193.615 401.584 193.615Z'
       fill='#313743'
-      height='45.6559'
-      rx='4.56559'
       stroke='#B6BFC8'
       strokeWidth='1.42675'
-      transform='matrix(1 0 0 -1 360.494 193.615)'
-      width='45.6559'
     />
-    <rect
+    <path
+      d='M552.205 256.005H515.681C513.159 256.005 511.115 253.961 511.115 251.439V214.915C511.115 212.393 513.159 210.349 515.681 210.349H552.205C554.727 210.349 556.771 212.393 556.771 214.915V251.439C556.771 253.961 554.727 256.005 552.205 256.005Z'
       fill='#313743'
-      height='45.6559'
-      rx='4.56559'
       stroke='#B6BFC8'
       strokeWidth='1.42675'
-      transform='matrix(1 0 0 -1 511.115 256.005)'
-      width='45.6559'
     />
-    <rect
+    <path
+      d='M614.596 406.627H578.072C575.55 406.627 573.506 404.583 573.506 402.061V365.537C573.506 363.015 575.55 360.971 578.072 360.971H614.596C617.118 360.971 619.162 363.015 619.162 365.537V402.061C619.162 404.583 617.118 406.627 614.596 406.627Z'
       fill='#313743'
-      height='45.6559'
-      rx='4.56559'
       stroke='#B6BFC8'
       strokeWidth='1.42675'
-      transform='matrix(1 0 0 -1 573.506 406.627)'
-      width='45.6559'
     />
-    <rect
+    <path
+      d='M552.205 557.248H515.681C513.159 557.248 511.115 555.204 511.115 552.682V516.158C511.115 513.636 513.159 511.592 515.681 511.592H552.205C554.727 511.592 556.771 513.636 556.771 516.158V552.682C556.771 555.204 554.727 557.248 552.205 557.248Z'
       fill='#313743'
-      height='45.6559'
-      rx='4.56559'
       stroke='#B6BFC8'
       strokeWidth='1.42675'
-      transform='matrix(1 0 0 -1 511.115 557.248)'
-      width='45.6559'
     />
-    <rect
+    <path
+      d='M401.584 619.639H365.06C362.538 619.639 360.494 617.595 360.494 615.073V578.549C360.494 576.027 362.538 573.983 365.06 573.983H401.584C404.106 573.983 406.15 576.027 406.15 578.549V615.073C406.15 617.595 404.106 619.639 401.584 619.639Z'
       fill='#313743'
-      height='45.6559'
-      rx='4.56559'
       stroke='#B6BFC8'
       strokeWidth='1.42675'
-      transform='matrix(1 0 0 -1 360.494 619.639)'
-      width='45.6559'
     />
-    <rect
+    <path
+      d='M250.963 557.249H214.439C211.917 557.249 209.873 555.205 209.873 552.683V516.159C209.873 513.637 211.917 511.593 214.439 511.593H250.963C253.485 511.593 255.529 513.637 255.529 516.159V552.683C255.529 555.205 253.485 557.249 250.963 557.249Z'
       fill='#313743'
-      height='45.6559'
-      rx='4.56559'
       stroke='#B6BFC8'
       strokeWidth='1.42675'
-      transform='matrix(1 0 0 -1 209.873 557.249)'
-      width='45.6559'
     />
-    <rect
+    <path
+      d='M188.572 406.626H152.048C149.526 406.626 147.482 404.582 147.482 402.06V365.536C147.482 363.014 149.526 360.97 152.048 360.97H188.572C191.094 360.97 193.138 363.014 193.138 365.536V402.06C193.138 404.582 191.094 406.626 188.572 406.626Z'
       fill='#313743'
-      height='45.6559'
-      rx='4.56559'
       stroke='#B6BFC8'
       strokeWidth='1.42675'
-      transform='matrix(1 0 0 -1 147.482 406.626)'
-      width='45.6559'
     />
-    <rect
+    <path
+      d='M250.963 256.005H214.439C211.917 256.005 209.873 253.961 209.873 251.439V214.915C209.873 212.393 211.917 210.349 214.439 210.349H250.963C253.485 210.349 255.529 212.393 255.529 214.915V251.439C255.529 253.961 253.485 256.005 250.963 256.005Z'
       fill='#313743'
-      height='45.6559'
-      rx='4.56559'
       stroke='#B6BFC8'
       strokeWidth='1.42675'
-      transform='matrix(1 0 0 -1 209.873 256.005)'
-      width='45.6559'
     />
-    <circle cx='383.327' cy='383.795' r='345.161' stroke='#313743' strokeWidth='2' />
-    <rect
-      fill='#313743'
-      height='73.9799'
-      rx='7.39799'
-      stroke='#B6BFC8'
-      strokeWidth='2.31187'
-      transform='matrix(1 0 0 -1 346.336 75.624)'
-      width='73.9799'
+    <path
+      d='M383.327 728.956C573.954 728.956 728.488 574.422 728.488 383.795C728.488 193.168 573.954 38.634 383.327 38.634C192.7 38.634 38.166 193.168 38.166 383.795C38.166 574.422 192.7 728.956 383.327 728.956Z'
+      stroke='#313743'
+      strokeWidth='2'
     />
-    <rect
+    <path
+      d='M412.918 75.624H353.734C349.648 75.624 346.336 72.3118 346.336 68.226V9.04211C346.336 4.95631 349.648 1.64413 353.734 1.64413H412.918C417.004 1.64413 420.316 4.95631 420.316 9.04211V68.226C420.316 72.3118 417.004 75.624 412.918 75.624Z'
       fill='#313743'
-      height='73.9799'
-      rx='7.39799'
       stroke='#B6BFC8'
       strokeWidth='2.31187'
-      transform='matrix(1 0 0 -1 590.4 176.72)'
-      width='73.9799'
     />
-    <rect
+    <path
+      d='M656.982 176.72H597.798C593.712 176.72 590.4 173.408 590.4 169.322V110.138C590.4 106.052 593.712 102.74 597.798 102.74H656.982C661.068 102.74 664.38 106.052 664.38 110.138V169.322C664.38 173.408 661.068 176.72 656.982 176.72Z'
       fill='#313743'
-      height='73.9799'
-      rx='7.39799'
       stroke='#B6BFC8'
       strokeWidth='2.31187'
-      transform='matrix(1 0 0 -1 691.496 420.785)'
-      width='73.9799'
     />
-    <rect
+    <path
+      d='M656.982 664.849H597.798C593.712 664.849 590.4 661.537 590.4 657.451V598.267C590.4 594.181 593.712 590.869 597.798 590.869H656.982C661.068 590.869 664.38 594.181 664.38 598.267V657.451C664.38 661.537 661.068 664.849 656.982 664.849Z'
       fill='#313743'
-      height='73.9799'
-      rx='7.39799'
       stroke='#B6BFC8'
       strokeWidth='2.31187'
-      transform='matrix(1 0 0 -1 590.4 664.849)'
-      width='73.9799'
     />
-    <rect
+    <path
+      d='M412.918 765.945H353.734C349.648 765.945 346.336 762.633 346.336 758.547V699.363C346.336 695.277 349.648 691.965 353.734 691.965H412.918C417.004 691.965 420.316 695.277 420.316 699.363V758.547C420.316 762.633 417.004 765.945 412.918 765.945Z'
       fill='#313743'
-      height='73.9799'
-      rx='7.39799'
       stroke='#B6BFC8'
       strokeWidth='2.31187'
-      transform='matrix(1 0 0 -1 346.336 765.945)'
-      width='73.9799'
     />
-    <rect
+    <path
+      d='M168.853 664.85H109.669C105.583 664.85 102.271 661.538 102.271 657.452V598.268C102.271 594.182 105.583 590.87 109.669 590.87H168.853C172.939 590.87 176.251 594.182 176.251 598.268V657.452C176.251 661.538 172.939 664.85 168.853 664.85Z'
       fill='#313743'
-      height='73.9799'
-      rx='7.39799'
       stroke='#B6BFC8'
       strokeWidth='2.31187'
-      transform='matrix(1 0 0 -1 102.271 664.85)'
-      width='73.9799'
     />
-    <rect
+    <path
+      d='M67.7577 420.783H8.57377C4.48797 420.783 1.17578 417.471 1.17578 413.385V354.201C1.17578 350.115 4.48797 346.803 8.57377 346.803H67.7577C71.8435 346.803 75.1557 350.115 75.1557 354.201V413.385C75.1557 417.471 71.8435 420.783 67.7577 420.783Z'
       fill='#313743'
-      height='73.9799'
-      rx='7.39799'
       stroke='#B6BFC8'
       strokeWidth='2.31187'
-      transform='matrix(1 0 0 -1 1.17578 420.783)'
-      width='73.9799'
     />
-    <rect
+    <path
+      d='M168.853 176.72H109.669C105.583 176.72 102.271 173.408 102.271 169.322V110.138C102.271 106.052 105.583 102.74 109.669 102.74H168.853C172.939 102.74 176.251 106.052 176.251 110.138V169.322C176.251 173.408 172.939 176.72 168.853 176.72Z'
       fill='#313743'
-      height='73.9799'
-      rx='7.39799'
       stroke='#B6BFC8'
       strokeWidth='2.31187'
-      transform='matrix(1 0 0 -1 102.271 176.72)'
-      width='73.9799'
     />
-    <circle cx='383.319' cy='383.799' r='115.424' stroke='#313743' strokeWidth='2' />
-    <rect
+    <path
+      d='M383.319 499.223C447.066 499.223 498.743 447.546 498.743 383.799C498.743 320.052 447.066 268.375 383.319 268.375C319.572 268.375 267.895 320.052 267.895 383.799C267.895 447.546 319.572 499.223 383.319 499.223Z'
+      stroke='#313743'
+      strokeWidth='2'
+    />
+    <path
+      d='M393.214 280.744H373.423C372.057 280.744 370.949 279.636 370.949 278.27V258.479C370.949 257.112 372.057 256.005 373.423 256.005H393.214C394.581 256.005 395.688 257.112 395.688 258.479V278.27C395.688 279.636 394.581 280.744 393.214 280.744Z'
       fill='#313743'
-      height='24.7394'
-      rx='2.47394'
       stroke='#B6BFC8'
       strokeWidth='0.773107'
-      transform='matrix(1 0 0 -1 370.949 280.744)'
-      width='24.7394'
     />
-    <rect
+    <path
+      d='M474.831 314.552H455.04C453.674 314.552 452.566 313.444 452.566 312.078V292.287C452.566 290.92 453.674 289.813 455.04 289.813H474.831C476.198 289.813 477.305 290.92 477.305 292.287V312.078C477.305 313.444 476.198 314.552 474.831 314.552Z'
       fill='#313743'
-      height='24.7394'
-      rx='2.47394'
       stroke='#B6BFC8'
       strokeWidth='0.773107'
-      transform='matrix(1 0 0 -1 452.566 314.552)'
-      width='24.7394'
     />
-    <rect
+    <path
+      d='M508.639 396.169H488.847C487.481 396.169 486.373 395.061 486.373 393.695V373.904C486.373 372.537 487.481 371.43 488.847 371.43H508.639C510.005 371.43 511.112 372.537 511.112 373.904V393.695C511.112 395.061 510.005 396.169 508.639 396.169Z'
       fill='#313743'
-      height='24.7394'
-      rx='2.47394'
       stroke='#B6BFC8'
       strokeWidth='0.773107'
-      transform='matrix(1 0 0 -1 486.373 396.169)'
-      width='24.7394'
     />
-    <rect
+    <path
+      d='M474.831 477.785H455.04C453.674 477.785 452.566 476.677 452.566 475.311V455.52C452.566 454.153 453.674 453.046 455.04 453.046H474.831C476.198 453.046 477.305 454.153 477.305 455.52V475.311C477.305 476.677 476.198 477.785 474.831 477.785Z'
       fill='#313743'
-      height='24.7394'
-      rx='2.47394'
       stroke='#B6BFC8'
       strokeWidth='0.773107'
-      transform='matrix(1 0 0 -1 452.566 477.785)'
-      width='24.7394'
     />
-    <rect
+    <path
+      d='M393.214 511.593H373.423C372.057 511.593 370.949 510.485 370.949 509.119V489.328C370.949 487.961 372.057 486.854 373.423 486.854H393.214C394.581 486.854 395.688 487.961 395.688 489.328V509.119C395.688 510.485 394.581 511.593 393.214 511.593Z'
       fill='#313743'
-      height='24.7394'
-      rx='2.47394'
       stroke='#B6BFC8'
       strokeWidth='0.773107'
-      transform='matrix(1 0 0 -1 370.949 511.593)'
-      width='24.7394'
     />
-    <rect
+    <path
+      d='M311.597 477.786H291.806C290.44 477.786 289.332 476.678 289.332 475.312V455.521C289.332 454.154 290.44 453.047 291.806 453.047H311.597C312.964 453.047 314.071 454.154 314.071 455.521V475.312C314.071 476.678 312.964 477.786 311.597 477.786Z'
       fill='#313743'
-      height='24.7394'
-      rx='2.47394'
       stroke='#B6BFC8'
       strokeWidth='0.773107'
-      transform='matrix(1 0 0 -1 289.332 477.786)'
-      width='24.7394'
     />
-    <rect
+    <path
+      d='M277.79 396.169H257.999C256.633 396.169 255.525 395.061 255.525 393.695V373.904C255.525 372.537 256.633 371.43 257.999 371.43H277.79C279.157 371.43 280.264 372.537 280.264 373.904V393.695C280.264 395.061 279.157 396.169 277.79 396.169Z'
       fill='#313743'
-      height='24.7394'
-      rx='2.47394'
       stroke='#B6BFC8'
       strokeWidth='0.773107'
-      transform='matrix(1 0 0 -1 255.525 396.169)'
-      width='24.7394'
     />
-    <rect
+    <path
+      d='M311.597 314.552H291.806C290.44 314.552 289.332 313.444 289.332 312.078V292.287C289.332 290.92 290.44 289.813 291.806 289.813H311.597C312.964 289.813 314.071 290.92 314.071 292.287V312.078C314.071 313.444 312.964 314.552 311.597 314.552Z'
       fill='#313743'
-      height='24.7394'
-      rx='2.47394'
       stroke='#B6BFC8'
       strokeWidth='0.773107'
-      transform='matrix(1 0 0 -1 289.332 314.552)'
-      width='24.7394'
     />
     <path
       d='M383.323 427.637C407.537 427.637 427.167 408.008 427.167 383.794C427.167 359.58 407.537 339.951 383.323 339.951C359.11 339.951 339.48 359.58 339.48 383.794C339.48 408.008 359.11 427.637 383.323 427.637Z'

apps/evm/src/pages/Fusion/components/IntractBanner/IntractBanner.tsx → apps/evm/src/pages/Bridge/components/BannerCarousel/IntractBanner.tsx

@@ -3,7 +3,7 @@ import { Flex, H1, P } from '@gobob/ui';
 import bannerSrc from '../../../../assets/intract-logo.png';
 
 import { Banner } from './Banner';
-import { StyledBannerImg } from './IntractBanner.style';
+import { StyledIntractBannerImg } from './BannerCarousel.style';
 
 const IntractBanner = () => (
   <Banner
@@ -23,7 +23,7 @@ const IntractBanner = () => (
       </Flex>
       <P color='grey-50'>Complete quests to boost your Spice earnings</P>
     </Flex>
-    <StyledBannerImg alt='Intract Logo' src={bannerSrc} />
+    <StyledIntractBannerImg alt='Intract Logo' src={bannerSrc} />
   </Banner>
 );