From 6d823aa18e390a08f713898c1e3847211e4bed72 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <43585069+Sharqiewicz@users.noreply.github.com>
Date: Fri, 6 Sep 2024 17:04:59 +0200
Subject: [PATCH] Make the issuer's address copyable similar to vault address
 and memo (Spacewalk)

* extract ClickablePublicKey component from PublicKey

* extract CopyablePublicKey component from PublicKey

* refactor PublicKey component

* lint css classes CloseButton

* update component name from CopyableAddress to CopyablePublicKey
---
 src/components/CloseButton.tsx                |   2 +-
 .../PublicKey/ClickablePublicKey/index.tsx    |  32 +++++
 .../PublicKey/CopyablePublicKey/index.tsx     |  21 +++
 src/components/PublicKey/index.tsx            | 121 ++++--------------
 .../Wallet/modals/DisconnectModal/index.tsx   |  14 +-
 .../bridge/Issue/ConfirmationDialog.tsx       |  18 +--
 .../bridge/Redeem/ConfirmationDialog.tsx      |  12 +-
 .../bridge/TransferDialog/TransferDialog.tsx  |  22 ++--
 .../transactions/TransactionDialog.tsx        |  66 +++++-----
 .../CancelledTransferDialog.tsx               |  10 +-
 .../CompletedTransferDialog.tsx               |  12 +-
 .../TransferDialog/PendingTransferDialog.tsx  |  20 +--
 .../TransferDialog/TransferDialog.tsx         |  22 ++--
 src/pages/staking/CollatorColumns.tsx         |   4 +-
 14 files changed, 182 insertions(+), 194 deletions(-)
 create mode 100644 src/components/PublicKey/ClickablePublicKey/index.tsx
 create mode 100644 src/components/PublicKey/CopyablePublicKey/index.tsx

diff --git a/src/components/CloseButton.tsx b/src/components/CloseButton.tsx
index d5d2283a..14993d6a 100644
--- a/src/components/CloseButton.tsx
+++ b/src/components/CloseButton.tsx
@@ -7,7 +7,7 @@ export const CloseButton = (props: ButtonProps) => (
     color="ghost"
     size="sm"
     shape="circle"
-    className="text-xl font-thin !leading-5 w-[2.25rem] h-[2.25rem]"
+    className="h-[2.25rem] w-[2.25rem] text-xl font-thin !leading-5"
     style={{ color: 'var(--secondary)' }}
     type="button"
     {...props}
diff --git a/src/components/PublicKey/ClickablePublicKey/index.tsx b/src/components/PublicKey/ClickablePublicKey/index.tsx
new file mode 100644
index 00000000..257bbda1
--- /dev/null
+++ b/src/components/PublicKey/ClickablePublicKey/index.tsx
@@ -0,0 +1,32 @@
+import { CSSProperties } from 'preact/compat';
+import { Button } from 'react-daisyui';
+import { FormatPublicKeyVariant, PublicKey } from '..';
+
+export interface ClickablePublicKeyProps {
+  publicKey: string;
+  variant?: FormatPublicKeyVariant;
+  inline?: boolean;
+  style?: CSSProperties;
+  className?: string;
+  icon?: JSX.Element;
+  onClick?: () => void;
+  wrap?: boolean;
+}
+
+export const ClickablePublicKey = (props: ClickablePublicKeyProps) => (
+  <Button
+    className="m-0 h-1 rounded p-1"
+    style={props.inline ? { height: 'inherit', minHeight: '0', padding: 0 } : {}}
+    color="ghost"
+    type="button"
+    onClick={props.onClick}
+  >
+    {props.icon ? (
+      <>
+        {props.icon}
+        &nbsp;
+      </>
+    ) : null}
+    <PublicKey {...props} />
+  </Button>
+);
diff --git a/src/components/PublicKey/CopyablePublicKey/index.tsx b/src/components/PublicKey/CopyablePublicKey/index.tsx
new file mode 100644
index 00000000..584ea5ce
--- /dev/null
+++ b/src/components/PublicKey/CopyablePublicKey/index.tsx
@@ -0,0 +1,21 @@
+import { ClickablePublicKey, ClickablePublicKeyProps } from '../ClickablePublicKey';
+import { useClipboard } from '../../../hooks/useClipboard';
+import CopyIcon from '../../../assets/CopyIcon';
+
+interface CopyablePublicKeyProps extends ClickablePublicKeyProps {
+  onClick?: () => void;
+  publicKey: string;
+}
+
+export const CopyablePublicKey = ({ onClick, publicKey, ...props }: CopyablePublicKeyProps) => {
+  const clipboard = useClipboard();
+
+  const handleClick = () => {
+    onClick && onClick();
+    clipboard.copyToClipboard(publicKey);
+  };
+
+  return (
+    <ClickablePublicKey {...{ ...props, publicKey }} onClick={handleClick} icon={<CopyIcon className="w-4 h-4" />} />
+  );
+};
diff --git a/src/components/PublicKey/index.tsx b/src/components/PublicKey/index.tsx
index 0904182e..0da0f83b 100644
--- a/src/components/PublicKey/index.tsx
+++ b/src/components/PublicKey/index.tsx
@@ -1,120 +1,55 @@
-import { CSSProperties, memo, useCallback } from 'preact/compat';
-import { Button } from 'react-daisyui';
-import CopyIcon from '../../assets/CopyIcon';
-import { useClipboard } from '../../hooks/useClipboard';
+import { CSSProperties } from 'preact/compat';
 
-type Variant = 'full' | 'short' | 'shorter' | 'hexa';
+export type FormatPublicKeyVariant = 'full' | 'short' | 'shorter' | 'hexa';
 
-function getDigitCounts(variant?: Variant) {
-  if (variant === 'short') {
-    return {
-      leading: 6,
-      trailing: 6,
-    };
-  } else if (variant === 'hexa') {
-    return {
-      leading: 10,
-      trailing: 10,
-    };
-  } else {
-    return {
-      leading: 4,
-      trailing: 4,
-    };
-  }
+const digitCounts: Record<FormatPublicKeyVariant, { leading: number; trailing: number }> = {
+  full: { leading: 4, trailing: 4 },
+  shorter: { leading: 4, trailing: 4 },
+  short: { leading: 6, trailing: 6 },
+  hexa: { leading: 10, trailing: 10 },
+};
+
+function getDigitCounts(variant: FormatPublicKeyVariant = 'full') {
+  return digitCounts[variant];
 }
 
 export function shortenName(name: string, intendedLength: number) {
   if (name.length <= intendedLength) {
     return name;
-  } else {
-    return (
-      name.substr(0, intendedLength - 3).trim() +
-      '…' +
-      name
-        .substr(intendedLength - 3)
-        .substr(-3)
-        .trim()
-    );
   }
+  return (
+    name.substring(0, intendedLength - 3).trim() +
+    '…' +
+    name
+      .substring(intendedLength - 3)
+      .slice(-3)
+      .trim()
+  );
 }
 
 interface PublicKeyProps {
   publicKey: string;
-  variant?: Variant;
+  variant?: FormatPublicKeyVariant;
   style?: CSSProperties;
   className?: string;
   showRaw?: boolean;
 }
 
-// tslint:disable-next-line no-shadowed-variable
-export const PublicKey = memo(function PublicKey(props: PublicKeyProps) {
-  const { variant = 'full', className } = props;
-  const digits = getDigitCounts(props.variant);
+export function PublicKey({ publicKey, variant = 'full', style, className }: PublicKeyProps) {
+  const digits = getDigitCounts(variant);
 
-  const style: CSSProperties = {
+  const spanStyle: CSSProperties = {
     userSelect: 'text',
     WebkitUserSelect: 'text',
     whiteSpace: variant !== 'full' ? 'pre' : undefined,
-    ...props.style,
+    ...style,
   };
 
   return (
-    <span style={style} className={className}>
-      {props.variant === 'full' || !props.variant
-        ? props.publicKey
-        : props.publicKey.substr(0, digits.leading) + '…' + props.publicKey.substr(-digits.trailing)}
+    <span style={spanStyle} className={className}>
+      {variant === 'full'
+        ? publicKey
+        : publicKey.substring(0, digits.leading) + '…' + publicKey.substring(publicKey.length - digits.trailing)}
     </span>
   );
-});
-
-interface AddressProps {
-  publicKey: string;
-  variant?: Variant;
-  inline?: boolean;
-  style?: CSSProperties;
-  className?: string;
-  icon?: JSX.Element;
-  onClick?: () => void;
-  wrap?: boolean;
-}
-
-// tslint:disable-next-line no-shadowed-variable
-export const ClickableAddress = memo(function ClickableAddress(props: AddressProps) {
-  return (
-    <Button
-      className="h-1 p-1 m-0 rounded"
-      style={props.inline ? { height: 'inherit', minHeight: '0', padding: 0 } : {}}
-      color="ghost"
-      type="button"
-      onClick={props.onClick}
-    >
-      {props.icon ? (
-        <>
-          {props.icon}
-          &nbsp;
-        </>
-      ) : null}
-      <PublicKey {...props} />
-    </Button>
-  );
-});
-
-interface CopyableAddressProps extends AddressProps {
-  onClick?: () => void;
 }
-
-// tslint:disable-next-line no-shadowed-variable
-export const CopyableAddress = memo(function CopyableAddress(props: CopyableAddressProps) {
-  const { onClick } = props;
-  const clipboard = useClipboard();
-
-  const handleClick = useCallback(() => {
-    if (onClick) {
-      onClick();
-    }
-    clipboard.copyToClipboard(props.publicKey);
-  }, [clipboard, onClick, props.publicKey]);
-
-  return <ClickableAddress {...props} onClick={handleClick} icon={<CopyIcon className="w-4 h-4" />} />;
-});
diff --git a/src/components/Wallet/modals/DisconnectModal/index.tsx b/src/components/Wallet/modals/DisconnectModal/index.tsx
index 6c732172..3db2f292 100644
--- a/src/components/Wallet/modals/DisconnectModal/index.tsx
+++ b/src/components/Wallet/modals/DisconnectModal/index.tsx
@@ -8,7 +8,7 @@ import { getAddressForFormat } from '../../../../helpers/addressFormatter';
 import { useNodeInfoState } from '../../../../NodeInfoProvider';
 import { useAccountBalance } from '../../../../shared/useAccountBalance';
 import { useGlobalState } from '../../../../GlobalStateProvider';
-import { CopyableAddress } from '../../../PublicKey';
+import { CopyablePublicKey } from '../../../PublicKey/CopyablePublicKey';
 import { Skeleton } from '../../../Skeleton';
 
 interface WalletButtonProps {
@@ -23,18 +23,18 @@ const WalletButton = ({ wallet, query, balance, tokenSymbol, walletAccount }: Wa
   <Button
     size="sm"
     color="ghost"
-    className="text-sm border-base-300 border-1 bg-base-200 min-h-[2.1rem] h-auto px-5 sm:px-3 overflow-hidden ellipsis max-w36 sm:max-w-fit"
+    className="border-1 ellipsis max-w36 h-auto min-h-[2.1rem] overflow-hidden border-base-300 bg-base-200 px-5 text-sm sm:max-w-fit sm:px-3"
     title={wallet?.title}
     type="button"
   >
     {query.isLoading ? (
-      <Skeleton className="bg-[rgba(0,0,0,.06)] px-2 py-1 mr-2 hidden sm:flex">10000.00 TKN</Skeleton>
+      <Skeleton className="mr-2 hidden bg-[rgba(0,0,0,.06)] px-2 py-1 sm:flex">10000.00 TKN</Skeleton>
     ) : (
-      <span className="items-center bg-[rgba(0,0,0,.06)] px-2 py-0.5 mr-2 rounded-lg hidden sm:flex">
+      <span className="mr-2 hidden items-center rounded-lg bg-[rgba(0,0,0,.06)] px-2 py-0.5 sm:flex">
         {balance} {tokenSymbol}
       </span>
     )}
-    <p className="hidden sm:block truncate">{walletAccount?.name}</p>
+    <p className="hidden truncate sm:block">{walletAccount?.name}</p>
     <img src={wallet?.logo?.src || ''} className="w-[20px] sm:ml-2" alt={wallet?.logo?.alt || ''} />
   </Button>
 );
@@ -56,10 +56,10 @@ const WalletDropdownMenu = ({
   tokenSymbol,
   removeWalletAccount,
 }: WalletDropdownMenuProps) => (
-  <Dropdown.Menu className="text-center border border-base-300 bg-base-200 shadow-lg min-w-[240px] p-3 mt-2 right-0">
+  <Dropdown.Menu className="right-0 mt-2 min-w-[240px] border border-base-300 bg-base-200 p-3 text-center shadow-lg">
     <div className="text-sm text-neutral-400">{walletAccount?.name}</div>
     <div className="text-neutral-500">
-      <CopyableAddress
+      <CopyablePublicKey
         publicKey={ss58Format ? getAddressForFormat(address, ss58Format) : address}
         variant="short"
         inline={true}
diff --git a/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx b/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx
index a1c8ea4b..237fbf26 100644
--- a/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx
+++ b/src/pages/spacewalk/bridge/Issue/ConfirmationDialog.tsx
@@ -1,7 +1,7 @@
-import { useMemo } from 'preact/compat';
+import { useMemo } from 'preact/hooks';
 import { Button, Divider } from 'react-daisyui';
 
-import { CopyableAddress, PublicKey } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import TransferCountdown from '../../../../components/TransferCountdown';
 import { convertCurrencyToStellarAsset, deriveShortenedRequestId } from '../../../../helpers/spacewalk';
 import { convertRawHexKeyToPublicKey } from '../../../../helpers/stellar';
@@ -67,17 +67,17 @@ export function ConfirmationDialog(props: ConfirmationDialogProps): JSX.Element
           <div className="text-xl">
             Send {totalAmount} {asset?.getCode()}
           </div>
-          <div className="text-sm">
+          <div className="flex items-center justify-center text-sm">
             {asset && asset.getIssuer() && (
               <>
-                issued by <PublicKey variant="short" publicKey={asset?.getIssuer()} />
+                <p>issued by</p> <CopyablePublicKey variant="short" publicKey={asset?.getIssuer()} />
               </>
             )}
           </div>
-          <div className="text mt-4">With the text memo</div>
-          {issueRequest && <CopyableAddress variant="short" publicKey={expectedStellarMemo} />}
-          <div className="text mt-4">In a single transaction to</div>
-          <CopyableAddress variant="short" publicKey={destination} />
+          <div className="mt-4 text">With the text memo</div>
+          {issueRequest && <CopyablePublicKey variant="short" publicKey={expectedStellarMemo} />}
+          <div className="mt-4 text">In a single transaction to</div>
+          <CopyablePublicKey variant="short" publicKey={destination} />
 
           <StellarUriScheme transactionURIScheme={transactionURIScheme} />
 
@@ -93,7 +93,7 @@ export function ConfirmationDialog(props: ConfirmationDialogProps): JSX.Element
           )}
         </div>
 
-        <div className="text-sm mt-4">Note:</div>
+        <div className="mt-4 text-sm">Note:</div>
         <ul className="text-sm list-disc list-inside">
           <li className="mt-1">
             Stellar transactions require memos for accurate processing. Failure to include the transaction memo may
diff --git a/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx b/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx
index 5ad69de2..7eb533fa 100644
--- a/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx
+++ b/src/pages/spacewalk/bridge/Redeem/ConfirmationDialog.tsx
@@ -1,12 +1,12 @@
 import { Button } from 'react-daisyui';
 import { useNavigate } from 'react-router-dom';
+import { useMemo } from 'preact/hooks';
 import { useGlobalState } from '../../../../GlobalStateProvider';
 import { PublicKey } from '../../../../components/PublicKey';
 import { convertCurrencyToStellarAsset } from '../../../../helpers/spacewalk';
 import { RichRedeemRequest } from '../../../../hooks/spacewalk/useRedeemPallet';
 import { nativeStellarToDecimal } from '../../../../shared/parseNumbers/metric';
 import { Dialog } from '../../../../components/Dialog';
-import { useMemo } from 'preact/hooks';
 import { PENDULUM_SUPPORT_CHAT_URL } from '../../../../shared/constants';
 import { PAGES_PATHS } from '../../../../app';
 
@@ -33,14 +33,14 @@ export function ConfirmationDialog(props: ConfirmationDialogProps): JSX.Element
             You will receive {totalAmount} {asset?.getCode()}
           </div>
           {asset && asset.getIssuer() && (
-            <>
-              issued by <PublicKey variant="short" publicKey={asset?.getIssuer()} />
-            </>
+            <div className="flex items-center justify-center text-sm">
+              <div>issued by</div> <PublicKey variant="short" publicKey={asset?.getIssuer()} />
+            </div>
           )}
-          <div className="text-sm mt-4">Your request is being processed</div>
+          <div className="mt-4 text-sm">Your request is being processed</div>
         </div>
         <div className="mt-6">
-          <div className="text-sm mt-2 text-center">
+          <div className="mt-2 text-sm text-center">
             This typically takes only a few minutes. Contact
             <a href={PENDULUM_SUPPORT_CHAT_URL} target="_blank" rel="noreferrer" className="mx-1 text-primary">
               support
diff --git a/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx b/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx
index e5866229..9cd9bd3a 100644
--- a/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx
+++ b/src/pages/spacewalk/bridge/TransferDialog/TransferDialog.tsx
@@ -4,7 +4,7 @@ import { JSXInternal } from 'preact/src/jsx';
 import { Divider } from 'react-daisyui';
 
 import { useGlobalState } from '../../../../GlobalStateProvider';
-import { CopyableAddress } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import { deriveShortenedRequestId } from '../../../../helpers/spacewalk';
 import { convertRawHexKeyToPublicKey } from '../../../../helpers/stellar';
 import { toTitle } from '../../../../helpers/string';
@@ -74,14 +74,14 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
       <div className="flex flex-col items-center justify-between">
         {statusIcon}
         <div className="mt-5" />
-        <h1 className="text-2xl transfer-dialog-contrast-text font-semibold mb-1">{title}</h1>
+        <h1 className="transfer-dialog-contrast-text mb-1 text-2xl font-semibold">{title}</h1>
         {content}
         <Divider className="mx-5 mb-2 mt-1" />
         <div
           id="details"
           tabIndex={0}
           onClick={toggle}
-          className={`collapse collapse-arrow rounded-lg bg-black bg-opacity-3 transfer-dialog-text flex flex-col w-11/12 ${collapseVisibility}`}
+          className={`transfer-dialog-text collapse collapse-arrow flex w-11/12 flex-col rounded-lg bg-black bg-opacity-3 ${collapseVisibility}`}
         >
           <div className="collapse-title flex flex-row justify-between">
             <div className="text-sm">Bridge fee</div>
@@ -90,18 +90,18 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
           <div className="collapse-content space-y-4">
             <div className="flex flex-row justify-between">
               <div className="text-sm">Destination Address (Stellar)</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p0"
+                className="p0 text-sm"
                 variant="short"
                 publicKey={destinationStellarAddress}
               />
             </div>
             <div className="flex flex-row justify-between">
               <div className="text-sm">Vault Address ({tenantNameCapitalized})</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p-0"
+                className="p-0 text-sm"
                 variant="short"
                 publicKey={transfer.original.vault.accountId.toString()}
               />
@@ -109,9 +109,9 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
             {vaultStellarPublicKey && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Vault Address (Stellar)</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={vaultStellarPublicKey}
                 />
@@ -120,9 +120,9 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
             {showMemo && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Memo</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={expectedStellarMemo}
                 />
diff --git a/src/pages/spacewalk/transactions/TransactionDialog.tsx b/src/pages/spacewalk/transactions/TransactionDialog.tsx
index 333a2f1d..3a756a3d 100644
--- a/src/pages/spacewalk/transactions/TransactionDialog.tsx
+++ b/src/pages/spacewalk/transactions/TransactionDialog.tsx
@@ -8,7 +8,7 @@ import CancelledDialogIcon from '../../../assets/dialog-status-cancelled';
 import PendingDialogIcon from '../../../assets/dialog-status-pending';
 import SuccessDialogIcon from '../../../assets/dialog-status-success';
 import WarningDialogIcon from '../../../assets/dialog-status-warning';
-import { CopyableAddress } from '../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../components/PublicKey/CopyablePublicKey';
 import TransferCountdown from '../../../components/TransferCountdown';
 import {
   addSuffix,
@@ -86,14 +86,14 @@ function BaseTransactionDialog(props: BaseTransactionDialogProps) {
       <div className="flex flex-col items-center justify-between">
         {statusIcon}
         <div className="mt-5" />
-        <h1 className="text-2xl transfer-dialog-contrast-text font-semibold mb-1">{title}</h1>
+        <h1 className="transfer-dialog-contrast-text mb-1 text-2xl font-semibold">{title}</h1>
         {content}
         <Divider className="mx-5 mb-2 mt-1" />
         <Collapse
           id="details"
           tabIndex={0}
           onClick={toggle}
-          className={`collapse-arrow rounded-lg bg-black bg-opacity-3 transfer-dialog-text flex flex-col w-11/12 ${collapseVisibility}`}
+          className={`transfer-dialog-text collapse-arrow flex w-11/12 flex-col rounded-lg bg-black bg-opacity-3 ${collapseVisibility}`}
         >
           <Collapse.Title className="flex flex-row justify-between">
             <div className="text-sm">Bridge fee</div>
@@ -102,18 +102,18 @@ function BaseTransactionDialog(props: BaseTransactionDialogProps) {
           <Collapse.Content className="space-y-4">
             <div className="flex flex-row justify-between">
               <div className="text-sm">Destination Address (Stellar)</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p0"
+                className="p0 text-sm"
                 variant="short"
                 publicKey={destinationStellarAddress}
               />
             </div>
             <div className="flex flex-row justify-between">
               <div className="text-sm">Vault Address ({tenantNameCapitalized})</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p-0"
+                className="p-0 text-sm"
                 variant="short"
                 publicKey={transfer.original.vault.accountId.toString()}
               />
@@ -121,9 +121,9 @@ function BaseTransactionDialog(props: BaseTransactionDialogProps) {
             {vaultStellarPublicKey && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Vault Address (Stellar)</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={vaultStellarPublicKey}
                 />
@@ -132,9 +132,9 @@ function BaseTransactionDialog(props: BaseTransactionDialogProps) {
             {showMemo && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Memo</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={expectedStellarMemo}
                 />
@@ -177,14 +177,14 @@ export function CompletedTransactionDialog(props: TransactionDialogProps) {
   }
   const content = (
     <>
-      <div className="text-sm transfer-dialog-text">{`You have received  ${transfer.amount} ${stellarAsset}`}</div>
-      <label className="transfer-dialog-label rounded-lg px-4 py-2 my-4 text font-semibold ">
+      <div className="transfer-dialog-text text-sm">{`You have received  ${transfer.amount} ${stellarAsset}`}</div>
+      <label className="transfer-dialog-label text my-4 rounded-lg px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
       <div className="mt-4" />
-      <div className="flex flex-row justify-between w-11/12">
-        <div className="text-sm transfer-dialog-text">Spacewalk transaction</div>
-        <CopyableAddress inline={true} className="text-sm" variant="hexa" publicKey={transfer.transactionId} />
+      <div className="flex w-11/12 flex-row justify-between">
+        <div className="transfer-dialog-text text-sm">Spacewalk transaction</div>
+        <CopyablePublicKey inline={true} className="text-sm" variant="hexa" publicKey={transfer.transactionId} />
       </div>
     </>
   );
@@ -209,19 +209,19 @@ export function CancelledTransactionDialog(props: TransactionDialogProps) {
   const amountToSend = nativeToDecimal(transfer.original.amount.add(transfer.original.fee).toNumber()).toNumber();
   const content = (
     <>
-      <div className="text-md p-5 transfer-dialog-text align-middle text-center">
+      <div className="text-md transfer-dialog-text p-5 text-center align-middle">
         {`You did not send a Stellar transaction in time, or the transferred amount did not meet the requested amount of ${amountToSend}
           ${stellarAsset}.`}
       </div>
-      <div className="transfer-dialog-colored-text text-md ">
+      <div className="transfer-dialog-colored-text text-md">
         Contact the team for debugging if you think this is an error.
       </div>
-      <label className="transfer-dialog-label rounded px-4 py-2 my-4 text font-semibold ">
+      <label className="transfer-dialog-label text my-4 rounded px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
-      <div className="flex flex-row justify-between w-11/12">
+      <div className="flex w-11/12 flex-row justify-between">
         <div className="text-xs">Spacewalk transaction</div>
-        <CopyableAddress inline={true} className="text-xs" variant="hexa" publicKey={transfer.transactionId} />
+        <CopyablePublicKey inline={true} className="text-xs" variant="hexa" publicKey={transfer.transactionId} />
       </div>
     </>
   );
@@ -299,24 +299,24 @@ export function PendingTransactionDialog(props: TransactionDialogProps) {
     <>
       <>
         <div
-          className="text-xl transfer-dialog-contrast-text text-semibold"
+          className="transfer-dialog-contrast-text text-semibold text-xl"
           title={amountToSend.toString()}
         >{`Send ${amountToSend.toNumber()} ${stellarAsset}`}</div>
         <div className="mt-2" />
-        <div className="transfer-dialog-text flex justify'center text ">
+        <div className="transfer-dialog-text justify'center text flex">
           <div className="mr-2">With the text memo</div>
-          <CopyableAddress
+          <CopyablePublicKey
             inline={true}
             variant="short"
             publicKey={expectedStellarMemo}
             className="transfer-dialog-text"
           />
         </div>
-        <div className="flex justify-center text-md transfer-dialog-text">
+        <div className="text-md transfer-dialog-text flex justify-center">
           <div className="mr-2">In a single transaction to</div>
-          <CopyableAddress
+          <CopyablePublicKey
             inline={true}
-            className="text-sm p-0 transfer-dialog-text"
+            className="transfer-dialog-text p-0 text-sm"
             variant="short"
             publicKey={destinationStellarAddress}
           />
@@ -325,11 +325,11 @@ export function PendingTransactionDialog(props: TransactionDialogProps) {
           Within <TransferCountdown request={transfer.original} />
         </div>
       </>
-      <label className="transfer-dialog-label rounded px-4 py-2 my-4 text font-semibold ">
+      <label className="transfer-dialog-label text my-4 rounded px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
       <div className="mt-4" />
-      <div className="text-sm px-5 ">
+      <div className="px-5 text-sm">
         Note: Estimated time for issuing is in a minute after submitting the Stellar payment to the vault, contact
         <a href={PENDULUM_SUPPORT_CHAT_URL} target="_blank" rel="noreferrer" className="mx-1 text-primary">
           support
@@ -341,7 +341,7 @@ export function PendingTransactionDialog(props: TransactionDialogProps) {
   );
   const redeemContent = (
     <>
-      <div className="text-xl mb-2">{`${amountToSend} ${stellarAsset}`}</div>
+      <div className="mb-2 text-xl">{`${amountToSend} ${stellarAsset}`}</div>
       <div className="text-md">The vault has to complete the transaction in:</div>
       <TransferCountdown request={transfer.original} />
       <div className="mt-2" />
@@ -373,7 +373,7 @@ export function FailedTransactionDialog(props: TransactionDialogProps) {
   const content = (
     <>
       <div className="text-xl">{`${amountToSend} ${stellarAsset}`}</div>
-      <label className="transfer-dialog-label rounded-lg px-4 py-2 my-4 text font-semibold ">
+      <label className="transfer-dialog-label text my-4 rounded-lg px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
     </>
@@ -385,10 +385,10 @@ export function FailedTransactionDialog(props: TransactionDialogProps) {
         compensation.
       </div>
       <div className="mt-4" />
-      <div className="text-md font-bold pb-1">
+      <div className="text-md pb-1 font-bold">
         To redeem your {stellarAsset}, you must now pick one of the two options:
       </div>
-      <div className="text-md pl-2 pb-1">
+      <div className="text-md pb-1 pl-2">
         1. Receive compensation of {compensation} {stellarAsset} and retry with another vault.{' '}
         <Link className="font-semibold underline">Compensate</Link>
       </div>
diff --git a/src/pages/spacewalk/transactions/TransferDialog/CancelledTransferDialog.tsx b/src/pages/spacewalk/transactions/TransferDialog/CancelledTransferDialog.tsx
index 510b665a..549a3768 100644
--- a/src/pages/spacewalk/transactions/TransferDialog/CancelledTransferDialog.tsx
+++ b/src/pages/spacewalk/transactions/TransferDialog/CancelledTransferDialog.tsx
@@ -1,6 +1,6 @@
 import { useGlobalState } from '../../../../GlobalStateProvider';
 import CancelledDialogIcon from '../../../../assets/dialog-status-cancelled';
-import { CopyableAddress } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import { convertCurrencyToStellarAsset } from '../../../../helpers/spacewalk';
 import { toTitle } from '../../../../helpers/string';
 import { nativeToDecimal } from '../../../../shared/parseNumbers/metric';
@@ -14,19 +14,19 @@ export function CancelledTransferDialog(props: TransferDialogProps) {
   const amountToSend = nativeToDecimal(transfer.original.amount.add(transfer.original.fee).toNumber()).toNumber();
   const content = (
     <>
-      <div className="text-md p-5 transfer-dialog-text align-middle text-center">
+      <div className="p-5 text-center align-middle text-md transfer-dialog-text">
         {`You did not send a Stellar transaction in time, or the transferred amount did not meet the requested amount of ${amountToSend}
             ${stellarAsset}.`}
       </div>
-      <div className="transfer-dialog-colored-text text-md ">
+      <div className="transfer-dialog-colored-text text-md">
         Contact the team for debugging if you think this is an error.
       </div>
-      <label className="transfer-dialog-label rounded px-4 py-2 my-4 text font-semibold ">
+      <label className="px-4 py-2 my-4 font-semibold rounded transfer-dialog-label text">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
       <div className="flex flex-row justify-between w-11/12">
         <div className="text-xs">Spacewalk transaction</div>
-        <CopyableAddress inline={true} className="text-xs" variant="hexa" publicKey={transfer.transactionId} />
+        <CopyablePublicKey inline={true} className="text-xs" variant="hexa" publicKey={transfer.transactionId} />
       </div>
     </>
   );
diff --git a/src/pages/spacewalk/transactions/TransferDialog/CompletedTransferDialog.tsx b/src/pages/spacewalk/transactions/TransferDialog/CompletedTransferDialog.tsx
index 6ff2b9e7..cd2046dc 100644
--- a/src/pages/spacewalk/transactions/TransferDialog/CompletedTransferDialog.tsx
+++ b/src/pages/spacewalk/transactions/TransferDialog/CompletedTransferDialog.tsx
@@ -1,6 +1,6 @@
 import { useGlobalState } from '../../../../GlobalStateProvider';
 import SuccessDialogIcon from '../../../../assets/dialog-status-success';
-import { CopyableAddress } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import { addSuffix, convertCurrencyToStellarAsset } from '../../../../helpers/spacewalk';
 import { toTitle } from '../../../../helpers/string';
 import { TransferType } from '../TransactionsColumns';
@@ -15,14 +15,14 @@ export function CompletedTransferDialog(props: TransferDialogProps) {
   }
   const content = (
     <>
-      <div className="text-sm transfer-dialog-text">{`You have received  ${transfer.amount} ${stellarAsset}`}</div>
-      <label className="transfer-dialog-label rounded-lg px-4 py-2 my-4 text font-semibold ">
+      <div className="transfer-dialog-text text-sm">{`You have received  ${transfer.amount} ${stellarAsset}`}</div>
+      <label className="transfer-dialog-label text my-4 rounded-lg px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
       <div className="mt-4" />
-      <div className="flex flex-row justify-between w-11/12">
-        <div className="text-sm transfer-dialog-text">Spacewalk transaction</div>
-        <CopyableAddress inline={true} className="text-sm" variant="hexa" publicKey={transfer.transactionId} />
+      <div className="flex w-11/12 flex-row justify-between">
+        <div className="transfer-dialog-text text-sm">Spacewalk transaction</div>
+        <CopyablePublicKey inline={true} className="text-sm" variant="hexa" publicKey={transfer.transactionId} />
       </div>
     </>
   );
diff --git a/src/pages/spacewalk/transactions/TransferDialog/PendingTransferDialog.tsx b/src/pages/spacewalk/transactions/TransferDialog/PendingTransferDialog.tsx
index 78784e37..71d02067 100644
--- a/src/pages/spacewalk/transactions/TransferDialog/PendingTransferDialog.tsx
+++ b/src/pages/spacewalk/transactions/TransferDialog/PendingTransferDialog.tsx
@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState } from 'preact/compat';
 
 import { useGlobalState } from '../../../../GlobalStateProvider';
 import PendingDialogIcon from '../../../../assets/dialog-status-pending';
-import { CopyableAddress } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import TransferCountdown from '../../../../components/TransferCountdown';
 import {
   calculateDeadline,
@@ -45,24 +45,24 @@ export function PendingTransferDialog(props: TransferDialogProps) {
     <>
       <>
         <div
-          className="text-xl transfer-dialog-contrast-text text-semibold"
+          className="transfer-dialog-contrast-text text-semibold text-xl"
           title={amountToSend.toString()}
         >{`Send ${amountToSend.toNumber()} ${stellarAsset}`}</div>
         <div className="mt-2" />
-        <div className="transfer-dialog-text flex justify'center text ">
+        <div className="transfer-dialog-text justify'center text flex">
           <div className="mr-2">With the text memo</div>
-          <CopyableAddress
+          <CopyablePublicKey
             inline={true}
             variant="short"
             publicKey={expectedStellarMemo}
             className="transfer-dialog-text"
           />
         </div>
-        <div className="flex justify-center text-md transfer-dialog-text">
+        <div className="text-md transfer-dialog-text flex justify-center">
           <div className="mr-2">In a single transaction to</div>
-          <CopyableAddress
+          <CopyablePublicKey
             inline={true}
-            className="text-sm p-0 transfer-dialog-text"
+            className="transfer-dialog-text p-0 text-sm"
             variant="short"
             publicKey={destinationStellarAddress}
           />
@@ -72,11 +72,11 @@ export function PendingTransferDialog(props: TransferDialogProps) {
         </div>
       </>
 
-      <label className="transfer-dialog-label rounded px-4 py-2 my-4 text font-semibold ">
+      <label className="transfer-dialog-label text my-4 rounded px-4 py-2 font-semibold">
         {transfer.type === TransferType.issue ? `To ${toTitle(tenantName)}` : `To Stellar`}
       </label>
       <div className="mt-4" />
-      <div className="text-sm px-5 ">
+      <div className="px-5 text-sm">
         Note: Estimated time for issuing is in a minute after submitting the Stellar payment to the vault, contact
         <a href={PENDULUM_SUPPORT_CHAT_URL} target="_blank" rel="noreferrer" className="mx-1 text-primary">
           support
@@ -88,7 +88,7 @@ export function PendingTransferDialog(props: TransferDialogProps) {
   );
   const redeemContent = (
     <>
-      <div className="text-xl mb-2">{`${amountToSend} ${stellarAsset}`}</div>
+      <div className="mb-2 text-xl">{`${amountToSend} ${stellarAsset}`}</div>
       <div className="text-md">The vault has to complete the transaction in:</div>
       <TransferCountdown request={transfer.original} />
       <div className="mt-2" />
diff --git a/src/pages/spacewalk/transactions/TransferDialog/TransferDialog.tsx b/src/pages/spacewalk/transactions/TransferDialog/TransferDialog.tsx
index b0ea0e5a..cbad469c 100644
--- a/src/pages/spacewalk/transactions/TransferDialog/TransferDialog.tsx
+++ b/src/pages/spacewalk/transactions/TransferDialog/TransferDialog.tsx
@@ -9,7 +9,7 @@ import { convertRawHexKeyToPublicKey } from '../../../../helpers/stellar';
 import { toTitle } from '../../../../helpers/string';
 import { useVaultRegistryPallet } from '../../../../hooks/spacewalk/useVaultRegistryPallet';
 import { nativeToDecimal } from '../../../../shared/parseNumbers/metric';
-import { CopyableAddress } from '../../../../components/PublicKey';
+import { CopyablePublicKey } from '../../../../components/PublicKey/CopyablePublicKey';
 import { Dialog } from '../../../../components/Dialog';
 import { TTransfer } from '../TransactionsColumns';
 
@@ -74,14 +74,14 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
       <div className="flex flex-col items-center justify-between">
         {statusIcon}
         <div className="mt-5" />
-        <h1 className="text-2xl transfer-dialog-contrast-text font-semibold mb-1">{title}</h1>
+        <h1 className="transfer-dialog-contrast-text mb-1 text-2xl font-semibold">{title}</h1>
         {content}
         <Divider className="mx-5 mb-2 mt-1" />
         <div
           id="details"
           tabIndex={0}
           onClick={toggle}
-          className={`collapse collapse-arrow rounded-lg bg-black bg-opacity-3 transfer-dialog-text flex flex-col w-11/12 ${collapseVisibility}`}
+          className={`transfer-dialog-text collapse collapse-arrow flex w-11/12 flex-col rounded-lg bg-black bg-opacity-3 ${collapseVisibility}`}
         >
           <div className="collapse-title flex flex-row justify-between">
             <div className="text-sm">Bridge fee</div>
@@ -90,18 +90,18 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
           <div className="collapse-content space-y-4">
             <div className="flex flex-row justify-between">
               <div className="text-sm">Destination Address (Stellar)</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p0"
+                className="p0 text-sm"
                 variant="short"
                 publicKey={destinationStellarAddress}
               />
             </div>
             <div className="flex flex-row justify-between">
               <div className="text-sm">Vault Address ({tenantNameCapitalized})</div>
-              <CopyableAddress
+              <CopyablePublicKey
                 inline={true}
-                className="text-sm p-0"
+                className="p-0 text-sm"
                 variant="short"
                 publicKey={transfer.original.vault.accountId.toString()}
               />
@@ -109,9 +109,9 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
             {vaultStellarPublicKey && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Vault Address (Stellar)</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={vaultStellarPublicKey}
                 />
@@ -120,9 +120,9 @@ export function BaseTransferDialog(props: BaseTransferDialogProps) {
             {showMemo && (
               <div className="flex flex-row justify-between">
                 <div className="text-sm">Memo</div>
-                <CopyableAddress
+                <CopyablePublicKey
                   inline={true}
-                  className="text-sm p-0"
+                  className="p-0 text-sm"
                   variant="short"
                   publicKey={expectedStellarMemo}
                 />
diff --git a/src/pages/staking/CollatorColumns.tsx b/src/pages/staking/CollatorColumns.tsx
index 06fc9397..955644c3 100644
--- a/src/pages/staking/CollatorColumns.tsx
+++ b/src/pages/staking/CollatorColumns.tsx
@@ -4,7 +4,7 @@ import { ColumnDef } from '@tanstack/table-core';
 import { StateUpdater, Dispatch } from 'preact/hooks';
 import { Button } from 'react-daisyui';
 import UnlinkIcon from '../../assets/UnlinkIcon';
-import { CopyableAddress } from '../../components/PublicKey';
+import { CopyablePublicKey } from '../../components/PublicKey/CopyablePublicKey';
 import { ParachainStakingCandidate } from '../../hooks/staking/useStakingPallet';
 import { PalletIdentityInfo } from '../../hooks/useIdentityPallet';
 import { nativeToFormatMetric } from '../../shared/parseNumbers/metric';
@@ -43,7 +43,7 @@ export const nameColumn: ColumnDef<TCollator> = {
     return (
       <div className="flex flex-row" title={desc}>
         <div className="mr-2">{(row.original.identityInfo ? row.original.identityInfo.display : 'Unknown') + ' |'}</div>
-        <CopyableAddress publicKey={row.original.candidate.id} variant="short" inline />
+        <CopyablePublicKey publicKey={row.original.candidate.id} variant="short" inline />
       </div>
     );
   },