@b3dotfun/sdk 0.0.40-alpha.4 → 0.0.40-alpha.6

package/src/global-account/react/components/ManageAccount/ManageAccount.tsx

@@ -18,6 +18,7 @@ import {
 import { SignOutIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SignOutIcon";
 import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { truncateAddress } from "@b3dotfun/sdk/shared/utils/truncateAddress";
 import { BarChart3, Coins, Copy, Image, LinkIcon, Loader2, Pencil, Settings, UnlinkIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { toast } from "sonner";
@@ -29,6 +30,24 @@ import { getProfileDisplayInfo } from "../../utils/profileDisplay";
 import { AccountAssets } from "../AccountAssets/AccountAssets";
 import { ContentTokens } from "./ContentTokens";
 
+// Helper function to check if a string is a wallet address and format it
+const formatProfileTitle = (title: string): { displayTitle: string; isAddress: boolean } => {
+  // Check if title looks like an Ethereum address (0x followed by 40 hex characters)
+  const isEthereumAddress = /^0x[a-fA-F0-9]{40}$/.test(title);
+
+  if (isEthereumAddress) {
+    return {
+      displayTitle: truncateAddress(title),
+      isAddress: true,
+    };
+  }
+
+  return {
+    displayTitle: title,
+    isAddress: false,
+  };
+};
+
 import { Referrals, Users } from "@b3dotfun/b3-api";
 import { BalanceContent } from "./BalanceContent";
 
@@ -200,7 +219,7 @@ export function ManageAccount({
     };
 
     const profiles = profilesRaw
-      .filter((profile: any) => !["custom_auth_endpoint", "siwe"].includes(profile.type))
+      .filter((profile: any) => !["custom_auth_endpoint"].includes(profile.type))
       .map((profile: any) => ({
         ...getProfileDisplayInfo(profile),
         originalProfile: profile,
@@ -236,6 +255,8 @@ export function ManageAccount({
       });
     };
 
+    console.log("@@profiles", profiles);
+
     return (
       <div className="linked-accounts-settings space-y-8">
         {/* Linked Accounts Section */}
@@ -269,7 +290,7 @@ export function ManageAccount({
               {profiles.map(profile => (
                 <div
                   key={profile.title}
-                  className="linked-account-item bg-b3-line flex items-center justify-between rounded-xl p-4"
+                  className="linked-account-item bg-b3-line group flex items-center justify-between rounded-xl p-4"
                 >
                   <div className="linked-account-info flex items-center gap-3">
                     {profile.imageUrl ? (
@@ -287,9 +308,43 @@ export function ManageAccount({
                     )}
                     <div className="linked-account-details">
                       <div className="linked-account-title-row flex items-center gap-2">
-                        <span className="linked-account-title text-b3-grey font-neue-montreal-semibold">
-                          {profile.title}
-                        </span>
+                        {(() => {
+                          const { displayTitle, isAddress } = formatProfileTitle(profile.title);
+
+                          const handleCopyAddress = async (e: React.MouseEvent) => {
+                            e.stopPropagation();
+                            try {
+                              await navigator.clipboard.writeText(profile.title);
+                              toast.success("Address copied to clipboard!");
+                            } catch (error) {
+                              toast.error("Failed to copy address");
+                            }
+                          };
+
+                          return (
+                            <div className="flex items-center gap-1">
+                              <span
+                                className={`linked-account-title text-b3-grey font-neue-montreal-semibold ${
+                                  isAddress
+                                    ? "font-mono text-sm" // Use monospace font for addresses
+                                    : "break-words" // Use break-words for emails/names (better than break-all)
+                                }`}
+                                title={isAddress ? profile.title : undefined} // Show full address on hover
+                              >
+                                {displayTitle}
+                              </span>
+                              {isAddress && (
+                                <button
+                                  onClick={handleCopyAddress}
+                                  className="linked-account-copy-button ml-1 rounded p-1 opacity-0 transition-opacity hover:bg-gray-100 group-hover:opacity-100"
+                                  title="Copy full address"
+                                >
+                                  <Copy size={12} className="text-gray-500 hover:text-gray-700" />
+                                </button>
+                              )}
+                            </div>
+                          );
+                        })()}
                         <span className="linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs">
                           {profile.type.toUpperCase()}
                         </span>