@b3dotfun/sdk 0.0.40-alpha.3 → 0.0.40-alpha.5

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

@@ -1,11 +1,13 @@
 import app from "@b3dotfun/sdk/global-account/app";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
+import { thirdwebB3Mainnet } from "@b3dotfun/sdk/shared/constants/chains/b3Chain";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { Loader2, Mail, Phone } from "lucide-react";
+import { Loader2, Mail, Phone, WalletIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { useLinkProfile, useProfiles } from "thirdweb/react";
-import { preAuthenticate } from "thirdweb/wallets";
+import { createWallet, preAuthenticate, WalletId } from "thirdweb/wallets";
+import { WalletRow } from "../..";
 import { LinkAccountModalProps, useModalStore } from "../../stores/useModalStore";
 import { getProfileDisplayInfo } from "../../utils/profileDisplay";
 import { useB3 } from "../B3Provider/useB3";
@@ -17,13 +19,14 @@ import { XIcon } from "../icons/XIcon";
 import { Button } from "../ui/button";
 type OTPStrategy = "email" | "phone";
 type SocialStrategy = "google" | "x" | "discord" | "apple" | "farcaster";
-type Strategy = OTPStrategy | SocialStrategy;
+type Strategy = OTPStrategy | SocialStrategy | "wallet";
 
 interface AuthMethod {
   id: Strategy;
   label: string;
   enabled: boolean;
   icon: React.ReactNode;
+  walletType?: WalletId;
 }
 
 const AUTH_METHODS: AuthMethod[] = [
@@ -41,6 +44,39 @@ const AUTH_METHODS: AuthMethod[] = [
   },
 ];
 
+const WALLET_METHODS: AuthMethod[] = [
+  {
+    id: "wallet",
+    label: "Wallet",
+    enabled: true,
+    icon: <WalletIcon className="size-6" />,
+    walletType: "com.coinbase.wallet",
+  },
+  { id: "wallet", label: "Wallet", enabled: true, icon: <WalletIcon className="size-6" />, walletType: "io.metamask" },
+  {
+    id: "wallet",
+    label: "Wallet",
+    enabled: true,
+    icon: <WalletIcon className="size-6" />,
+    walletType: "me.rainbow",
+  },
+  {
+    id: "wallet",
+    label: "Wallet",
+    enabled: true,
+    icon: <WalletIcon className="size-6" />,
+    walletType: "app.phantom",
+  },
+  { id: "wallet", label: "Wallet", enabled: true, icon: <WalletIcon className="size-6" />, walletType: "io.rabby" },
+  {
+    id: "wallet",
+    label: "Wallet",
+    enabled: true,
+    icon: <WalletIcon className="size-6" />,
+    walletType: "walletConnect",
+  },
+];
+
 export function LinkAccount({
   onSuccess: onSuccessCallback,
   onError,
@@ -60,7 +96,7 @@ export function LinkAccount({
 
   // Get connected auth methods
   const connectedAuthMethods = profilesRaw
-    .filter((profile: any) => !["custom_auth_endpoint", "siwe"].includes(profile.type))
+    .filter((profile: any) => !["custom_auth_endpoint"].includes(profile.type))
     .map((profile: any) => profile.type as Strategy);
 
   // Filter available auth methods
@@ -69,7 +105,7 @@ export function LinkAccount({
   );
 
   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,
@@ -211,6 +247,29 @@ export function LinkAccount({
     }
   };
 
+  const handleLinkWallet = async (walletType: WalletId) => {
+    setLinkingState(true, "wallet");
+    console.log("selectedMethod", walletType);
+    try {
+      if (!walletType) {
+        throw new Error("Wallet type not found");
+      }
+      await linkProfile(
+        {
+          client,
+          strategy: "wallet",
+          wallet: createWallet(walletType),
+          chain: thirdwebB3Mainnet,
+        },
+        mutationOptions,
+      );
+    } catch (error) {
+      console.error("Error linking account:", error);
+      setError(error instanceof Error ? error.message : "Failed to link account");
+      onError?.(error as Error);
+    }
+  };
+
   const handleSocialLink = async (strategy: SocialStrategy) => {
     try {
       console.log("handleSocialLink", strategy);
@@ -338,6 +397,20 @@ export function LinkAccount({
               )}
             </Button>
           ))}
+          {WALLET_METHODS.map(method => {
+            if (!method.walletType) {
+              return null;
+            }
+
+            return (
+              <WalletRow
+                key={method.walletType}
+                walletId={method.walletType as WalletId}
+                onClick={() => handleLinkWallet(method.walletType as WalletId)}
+                isLoading={isLinking}
+              />
+            );
+          })}
           {availableAuthMethods.length === 0 && (
             <div className="text-b3-foreground-muted py-8 text-center">
               All available authentication methods have been connected
@@ -379,38 +452,39 @@ export function LinkAccount({
 
           {error && <div className="text-b3-negative font-neue-montreal-medium py-2 text-sm">{error}</div>}
 
-          {otpSent ? (
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <label className="text-b3-grey font-neue-montreal-medium text-sm">Verification Code</label>
-                <input
-                  type="text"
-                  placeholder="Enter verification code"
-                  className="bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2"
-                  value={otp}
-                  onChange={e => setOtp(e.target.value)}
-                />
+          {(selectedMethod === "email" || selectedMethod === "phone") &&
+            (otpSent ? (
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <label className="text-b3-grey font-neue-montreal-medium text-sm">Verification Code</label>
+                  <input
+                    type="text"
+                    placeholder="Enter verification code"
+                    className="bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2"
+                    value={otp}
+                    onChange={e => setOtp(e.target.value)}
+                  />
+                </div>
+                <Button
+                  className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white"
+                  onClick={handleLinkAccount}
+                >
+                  Link Account
+                </Button>
               </div>
+            ) : (
               <Button
                 className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white"
-                onClick={handleLinkAccount}
+                onClick={handleSendOTP}
+                disabled={(!email && !phone) || (isLinking && linkingMethod === selectedMethod)}
               >
-                Link Account
+                {isLinking && linkingMethod === selectedMethod ? (
+                  <Loader2 className="animate-spin" />
+                ) : (
+                  "Send Verification Code"
+                )}
               </Button>
-            </div>
-          ) : (
-            <Button
-              className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white"
-              onClick={handleSendOTP}
-              disabled={(!email && !phone) || (isLinking && linkingMethod === selectedMethod)}
-            >
-              {isLinking && linkingMethod === selectedMethod ? (
-                <Loader2 className="animate-spin" />
-              ) : (
-                "Send Verification Code"
-              )}
-            </Button>
-          )}
+            ))}
         </div>
       )}
     </div>

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>