Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Explorer] Reduces the size of the copy icon that is used with IDs #4504

Merged
merged 12 commits into from
Sep 9, 2022
2 changes: 1 addition & 1 deletion explorer/client/cypress/e2e/static/e2e.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down
4 changes: 4 additions & 0 deletions explorer/client/src/assets/SVGIcons/16px/Copy.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions explorer/client/src/assets/SVGIcons/24px/Copy.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 0 additions & 4 deletions explorer/client/src/assets/SVGIcons/Copy.svg

This file was deleted.

22 changes: 13 additions & 9 deletions explorer/client/src/components/longtext/Longtext.module.css
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
.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;
}

.copied span {
@apply block sm:inline w-[20vw] text-center;
}

.longtext,
.longtext > a {
@apply no-underline text-sui-dark hover:text-[#1F6493] cursor-pointer break-all inline mr-2;
@apply no-underline text-sui-dark hover:text-[#1F6493] cursor-pointer break-all inline;
}

.linktext {
@apply mr-2;
}

.longtextwrapper {
@apply inline md:block min-w-fit;
@apply flex items-center gap-[6px] min-w-fit mr-2;
}
52 changes: 34 additions & 18 deletions explorer/client/src/components/longtext/Longtext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -17,7 +18,7 @@ function Longtext({
category = 'unknown',
isLink = true,
alttext = '',
isCopyButton = true,
copyButton = 'none',
showIconButton = false,
}: {
text: string;
Expand All @@ -30,7 +31,7 @@ function Longtext({
| 'unknown';
isLink?: boolean;
alttext?: string;
isCopyButton?: boolean;
copyButton?: '16' | '24' | 'none';
showIconButton?: boolean;
}) {
const [isCopyIcon, setCopyIcon] = useState(true);
Expand All @@ -48,17 +49,30 @@ function Longtext({
let icon;
let iconButton = <></>;

if (isCopyButton) {
if (copyButton !== 'none') {
if (pleaseWait) {
icon = <span className={styles.copied}>&#8987; Please Wait</span>;
icon = <div className={styles.copied}>&#8987; Please Wait</div>;
} else if (isCopyIcon) {
icon = (
<span className={styles.copy} onClick={handleCopyEvent}>
<ContentCopyIcon />
</span>
<div
className={
copyButton === '16' ? styles.copy16 : styles.copy24
}
onClick={handleCopyEvent}
>
{copyButton === '16' ? (
<ContentCopyIcon16 />
) : (
<ContentCopyIcon24 />
)}
</div>
);
} else {
icon = <span className={styles.copied}>&#10003; Copied</span>;
icon = (
<span className={styles.copied}>
<span>&#10003;</span> <span>Copied</span>
</span>
);
}
} else {
icon = <></>;
Expand Down Expand Up @@ -88,9 +102,9 @@ function Longtext({
if (isLink) {
if (category === 'unknown') {
textComponent = (
<span className={styles.longtext} onClick={navigateUnknown}>
<div className={styles.longtext} onClick={navigateUnknown}>
{alttext ? alttext : text}
</span>
</div>
);
} else if (category === 'ethAddress') {
textComponent = (
Expand All @@ -102,17 +116,19 @@ function Longtext({
);
} else {
textComponent = (
<Link
className={styles.longtext}
to={`/${category}/${encodeURIComponent(text)}`}
>
{alttext ? alttext : text} {iconButton}
</Link>
<div>
<Link
className={styles.longtext}
to={`/${category}/${encodeURIComponent(text)}`}
>
{alttext ? alttext : text} {iconButton}
</Link>
</div>
);
}
} else {
textComponent = (
<span className={styles.linktext}>{alttext ? alttext : text}</span>
<div className={styles.linktext}>{alttext ? alttext : text}</div>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ function SingleCoinView({
<Longtext
text={subObj.id}
category="objects"
isCopyButton={false}
/>
</div>
<div />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export default function OwnedNFTView({ results }: { results: DataType }) {
<Longtext
text={entryObj.id}
category="objects"
isCopyButton={false}
alttext={alttextgen(entryObj.id)}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion explorer/client/src/components/table/TableCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 && <ContentForwardArrow />}
</div>
Expand Down
1 change: 0 additions & 1 deletion explorer/client/src/components/top-groups/TopGroups.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,6 @@ function TopGroupsCard() {
text=""
category="transactions"
isLink={true}
isCopyButton={false}
showIconButton={true}
alttext="More NFT Collections"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,6 @@ function TopValidatorsCard({ state }: { state: ValidatorState }): JSX.Element {
alttext={truncate(validator.address, 14)}
category={'addresses'}
isLink={true}
isCopyButton={false}
/>
),
pubkeyBytes: (
Expand All @@ -107,7 +106,6 @@ function TopValidatorsCard({ state }: { state: ValidatorState }): JSX.Element {
alttext={truncate(validator.pubkeyBytes, 14)}
category={'addresses'}
isLink={false}
isCopyButton={false}
/>
),
})),
Expand Down
1 change: 1 addition & 0 deletions explorer/client/src/pages/address-result/AddressResult.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ function AddressResult() {
text={addressID}
category="addresses"
isLink={false}
copyButton="24"
/>
</div>
</div>
Expand Down
2 changes: 0 additions & 2 deletions explorer/client/src/pages/object-result/views/PkgView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ function PkgView({ data }: { data: DataType }) {
text={viewedData.id}
category="objects"
isLink={false}
isCopyButton={false}
/>
</td>
</tr>
Expand All @@ -66,7 +65,6 @@ function PkgView({ data }: { data: DataType }) {
text={viewedData.publisherAddress}
category="addresses"
isLink={!isPublisherGenesis}
isCopyButton={false}
/>
</td>
</tr>
Expand Down
3 changes: 0 additions & 3 deletions explorer/client/src/pages/object-result/views/TokenView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,6 @@ function TokenView({ data }: { data: DataType }) {
text={viewedData.id}
category="objects"
isLink={false}
isCopyButton={false}
/>
</td>
</tr>
Expand All @@ -113,7 +112,6 @@ function TokenView({ data }: { data: DataType }) {
text={viewedData.tx_digest}
category="transactions"
isLink={true}
isCopyButton={false}
/>
</td>
</tr>
Expand All @@ -138,7 +136,6 @@ function TokenView({ data }: { data: DataType }) {
viewedData.owner !== 'Immutable' &&
viewedData.owner !== 'Shared'
}
isCopyButton={false}
/>
</td>
</tr>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,12 @@ function ObjAddressHeader({ data }: { data: ObjHeaderData }) {
<ObjIcon /> {data.objKind}
</div>
<div className={resultheaderstyle.address}>
<Longtext text={data.objId} category="objects" isLink={false} />
<Longtext
text={data.objId}
category="objects"
isLink={false}
copyButton="24"
/>
</div>
{data.objName && (
<div className={styles.objname}>{data.objName}</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ function SendRecieveView({ data }: { data: TxAddress }) {
<Longtext
text={data.sender}
category="addresses"
isCopyButton={false}
isLink={true}
/>
{data.recipient && (
Expand All @@ -43,7 +42,6 @@ function SendRecieveView({ data }: { data: TxAddress }) {
text={add}
category="addresses"
isLink={true}
isCopyButton={false}
alttext={add}
/>
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
<Link
Expand Down Expand Up @@ -267,12 +268,7 @@ function TransactionView({ txdata }: { txdata: DataType }) {

let eventTitlesDisplay = eventTitles.map((et) => (
<div key={et} className={styles.eventtitle}>
<Longtext
text={et}
category={'unknown'}
isCopyButton={false}
isLink={false}
/>
<Longtext text={et} category={'unknown'} isLink={false} />
</div>
));

Expand Down
1 change: 1 addition & 0 deletions explorer/client/src/pages/transaction-result/TxLinks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ function TxLinks({ data }: { data: Addresslist }) {
text={objId}
category={data?.category as Category}
isLink={true}
copyButton="16"
/>
</li>
))}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ function TxAddressHeader({ data }: { data: TxResultState }) {
text={data.txId}
category="addresses"
isLink={false}
copyButton="24"
/>
<div
className={cl([
Expand Down
2 changes: 0 additions & 2 deletions explorer/client/src/pages/validators/Validators.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,6 @@ function ValidatorsPage({ state }: { state: ValidatorState }): JSX.Element {
alttext={truncate(validator.pubkeyBytes, 14)}
category={'addresses'}
isLink={false}
isCopyButton={false}
/>
),
};
Expand Down Expand Up @@ -222,7 +221,6 @@ function ValidatorsPage({ state }: { state: ValidatorState }): JSX.Element {
text=""
category="validators"
isLink={false}
isCopyButton={false}
alttext=""
/>
</TabFooter>
Expand Down
3 changes: 3 additions & 0 deletions explorer/client/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ module.exports = {
40: '#F7F8F8',
35: '#FEFEFE',
},
blue: {
steel: '#A0B6C3',
},
},
issue: {
dark: '#EB5A29',
Expand Down