fix to show first and last 8 of address (#152)

* fix to show first and last 8 of address

Signed-off-by: JaeBrian <[email protected]>

* commit truncate func

Signed-off-by: JaeBrian <[email protected]>

---------

Signed-off-by: JaeBrian <[email protected]>

Author: JaeBrian

src/components/FloatingWalletButton.tsx

@@ -1,6 +1,7 @@
 import { useWalletStore } from "../stores/walletStore";
 import { useState } from "react";
 import LoadingOverlay from "./LoadingOverlay";
+import { truncateAddress } from "../utils/formatAddress";
 
 const FloatingWalletButton = () => {
   const { isConnected, stakeAddress, connect, disconnect } = useWalletStore();
@@ -32,9 +33,7 @@ const FloatingWalletButton = () => {
         <div className="bg-white rounded-lg shadow-lg border p-4 min-w-[200px]">
           <div className="text-xs text-gray-500 mb-2">Connected Wallet</div>
           <div className="text-sm font-medium text-gray-900 mb-3">
-            {stakeAddress
-              ? `${stakeAddress.slice(0, 8)}...${stakeAddress.slice(-8)}`
-              : "Connected"}
+            {stakeAddress ? truncateAddress(stakeAddress) : "Connected"}
           </div>
           <button
             onClick={disconnect}

src/components/WalletModal.tsx

@@ -1,5 +1,6 @@
 import WalletConnection from "./WalletConnection";
 import { useWalletStore } from "../stores/walletStore";
+import { truncateAddress } from "../utils/formatAddress";
 
 interface WalletModalProps {
   isOpen: boolean;
@@ -39,7 +40,7 @@ const WalletModal = ({ isOpen, onDisconnect }: WalletModalProps) => {
                       Your Wallet
                     </h3>
                     <p className="text-white/70 text-md max-w-[15rem] py-1 truncate">
-                      {enabledWallet}: {walletAddress}
+                      {enabledWallet}: {truncateAddress(walletAddress)}
                     </p>
                   </div>
                 </div>

src/utils/formatAddress.ts

@@ -0,0 +1,14 @@
+export const truncateAddress = (
+  address: string | null | undefined,
+  startChars = 8,
+  endChars = 8,
+): string => {
+  if (!address) return "";
+  
+  if (address.length <= startChars + endChars) {
+    return address;
+  }
+  
+  return `${address.slice(0, startChars)}...${address.slice(-endChars)}`;
+};
+