diff --git a/explorer/client/cypress/e2e/static/e2e.cy.ts b/explorer/client/cypress/e2e/static/e2e.cy.ts
index 029d80ff45b32..794e20aeee710 100644
--- a/explorer/client/cypress/e2e/static/e2e.cy.ts
+++ b/explorer/client/cypress/e2e/static/e2e.cy.ts
@@ -6,7 +6,7 @@ Cypress.config('baseUrl', 'http://localhost:8080');
// Standardized CSS Selectors
const mainBodyCSS = 'main > section > div';
const nftObject = (num: number) => `div#ownedObjects > div:nth-child(${num}) a`;
-const ownerButton = 'td#owner span:first-child';
+const ownerButton = 'td#owner > div > div';
// Standardized expectations:
const expectHome = () => {
diff --git a/explorer/client/src/assets/SVGIcons/16px/Copy.svg b/explorer/client/src/assets/SVGIcons/16px/Copy.svg
new file mode 100644
index 0000000000000..a6fd25805cba2
--- /dev/null
+++ b/explorer/client/src/assets/SVGIcons/16px/Copy.svg
@@ -0,0 +1,4 @@
+
diff --git a/explorer/client/src/assets/SVGIcons/24px/Copy.svg b/explorer/client/src/assets/SVGIcons/24px/Copy.svg
new file mode 100644
index 0000000000000..442083987945d
--- /dev/null
+++ b/explorer/client/src/assets/SVGIcons/24px/Copy.svg
@@ -0,0 +1,4 @@
+
diff --git a/explorer/client/src/assets/SVGIcons/Copy.svg b/explorer/client/src/assets/SVGIcons/Copy.svg
deleted file mode 100644
index 00c727a2ce632..0000000000000
--- a/explorer/client/src/assets/SVGIcons/Copy.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/explorer/client/src/components/longtext/Longtext.module.css b/explorer/client/src/components/longtext/Longtext.module.css
index c15ee7ed52dec..7134d1a80e8fe 100644
--- a/explorer/client/src/components/longtext/Longtext.module.css
+++ b/explorer/client/src/components/longtext/Longtext.module.css
@@ -1,25 +1,25 @@
-.copy {
- @apply cursor-pointer mr-2;
+.copy16,
+.copy24 {
+ @apply cursor-pointer stroke-sui-blue-steel leading-[100%] self-start sm:self-end;
+}
- /* fix some wiered vertical spacing svg with copy 16px is the high of svg */
- font-size: 16px !important;
- vertical-align: middle;
- line-height: 100%;
+.copy16 {
+ @apply hidden sm:block;
}
.copied {
- @apply text-green-600 ml-1 text-sm;
+ @apply text-green-600 text-sm self-start sm:self-center;
}
-.longtext,
-.longtext > a {
- @apply no-underline text-sui-dark hover:text-[#1F6493] cursor-pointer break-all inline mr-2;
+.copied span {
+ @apply block sm:inline w-[20vw] text-center;
}
-.linktext {
- @apply mr-2;
+.longtext,
+.longtext > a {
+ @apply no-underline text-sui-dark hover:text-[#1F6493] cursor-pointer break-all inline;
}
.longtextwrapper {
- @apply inline md:block min-w-fit;
+ @apply flex items-center gap-[6px] min-w-fit;
}
diff --git a/explorer/client/src/components/longtext/Longtext.tsx b/explorer/client/src/components/longtext/Longtext.tsx
index 146385865cf10..0d03438fb890e 100644
--- a/explorer/client/src/components/longtext/Longtext.tsx
+++ b/explorer/client/src/components/longtext/Longtext.tsx
@@ -4,7 +4,8 @@
import { useCallback, useState, useContext } from 'react';
import { Link, useNavigate } from 'react-router-dom';
-import { ReactComponent as ContentCopyIcon } from '../../assets/SVGIcons/Copy.svg';
+import { ReactComponent as ContentCopyIcon16 } from '../../assets/SVGIcons/16px/Copy.svg';
+import { ReactComponent as ContentCopyIcon24 } from '../../assets/SVGIcons/24px/Copy.svg';
import { ReactComponent as ContentForwardArrowDark } from '../../assets/SVGIcons/forward-arrow-dark.svg';
import { NetworkContext } from '../../context';
import { navigateWithUnknown } from '../../utils/searchUtil';
@@ -17,7 +18,7 @@ function Longtext({
category = 'unknown',
isLink = true,
alttext = '',
- isCopyButton = true,
+ copyButton = 'none',
showIconButton = false,
}: {
text: string;
@@ -30,7 +31,7 @@ function Longtext({
| 'unknown';
isLink?: boolean;
alttext?: string;
- isCopyButton?: boolean;
+ copyButton?: '16' | '24' | 'none';
showIconButton?: boolean;
}) {
const [isCopyIcon, setCopyIcon] = useState(true);
@@ -48,17 +49,30 @@ function Longtext({
let icon;
let iconButton = <>>;
- if (isCopyButton) {
+ if (copyButton !== 'none') {
if (pleaseWait) {
- icon = ⌛ Please Wait;
+ icon =
⌛ Please Wait
;
} else if (isCopyIcon) {
icon = (
-
-
-
+
+ {copyButton === '16' ? (
+
+ ) : (
+
+ )}
+
);
} else {
- icon = ✓ Copied;
+ icon = (
+
+ ✓ Copied
+
+ );
}
} else {
icon = <>>;
@@ -88,9 +102,9 @@ function Longtext({
if (isLink) {
if (category === 'unknown') {
textComponent = (
-
+
{alttext ? alttext : text}
-
+
);
} else if (category === 'ethAddress') {
textComponent = (
@@ -102,17 +116,19 @@ function Longtext({
);
} else {
textComponent = (
-
- {alttext ? alttext : text} {iconButton}
-
+
+
+ {alttext ? alttext : text} {iconButton}
+
+
);
}
} else {
textComponent = (
- {alttext ? alttext : text}
+ {alttext ? alttext : text}
);
}
diff --git a/explorer/client/src/components/ownedobjects/views/OwnedCoinView.tsx b/explorer/client/src/components/ownedobjects/views/OwnedCoinView.tsx
index cebb7759a98c2..4549325f999dc 100644
--- a/explorer/client/src/components/ownedobjects/views/OwnedCoinView.tsx
+++ b/explorer/client/src/components/ownedobjects/views/OwnedCoinView.tsx
@@ -65,7 +65,6 @@ function SingleCoinView({
diff --git a/explorer/client/src/components/ownedobjects/views/OwnedNFTView.tsx b/explorer/client/src/components/ownedobjects/views/OwnedNFTView.tsx
index a4970237b0bd1..95c48d4a8e103 100644
--- a/explorer/client/src/components/ownedobjects/views/OwnedNFTView.tsx
+++ b/explorer/client/src/components/ownedobjects/views/OwnedNFTView.tsx
@@ -23,7 +23,6 @@ export default function OwnedNFTView({ results }: { results: DataType }) {
diff --git a/explorer/client/src/components/table/TableCard.tsx b/explorer/client/src/components/table/TableCard.tsx
index 995389b0c29e7..12fdc79861b5a 100644
--- a/explorer/client/src/components/table/TableCard.tsx
+++ b/explorer/client/src/components/table/TableCard.tsx
@@ -66,7 +66,7 @@ export function TxAddresses({ content }: { content: LinkObj[] }) {
alttext={itm.name}
category={(itm.category as Category) || 'unknown'}
isLink={itm?.isLink}
- isCopyButton={itm?.copy}
+ copyButton={itm?.copy ? '16' : 'none'}
/>
{idx !== content.length - 1 && }
diff --git a/explorer/client/src/components/top-groups/TopGroups.tsx b/explorer/client/src/components/top-groups/TopGroups.tsx
index 52d61c05ca91c..bcaec42cd9e0d 100644
--- a/explorer/client/src/components/top-groups/TopGroups.tsx
+++ b/explorer/client/src/components/top-groups/TopGroups.tsx
@@ -125,7 +125,6 @@ function TopGroupsCard() {
text=""
category="transactions"
isLink={true}
- isCopyButton={false}
showIconButton={true}
alttext="More NFT Collections"
/>
diff --git a/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx b/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx
index 6f43f363f0d96..119a36877ac3c 100644
--- a/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx
+++ b/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx
@@ -98,7 +98,6 @@ function TopValidatorsCard({ state }: { state: ValidatorState }): JSX.Element {
alttext={truncate(validator.address, 14)}
category={'addresses'}
isLink={true}
- isCopyButton={false}
/>
),
pubkeyBytes: (
@@ -107,7 +106,6 @@ function TopValidatorsCard({ state }: { state: ValidatorState }): JSX.Element {
alttext={truncate(validator.pubkeyBytes, 14)}
category={'addresses'}
isLink={false}
- isCopyButton={false}
/>
),
})),
diff --git a/explorer/client/src/pages/address-result/AddressResult.tsx b/explorer/client/src/pages/address-result/AddressResult.tsx
index a5fab48038e85..dc4a4ff110c7f 100644
--- a/explorer/client/src/pages/address-result/AddressResult.tsx
+++ b/explorer/client/src/pages/address-result/AddressResult.tsx
@@ -39,6 +39,7 @@ function AddressResult() {
text={addressID}
category="addresses"
isLink={false}
+ copyButton="24"
/>
diff --git a/explorer/client/src/pages/object-result/views/PkgView.tsx b/explorer/client/src/pages/object-result/views/PkgView.tsx
index 0fc7bb5e277a5..cb0e96a903174 100644
--- a/explorer/client/src/pages/object-result/views/PkgView.tsx
+++ b/explorer/client/src/pages/object-result/views/PkgView.tsx
@@ -48,7 +48,6 @@ function PkgView({ data }: { data: DataType }) {
text={viewedData.id}
category="objects"
isLink={false}
- isCopyButton={false}
/>
@@ -66,7 +65,6 @@ function PkgView({ data }: { data: DataType }) {
text={viewedData.publisherAddress}
category="addresses"
isLink={!isPublisherGenesis}
- isCopyButton={false}
/>
diff --git a/explorer/client/src/pages/object-result/views/TokenView.tsx b/explorer/client/src/pages/object-result/views/TokenView.tsx
index a688fccc0f19b..7d77234d20af7 100644
--- a/explorer/client/src/pages/object-result/views/TokenView.tsx
+++ b/explorer/client/src/pages/object-result/views/TokenView.tsx
@@ -100,7 +100,6 @@ function TokenView({ data }: { data: DataType }) {
text={viewedData.id}
category="objects"
isLink={false}
- isCopyButton={false}
/>
@@ -113,7 +112,6 @@ function TokenView({ data }: { data: DataType }) {
text={viewedData.tx_digest}
category="transactions"
isLink={true}
- isCopyButton={false}
/>
@@ -138,7 +136,6 @@ function TokenView({ data }: { data: DataType }) {
viewedData.owner !== 'Immutable' &&
viewedData.owner !== 'Shared'
}
- isCopyButton={false}
/>
diff --git a/explorer/client/src/pages/object-result/views/shared/ObjHeader.tsx b/explorer/client/src/pages/object-result/views/shared/ObjHeader.tsx
index 2c51252ae1d89..201529d75d5ae 100644
--- a/explorer/client/src/pages/object-result/views/shared/ObjHeader.tsx
+++ b/explorer/client/src/pages/object-result/views/shared/ObjHeader.tsx
@@ -22,7 +22,12 @@ function ObjAddressHeader({ data }: { data: ObjHeaderData }) {
{data.objKind}
-
+
{data.objName && (
{data.objName}
diff --git a/explorer/client/src/pages/transaction-result/SendReceiveView.tsx b/explorer/client/src/pages/transaction-result/SendReceiveView.tsx
index 402755760eb41..d351ce712e5b3 100644
--- a/explorer/client/src/pages/transaction-result/SendReceiveView.tsx
+++ b/explorer/client/src/pages/transaction-result/SendReceiveView.tsx
@@ -32,7 +32,6 @@ function SendRecieveView({ data }: { data: TxAddress }) {
{data.recipient && (
@@ -43,7 +42,6 @@ function SendRecieveView({ data }: { data: TxAddress }) {
text={add}
category="addresses"
isLink={true}
- isCopyButton={false}
alttext={add}
/>
diff --git a/explorer/client/src/pages/transaction-result/TransactionView.tsx b/explorer/client/src/pages/transaction-result/TransactionView.tsx
index a7d527c940028..3413df3c75899 100644
--- a/explorer/client/src/pages/transaction-result/TransactionView.tsx
+++ b/explorer/client/src/pages/transaction-result/TransactionView.tsx
@@ -212,6 +212,7 @@ function ItemView({ data }: { data: TxItemView }) {
text={item.value as string}
category={item.category as Category}
isLink={true}
+ copyButton="16"
/>
) : item.href ? (
(
-
+
));
diff --git a/explorer/client/src/pages/transaction-result/TxLinks.tsx b/explorer/client/src/pages/transaction-result/TxLinks.tsx
index 0df37d92cb16e..07a09525d6808 100644
--- a/explorer/client/src/pages/transaction-result/TxLinks.tsx
+++ b/explorer/client/src/pages/transaction-result/TxLinks.tsx
@@ -39,6 +39,7 @@ function TxLinks({ data }: { data: Addresslist }) {
text={objId}
category={data?.category as Category}
isLink={true}
+ copyButton="16"
/>
))}
diff --git a/explorer/client/src/pages/transaction-result/TxResultHeader.module.css b/explorer/client/src/pages/transaction-result/TxResultHeader.module.css
index a47c52720264a..acd30a7f89652 100644
--- a/explorer/client/src/pages/transaction-result/TxResultHeader.module.css
+++ b/explorer/client/src/pages/transaction-result/TxResultHeader.module.css
@@ -12,7 +12,7 @@
}
.txresulttype {
- @apply capitalize py-[4px] px-[8px] flex items-center gap-[6px] mt-[8px] lg:ml-[6px] lg:mt-0 rounded-[6px] w-fit;
+ @apply capitalize pt-[4px] pb-[5px] px-[8px] flex items-center gap-[6px] mt-[8px] lg:ml-[6px] lg:mt-0 rounded-[6px] w-fit;
}
.explain > span,
diff --git a/explorer/client/src/pages/transaction-result/TxResultHeader.tsx b/explorer/client/src/pages/transaction-result/TxResultHeader.tsx
index aa2d150c25e5b..dd490d0bf6b90 100644
--- a/explorer/client/src/pages/transaction-result/TxResultHeader.tsx
+++ b/explorer/client/src/pages/transaction-result/TxResultHeader.tsx
@@ -56,6 +56,7 @@ function TxAddressHeader({ data }: { data: TxResultState }) {
text={data.txId}
category="addresses"
isLink={false}
+ copyButton="24"
/>
),
};
@@ -222,7 +221,6 @@ function ValidatorsPage({ state }: { state: ValidatorState }): JSX.Element {
text=""
category="validators"
isLink={false}
- isCopyButton={false}
alttext=""
/>
diff --git a/explorer/client/tailwind.config.js b/explorer/client/tailwind.config.js
index 5b4b87f5af6c3..4b5d6a207ac4a 100644
--- a/explorer/client/tailwind.config.js
+++ b/explorer/client/tailwind.config.js
@@ -32,6 +32,9 @@ module.exports = {
40: '#F7F8F8',
35: '#FEFEFE',
},
+ blue: {
+ steel: '#A0B6C3',
+ },
},
issue: {
dark: '#EB5A29',