diff --git a/src/assets/images/UI/copy.svg b/src/assets/images/UI/copy.svg new file mode 100644 index 0000000..6b24020 --- /dev/null +++ b/src/assets/images/UI/copy.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/CopyButton/CopyButton.scss b/src/components/CopyButton/CopyButton.scss new file mode 100644 index 0000000..a4c8eb6 --- /dev/null +++ b/src/components/CopyButton/CopyButton.scss @@ -0,0 +1,3 @@ +.copy-button_copied { + transform: scale(0.8); +} \ No newline at end of file diff --git a/src/components/CopyButton/CopyButton.tsx b/src/components/CopyButton/CopyButton.tsx new file mode 100644 index 0000000..ca574b3 --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/pages/Assets/Assets.tsx b/src/pages/Assets/Assets.tsx index a8319d2..734ea84 100644 --- a/src/pages/Assets/Assets.tsx +++ b/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 || "", - onAssetClick(event, e)}> - {e?.asset_id || ""} - , +
+ + onAssetClick(event, e)}> + {e?.asset_id || ""} + + +
, e?.price ? `${e?.price}$` : "No data" ]); diff --git a/src/styles/Assets.scss b/src/styles/Assets.scss index 5e56026..c06d903 100644 --- a/src/styles/Assets.scss +++ b/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 {