add asset id copy button

src/assets/images/UI/copy.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11_2)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.6001 8.60019C5.6001 6.94337 6.94324 5.60022 8.60011 5.60022H12.8C14.4569 5.60022 15.8 6.94337 15.8 8.60019V12.8002C15.8 14.457 14.4569 15.8002 12.8 15.8002H8.60011C6.94324 15.8002 5.6001 14.457 5.6001 12.8002V8.60019ZM8.60011 6.80022C7.60599 6.80022 6.8001 7.60611 6.8001 8.60019V12.8002C6.8001 13.7943 7.60599 14.6002 8.60011 14.6002H12.8C13.7942 14.6002 14.6 13.7943 14.6 12.8002V8.60019C14.6 7.60611 13.7942 6.80022 12.8 6.80022H8.60011Z" fill="#68A1FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.199951 3.20001C0.199951 1.54316 1.5431 0.200012 3.19995 0.200012H7.54991C9.12395 0.200012 10.3999 1.476 10.3999 3.05C10.3999 3.38137 10.1313 3.65 9.79987 3.65C9.46851 3.65 9.19987 3.38137 9.19987 3.05C9.19987 2.13874 8.46115 1.40001 7.54991 1.40001H3.19995C2.20584 1.40001 1.39995 2.2059 1.39995 3.20001V7.54997C1.39995 8.46121 2.13868 9.19993 3.04994 9.19993C3.38131 9.19993 3.64994 9.46857 3.64994 9.79993C3.64994 10.1314 3.38131 10.3999 3.04994 10.3999C1.47594 10.3999 0.199951 9.12401 0.199951 7.54997V3.20001Z" fill="#68A1FF"/>
+</g>
+<defs>
+<clipPath id="clip0_11_2">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/CopyButton/CopyButton.scss

@@ -0,0 +1,3 @@
+.copy-button_copied {
+    transform: scale(0.8);
+}

src/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,25 @@
+import "./CopyButton.scss";
+import Button from "../UI/Button/Button";
+import { ReactComponent as CopyImg } from "../../assets/images/UI/copy.svg";
+import { useState } from "react";
+
+
+export default function CopyButton({ text }: { text: string }) {
+    const [copied, setCopied] = useState(false);
+
+    function onClick() {
+        if (copied) return;
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+
+        setTimeout(() => {
+            setCopied(false);
+        }, 250);
+    }
+
+    return (
+        <Button className={copied ? "copy-button_copied" : undefined} onClick={onClick} wrapper>
+            <CopyImg />
+        </Button>
+    );
+}

src/pages/Assets/Assets.tsx

@@ -10,6 +10,7 @@ import Switch from "../../components/UI/Switch/Switch";
 import { nanoid } from "nanoid";
 import Button from "../../components/UI/Button/Button";
 import { useSearchParams } from "react-router-dom";
+import CopyButton from "../../components/CopyButton/CopyButton";
 
 const AssetPopupBottom = memo(({ assetId }: { assetId?: string }) => {
 
@@ -162,9 +163,13 @@ function Assets() {
     const tableElements = assets.map(e => [
         e?.full_name || "",
         e?.ticker || "",
-        <AliasText href="/" onClick={(event) => onAssetClick(event, e)}>
-            {e?.asset_id || ""}
-        </AliasText>,
+        <div className="assets__table_asset-id">
+            <CopyButton text={e?.asset_id || ""} />
+            <AliasText href="/" onClick={(event) => onAssetClick(event, e)}>
+                {e?.asset_id || ""}
+            </AliasText>
+            
+        </div>,
         e?.price ? `${e?.price}$` : "No data"
     ]);
 

src/styles/Assets.scss

@@ -1,6 +1,15 @@
 .assets__table {
     overflow: hidden;
     border-radius: 10px;
+
+    .assets__table_asset-id {
+        display: flex;
+        gap: 10px;
+
+        > span {
+            flex: 1;
+        }
+    }
 }
 
 .asset_popup__bottom {