fix step status

irfanbozkurt · Aug 25, 2023 · 19b1e4f · 19b1e4f
1 parent e5662dc
commit 19b1e4f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 25 deletions.
diff --git a/packages/nextjs/components/flashbotRecovery/Layout/Layout.tsx b/packages/nextjs/components/flashbotRecovery/Layout/Layout.tsx
@@ -8,10 +8,10 @@ import { Address } from "~~/components/scaffold-eth";
 interface IProps {
   children: JSX.Element;
   stepActive: number;
-  safeAddress:string;
-  hackedAddress:string;
+  safeAddress: string;
+  hackedAddress: string;
 }
-export const Layout = ({ children, stepActive, hackedAddress, safeAddress}: IProps) => {
+export const Layout = ({ children, stepActive, hackedAddress, safeAddress }: IProps) => {
   return (
     <motion.div className={styles.layout} initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
       <div className={styles.sidebar}>
@@ -23,12 +23,14 @@ export const Layout = ({ children, stepActive, hackedAddress, safeAddress}: IPro
           <div className={styles.steps}>
             <Step
               isActive={stepActive == 1}
+              isCompleted={stepActive > 1}
               index={1}
               title={"Enter the hacked address"}
               description={"Provide the address that was hacked so we can search for your assets."}
             />
             <Step
               isActive={stepActive == 2}
+              isCompleted={stepActive > 2}
               index={2}
               title={"Select your assets"}
               description={
@@ -38,32 +40,35 @@ export const Layout = ({ children, stepActive, hackedAddress, safeAddress}: IPro
 
             <Step
               isActive={stepActive == 3}
+              isCompleted={stepActive > 3}
               index={3}
               title={"Confirm the bundle"}
               description={"Review the transactions that are going to be generated to recover your assets"}
             />
 
             <Step
               isActive={stepActive == 4}
+              isCompleted={stepActive > 4}
               index={4}
               title={"Recover your assets"}
-              description={"Follow the steps to retrieve your assets, this is a critical process, so please be patient."}
+              description={
+                "Follow the steps to retrieve your assets, this is a critical process, so please be patient."
+              }
             />
-
           </div>
         </div>
         <div className={`${styles.addresess} bg-base-300`}>
-              <div className={`${styles.addressContainer}`}>
-                <span>Safe Address</span>
-                <div className="m-2"></div>
-                <Address address={safeAddress} disableAddressLink={true}></Address>
-              </div>
-              <div className={`${styles.addressContainer}`}>
-              <span>Hacked Address</span>
-              <div className="m-2"></div>
-                <Address address={hackedAddress} disableAddressLink={true}></Address>
-              </div>
-            </div>
+          <div className={`${styles.addressContainer}`}>
+            <span>Safe Address</span>
+            <div className="m-2"></div>
+            <Address address={safeAddress} disableAddressLink={true}></Address>
+          </div>
+          <div className={`${styles.addressContainer}`}>
+            <span>Hacked Address</span>
+            <div className="m-2"></div>
+            <Address address={hackedAddress} disableAddressLink={true}></Address>
+          </div>
+        </div>
       </div>
       <div className={`${styles.content} bg-base-300`}>{children}</div>
     </motion.div>
@@ -74,11 +79,12 @@ interface IStepProps {
   isActive: boolean;
   index: number;
   title: string;
+  isCompleted:boolean;
   description: string;
 }
-const Step = ({ isActive, index, title, description }: IStepProps) => {
+const Step = ({ isActive, isCompleted, index, title, description }: IStepProps) => {
   return (
-    <div className={`${styles.step} ${isActive ? "" : "text-secondary-content"}`}>
+    <div className={`${styles.step} ${isCompleted ? styles.completed : ""} ${isActive ? "" : "text-secondary-content"}`}>
       <div>
         <span className={`${styles.badge} ${isActive ? "btn-primary" : ""}`}>{index}</span>
       </div>

diff --git a/packages/nextjs/components/flashbotRecovery/Layout/layout.module.css b/packages/nextjs/components/flashbotRecovery/Layout/layout.module.css
@@ -52,17 +52,17 @@
 }
 .step {
   display: flex;
-  margin-top: 30px;
+  margin-top: 16px;
 }
 .badge {
   border-radius: 100px;
   border: 2px solid;
   display: flex;
-  width: 40px;
-  font-size: 24px;
+  width: 34px;
+  font-size: 20px;
   font-style: normal;
   font-weight: 600;
-  height: 40px;
+  height: 34px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -76,7 +76,7 @@
   font-weight: 600;
   margin: 0;
   display: flex;
-  height: 40px;
+  height: 34px;
   align-items: center;
 }
 .stepDescription {
@@ -107,7 +107,13 @@
 .addressContainer svg {
   display: none;
 }
+.completed{
+  color: #7E92BD;
+}
+.completed .badge{
+  background-color: #3A4A6E ;
 
+}
 @media (min-width: 768px) {
   .sidebarContent {
     margin-left: 96px;

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -26,8 +26,8 @@ const Home: NextPage = () => {
   const [hackedAddress, setHackedAddress] = useLocalStorage<string>("hackedAddress", "");
   const [unsignedTxs, setUnsignedTxs] = useLocalStorage<RecoveryTx[]>("unsignedTxs", []);
   const [totalGasEstimate, setTotalGasEstimate] = useState<BigNumber>(BigNumber.from("0"));
-
   const [isOnBasket, setIsOnBasket] = useState(false);
+
   const [currentBundleId, setCurrentBundleId] = useLocalStorage<string>("bundleUuid", "");
 
   const { data: processStatus, startRecoveryProcess, signRecoveryTransactions, blockCountdown } = useRecoveryProcess();
@@ -46,13 +46,16 @@ const Home: NextPage = () => {
     if (!!isOnBasket) {
       return 2;
     }
-
+    if(processStatus !== RecoveryProcessStatus.initial){
+      return 4;
+    }
     if (unsignedTxs.length > 0) {
       return 3;
     }
     if (hackedAddress !== "") {
       return 2;
     }
+
     return 1;
   };
   const activeStep = getLayoutActiveStep();