style: container

src/components/Container.tsx

@@ -0,0 +1,16 @@
+import { Box } from "@mui/material";
+import React, { PropsWithChildren } from "react";
+
+export const Container: React.FC<PropsWithChildren> = ({ children }) => (
+  <Box
+    sx={{
+      maxWidth: "752px",
+      marginX: "auto",
+      backgroundColor: "background.paper",
+      padding: 3,
+      borderRadius: 2,
+    }}
+  >
+    {children}
+  </Box>
+);

src/screens/HomeScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { View, ActivityIndicator, Image } from "react-native";
 import { Text } from "react-native-paper";
-import { Box, Button, Divider, Portal, Snackbar } from "@mui/material";
+import { Button, Divider, Portal, Snackbar } from "@mui/material";
 
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { useNavigation } from "@react-navigation/native";
@@ -19,6 +19,7 @@ import { NetworksDataState, StackParamsList } from "../types";
 import { useNetworks } from "../context/NetworksContext";
 import ImportWalletDialog from "../components/ImportWalletDialog";
 import { MnemonicDialog } from "../components/MnemonicDialog";
+import { Container } from "../components/Container";
 
 const WCLogo = () => {
   return (
@@ -148,7 +149,7 @@ const HomeScreen = () => {
 
   return (
     <View style={styles.appContainer}>
-      <Box sx={{ maxWidth: "752px", marginX: "auto" }}>
+      <Container>
         {!isAccountsFetched ? (
           <View style={styles.spinnerContainer}>
             <Text style={styles.LoadingText}>Loading...</Text>
@@ -203,17 +204,17 @@ const HomeScreen = () => {
           hideDialog={hideResetDialog}
           onConfirm={confirmResetWallet}
         />
-        <Portal>
+      </Container>
-          <Snackbar
+      <Portal>
-            open={toastVisible}
+        <Snackbar
-            autoHideDuration={3000}
+          open={toastVisible}
-            message={invalidMnemonicError}
+          autoHideDuration={3000}
-            onClose={() => setToastVisible(false)}
+          message={invalidMnemonicError}
-            anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
+          onClose={() => setToastVisible(false)}
-            ContentProps={{ style: { backgroundColor: "red", color: "white" } }}
+          anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
-          />
+          ContentProps={{ style: { backgroundColor: "red", color: "white" } }}
-        </Portal>
+        />
-      </Box>
+      </Portal>
     </View>
   );
 };