style: sign message and use layout component

src/components/Layout.tsx

@@ -0,0 +1,32 @@
+import { Button, Typography } from "@mui/material";
+import React, { PropsWithChildren } from "react";
+import { Container } from "./Container";
+import { ArrowBack } from "@mui/icons-material";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { useNavigation } from "@react-navigation/native";
+import { StackParamsList } from "../types";
+
+export const Layout: React.FC<PropsWithChildren<{ title: string }>> = ({
+  children,
+  title,
+}) => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<StackParamsList>>();
+
+  return (
+    <Container boxProps={{ sx: { backgroundColor: "inherit" } }}>
+      <Button
+        startIcon={<ArrowBack />}
+        color="info"
+        sx={{ mb: 4 }}
+        onClick={() => navigation.navigate("Home")}
+      >
+        Home
+      </Button>
+      <Typography variant="h4" sx={{ mb: 4 }}>
+        {title}
+      </Typography>
+      <Container>{children}</Container>
+    </Container>
+  );
+};

src/screens/AddNetwork.tsx

@@ -29,10 +29,9 @@ import {
   getInternetCredentials,
   setInternetCredentials,
 } from "../utils/key-store";
-import { Button, Divider, Grid, Typography } from "@mui/material";
-import { Container } from "../components/Container";
-import { ArrowBack } from "@mui/icons-material";
+import { Divider, Grid } from "@mui/material";
 import { LoadingButton } from "@mui/lab";
+import { Layout } from "../components/Layout";
 
 const ethNetworkDataSchema = z.object({
   chainId: z.string().nonempty({ message: EMPTY_FIELD_ERROR }),
@@ -214,19 +213,7 @@ const AddNetwork = () => {
   }, [namespace, reset]);
 
   return (
-    <Container boxProps={{ sx: { backgroundColor: "inherit" } }}>
-      <Button
-        startIcon={<ArrowBack />}
-        color="info"
-        sx={{ mb: 4 }}
-        onClick={() => navigation.navigate("Home")}
-      >
-        Home
-      </Button>
-      <Typography variant="h4" sx={{ mb: 4 }}>
-        Add Network
-      </Typography>
-      <Container>
+    <Layout title="Add Network">
       <SelectNetworkType updateNetworkType={updateNetworkType} />
       <Divider flexItem sx={{ my: 4 }} />
 
@@ -245,9 +232,7 @@ const AddNetwork = () => {
                   onBlur={onBlur}
                   onChangeText={(textValue) => onChange(textValue)}
                 />
-                  <HelperText type="error">
-                    {errors.chainId?.message}
-                  </HelperText>
+                <HelperText type="error">{errors.chainId?.message}</HelperText>
               </>
             )}
           />
@@ -330,9 +315,7 @@ const AddNetwork = () => {
                   onBlur={onBlur}
                   onChangeText={onChange}
                 />
-                  <HelperText type="error">
-                    {errors.coinType?.message}
-                  </HelperText>
+                <HelperText type="error">{errors.coinType?.message}</HelperText>
               </>
             )}
           />
@@ -460,8 +443,7 @@ const AddNetwork = () => {
       >
         {isSubmitting ? "Adding" : "Submit"}
       </LoadingButton>
-      </Container>
-    </Container>
+    </Layout>
   );
 };
 

src/screens/EditNetwork.tsx

@@ -20,10 +20,9 @@ import {
   EMPTY_FIELD_ERROR,
   INVALID_URL_ERROR,
 } from "../utils/constants";
-import { Container } from "../components/Container";
-import { Button, Divider, Grid, Typography } from "@mui/material";
+import { Divider, Grid, Typography } from "@mui/material";
 import { LoadingButton } from "@mui/lab";
-import { ArrowBack } from "@mui/icons-material";
+import { Layout } from "../components/Layout";
 
 const ethNetworksFormSchema = z.object({
   // Adding type field for resolving typescript error
@@ -99,19 +98,7 @@ const EditNetwork = ({ route }: EditNetworkProps) => {
   const isCosmos = networkData.namespace === COSMOS;
 
   return (
-    <Container boxProps={{ sx: { backgroundColor: "inherit" } }}>
-      <Button
-        startIcon={<ArrowBack />}
-        color="info"
-        sx={{ mb: 4 }}
-        onClick={() => navigation.navigate("Home")}
-      >
-        Home
-      </Button>
-      <Typography variant="h4" sx={{ mb: 4 }}>
-        Edit Network
-      </Typography>
-      <Container>
+    <Layout title="Edit Network">
       <Typography fontSize="1.5rem" fontWeight={500}>
         Edit {networkData?.networkName} details
       </Typography>
@@ -218,8 +205,7 @@ const EditNetwork = ({ route }: EditNetworkProps) => {
       >
         {isSubmitting ? "Adding" : "Submit"}
       </LoadingButton>
-      </Container>
-    </Container>
+    </Layout>
   );
 };
 

src/screens/SignMessage.tsx

@@ -1,22 +1,22 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { Button, Text, TextInput } from 'react-native-paper';
+import React, { useState } from "react";
+import { Text, TextInput } from "react-native-paper";
+import { Button, Divider, Stack } from "@mui/material";
 
-import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
 
-import { StackParamsList } from '../types';
-import styles from '../styles/stylesheet';
-import { signMessage } from '../utils/sign-message';
-import AccountDetails from '../components/AccountDetails';
+import { StackParamsList } from "../types";
+import { signMessage } from "../utils/sign-message";
+import AccountDetails from "../components/AccountDetails";
+import { Layout } from "../components/Layout";
 
-type SignProps = NativeStackScreenProps<StackParamsList, 'SignMessage'>;
+type SignProps = NativeStackScreenProps<StackParamsList, "SignMessage">;
 
 const SignMessage = ({ route }: SignProps) => {
   const namespace = route.params.selectedNamespace;
   const chainId = route.params.selectedChainId;
   const account = route.params.accountInfo;
 
-  const [message, setMessage] = useState<string>('');
+  const [message, setMessage] = useState<string>("");
 
   const signMessageHandler = async () => {
     const signedMessage = await signMessage({
@@ -29,31 +29,30 @@ const SignMessage = ({ route }: SignProps) => {
   };
 
   return (
-    <View style={styles.signPage}>
-      <View style={styles.accountInfo}>
-        <View>
+    <Layout title="Sign Message">
       <Text variant="titleMedium">
         {account && `Account ${account.index + 1}`}
       </Text>
-        </View>
-        <View style={styles.accountContainer}>
       <AccountDetails account={account} />
-        </View>
-      </View>
 
+      <Stack spacing={4}>
+        <Divider flexItem />
         <TextInput
           mode="outlined"
           placeholder="Enter your message"
-        onChangeText={text => setMessage(text)}
+          onChangeText={(text) => setMessage(text)}
           value={message}
         />
 
-      <View style={styles.signButton}>
-        <Button mode="contained" onPress={signMessageHandler}>
+        <Button
+          variant="contained"
+          onClick={signMessageHandler}
+          sx={{ width: "200px", px: 4, py: 1, mt: 2 }}
+        >
           Sign
         </Button>
-      </View>
-    </View>
+      </Stack>
+    </Layout>
   );
 };