package.json

@@ -13,7 +13,6 @@
     "@ethersproject/shims": "^5.7.0",
     "@hookform/resolvers": "^3.3.4",
     "@json-rpc-tools/utils": "^1.7.6",
-    "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.4",
     "@react-navigation/elements": "^1.3.30",

src/components/Accounts.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { List } from "react-native-paper";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 import { useNavigation } from "@react-navigation/native";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
@@ -17,13 +16,7 @@ import ConfirmDialog from "./ConfirmDialog";
 import { getNamespaces } from "../utils/wallet-connect/helpers";
 import ShowPKDialog from "./ShowPKDialog";
 import { setInternetCredentials } from "../utils/key-store";
-import {
+import { Button, Link, Stack } from "@mui/material";
-  Accordion,
-  AccordionSummary,
-  Button,
-  Link,
-  Stack,
-} from "@mui/material";
 import { LoadingButton } from "@mui/lab";
 
 const Accounts = () => {
@@ -131,12 +124,13 @@ const Accounts = () => {
           updateAccounts={updateAccounts}
           pathCode={pathCode}
         />
-        <Accordion expanded={expanded} onClick={handlePress}>
+        <List.Accordion
-          <AccordionSummary
+          title={`Account ${currentIndex + 1}`}
-            expandIcon={<ExpandMoreIcon />}
+          expanded={expanded}
-          >{`Account ${currentIndex + 1}`}</AccordionSummary>
+          onPress={handlePress}
+        >
           {renderAccountItems()}
-        </Accordion>
+        </List.Accordion>
 
         <Stack direction="row" spacing={3} sx={{ mt: 4 }}>
           <LoadingButton

src/components/Container.tsx

@@ -1,16 +0,0 @@
-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/components/NetworkDropdown.tsx

@@ -1,12 +1,10 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
-import { View } from "react-native";
+import { View } from 'react-native';
-import { List } from "react-native-paper";
+import { List } from 'react-native-paper';
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import { NetworkDropdownProps, NetworksDataState } from "../types";
+import { NetworkDropdownProps, NetworksDataState } from '../types';
-import styles from "../styles/stylesheet";
+import styles from '../styles/stylesheet';
-import { useNetworks } from "../context/NetworksContext";
+import { useNetworks } from '../context/NetworksContext';
-import { Accordion, AccordionSummary } from "@mui/material";
 
 const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => {
   const { networksData, selectedNetwork, setSelectedNetwork } = useNetworks();
@@ -21,19 +19,18 @@ const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => {
 
   return (
     <View style={styles.networkDropdown}>
-      <Accordion expanded={expanded} onClick={() => setExpanded(!expanded)}>
+      <List.Accordion
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        title={selectedNetwork!.networkName}
-          {selectedNetwork!.networkName}
+        expanded={expanded}
-        </AccordionSummary>
+        onPress={() => setExpanded(!expanded)}>
-
+        {networksData.map(networkData => (
-        {networksData.map((networkData) => (
           <List.Item
             key={networkData.networkId}
             title={networkData.networkName}
             onPress={() => handleNetworkPress(networkData)}
           />
         ))}
-      </Accordion>
+      </List.Accordion>
     </View>
   );
 };

src/index.tsx

@@ -39,15 +39,6 @@ const navigationTheme: typeof DarkTheme = {
 
 const muiTheme = createTheme({
   components: {
-    MuiAccordion: {
-      defaultProps: {
-        sx: {
-          border: "1px solid #48474F",
-          borderBottomRightRadius: 3,
-          borderBottomLeftRadius: 3,
-        },
-      },
-    },
     MuiButton: {
       defaultProps: {
         color: "primary",
@@ -80,10 +71,6 @@ const muiTheme = createTheme({
     error: {
       main: "#B20710",
     },
-    background: {
-      default: "#0F0F0F",
-      paper: "#18181A",
-    },
   },
 });
 

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 { Button, Divider } from "@mui/material";
+import { Box, Button, Divider } from "@mui/material";
 
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { useNavigation } from "@react-navigation/native";
@@ -18,7 +18,6 @@ import { useAccounts } from "../context/AccountsContext";
 import { useWalletConnect } from "../context/WalletConnectContext";
 import { NetworksDataState, StackParamsList } from "../types";
 import { useNetworks } from "../context/NetworksContext";
-import { Container } from "../components/Container";
 
 const WCLogo = () => {
   return (
@@ -130,7 +129,7 @@ const HomeScreen = () => {
 
   return (
     <View style={styles.appContainer}>
-      <Container>
+      <Box sx={{ maxWidth: "752px", marginX: "auto" }}>
         {!isAccountsFetched ? (
           <View style={styles.spinnerContainer}>
             <Text style={styles.LoadingText}>Loading...</Text>
@@ -170,7 +169,7 @@ const HomeScreen = () => {
           hideDialog={hideResetDialog}
           onConfirm={confirmResetWallet}
         />
-      </Container>
+      </Box>
     </View>
   );
 };

yarn.lock

@@ -2602,13 +2602,6 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.4.tgz#a34de72acd7e81fdbcc7eeb07786205e90dda148"
   integrity sha512-rNdHXhclwjEZnK+//3SR43YRx0VtjdHnUFhMSGYmAMJve+KiwEja/41EYh8V3pZKqF2geKyfcFUenTfDTYUR4w==
 
-"@mui/icons-material@^5.16.7":
-  version "5.16.7"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.16.7.tgz#e27f901af792065efc9f3d75d74a66af7529a10a"
-  integrity sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==
-  dependencies:
-    "@babel/runtime" "^7.23.9"
-
 "@mui/lab@^5.0.0-alpha.173":
   version "5.0.0-alpha.173"
   resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.173.tgz#a0f9696d93a765b48d69a7da5aaca0affa510ae8"