From 828599506690406dfc5232bc29cff18bd4fad20d Mon Sep 17 00:00:00 2001
From: babalicious-io <baba@babalicious.io>
Date: Fri, 13 Dec 2024 10:07:59 +0100
Subject: [PATCH] input field - responsiveness

deploy tool - styling/tooltips

fee calculator - className fix/tooltips/responsive slider+toggle

deploy - tooltip timeout

mint - minor styling

transfer - minor styling/className update

stamping tool - responsiveness

tooltip fix

stamp tool - tooltip fix

stamp tool - tooltip styling

stamp tool - tooltip lock

stamp tool - image/uploadField responsiveness - CHECK CODE FUNCTIONALITY

stamp tool - consoleLog cleanup

image container styling

wallet receive modal - tooltip update

wallet send modal - input field responsiveness

wallet receive modal - responsiveness

transfer modal - squared input field

squared fix

receive - class update

tooltips update

receive - tooltip change
---
 components/shared/fee/FeeCalculatorBase.tsx   | 118 ++--
 islands/Wallet/details/WalletReceiveModal.tsx |  68 ++-
 islands/Wallet/details/WalletSendModal.tsx    |   8 +-
 .../Wallet/details/WalletTransferModal.tsx    |   8 +-
 islands/stamping/InputField.tsx               |   2 +-
 islands/stamping/SelectField.tsx              |   2 +-
 islands/stamping/src20/SRC20InputField.tsx    |   2 +-
 .../stamping/src20/deploy/DeployContent.tsx   | 122 +++-
 islands/stamping/src20/mint/MintContent.tsx   |  12 +-
 .../src20/transfer/TransferContent.tsx        |   7 +-
 islands/stamping/stamp/OlgaContent.tsx        | 537 ++++++++++++++----
 11 files changed, 687 insertions(+), 199 deletions(-)

diff --git a/components/shared/fee/FeeCalculatorBase.tsx b/components/shared/fee/FeeCalculatorBase.tsx
index 84a9b8ccd..357aa261b 100644
--- a/components/shared/fee/FeeCalculatorBase.tsx
+++ b/components/shared/fee/FeeCalculatorBase.tsx
@@ -1,4 +1,4 @@
-import { useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { useFeePolling } from "$client/hooks/useFeePolling.ts";
 import { logger } from "$lib/utils/logger.ts";
 import {
@@ -45,6 +45,9 @@ export function FeeCalculatorBase({
   const { fees } = useFeePolling();
   const [visible, setVisible] = useState(false);
   const [coinType, setCoinType] = useState("BTC");
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const tooltipTimeoutRef = useRef<number | null>(null);
 
   const handleCoinToggle = () => {
     logger.debug("stamps", {
@@ -57,6 +60,32 @@ export function FeeCalculatorBase({
     setCoinType(coinType === "BTC" ? "USDT" : "BTC");
   };
 
+  const handleMouseMove = (e: MouseEvent) => {
+    setTooltipPosition({
+      x: e.clientX,
+      y: e.clientY,
+    });
+  };
+
+  const handleMouseEnter = () => {
+    setIsTooltipVisible(true);
+
+    if (tooltipTimeoutRef.current) {
+      window.clearTimeout(tooltipTimeoutRef.current);
+    }
+
+    tooltipTimeoutRef.current = window.setTimeout(() => {
+      setIsTooltipVisible(false);
+    }, 1500);
+  };
+
+  const handleMouseLeave = () => {
+    if (tooltipTimeoutRef.current) {
+      window.clearTimeout(tooltipTimeoutRef.current);
+    }
+    setIsTooltipVisible(false);
+  };
+
   // Fee selector component
   const renderFeeSelector = () => (
     <div className={`flex flex-col ${isModal ? "w-2/3" : "w-1/2"}`}>
@@ -70,7 +99,11 @@ export function FeeCalculatorBase({
           <span className="font-medium">{fees.recommendedFee}</span> SAT/vB
         </p>
       )}
-      <div className="relative w-full">
+      <div
+        className="relative w-full group"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
         <input
           type="range"
           value={fee}
@@ -79,53 +112,62 @@ export function FeeCalculatorBase({
           step="1"
           onInput={(e) =>
             handleChangeFee(parseInt((e.target as HTMLInputElement).value, 10))}
-          className="accent-stamp-purple-dark w-full h-[6px] rounded-lg appearance-none cursor-pointer bg-stamp-grey [&::-webkit-slider-thumb]:w-[22px] [&::-webkit-slider-thumb]:h-[22px] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-stamp-purple-dark [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-[22px] [&::-moz-range-thumb]:h-[22px] [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:bg-stamp-purple-dark [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer"
+          onMouseMove={handleMouseMove}
+          className="accent-stamp-purple-dark w-full h-1 mobileLg:h-1.5 rounded-lg appearance-none cursor-pointer bg-stamp-grey [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:mobileLg:w-[22px] [&::-webkit-slider-thumb]:mobileLg:h-[22px] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-stamp-purple-dark [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:mobileLg:w-[22px] [&::-moz-range-thumb]:mobileLg:h-[22px] [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:bg-stamp-purple-dark [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer"
         />
+        <div
+          className={`${tooltipFloat} ${isTooltipVisible ? "block" : "hidden"}`}
+          style={{
+            left: `${tooltipPosition.x}px`,
+            top: `${tooltipPosition.y - 6}px`,
+            transform: "translate(-50%, -100%)",
+          }}
+        >
+          SELECT FEE
+        </div>
       </div>
     </div>
   );
 
   // Estimate details component
   const renderDetails = () => {
-    const detailsTitleClassName = "text-stamp-grey-darker font-light";
-    const detailsTextClassName =
+    const detailsTitle = "text-stamp-grey-darker font-light";
+    const detailsText =
       "text-xs mobileLg:text-sm font-medium text-stamp-grey-light";
 
     return (
       <div className={`${visible ? "visible" : "invisible"} gap-1 mt-1.5`}>
         {/* File Type - Only show for stamp type */}
         {type === "stamp" && fileType && (
-          <p className={detailsTextClassName}>
-            <span className={detailsTitleClassName}>FILE</span>{" "}
-            {fileType.toUpperCase()}
+          <p className={detailsText}>
+            <span className={detailsTitle}>FILE</span> {fileType.toUpperCase()}
           </p>
         )}
 
         {/* Editions - Only show for stamp type */}
         {type === "stamp" && issuance && (
-          <p className={detailsTextClassName}>
-            <span className={detailsTitleClassName}>EDITIONS</span> {issuance}
+          <p className={detailsText}>
+            <span className={detailsTitle}>EDITIONS</span> {issuance}
           </p>
         )}
 
         {/* File Size */}
         {fileSize && (
-          <p className={detailsTextClassName}>
-            <span className={detailsTitleClassName}>SIZE</span> {fileSize}{" "}
+          <p className={detailsText}>
+            <span className={detailsTitle}>SIZE</span> {fileSize}{" "}
             <span className="font-light">BYTES</span>
           </p>
         )}
 
         {/* Sats Per Byte */}
-        <p className={detailsTextClassName}>
-          <span className={detailsTitleClassName}>SATS PER BYTE</span> {fee}
+        <p className={detailsText}>
+          <span className={detailsTitle}>SATS PER BYTE</span> {fee}
         </p>
 
         {/* Miner Fee */}
         {feeDetails?.minerFee && (
-          <p className={detailsTextClassName}>
-            <span className={detailsTitleClassName}>MINER FEE</span>{" "}
-            {coinType === "BTC"
+          <p className={detailsText}>
+            <span className={detailsTitle}>MINER FEE</span> {coinType === "BTC"
               ? formatSatoshisToBTC(feeDetails.minerFee, {
                 includeSymbol: false,
               })
@@ -136,8 +178,8 @@ export function FeeCalculatorBase({
 
         {/* Service Fee */}
         {serviceFee && serviceFee > 0 && (
-          <p className={detailsTextClassName}>
-            <span className={detailsTitleClassName}>
+          <p className={detailsText}>
+            <span className={detailsTitle}>
               {isModal ? "SERVICE FEE" : "MINTING FEE"}
             </span>{" "}
             {coinType === "BTC"
@@ -159,9 +201,8 @@ export function FeeCalculatorBase({
 
         {/* Dust Value */}
         {feeDetails?.dustValue && feeDetails.dustValue > 0 && (
-          <p className={detailsTextClassName}>
-            <span className={detailsTitleClassName}>DUST</span>{" "}
-            {coinType === "BTC"
+          <p className={detailsText}>
+            <span className={detailsTitle}>DUST</span> {coinType === "BTC"
               ? formatSatoshisToBTC(feeDetails.dustValue, {
                 includeSymbol: false,
               })
@@ -172,9 +213,8 @@ export function FeeCalculatorBase({
 
         {/* Total */}
         {feeDetails?.totalValue && (
-          <p className={detailsTextClassName}>
-            <span className={detailsTitleClassName}>TOTAL</span>{" "}
-            {coinType === "BTC"
+          <p className={detailsText}>
+            <span className={detailsTitle}>TOTAL</span> {coinType === "BTC"
               ? formatSatoshisToBTC(feeDetails.totalValue, {
                 includeSymbol: false,
               })
@@ -186,11 +226,21 @@ export function FeeCalculatorBase({
     );
   };
 
-  const buttonPurpleOutlineClassName =
+  const tooltipFloat =
+    "fixed text-stamp-grey-light text-[10px] mobileLg:text-xs mb-1 bg-black px-2 py-1 rounded-sm whitespace-nowrap pointer-events-none z-50";
+  const buttonPurpleOutline =
     "inline-flex items-center justify-center border-2 border-stamp-purple rounded-md text-sm mobileLg:text-base font-extrabold text-stamp-purple tracking-[0.05em] h-[42px] mobileLg:h-[48px] px-4 mobileLg:px-5 hover:border-stamp-purple-highlight hover:text-stamp-purple-highlight transition-colors";
-  const buttonPurpleFlatClassName =
+  const buttonPurpleFlat =
     "inline-flex items-center justify-center bg-stamp-purple border-2 border-stamp-purple rounded-md text-sm mobileLg:text-base font-extrabold text-black tracking-[0.05em] h-[42px] mobileLg:h-[48px] px-4 mobileLg:px-5 hover:border-stamp-purple-highlight hover:bg-stamp-purple-highlight transition-colors";
 
+  useEffect(() => {
+    return () => {
+      if (tooltipTimeoutRef.current) {
+        window.clearTimeout(tooltipTimeoutRef.current);
+      }
+    };
+  }, []);
+
   return (
     <div className={`text-[#999999] ${className}`}>
       <div className="flex">
@@ -202,11 +252,11 @@ export function FeeCalculatorBase({
             }`}
           >
             <button
-              className="w-12 h-6 rounded-full bg-stamp-grey flex items-center transition duration-300 focus:outline-none shadow"
+              className="min-w-[42px] h-[21px] mobileLg:min-w-12 mobileLg:h-6 rounded-full bg-stamp-grey flex items-center transition duration-300 focus:outline-none shadow"
               onClick={handleCoinToggle}
             >
               <div
-                className={`w-6 h-6 relative rounded-full transition duration-500 transform bg-stamp-grey text-white ${
+                className={`w-[21px] h-[21px] mobileLg:w-6 mobileLg:h-6 relative rounded-full transition duration-500 transform flex justify-center items-center bg-stamp-grey ${
                   coinType === "BTC" ? "translate-x-full" : ""
                 }`}
               >
@@ -318,7 +368,7 @@ export function FeeCalculatorBase({
         <div className="flex justify-end gap-6">
           {isModal && onCancel && (
             <button
-              className={`${buttonPurpleOutlineClassName} ${
+              className={`${buttonPurpleOutline} ${
                 (disabled || isSubmitting || (!isModal && !tosAgreed))
                   ? "opacity-50 cursor-not-allowed"
                   : ""
@@ -330,7 +380,7 @@ export function FeeCalculatorBase({
             </button>
           )}
           <button
-            className={`${buttonPurpleFlatClassName} ${
+            className={`${buttonPurpleFlat} ${
               (disabled || isSubmitting || (!isModal && !tosAgreed))
                 ? "opacity-50 cursor-not-allowed"
                 : ""
@@ -350,8 +400,7 @@ export function FeeCalculatorBase({
 const btcIcon = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
+    className="w-[20px] h-[20px] mobileLg:w-6 mobileLg:h-6"
     viewBox="0 0 24 24"
   >
     <path
@@ -364,8 +413,7 @@ const btcIcon = (
 const usdIcon = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
+    className="w-[20px] h-[20px] mobileLg:w-6 mobileLg:h-6"
     style={{ padding: "1px" }}
     viewBox="0 0 32 32"
   >
diff --git a/islands/Wallet/details/WalletReceiveModal.tsx b/islands/Wallet/details/WalletReceiveModal.tsx
index b6dd2f818..e791a6e68 100644
--- a/islands/Wallet/details/WalletReceiveModal.tsx
+++ b/islands/Wallet/details/WalletReceiveModal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import QRCode from "qrcode";
 import { ModalLayout } from "$components/shared/modal/ModalLayout.tsx";
 
@@ -7,9 +7,16 @@ interface Props {
   address: string;
 }
 
+const tooltipIcon =
+  "absolute left-1/2 -translate-x-1/2 bg-[#000000BF] px-2 py-1 rounded-sm bottom-full text-[10px] mobileLg:text-xs text-stamp-grey-light whitespace-nowrap";
+
 function WalletReceiveModal({ onClose, address }: Props) {
   const [qrCodeDataUrl, setQrCodeDataUrl] = useState<string>("");
   const [showCopied, setShowCopied] = useState(false);
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const [allowTooltip, setAllowTooltip] = useState(true);
+  const copyButtonRef = useRef<HTMLDivElement>(null);
+  const tooltipTimeoutRef = useRef<number | null>(null);
 
   useEffect(() => {
     const bitcoinUri = `bitcoin:${address}`;
@@ -25,18 +32,58 @@ function WalletReceiveModal({ onClose, address }: Props) {
       .catch((err: Error) => console.error(err));
   }, [address]);
 
+  const handleCopyMouseEnter = () => {
+    if (allowTooltip) {
+      const buttonRect = copyButtonRef.current?.getBoundingClientRect();
+      if (buttonRect) {
+        setIsTooltipVisible(true);
+      }
+
+      if (tooltipTimeoutRef.current) {
+        window.clearTimeout(tooltipTimeoutRef.current);
+      }
+
+      tooltipTimeoutRef.current = window.setTimeout(() => {
+        setIsTooltipVisible(false);
+      }, 1500);
+    }
+  };
+
+  const handleCopyMouseLeave = () => {
+    if (tooltipTimeoutRef.current) {
+      window.clearTimeout(tooltipTimeoutRef.current);
+    }
+    setIsTooltipVisible(false);
+    setShowCopied(false);
+    setAllowTooltip(true);
+  };
+
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(address);
       setShowCopied(true);
-      setTimeout(() => setShowCopied(false), 2000);
+      setIsTooltipVisible(false);
+      setAllowTooltip(false);
+
+      if (tooltipTimeoutRef.current) {
+        window.clearTimeout(tooltipTimeoutRef.current);
+      }
+
+      tooltipTimeoutRef.current = window.setTimeout(() => {
+        setShowCopied(false);
+      }, 1500);
     } catch (err) {
       console.error("Failed to copy:", err);
     }
   };
 
-  const tooltip =
-    "absolute left-1/2 -translate-x-1/2 bottom-full text-stamp-grey-light text-xs mb-1 hidden group-hover:block whitespace-nowrap";
+  useEffect(() => {
+    return () => {
+      if (tooltipTimeoutRef.current) {
+        window.clearTimeout(tooltipTimeoutRef.current);
+      }
+    };
+  }, []);
 
   return (
     <ModalLayout onClose={onClose} title="RECEIVE">
@@ -53,7 +100,12 @@ function WalletReceiveModal({ onClose, address }: Props) {
         </p>
       </div>
       <div class="flex flex-col items-center pt-3 mobileLg:pt-6">
-        <div class="relative group">
+        <div
+          ref={copyButtonRef}
+          class="relative"
+          onMouseEnter={handleCopyMouseEnter}
+          onMouseLeave={handleCopyMouseLeave}
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -66,7 +118,11 @@ function WalletReceiveModal({ onClose, address }: Props) {
           >
             <path d="M27 4H11C10.7348 4 10.4804 4.10536 10.2929 4.29289C10.1054 4.48043 10 4.73478 10 5V10H5C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11V27C4 27.2652 4.10536 27.5196 4.29289 27.7071C4.48043 27.8946 4.73478 28 5 28H21C21.2652 28 21.5196 27.8946 21.7071 27.7071C21.8946 27.5196 22 27.2652 22 27V22H27C27.2652 22 27.5196 21.8946 27.7071 21.7071C27.8946 21.5196 28 21.2652 28 21V5C28 4.73478 27.8946 4.48043 27.7071 4.29289C27.5196 4.10536 27.2652 4 27 4ZM20 26H6V12H20V26ZM26 20H22V11C22 10.7348 21.8946 10.4804 21.7071 10.2929C21.5196 10.1054 21.2652 10 21 10H12V6H26V20Z" />
           </svg>
-          <div class={tooltip}>
+          <div
+            class={`${tooltipIcon} ${
+              (isTooltipVisible || showCopied) ? "block" : "hidden"
+            }`}
+          >
             {showCopied ? "COPIED" : "COPY"}
           </div>
         </div>
diff --git a/islands/Wallet/details/WalletSendModal.tsx b/islands/Wallet/details/WalletSendModal.tsx
index 44815735f..a17c432bc 100644
--- a/islands/Wallet/details/WalletSendModal.tsx
+++ b/islands/Wallet/details/WalletSendModal.tsx
@@ -113,10 +113,8 @@ function WalletSendModal({ fee: initialFee, handleChangeFee, onClose }: Props) {
     }
   };
 
-  const inputField1colClassName =
-    "h-12 px-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-stamp-grey-light";
-  const inputField2colClassName =
-    "flex flex-col mobileMd:flex-row gap-3 mobileMd:gap-6 w-full";
+  const inputField =
+    "h-[42px] mobileLg:h-12 px-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-stamp-grey-light";
 
   return (
     <ModalLayout onClose={onClose} title="SEND">
@@ -219,7 +217,7 @@ function WalletSendModal({ fee: initialFee, handleChangeFee, onClose }: Props) {
               recipientAddress: (e.target as HTMLInputElement).value,
             })}
           placeholder="Recipient address"
-          class={inputField1colClassName}
+          class={inputField}
         />
       </div>
 
diff --git a/islands/Wallet/details/WalletTransferModal.tsx b/islands/Wallet/details/WalletTransferModal.tsx
index dd673a94e..cd80b2632 100644
--- a/islands/Wallet/details/WalletTransferModal.tsx
+++ b/islands/Wallet/details/WalletTransferModal.tsx
@@ -138,12 +138,12 @@ function WalletTransferModal({
   }, [selectedStamp]);
 
   const inputField =
-    "h-12 px-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-stamp-grey-light";
+    "h-[42px] mobileLg:h-12 px-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-stamp-grey-light";
 
   return (
     <ModalLayout onClose={handleCloseModal} title="TRANSFER">
       <div className="flex w-full gap-3 mobileMd:gap-6">
-        <div className="min-w-[108px] h-[108px] mobileMd:min-w-[120px] mobileMd:h-[120px] bg-[#660099] rounded-md flex items-center justify-center">
+        <div className="flex items-center justify-center rounded-sm min-w-[96px] h-[96px] mobileMd:min-w-[108px] mobileMd:h-[108px] mobileLg:min-w-[120px] mobileLg:h-[120px] bg-stamp-purple-darker">
           {selectedStamp
             ? (
               <img
@@ -157,7 +157,7 @@ function WalletTransferModal({
             : (
               <img
                 src="/img/stamping/image-upload.svg"
-                class="w-12 h-12"
+                class="-7 h-7 mobileMd:w-8 mobileMd:h-8 mobileLg:w-9 mobileLg:h-9"
                 alt=""
               />
             )}
@@ -193,7 +193,7 @@ function WalletTransferModal({
               max={maxQuantity}
               value={quantity}
               onChange={handleQuantityChange}
-              className={`${inputField} !w-12 text-center`}
+              className={`${inputField} !w-[42px] mobileLg:!w-12 text-center`}
             />
           </div>
         </div>
diff --git a/islands/stamping/InputField.tsx b/islands/stamping/InputField.tsx
index 3f62fa8d7..c87f6afe7 100644
--- a/islands/stamping/InputField.tsx
+++ b/islands/stamping/InputField.tsx
@@ -34,7 +34,7 @@ export function InputField({
     <div class="w-full">
       <input
         type={type}
-        class={`h-12 px-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-stamp-grey-light ${
+        class={`h-[42px] mobileLg:h-12 px-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-stamp-grey-light ${
           textAlign === "center" ? "text-center" : ""
         } ${isUppercase ? "uppercase" : ""} ${extraClass}`}
         placeholder={placeholder}
diff --git a/islands/stamping/SelectField.tsx b/islands/stamping/SelectField.tsx
index 17779d7f1..101a490c1 100644
--- a/islands/stamping/SelectField.tsx
+++ b/islands/stamping/SelectField.tsx
@@ -23,7 +23,7 @@ export function SelectField({
       <select
         onChange={onChange}
         disabled={disabled}
-        className="h-12 px-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-stamp-grey-light"
+        className="h-[42px] mobileLg:h-12 px-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-stamp-grey-light"
       >
         {options.length
           ? options.map((item) => (
diff --git a/islands/stamping/src20/SRC20InputField.tsx b/islands/stamping/src20/SRC20InputField.tsx
index 8592032f8..dd5489042 100644
--- a/islands/stamping/src20/SRC20InputField.tsx
+++ b/islands/stamping/src20/SRC20InputField.tsx
@@ -29,7 +29,7 @@ export function SRC20InputField({
     <div class="w-full">
       <input
         type={type}
-        class={`p-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-[#CCCCCC] ${
+        class={`h-[42px] mobileLg:h-12 px-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-[#CCCCCC] ${
           isUppercase ? "uppercase" : ""
         }`}
         placeholder={placeholder}
diff --git a/islands/stamping/src20/deploy/DeployContent.tsx b/islands/stamping/src20/deploy/DeployContent.tsx
index b52973013..34f489759 100644
--- a/islands/stamping/src20/deploy/DeployContent.tsx
+++ b/islands/stamping/src20/deploy/DeployContent.tsx
@@ -1,5 +1,5 @@
 import axiod from "axiod";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 
 import { useSRC20Form } from "$client/hooks/useSRC20Form.ts";
 import { walletContext } from "$client/wallet/wallet.ts";
@@ -32,6 +32,12 @@ export function DeployContent(
 
   const [fileUploadError, setFileUploadError] = useState<string | null>(null);
   const [tosAgreed, setTosAgreed] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [isUploadTooltipVisible, setIsUploadTooltipVisible] = useState(false);
+  const [isToggleTooltipVisible, setIsToggleTooltipVisible] = useState(false);
+  const [allowTooltip, setAllowTooltip] = useState(true);
+  const uploadTooltipTimeoutRef = useRef<number | null>(null);
+  const toggleTooltipTimeoutRef = useRef<number | null>(null);
 
   const { wallet, isConnected } = walletContext;
 
@@ -122,17 +128,20 @@ export function DeployContent(
   const handleShowAdvancedOptions = () => {
     const switchToggle = document.querySelector("#switch-toggle-advanced");
     if (!switchToggle) return;
+    setAllowTooltip(false);
+    setIsToggleTooltipVisible(false);
+
     if (showAdvancedOptions !== true) {
       switchToggle.classList.add("translate-x-full");
       setTimeout(() => {
         switchToggle.innerHTML =
-          `<div class='w-5 h-5 rounded-full bg-stamp-purple-dark'></div>`;
+          `<div class='w-[17px] h-[17px] mobileLg:w-5 mobileLg:h-5 rounded-full bg-stamp-purple-dark'></div>`;
       }, 150);
     } else {
       switchToggle.classList.remove("translate-x-full");
       setTimeout(() => {
         switchToggle.innerHTML =
-          `<div class='w-5 h-5 rounded-full bg-stamp-purple-darker'></div>`;
+          `<div class='w-[17px] h-[17px] mobileLg:w-5 mobileLg:h-5 rounded-full bg-stamp-purple-darker'></div>`;
       }, 150);
     }
     setShowAdvancedOptions(!showAdvancedOptions);
@@ -142,25 +151,91 @@ export function DeployContent(
     const advancedToggle = document.getElementById("switch-toggle-advanced");
     if (advancedToggle) {
       advancedToggle.innerHTML =
-        `<div class='w-5 h-5 rounded-full bg-stamp-purple-darker'></div>`;
+        `<div class='w-[17px] h-[17px] mobileLg:w-5 mobileLg:h-5 rounded-full bg-stamp-purple-darker'></div>`;
     }
   }, []);
 
+  const handleMouseMove = (e: MouseEvent) => {
+    setTooltipPosition({
+      x: e.clientX,
+      y: e.clientY,
+    });
+  };
+
+  const handleUploadMouseEnter = () => {
+    setIsUploadTooltipVisible(true);
+
+    if (uploadTooltipTimeoutRef.current) {
+      window.clearTimeout(uploadTooltipTimeoutRef.current);
+    }
+
+    uploadTooltipTimeoutRef.current = window.setTimeout(() => {
+      setIsUploadTooltipVisible(false);
+    }, 1500);
+  };
+
+  const handleUploadMouseLeave = () => {
+    if (uploadTooltipTimeoutRef.current) {
+      window.clearTimeout(uploadTooltipTimeoutRef.current);
+    }
+    setIsUploadTooltipVisible(false);
+  };
+
+  const handleToggleMouseEnter = () => {
+    if (allowTooltip) {
+      setIsToggleTooltipVisible(true);
+
+      if (toggleTooltipTimeoutRef.current) {
+        window.clearTimeout(toggleTooltipTimeoutRef.current);
+      }
+
+      toggleTooltipTimeoutRef.current = window.setTimeout(() => {
+        setIsToggleTooltipVisible(false);
+      }, 1500);
+    }
+  };
+
+  const handleToggleMouseLeave = () => {
+    if (toggleTooltipTimeoutRef.current) {
+      window.clearTimeout(toggleTooltipTimeoutRef.current);
+    }
+    setIsToggleTooltipVisible(false);
+    setAllowTooltip(true);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (uploadTooltipTimeoutRef.current) {
+        window.clearTimeout(uploadTooltipTimeoutRef.current);
+      }
+      if (toggleTooltipTimeoutRef.current) {
+        window.clearTimeout(toggleTooltipTimeoutRef.current);
+      }
+    };
+  }, []);
+
   const bodyTools = "flex flex-col w-full items-center gap-3 mobileMd:gap-6";
   const titlePurpleLDCenter =
-    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
+    "inline-block w-full mobileMd:-mb-3 mobileLg:mb-0 text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 text-center";
   const feeSelectorContainer = "p-3 mobileMd:p-6 dark-gradient z-[10] w-full";
+  const tooltipButton =
+    "absolute left-1/2 -translate-x-1/2 bg-[#000000BF] px-2 py-1 rounded-sm mb-1 bottom-full text-[10px] mobileLg:text-xs text-stamp-grey-light whitespace-nowrap";
+  const tooltipImage =
+    "fixed bg-[#000000BF] px-2 py-1 mb-1 rounded-sm text-[10px] mobileLg:text-xs text-stamp-grey-light whitespace-nowrap pointer-events-none z-50";
 
   return (
     <div className={bodyTools}>
       <h1 className={titlePurpleLDCenter}>DEPLOY</h1>
 
-      <div className="dark-gradient p-2 mobileMd:p-6 w-full">
+      <div className="dark-gradient p-3 mobileMd:p-6 w-full">
         <div className="flex gap-3 mobileMd:gap-6">
           <div className="flex flex-col gap-3 mobileMd:gap-6 !w-[108px] mobileMd:!w-[120px]">
             <div
               id="image-preview"
-              class="relative rounded-[3px] items-center text-center cursor-pointer min-w-[108px] mobileMd:min-w-[120px] h-[108px] mobileMd:h-[120px] content-center bg-stamp-purple-darker"
+              class="relative rounded-sm items-center text-center cursor-pointer min-w-[96px] h-[96px] mobileMd:min-w-[108px] mobileMd:h-[108px] mobileLg:min-w-[120px] mobileLg:h-[120px] content-center bg-stamp-purple-dark group hover:bg-[#8800CC] transition duration-300"
+              onMouseMove={handleMouseMove}
+              onMouseEnter={handleUploadMouseEnter}
+              onMouseLeave={handleUploadMouseLeave}
             >
               <input
                 id="upload"
@@ -189,9 +264,21 @@ export function DeployContent(
                 >
                   <img
                     src="/img/stamping/image-upload.svg"
-                    class="w-12 h-12"
+                    class="w-7 h-7 mobileMd:w-8 mobileMd:h-8 mobileLg:w-9 mobileLg:h-9"
                     alt=""
                   />
+                  <div
+                    class={`${tooltipImage} ${
+                      isUploadTooltipVisible ? "block" : "hidden"
+                    }`}
+                    style={{
+                      left: `${tooltipPosition.x}px`,
+                      top: `${tooltipPosition.y - 6}px`,
+                      transform: "translate(-50%, -100%)",
+                    }}
+                  >
+                    UPLOAD COVER IMAGE
+                  </div>
                 </label>
               )}
             </div>
@@ -210,7 +297,7 @@ export function DeployContent(
             <div class="w-full flex gap-3 mobileMd:gap-6">
               <SRC20InputField
                 type="text"
-                placeholder="Token ticker name"
+                placeholder="Ticker name"
                 value={formState.token}
                 onChange={(e) => {
                   const newValue = (e.target as HTMLInputElement).value
@@ -225,13 +312,22 @@ export function DeployContent(
                 isUppercase
               />
               <button
-                class="min-w-12 h-6 rounded-full bg-stamp-grey flex items-center transition duration-300 focus:outline-none shadow"
+                class="min-w-[42px] h-[21px] mobileLg:min-w-12 mobileLg:h-6 rounded-full bg-stamp-grey flex items-center transition duration-300 focus:outline-none shadow relative"
                 onClick={handleShowAdvancedOptions}
+                onMouseEnter={handleToggleMouseEnter}
+                onMouseLeave={handleToggleMouseLeave}
               >
                 <div
                   id="switch-toggle-advanced"
-                  class="w-6 h-6 relative rounded-full transition duration-500 transform flex justify-center items-center bg-stamp-grey"
+                  class="w-[21px] h-[21px] mobileLg:w-6 mobileLg:h-6 relative rounded-full transition duration-500 transform flex justify-center items-center bg-stamp-grey"
+                >
+                </div>
+                <div
+                  className={`${tooltipButton} ${
+                    isToggleTooltipVisible ? "block" : "hidden"
+                  }`}
                 >
+                  {showAdvancedOptions ? "MANDATORY" : "OPTIONAL"}
                 </div>
               </button>
             </div>
@@ -240,7 +336,7 @@ export function DeployContent(
               type="text"
               inputMode="numeric"
               pattern="[0-9]*"
-              placeholder="Limit pr. mint"
+              placeholder="Limit per mint"
               value={formState.lim}
               onChange={(e) => handleInputChange(e, "lim")}
               onBlur={() => handleInputBlur("lim")}
@@ -270,7 +366,7 @@ export function DeployContent(
           <div className="flex flex-col gap-3 mobileMd:gap-6">
             <textarea
               type="text"
-              class="h-[108px] mobileMd:h-[120px] p-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-[#CCCCCC]"
+              class="h-[96px] mobileMd:h-[108px] mobileLg:h-[120px] p-3 rounded-md bg-stamp-grey text-stamp-grey-darkest placeholder:text-stamp-grey-darkest placeholder:uppercase placeholder:font-light text-sm mobileLg:text-base font-medium w-full outline-none focus:bg-[#CCCCCC]"
               placeholder="Description"
               rows={5}
             />
diff --git a/islands/stamping/src20/mint/MintContent.tsx b/islands/stamping/src20/mint/MintContent.tsx
index 505dc440f..f42e3f6f7 100644
--- a/islands/stamping/src20/mint/MintContent.tsx
+++ b/islands/stamping/src20/mint/MintContent.tsx
@@ -30,9 +30,9 @@ const MintProgress = (
           </span>
           %
         </p>
-        <div class="w-full max-w-[420px] h-[6px] bg-stamp-grey relative rounded-full">
+        <div class="relative w-full max-w-[420px] h-1 mobileLg:h-1.5 bg-stamp-grey rounded-full">
           <div
-            class="absolute left-0 top-0 h-[6px] bg-[#660099] rounded-full"
+            class="absolute left-0 top-0 h-1 mobileLg:h-1.5 bg-stamp-purple-dark rounded-full"
             style={{ width: progressWidth }}
           />
         </div>
@@ -71,7 +71,7 @@ interface SearchResult {
 // Add consistent class names at the top
 const bodyTools = "flex flex-col w-full items-center gap-3 mobileMd:gap-6";
 const titlePurpleLDCenter =
-  "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
+  "inline-block w-full mobileMd:-mb-3 mobileLg:mb-0 text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 text-center";
 const feeSelectorContainer = "p-3 mobileMd:p-6 dark-gradient z-[10] w-full";
 const inputFieldContainer =
   "flex flex-col gap-3 mobileMd:gap-6 p-3 mobileMd:p-6 dark-gradient w-full";
@@ -296,18 +296,18 @@ export function MintContent({
         <div class="w-full flex gap-3 mobileMd:gap-6">
           <div
             id="image-preview"
-            class="relative rounded-md items-center justify-center mx-auto text-center min-w-[100px] w-[100px] h-[100px] mobileMd:min-w-[112px] mobileMd:w-[112px] mobileMd:h-[112px] mobileLg:min-w-[120px] mobileLg:w-[120px] mobileLg:h-[120px] content-center bg-[#660099] flex flex-col"
+            class="relative rounded-sm items-center justify-center mx-auto text-center min-w-[96px] h-[96px] w-[96px] mobileMd:min-w-[108px] mobileMd:w-[108px] mobileMd:h-[108px] mobileLg:min-w-[120px] mobileLg:w-[120px] mobileLg:h-[120px] content-center bg-stamp-purple-darker flex flex-col"
           >
             {isImageLoading
               ? (
-                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-white" />
+                <div class="animate-spin rounded-full w-7 h-7 mobileMd:w-8 mobileMd:h-8 mobileLg:w-9 mobileLg:h-9 border-b-[3px] border-stamp-grey" />
               )
               : (
                 <img
                   src={selectedTokenImage || `/img/stamping/image-upload.svg`}
                   class={selectedTokenImage
                     ? "w-full h-full"
-                    : "w-9 h-9 mobileLg:w-12 mobileLg:h-12"}
+                    : "w-7 h-7 mobileMd:w-8 mobileMd:h-8 mobileLg:w-9 mobileLg:h-9"}
                   alt=""
                   loading="lazy"
                   onLoad={() => setIsImageLoading(false)}
diff --git a/islands/stamping/src20/transfer/TransferContent.tsx b/islands/stamping/src20/transfer/TransferContent.tsx
index 27b0360ce..a228e2c68 100644
--- a/islands/stamping/src20/transfer/TransferContent.tsx
+++ b/islands/stamping/src20/transfer/TransferContent.tsx
@@ -18,11 +18,12 @@ interface Balance {
 
 const bodyTools = "flex flex-col w-full items-center gap-3 mobileMd:gap-6";
 const titlePurpleLDCenter =
-  "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
+  "inline-block w-full mobileMd:-mb-3 mobileLg:mb-0 text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 text-center";
 
 const inputFieldContainer =
   "flex flex-col gap-3 mobileMd:gap-6 p-3 mobileMd:p-6 dark-gradient w-full";
-const inputField2colAll = "flex flex-row gap-3 mobileMd:gap-6 w-full";
+const inputField2col =
+  "flex flex-col mobileMd:flex-row gap-3 mobileMd:gap-6 w-full";
 const feeSelectorContainer = "p-3 mobileMd:p-6 dark-gradient z-[10] w-full";
 
 export function TransferContent(
@@ -186,7 +187,7 @@ export function TransferContent(
           error={formState.toAddressError}
         />
 
-        <div class={inputField2colAll}>
+        <div class={inputField2col}>
           <div
             class={`relative ${
               openDrop && searchResults.length > 0 && !isSelecting
diff --git a/islands/stamping/stamp/OlgaContent.tsx b/islands/stamping/stamp/OlgaContent.tsx
index 8c77524ab..0dd8b5542 100644
--- a/islands/stamping/stamp/OlgaContent.tsx
+++ b/islands/stamping/stamp/OlgaContent.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { useConfig } from "$client/hooks/useConfig.ts";
 import axiod from "axiod";
 import { walletContext } from "$client/wallet/wallet.ts";
@@ -230,6 +230,10 @@ interface FileValidationResult {
   warning?: string | undefined;
 }
 
+// At the top of the file with other constants
+const PREVIEW_SIZE_CLASSES =
+  "w-[96px] h-[96px] mobileMd:w-[108px] mobileMd:h-[108px] mobileLg:w-[120px] mobileLg:h-[120px]" as const;
+
 export function OlgaContent() {
   const { config, isLoading } = useConfig<Config>();
 
@@ -274,6 +278,75 @@ export function OlgaContent() {
 
   const [txDetails, setTxDetails] = useState<MintResponse | null>(null);
 
+  // Add new state and refs for tooltips
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [isUploadTooltipVisible, setIsUploadTooltipVisible] = useState(false);
+  const [isToggleTooltipVisible, setIsToggleTooltipVisible] = useState(false);
+  const uploadTooltipTimeoutRef = useRef<number | null>(null);
+  const toggleTooltipTimeoutRef = useRef<number | null>(null);
+  const [allowTooltip, setAllowTooltip] = useState(true);
+
+  // Add tooltip handlers
+  const handleMouseMove = (e: MouseEvent) => {
+    setTooltipPosition({
+      x: e.clientX,
+      y: e.clientY,
+    });
+  };
+
+  const handleUploadMouseEnter = () => {
+    setIsUploadTooltipVisible(true);
+
+    if (uploadTooltipTimeoutRef.current) {
+      window.clearTimeout(uploadTooltipTimeoutRef.current);
+    }
+
+    uploadTooltipTimeoutRef.current = window.setTimeout(() => {
+      setIsUploadTooltipVisible(false);
+    }, 1500);
+  };
+
+  const handleUploadMouseLeave = () => {
+    if (uploadTooltipTimeoutRef.current) {
+      window.clearTimeout(uploadTooltipTimeoutRef.current);
+    }
+    setIsUploadTooltipVisible(false);
+  };
+
+  const handleToggleMouseEnter = () => {
+    if (allowTooltip) {
+      setIsToggleTooltipVisible(true);
+
+      if (toggleTooltipTimeoutRef.current) {
+        window.clearTimeout(toggleTooltipTimeoutRef.current);
+      }
+
+      toggleTooltipTimeoutRef.current = window.setTimeout(() => {
+        setIsToggleTooltipVisible(false);
+      }, 1500);
+    }
+  };
+
+  const handleToggleMouseLeave = () => {
+    if (toggleTooltipTimeoutRef.current) {
+      window.clearTimeout(toggleTooltipTimeoutRef.current);
+    }
+    setIsToggleTooltipVisible(false);
+    setAllowTooltip(true); // Reset the flag when mouse leaves
+  };
+
+  // Add cleanup effect
+  useEffect(() => {
+    return () => {
+      if (uploadTooltipTimeoutRef.current) {
+        window.clearTimeout(uploadTooltipTimeoutRef.current);
+      }
+      if (toggleTooltipTimeoutRef.current) {
+        window.clearTimeout(toggleTooltipTimeoutRef.current);
+      }
+    };
+  }, []);
+
   useEffect(() => {
     if (fees && !loading) {
       const recommendedFee = Math.round(fees.recommendedFee);
@@ -461,17 +534,20 @@ export function OlgaContent() {
   const handleShowAdvancedOptions = () => {
     const switchToggle = document.querySelector("#switch-toggle-advanced");
     if (!switchToggle) return;
+    setAllowTooltip(false);
+    setIsToggleTooltipVisible(false);
+
     if (showAdvancedOptions !== true) {
       switchToggle.classList.add("translate-x-full");
       setTimeout(() => {
         switchToggle.innerHTML =
-          `<div class='w-5 h-5 rounded-full bg-stamp-purple-dark'></div>`;
+          `<div class='w-[17px] h-[17px] mobileLg:w-5 mobileLg:h-5 rounded-full bg-stamp-purple-dark'></div>`;
       }, 150);
     } else {
       switchToggle.classList.remove("translate-x-full");
       setTimeout(() => {
         switchToggle.innerHTML =
-          `<div class='w-5 h-5 rounded-full bg-stamp-purple-darker'></div>`;
+          `<div class='w-[17px] h-[17px] mobileLg:w-5 mobileLg:h-5 rounded-full bg-stamp-purple-darker'></div>`;
       }, 150);
     }
     setShowAdvancedOptions(!showAdvancedOptions);
@@ -481,18 +557,21 @@ export function OlgaContent() {
     const switchToggle = document.querySelector("#switch-toggle-locked");
     if (!switchToggle) return;
 
+    setAllowPoshTooltip(false);
+    setIsPoshTooltipVisible(false);
+
     if (!isPoshStamp) {
       switchToggle.classList.add("translate-x-full");
       setTimeout(() => {
         switchToggle.innerHTML =
-          `<div class='w-5 h-5 rounded-full bg-stamp-purple-dark'></div>`;
+          `<div class='w-[17px] h-[17px] mobileLg:w-5 mobileLg:h-5 rounded-full bg-stamp-purple-dark'></div>`;
       }, 150);
       setStampName(""); // Clear the input when switching to POSH
     } else {
       switchToggle.classList.remove("translate-x-full");
       setTimeout(() => {
         switchToggle.innerHTML =
-          `<div class='w-5 h-5 rounded-full bg-stamp-purple-darker'></div>`;
+          `<div class='w-[17px] h-[17px] mobileLg:w-5 mobileLg:h-5 rounded-full bg-stamp-purple-darker'></div>`;
       }, 150);
       setStampName(""); // Clear the input when switching to CUSTOM CPID
     }
@@ -503,13 +582,13 @@ export function OlgaContent() {
     const advancedToggle = document.getElementById("switch-toggle-advanced");
     if (advancedToggle) {
       advancedToggle.innerHTML =
-        `<div class='w-5 h-5 rounded-full bg-stamp-purple-darker'></div>`;
+        `<div class='w-[17px] h-[17px] mobileLg:w-5 mobileLg:h-5 rounded-full bg-stamp-purple-darker'></div>`;
     }
 
     const lockedToggle = document.getElementById("switch-toggle-locked");
     if (lockedToggle) {
       lockedToggle.innerHTML =
-        `<div class='w-5 h-5 rounded-full bg-stamp-purple-darker'></div>`;
+        `<div class='w-[17px] h-[17px] mobileLg:w-5 mobileLg:h-5 rounded-full bg-stamp-purple-darker'></div>`;
     }
   }, []);
 
@@ -880,8 +959,13 @@ export function OlgaContent() {
 
   const bodyTools = "flex flex-col w-full items-center gap-3 mobileMd:gap-6";
   const titlePurpleLDCenter =
-    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 w-full text-center";
-  const feeSelectorContainer = "p-3 mobileMd:p-6 dark-gradient z-[10] w-full";
+    "inline-block w-full mobileMd:-mb-3 mobileLg:mb-0 text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black purple-gradient3 text-center";
+  const tooltipButton =
+    "absolute left-1/2 -translate-x-1/2 bg-[#000000BF] px-2 py-1 rounded-sm mb-1 bottom-full text-[10px] mobileLg:text-xs text-stamp-grey-light whitespace-nowrap";
+  const tooltipImage =
+    "fixed bg-[#000000BF] px-2 py-1 mb-1 rounded-sm text-[10px] mobileLg:text-xs text-stamp-grey-light whitespace-nowrap pointer-events-none z-50";
+  const tooltipButtonOverflow =
+    "fixed bg-[#000000BF] px-2 py-1 rounded-sm text-[10px] mobileLg:text-xs text-stamp-grey-light whitespace-nowrap pointer-events-none z-50";
 
   const isFormValid = isValidForMinting({
     file,
@@ -941,6 +1025,246 @@ export function OlgaContent() {
     // ... rest of the effect
   }, [isConnected, wallet.address, file, fee]);
 
+  // Update the image preview div
+  const imagePreviewDiv = (
+    <div
+      id="image-preview"
+      class={`relative rounded-sm items-center mx-auto text-center cursor-pointer ${PREVIEW_SIZE_CLASSES} content-center bg-stamp-purple-dark group hover:bg-[#8800CC] transition duration-300`}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleUploadMouseEnter}
+      onMouseLeave={handleUploadMouseLeave}
+    >
+      <input
+        id="upload"
+        type="file"
+        class="hidden"
+        onChange={handleImage}
+      />
+      {file !== null
+        ? (
+          <label
+            for="upload"
+            class="cursor-pointer h-full w-full flex flex-col items-center justify-center"
+          >
+            {file.name.match(/\.(jpg|jpeg|png|gif|webp|svg|avif)$/i)
+              ? (
+                <img
+                  class={`${PREVIEW_SIZE_CLASSES} object-contain rounded bg-black [image-rendering:pixelated]`}
+                  src={URL.createObjectURL(file)}
+                  alt="Preview"
+                  onError={(e) => {
+                    logger.error("stamps", {
+                      message: "Image preview failed to load",
+                      error: e,
+                    });
+                  }}
+                />
+              )
+              : (
+                <img
+                  class={`${PREVIEW_SIZE_CLASSES} object-contain rounded bg-black [image-rendering:pixelated]`}
+                  src={NOT_AVAILABLE_IMAGE}
+                  alt={`File: ${file.name}`}
+                />
+              )}
+            <div class="absolute inset-0 hover:bg-black hover:bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+              <img
+                src="/img/stamping/image-upload.svg"
+                class="w-7 h-7 mobileMd:min-w-8 mobileMd:min-h-8 mobileLg:min-w-9 mobileLg:min-h-9"
+                alt="Change file"
+              />
+            </div>
+          </label>
+        )
+        : (
+          <label
+            for="upload"
+            class="cursor-pointer h-full flex flex-col items-center justify-center gap-3"
+          >
+            <img
+              src="/img/stamping/image-upload.svg"
+              class="w-7 h-7 mobileMd:min-w-8 mobileMd:min-h-8 mobileLg:min-w-9 mobileLg:min-h-9"
+              alt="Upload image"
+            />
+          </label>
+        )}
+      <div
+        class={`${tooltipImage} ${isUploadTooltipVisible ? "block" : "hidden"}`}
+        style={{
+          left: `${tooltipPosition.x}px`,
+          top: `${tooltipPosition.y - 6}px`,
+          transform: "translate(-50%, -100%)",
+        }}
+      >
+        UPLOAD FILE
+      </div>
+    </div>
+  );
+
+  // Update the advanced options toggle button
+  const advancedToggleButton = (
+    <button
+      class="min-w-[42px] h-[21px] mobileLg:min-w-12 mobileLg:h-6 rounded-full bg-stamp-grey flex items-center transition duration-300 focus:outline-none shadow relative"
+      onClick={handleShowAdvancedOptions}
+      onMouseEnter={handleToggleMouseEnter}
+      onMouseLeave={handleToggleMouseLeave}
+    >
+      <div
+        id="switch-toggle-advanced"
+        class="w-[21px] h-[21px] mobileLg:w-6 mobileLg:h-6 relative rounded-full transition duration-500 transform flex justify-center items-center bg-stamp-grey"
+      >
+      </div>
+      <div
+        className={`${tooltipButton} ${
+          isToggleTooltipVisible ? "block" : "hidden"
+        }`}
+      >
+        {showAdvancedOptions ? "SIMPLE" : "ADVANCED"}
+      </div>
+    </button>
+  );
+
+  // Add new state variable for POSH tooltip
+  const [isPoshTooltipVisible, setIsPoshTooltipVisible] = useState(false);
+  const [allowPoshTooltip, setAllowPoshTooltip] = useState(true);
+  const poshTooltipTimeoutRef = useRef<number | null>(null);
+
+  // Add a ref to get the button's position
+  const poshButtonRef = useRef<HTMLButtonElement>(null);
+
+  // Update the mouse enter handler to position the tooltip
+  const handlePoshMouseEnter = () => {
+    if (allowPoshTooltip && showAdvancedOptions) {
+      const buttonRect = poshButtonRef.current?.getBoundingClientRect();
+      if (buttonRect) {
+        setTooltipPosition({
+          x: buttonRect.left + buttonRect.width / 2,
+          y: buttonRect.top,
+        });
+      }
+      setIsPoshTooltipVisible(true);
+
+      if (poshTooltipTimeoutRef.current) {
+        window.clearTimeout(poshTooltipTimeoutRef.current);
+      }
+
+      poshTooltipTimeoutRef.current = window.setTimeout(() => {
+        setIsPoshTooltipVisible(false);
+      }, 1500);
+    }
+  };
+
+  const handlePoshMouseLeave = () => {
+    if (poshTooltipTimeoutRef.current) {
+      window.clearTimeout(poshTooltipTimeoutRef.current);
+    }
+    setIsPoshTooltipVisible(false);
+    setAllowPoshTooltip(true);
+  };
+
+  // Update the POSH toggle button JSX
+  const poshToggleButton = (
+    <button
+      ref={poshButtonRef}
+      class="min-w-[42px] h-[21px] mobileLg:min-w-12 mobileLg:h-6 rounded-full bg-stamp-grey flex items-center transition duration-300 focus:outline-none shadow relative"
+      onClick={handleIsPoshStamp}
+      onMouseEnter={handlePoshMouseEnter}
+      onMouseLeave={handlePoshMouseLeave}
+    >
+      <div
+        id="switch-toggle-locked"
+        class="w-[21px] h-[21px] mobileLg:w-6 mobileLg:h-6 relative rounded-full transition duration-500 transform flex justify-center items-center bg-stamp-grey"
+      >
+      </div>
+      <div
+        className={`${tooltipButton} ${
+          isPoshTooltipVisible ? "block" : "hidden"
+        }`}
+      >
+        {isPoshStamp ? "CPID" : "POSH"}
+      </div>
+    </button>
+  );
+
+  // Add these state declarations where other tooltip states are defined
+  const [isLockTooltipVisible, setIsLockTooltipVisible] = useState(false);
+  const [allowLockTooltip, setAllowLockTooltip] = useState(true);
+  const lockButtonRef = useRef<HTMLDivElement>(null);
+
+  // Add these handlers where other mouse handlers are defined
+  const handleLockMouseEnter = () => {
+    if (allowLockTooltip && showAdvancedOptions) {
+      const buttonRect = lockButtonRef.current?.getBoundingClientRect();
+      if (buttonRect) {
+        setTooltipPosition({
+          x: buttonRect.left + buttonRect.width / 2,
+          y: buttonRect.top,
+        });
+      }
+      setIsLockTooltipVisible(true);
+
+      // Clear any existing timeout
+      if (lockTooltipTimeoutRef.current) {
+        window.clearTimeout(lockTooltipTimeoutRef.current);
+      }
+
+      // Set new timeout
+      lockTooltipTimeoutRef.current = window.setTimeout(() => {
+        setIsLockTooltipVisible(false);
+      }, 1500);
+    }
+  };
+
+  const handleLockMouseLeave = () => {
+    if (lockTooltipTimeoutRef.current) {
+      window.clearTimeout(lockTooltipTimeoutRef.current);
+    }
+    setIsLockTooltipVisible(false);
+    setAllowLockTooltip(true);
+  };
+
+  // Add this with other refs
+  const lockTooltipTimeoutRef = useRef<number | null>(null);
+
+  // Add state for preview tooltip (with other tooltip states)
+  const [isPreviewTooltipVisible, setIsPreviewTooltipVisible] = useState(false);
+  const [allowPreviewTooltip, setAllowPreviewTooltip] = useState(true);
+  const previewButtonRef = useRef<HTMLDivElement>(null);
+
+  // Add ref for timeout
+  const previewTooltipTimeoutRef = useRef<number | null>(null);
+
+  // Update the handlePreviewMouseEnter to include timeout
+  const handlePreviewMouseEnter = () => {
+    if (allowPreviewTooltip && showAdvancedOptions) {
+      const buttonRect = previewButtonRef.current?.getBoundingClientRect();
+      if (buttonRect) {
+        setTooltipPosition({
+          x: buttonRect.left + buttonRect.width / 2,
+          y: buttonRect.top,
+        });
+      }
+      setIsPreviewTooltipVisible(true);
+
+      if (previewTooltipTimeoutRef.current) {
+        window.clearTimeout(previewTooltipTimeoutRef.current);
+      }
+
+      previewTooltipTimeoutRef.current = window.setTimeout(() => {
+        setIsPreviewTooltipVisible(false);
+      }, 1500);
+    }
+  };
+
+  // Update handlePreviewMouseLeave to clear timeout
+  const handlePreviewMouseLeave = () => {
+    if (previewTooltipTimeoutRef.current) {
+      window.clearTimeout(previewTooltipTimeoutRef.current);
+    }
+    setIsPreviewTooltipVisible(false);
+    setAllowPreviewTooltip(true);
+  };
+
   return (
     <div class={bodyTools}>
       <h1 class={titlePurpleLDCenter}>STAMP</h1>
@@ -954,79 +1278,7 @@ export function OlgaContent() {
       <div className="dark-gradient p-3 mobileMd:p-6 w-full">
         <div className="flex gap-3 mobileMd:gap-6">
           <div className="flex gap-3 mobileMd:gap-6">
-            <div
-              id="image-preview"
-              class="relative rounded-md items-center mx-auto text-center cursor-pointer w-[120px] h-[120px] content-center bg-stamp-purple-dark"
-            >
-              <input
-                id="upload"
-                type="file"
-                class="hidden"
-                onChange={handleImage}
-              />
-              {file !== null
-                ? (
-                  <label
-                    for="upload"
-                    class="cursor-pointer h-full w-full flex flex-col items-center justify-center"
-                  >
-                    {file.name.match(/\.(jpg|jpeg|png|gif|webp|svg|avif)$/i)
-                      ? (
-                        <img
-                          width={120}
-                          style={{
-                            height: "100%",
-                            objectFit: "contain",
-                            imageRendering: "pixelated",
-                            backgroundColor: "rgb(0,0,0)",
-                            borderRadius: "6px",
-                          }}
-                          src={URL.createObjectURL(file)}
-                          alt="Preview"
-                          onError={(e) => {
-                            logger.error("stamps", {
-                              message: "Image preview failed to load",
-                              error: e,
-                            });
-                          }}
-                        />
-                      )
-                      : (
-                        <img
-                          width={120}
-                          style={{
-                            height: "100%",
-                            objectFit: "contain",
-                            imageRendering: "pixelated",
-                            backgroundColor: "rgb(0,0,0)",
-                            borderRadius: "6px",
-                          }}
-                          src={NOT_AVAILABLE_IMAGE}
-                          alt={`File: ${file.name}`}
-                        />
-                      )}
-                    <div class="absolute inset-0 hover:bg-black hover:bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
-                      <img
-                        src="/img/stamping/image-upload.svg"
-                        class="w-12 h-12"
-                        alt="Change file"
-                      />
-                    </div>
-                  </label>
-                )
-                : (
-                  <label
-                    for="upload"
-                    class="cursor-pointer h-full flex flex-col items-center justify-center gap-3"
-                  >
-                    <img
-                      src="/img/stamping/image-upload.svg"
-                      class="w-12 h-12"
-                      alt="Upload image"
-                    />
-                  </label>
-                )}
-            </div>
+            {imagePreviewDiv}
 
             {
               /* <div class="p-6 rounded-md items-center mx-auto text-center cursor-pointer w-[120px] h-[120px] content-center bg-[#2B0E49]">
@@ -1054,21 +1306,12 @@ export function OlgaContent() {
           </div>
 
           <div class="w-full flex flex-col justify-between items-end">
-            <button
-              class="min-w-12 h-6 rounded-full bg-stamp-grey flex items-center transition duration-300 focus:outline-none shadow"
-              onClick={handleShowAdvancedOptions}
-            >
-              <div
-                id="switch-toggle-advanced"
-                class="w-6 h-6 relative rounded-full transition duration-500 transform flex justify-center items-center bg-stamp-grey"
-              >
-              </div>
-            </button>
+            {advancedToggleButton}
             <div className="flex gap-3 mobileMd:gap-6 items-center">
-              <p className="text-xl mobileMd:text-2xl desktop:text-3xl font-semibold text-stamp-grey uppercase">
-                Editions
+              <p className="text-xl mobileLg:text-2xl desktop:text-3xl font-semibold text-stamp-grey">
+                EDITIONS
               </p>
-              <div className="w-12">
+              <div className="w-[42px] mobileLg:w-12">
                 <InputField
                   type="text"
                   value={issuance}
@@ -1084,34 +1327,34 @@ export function OlgaContent() {
         <div
           className={`overflow-hidden transition-all duration-500 ${
             showAdvancedOptions
-              ? "max-h-[200px] opacity-100 mt-3 mobileMd:mt-6" // Adjust max-h value based on your content
+              ? "max-h-[200px] opacity-100 mt-3 mobileMd:mt-6"
               : "max-h-0 opacity-0 mt-0"
           }`}
         >
-          <div className="flex gap-3 mobileMd:gap-6 justify-between">
-            <button
-              class="min-w-12 h-6 rounded-full bg-stamp-grey flex items-center transition duration-300 focus:outline-none shadow"
-              onClick={handleIsPoshStamp}
+          <div className="flex gap-3 mobileMd:gap-6 justify-between mb-3 mobileMd:mb-6">
+            {poshToggleButton}
+            <div
+              ref={lockButtonRef}
+              className="w-[42px] h-[42px] mobileLg:w-12 mobileLg:h-12 bg-stamp-grey rounded-md cursor-pointer flex items-center justify-center"
+              onClick={() => {
+                setIsLocked(!isLocked);
+                setIsLockTooltipVisible(false);
+                setAllowLockTooltip(false);
+              }}
+              onMouseEnter={handleLockMouseEnter}
+              onMouseLeave={handleLockMouseLeave}
             >
-              <div
-                id="switch-toggle-locked"
-                class="w-6 h-6 relative rounded-full transition duration-500 transform flex justify-center items-center bg-stamp-grey"
-              >
-              </div>
-            </button>
-            <img
-              src={isLocked
-                ? "/img/stamping/LockSimple.svg"
-                : "/img/stamping/LockSimpleOpen.svg"}
-              className="bg-stamp-grey p-3 rounded-md cursor-pointer"
-              onClick={() => setIsLocked(!isLocked)}
-            />
+              <img
+                src={isLocked
+                  ? "/img/stamping/LockSimple.svg"
+                  : "/img/stamping/LockSimpleOpen.svg"}
+                className="w-[21px] h-[21px] mobileLg:w-6 mobileLg:h-6"
+                alt={isLocked ? "Locked" : "Unlocked"}
+              />
+            </div>
           </div>
           <div className="flex items-end gap-3 mobileMd:gap-6">
             <div className="w-full">
-              <p className="text-base mobileLg:text-lg font-medium text-stamp-grey leading-[2px] mobileMd:leading-[8px] mobileLg:leading-[12px] pb-2 mobileMd:pb-3">
-                {isPoshStamp ? "POSH" : "CUSTOM CPID"}
-              </p>
               <InputField
                 type="text"
                 value={stampName}
@@ -1123,13 +1366,21 @@ export function OlgaContent() {
                 error={stampNameError}
               />
             </div>
-            <img
-              src="/img/stamping/CornersOut.svg"
-              className={`p-3 rounded-md cursor-pointer ${
-                file ? "bg-[#999999]" : "bg-[#999999]"
-              }`}
+            <div
+              ref={previewButtonRef}
+              className="min-w-[42px] h-[42px] mobileLg:min-w-12 mobileLg:h-12 bg-stamp-grey rounded-md cursor-pointer flex items-center justify-center"
               onClick={toggleFullScreenModal}
-            />
+              onMouseEnter={handlePreviewMouseEnter}
+              onMouseLeave={handlePreviewMouseLeave}
+            >
+              <img
+                src="/img/stamping/CornersOut.svg"
+                className={`w-[21px] h-[21px] mobileLg:w-6 mobileLg:h-6 ${
+                  file ? "bg-[#999999]" : "bg-[#999999]"
+                }`}
+                alt="Toggle fullscreen"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -1200,8 +1451,7 @@ export function OlgaContent() {
               Max quality
             </label>
           </div>
-        </div>
-      </div> */
+        </div> */
       }
 
       <div className={feeSelectorContainer}>
@@ -1238,6 +1488,45 @@ export function OlgaContent() {
           contentType={file?.type?.startsWith("text/html") ? "html" : "image"}
         />
       )}
+
+      <div
+        className={`${tooltipButtonOverflow} ${
+          isPoshTooltipVisible && showAdvancedOptions ? "block" : "hidden"
+        }`}
+        style={{
+          left: `${tooltipPosition.x}px`,
+          top: `${tooltipPosition.y - 28}px`,
+          transform: "translate(-50%, 0)",
+        }}
+      >
+        {isPoshStamp ? "CPID" : "POSH"}
+      </div>
+
+      <div
+        className={`${tooltipButtonOverflow} ${
+          isLockTooltipVisible && showAdvancedOptions ? "block" : "hidden"
+        }`}
+        style={{
+          left: `${tooltipPosition.x}px`,
+          top: `${tooltipPosition.y - 28}px`,
+          transform: "translate(-50%, 0)",
+        }}
+      >
+        {isLocked ? "UNLOCK" : "LOCK"}
+      </div>
+
+      <div
+        className={`${tooltipButtonOverflow} ${
+          isPreviewTooltipVisible && showAdvancedOptions ? "block" : "hidden"
+        }`}
+        style={{
+          left: `${tooltipPosition.x}px`,
+          top: `${tooltipPosition.y - 28}px`,
+          transform: "translate(-50%, 0)",
+        }}
+      >
+        FULLSCREEN
+      </div>
     </div>
   );
 }