feat: Architecture section xs and sm viewport

safe-global · Nov 26, 2024 · 4142786 · 4142786
1 parent 6bdc608
commit 4142786
Show file tree

Hide file tree

Showing 4 changed files with 224 additions and 11 deletions.
diff --git a/public/images/Safenet/Architecture/back-button.svg b/public/images/Safenet/Architecture/back-button.svg
diff --git a/public/images/Safenet/Architecture/next-button.svg b/public/images/Safenet/Architecture/next-button.svg
diff --git a/src/components/Safenet/Architecture/index.tsx b/src/components/Safenet/Architecture/index.tsx
@@ -1,13 +1,30 @@
-import { Container, Grid, Typography } from '@mui/material'
+import { Button, Container, Grid, MobileStepper, Step, Stepper, Typography } from '@mui/material'
 import css from './styles.module.css'
 import GradientChip from '@/components/Safenet/GradientChip'
 import LinkButton from '@/components/common/LinkButton'
+import BackButton from '@/public/images/Safenet/Architecture/back-button.svg'
+import NextButton from '@/public/images/Safenet/Architecture/next-button.svg'
+import { useState } from 'react'
 
 const GradientStep = ({ stepNumber }: { stepNumber: number }) => {
   return <div className={css.stepCircle}>{stepNumber}</div>
 }
 
+const STEPS_NUMBER = 3
+const TRANSLATION_VALUES = [400, 0, -400]
+
 const Architecture = () => {
+  const [activeStep, setActiveStep] = useState(1)
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1)
+  }
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1)
+  }
+
+  console.log('activeStep', activeStep, (activeStep - 1) * 400)
   return (
     <div className={css.anchor}>
       <div className={css.arc} />
@@ -23,6 +40,108 @@ const Architecture = () => {
           </Typography>
         </div>
 
+        {/* Mobile Stepper */}
+        <div className={css.stepperWrapper}>
+          <Stepper activeStep={activeStep} style={{ transform: `translateX(${TRANSLATION_VALUES[activeStep]}px)` }}>
+            <Step>
+              <img src="/images/Safenet/Architecture/processor.png" alt="Safe processor" className={css.blockImage} />
+              <Typography className={css.blockTitle}>Processors</Typography>
+              <ul>
+                <li>Connect to user accounts and orchestrate optimal execution of transaction intents.</li>
+                <li>Provide execution guarantees like security checks and custom policies.</li>
+                <li>
+                  Execute transactions instantly by locking user assets (resource-lock) and providing liquidity
+                  optimistically.
+                </li>
+              </ul>
+            </Step>
+
+            <Step>
+              <Typography className={css.midItemTitle}>USER</Typography>
+
+              <Grid container className={css.midItemContainer}>
+                <Grid item md={12} className={css.step}>
+                  <div className={css.stepContent}>
+                    <GradientStep stepNumber={1} />
+                    <Typography className={css.stepText}>User signs transaction intent</Typography>
+                  </div>
+                </Grid>
+
+                <Grid item md={12} className={css.step}>
+                  <div className={css.stepContent}>
+                    <GradientStep stepNumber={2} />
+                    <Typography className={css.stepText}>Checks policies and issues resource-lock</Typography>
+                  </div>
+                </Grid>
+
+                <Grid item md={12} className={css.step}>
+                  <div className={css.stepContent}>
+                    <GradientStep stepNumber={3} />
+                    <Typography className={css.stepText}>Provides liquidity</Typography>
+                  </div>
+                </Grid>
+
+                <Grid item md={12} className={css.step}>
+                  <div className={css.stepContent}>
+                    <GradientStep stepNumber={4} />
+                    <Typography className={css.stepText}>Executes transaction intent</Typography>
+                  </div>
+                </Grid>
+
+                <Grid item md={12} className={css.step}>
+                  <div className={css.stepContent}>
+                    <GradientStep stepNumber={5} />
+                    <Typography className={css.stepText}>
+                      Debits user by providing a validity proof of executed intent
+                    </Typography>
+                  </div>
+                </Grid>
+
+                <Grid item md={12} className={css.step}>
+                  <div className={css.stepContent}>
+                    <GradientStep stepNumber={6} />
+                    <Typography className={css.stepText}>Returns liquidity</Typography>
+                  </div>
+                </Grid>
+              </Grid>
+            </Step>
+
+            <Step>
+              <img src="/images/Safenet/Architecture/mesh.png" alt="Safe net" className={css.blockImage} />
+              <Typography className={css.blockTitle}>Liquid Network</Typography>
+              <ul>
+                <li>Provides Safenet Processors with liquidity to execute transaction intents</li>
+                <li>Aggregates existing DeFi primitives</li>
+              </ul>
+
+              <div className={css.chipsContainer}>
+                <GradientChip caption="Bridges" />
+                <GradientChip caption="Clearing Layer" />
+                <GradientChip caption="Proprietary Liquidity (Solver)" />
+                <GradientChip caption="AMM" />
+                <GradientChip caption="Lending Markets" />
+              </div>
+            </Step>
+          </Stepper>
+          <MobileStepper
+            className={css.mobileStepper}
+            variant="progress"
+            steps={STEPS_NUMBER}
+            position="static"
+            activeStep={activeStep}
+            nextButton={
+              <Button size="small" onClick={handleNext} disabled={activeStep === STEPS_NUMBER - 1}>
+                <NextButton />
+              </Button>
+            }
+            backButton={
+              <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
+                <BackButton />
+              </Button>
+            }
+          />
+        </div>
+
         <Grid container justifyContent="space-between" className={css.gridContainer}>
           <img src="/images/Safenet/Architecture/shapes-md.png" alt="Block shapes" className={css.shapes} />
 

diff --git a/src/components/Safenet/Architecture/styles.module.css b/src/components/Safenet/Architecture/styles.module.css
@@ -104,21 +104,13 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  width: 100%;
   height: 78px;
   border-radius: 20px;
   padding: 0 24px;
   margin: 0 8px;
 }
 
-.step:nth-of-type(1) {
-  height: 100px;
-  margin: 0px;
-}
-
-.step:nth-of-type(4) {
-  border: 2px solid var(--mui-palette-primary-main);
-}
-
 .stepContent {
   display: flex;
   align-items: center;
@@ -138,7 +130,7 @@
   font-size: 18px;
   line-height: 28px;
   font-weight: 400;
-  background: lightskyblue;
+  background: #000609;
 }
 
 .stepCircle::before {
@@ -170,11 +162,60 @@
   margin-top: 48px;
 }
 
+.gridContainer {
+  display: none;
+}
+
+.stepperWrapper {
+  --stepWidth: 400px;
+  margin-top: 500px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stepperWrapper :global .MuiStepper-root {
+  transition: transform ease-in-out 1s;
+}
+
+.stepperWrapper :global .MuiStep-root {
+  width: var(--stepWidth);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stepperWrapper :global .MuiStepConnector-root .MuiStepConnector-line {
+  display: none;
+}
+
+.mobileStepper {
+  background-color: transparent;
+}
+
 @media (min-width: 1200px) {
+  .stepperWrapper {
+    display: none;
+  }
+
+  .gridContainer {
+    display: flex;
+  }
+
   .shapes {
     position: absolute;
     top: 0;
   }
+
+  .step:nth-of-type(1) {
+    height: 100px;
+    margin: 0px;
+  }
+
+  .step:nth-of-type(4) {
+    border: 2px solid var(--mui-palette-primary-main);
+  }
 }
 
 @media (min-width: 1630px) {
@@ -186,6 +227,7 @@
   .step:nth-of-type(1) {
     margin-left: 68px;
   }
+
   .step:nth-of-type(4) {
     height: 80px;
     border-radius: 22px;