blockworks-foundation
/
solana
mirror of https://github.com/blockworks-foundation/solana.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Explicitly move copy tooltip to the right

This commit is contained in:
Justin Starry 2020-05-23 16:45:07 +08:00 committed by Michael Vines
parent 62e330213f
commit 05d2bf21d2
23 changed files with 85 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
explorer/src/components/AccountDetails.tsx
View File

@ -148,7 +148,7 @@ function UnknownAccountCard({ account }: { account: Account }) {
<tr> <tr>
<td>Owner</td> <td>Owner</td>
<td className="text-right"> <td className="text-right">
<Copyable text={details.owner.toBase58()}> <Copyable text={details.owner.toBase58()} right>
<code>{displayAddress(details.owner.toBase58())}</code> <code>{displayAddress(details.owner.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>

2
explorer/src/components/ClusterModal.tsx
View File

@ -26,7 +26,7 @@ function ClusterModal() {
<div className="modal-dialog modal-dialog-vertical"> <div className="modal-dialog modal-dialog-vertical">
<div className="modal-content"> <div className="modal-content">
<div className="modal-body" onClick={e => e.stopPropagation()}> <div className="modal-body" onClick={e => e.stopPropagation()}>
<span className="close" onClick={onClose}> <span className="c-pointer" onClick={onClose}>
&times; &times;
</span> </span>

13
explorer/src/components/Copyable.tsx
View File

@ -4,22 +4,23 @@ type CopyableProps = {
text: string; text: string;
children: ReactNode; children: ReactNode;
bottom?: boolean; bottom?: boolean;
right?: boolean;
}; };
type State = "hide" | "copy" | "copied"; type State = "hide" | "copy" | "copied";
function Popover({ state, bottom }: { state: State; bottom?: boolean }) { function Popover({ state, bottom, right }: { state: State; bottom?: boolean, right?: boolean }) {
if (state === "hide") return null; if (state === "hide") return null;
const text = state === "copy" ? "Copy" : "Copied!"; const text = state === "copy" ? "Copy" : "Copied!";
return ( return (
<div className={`popover bs-popover-${bottom ? "bottom" : "top"} show`}> <div className={`popover bs-popover-${bottom ? "bottom" : "top"}${right ? " right" : ""} show`}>
<div className="arrow" /> <div className={`arrow${right ? " right" : ""}`} />
<div className="popover-body">{text}</div> <div className="popover-body">{text}</div>
</div> </div>
); );
} }
function Copyable({ bottom, text, children }: CopyableProps) { function Copyable({ bottom, right, text, children }: CopyableProps) {
const [state, setState] = useState<State>("hide"); const [state, setState] = useState<State>("hide");
const copyToClipboard = () => navigator.clipboard.writeText(text); const copyToClipboard = () => navigator.clipboard.writeText(text);
@ -31,13 +32,13 @@ function Copyable({ bottom, text, children }: CopyableProps) {
return ( return (
<div <div
className="popoover-container" className="popover-container c-pointer"
onClick={handleClick} onClick={handleClick}
onMouseOver={() => setState("copy")} onMouseOver={() => setState("copy")}
onMouseOut={() => state === "copy" && setState("hide")} onMouseOut={() => state === "copy" && setState("hide")}
> >
{children} {children}
<Popover bottom={bottom} state={state} /> <Popover bottom={bottom} right={right} state={state} />
</div> </div>
); );
} }

2
explorer/src/components/TransactionDetails.tsx
View File

@ -151,7 +151,7 @@ function StatusCard({ signature }: Props) {
<td>Timestamp</td> <td>Timestamp</td>
<td className="text-right"> <td className="text-right">
{info.timestamp !== "unavailable" ? displayTimestamp(info.timestamp) : ( {info.timestamp !== "unavailable" ? displayTimestamp(info.timestamp) : (
<InfoTooltip text="Timestamps older than 5 epochs are not available at this time"> <InfoTooltip bottom right text="Timestamps older than 5 epochs are not available at this time">
Unavailable Unavailable
</InfoTooltip> </InfoTooltip>
)} )}

10
explorer/src/components/account/StakeAccountCards.tsx
View File

@ -65,7 +65,7 @@ function OverviewCard({
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={account.pubkey.toBase58()}> <Copyable text={account.pubkey.toBase58()} bottom right>
<code>{account.pubkey.toBase58()}</code> <code>{account.pubkey.toBase58()}</code>
</Copyable> </Copyable>
</td> </td>
@ -130,7 +130,7 @@ function DelegationCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
<tr> <tr>
<td>Delegated Vote Address</td> <td>Delegated Vote Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={stake.delegation.voterPubkey.toBase58()}> <Copyable text={stake.delegation.voterPubkey.toBase58()} right>
<code> <code>
{displayAddress(stake.delegation.voterPubkey.toBase58())} {displayAddress(stake.delegation.voterPubkey.toBase58())}
</code> </code>
@ -175,7 +175,7 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
<tr> <tr>
<td>Stake Authority Address</td> <td>Stake Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={meta.authorized.staker.toBase58()}> <Copyable text={meta.authorized.staker.toBase58()} bottom right>
<code>{meta.authorized.staker.toBase58()}</code> <code>{meta.authorized.staker.toBase58()}</code>
</Copyable> </Copyable>
</td> </td>
@ -184,7 +184,7 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
<tr> <tr>
<td>Withdraw Authority Address</td> <td>Withdraw Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={meta.authorized.withdrawer.toBase58()}> <Copyable text={meta.authorized.withdrawer.toBase58()} right>
<code>{meta.authorized.withdrawer.toBase58()}</code> <code>{meta.authorized.withdrawer.toBase58()}</code>
</Copyable> </Copyable>
</td> </td>
@ -194,7 +194,7 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
<tr> <tr>
<td>Lockup Authority Address</td> <td>Lockup Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={meta.lockup.custodian.toBase58()}> <Copyable text={meta.lockup.custodian.toBase58()} right>
<code>{displayAddress(meta.lockup.custodian.toBase58())}</code> <code>{displayAddress(meta.lockup.custodian.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>

6
explorer/src/components/instruction/RawDetails.tsx
View File

@ -18,7 +18,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={ix.programId.toBase58()}> <Copyable text={ix.programId.toBase58()} bottom right>
<code>{displayAddress(ix.programId.toBase58())}</code> <code>{displayAddress(ix.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -36,7 +36,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
)} )}
</td> </td>
<td className="text-right"> <td className="text-right">
<Copyable text={pubkey.toBase58()}> <Copyable text={pubkey.toBase58()} right>
<code>{pubkey.toBase58()}</code> <code>{pubkey.toBase58()}</code>
</Copyable> </Copyable>
</td> </td>
@ -46,7 +46,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
<tr> <tr>
<td>Instruction Data (Base58)</td> <td>Instruction Data (Base58)</td>
<td className="text-right"> <td className="text-right">
<Copyable text={data}> <Copyable text={data} right>
<code>{displayData(data)}</code> <code>{displayData(data)}</code>
</Copyable> </Copyable>
</td> </td>

8
explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx
View File

@ -52,7 +52,7 @@ export function AuthorizeDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={StakeProgram.programId.toBase58()}> <Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code> <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -61,7 +61,7 @@ export function AuthorizeDetailsCard(props: {
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={stakePubkey}> <Copyable right text={stakePubkey}>
<code>{stakePubkey}</code> <code>{stakePubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -70,7 +70,7 @@ export function AuthorizeDetailsCard(props: {
<tr> <tr>
<td>Old Authority Address</td> <td>Old Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={authorizedPubkey}> <Copyable right text={authorizedPubkey}>
<code>{authorizedPubkey}</code> <code>{authorizedPubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -79,7 +79,7 @@ export function AuthorizeDetailsCard(props: {
<tr> <tr>
<td>New Authority Address</td> <td>New Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={newAuthorizedPubkey}> <Copyable right text={newAuthorizedPubkey}>
<code>{newAuthorizedPubkey}</code> <code>{newAuthorizedPubkey}</code>
</Copyable> </Copyable>
</td> </td>

6
explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx
View File

@ -38,7 +38,7 @@ export function DeactivateDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={StakeProgram.programId.toBase58()}> <Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code> <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -47,7 +47,7 @@ export function DeactivateDetailsCard(props: {
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={stakePubkey}> <Copyable right text={stakePubkey}>
<code>{stakePubkey}</code> <code>{stakePubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -56,7 +56,7 @@ export function DeactivateDetailsCard(props: {
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={authorizedPubkey}> <Copyable right text={authorizedPubkey}>
<code>{authorizedPubkey}</code> <code>{authorizedPubkey}</code>
</Copyable> </Copyable>
</td> </td>

8
explorer/src/components/instruction/stake/DelegateDetailsCard.tsx
View File

@ -39,7 +39,7 @@ export function DelegateDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={StakeProgram.programId.toBase58()}> <Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code> <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -48,7 +48,7 @@ export function DelegateDetailsCard(props: {
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={stakePubkey}> <Copyable right text={stakePubkey}>
<code>{stakePubkey}</code> <code>{stakePubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -57,7 +57,7 @@ export function DelegateDetailsCard(props: {
<tr> <tr>
<td>Delegated Vote Address</td> <td>Delegated Vote Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={votePubkey}> <Copyable right text={votePubkey}>
<code>{votePubkey}</code> <code>{votePubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -66,7 +66,7 @@ export function DelegateDetailsCard(props: {
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={authorizedPubkey}> <Copyable right text={authorizedPubkey}>
<code>{authorizedPubkey}</code> <code>{authorizedPubkey}</code>
</Copyable> </Copyable>
</td> </td>

10
explorer/src/components/instruction/stake/InitializeDetailsCard.tsx
View File

@ -40,7 +40,7 @@ export function InitializeDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={StakeProgram.programId.toBase58()}> <Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code> <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -49,7 +49,7 @@ export function InitializeDetailsCard(props: {
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={stakePubkey}> <Copyable right text={stakePubkey}>
<code>{stakePubkey}</code> <code>{stakePubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -58,7 +58,7 @@ export function InitializeDetailsCard(props: {
<tr> <tr>
<td>Stake Authority Address</td> <td>Stake Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={stakerPubkey}> <Copyable right text={stakerPubkey}>
<code>{stakerPubkey}</code> <code>{stakerPubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -67,7 +67,7 @@ export function InitializeDetailsCard(props: {
<tr> <tr>
<td>Withdraw Authority Address</td> <td>Withdraw Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={withdrawerPubkey}> <Copyable right text={withdrawerPubkey}>
<code>{withdrawerPubkey}</code> <code>{withdrawerPubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -93,7 +93,7 @@ export function InitializeDetailsCard(props: {
<tr> <tr>
<td>Lockup Custodian Address</td> <td>Lockup Custodian Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={params.lockup.custodian.toBase58()}> <Copyable right text={params.lockup.custodian.toBase58()}>
<code>{displayAddress(params.lockup.custodian.toBase58())}</code> <code>{displayAddress(params.lockup.custodian.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>

8
explorer/src/components/instruction/stake/SplitDetailsCard.tsx
View File

@ -35,7 +35,7 @@ export function SplitDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={StakeProgram.programId.toBase58()}> <Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code> <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -44,7 +44,7 @@ export function SplitDetailsCard(props: {
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={stakePubkey}> <Copyable right text={stakePubkey}>
<code>{stakePubkey}</code> <code>{stakePubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -53,7 +53,7 @@ export function SplitDetailsCard(props: {
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={authorizedPubkey}> <Copyable right text={authorizedPubkey}>
<code>{authorizedPubkey}</code> <code>{authorizedPubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -62,7 +62,7 @@ export function SplitDetailsCard(props: {
<tr> <tr>
<td>New Stake Address</td> <td>New Stake Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={splitStakePubkey}> <Copyable right text={splitStakePubkey}>
<code>{splitStakePubkey}</code> <code>{splitStakePubkey}</code>
</Copyable> </Copyable>
</td> </td>

8
explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx
View File

@ -40,7 +40,7 @@ export function WithdrawDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={StakeProgram.programId.toBase58()}> <Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code> <code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -49,7 +49,7 @@ export function WithdrawDetailsCard(props: {
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={stakePubkey}> <Copyable right text={stakePubkey}>
<code>{stakePubkey}</code> <code>{stakePubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -58,7 +58,7 @@ export function WithdrawDetailsCard(props: {
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={authorizedPubkey}> <Copyable right text={authorizedPubkey}>
<code>{authorizedPubkey}</code> <code>{authorizedPubkey}</code>
</Copyable> </Copyable>
</td> </td>
@ -67,7 +67,7 @@ export function WithdrawDetailsCard(props: {
<tr> <tr>
<td>To Address</td> <td>To Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={toPubkey}> <Copyable right text={toPubkey}>
<code>{toPubkey}</code> <code>{toPubkey}</code>
</Copyable> </Copyable>
</td> </td>

4
explorer/src/components/instruction/system/AllocateDetailsCard.tsx
View File

@ -37,7 +37,7 @@ export function AllocateDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={SystemProgram.programId.toBase58()}> <Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code> <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -46,7 +46,7 @@ export function AllocateDetailsCard(props: {
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={accountKey}> <Copyable right text={accountKey}>
<code>{accountKey}</code> <code>{accountKey}</code>
</Copyable> </Copyable>
</td> </td>

10
explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx
View File

@ -38,7 +38,7 @@ export function AllocateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={SystemProgram.programId.toBase58()}> <Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code> <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -47,7 +47,7 @@ export function AllocateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={accountKey}> <Copyable right text={accountKey}>
<code>{accountKey}</code> <code>{accountKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -56,7 +56,7 @@ export function AllocateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Base Address</td> <td>Base Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={baseKey}> <Copyable right text={baseKey}>
<code>{baseKey}</code> <code>{baseKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -65,7 +65,7 @@ export function AllocateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Seed</td> <td>Seed</td>
<td className="text-right"> <td className="text-right">
<Copyable text={params.seed}> <Copyable right text={params.seed}>
<code>{params.seed}</code> <code>{params.seed}</code>
</Copyable> </Copyable>
</td> </td>
@ -79,7 +79,7 @@ export function AllocateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Assigned Owner</td> <td>Assigned Owner</td>
<td className="text-right"> <td className="text-right">
<Copyable text={params.programId.toBase58()}> <Copyable right text={params.programId.toBase58()}>
<code>{displayAddress(params.programId.toBase58())}</code> <code>{displayAddress(params.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>

6
explorer/src/components/instruction/system/AssignDetailsCard.tsx
View File

@ -37,7 +37,7 @@ export function AssignDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={SystemProgram.programId.toBase58()}> <Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code> <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -46,7 +46,7 @@ export function AssignDetailsCard(props: {
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={accountKey}> <Copyable right text={accountKey}>
<code>{accountKey}</code> <code>{accountKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -55,7 +55,7 @@ export function AssignDetailsCard(props: {
<tr> <tr>
<td>Assigned Owner</td> <td>Assigned Owner</td>
<td className="text-right"> <td className="text-right">
<Copyable text={params.programId.toBase58()}> <Copyable right text={params.programId.toBase58()}>
<code>{displayAddress(params.programId.toBase58())}</code> <code>{displayAddress(params.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>

10
explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx
View File

@ -38,7 +38,7 @@ export function AssignWithSeedDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={SystemProgram.programId.toBase58()}> <Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code> <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -47,7 +47,7 @@ export function AssignWithSeedDetailsCard(props: {
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={accountKey}> <Copyable right text={accountKey}>
<code>{accountKey}</code> <code>{accountKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -56,7 +56,7 @@ export function AssignWithSeedDetailsCard(props: {
<tr> <tr>
<td>Base Address</td> <td>Base Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={baseKey}> <Copyable right text={baseKey}>
<code>{baseKey}</code> <code>{baseKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -65,7 +65,7 @@ export function AssignWithSeedDetailsCard(props: {
<tr> <tr>
<td>Seed</td> <td>Seed</td>
<td className="text-right"> <td className="text-right">
<Copyable text={params.seed}> <Copyable right text={params.seed}>
<code>{params.seed}</code> <code>{params.seed}</code>
</Copyable> </Copyable>
</td> </td>
@ -74,7 +74,7 @@ export function AssignWithSeedDetailsCard(props: {
<tr> <tr>
<td>Assigned Owner</td> <td>Assigned Owner</td>
<td className="text-right"> <td className="text-right">
<Copyable text={params.programId.toBase58()}> <Copyable right text={params.programId.toBase58()}>
<code>{displayAddress(params.programId.toBase58())}</code> <code>{displayAddress(params.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>

8
explorer/src/components/instruction/system/CreateDetailsCard.tsx
View File

@ -39,7 +39,7 @@ export function CreateDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={SystemProgram.programId.toBase58()}> <Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code> <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -48,7 +48,7 @@ export function CreateDetailsCard(props: {
<tr> <tr>
<td>From Address</td> <td>From Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={from}> <Copyable right text={from}>
<code>{from}</code> <code>{from}</code>
</Copyable> </Copyable>
</td> </td>
@ -57,7 +57,7 @@ export function CreateDetailsCard(props: {
<tr> <tr>
<td>New Address</td> <td>New Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={newKey}> <Copyable right text={newKey}>
<code>{newKey}</code> <code>{newKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -76,7 +76,7 @@ export function CreateDetailsCard(props: {
<tr> <tr>
<td>Assigned Owner</td> <td>Assigned Owner</td>
<td className="text-right"> <td className="text-right">
<Copyable text={params.programId.toBase58()}> <Copyable right text={params.programId.toBase58()}>
<code>{displayAddress(params.programId.toBase58())}</code> <code>{displayAddress(params.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>

14
explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx
View File

@ -40,7 +40,7 @@ export function CreateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={SystemProgram.programId.toBase58()}> <Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code> <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -49,7 +49,7 @@ export function CreateWithSeedDetailsCard(props: {
<tr> <tr>
<td>From Address</td> <td>From Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={from}> <Copyable right text={from}>
<code>{from}</code> <code>{from}</code>
</Copyable> </Copyable>
</td> </td>
@ -58,7 +58,7 @@ export function CreateWithSeedDetailsCard(props: {
<tr> <tr>
<td>New Address</td> <td>New Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={newKey}> <Copyable right text={newKey}>
<code>{newKey}</code> <code>{newKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -67,7 +67,7 @@ export function CreateWithSeedDetailsCard(props: {
<tr> <tr>
<td>New Address</td> <td>New Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={newKey}> <Copyable right text={newKey}>
<code>{newKey}</code> <code>{newKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -76,7 +76,7 @@ export function CreateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Base Address</td> <td>Base Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={baseKey}> <Copyable right text={baseKey}>
<code>{baseKey}</code> <code>{baseKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -85,7 +85,7 @@ export function CreateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Seed</td> <td>Seed</td>
<td className="text-right"> <td className="text-right">
<Copyable text={params.seed}> <Copyable right text={params.seed}>
<code>{params.seed}</code> <code>{params.seed}</code>
</Copyable> </Copyable>
</td> </td>
@ -104,7 +104,7 @@ export function CreateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Assigned Owner</td> <td>Assigned Owner</td>
<td className="text-right"> <td className="text-right">
<Copyable text={params.programId.toBase58()}> <Copyable right text={params.programId.toBase58()}>
<code>{displayAddress(params.programId.toBase58())}</code> <code>{displayAddress(params.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>

6
explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx
View File

@ -38,7 +38,7 @@ export function NonceAdvanceDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={SystemProgram.programId.toBase58()}> <Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code> <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -47,7 +47,7 @@ export function NonceAdvanceDetailsCard(props: {
<tr> <tr>
<td>Nonce Address</td> <td>Nonce Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={nonceKey}> <Copyable right text={nonceKey}>
<code>{nonceKey}</code> <code>{nonceKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -56,7 +56,7 @@ export function NonceAdvanceDetailsCard(props: {
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={authorizedKey}> <Copyable right text={authorizedKey}>
<code>{authorizedKey}</code> <code>{authorizedKey}</code>
</Copyable> </Copyable>
</td> </td>

8
explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx
View File

@ -39,7 +39,7 @@ export function NonceAuthorizeDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={SystemProgram.programId.toBase58()}> <Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code> <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -48,7 +48,7 @@ export function NonceAuthorizeDetailsCard(props: {
<tr> <tr>
<td>Nonce Address</td> <td>Nonce Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={nonceKey}> <Copyable right text={nonceKey}>
<code>{nonceKey}</code> <code>{nonceKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -57,7 +57,7 @@ export function NonceAuthorizeDetailsCard(props: {
<tr> <tr>
<td>Old Authority Address</td> <td>Old Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={authorizedKey}> <Copyable right text={authorizedKey}>
<code>{authorizedKey}</code> <code>{authorizedKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -66,7 +66,7 @@ export function NonceAuthorizeDetailsCard(props: {
<tr> <tr>
<td>New Authority Address</td> <td>New Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={newAuthorizedKey}> <Copyable right text={newAuthorizedKey}>
<code>{newAuthorizedKey}</code> <code>{newAuthorizedKey}</code>
</Copyable> </Copyable>
</td> </td>

6
explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx
View File

@ -38,7 +38,7 @@ export function NonceInitializeDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={SystemProgram.programId.toBase58()}> <Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code> <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -47,7 +47,7 @@ export function NonceInitializeDetailsCard(props: {
<tr> <tr>
<td>Nonce Address</td> <td>Nonce Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={nonceKey}> <Copyable right text={nonceKey}>
<code>{nonceKey}</code> <code>{nonceKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -56,7 +56,7 @@ export function NonceInitializeDetailsCard(props: {
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={authorizedKey}> <Copyable right text={authorizedKey}>
<code>{authorizedKey}</code> <code>{authorizedKey}</code>
</Copyable> </Copyable>
</td> </td>

8
explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx
View File

@ -41,7 +41,7 @@ export function NonceWithdrawDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={SystemProgram.programId.toBase58()}> <Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code> <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -50,7 +50,7 @@ export function NonceWithdrawDetailsCard(props: {
<tr> <tr>
<td>Nonce Address</td> <td>Nonce Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={nonceKey}> <Copyable right text={nonceKey}>
<code>{nonceKey}</code> <code>{nonceKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -59,7 +59,7 @@ export function NonceWithdrawDetailsCard(props: {
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={authorizedKey}> <Copyable right text={authorizedKey}>
<code>{authorizedKey}</code> <code>{authorizedKey}</code>
</Copyable> </Copyable>
</td> </td>
@ -68,7 +68,7 @@ export function NonceWithdrawDetailsCard(props: {
<tr> <tr>
<td>To Address</td> <td>To Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={toKey}> <Copyable right text={toKey}>
<code>{toKey}</code> <code>{toKey}</code>
</Copyable> </Copyable>
</td> </td>

6
explorer/src/components/instruction/system/TransferDetailsCard.tsx
View File

@ -33,7 +33,7 @@ export function TransferDetailsCard(props: {
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-right">
<Copyable bottom text={SystemProgram.programId.toBase58()}> <Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code> <code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable> </Copyable>
</td> </td>
@ -42,7 +42,7 @@ export function TransferDetailsCard(props: {
<tr> <tr>
<td>From Address</td> <td>From Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={from}> <Copyable right text={from}>
<code>{from}</code> <code>{from}</code>
</Copyable> </Copyable>
</td> </td>
@ -51,7 +51,7 @@ export function TransferDetailsCard(props: {
<tr> <tr>
<td>To Address</td> <td>To Address</td>
<td className="text-right"> <td className="text-right">
<Copyable text={to}> <Copyable right text={to}>
<code>{to}</code> <code>{to}</code>
</Copyable> </Copyable>
</td> </td>