From bff5ab9f31075da9dd6f3f07f5839b048afdec81 Mon Sep 17 00:00:00 2001 From: Cody Bender Date: Fri, 9 Aug 2024 17:46:04 -0400 Subject: [PATCH] style: sign with nitro --- src/App.tsx | 3 +- src/components/Container.tsx | 2 +- src/components/Header.tsx | 151 +++++++++++++++++---------------- src/components/Layout.tsx | 28 ------ src/layout/Layout.tsx | 34 ++++++++ src/layout/SignPageLayout.tsx | 56 ++++++------ src/pages/SignWithNitroKey.tsx | 32 +++---- 7 files changed, 157 insertions(+), 149 deletions(-) delete mode 100644 src/components/Layout.tsx create mode 100644 src/layout/Layout.tsx diff --git a/src/App.tsx b/src/App.tsx index 2ac65b1..cb7cbac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,7 +16,7 @@ import Email from "./pages/Email"; import Thanks from "./pages/Thanks"; import Validator from "./pages/Validator"; import ValidatorSuccess from "./pages/ValidatorSuccess"; -import { createTheme, Box, ThemeProvider } from "@mui/material"; +import { createTheme, Box, ThemeProvider, CssBaseline } from "@mui/material"; const darkTheme = createTheme({ components: { @@ -94,6 +94,7 @@ function App() { }} >
+ } /> diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 76c737b..c738e46 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -9,7 +9,7 @@ export const Container: React.FC< sx={{ width: "100%", maxWidth: "752px", - marginX: "auto", + mx: "auto", backgroundColor: "background.paper", padding: 3, borderRadius: 2, diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d92fdba..a533ddb 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,89 +1,90 @@ import React from "react"; import { Link, useLocation } from "react-router-dom"; -import { - AppBar, - Toolbar, - SvgIcon, - Stack, - Divider, - Typography, -} from "@mui/material"; +import { AppBar, SvgIcon, Stack, Divider, Typography } from "@mui/material"; const Header: React.FC = () => { const location = useLocation(); return ( - - - + + - - - - - - - - - - - - - - - - Testnet Onboarding - - + + + + + + + + + + + + + + + Testnet Onboarding + ); }; diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx deleted file mode 100644 index d3b1665..0000000 --- a/src/components/Layout.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Button, Typography } from "@mui/material"; -import React, { PropsWithChildren } from "react"; -import { Container } from "./Container"; -import { ArrowBack } from "@mui/icons-material"; -import { useNavigate } from "react-router-dom"; - -export const Layout: React.FC< - PropsWithChildren<{ title: string; backLinkTitle?: string }> -> = ({ children, title, backLinkTitle = "Home" }) => { - const navigate = useNavigate(); - - return ( - - - - {title} - - {children} - - ); -}; diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx new file mode 100644 index 0000000..9ba9a19 --- /dev/null +++ b/src/layout/Layout.tsx @@ -0,0 +1,34 @@ +import { Button, Typography } from "@mui/material"; +import React, { PropsWithChildren } from "react"; +import { Container } from "../components/Container"; +import { ArrowBack } from "@mui/icons-material"; +import { useNavigate } from "react-router-dom"; + +export const Layout: React.FC< + PropsWithChildren<{ + title: string; + backLinkTitle?: string; + noBackButton?: boolean; + }> +> = ({ children, title, backLinkTitle = "Home", noBackButton = false }) => { + const navigate = useNavigate(); + + return ( + + {noBackButton ? null : ( + + )} + + {title} + + {children} + + ); +}; diff --git a/src/layout/SignPageLayout.tsx b/src/layout/SignPageLayout.tsx index b985f1c..24bdfbf 100644 --- a/src/layout/SignPageLayout.tsx +++ b/src/layout/SignPageLayout.tsx @@ -1,15 +1,10 @@ import React from "react"; import { Outlet, useLocation, useNavigate } from "react-router-dom"; -import { - Toolbar, - Avatar, - Button, - Typography, - Container -} from "@mui/material"; +import { Avatar, Button, Stack, Typography } from "@mui/material"; import { useWalletConnectContext } from "../context/WalletConnectContext"; +import { Container } from "../components/Container"; const SignPageLayout = () => { const { disconnect, session } = useWalletConnectContext(); @@ -25,24 +20,19 @@ const SignPageLayout = () => { }; return ( - <> - - - - - - + + {session && ( -
+
{ }} > - Connected to: {session.peer.metadata.name}{" "} + Connected to: {session.peer.metadata.name} { />
- Session ID: {session.topic} + Session ID: {session.topic} -
+ )} - + - + + ); }; diff --git a/src/pages/SignWithNitroKey.tsx b/src/pages/SignWithNitroKey.tsx index 376706d..986f53c 100644 --- a/src/pages/SignWithNitroKey.tsx +++ b/src/pages/SignWithNitroKey.tsx @@ -3,12 +3,13 @@ import { useLocation, useNavigate } from "react-router-dom"; import { enqueueSnackbar } from "notistack"; import canonicalStringify from "canonical-json"; -import { Select, MenuItem, Box, Typography } from "@mui/material"; +import { Select, MenuItem, Box, Typography, Stack } from "@mui/material"; import LoadingButton from "@mui/lab/LoadingButton"; import { utf8ToHex } from "@walletconnect/encoding"; import { useWalletConnectContext } from "../context/WalletConnectContext"; import { ENABLE_KYC, HASHED_SUBSCRIBER_ID_KEY } from "../constants"; +import { Layout } from "../layout/Layout"; const SignWithNitroKey = () => { const { session, signClient, isSessionLoading } = useWalletConnectContext(); @@ -104,17 +105,9 @@ const SignWithNitroKey = () => { }; return ( -
+ {session ? ( - - Sign with Nitro key + Select Laconic account: