PR review adjustements: visual cue when clicking CopyButton & typo fix

Author: Alenar

mithril-explorer/__tests__/InOutRegistrations/compareRegistrations.test.js

@@ -26,7 +26,7 @@ describe("Compare registrations", () => {
     expect(result).toEqual({ in: [], out: [reg("party1", 10)] });
   });
 
-  it("'In', 'out', and 'still there' altogether", () => {
+  it("'In', 'out', and 'still there' all together", () => {
     const result = compareRegistrations(
       [reg("party1", 10), reg("party3", 12), reg("party4", 13)],
       [reg("party1", 10), reg("party2", 11), reg("party3", 12)],

mithril-explorer/src/components/CopyButton.js

@@ -1,22 +1,32 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
 
 export default function CopyButton({ textToCopy, variant = "link", text = "" }) {
+  const [isCopying, setIsCopying] = useState(false);
+  const [icon, setIcon] = useState("copy");
+
+  useEffect(() => {
+    setIcon(isCopying ? "check-circle" : "copy");
+  }, [isCopying]);
+
   function copyToClipboard() {
     if (window.isSecureContext && textToCopy) {
-      navigator.clipboard.writeText(textToCopy).then(() => {});
+      setIsCopying(true);
+      navigator.clipboard
+        .writeText(textToCopy)
+        .finally(() => setTimeout(() => setIsCopying(false), 400));
     }
   }
 
   return (
     <OverlayTrigger overlay={<Tooltip>Copy</Tooltip>}>
       {variant === "link" ? (
         <Button variant="link" onClick={copyToClipboard} size="md" className="p-0">
-          {text} <i className="bi bi-copy" style={{ color: "black" }}></i>
+          {text} <i className={`text-black bi bi-${icon}`}></i>
         </Button>
       ) : (
         <Button variant={variant} onClick={copyToClipboard} size="md">
-          {text} <i className="bi bi-copy"></i>
+          {text} <i className={`bi bi-${icon}`}></i>
         </Button>
       )}
     </OverlayTrigger>

mithril-explorer/src/components/RegistrationMarkdownFormatModal.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { Card, Modal, Stack } from "react-bootstrap";
-import CopyButton from "#/CopyButton";
+import { Card, Modal } from "react-bootstrap";
 import { useSelector } from "react-redux";
 import { getSelectedAggregatorPools } from "@/store/poolsSlice";
+import CopyButton from "#/CopyButton";
 
 /**
  * Modal to show a list of registrations in a markdown formatted code block