Add tooltip to "Remind to Vote" Button if email is unavailable

react-app/src/components/ProposalDetailScreen/ProposalVotesPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import cn from "classnames";
 import { Link, useOutletContext, useSearchParams } from "react-router-dom";
 import { toast } from "react-toastify";
@@ -15,6 +15,8 @@ import { useLocale } from "../../providers/AppLocaleProvider";
 import AppButton from "../common/Buttons/AppButton";
 import AppRoutes from "../../navigation/AppRoutes";
 import { useEffectOnce } from "../../hooks/useEffectOnce";
+import { validateEmail } from "../../utils/regex";
+import Tooltip from "../common/Tooltip/Tooltip";
 import {
   Proposal,
   ProposalVote,
@@ -152,26 +154,54 @@ const RemindToVoteButton: React.FC<{
   proposal: Proposal;
   vote: ProposalVote;
 }> = ({ proposal, vote }) => {
+  const { translate } = useLocale();
+  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
+  const [buttonRef, setButtonRef] = useState<HTMLElement | null>(null);
+
   if (
     vote.option != null ||
     vote.voter.__typename !== "Validator" ||
-    vote.voter.securityContact == null ||
     proposal.status !== ProposalStatus.VotingPeriod
   ) {
     return null;
   }
 
-  const email: string = vote.voter.securityContact;
+  const email = vote.voter.securityContact;
+  const validatedEmail: string | null =
+    email && validateEmail(email) ? email : null;
 
   return (
-    <AppButton
-      type="anchor"
-      theme="secondary"
-      size="regular"
-      className={cn("border", "border-app-grey")}
-      messageID="ProposalDetail.votes.remindToVote"
-      href={`mailto:${email}`}
-    />
+    <div
+      ref={setContainerRef}
+      className={cn("flex", "cursor-not-allowed", "justify-end")}
+    >
+      <AppButton
+        type="anchor"
+        theme="secondary"
+        size="regular"
+        ref={setButtonRef}
+        className={cn(
+          "border",
+          "border-app-grey",
+          validatedEmail == null
+            ? cn("bg-gray-300", "pointer-events-none")
+            : null
+        )}
+        messageID="ProposalDetail.votes.remindToVote"
+        href={validatedEmail != null ? `mailto:${validatedEmail}` : ""}
+      />
+      {validatedEmail == null && (
+        <Tooltip
+          parentElement={buttonRef}
+          triggerElement={containerRef}
+          content={translate("ProposalDetail.votes.voter.noSecurityContact")}
+          popperOptions={{
+            placement: "bottom-start",
+            modifiers: [{ name: "offset", options: { offset: [20, 10] } }],
+          }}
+        />
+      )}
+    </div>
   );
 };
 

react-app/src/components/common/Buttons/IconButton.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useState } from "react";
 import cn from "classnames";
-import { usePopper } from "react-popper";
 import { Icon, IconType } from "../Icons/Icons";
 import Tooltip from "../Tooltip/Tooltip";
 
@@ -18,23 +17,7 @@ interface IconButtonProps
 const IconButton: React.FC<IconButtonProps> = (props) => {
   const { icon, size, className, tooltip, onClick: onClick_, ...rest } = props;
 
-  const [showTooltip, setShowTooltip] = useState<boolean>(false);
   const [refEle, setRefEle] = useState<HTMLButtonElement | null>(null);
-  const [tooltipEle, setTooltipEle] = useState<HTMLDivElement | null>(null);
-
-  const { styles, attributes, update } = usePopper(refEle, tooltipEle, {
-    placement: "bottom",
-  });
-
-  const handleMouseEnter = useCallback(() => {
-    setShowTooltip(true);
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    update?.();
-  }, [update]);
-
-  const handleMouseLeave = useCallback(() => {
-    setShowTooltip(false);
-  }, []);
 
   const onClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -51,18 +34,15 @@ const IconButton: React.FC<IconButtonProps> = (props) => {
         className={cn("p-2", "hover:bg-gray-100", "rounded-full", className)}
         onClick={onClick}
         ref={setRefEle}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
         {...rest}
       >
         <Icon icon={icon} height={size} width={size} />
       </button>
-      {showTooltip && (
+      {tooltip && (
         <Tooltip
-          ref={setTooltipEle}
-          style={styles.popper}
           content={tooltip}
-          {...attributes.popper}
+          parentElement={refEle}
+          popperOptions={{ placement: "bottom" }}
         />
       )}
     </>

react-app/src/components/common/ColorBar/ColorBar.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import cn from "classnames";
 import BigNumber from "bignumber.js";
-import { usePopper } from "react-popper";
 import { useWindowEvent } from "../../../hooks/useWindowEvent";
 import Tooltip from "../Tooltip/Tooltip";
 
@@ -48,13 +47,7 @@ const ColorBarSection: React.FC<ColorBarSectionProps> = (props) => {
     null
   );
 
-  const [showTooltip, setShowTooltip] = useState<boolean>(false);
   const [refEle, setRefEle] = useState<HTMLDivElement | null>(null);
-  const [tooltipEle, setTooltipEle] = useState<HTMLDivElement | null>(null);
-
-  const { styles, attributes, update } = usePopper(refEle, tooltipEle, {
-    placement: "bottom",
-  });
 
   const percentage = useMemo(() => {
     if (total.isZero()) {
@@ -87,18 +80,6 @@ const ColorBarSection: React.FC<ColorBarSectionProps> = (props) => {
     }
   }, [percentageEl, showPercentage]);
 
-  const handleMouseEnter = useCallback(() => {
-    if (!showPercentage) return;
-
-    setShowTooltip(true);
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    update?.();
-  }, [showPercentage, update]);
-
-  const handleMouseLeave = useCallback(() => {
-    setShowTooltip(false);
-  }, []);
-
   useEffect(() => {
     handlePercentageDisplay();
   }, [handlePercentageDisplay]);
@@ -122,8 +103,6 @@ const ColorBarSection: React.FC<ColorBarSectionProps> = (props) => {
           width: percentage,
         }}
         ref={setRefEle}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
       >
         <span
           ref={setPercentageEl}
@@ -132,15 +111,12 @@ const ColorBarSection: React.FC<ColorBarSectionProps> = (props) => {
           {percentage}
         </span>
       </div>
-      {showTooltip && (
-        <div>
-          <Tooltip
-            ref={setTooltipEle}
-            style={styles.popper}
-            content={percentage}
-            {...attributes.popper}
-          />
-        </div>
+      {showPercentage && (
+        <Tooltip
+          parentElement={refEle}
+          content={percentage}
+          popperOptions={{ placement: "bottom" }}
+        />
       )}
     </>
   );

react-app/src/components/common/Tooltip/Tooltip.tsx

@@ -1,45 +1,82 @@
-import React, { Fragment } from "react";
+import React, { useCallback, useLayoutEffect, useState } from "react";
 import cn from "classnames";
 import { Transition } from "@headlessui/react";
+import { usePopper } from "react-popper";
+import { Options } from "@popperjs/core";
 
 interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+  popperOptions?: Partial<Options>;
+  parentElement: HTMLElement | null;
+  triggerElement?: HTMLElement | null;
   content: React.ReactNode | string;
 }
 
-const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
-  const { content, ...rest } = props;
+const Tooltip: React.FC<TooltipProps> = (props) => {
+  const { content, popperOptions, parentElement, triggerElement, ...rest } =
+    props;
+
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+  const [tooltipEle, setTooltipEle] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(
+    parentElement,
+    tooltipEle,
+    popperOptions
+  );
+
+  const handleMouseEnter = useCallback(() => {
+    setShowTooltip(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setShowTooltip(false);
+  }, []);
+
+  useLayoutEffect(() => {
+    const element = triggerElement ?? parentElement;
+    element?.addEventListener("mouseenter", handleMouseEnter);
+    element?.addEventListener("mouseleave", handleMouseLeave);
+
+    return () => {
+      element?.removeEventListener("mouseenter", handleMouseEnter);
+      element?.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [handleMouseEnter, handleMouseLeave, parentElement, triggerElement]);
+
   return (
-    <div ref={ref} {...rest}>
-      <Transition
-        show={true}
-        static={true}
-        as={Fragment}
-        enter="transition-opacity duration-150"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-        leave="transition-opacity duration-150"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
+    <Transition
+      ref={setTooltipEle}
+      show={showTooltip}
+      static={true}
+      style={styles.popper}
+      as={"div"}
+      enter="transition-opacity duration-150"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity duration-150"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      {...attributes.popper}
+      {...rest}
+    >
+      <div
+        role="tooltip"
+        className={cn(
+          "bg-gray-600",
+          "text-white",
+          "text-xs",
+          "h-min",
+          "py-1",
+          "px-2",
+          "rounded-md",
+          "z-50",
+          "transition-opacity"
+        )}
       >
-        <div
-          role="tooltip"
-          className={cn(
-            "bg-gray-600",
-            "text-white",
-            "text-xs",
-            "h-min",
-            "py-1",
-            "px-2",
-            "rounded-md",
-            "z-50",
-            "transition-opacity"
-          )}
-        >
-          {content}
-        </div>
-      </Transition>
-    </div>
+        {content}
+      </div>
+    </Transition>
   );
-});
+};
 
 export default Tooltip;

react-app/src/i18n/translations/en.json

@@ -100,6 +100,7 @@
   "ProposalDetail.votes.remindToVote": "Remind to vote",
   "ProposalDetail.votes.requestState.error": "Failed to fetch proposal votes, please try again later.",
   "ProposalDetail.votes.voter": "Voter",
+  "ProposalDetail.votes.voter.noSecurityContact": "Contact information for this validator is not available",
   "ProposalDetail.votes.voter.validator": "Validator",
   "ProposalDetail.votingDateRange": "{from} to {to}",
   "ProposalDetail.votingDurationRemaining": "{duration} left",

react-app/src/i18n/translations/zh.json

@@ -100,6 +100,7 @@
   "ProposalDetail.votes.remindToVote": "Remind to vote",
   "ProposalDetail.votes.requestState.error": "Failed to fetch proposal votes, please try again later.",
   "ProposalDetail.votes.voter": "Voter",
+  "ProposalDetail.votes.voter.noSecurityContact": "Contact information for this validator is not available",
   "ProposalDetail.votes.voter.validator": "Validator",
   "ProposalDetail.votingDateRange": "{from} 至 {to}",
   "ProposalDetail.votingDurationRemaining": "剩餘{duration}",

react-app/src/utils/__tests__/regex.ts

@@ -0,0 +1,33 @@
+import { validateEmail } from "../regex";
+
+describe("validateEmail", () => {
+  it("should fail empty email", () => {
+    const email = "";
+
+    expect(validateEmail(email)).toBe(false);
+  });
+
+  it("should fail invalid email", () => {
+    const email = "invalid";
+
+    expect(validateEmail(email)).toBe(false);
+  });
+
+  it("should pass valid email", () => {
+    const email = "test@exmaple.com";
+
+    expect(validateEmail(email)).toBe(true);
+  });
+
+  it("should pass valid email with plus", () => {
+    const email = "test+2@example.com";
+
+    expect(validateEmail(email)).toBe(true);
+  });
+
+  it("should pass valid email with dots", () => {
+    const email = "test.hello.world@example.com";
+
+    expect(validateEmail(email)).toBe(true);
+  });
+});

react-app/src/utils/regex.ts

@@ -0,0 +1,9 @@
+const EMAIL_REGEX =
+  /^$|^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+export function validateEmail(e: string): boolean {
+  if (!e) {
+    return false;
+  }
+  return EMAIL_REGEX.test(e);
+}