Upload deposit date file
-
- deposit_data.json
+
+ deposit_data.json{" "}
+
+ See{" "}
+
+ here
+ {" "}
+ to learn how to generate the file.
+
+ }
+ />
-
+
Drag file to upload or browse
- {errorMessage &&
{errorMessage.substring(0, 150)}
}
+ {errorMessage && (
+
+ {errorMessage.substring(0, 150)}
+
+ )}
) : step === "validation" ? (
@@ -108,32 +145,53 @@ export default function Deposit({contractConfig, address, chainId}: DepositProps
Accepted
- Validator deposits: {depositData.deposits.length}
+ Validator deposits:{" "}
+ {depositData.deposits.length}
- Total amount required: {depositData.deposits.length} GNO
+ Total amount required:{" "}
+ {depositData.deposits.length} GNO
{depositData.isBatch ? (
""
) : (
- Your deposit file contains BLS credentials (starting with 0x00), you'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'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.
)}
-
diff --git a/components/navigation-tab.tsx b/components/navigation-tab.tsx
index 0d942ab..eb3f6f1 100644
--- a/components/navigation-tab.tsx
+++ b/components/navigation-tab.tsx
@@ -27,7 +27,7 @@ export default function NavigationTab({ value }: NavigationTabProps) {
};
return (
-
+
{texts[value]}
);
diff --git a/components/tooltip.tsx b/components/tooltip.tsx
new file mode 100644
index 0000000..4f3125a
--- /dev/null
+++ 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
(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 (
+
+
+
+
+ {isOpen && (
+
+ {text}
+
+ )}
+
+ );
+}
diff --git a/components/withdrawal.tsx b/components/withdrawal.tsx
index 32f5ad2..83ad233 100644
--- 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" ? (
<>
- Set up automated claim with your preferred frequency and threshold.
+ Set up automated claim with your preferred frequency and threshold.{" "}
+
+ Address will become eligable for claim if one of thresholds
+ reached.
+
+ }
+ />
@@ -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"
/>
@@ -186,7 +196,7 @@ export default function Withdrawal({
{Number(formatEther(claimBalance || BigInt(0))).toFixed(3)} GNOS
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
.