Fix black screen issue by migrating makeStyles to modern MUI patterns

Co-authored-by: 0xrinegade <[email protected]>

Author: Copilot

craco.config.js

@@ -3,6 +3,7 @@ const webpack = require('webpack');
 module.exports = {
   webpack: {
     configure: (webpackConfig) => {
+      // Add polyfills for node modules
       webpackConfig.resolve.fallback = {
         ...webpackConfig.resolve.fallback,
         crypto: require.resolve('crypto-browserify'),
@@ -20,12 +21,16 @@ module.exports = {
         tls: false,
       };
 
+      // Provide global variables for compatibility
       webpackConfig.plugins = [
         ...webpackConfig.plugins,
         new webpack.ProvidePlugin({
           Buffer: ['buffer', 'Buffer'],
           process: 'process/browser',
         }),
+        new webpack.DefinePlugin({
+          global: 'globalThis',
+        }),
       ];
 
       return webpackConfig;

src/components/AddTokenDialog.js

@@ -15,7 +15,7 @@ import { TOKENS } from '../utils/tokens/tokens'
 import { useUpdateTokenName } from '../utils/tokens/names';
 import { useAsyncData } from '../utils/fetch-loop';
 import LoadingIndicator from './LoadingIndicator';
-import { makeStyles, Tab, Tabs } from '@mui/material';
+import { Tab, Tabs } from '@mui/material';
 import { useSendTransaction } from '../utils/notifications';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
@@ -41,20 +41,12 @@ const feeFormat = new Intl.NumberFormat(undefined, {
   maximumFractionDigits: 6,
 });
 
-const useStyles = makeStyles((theme) => ({
-  tabs: {
-    marginBottom: theme.spacing(1),
-    borderBottom: `1px solid ${theme.palette.background.paper}`,
-  },
-}));
-
 export default function AddTokenDialog({ open, onClose }) {
   let wallet = useWallet();
   let [tokenAccountCost] = useAsyncData(
     wallet.tokenAccountCost,
     wallet.tokenAccountCost,
   );
-  let classes = useStyles();
   let updateTokenName = useUpdateTokenName();
   const [sendTransaction, sending] = useSendTransaction();
   const { endpoint } = useConnectionConfig();
@@ -131,7 +123,10 @@ export default function AddTokenDialog({ open, onClose }) {
             value={tab}
             textColor="primary"
             indicatorColor="primary"
-            className={classes.tabs}
+            sx={{
+              marginBottom: 1,
+              borderBottom: (theme) => `1px solid ${theme.palette.background.paper}`,
+            }}
             onChange={(e, value) => setTab(value)}
           >
             <Tab label="Popular Tokens" value="popular" />

src/components/LoadingIndicator.js

@@ -1,25 +1,13 @@
 import React, { useState } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
+import Box from '@mui/material/Box';
 import { useEffectAfterTimeout } from '../utils/utils';
-import { makeStyles } from '@mui/material/styles';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%',
-    padding: theme.spacing(2),
-  },
-}));
 
 export default function LoadingIndicator({
   height = null,
   delay = 500,
   ...rest
 }) {
-  const classes = useStyles();
   const [visible, setVisible] = useState(false);
 
   useEffectAfterTimeout(() => setVisible(true), delay);
@@ -34,8 +22,19 @@ export default function LoadingIndicator({
   }
 
   return (
-    <div className={classes.root} style={style} {...rest}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        padding: 2,
+      }}
+      style={style}
+      {...rest}
+    >
       <CircularProgress />
-    </div>
+    </Box>
   );
 }

src/components/Navbar/NavigationFrame.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import Typography from '@mui/material/Typography';
-import { makeStyles } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
@@ -28,25 +27,6 @@ import { MobileFooter } from '../Footer/MobileFooter';
 
 export const footerHeight = isExtension ? 0 : 6;
 
-const useStyles = makeStyles((theme) => ({
-  content: {
-    flexGrow: 1,
-    paddingTop: 24,
-    paddingBottom: 24,
-    paddingLeft: 8,
-    paddingRight: 8,
-  },
-  title: {
-    flexGrow: 1,
-  },
-  button: {
-    marginLeft: 8,
-  },
-  menuItemIcon: {
-    minWidth: 32,
-  },
-}));
-
 const StyledMain = styled.main`
   height: ${(props) =>
     props.isConnectPopup
@@ -97,7 +77,6 @@ export function WalletSelector() {
   ] = useState(false);
   const [deleteMnemonicOpen, setDeleteMnemonicOpen] = useState(false);
   const [exportMnemonicOpen, setExportMnemonicOpen] = useState(false);
-  const classes = useStyles();
 
   if (accounts.length === 0) {
     return null;
@@ -148,7 +127,7 @@ export function WalletSelector() {
         <Button
           color="inherit"
           onClick={(e) => setAnchorEl(e.target)}
-          className={classes.button}
+          sx={{ marginLeft: 1 }}
         >
           Account
         </Button>
@@ -180,7 +159,7 @@ export function WalletSelector() {
             selected={isSelected}
             component="div"
           >
-            <ListItemIcon className={classes.menuItemIcon}>
+            <ListItemIcon sx={{ minWidth: 32 }}>
               {isSelected ? <CheckIcon fontSize="small" /> : null}
             </ListItemIcon>
             <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -193,7 +172,7 @@ export function WalletSelector() {
         ))}
         <Divider />
         <MenuItem onClick={() => setAddHardwareWalletDialogOpen(true)}>
-          <ListItemIcon className={classes.menuItemIcon}>
+          <ListItemIcon sx={{ minWidth: 32 }}>
             <UsbIcon fontSize="small" />
           </ListItemIcon>
           Import Hardware Wallet
@@ -204,7 +183,7 @@ export function WalletSelector() {
             setAddAccountOpen(true);
           }}
         >
-          <ListItemIcon className={classes.menuItemIcon}>
+          <ListItemIcon sx={{ minWidth: 32 }}>
             <AddIcon fontSize="small" />
           </ListItemIcon>
           Add Account
@@ -215,7 +194,7 @@ export function WalletSelector() {
             setExportMnemonicOpen(true);
           }}
         >
-          <ListItemIcon className={classes.menuItemIcon}>
+          <ListItemIcon sx={{ minWidth: 32 }}>
             <ImportExportIcon fontSize="small" />
           </ListItemIcon>
           Export Mnemonic
@@ -226,7 +205,7 @@ export function WalletSelector() {
             setDeleteMnemonicOpen(true);
           }}
         >
-          <ListItemIcon className={classes.menuItemIcon}>
+          <ListItemIcon sx={{ minWidth: 32 }}>
             <ExitToApp fontSize="small" />
           </ListItemIcon>
           Delete Mnemonic
@@ -236,19 +215,12 @@ export function WalletSelector() {
   );
 }
 
-const useFooterStyles = makeStyles((theme) => ({
-  footer: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-}));
-
 const FooterComponent = styled.footer`
   height: 6rem;
   padding: 0 3rem 0 3rem;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   @media (max-width: 540px) {
     padding: 0;
     height: 0;
@@ -265,17 +237,15 @@ const FooterComponentForExtension = styled.footer`
 `;
 
 function Footer() {
-  const classes = useFooterStyles();
   const isConnectPopup = window.opener;
-  // const theme = useTheme();
   const location = useLocation();
   console.log('location', location);
 
   if (isConnectPopup) return null
 
   return (
     <>
-      <FooterComponent className={classes.footer}>
+      <FooterComponent>
         <span
           style={{
             fontSize: '1.3rem',

src/components/TokenInfoDialog.js

@@ -7,19 +7,6 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogForm from '../pages/Wallet/components/DialogForm';
 import { abbreviateAddress } from '../utils/utils';
 import CopyableDisplay from './CopyableDisplay';
-import { makeStyles } from '@mui/material/styles';
-
-const useStyles = makeStyles((theme) => ({
-  explorerLink: {
-    marginBottom: theme.spacing(2),
-  },
-  warning: {
-    marginBottom: theme.spacing(2),
-  },
-  container: {
-    minWidth: 600,
-  },
-}));
 
 export default function TokenInfoDialog({
   open,
@@ -29,19 +16,18 @@ export default function TokenInfoDialog({
 }) {
   let { mint, tokenName, tokenSymbol } = balanceInfo;
   const urlSuffix = useSolanaExplorerUrlSuffix();
-  const classes = useStyles();
 
   return (
     <DialogForm open={open} onClose={onClose}>
       <DialogTitle>
         {tokenName ?? abbreviateAddress(mint)}
         {tokenSymbol ? ` (${tokenSymbol})` : null}
       </DialogTitle>
-      <DialogContent className={classes.container}>
-        <Typography className={classes.warning}>
+      <DialogContent sx={{ minWidth: 600 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Information about {tokenName ?? abbreviateAddress(mint)}
         </Typography>
-        <Typography variant="body2" className={classes.explorerLink}>
+        <Typography variant="body2" sx={{ marginBottom: 2 }}>
           <Link
             href={
               `https://explorer.solana.com/account/${publicKey.toBase58()}` +