fix(ui-ux): fix stucked success copy message (#653)

BirthdayResearch · Mar 6, 2023 · af7490e · af7490e
1 parent ddac426
commit af7490e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/apps/web/src/components/QrAddress.tsx b/apps/web/src/components/QrAddress.tsx
@@ -1,6 +1,6 @@
 import QRCode from "react-qr-code";
 import clsx from "clsx";
-import { PropsWithChildren, useState } from "react";
+import { PropsWithChildren, useEffect, useState } from "react";
 import useCopyToClipboard from "@hooks/useCopyToClipboard";
 import Tooltip from "@components/commons/Tooltip";
 
@@ -42,6 +42,12 @@ export default function QrAddress({
     setShowSuccessCopy(true);
   };
 
+  useEffect(() => {
+    if (showSuccessCopy) {
+      setTimeout(() => setShowSuccessCopy(false), 2000);
+    }
+  }, [showSuccessCopy]);
+
   return (
     <div className="w-[164px]">
       <SuccessCopy
@@ -59,7 +65,7 @@ export default function QrAddress({
           <button
             type="button"
             className={clsx(
-              "text-dark-700 text-left break-all focus-visible:outline-none text-center mt-2",
+              "text-dark-700 break-all focus-visible:outline-none text-center mt-2",
               "text-xs cursor-pointer hover:underline"
             )}
             onClick={() => handleOnCopy(dfcUniqueAddress)}

diff --git a/apps/web/src/components/erc-transfer/StepThreeVerification.tsx b/apps/web/src/components/erc-transfer/StepThreeVerification.tsx
@@ -213,7 +213,7 @@ export default function StepThreeVerification({
       {dfcAddress && (
         <div
           className={clsx(
-            "max-w-max mx-auto flex flex-row order-1 mt-6 justify-start border-[0.5px] border-dark-200 rounded",
+            "relative max-w-max mx-auto flex flex-row order-1 mt-6 justify-start border-[0.5px] border-dark-200 rounded",
             "md:w-2/5 md:flex-col md:shrink-0 md:order-none px-6 pt-6 pb-3 md:mt-0"
           )}
         >