asset page link

permaweb · Aug 27, 2024 · 53f5316 · 53f5316
1 parent 29934dd
commit 53f5316
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 5 deletions.
diff --git a/src/assets/link.svg b/src/assets/link.svg
diff --git a/src/components/atoms/IconButton/styles.ts b/src/components/atoms/IconButton/styles.ts
@@ -32,6 +32,8 @@ export const Primary = styled.button<{
 	disabled: boolean | undefined;
 	active: boolean | undefined;
 }>`
+	min-height: ${(props) => (props.dimensions ? `${props.dimensions.wrapper.toString()}px` : `42.5px`)};
+	min-width: ${(props) => (props.dimensions ? `${props.dimensions.wrapper.toString()}px` : `42.5px`)};
 	height: ${(props) => (props.dimensions ? `${props.dimensions.wrapper.toString()}px` : `42.5px`)};
 	width: ${(props) => (props.dimensions ? `${props.dimensions.wrapper.toString()}px` : `42.5px`)};
 	display: flex;
@@ -42,6 +44,8 @@ export const Primary = styled.button<{
 	border-radius: 50%;
 
 	svg {
+		min-height: ${(props) => (props.dimensions ? `${props.dimensions.icon.toString()}px` : `24.5px`)};
+		min-width: ${(props) => (props.dimensions ? `${props.dimensions.icon.toString()}px` : `24.5px`)};
 		height: ${(props) => (props.dimensions ? `${props.dimensions.icon.toString()}px` : `24.5px`)};
 		width: ${(props) => (props.dimensions ? `${props.dimensions.icon.toString()}px` : `24.5px`)};
 		fill: ${(props) =>
@@ -77,6 +81,8 @@ export const Alt1 = styled(Primary)`
 				? props.theme.colors.button.primary.disabled.border
 				: props.theme.colors.button.primary.border};
 	svg {
+		min-height: ${(props) => (props.dimensions ? `${props.dimensions.icon.toString()}px` : `24.5px`)};
+		min-width: ${(props) => (props.dimensions ? `${props.dimensions.icon.toString()}px` : `24.5px`)};
 		height: ${(props) => (props.dimensions ? `${props.dimensions.icon.toString()}px` : `24.5px`)};
 		width: ${(props) => (props.dimensions ? `${props.dimensions.icon.toString()}px` : `24.5px`)};
 		fill: ${(props) =>

diff --git a/src/helpers/config.ts b/src/helpers/config.ts
@@ -24,6 +24,7 @@ import info from 'assets/info.svg';
 import leaderboard from 'assets/leaderboard.svg';
 import license from 'assets/license.svg';
 import light from 'assets/light.svg';
+import link from 'assets/link.svg';
 import list from 'assets/list.svg';
 import logo from 'assets/logo.svg';
 import market from 'assets/market.svg';
@@ -132,6 +133,7 @@ export const ASSETS = {
 	leaderboard,
 	license,
 	light,
+	link,
 	list,
 	logo,
 	market,

diff --git a/src/helpers/language.ts b/src/helpers/language.ts
@@ -36,8 +36,9 @@ export const language = {
 		connectWallet: `Connect your wallet`,
 		connectToContinue: `Connect your wallet to continue`,
 		copied: `Copied`,
-		copyWalletAddress: `Copy wallet address`,
+		copyPageUrl: `Copy URL`,
 		copyProfileAddress: `Copy profile address`,
+		copyWalletAddress: `Copy wallet address`,
 		create: `Create`,
 		createProfile: `Create your profile`,
 		createdBy: `Created by`,

diff --git a/src/views/Asset/AssetAction/AssetAction.tsx b/src/views/Asset/AssetAction/AssetAction.tsx
@@ -8,6 +8,7 @@ import { getRegistryProfiles } from 'api';
 import * as GS from 'app/styles';
 import { Button } from 'components/atoms/Button';
 import { CurrencyLine } from 'components/atoms/CurrencyLine';
+import { IconButton } from 'components/atoms/IconButton';
 import { Loader } from 'components/atoms/Loader';
 import { Modal } from 'components/molecules/Modal';
 import { OwnerLine } from 'components/molecules/OwnerLine';
@@ -79,6 +80,7 @@ export default function AssetAction(props: IProps) {
 	const [showCurrentListingsModal, setShowCurrentListingsModal] = React.useState<boolean>(false);
 
 	const [currentTab, setCurrentTab] = React.useState<string>(ACTION_TABS[0]!.label);
+	const [urlCopied, setUrlCopied] = React.useState<boolean>(false);
 
 	React.useEffect(() => {
 		if (props.asset && props.asset.state && props.asset.state.balances) {
@@ -234,6 +236,12 @@ export default function AssetAction(props: IProps) {
 		return listing.creator === arProvider.profile.id;
 	}
 
+	const copyPageUrl = React.useCallback(async () => {
+		await navigator.clipboard.writeText(window.location.href);
+		setUrlCopied(true);
+		setTimeout(() => setUrlCopied(false), 2000);
+	}, []);
+
 	const getCurrentOwners = React.useMemo(() => {
 		return (
 			<>
@@ -423,7 +431,21 @@ export default function AssetAction(props: IProps) {
 					<AssetData asset={props.asset} frameMinHeight={550} autoLoad />
 				</S.DataWrapper>
 				<S.Header>
-					<h4>{props.asset.data.title}</h4>
+					<S.HeaderTitle>
+						<h4>{props.asset.data.title}</h4>
+						<IconButton
+							type={'alt1'}
+							src={urlCopied ? ASSETS.link : ASSETS.link}
+							handlePress={copyPageUrl}
+							dimensions={{
+								wrapper: 33.5,
+								icon: 17.5,
+							}}
+							disabled={urlCopied}
+							tooltip={urlCopied ? `${language.copied}!` : language.copyPageUrl}
+							useBottomToolTip
+						/>
+					</S.HeaderTitle>
 					<S.OwnerLinesWrapper>
 						{showCurrentlyOwnedBy() && (
 							<S.OwnerLine>

diff --git a/src/views/Asset/AssetAction/styles.ts b/src/views/Asset/AssetAction/styles.ts
@@ -18,10 +18,19 @@ export const DataWrapper = styled.div`
 	}
 `;
 
-export const Header = styled.div`
+export const Header = styled.div``;
+
+export const HeaderTitle = styled.div`
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	justify-content: space-between;
+	margin: -12.5px 0 10px 0;
 	h4 {
-		line-height: 1.15;
-		margin: -5px 0 10px 0;
+		line-height: 1.5;
+	}
+	button {
+		margin: 10px 0 0 0;
 	}
 `;