[xc-admin] make UI responsive (#597)

This commit is contained in:
Daniel Chew 2023-02-15 21:02:51 +09:00 committed by GitHub
parent 0bc2601fe5
commit 234cac4261
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 51 additions and 22 deletions

View File

@ -31,6 +31,16 @@ import ClusterSwitch from '../ClusterSwitch'
import CopyPubkey from '../common/CopyPubkey'
import Loadbar from '../loaders/Loadbar'
// check if a string is a pubkey
const isPubkey = (str: string) => {
try {
new PublicKey(str)
return true
} catch (e) {
return false
}
}
const ProposalRow = ({
proposal,
setCurrentProposalPubkey,
@ -85,7 +95,7 @@ const ProposalRow = ({
const SignerTag = () => {
return (
<div className="flex items-center justify-center rounded-full bg-[#605D72] py-1 px-2 text-xs">
<div className="flex max-h-[22px] max-w-[74px] items-center justify-center rounded-full bg-[#605D72] py-1 px-2 text-xs">
Signer
</div>
)
@ -93,7 +103,7 @@ const SignerTag = () => {
const WritableTag = () => {
return (
<div className="flex items-center justify-center rounded-full bg-offPurple py-1 px-2 text-xs">
<div className="flex max-h-[22px] max-w-[74px] items-center justify-center rounded-full bg-offPurple py-1 px-2 text-xs">
Writable
</div>
)
@ -400,6 +410,9 @@ const Proposal = ({
<CopyPubkey
pubkey={instruction.args[key].toBase58()}
/>
) : typeof instruction.args[key] === 'string' &&
isPubkey(instruction.args[key]) ? (
<CopyPubkey pubkey={instruction.args[key]} />
) : (
<div className="max-w-sm break-all">
{typeof instruction.args[key] === 'string'
@ -439,14 +452,18 @@ const Proposal = ({
key={index}
className="flex justify-between border-t border-beige-300 py-3"
>
<div>{key}</div>
<div className="flex space-x-2">
<div className="max-w-[80px] break-words sm:max-w-none sm:break-normal">
{key}
</div>
<div className="space-y-2 sm:flex sm:space-x-2">
<div className="flex items-center space-x-2 sm:mt-2 sm:ml-2">
{instruction.accounts.named[key].isSigner ? (
<SignerTag />
) : null}
{instruction.accounts.named[key].isWritable ? (
<WritableTag />
) : null}
</div>
<CopyPubkey
pubkey={instruction.accounts.named[
key
@ -603,6 +620,14 @@ const Proposal = ({
key
].toBase58()}
/>
) : typeof instruction.args[key] ===
'string' &&
isPubkey(instruction.args[key]) ? (
<CopyPubkey
pubkey={
parsedInstruction.args[key]
}
/>
) : (
<div className="max-w-sm break-all">
{typeof parsedInstruction.args[
@ -659,8 +684,11 @@ const Proposal = ({
key={index}
className="flex justify-between border-t border-beige-300 py-3"
>
<div>{key}</div>
<div className="flex space-x-2">
<div className="max-w-[80px] break-words sm:max-w-none sm:break-normal">
{key}
</div>
<div className="space-y-2 sm:flex sm:space-x-2">
<div className="flex items-center space-x-2 sm:mt-2 sm:ml-2">
{parsedInstruction.accounts.named[
key
].isSigner ? (
@ -671,6 +699,7 @@ const Proposal = ({
].isWritable ? (
<WritableTag />
) : null}
</div>
<div
className="-ml-1 inline-flex cursor-pointer items-center px-1 hover:bg-dark hover:text-white active:bg-darkGray3"
onClick={() => {