bug fixes

ui/pages/Watchlist.tsx

@@ -13,6 +13,7 @@ import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
 import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
 import AddressModal from 'ui/watchlist/AddressModal/AddressModal';
 import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
@@ -28,6 +29,7 @@ const WatchList: React.FC = () => {
     },
   });
   const queryClient = useQueryClient();
+  const profileQuery = useProfileQuery();
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
@@ -93,6 +95,7 @@ const WatchList: React.FC = () => {
               isLoading={ isPlaceholderData }
               onDeleteClick={ onDeleteClick }
               onEditClick={ onEditClick }
+              hasEmail={ Boolean(profileQuery.data?.email) }
             />
           )) }
         </Box>
@@ -103,6 +106,7 @@ const WatchList: React.FC = () => {
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
             top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+            hasEmail={ Boolean(profileQuery.data?.email) }
           />
         </Box>
       </>

ui/snippets/user/profile/UserProfileContentNavLink.tsx

@@ -20,7 +20,7 @@ const UserProfileContentNavLink = ({ href, icon, text, onClick, py }: Props) =>
       alignItems="center"
       columnGap={ 3 }
       py={ py ?? '14px' }
-      color="initial"
+      color="inherit"
       _hover={{ textDecoration: 'none', color: 'link_hovered' }}
       onClick={ onClick }
     >

ui/watchlist/WatchlistTable/WatchListItem.tsx

@@ -17,9 +17,10 @@ interface Props {
   isLoading?: boolean;
   onEditClick: (data: WatchlistAddress) => void;
   onDeleteClick: (data: WatchlistAddress) => void;
+  hasEmail: boolean;
 }
 
-const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) => {
+const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick, hasEmail }: Props) => {
   const [ notificationEnabled, setNotificationEnabled ] = useState(item.notification_methods.email);
   const [ switchDisabled, setSwitchDisabled ] = useState(false);
   const onItemEditClick = useCallback(() => {
@@ -49,7 +50,7 @@ const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) =
   const showNotificationToast = useCallback((isOn: boolean) => {
     notificationToast({
       position: 'top-right',
-      description: isOn ? 'Email notification is ON' : 'Email notification is OFF',
+      description: !isOn ? 'Email notification is ON' : 'Email notification is OFF',
       colorScheme: 'green',
       status: 'success',
       variant: 'subtle',
@@ -103,7 +104,7 @@ const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) =
               isChecked={ notificationEnabled }
               onChange={ onSwitch }
               aria-label="Email notification"
-              isDisabled={ switchDisabled }
+              isDisabled={ !hasEmail || switchDisabled }
             />
           </Skeleton>
         </HStack>

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -21,9 +21,10 @@ interface Props {
   isLoading?: boolean;
   onEditClick: (data: WatchlistAddress) => void;
   onDeleteClick: (data: WatchlistAddress) => void;
+  hasEmail: boolean;
 }
 
-const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) => {
+const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick, hasEmail }: Props) => {
   const [ notificationEnabled, setNotificationEnabled ] = useState(item.notification_methods.email);
   const [ switchDisabled, setSwitchDisabled ] = useState(false);
   const onItemEditClick = useCallback(() => {
@@ -53,7 +54,7 @@ const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
   const showNotificationToast = useCallback((isOn: boolean) => {
     notificationToast({
       position: 'top-right',
-      description: isOn ? 'Email notification is ON' : 'Email notification is OFF',
+      description: !isOn ? 'Email notification is ON' : 'Email notification is OFF',
       colorScheme: 'green',
       status: 'success',
       variant: 'subtle',
@@ -101,7 +102,7 @@ const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
             size="md"
             isChecked={ notificationEnabled }
             onChange={ onSwitch }
-            isDisabled={ switchDisabled }
+            isDisabled={ !hasEmail || switchDisabled }
             aria-label="Email notification"
           />
         </Skeleton>

ui/watchlist/WatchlistTable/WatchlistTable.tsx

@@ -18,9 +18,10 @@ interface Props {
   onEditClick: (data: WatchlistAddress) => void;
   onDeleteClick: (data: WatchlistAddress) => void;
   top: number;
+  hasEmail: boolean;
 }
 
-const WatchlistTable = ({ data, isLoading, onDeleteClick, onEditClick, top }: Props) => {
+const WatchlistTable = ({ data, isLoading, onDeleteClick, onEditClick, top, hasEmail }: Props) => {
   return (
     <Table variant="simple" minWidth="600px">
       <TheadSticky top={ top }>
@@ -39,6 +40,7 @@ const WatchlistTable = ({ data, isLoading, onDeleteClick, onEditClick, top }: Pr
             isLoading={ isLoading }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
+            hasEmail={ hasEmail }
           />
         )) }
       </Tbody>