From b39afe386f508b958fa07244cda76ca184a9d191 Mon Sep 17 00:00:00 2001
From: Cody Bender <codyfbender@gmail.com>
Date: Sun, 11 Aug 2024 12:34:35 -0400
Subject: [PATCH] style: validator success page

---
 src/pages/ValidatorSuccess.tsx | 37 ++++++++++++++--------------------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/pages/ValidatorSuccess.tsx b/src/pages/ValidatorSuccess.tsx
index 518ddcd..9aba31e 100644
--- a/src/pages/ValidatorSuccess.tsx
+++ b/src/pages/ValidatorSuccess.tsx
@@ -1,26 +1,21 @@
-import React from 'react';
-import { useLocation } from 'react-router-dom';
+import React from "react";
+import { useLocation } from "react-router-dom";
 
-import { Box, Link, Typography } from '@mui/material';
+import { Link, Typography } from "@mui/material";
+import { Layout } from "../layout/Layout";
+import { CodeBlock } from "../components/CodeBlock";
 
 const ValidatorSuccess = () => {
   const location = useLocation();
   const { validatorAddress } = location.state as {
-    validatorAddress?: string
+    validatorAddress?: string;
   };
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        marginTop: 6,
-        gap: 1,
-      }}
-    >
-      <Typography variant="h5">Validator created successfully</Typography>
-      <Typography sx={{ marginTop: 3}}>
-        You can view your validator details using the following command (Refer&nbsp;
+    <Layout title="Validator created successfully">
+      <Typography sx={{ marginTop: 3 }}>
+        You can view your validator details using the following command
+        (Refer&nbsp;
         <Link
           href="https://git.vdb.to/cerc-io/testnet-laconicd-stack/src/branch/main/testnet-onboarding-validator.md#join-as-testnet-validator"
           target="_blank"
@@ -28,14 +23,12 @@ const ValidatorSuccess = () => {
         >
           this guide
         </Link>
-            )
+        )
       </Typography>
-      <Box sx={{ backgroundColor: "lightgray", padding: 2, wordWrap: "break-word", marginTop: 2, fontSize: 14}}>
-        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-          {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd query staking validators --output json" | jq '.validators[] | select(.operator_address == "${validatorAddress}")'`}
-        </pre>
-      </Box>
-    </Box>
+      <CodeBlock>
+        {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd query staking validators --output json" | jq '.validators[] | select(.operator_address == "${validatorAddress}")'`}
+      </CodeBlock>
+    </Layout>
   );
 };