fix: review issues

schmanu · Dec 1, 2023 · cf8a139 · cf8a139
1 parent b06ba41
commit cf8a139
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/src/components/ApprovalDialog.tsx b/src/components/ApprovalDialog.tsx
@@ -97,7 +97,9 @@ export const ApprovalDialog = observer((props: ApprovalDialogProps) => {
                         }}
                       >
                         {changeApprovalItems.map((item) => (
-                          <MenuItem value={item.id}>{item.label}</MenuItem>
+                          <MenuItem key={item.id} value={item.id}>
+                            {item.label}
+                          </MenuItem>
                         ))}
                       </Select>
                       <TextField

diff --git a/src/components/approvallist/ApprovalEntry.tsx b/src/components/approvallist/ApprovalEntry.tsx
@@ -24,6 +24,8 @@ export const ApprovalEntry = observer(({ approval }: ApprovalEntryProps) => {
 
   const tokenBalance = balances.items.find((item) => item.tokenInfo.address === approval.tokenAddress);
 
+  const tokenInfo = tokenMap.get(approval.tokenAddress);
+
   return (
     <ColumnGrid style={{ borderBottom: `1px solid ${theme.palette.border.main}` }}>
       <FlexRowWrapper>
@@ -40,13 +42,9 @@ export const ApprovalEntry = observer(({ approval }: ApprovalEntryProps) => {
         </div>
       </FlexRowWrapper>
       <FlexRowWrapper>
-        <Avatar
-          src={tokenMap?.get(approval.tokenAddress)?.logoUri}
-          sx={{ width: '24px', height: '24px' }}
-          alt={tokenMap?.get(approval.tokenAddress)?.symbol}
-        />
+        <Avatar src={tokenInfo?.logoUri} sx={{ width: '24px', height: '24px' }} alt={tokenInfo?.symbol} />
         <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <Typography fontWeight={700}>{tokenMap?.get(approval.tokenAddress)?.symbol}</Typography>
+          <Typography fontWeight={700}>{tokenInfo?.symbol}</Typography>
           <EthHashInfo address={approval.tokenAddress} showAvatar={false} />
         </div>
       </FlexRowWrapper>

diff --git a/src/components/approvallist/ApprovalHeader.tsx b/src/components/approvallist/ApprovalHeader.tsx
@@ -22,6 +22,7 @@ export const ApprovalHeader = observer(() => {
   const { uiStore } = useContext(StoreContext);
   const [approvalDialogOpen, setApprovalDialogOpen] = useState(false);
   const theme = useTheme();
+  const hasSelectedApprobals = uiStore.selectedApprovals.length > 0;
 
   return (
     <>
@@ -37,8 +38,8 @@ export const ApprovalHeader = observer(() => {
         <Box display="flex" flexDirection="row" gap={2}>
           <Settings />
           <Button
-            variant={uiStore.selectedApprovals.length === 0 ? 'outlined' : 'contained'}
-            disabled={uiStore.selectedApprovals.length === 0}
+            variant={hasSelectedApprobals ? 'contained' : 'outlined'}
+            disabled={!hasSelectedApprobals}
             size="large"
             onClick={() => setApprovalDialogOpen(true)}
           >

diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 const isSystemDarkMode = (): boolean => {
-  if (typeof window === 'undefined' || !window.matchMedia) return false;
+  if (!window.matchMedia) return false;
   return window.matchMedia('(prefers-color-scheme: dark)').matches;
 };
 
@@ -11,7 +11,6 @@ export const useDarkMode = (): boolean => {
   useEffect(() => {
     const isDark = isSystemDarkMode();
     setIsDarkMode(isDark);
-    document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
   }, []);
 
   return isDarkMode;