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',