update component name from CopyableAddress to CopyablePublicKey

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}

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

src/pages/spacewalk/bridge/Issue/SettingsDialog.tsx

@@ -19,7 +19,7 @@ export function SettingsDialog({ bridgeDirection, visible, onClose }: Props) {
   const content = useMemo(
     () => (
       <div className="text-center">
-        <div className="flex mt-4 align-center">
+        <div className="align-center mt-4 flex">
           <Checkbox
             size="sm"
             color="success"
@@ -28,13 +28,13 @@ export function SettingsDialog({ bridgeDirection, visible, onClose }: Props) {
                 setManualVaultSelection(e.target.checked);
               }
             }}
-            className="rounded checkbox"
+            className="checkbox rounded"
             checked={manualVaultSelection}
           />
           <span className="ml-2">Manually select vault</span>
         </div>
         {manualVaultSelection && vaultsForCurrency && (
-          <div className="flex flex-col items-start justify-start mt-4">
+          <div className="mt-4 flex flex-col items-start justify-start">
             <div>Select Vault</div>
             <VaultSelector
               vaults={vaultsForCurrency}
@@ -46,7 +46,14 @@ export function SettingsDialog({ bridgeDirection, visible, onClose }: Props) {
         )}
       </div>
     ),
-    [manualVaultSelection, vaultsForCurrency, setSelectedVault, selectedVault, setManualVaultSelection],
+    [
+      manualVaultSelection,
+      vaultsForCurrency,
+      setSelectedVault,
+      selectedVault,
+      bridgeDirection,
+      setManualVaultSelection,
+    ],
   );
 
   const actions = useMemo(

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

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,28 +90,28 @@ 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()}
               />
             </div>
             {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}
                 />