diff --git a/packages/nextjs/components/flashbotRecovery/Layout/Layout.tsx b/packages/nextjs/components/flashbotRecovery/Layout/Layout.tsx index 4374cdd..72e2b29 100644 --- 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 (
@@ -23,12 +23,14 @@ export const Layout = ({ children, stepActive, hackedAddress, safeAddress}: IPro
1} index={1} title={"Enter the hacked address"} description={"Provide the address that was hacked so we can search for your assets."} /> 2} index={2} title={"Select your assets"} description={ @@ -38,6 +40,7 @@ export const Layout = ({ children, stepActive, hackedAddress, safeAddress}: IPro 3} index={3} title={"Confirm the bundle"} description={"Review the transactions that are going to be generated to recover your assets"} @@ -45,25 +48,27 @@ export const Layout = ({ children, stepActive, hackedAddress, safeAddress}: IPro 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." + } /> -
-
- Safe Address -
-
-
-
- Hacked Address -
-
-
-
+
+ Safe Address +
+
+
+
+ Hacked Address +
+
+
+
{children}
@@ -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 ( -
+
{index}
diff --git a/packages/nextjs/components/flashbotRecovery/Layout/layout.module.css b/packages/nextjs/components/flashbotRecovery/Layout/layout.module.css index 39a7822..3efe352 100644 --- 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 index fde4e6b..1ed9253 100644 --- a/packages/nextjs/pages/index.tsx +++ b/packages/nextjs/pages/index.tsx @@ -26,8 +26,8 @@ const Home: NextPage = () => { const [hackedAddress, setHackedAddress] = useLocalStorage("hackedAddress", ""); const [unsignedTxs, setUnsignedTxs] = useLocalStorage("unsignedTxs", []); const [totalGasEstimate, setTotalGasEstimate] = useState(BigNumber.from("0")); - const [isOnBasket, setIsOnBasket] = useState(false); + const [currentBundleId, setCurrentBundleId] = useLocalStorage("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();