feat: stepper improvements

lifinance · Jan 31, 2022 · 4589d4d · 4589d4d
1 parent 20e4ede
commit 4589d4d
Show file tree

Hide file tree

Showing 8 changed files with 303 additions and 102 deletions.
diff --git a/libs/react-scripts/package.json b/libs/react-scripts/package.json
@@ -30,7 +30,7 @@
   "dependencies": {
     "@babel/core": "^7.16.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@svgr/webpack": "^6.2.0",
+    "@svgr/webpack": "^6.2.1",
     "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-import": "^1.13.3",
@@ -42,9 +42,9 @@
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.2.0",
-    "dotenv": "^14.3.2",
+    "dotenv": "^15.0.0",
     "dotenv-expand": "^6.0.1",
-    "eslint": "^8.3.0",
+    "eslint": "^8.8.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
@@ -59,7 +59,7 @@
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^6.2.1",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
+    "postcss-preset-env": "^7.3.0",
     "prompts": "^2.4.2",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.0",
@@ -70,7 +70,7 @@
     "semver": "^7.3.5",
     "source-map-loader": "^3.0.0",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.17",
+    "tailwindcss": "^3.0.18",
     "terser-webpack-plugin": "^5.2.5",
     "webpack": "^5.64.4",
     "webpack-dev-server": "^4.6.0",

diff --git a/package.json b/package.json
@@ -14,13 +14,13 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/node": "^17.0.12",
+    "@types/node": "^17.0.13",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
-    "eslint": "^8.7.0",
+    "eslint": "^8.8.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^7.0.0",

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -18,7 +18,7 @@
     "i18next": "^21.6.10",
     "react": "^18.0.0-rc.0",
     "react-dom": "^18.0.0-rc.0",
-    "react-hook-form": "^7.25.1",
+    "react-hook-form": "^7.25.3",
     "react-i18next": "^11.15.3",
     "react-query": "^3.34.12",
     "react-router-dom": "^6.2.1"

diff --git a/packages/widget/src/components/SwapForm.tsx b/packages/widget/src/components/SwapForm.tsx
@@ -28,7 +28,7 @@ export const SwapForm: React.FC = () => {
   } = useFormContext();
 
   return (
-    <Box>
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
       <Typography variant="subtitle1" color="text.secondary" mt={3}>
         {t(`swap.form.from`)}
       </Typography>
@@ -165,7 +165,72 @@ export const SwapForm: React.FC = () => {
           </Select>
         </FormControl>
       </Box>
-      <SwapStepper />
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          justifyContent: 'flex-end',
+        }}
+      >
+        <SwapStepper
+          steps={[
+            { label: 'CAKE', sublabel: 'on BSC' },
+            { label: 'Anyswap', sublabel: 'bridge' },
+            { label: 'Solana', sublabel: 'bridge' },
+            { label: 'AAVE', sublabel: 'on Polygon' },
+          ]}
+        />
+        <Box
+          mt={3}
+          mb={1}
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Typography
+            variant="subtitle1"
+            color="text.secondary"
+            sx={{ alignSelf: 'end' }}
+          >
+            {t(`swap.form.gas`)}
+          </Typography>
+          <Typography
+            ml={2}
+            variant="subtitle1"
+            color="text.primary"
+            sx={{ alignSelf: 'end' }}
+          >
+            {t(`swap.form.price`, { value: 20 })}
+          </Typography>
+        </Box>
+        <Box
+          mb={2}
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Typography
+            variant="subtitle1"
+            color="text.secondary"
+            sx={{ alignSelf: 'end' }}
+          >
+            {t(`swap.form.waitingTime`)}
+          </Typography>
+          <Typography
+            ml={2}
+            variant="subtitle1"
+            color="text.primary"
+            sx={{ alignSelf: 'end' }}
+          >
+            20 min
+          </Typography>
+        </Box>
+      </Box>
     </Box>
   );
 };
diff --git a/packages/widget/src/components/SwapStepper.tsx b/packages/widget/src/components/SwapStepper.tsx
@@ -1,29 +1,102 @@
-import { Step, Stepper } from '@mui/material';
+import { Step, StepIconProps, Stepper } from '@mui/material';
 import Stack from '@mui/material/Stack';
 import StepConnector, {
   stepConnectorClasses,
 } from '@mui/material/StepConnector';
 import StepLabel, { stepLabelClasses } from '@mui/material/StepLabel';
 import { styled } from '@mui/material/styles';
 
-const SwapStep = styled(Step)(({ theme }) => ({
-  [`&:nth-of-type(2) .${stepConnectorClasses.root}.${stepConnectorClasses.completed} .${stepConnectorClasses.line},
-  &:last-of-type .${stepConnectorClasses.root}.${stepConnectorClasses.completed} .${stepConnectorClasses.line}`]:
-    {
-      borderColor: theme.palette.common.black,
+export interface SwapStepperProps {
+  steps: Array<{
+    label: string;
+    sublabel: string;
+  }>;
+}
+
+const SwapStep = styled(Step, {
+  shouldForwardProp: (prop) => prop !== 'stepperLength',
+})<{ stepperLength: number }>(({ theme, stepperLength }) => ({
+  paddingRight: 0,
+  paddingLeft: 0,
+  '&:first-of-type': {
+    [`& .${stepLabelClasses.root}`]: {
+      alignItems: 'flex-start',
+    },
+    [`& .${stepLabelClasses.root} .SwapStepLabel-optional`]: {
+      textAlign: 'left',
+    },
+    [`& .${stepLabelClasses.label}.${stepLabelClasses.alternativeLabel}`]: {
+      textAlign: 'left',
     },
-  [`&:nth-of-type(2) .${stepLabelClasses.iconContainer}>div,
-  &:nth-last-of-type(2) .${stepLabelClasses.iconContainer}>div`]: {
-    backgroundColor: theme.palette.primary.main,
-    borderRadius: '50%',
   },
+  '&:last-of-type': {
+    [`& .${stepConnectorClasses.root}.${stepConnectorClasses.completed} .${stepConnectorClasses.line}`]:
+      {
+        borderColor: theme.palette.common.black,
+      },
+    [`& .${stepConnectorClasses.root}.${stepConnectorClasses.alternativeLabel}`]:
+      {
+        left:
+          stepperLength > 2
+            ? `${-100 / (stepperLength - 1) - 5 * stepperLength}%`
+            : '-100%',
+        right: 0,
+      },
+    [`& .${stepLabelClasses.root}`]: {
+      alignItems: 'flex-end',
+    },
+    [`& .${stepLabelClasses.root} .SwapStepLabel-optional`]: {
+      textAlign: 'right',
+    },
+    [`& .${stepLabelClasses.label}.${stepLabelClasses.alternativeLabel}`]: {
+      textAlign: 'right',
+    },
+  },
+  ...(stepperLength > 2 && {
+    [`&:nth-of-type(2)`]: {
+      [`& .${stepConnectorClasses.root}.${stepConnectorClasses.completed} .${stepConnectorClasses.line}`]:
+        {
+          borderColor: theme.palette.common.black,
+        },
+      [`& .${stepConnectorClasses.root}.${stepConnectorClasses.alternativeLabel}`]:
+        {
+          left: '-100%',
+          right: `${100 - 100 / (stepperLength - 1) - 5 * stepperLength}%`,
+        },
+      [`& .${stepLabelClasses.iconContainer}>div`]: {
+        backgroundColor: theme.palette.primary.main,
+        borderRadius: '50%',
+      },
+      [`& .${stepLabelClasses.root} .SwapStepLabel-optional`]: {
+        color: theme.palette.primary.main,
+      },
+      [`& .${stepConnectorClasses.completed}.${stepLabelClasses.label}`]: {
+        color: theme.palette.primary.main,
+      },
+    },
+    [`&:nth-last-of-type(n+2):not(:first-of-type):not(:nth-of-type(2))`]: {
+      [`& .${stepConnectorClasses.root}.${stepConnectorClasses.alternativeLabel}`]:
+        {
+          left: `${-100 + 100 / (stepperLength - 1) + 5 * stepperLength}%`,
+          right: `${100 / (stepperLength - 1)}%`,
+        },
+      [`& .${stepLabelClasses.iconContainer}>div`]: {
+        backgroundColor: theme.palette.primary.main,
+        borderRadius: '50%',
+      },
+      [`& .${stepLabelClasses.root} .SwapStepLabel-optional`]: {
+        color: theme.palette.primary.main,
+      },
+      [`& .${stepConnectorClasses.completed}.${stepLabelClasses.label}`]: {
+        color: theme.palette.primary.main,
+      },
+    },
+  }),
 }));
 
 const SwapStepConnector = styled(StepConnector)(({ theme }) => ({
   [`&.${stepConnectorClasses.alternativeLabel}`]: {
-    top: 50,
-    left: '-50%',
-    right: '50%',
+    top: 49,
   },
   [`&.${stepConnectorClasses.active}`]: {
     [`& .${stepConnectorClasses.line}`]: {
@@ -51,6 +124,7 @@ const SwapStepLabel = styled(StepLabel)(({ theme }) => ({
   },
   [`& .SwapStepLabel-optional`]: {
     textAlign: 'center',
+    fontSize: '0.875rem',
   },
 }));
 
@@ -62,23 +136,32 @@ const SwapStepIcon = styled('div')(({ theme }) => ({
   zIndex: 1,
 }));
 
-const steps = ['CAKE', 'Anyswap', 'Solana', 'AAVE'];
+function StepIcon(props: StepIconProps) {
+  return <SwapStepIcon />;
+}
 
-export function SwapStepper() {
+export function SwapStepper({ steps }: SwapStepperProps) {
+  if (process.env.NODE_ENV === 'development') {
+    if (steps.length < 2) {
+      console.error('SwapStepper must have more than 2 steps.');
+    }
+  }
   return (
     <Stack sx={{ width: '100%' }} spacing={4}>
       <Stepper
         alternativeLabel
         activeStep={steps.length}
         connector={<SwapStepConnector />}
       >
-        {steps.map((label) => (
-          <SwapStep key={label}>
+        {steps.map((step) => (
+          <SwapStep key={step.label} stepperLength={steps.length}>
             <SwapStepLabel
-              StepIconComponent={SwapStepIcon}
-              optional={<div className="SwapStepLabel-optional">{label}</div>}
+              StepIconComponent={StepIcon}
+              optional={
+                <div className="SwapStepLabel-optional">{step.sublabel}</div>
+              }
             >
-              {label}
+              {step.label}
             </SwapStepLabel>
           </SwapStep>
         ))}

diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json
@@ -17,7 +17,9 @@
         "recommended": "Recommended"
       },
       "recipientsAddress": "Recipient's {{chain}} address",
-      "correctnessConfirmation": "I confirm the address above is correct"
+      "correctnessConfirmation": "I confirm the address above is correct",
+      "gas": "Gas:",
+      "waitingTime": "Waiting time:"
     },
     "button": "Swap"
   }

diff --git a/packages/widget/src/pages/SwapPage.tsx b/packages/widget/src/pages/SwapPage.tsx
@@ -14,6 +14,7 @@ const MainContainer = styled(Container)({
 
 const FormContainer = styled(Container)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
+  display: 'flex',
   flexGrow: 1,
 }));