@b3dotfun/sdk 0.0.26 → 0.0.27-alpha.0

package/dist/types/global-account/react/utils/profileDisplay.d.ts

@@ -0,0 +1,21 @@
+import { type Profile } from "thirdweb/wallets";
+export interface ExtendedProfileDetails {
+    id?: string;
+    email?: string;
+    phone?: string;
+    address?: string;
+    name?: string;
+    username?: string;
+    profileImageUrl?: string;
+}
+export interface ExtendedProfile extends Omit<Profile, "details"> {
+    details: ExtendedProfileDetails;
+}
+export interface ProfileDisplayInfo {
+    title: string;
+    subtitle: string;
+    imageUrl: string | null;
+    initial: string;
+    type: Profile["type"];
+}
+export declare function getProfileDisplayInfo(profile: ExtendedProfile): ProfileDisplayInfo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.26",
+  "version": "0.0.27-alpha.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -88,6 +88,7 @@ function generateGetRelayQuoteRequest({
 }): GetQuoteRequest {
   switch (orderType) {
     case "mint_nft": {
+      invariant(contractType, "Contract type is required");
       return {
         type: "mint_nft",
         srcChain: srcChainId,
@@ -96,8 +97,8 @@ function generateGetRelayQuoteRequest({
         dstTokenAddress: dstToken.address,
         price: dstAmount,
         contractAddress: contractAddress,
-        tokenId: tokenId!,
-        contractType: contractType!,
+        tokenId: tokenId,
+        contractType: contractType,
       };
     }
     case "join_tournament": {
@@ -146,6 +147,7 @@ function generateGetRelayQuoteRequest({
 export function AnySpendCustom(props: {
   loadOrder?: string;
   mode?: "modal" | "page";
+  activeTab?: "crypto" | "fiat";
   recipientAddress?: string;
   spenderAddress?: string;
   orderType: components["schemas"]["Order"]["type"];
@@ -177,6 +179,7 @@ export function AnySpendCustom(props: {
 function AnySpendCustomInner({
   loadOrder,
   mode = "modal",
+  activeTab: activeTabProps = "crypto",
   recipientAddress: recipientAddressProps,
   spenderAddress,
   orderType,
@@ -192,6 +195,7 @@ function AnySpendCustomInner({
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
+  activeTab?: "crypto" | "fiat";
   recipientAddress?: string;
   spenderAddress?: string;
   orderType: components["schemas"]["Order"]["type"];
@@ -219,7 +223,7 @@ function AnySpendCustomInner({
   const [activePanel, setActivePanel] = useState<PanelView>(
     loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER,
   );
-  const [activeTab, setActiveTab] = useState<"crypto" | "fiat">("crypto");
+  const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(activeTabProps);
 
   // Add state for selected payment methods
   const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(

package/src/anyspend/react/components/AnySpendNFT.tsx

@@ -100,7 +100,7 @@ export function AnySpendNFT({
     }
 
     fetchContractMetadata();
-  }, [nftContract.contractAddress, nftContract.chainId, nftContract.imageUrl, nftContract.tokenId]);
+  }, [nftContract.contractAddress, nftContract.chainId, nftContract.imageUrl, nftContract.tokenId, isLoadingFallback]);
 
   const header = ({
     anyspendPrice,
@@ -150,6 +150,7 @@ export function AnySpendNFT({
     <AnySpendCustom
       loadOrder={loadOrder}
       mode={mode}
+      activeTab="fiat"
       recipientAddress={recipientAddress}
       orderType={"mint_nft"}
       dstChainId={nftContract.chainId}

package/src/anyspend/react/components/common/PaymentStripeWeb2.tsx

@@ -16,16 +16,16 @@ const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
 
 interface PaymentStripeWeb2Props {
   order: components["schemas"]["Order"];
+  stripePaymentIntentId: string;
   onPaymentSuccess?: (paymentIntent: any) => void;
 }
 
-export default function PaymentStripeWeb2({ order, onPaymentSuccess }: PaymentStripeWeb2Props) {
+export default function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }: PaymentStripeWeb2Props) {
   const { theme } = useB3();
   const fingerprintConfig = getFingerprintConfig();
 
-  const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = useStripeClientSecret(
-    order.stripePaymentIntentId!,
-  );
+  const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } =
+    useStripeClientSecret(stripePaymentIntentId);
 
   if (isLoadingStripeClientSecret) {
     return <StripeLoadingState />;
@@ -264,7 +264,7 @@ function StripePaymentForm({
                 // Validation
                 validation: {
                   phone: {
-                    required: "auto", // or 'always', 'never'
+                    required: "always", // or 'always', 'never'
                   },
                 },
               }}
@@ -331,26 +331,3 @@ function StripePaymentForm({
     </div>
   );
 }
-
-// Add tooltip component
-// function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
-//   const [isVisible, setIsVisible] = useState(false);
-
-//   return (
-//     <div className="relative inline-block">
-//       <div onMouseEnter={() => setIsVisible(true)} onMouseLeave={() => setIsVisible(false)} className="cursor-help">
-//         {children}
-//       </div>
-//       {isVisible && (
-//         <div className="absolute bottom-full left-1/2 z-50 mb-2 w-80 -translate-x-1/2">
-//           <div className="bg-as-on-surface-1 border-as-stroke text-as-primary rounded-lg border p-3 text-sm shadow-lg">
-//             <div className="whitespace-pre-line">{content}</div>
-//             <div className="absolute left-1/2 top-full -translate-x-1/2">
-//               <div className="border-t-as-on-surface-1 border-l-4 border-r-4 border-t-4 border-transparent"></div>
-//             </div>
-//           </div>
-//         </div>
-//       )}
-//     </div>
-//   );
-// }

package/src/anyspend/react/components/common/PaymentVendorUI.tsx

@@ -16,8 +16,8 @@ export default function PaymentVendorUI({ order, dstTokenSymbol }: PaymentVendor
   }
 
   // Handle Stripe Web2 payment flow
-  if (vendor === "stripe-web2") {
-    return <PaymentStripeWeb2 order={order} />;
+  if (vendor === "stripe-web2" && order.stripePaymentIntentId) {
+    return <PaymentStripeWeb2 order={order} stripePaymentIntentId={order.stripePaymentIntentId} />;
   }
 
   // Return null for unsupported vendors

package/src/anyspend/utils/chain.ts

@@ -132,7 +132,7 @@ export const EVM_MAINNET: Record<number, IEVMChain> = {
     name: avalanche.name,
     logoUrl: "https://assets.relay.link/icons/square/43114/light.png",
     type: ChainType.EVM,
-    nativeRequired: parseEther("0.005"),
+    nativeRequired: parseEther("0.01"),
     canDepositNative: true,
     defaultToken: getAvaxToken(),
     nativeToken: getAvaxToken(),
@@ -149,7 +149,7 @@ export const EVM_MAINNET: Record<number, IEVMChain> = {
     name: bsc.name,
     logoUrl: "https://avatars.githubusercontent.com/u/45615063?s=280&v=4",
     type: ChainType.EVM,
-    nativeRequired: parseEther("0.00001"),
+    nativeRequired: parseEther("0.000025"),
     canDepositNative: true,
     defaultToken: getBnbToken(),
     nativeToken: getBnbToken(),

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

@@ -12,6 +12,7 @@ import { useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useB3 } from "./B3Provider/useB3";
+import { LinkAccount } from "./LinkAccount/LinkAccount";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
@@ -40,6 +41,7 @@ export function B3DynamicModal() {
     "signInWithB3",
     "anySpendSignatureMint",
     "anySpendBondKit",
+    "linkAccount",
   ];
 
   const freestyleTypes = [
@@ -103,6 +105,8 @@ export function B3DynamicModal() {
         return <AnyspendSignatureMint {...contentType} mode="modal" />;
       case "anySpendBondKit":
         return <AnySpendBondKit {...contentType} />;
+      case "linkAccount":
+        return <LinkAccount {...contentType} />;
       // Add other modal types here
       default:
         return null;

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

@@ -0,0 +1,369 @@
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { Loader2 } 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 { LinkAccountModalProps, useModalStore } from "../../stores/useModalStore";
+import { getProfileDisplayInfo } from "../../utils/profileDisplay";
+import { useB3 } from "../B3Provider/useB3";
+import { Button } from "../ui/button";
+type OTPStrategy = "email" | "phone";
+type SocialStrategy = "google" | "x" | "discord" | "apple";
+type Strategy = OTPStrategy | SocialStrategy;
+
+interface AuthMethod {
+  id: Strategy;
+  label: string;
+  enabled: boolean;
+  icon?: string;
+}
+
+const AUTH_METHODS: AuthMethod[] = [
+  { id: "email", label: "Email", enabled: true },
+  { id: "phone", label: "Phone", enabled: true },
+  { id: "google", label: "Google", enabled: true },
+  { id: "x", label: "X (Twitter)", enabled: true },
+  { id: "discord", label: "Discord", enabled: true },
+  { id: "apple", label: "Apple", enabled: true },
+];
+
+export function LinkAccount({
+  onSuccess: onSuccessCallback,
+  onError,
+  onClose,
+  chain,
+  partnerId,
+}: LinkAccountModalProps) {
+  const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = useModalStore();
+  const [selectedMethod, setSelectedMethod] = useState<Strategy | null>(null);
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [otp, setOtp] = useState("");
+  const [otpSent, setOtpSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { data: profilesRaw = [] } = useProfiles({ client });
+
+  // Get connected auth methods
+  const connectedAuthMethods = profilesRaw
+    .filter((profile: any) => !["custom_auth_endpoint", "siwe"].includes(profile.type))
+    .map((profile: any) => profile.type as Strategy);
+
+  // Filter available auth methods
+  const availableAuthMethods = AUTH_METHODS.filter(
+    method => !connectedAuthMethods.includes(method.id) && method.enabled,
+  );
+
+  const profiles = profilesRaw
+    .filter((profile: any) => !["custom_auth_endpoint", "siwe"].includes(profile.type))
+    .map((profile: any) => ({
+      ...getProfileDisplayInfo(profile),
+      originalProfile: profile,
+    }));
+
+  const { account } = useB3();
+  const { mutate: linkProfile } = useLinkProfile();
+
+  const onSuccess = useCallback(async () => {
+    await onSuccessCallback?.();
+  }, [onSuccessCallback]);
+
+  // Reset linking state when component unmounts
+  useEffect(() => {
+    return () => {
+      if (isLinking) {
+        setLinkingState(false);
+      }
+    };
+  }, [isLinking, setLinkingState]);
+
+  const mutationOptions = {
+    onError: (error: Error) => {
+      console.error("Error linking account:", error);
+      toast.error(error.message);
+      setLinkingState(false);
+      onError?.(error);
+    },
+  };
+
+  const validateInput = () => {
+    if (selectedMethod === "email") {
+      if (!email) {
+        setError("Please enter your email address");
+        return false;
+      }
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        setError("Please enter a valid email address");
+        return false;
+      }
+    } else if (selectedMethod === "phone") {
+      if (!phone) {
+        setError("Please enter your phone number");
+        return false;
+      }
+      if (!/^\+?[\d\s-]{10,}$/.test(phone)) {
+        setError("Please enter a valid phone number");
+        return false;
+      }
+    }
+    setError(null);
+    return true;
+  };
+
+  const handleSendOTP = async () => {
+    if (!validateInput()) return;
+
+    try {
+      setLinkingState(true, selectedMethod);
+      setError(null);
+
+      if (selectedMethod === "email") {
+        await preAuthenticate({
+          client,
+          strategy: "email",
+          email,
+        });
+      } else if (selectedMethod === "phone") {
+        await preAuthenticate({
+          client,
+          strategy: "phone",
+          phoneNumber: phone,
+        });
+      }
+
+      setOtpSent(true);
+    } catch (error) {
+      console.error("Error sending OTP:", error);
+      setError(error instanceof Error ? error.message : "Failed to send OTP");
+      onError?.(error as Error);
+      setLinkingState(false);
+    }
+  };
+
+  const handleLinkAccount = async () => {
+    if (!otp) {
+      setError("Please enter the verification code");
+      return;
+    }
+
+    try {
+      setLinkingState(true, selectedMethod);
+      setError(null);
+
+      if (selectedMethod === "email") {
+        await linkProfile(
+          {
+            client,
+            strategy: "email",
+            email,
+            verificationCode: otp,
+          },
+          mutationOptions,
+        );
+      } else if (selectedMethod === "phone") {
+        await linkProfile(
+          {
+            client,
+            strategy: "phone",
+            phoneNumber: phone,
+            verificationCode: otp,
+          },
+          mutationOptions,
+        );
+      }
+
+      onSuccess?.();
+      onClose?.();
+    } catch (error) {
+      console.error("Error linking account:", error);
+      setError(error instanceof Error ? error.message : "Failed to link account");
+      onError?.(error as Error);
+    } finally {
+      setLinkingState(false);
+    }
+  };
+
+  const handleSocialLink = async (strategy: SocialStrategy) => {
+    try {
+      console.log("handleSocialLink", strategy);
+      setLinkingState(true, strategy);
+      setError(null);
+
+      const result = await linkProfile(
+        {
+          client,
+          strategy,
+        },
+        mutationOptions,
+      );
+
+      console.log("result", result);
+
+      // Don't close the modal yet, wait for auth to complete
+      onSuccess?.();
+    } catch (error) {
+      console.error("Error linking with social:", error);
+      setError(error instanceof Error ? error.message : "Failed to link social account");
+      onError?.(error as Error);
+      setLinkingState(false);
+    }
+  };
+
+  // Add effect to handle social auth completion
+  useEffect(() => {
+    if (isLinking && linkingMethod && !selectedMethod) {
+      // This means we're in a social auth flow
+      const checkAuthStatus = async () => {
+        try {
+          // Wait a bit to ensure auth is complete
+          await new Promise(resolve => setTimeout(resolve, 1000));
+          onClose?.();
+        } catch (error) {
+          console.error("Error checking auth status:", error);
+          setLinkingState(false);
+        }
+      };
+
+      checkAuthStatus();
+    }
+  }, [isLinking, linkingMethod, selectedMethod, onClose, setLinkingState]);
+
+  const handleBack = useCallback(() => {
+    if (isLinking) return;
+    setSelectedMethod(null);
+    setEmail("");
+    setPhone("");
+    setOtp("");
+    setOtpSent(false);
+    setError(null);
+    setLinkingState(false);
+  }, [isLinking, setSelectedMethod, setEmail, setPhone, setOtp, setOtpSent, setError, setLinkingState]);
+
+  useEffect(() => {
+    if (isLinking) {
+      setLinkingState(false);
+      navigateBack();
+      setB3ModalContentType({
+        type: "manageAccount",
+        activeTab: "settings",
+        setActiveTab: () => {},
+        chain,
+        partnerId,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [profiles.length]);
+
+  if (!account) {
+    return <div className="text-b3-foreground-muted py-8 text-center">Please connect your account first</div>;
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-b3-grey font-neue-montreal-semibold text-2xl">Link New Account</h2>
+        {selectedMethod && (
+          <Button variant="ghost" className="text-b3-grey hover:text-b3-grey/80" onClick={handleBack}>
+            Backs
+          </Button>
+        )}
+      </div>
+
+      {!selectedMethod ? (
+        <div className="grid gap-3">
+          {availableAuthMethods.map(method => (
+            <Button
+              key={method.id}
+              className="bg-b3-primary-wash hover:bg-b3-primary-wash/70 text-b3-grey font-neue-montreal-semibold h-16 justify-start px-6 text-lg"
+              onClick={() => {
+                if (method.id === "email" || method.id === "phone") {
+                  setSelectedMethod(method.id);
+                } else {
+                  handleSocialLink(method.id as SocialStrategy);
+                }
+              }}
+              disabled={linkingMethod === method.id}
+            >
+              {isLinking && linkingMethod === method.id ? <Loader2 className="animate-spin" /> : method.label}
+            </Button>
+          ))}
+          {availableAuthMethods.length === 0 && (
+            <div className="text-b3-foreground-muted py-8 text-center">
+              All available authentication methods have been connected
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {selectedMethod === "email" && (
+            <div className="space-y-2">
+              <label className="text-b3-grey font-neue-montreal-medium text-sm">Email Address</label>
+              <input
+                type="email"
+                placeholder="Enter your email"
+                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={email}
+                onChange={e => setEmail(e.target.value)}
+                disabled={otpSent || (isLinking && linkingMethod === "email")}
+              />
+            </div>
+          )}
+
+          {selectedMethod === "phone" && (
+            <div className="space-y-2">
+              <label className="text-b3-grey font-neue-montreal-medium text-sm">Phone Number</label>
+              <input
+                type="tel"
+                placeholder="Enter your phone number"
+                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={phone}
+                onChange={e => setPhone(e.target.value)}
+                disabled={otpSent || (isLinking && linkingMethod === "phone")}
+              />
+              <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                Include country code (e.g., +1 for US)
+              </p>
+            </div>
+          )}
+
+          {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)}
+                  disabled={isLinking && linkingMethod === selectedMethod}
+                />
+              </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}
+                disabled={!otp || (isLinking && linkingMethod === selectedMethod)}
+              >
+                {isLinking && linkingMethod === selectedMethod ? <Loader2 className="animate-spin" /> : "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={handleSendOTP}
+              disabled={(!email && !phone) || (isLinking && linkingMethod === selectedMethod)}
+            >
+              {isLinking && linkingMethod === selectedMethod ? (
+                <Loader2 className="animate-spin" />
+              ) : (
+                "Send Verification Code"
+              )}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}