From 91677e78ae822b0d7a318a4daa92cea372bdae4a Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Thu, 27 Jan 2022 20:28:51 +0200
Subject: [PATCH] feat: add stepper draft

---
 packages/widget/src/components/SwapForm.tsx   |  2 +
 .../widget/src/components/SwapStepper.tsx     | 81 +++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 packages/widget/src/components/SwapStepper.tsx

diff --git a/packages/widget/src/components/SwapForm.tsx b/packages/widget/src/components/SwapForm.tsx
index 945de158c..24491bd5e 100644
--- a/packages/widget/src/components/SwapForm.tsx
+++ b/packages/widget/src/components/SwapForm.tsx
@@ -7,6 +7,7 @@ import { SendToRecipientForm } from './SendToRecipientForm';
 import { SwapChainButton } from './SwapChainButton';
 import { SwapInput } from './SwapInput';
 import { SwapFromInputAdornment, SwapToInputAdornment } from './SwapInputAdornment';
+import { SwapStepper } from './SwapStepper';
 import { Switch } from './Switch';
 
 export const SwapForm: React.FC = () => {
@@ -116,6 +117,7 @@ export const SwapForm: React.FC = () => {
           </Select>
         </FormControl>
       </Box>
+      <SwapStepper />
     </Box>
   );
 };
diff --git a/packages/widget/src/components/SwapStepper.tsx b/packages/widget/src/components/SwapStepper.tsx
new file mode 100644
index 000000000..fb3bcd8cc
--- /dev/null
+++ b/packages/widget/src/components/SwapStepper.tsx
@@ -0,0 +1,81 @@
+import { Step, 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,
+  },
+  [`&:nth-of-type(2) .${stepLabelClasses.iconContainer}>div,
+  &:nth-last-of-type(2) .${stepLabelClasses.iconContainer}>div`]: {
+    backgroundColor: theme.palette.primary.main,
+    borderRadius: '50%',
+  },
+}));
+
+const SwapStepConnector = styled(StepConnector)(({ theme }) => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
+    top: 50,
+    left: '-50%',
+    right: '50%',
+  },
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: theme.palette.primary.main,
+    },
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: theme.palette.primary.main,
+    },
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    borderColor: theme.palette.common.black,
+    borderTopWidth: 3,
+    borderRadius: 1,
+  },
+}));
+
+const SwapStepLabel = styled(StepLabel)(({ theme }) => ({
+  [`&.${stepLabelClasses.alternativeLabel}`]: {
+    flexDirection: 'column-reverse',
+  },
+  [`& .${stepLabelClasses.label}.${stepLabelClasses.alternativeLabel}`]: {
+    margin: 0,
+  },
+  [`& .SwapStepLabel-optional`]: {
+    textAlign: 'center',
+  },
+}));
+
+const SwapStepIcon = styled('div')(({ theme }) => ({
+  margin: '4px 0',
+  width: 13,
+  height: 13,
+  backgroundColor: theme.palette.common.black,
+  zIndex: 1,
+}));
+
+const steps = ['CAKE', 'Anyswap', 'Solana', 'AAVE'];
+
+export function SwapStepper() {
+  return (
+    <Stack sx={{ width: '100%' }} spacing={4}>
+      <Stepper alternativeLabel activeStep={steps.length} connector={<SwapStepConnector />}>
+        {steps.map((label) => (
+          <SwapStep key={label}>
+            <SwapStepLabel
+              StepIconComponent={SwapStepIcon}
+              optional={<div className="SwapStepLabel-optional">{label}</div>}
+            >
+              {label}
+            </SwapStepLabel>
+          </SwapStep>
+        ))}
+      </Stepper>
+    </Stack>
+  );
+}