Merge pull request #544 from DeXter-on-Radix/show-resource-addresses

Add PairInfo tab

package.json

@@ -23,6 +23,7 @@
     "@radixdlt/radix-dapp-toolkit": "^2.0.0",
     "@reduxjs/toolkit": "^2.0.1",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tippyjs/react": "^4.2.6",
     "@types/mdx": "^2.0.10",
     "@types/node": "20.3.3",
     "@types/react": "18.2.14",
@@ -37,6 +38,7 @@
     "papaparse": "^5.4.1",
     "postcss": "^8.4.32",
     "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-countup": "^6.5.3",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.1",
@@ -54,6 +56,7 @@
     "@types/big.js": "^6.2.2",
     "@types/js-cookie": "^3.0.6",
     "@types/papaparse": "^5.3.14",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "@vitejs/plugin-react": "^4.2.1",

src/app/components/CopyIcon.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { MdContentCopy } from "react-icons/md";
+import Tippy from "@tippyjs/react";
+import "tippy.js/dist/tippy.css";
+import "tippy.js/dist/svg-arrow.css";
+import { useTranslations } from "../hooks";
+
+interface CopyIconProps {
+  textToCopy: string;
+}
+
+export function CopyIcon({ textToCopy }: CopyIconProps) {
+  const [toolTipVisible, setToolTipVisible] = useState(false);
+  const t = useTranslations();
+
+  const handleCopy = () => {
+    setToolTipVisible(true);
+
+    setTimeout(() => {
+      setToolTipVisible(false);
+    }, 700);
+  };
+
+  return (
+    <>
+      <Tippy
+        content={<span>{t("copied")}</span>}
+        visible={toolTipVisible}
+        onClickOutside={() => setToolTipVisible(false)}
+        arrow={true}
+        theme="custom"
+      >
+        <div>
+          <CopyToClipboard text={textToCopy} onCopy={handleCopy}>
+            <MdContentCopy
+              className="cursor-pointer text-base"
+              title="Copy to clipboard"
+              onClick={() => setToolTipVisible(true)}
+            />
+          </CopyToClipboard>
+        </div>
+      </Tippy>
+    </>
+  );
+}