2021-02-18 19:52:05 -08:00
|
|
|
import React from "react";
|
2020-08-02 10:44:47 -07:00
|
|
|
import { Link } from "react-router-dom";
|
|
|
|
import { TransactionSignature } from "@solana/web3.js";
|
|
|
|
import { clusterPath } from "utils/url";
|
2021-02-18 19:52:05 -08:00
|
|
|
import { Copyable } from "./Copyable";
|
2020-08-02 10:44:47 -07:00
|
|
|
|
2020-08-04 05:44:16 -07:00
|
|
|
type Props = {
|
|
|
|
signature: TransactionSignature;
|
|
|
|
alignRight?: boolean;
|
|
|
|
link?: boolean;
|
2020-12-03 12:23:28 -08:00
|
|
|
truncate?: boolean;
|
2021-04-14 16:22:40 -07:00
|
|
|
truncateChars?: number;
|
2020-08-04 05:44:16 -07:00
|
|
|
};
|
2020-08-02 10:44:47 -07:00
|
|
|
|
2021-04-14 16:22:40 -07:00
|
|
|
export function Signature({
|
|
|
|
signature,
|
|
|
|
alignRight,
|
|
|
|
link,
|
|
|
|
truncate,
|
|
|
|
truncateChars,
|
|
|
|
}: Props) {
|
|
|
|
let signatureLabel = signature;
|
|
|
|
|
|
|
|
if (truncateChars) {
|
|
|
|
signatureLabel = signature.slice(0, truncateChars) + "…";
|
|
|
|
}
|
|
|
|
|
2020-08-02 10:44:47 -07:00
|
|
|
return (
|
2020-08-04 05:44:16 -07:00
|
|
|
<div
|
|
|
|
className={`d-flex align-items-center ${
|
|
|
|
alignRight ? "justify-content-end" : ""
|
|
|
|
}`}
|
|
|
|
>
|
2021-02-18 19:52:05 -08:00
|
|
|
<Copyable text={signature} replaceText={!alignRight}>
|
|
|
|
<span className="text-monospace">
|
|
|
|
{link ? (
|
|
|
|
<Link
|
|
|
|
className={truncate ? "text-truncate signature-truncate" : ""}
|
|
|
|
to={clusterPath(`/tx/${signature}`)}
|
|
|
|
>
|
2021-04-14 16:22:40 -07:00
|
|
|
{signatureLabel}
|
2021-02-18 19:52:05 -08:00
|
|
|
</Link>
|
|
|
|
) : (
|
2021-04-14 16:22:40 -07:00
|
|
|
signatureLabel
|
2021-02-18 19:52:05 -08:00
|
|
|
)}
|
|
|
|
</span>
|
|
|
|
</Copyable>
|
2020-08-02 10:44:47 -07:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|