feat: add tooltip and fix time treshold

gnosischain · Sep 11, 2024 · fbf7509 · fbf7509
1 parent 1ebb063
commit fbf7509
Show file tree

Hide file tree

Showing 8 changed files with 163 additions and 31 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -11,7 +11,7 @@ export default function Page() {
         </div>
         <p className="text-xl">BEACON CHAIN DEPOSIT</p>
         <p className="text-xl my-8">Connect your wallet to get started:</p>
-        <Link href="/connect" className="bg-[#DD7143] px-8 py-4 rounded-full text-xl font-semibold outline outline-2 outline-transparent hover:outline-white/80 transition-all duration-300 ease-in-out">
+        <Link href="/connect" className="bg-accent px-8 py-4 rounded-full text-xl font-semibold outline outline-2 outline-transparent hover:outline-white/80 transition-all duration-300 ease-in-out">
           Connect Wallet
         </Link>
         <Link target="_blank" className="w-full flex justify-center mt-20 text-sm lg:text-base items-center underline hover:text-slate-200" href={"https://docs.gnosischain.com/node/"}>

diff --git a/components/dappnodeDeposit.tsx b/components/dappnodeDeposit.tsx
@@ -288,7 +288,7 @@ function Validation({
         </p>
       )}
       <button
-        className="bg-[#DD7143] px-4 py-1 rounded-full text-white mt-4 text-lg font-semibold"
+        className="bg-accent px-4 py-1 rounded-full text-white mt-4 text-lg font-semibold"
         onClick={onDeposit}
         >
         Claim
@@ -310,7 +310,7 @@ function SubmittedStatus({ tx }: { tx: `0x${string}` }) {
         <Link
           href={"https://gnosis.blockscout.com/tx/" + tx}
           target="_blank"
-          className="text-[#DD7143] underline ml-1"
+          className="text-accent underline ml-1"
         >
           here.
         </Link>

diff --git a/components/deposit.tsx b/components/deposit.tsx
@@ -1,23 +1,33 @@
 "use client";
 
 import useDeposit from "@/hooks/use-deposit";
-import { ArrowUturnLeftIcon, InformationCircleIcon, CheckIcon } from "@heroicons/react/20/solid";
+import {
+  ArrowUturnLeftIcon,
+  InformationCircleIcon,
+  CheckIcon,
+} from "@heroicons/react/20/solid";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { FileRejection } from "react-dropzone";
 import Loader from "./loader";
 import Link from "next/link";
 import { ContractNetwork } from "@/utils/contracts";
+import ToolTip from "./tooltip";
 
 interface DepositProps {
   contractConfig: ContractNetwork | undefined;
   address: `0x${string}` | undefined;
   chainId: number;
 }
 
-export default function Deposit({contractConfig, address, chainId}: DepositProps) {
-  const { setDepositData, depositData, deposit, depositSuccess, depositHash } = useDeposit(contractConfig, address, chainId);
+export default function Deposit({
+  contractConfig,
+  address,
+  chainId,
+}: DepositProps) {
+  const { setDepositData, depositData, deposit, depositSuccess, depositHash } =
+    useDeposit(contractConfig, address, chainId);
   const [errorMessage, setErrorMessage] = useState("");
   const [loading, setLoading] = useState(false);
   const [tx, setTx] = useState<`0x${string}`>("0x0");
@@ -63,7 +73,11 @@ export default function Deposit({contractConfig, address, chainId}: DepositProps
     };
   }, []);
 
-  const { getRootProps, getInputProps } = useDropzone({ onDrop, accept: { "application/json": [] }, maxFiles: 1 });
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    accept: { "application/json": [] },
+    maxFiles: 1,
+  });
 
   const onDeposit = useCallback(async () => {
     setLoading(true);
@@ -91,15 +105,39 @@ export default function Deposit({contractConfig, address, chainId}: DepositProps
           <p className="mt-2">Loading...</p>
         </>
       ) : step === "deposit" ? (
-        <div className="w-full h-full flex flex-col items-center justify-center hover:cursor-pointer" {...getRootProps()}>
+        <div
+          className="w-full h-full flex flex-col items-center justify-center hover:cursor-pointer"
+          {...getRootProps()}
+        >
           <input id="dropzone" {...getInputProps()} />
           Upload deposit date file
-          <div className="flex font-bold items-center">
-            deposit_data.json <InformationCircleIcon className="ml-px h-5 w-5" />
+          <div className="flex font-bold items-center gap-x-1">
+            deposit_data.json{" "}
+            <ToolTip
+              text={
+                <p>
+                  See{" "}
+                  <a href="https://docs.gnosischain.com/node/manual/validator/generate-keys/" className="underline">
+                    here
+                  </a>{" "}
+                  to learn how to generate the file.
+                </p>
+              }
+            />
           </div>
-          <Image src="/drop.svg" alt="Drop" width={80} height={24} className="my-8 rounded-full shadow-lg" />
+          <Image
+            src="/drop.svg"
+            alt="Drop"
+            width={80}
+            height={24}
+            className="my-8 rounded-full shadow-lg"
+          />
           <div>Drag file to upload or browse</div>
-          {errorMessage && <p className="text-red-400 text-sm" id="error">{errorMessage.substring(0, 150)}</p>}
+          {errorMessage && (
+            <p className="text-red-400 text-sm" id="error">
+              {errorMessage.substring(0, 150)}
+            </p>
+          )}
         </div>
       ) : step === "validation" ? (
         <div className="w-full flex flex-col items-center">
@@ -108,32 +146,53 @@ export default function Deposit({contractConfig, address, chainId}: DepositProps
             <CheckIcon className="h-5 w-5" /> Accepted
           </div>
           <div className="flex items-center">
-            <CheckIcon className="h-5 w-5" /> Validator deposits: {depositData.deposits.length}
+            <CheckIcon className="h-5 w-5" /> Validator deposits:{" "}
+            {depositData.deposits.length}
           </div>
           <div className="flex items-center">
-            <CheckIcon className="h-5 w-5" /> Total amount required: {depositData.deposits.length} GNO
+            <CheckIcon className="h-5 w-5" /> Total amount required:{" "}
+            {depositData.deposits.length} GNO
           </div>
           {depositData.isBatch ? (
             ""
           ) : (
             <p className="text-orange-400 text-xs text-center">
-              Your deposit file contains BLS credentials (starting with 0x00), you&apos;ll be asked to sign a transaction for each of them. Alternatively you can generate the keys again, make sure to specify an eth1 address for the withdrawal credentials.
+              Your deposit file contains BLS credentials (starting with 0x00),
+              you&apos;ll be asked to sign a transaction for each of them.
+              Alternatively you can generate the keys again, make sure to
+              specify an eth1 address for the withdrawal credentials.
             </p>
           )}
-          <button className="bg-[#DD7143] px-4 py-1 rounded-full text-white mt-4 text-lg font-semibold" onClick={onDeposit} id="depositButton">
+          <button
+            className="bg-accent px-4 py-1 rounded-full text-white mt-4 text-lg font-semibold"
+            onClick={onDeposit}
+            id="depositButton"
+          >
             Deposit
           </button>
         </div>
       ) : step === "summary" ? (
         <div className="w-full flex flex-col items-center">
           <div className="flex items-center" id="confirmation">
-            <CheckIcon className="h-5 w-5" /> Your transaction is completed ! View it
-            <Link href={chainId === 100 ? "https://gnosis.blockscout.com/tx/" + tx : "https://gnosis-chiado.blockscout.com/tx/" + tx} target="_blank" className="text-[#DD7143] underline ml-1">
+            <CheckIcon className="h-5 w-5" /> Your transaction is completed !
+            View it
+            <Link
+              href={
+                chainId === 100
+                  ? "https://gnosis.blockscout.com/tx/" + tx
+                  : "https://gnosis-chiado.blockscout.com/tx/" + tx
+              }
+              target="_blank"
+              className="text-accent underline ml-1"
+            >
               here
             </Link>
             .
           </div>
-          <button className="text-[#DD7143] flex items-center px-4 py-1 rounded-full mt-4 text-base font-semibold" onClick={() => setStep("deposit")}>
+          <button
+            className="text-accent flex items-center px-4 py-1 rounded-full mt-4 text-base font-semibold"
+            onClick={() => setStep("deposit")}
+          >
             Back <ArrowUturnLeftIcon className="h-4 w-4 ml-2" />
           </button>
         </div>

diff --git a/components/navigation-tab.tsx b/components/navigation-tab.tsx
@@ -27,7 +27,7 @@ export default function NavigationTab({ value }: NavigationTabProps) {
   };
 
   return (
-    <div onClick={handleClick} className={`${searchParams.get("state") == value ? "border-[#DD7143]" : ""} w-full flex justify-center items-center text-center p-2 lg:p-3.5 font-bold border-b-2 hover:cursor-pointer`} id={value}>
+    <div onClick={handleClick} className={`${searchParams.get("state") == value ? "border-accent" : ""} w-full flex justify-center items-center text-center p-2 lg:p-3.5 font-bold border-b-2 hover:cursor-pointer`} id={value}>
       {texts[value]}
     </div>
   );

diff --git a/components/tooltip.tsx b/components/tooltip.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { InformationCircleIcon } from "@heroicons/react/20/solid";
+import { useState, useRef, useEffect } from "react";
+
+interface ToolTipProps {
+  text: React.ReactNode;
+}
+
+export default function ToolTip({ text }: ToolTipProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const popoverButtonRef = useRef<HTMLButtonElement>(null);
+
+  const handleMouseEnter = () => {
+    setIsOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const current = popoverButtonRef.current;
+    if (!current) {
+      return;
+    }
+
+    const observer = new MutationObserver((mutations) => {
+      const hovered = mutations.find(
+        ({ attributeName }) => attributeName === "data-hover"
+      );
+      const active = current.hasAttribute("data-active");
+
+      if (hovered && !active) {
+        current.click();
+      }
+    });
+
+    observer.observe(current, { attributes: true });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [popoverButtonRef]);
+
+  return (
+    <Popover className="relative" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      <PopoverButton ref={popoverButtonRef} className="focus:outline-none">
+        <InformationCircleIcon className="h-5 w-5" />
+      </PopoverButton>
+      {isOpen && (
+        <PopoverPanel
+          anchor="top"
+          className="flex bg-accent/80 rounded-full py-1 px-2 text-sm mb-2 [--anchor-gap:4px]"
+        >
+          {text}
+        </PopoverPanel>
+      )}
+    </Popover>
+  );
+}
diff --git a/components/withdrawal.tsx b/components/withdrawal.tsx
@@ -7,6 +7,8 @@ import { Address, formatEther } from "viem";
 import Link from "next/link";
 import useBalance from "@/hooks/use-balance";
 import { ContractNetwork } from "@/utils/contracts";
+import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import ToolTip from "./tooltip";
 
 interface WithdrawalProps {
   contractConfig: ContractNetwork | undefined;
@@ -94,7 +96,15 @@ export default function Withdrawal({
       ) : step === "claim" ? (
         <>
           <div className="w-full text-sm flex justify-center">
-            Set up automated claim with your preferred frequency and threshold.
+            Set up automated claim with your preferred frequency and threshold.{" "}
+            <ToolTip
+              text={
+                <p>
+                  Address will become eligable for claim if one of thresholds
+                  reached.
+                </p>
+              }
+            />
           </div>
           <div className="py-4 md:py-0 flex h-full flex-col justify-center gap-y-4">
             <div className="flex flex-col">
@@ -113,7 +123,7 @@ export default function Withdrawal({
                     type="radio"
                     value={1}
                     name="inline-radio-group"
-                    className="w-4 h-4 accent-[#DD7143]"
+                    className="w-4 h-4 accent-accent"
                   />
                   <label
                     htmlFor="day"
@@ -129,7 +139,7 @@ export default function Withdrawal({
                     type="radio"
                     value={7}
                     name="inline-radio-group"
-                    className="w-4 h-4 accent-[#DD7143]"
+                    className="w-4 h-4 accent-accent"
                   />
                   <label
                     htmlFor="week"
@@ -145,7 +155,7 @@ export default function Withdrawal({
                     type="radio"
                     value={30}
                     name="inline-radio-group"
-                    className="w-4 h-4 accent-[#DD7143]"
+                    className="w-4 h-4 accent-accent"
                   />
                   <label
                     htmlFor="month"
@@ -172,7 +182,7 @@ export default function Withdrawal({
               />
             </div>
             <button
-              className="bg-[#DD7143] py-1 rounded-full text-white text-lg font-semibold"
+              className="bg-accent py-1 rounded-full text-white text-lg font-semibold"
               onClick={onAutoclaim}
               id="autoclaim"
             >
@@ -186,7 +196,7 @@ export default function Withdrawal({
                 {Number(formatEther(claimBalance || BigInt(0))).toFixed(3)} GNOS
               </div>
               <button
-                className="text-[#DD7143] underline hover:text-[#E07F55]"
+                className="text-accent underline hover:text-[#E07F55]"
                 onClick={onClaim}
               >
                 Manual claim
@@ -216,14 +226,14 @@ export default function Withdrawal({
                   : "https://gnosis-chiado.blockscout.com/tx/" + tx
               }
               target="_blank"
-              className="text-[#DD7143] underline ml-1"
+              className="text-accent underline ml-1"
             >
               here
             </Link>
             .
           </div>
           <button
-            className="text-[#DD7143] flex items-center px-4 py-1 rounded-full mt-4 text-base font-semibold"
+            className="text-accent flex items-center px-4 py-1 rounded-full mt-4 text-base font-semibold"
             onClick={() => setStep("claim")}
           >
             Back <ArrowUturnLeftIcon className="h-4 w-4 ml-2" />

diff --git a/hooks/use-autoclaim.ts b/hooks/use-autoclaim.ts
@@ -44,7 +44,7 @@ function useAutoclaim(contractConfig: ContractNetwork | undefined, address: `0x$
   const register = useCallback(
     async (days: number, amount: number) => {
       if (contractConfig) {
-        const timeStamp = BigInt(days * 86400000);
+        const timeStamp = BigInt(days * 86400);
         writeContract({ address: contractConfig.addresses.claimRegistry, abi: claimRegistryABI, functionName: "register", args: [address || "0x0", timeStamp, parseUnits(amount.toString(), 18)] });
       }
     },
@@ -54,7 +54,7 @@ function useAutoclaim(contractConfig: ContractNetwork | undefined, address: `0x$
   const updateConfig = useCallback(
     async (days: number, amount: number) => {
       if (contractConfig) {
-        const timeStamp = BigInt(days * 86400000);
+        const timeStamp = BigInt(days * 86400);
         writeContract({ address: contractConfig.addresses.claimRegistry, abi: claimRegistryABI, functionName: "updateConfig", args: [address || "0x0", timeStamp, parseUnits(amount.toString(), 18)] });
       }
     },

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -9,7 +9,8 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        'green': '#133629B2'
+        'green': '#133629B2',
+        'accent': '#DD7143'
       },
     },
   },