From f3b984d03e0bd26fa6ebb4124fdb9a2f53c6fb23 Mon Sep 17 00:00:00 2001
From: Fabian Vives <f.vives99@gmail.com>
Date: Wed, 19 Oct 2022 16:25:33 -0600
Subject: [PATCH] refactor(webapp): removed box component

---
 .../src/components/NetworkSelector/index.js   | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/webapp/src/components/NetworkSelector/index.js b/webapp/src/components/NetworkSelector/index.js
index 04c0df42..bd534e77 100644
--- a/webapp/src/components/NetworkSelector/index.js
+++ b/webapp/src/components/NetworkSelector/index.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import clsx from 'clsx'
-import Box from '@mui/material/Box'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 import Typography from '@mui/material/Typography'
@@ -100,25 +99,25 @@ const NetworkSelector = ({ title, options, networkLogo }) => {
   }, [options])
 
   return (
-    <Box className={classes.dropdown}>
-      <Box onClick={toggleDropdown} className={clsx(classes.toggle)}>
+    <div className={classes.dropdown}>
+      <div onClick={toggleDropdown} className={clsx(classes.toggle)}>
         {!open && <ExpandMoreIcon className={classes.expandIcon} />}
         {open && <ExpandLessIcon className={classes.expandIcon} />}
         <Typography component="p" variant="h5">
           {title}
         </Typography>
-      </Box>
-      <Box className={clsx(classes.list, { [classes.listActive]: open })}>
-        <Box className="titles">
-          <Box className="titlesBoxLeft">
+      </div>
+      <div className={clsx(classes.list, { [classes.listActive]: open })}>
+        <div className="titles">
+          <div className="titlesBoxLeft">
             <Typography>Mainnets</Typography>
-          </Box>
-          <Box className="titlesBoxRight">
+          </div>
+          <div className="titlesBoxRight">
             <Typography>Testnets</Typography>
-          </Box>
-        </Box>
-        <Box className="lists">
-          <Box className="listsBoxLeft">
+          </div>
+        </div>
+        <div className="lists">
+          <div className="listsBoxLeft">
             <ul>
               {networks.mainnet.map((option, i) => (
                 <li
@@ -134,8 +133,8 @@ const NetworkSelector = ({ title, options, networkLogo }) => {
                 </li>
               ))}
             </ul>
-          </Box>
-          <Box className="listsBoxRight">
+          </div>
+          <div className="listsBoxRight">
             <ul>
               {networks.testnet.map((option, i) => (
                 <li
@@ -151,13 +150,13 @@ const NetworkSelector = ({ title, options, networkLogo }) => {
                 </li>
               ))}
             </ul>
-          </Box>
-        </Box>
-      </Box>
-      <Box className={classes.networkLogo}>
+          </div>
+        </div>
+      </div>
+      <div className={classes.networkLogo}>
         <img src={networkLogo} alt="network logo" />
-      </Box>
-    </Box>
+      </div>
+    </div>
   )
 }