explorer: add error message to copy component (#15423)
* explorer: add error message to copy component * Merge copyable and copy button components Co-authored-by: Justin Starry <justin@solana.com>
This commit is contained in:
parent
4e84869c8e
commit
e0e4bed205
|
@ -1,11 +1,11 @@
|
|||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { PublicKey } from "@solana/web3.js";
|
||||
import { clusterPath } from "utils/url";
|
||||
import { displayAddress } from "utils/tx";
|
||||
import { useCluster } from "providers/cluster";
|
||||
import { Copyable } from "./Copyable";
|
||||
|
||||
type CopyState = "copy" | "copied";
|
||||
type Props = {
|
||||
pubkey: PublicKey;
|
||||
alignRight?: boolean;
|
||||
|
@ -23,31 +23,15 @@ export function Address({
|
|||
truncate,
|
||||
truncateUnknown,
|
||||
}: Props) {
|
||||
const [state, setState] = useState<CopyState>("copy");
|
||||
const address = pubkey.toBase58();
|
||||
const { cluster } = useCluster();
|
||||
|
||||
const copyToClipboard = () => navigator.clipboard.writeText(address);
|
||||
const handleClick = () =>
|
||||
copyToClipboard().then(() => {
|
||||
setState("copied");
|
||||
setTimeout(() => setState("copy"), 1000);
|
||||
});
|
||||
|
||||
const copyIcon =
|
||||
state === "copy" ? (
|
||||
<span className="fe fe-copy" onClick={handleClick}></span>
|
||||
) : (
|
||||
<span className="fe fe-check-circle"></span>
|
||||
);
|
||||
|
||||
if (truncateUnknown && address === displayAddress(address, cluster)) {
|
||||
truncate = true;
|
||||
}
|
||||
|
||||
const content = (
|
||||
<>
|
||||
<span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
|
||||
<Copyable text={address} replaceText={!alignRight}>
|
||||
<span className="text-monospace">
|
||||
{link ? (
|
||||
<Link
|
||||
|
@ -62,7 +46,7 @@ export function Address({
|
|||
</span>
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
</Copyable>
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
|
@ -1,56 +1,98 @@
|
|||
import React, { useState, ReactNode } from "react";
|
||||
import React, { ReactNode, useState } from "react";
|
||||
|
||||
type CopyableProps = {
|
||||
type CopyState = "copy" | "copied" | "errored";
|
||||
|
||||
export function Copyable({
|
||||
text,
|
||||
children,
|
||||
replaceText,
|
||||
}: {
|
||||
text: string;
|
||||
children: ReactNode;
|
||||
bottom?: boolean;
|
||||
right?: boolean;
|
||||
};
|
||||
|
||||
type State = "hide" | "copy" | "copied";
|
||||
|
||||
function Popover({
|
||||
state,
|
||||
bottom,
|
||||
right,
|
||||
}: {
|
||||
state: State;
|
||||
bottom?: boolean;
|
||||
right?: boolean;
|
||||
replaceText?: boolean;
|
||||
}) {
|
||||
if (state === "hide") return null;
|
||||
const text = state === "copy" ? "Copy" : "Copied!";
|
||||
return (
|
||||
<div
|
||||
className={`popover bs-popover-${bottom ? "bottom" : "top"}${
|
||||
right ? " right" : ""
|
||||
} show`}
|
||||
>
|
||||
<div className={`arrow${right ? " right" : ""}`} />
|
||||
<div className="popover-body">{text}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const [state, setState] = useState<CopyState>("copy");
|
||||
|
||||
export function Copyable({ bottom, right, text, children }: CopyableProps) {
|
||||
const [state, setState] = useState<State>("hide");
|
||||
|
||||
const copyToClipboard = () => navigator.clipboard.writeText(text);
|
||||
const handleClick = () =>
|
||||
copyToClipboard().then(() => {
|
||||
const handleClick = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setState("copied");
|
||||
setTimeout(() => setState("hide"), 1000);
|
||||
});
|
||||
} catch (err) {
|
||||
setState("errored");
|
||||
}
|
||||
setTimeout(() => setState("copy"), 1000);
|
||||
};
|
||||
|
||||
function CopyIcon() {
|
||||
if (state === "copy") {
|
||||
return (
|
||||
<span className="fe fe-copy c-pointer" onClick={handleClick}></span>
|
||||
);
|
||||
} else if (state === "copied") {
|
||||
return <span className="fe fe-check-circle"></span>;
|
||||
} else if (state === "errored") {
|
||||
return (
|
||||
<span
|
||||
className="fe fe-x-circle"
|
||||
title="Please check your browser's copy permissions."
|
||||
></span>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
let message = "";
|
||||
let textColor = "";
|
||||
if (state === "copied") {
|
||||
message = "Copied";
|
||||
textColor = "text-info";
|
||||
} else if (state === "errored") {
|
||||
message = "Copy Failed";
|
||||
textColor = "text-danger";
|
||||
}
|
||||
|
||||
function PrependCopyIcon() {
|
||||
return (
|
||||
<>
|
||||
<span className="font-size-tiny mr-2">
|
||||
<span className={textColor}>
|
||||
<span className="mr-2">{message}</span>
|
||||
<CopyIcon />
|
||||
</span>
|
||||
</span>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ReplaceWithMessage() {
|
||||
return (
|
||||
<span className="d-flex flex-column flex-nowrap">
|
||||
<span className="font-size-tiny">
|
||||
<span className={textColor}>
|
||||
<CopyIcon />
|
||||
<span className="ml-2">{message}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="v-hidden">{children}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (state === "copy") {
|
||||
return <PrependCopyIcon />;
|
||||
} else if (replaceText) {
|
||||
return <ReplaceWithMessage />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="popover-container c-pointer"
|
||||
onClick={handleClick}
|
||||
onMouseOver={() => setState("copy")}
|
||||
onMouseOut={() => state === "copy" && setState("hide")}
|
||||
>
|
||||
{children}
|
||||
<Popover bottom={bottom} right={right} state={state} />
|
||||
</div>
|
||||
<>
|
||||
<span className="d-none d-lg-inline">
|
||||
<PrependCopyIcon />
|
||||
</span>
|
||||
<span className="d-inline d-lg-none">
|
||||
<ReplaceWithMessage />
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { TransactionSignature } from "@solana/web3.js";
|
||||
import { clusterPath } from "utils/url";
|
||||
import { Copyable } from "./Copyable";
|
||||
|
||||
type CopyState = "copy" | "copied";
|
||||
type Props = {
|
||||
signature: TransactionSignature;
|
||||
alignRight?: boolean;
|
||||
|
@ -12,45 +12,26 @@ type Props = {
|
|||
};
|
||||
|
||||
export function Signature({ signature, alignRight, link, truncate }: Props) {
|
||||
const [state, setState] = useState<CopyState>("copy");
|
||||
|
||||
const copyToClipboard = () => navigator.clipboard.writeText(signature);
|
||||
const handleClick = () =>
|
||||
copyToClipboard().then(() => {
|
||||
setState("copied");
|
||||
setTimeout(() => setState("copy"), 1000);
|
||||
});
|
||||
|
||||
const copyIcon =
|
||||
state === "copy" ? (
|
||||
<span className="fe fe-copy" onClick={handleClick}></span>
|
||||
) : (
|
||||
<span className="fe fe-check-circle"></span>
|
||||
);
|
||||
|
||||
const copyButton = (
|
||||
<span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`d-flex align-items-center ${
|
||||
alignRight ? "justify-content-end" : ""
|
||||
}`}
|
||||
>
|
||||
{copyButton}
|
||||
<span className="text-monospace">
|
||||
{link ? (
|
||||
<Link
|
||||
className={truncate ? "text-truncate signature-truncate" : ""}
|
||||
to={clusterPath(`/tx/${signature}`)}
|
||||
>
|
||||
{signature}
|
||||
</Link>
|
||||
) : (
|
||||
signature
|
||||
)}
|
||||
</span>
|
||||
<Copyable text={signature} replaceText={!alignRight}>
|
||||
<span className="text-monospace">
|
||||
{link ? (
|
||||
<Link
|
||||
className={truncate ? "text-truncate signature-truncate" : ""}
|
||||
to={clusterPath(`/tx/${signature}`)}
|
||||
>
|
||||
{signature}
|
||||
</Link>
|
||||
) : (
|
||||
signature
|
||||
)}
|
||||
</span>
|
||||
</Copyable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,40 +1,21 @@
|
|||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { clusterPath } from "utils/url";
|
||||
import { Copyable } from "./Copyable";
|
||||
|
||||
type CopyState = "copy" | "copied";
|
||||
type Props = {
|
||||
slot: number;
|
||||
link?: boolean;
|
||||
};
|
||||
export function Slot({ slot, link }: Props) {
|
||||
const [state, setState] = useState<CopyState>("copy");
|
||||
|
||||
const copyToClipboard = () => navigator.clipboard.writeText(slot.toString());
|
||||
const handleClick = () =>
|
||||
copyToClipboard().then(() => {
|
||||
setState("copied");
|
||||
setTimeout(() => setState("copy"), 1000);
|
||||
});
|
||||
|
||||
const copyIcon =
|
||||
state === "copy" ? (
|
||||
<span className="fe fe-copy" onClick={handleClick}></span>
|
||||
) : (
|
||||
<span className="fe fe-check-circle"></span>
|
||||
);
|
||||
|
||||
const copyButton = (
|
||||
<span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
|
||||
);
|
||||
|
||||
return link ? (
|
||||
<span className="text-monospace">
|
||||
{copyButton}
|
||||
<Link to={clusterPath(`/block/${slot}`)}>
|
||||
{slot.toLocaleString("en-US")}
|
||||
</Link>
|
||||
</span>
|
||||
<Copyable text={slot.toString()}>
|
||||
<span className="text-monospace">
|
||||
<Link to={clusterPath(`/block/${slot}`)}>
|
||||
{slot.toLocaleString("en-US")}
|
||||
</Link>
|
||||
</span>
|
||||
</Copyable>
|
||||
) : (
|
||||
<span className="text-monospace">{slot.toLocaleString("en-US")}</span>
|
||||
);
|
||||
|
|
|
@ -52,7 +52,7 @@ export function AllocateWithSeedDetailsCard(props: {
|
|||
<tr>
|
||||
<td>Seed</td>
|
||||
<td className="text-lg-right">
|
||||
<Copyable right text={info.seed}>
|
||||
<Copyable text={info.seed}>
|
||||
<code>{info.seed}</code>
|
||||
</Copyable>
|
||||
</td>
|
||||
|
|
|
@ -52,7 +52,7 @@ export function AssignWithSeedDetailsCard(props: {
|
|||
<tr>
|
||||
<td>Seed</td>
|
||||
<td className="text-lg-right">
|
||||
<Copyable right text={info.seed}>
|
||||
<Copyable text={info.seed}>
|
||||
<code>{info.seed}</code>
|
||||
</Copyable>
|
||||
</td>
|
||||
|
|
|
@ -60,7 +60,7 @@ export function CreateWithSeedDetailsCard(props: {
|
|||
<tr>
|
||||
<td>Seed</td>
|
||||
<td className="text-lg-right">
|
||||
<Copyable right text={info.seed}>
|
||||
<Copyable text={info.seed}>
|
||||
<code>{info.seed}</code>
|
||||
</Copyable>
|
||||
</td>
|
||||
|
|
|
@ -65,7 +65,7 @@ export function TransferWithSeedDetailsCard(props: {
|
|||
<tr>
|
||||
<td>Seed</td>
|
||||
<td className="text-lg-right">
|
||||
<Copyable right text={info.sourceSeed}>
|
||||
<Copyable text={info.sourceSeed}>
|
||||
<code>{info.sourceSeed}</code>
|
||||
</Copyable>
|
||||
</td>
|
||||
|
|
|
@ -71,6 +71,15 @@ ul.log-messages {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.v-hidden {
|
||||
visibility: hidden;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.dropdown-exit {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
|
|
Loading…
Reference in New Issue