remove unused css classes

packages/app-extension/src/components/Unlocked/Approvals/ApproveMessage.tsx

@@ -1,5 +1,5 @@
 import { isKeyCold } from "@coral-xyz/recoil";
-import { styles, useCustomTheme } from "@coral-xyz/themes";
+import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes";
 import { Typography } from "@mui/material";
 import * as anchor from "@project-serum/anchor";
 import { useRecoilValue } from "recoil";
@@ -9,7 +9,7 @@ import { TextField } from "../../../plugin/Component";
 import { Cold } from "./ApproveTransaction";
 import { WithApproval } from ".";
 
-const useStyles = styles((theme) => ({
+const useStyles = makeStyles((theme) => ({
   title: {
     fontWeight: 500,
     fontSize: "18px",

packages/app-extension/src/components/Unlocked/Approvals/ApproveTransaction.tsx

@@ -5,7 +5,7 @@ import {
   useTransactionData,
   useWalletBlockchain,
 } from "@coral-xyz/recoil";
-import { styles } from "@coral-xyz/themes";
+import { styles as makeStyles } from "@coral-xyz/themes";
 import { Block as BlockIcon } from "@mui/icons-material";
 import { Typography } from "@mui/material";
 import { BigNumber, ethers } from "ethers";
@@ -16,7 +16,7 @@ import { WithApproval } from "../../Unlocked/Approvals";
 
 const { Zero } = ethers.constants;
 
-const useStyles = styles((theme) => ({
+const useStyles = makeStyles((theme) => ({
   title: {
     fontWeight: 500,
     fontSize: "18px",
@@ -37,11 +37,6 @@ const useStyles = styles((theme) => ({
     textAlign: "center",
     marginTop: "8px",
   },
-  link: {
-    cursor: "pointer",
-    color: theme.custom.colors.secondary,
-    textDecoration: "underline",
-  },
   negative: {
     color: theme.custom.colors.negative,
   },

packages/app-extension/src/components/Unlocked/ApproveTransactionRequest.tsx

@@ -30,7 +30,7 @@ import {
   useTransactionData,
   useTransactionRequest,
 } from "@coral-xyz/recoil";
-import { styles, useCustomTheme } from "@coral-xyz/themes";
+import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes";
 import { Typography } from "@mui/material";
 import * as anchor from "@project-serum/anchor";
 import type { ConfirmOptions, SendOptions } from "@solana/web3.js";
@@ -47,24 +47,7 @@ import { ErrorTransaction } from "./XnftPopovers/ErrorTransaction";
 import { Sending } from "./XnftPopovers/Sending";
 import { Success } from "./XnftPopovers/Success";
 
-const useStyles = styles((theme) => ({
-  confirmRow: {
-    display: "flex",
-    justifyContent: "space-between",
-    marginBottom: "8px",
-  },
-  confirmRowLabelLeft: {
-    fontSize: "12px",
-    lineHeight: "16px",
-    fontWeight: 500,
-    color: theme.custom.colors.secondary,
-  },
-  confirmRowLabelRight: {
-    fontSize: "12px",
-    lineHeight: "16px",
-    fontWeight: 500,
-    color: theme.custom.colors.fontColor,
-  },
+const useStyles = makeStyles((theme) => ({
   approveTableRoot: {
     backgroundColor: `${theme.custom.colors.approveTransactionTableBackground} !important`,
     "&:hover": {

packages/app-extension/src/components/Unlocked/Balances/BalanceSummaryWidget.tsx

@@ -3,47 +3,23 @@ import {
   totalBalance as totalBalanceSelector,
   useLoader,
 } from "@coral-xyz/recoil";
-import { HOVER_OPACITY, styles, useCustomTheme } from "@coral-xyz/themes";
+import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes";
 import { Skeleton, Typography } from "@mui/material";
 
-const useStyles = styles((theme) => ({
-  button: {
-    color: "#fff",
-    "&:hover": {
-      opacity: 1,
-    },
-    "&:hover p": {
-      opacity: HOVER_OPACITY,
-    },
-  },
+const useStyles = makeStyles(() => ({
   balancesHeaderContainer: {
     paddingLeft: "24px",
     paddingRight: "24px",
     marginTop: "24px",
     width: "100%",
     borderRadius: "12px",
   },
-  headerLabel: {
-    fontSize: "16px",
-    fontWeight: 500,
-    lineHeight: "24px",
-  },
   totalBalance: {
     fontWeight: 600,
     fontSize: "40px",
     lineHeight: "36px",
     color: "inherit",
   },
-  positive: {
-    color: `${theme.custom.colors.positive} !important`,
-    fontSize: "12px",
-    lineHeight: "24px",
-  },
-  negative: {
-    color: theme.custom.colors.negative,
-    fontSize: "12px",
-    lineHeight: "24px",
-  },
 }));
 
 export function BalanceSummaryWidget() {

packages/app-extension/src/components/Unlocked/Balances/Balances.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import type { Blockchain } from "@coral-xyz/common";
 import { formatUSD, proxyImageUrl, toTitleCase } from "@coral-xyz/common";
-import { isAggregateWallets, useBlockchainLogo } from "@coral-xyz/recoil";
+import { getBlockchainLogo, isAggregateWallets } from "@coral-xyz/recoil";
 import { styles, useCustomTheme } from "@coral-xyz/themes";
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import {
@@ -281,7 +281,7 @@ export function _BalancesTableHead({
   const classes = useStyles();
   const theme = useCustomTheme();
   const title = toTitleCase(blockchain);
-  const iconUrl = useBlockchainLogo(blockchain);
+  const iconUrl = getBlockchainLogo(blockchain);
   const _isAggregateWallets = useRecoilValue(isAggregateWallets);
   return (
     <div

packages/app-extension/src/components/Unlocked/Balances/RecentActivity.tsx

@@ -8,15 +8,15 @@ import {
   Loading,
 } from "@coral-xyz/react-common";
 import {
+  getBlockchainLogo,
   useActiveWallet,
   useBlockchainConnectionUrl,
   useBlockchainExplorer,
-  useBlockchainLogo,
   useRecentEthereumTransactions,
   useRecentSolanaTransactions,
   useRecentTransactions,
 } from "@coral-xyz/recoil";
-import { styles, useCustomTheme } from "@coral-xyz/themes";
+import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes";
 import { CallMade, Check, Clear } from "@mui/icons-material";
 import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
 import { IconButton, List, ListItem, Typography } from "@mui/material";
@@ -29,25 +29,7 @@ import {
 
 import { _RecentSolanaActivityList } from "./RecentSolanaActivity/RecentSolanaActivityList";
 
-const useStyles = styles((theme) => ({
-  recentActivityLabel: {
-    color: theme.custom.colors.fontColor,
-    fontWeight: 500,
-    fontSize: "14px",
-    lineHeight: "24px",
-  },
-  allWalletsLabel: {
-    fontWeight: 500,
-    fontSize: "12px",
-    color: theme.custom.colors.secondary,
-  },
-  noRecentActivityLabel: {
-    fontWeight: 500,
-    fontSize: "16px",
-    padding: "16px",
-    textAlign: "center",
-    color: theme.custom.colors.secondary,
-  },
+const useStyles = makeStyles((theme) => ({
   recentActivityListItemIconContainer: {
     width: "44px",
     height: "44px",
@@ -265,6 +247,7 @@ export function _RecentActivityList({
       >
         {transactions.map((tx: any, idx: number) => (
           <RecentActivityListItem
+            // eslint-disable-next-line react/no-array-index-key
             key={idx}
             transaction={tx}
             isFirst={idx === 0}
@@ -283,7 +266,7 @@ function RecentActivityListItem({ transaction, isFirst, isLast }: any) {
   const theme = useCustomTheme();
   const explorer = useBlockchainExplorer(transaction.blockchain);
   const connectionUrl = useBlockchainConnectionUrl(transaction.blockchain);
-  const blockchainLogo = useBlockchainLogo(transaction.blockchain);
+  const blockchainLogo = getBlockchainLogo(transaction.blockchain);
   const onClick = () => {
     window.open(explorerUrl(explorer!, transaction.signature, connectionUrl!));
   };

packages/app-extension/src/components/Unlocked/Balances/TokensWidget/Deposit.tsx

@@ -2,11 +2,11 @@ import { useState } from "react";
 import { Blockchain } from "@coral-xyz/common";
 import { SecondaryButton } from "@coral-xyz/react-common";
 import {
+  getBlockchainLogo,
   useAllWalletsDisplayed,
-  useBlockchainLogo,
   useWalletName,
 } from "@coral-xyz/recoil";
-import { styles, useCustomTheme } from "@coral-xyz/themes";
+import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import QrCodeIcon from "@mui/icons-material/QrCode";
 import { IconButton, Modal, Typography } from "@mui/material";
@@ -73,19 +73,19 @@ function BlockchainDepositCard({
   const [tooltipOpen, setTooltipOpen] = useState(false);
   const [tooltipOpenModal, setTooltipOpenModal] = useState(false);
   const [showQrCode, setShowQrCode] = useState(false);
-  const blockchainLogo = useBlockchainLogo(blockchain);
+  const blockchainLogo = getBlockchainLogo(blockchain);
   const blockchainDisplay =
     blockchain.slice(0, 1).toUpperCase() + blockchain.slice(1);
 
-  const onCopy = () => {
+  const onCopy = async () => {
     setTooltipOpen(true);
     setTimeout(() => setTooltipOpen(false), 1000);
-    navigator.clipboard.writeText(publicKey.toString());
+    await navigator.clipboard.writeText(publicKey.toString());
   };
-  const onCopyModal = () => {
+  const onCopyModal = async () => {
     setTooltipOpenModal(true);
     setTimeout(() => setTooltipOpenModal(false), 1000);
-    navigator.clipboard.writeText(publicKey.toString());
+    await navigator.clipboard.writeText(publicKey.toString());
   };
   const onQrCode = () => {
     setShowQrCode(true);
@@ -305,7 +305,7 @@ function BlockchainDepositCard({
   );
 }
 
-const useStyles = styles((theme) => ({
+const useStyles = makeStyles((theme) => ({
   subtext: {
     width: "264px",
     marginLeft: "auto",
@@ -350,17 +350,6 @@ const useStyles = styles((theme) => ({
       cursor: "pointer",
     },
   },
-  copyButton: {
-    background: "transparent",
-    padding: 0,
-  },
-  copyButtonLabel: {
-    color: theme.custom.colors.brandColor,
-    fontWeight: 500,
-    fontSize: "14px",
-    lineHeight: "24px",
-    textTransform: "none",
-  },
 }));
 
 export function _Deposit({
@@ -380,10 +369,10 @@ export function _Deposit({
     "..." +
     publicKey.toString().slice(publicKey.toString().length - 12);
 
-  const onCopy = () => {
+  const onCopy = async () => {
     setTooltipOpen(true);
     setTimeout(() => setTooltipOpen(false), 1000);
-    navigator.clipboard.writeText(publicKey.toString());
+    await navigator.clipboard.writeText(publicKey.toString());
   };
 
   return (
@@ -456,8 +445,12 @@ export function _Deposit({
       </div>
       <div>
         <Typography className={classes.subtext}>
-          {blockchain === Blockchain.SOLANA ? <>This address can only receive SOL and SPL tokens on Solana.</> : null}
-          {blockchain === Blockchain.ETHEREUM ? <>This address can only receive ETH and ERC20 tokens on Ethereum.</> : null}
+          {blockchain === Blockchain.SOLANA ? (
+            <>This address can only receive SOL and SPL tokens on Solana.</>
+          ) : null}
+          {blockchain === Blockchain.ETHEREUM ? (
+            <>This address can only receive ETH and ERC20 tokens on Ethereum.</>
+          ) : null}
         </Typography>
       </div>
     </div>

packages/app-extension/src/components/Unlocked/Balances/TokensWidget/Send.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { type ChangeEvent, useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import {
@@ -41,7 +42,7 @@ import {
   useNavigation,
   useUser,
 } from "@coral-xyz/recoil";
-import { styles, useCustomTheme } from "@coral-xyz/themes";
+import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes";
 import { Typography } from "@mui/material";
 import { TldParser } from "@onsol/tldparser";
 import type { Connection } from "@solana/web3.js";
@@ -59,7 +60,7 @@ import { SendEthereumConfirmationCard } from "./Ethereum";
 import { SendSolanaConfirmationCard } from "./Solana";
 import { WithHeaderButton } from "./Token";
 
-const useStyles = styles((theme) => ({
+const useStyles = makeStyles((theme) => ({
   topImage: {
     width: 80,
   },
@@ -85,46 +86,13 @@ const useStyles = styles((theme) => ({
     paddingTop: "24px",
     flex: 1,
   },
-  inputContainer: {
-    paddingLeft: "12px",
-    paddingRight: "12px",
-    marginBottom: -10,
-  },
   textRoot: {
     marginTop: "0 !important",
     marginBottom: "0 !important",
     "& .MuiOutlinedInput-root": {
       backgroundColor: `${theme.custom.colors.nav} !important`,
     },
   },
-  bottomHalfLabel: {
-    fontWeight: 500,
-    color: theme.custom.colors.secondary,
-    fontSize: "12px",
-    lineHeight: "16px",
-  },
-  confirmRow: {
-    display: "flex",
-    justifyContent: "space-between",
-    marginBottom: "8px",
-  },
-  confirmRowLabelLeft: {
-    fontSize: "12px",
-    lineHeight: "16px",
-    fontWeight: 500,
-    color: theme.custom.colors.secondary,
-  },
-  confirmRowLabelRight: {
-    fontSize: "12px",
-    lineHeight: "16px",
-    fontWeight: 500,
-    color: theme.custom.colors.fontColor,
-  },
-  confirmTableListItem: {
-    "&:hover": {
-      opacity: 1,
-    },
-  },
 }));
 
 export function SendButton({
@@ -208,7 +176,7 @@ export function Send({
     uuid?: string;
   };
 }) {
-  const classes = useStyles() as any;
+  const classes = useStyles();
   const { uuid } = useUser();
   const nav = useNavigationEphemeral();
   const { provider: solanaProvider } = useAnchorContext();
@@ -500,6 +468,7 @@ function SendV2({ token, maxAmount, setAmount, sendButton, to }: any) {
   const classes = useStyles();
   const theme = useCustomTheme();
   const isDarkMode = useDarkMode();
+  // eslint-disable-next-line react/hook-use-state
   const [_amount, _setAmount] = useState<string>("");
 
   return (