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,6 +204,7 @@ const HomeScreen = () => {
           hideDialog={hideResetDialog}
           onConfirm={confirmResetWallet}
         />
+      </Container>
       <Portal>
         <Snackbar
           open={toastVisible}
@@ -213,7 +215,6 @@ const HomeScreen = () => {
           ContentProps={{ style: { backgroundColor: "red", color: "white" } }}
         />
       </Portal>
-      </Box>
     </View>
   );
 };