[xc_admin] print hex instead of number (#1256)

* print hex instead of number

* rename copypubkey

* add spaces

governance/xc_admin/packages/xc_admin_frontend/components/InstructionViews/WormholeInstructionView.tsx

@@ -16,7 +16,7 @@ import {
   getProgramName,
 } from 'xc_admin_common'
 import { AccountMeta, PublicKey } from '@solana/web3.js'
-import CopyPubkey from '../common/CopyPubkey'
+import CopyText from '../common/CopyText'
 import { ParsedAccountPubkeyRow, SignerTag, WritableTag } from './AccountUtils'
 import { usePythContext } from '../../contexts/PythContext'
 import { getMappingCluster, isPubkey } from './utils'
@@ -39,7 +39,7 @@ const GovernanceInstructionView = ({
       {content}
       <div>
         Raw payload hex:{' '}
-        <CopyPubkey pubkey={instruction.encode().toString('hex')} />
+        <CopyText text={instruction.encode().toString('hex')} />
       </div>
     </div>
   )
@@ -121,16 +121,12 @@ export const WormholeInstructionView = ({
                               <div>{key}</div>
                               {parsedInstruction.args[key] instanceof
                               PublicKey ? (
-                                <CopyPubkey
-                                  pubkey={parsedInstruction.args[
-                                    key
-                                  ].toBase58()}
+                                <CopyText
+                                  text={parsedInstruction.args[key].toBase58()}
                                 />
                               ) : typeof instruction.args[key] === 'string' &&
                                 isPubkey(instruction.args[key]) ? (
-                                <CopyPubkey
-                                  pubkey={parsedInstruction.args[key]}
-                                />
+                                <CopyText text={parsedInstruction.args[key]} />
                               ) : (
                                 <div className="max-w-sm break-all">
                                   {typeof parsedInstruction.args[key] ===
@@ -204,8 +200,8 @@ export const WormholeInstructionView = ({
                                     <WritableTag />
                                   ) : null}
                                 </div>
-                                <CopyPubkey
-                                  pubkey={parsedInstruction.accounts.named[
+                                <CopyText
+                                  text={parsedInstruction.accounts.named[
                                     key
                                   ].pubkey.toBase58()}
                                 />
@@ -258,8 +254,8 @@ export const WormholeInstructionView = ({
                                     <WritableTag />
                                   ) : null}
                                 </div>
-                                <CopyPubkey
-                                  pubkey={accountMeta.pubkey.toBase58()}
+                                <CopyText
+                                  text={accountMeta.pubkey.toBase58()}
                                 />
                               </div>
                             </div>
@@ -282,7 +278,7 @@ export const WormholeInstructionView = ({
           content={
             <div>
               Address:
-              <CopyPubkey pubkey={'0x' + governanceAction.address} />
+              <CopyText text={'0x' + governanceAction.address} />
             </div>
           }
         />
@@ -303,7 +299,7 @@ export const WormholeInstructionView = ({
           content={
             <div>
               Package hash:
-              <CopyPubkey pubkey={governanceAction.hash} />
+              <CopyText text={governanceAction.hash} />
             </div>
           }
         />
@@ -336,7 +332,7 @@ export const WormholeInstructionView = ({
                     <li>Emitter Chain: {dataSource.emitterChain}</li>
                     <li>
                       Emitter Address:{' '}
-                      <CopyPubkey pubkey={'0x' + dataSource.emitterAddress} />
+                      <CopyText text={'0x' + dataSource.emitterAddress} />
                     </li>
                   </ul>
                 </div>
@@ -353,7 +349,7 @@ export const WormholeInstructionView = ({
           content={
             <div>
               New Wormhole Address:
-              <CopyPubkey pubkey={'0x' + governanceAction.address} />
+              <CopyText text={'0x' + governanceAction.address} />
             </div>
           }
         />
@@ -391,7 +387,7 @@ export const WormholeInstructionView = ({
           content={
             <div>
               Claim Vaa hex:{' '}
-              <CopyPubkey pubkey={governanceAction.claimVaa.toString('hex')} />
+              <CopyText text={governanceAction.claimVaa.toString('hex')} />
             </div>
           }
         />
@@ -405,14 +401,19 @@ export const WormholeInstructionView = ({
             <div>
               <div>
                 Executor Address:{' '}
-                <CopyPubkey pubkey={'0x' + governanceAction.executorAddress} />
+                <CopyText text={'0x' + governanceAction.executorAddress} />
               </div>
               <div>
-                Call Address:
-                <CopyPubkey pubkey={'0x' + governanceAction.callAddress} />
+                Call Address:{' '}
+                <CopyText text={'0x' + governanceAction.callAddress} />
               </div>
               <div>Value: {governanceAction.value.toString()}</div>
-              <div>Call Data: {governanceAction.calldata}</div>
+              <div>
+                Call Data:{' '}
+                <CopyText
+                  text={'0x' + governanceAction.calldata.toString('hex')}
+                />
+              </div>
             </div>
           }
         />

governance/xc_admin/packages/xc_admin_frontend/components/common/CopyPubkey.tsx

@@ -1,23 +0,0 @@
-import copy from 'copy-to-clipboard'
-import CopyIcon from '../../images/icons/copy.inline.svg'
-
-const CopyPubkey: React.FC<{
-  pubkey: string
-}> = ({ pubkey }) => {
-  return (
-    <div
-      className="-ml-1 inline-flex cursor-pointer items-center px-1 hover:bg-dark hover:text-white active:bg-darkGray3 break-all"
-      onClick={() => {
-        copy(pubkey)
-      }}
-    >
-      <span className="mr-2 hidden xl:block">{pubkey}</span>
-      <span className="mr-2 xl:hidden">
-        {pubkey.slice(0, 6) + '...' + pubkey.slice(-6)}
-      </span>{' '}
-      <CopyIcon className="shrink-0" />
-    </div>
-  )
-}
-
-export default CopyPubkey

governance/xc_admin/packages/xc_admin_frontend/components/common/CopyText.tsx

@@ -0,0 +1,23 @@
+import copy from 'copy-to-clipboard'
+import CopyIcon from '../../images/icons/copy.inline.svg'
+
+const CopyText: React.FC<{
+  text: string
+}> = ({ text }) => {
+  return (
+    <div
+      className="-ml-1 inline-flex cursor-pointer items-center break-all px-1 hover:bg-dark hover:text-white active:bg-darkGray3"
+      onClick={() => {
+        copy(text)
+      }}
+    >
+      <span className="mr-2 hidden xl:block">{text}</span>
+      <span className="mr-2 xl:hidden">
+        {text.slice(0, 6) + '...' + text.slice(-6)}
+      </span>{' '}
+      <CopyIcon className="shrink-0" />
+    </div>
+  )
+}
+
+export default CopyText

governance/xc_admin/packages/xc_admin_frontend/components/tabs/Proposals.tsx

@@ -25,7 +25,7 @@ import WarningIcon from '../../images/icons/warning.inline.svg'
 import VotedIcon from '../../images/icons/voted.inline.svg'
 import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter'
 import ClusterSwitch from '../ClusterSwitch'
-import CopyPubkey from '../common/CopyPubkey'
+import CopyText from '../common/CopyText'
 import Spinner from '../common/Spinner'
 import Loadbar from '../loaders/Loadbar'
 import ProposalStatusFilter from '../ProposalStatusFilter'
@@ -224,7 +224,7 @@ const AccountList = ({
               {pubkey.toBase58() in multisigSignerKeyToNameMapping &&
                 `(${multisigSignerKeyToNameMapping[pubkey.toBase58()]})`}
             </div>
-            <CopyPubkey pubkey={pubkey.toBase58()} />
+            <CopyText text={pubkey.toBase58()} />
           </div>
         </div>
       ))}
@@ -445,15 +445,15 @@ const Proposal = ({
         </div>
         <div className="flex justify-between">
           <div>Proposal</div>
-          <CopyPubkey pubkey={proposal.publicKey.toBase58()} />
+          <CopyText text={proposal.publicKey.toBase58()} />
         </div>
         <div className="flex justify-between">
           <div>Creator</div>
-          <CopyPubkey pubkey={proposal.creator.toBase58()} />
+          <CopyText text={proposal.creator.toBase58()} />
         </div>
         <div className="flex justify-between">
           <div>Multisig</div>
-          <CopyPubkey pubkey={proposal.ms.toBase58()} />
+          <CopyText text={proposal.ms.toBase58()} />
         </div>
       </div>
       <div className="col-span-3 my-2 space-y-4 bg-[#1E1B2F] p-4 lg:col-span-1">
@@ -582,12 +582,10 @@ const Proposal = ({
                         <div className="flex justify-between border-t border-beige-300 py-3">
                           <div>{key}</div>
                           {instruction.args[key] instanceof PublicKey ? (
-                            <CopyPubkey
-                              pubkey={instruction.args[key].toBase58()}
-                            />
+                            <CopyText text={instruction.args[key].toBase58()} />
                           ) : typeof instruction.args[key] === 'string' &&
                             isPubkey(instruction.args[key]) ? (
-                            <CopyPubkey pubkey={instruction.args[key]} />
+                            <CopyText text={instruction.args[key]} />
                           ) : (
                             <div className="max-w-sm break-all">
                               {typeof instruction.args[key] === 'string'
@@ -653,8 +651,8 @@ const Proposal = ({
                                   <WritableTag />
                                 ) : null}
                               </div>
-                              <CopyPubkey
-                                pubkey={instruction.accounts.named[
+                              <CopyText
+                                text={instruction.accounts.named[
                                   key
                                 ].pubkey.toBase58()}
                               />