feat(smart contract): add function copy address

oraichain · Sep 16, 2024 · c764c17 · c764c17
1 parent 23fdb90
commit c764c17
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 6 deletions.
diff --git a/src/components/SmartContract/ContractPreview.js b/src/components/SmartContract/ContractPreview.js
@@ -1,15 +1,19 @@
 import React from "react";
+import { NavLink } from "react-router-dom";
 import PropTypes from "prop-types";
 import cn from "classnames/bind";
 import { isNil } from "lodash-es";
 import Grid from "@material-ui/core/Grid";
+import Tooltip from '@material-ui/core/Tooltip';
+import { makeStyles } from '@material-ui/core/styles';
 import Skeleton from "@material-ui/lab/Skeleton";
+import copy from "copy-to-clipboard";
+
 import InfoRow from "src/components/common/InfoRow";
-import styles from "./ContractPreview.module.scss";
-import { NavLink } from "react-router-dom";
 import consts from "src/constants/consts";
-import Tooltip from '@material-ui/core/Tooltip';
-import { makeStyles } from '@material-ui/core/styles';
+import { ReactComponent as CopyIcon } from 'src/assets/icons/copy.svg';
+import { ReactComponent as CheckIcon } from 'src/assets/icons/check.svg';
+import styles from "./ContractPreview.module.scss";
 
 const cx = cn.bind(styles);
 
@@ -18,9 +22,10 @@ const useStyles = makeStyles((theme) => ({
 	  maxWidth: 600,
 	  fontSize: 16,
 	},
-  }));
+}));
 
 const HeaderCardSkeleton = ({ data }) => {
+	const [copied, setCopied] = React.useState(false);
 	const classes = useStyles();
 	return (
 		<Grid item lg={6} xs={12}>
@@ -38,10 +43,29 @@ const HeaderCardSkeleton = ({ data }) => {
 							<td>
 								<div className={cx("item-title")}>Address</div>
 							</td>
-							<td>
+							<td className={cx('contract-address')}>
 								<Tooltip title={data?.address} classes={{ tooltip: classes.customWidth }} className={cx("item-text")}>
 									<div >{isNil(data?.address) ? "-" : data?.address}</div>
 								</Tooltip>
+
+								{
+									data?.address ? (
+										copied ? (
+											<Tooltip title="Copied" classes={{ tooltip: classes.customWidth }}>
+												<CheckIcon />
+											</Tooltip>
+										) : (
+											<Tooltip title="Copy Address" classes={{ tooltip: classes.customWidth }} enterTouchDelay={0}>
+												<CopyIcon className={cx('copy-btn')} onClick={() => {
+													copy(data?.address);
+													setCopied(true);
+													setTimeout(() => setCopied(false), 1500);
+												}} />
+											</Tooltip>
+										)
+									) : (
+										''
+									)}
 							</td>
 						</tr>
 

diff --git a/src/components/SmartContract/ContractPreview.module.scss b/src/components/SmartContract/ContractPreview.module.scss
@@ -94,4 +94,26 @@
 			-webkit-box-orient: vertical;
 		}
 	}
+
+	.contract-address {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+
+		.item-text {
+			flex: 1;
+		}
+
+		.copy-btn {
+			width: 20px;
+
+			cursor: pointer;
+
+			&:hover {
+				path {
+					fill: #5555ff;
+				}
+			}
+		}
+	}
 }