@b3dotfun/sdk 0.0.35 → 0.0.36

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

@@ -1,4 +1,4 @@
-import { Input, useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
@@ -8,12 +8,10 @@ import { useEffect, useRef } from "react";
 import { useAccount } from "wagmi";
 import { components } from "../../../types/api";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
-import { FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 import { TokenBalance } from "./TokenBalance";
 
-interface PaySectionProps {
-  paymentType: "crypto" | "fiat";
+interface CryptoPaySectionProps {
   // Token state
   selectedSrcChainId: number;
   setSelectedSrcChainId: (chainId: number) => void;
@@ -24,15 +22,12 @@ interface PaySectionProps {
   setIsSrcInputDirty: (dirty: boolean) => void;
   // Payment method state
   selectedCryptoPaymentMethod: CryptoPaymentMethodType;
-  selectedFiatPaymentMethod: FiatPaymentMethod;
   onSelectCryptoPaymentMethod: () => void;
-  onSelectFiatPaymentMethod: () => void;
   // Quote data
   anyspendQuote?: any;
 }
 
-export function PaySection({
-  paymentType,
+export function CryptoPaySection({
   selectedSrcChainId,
   setSelectedSrcChainId,
   selectedSrcToken,
@@ -41,11 +36,9 @@ export function PaySection({
   setSrcAmount,
   setIsSrcInputDirty,
   selectedCryptoPaymentMethod,
-  selectedFiatPaymentMethod,
   onSelectCryptoPaymentMethod,
-  onSelectFiatPaymentMethod,
   anyspendQuote,
-}: PaySectionProps) {
+}: CryptoPaySectionProps) {
   const { address: connectedAddress, isConnected } = useAccount();
   const { data: profileData } = useProfile({ address: connectedAddress });
   const connectedName = profileData?.displayName;
@@ -88,137 +81,68 @@ export function PaySection({
     >
       <div className="flex items-center justify-between">
         <div className="text-as-primary/50 flex h-7 items-center text-sm">Pay</div>
-        {paymentType === "crypto" ? (
-          <button
-            className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
-            onClick={onSelectCryptoPaymentMethod}
-          >
-            {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
-              <>
-                {isConnected ? (
-                  <div className="flex items-center gap-1">
-                    {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
-                  </div>
-                ) : (
-                  "Connect wallet"
-                )}
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
-              <>
-                Transfer crypto
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : (
-              <>
-                Select payment method
-                <ChevronRight className="h-4 w-4" />
-              </>
-            )}
-          </button>
-        ) : (
-          <button
-            className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors"
-            onClick={onSelectFiatPaymentMethod}
-          >
-            {selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">C</span>
-                  </div>
-                  Coinbase Pay
+        <button
+          className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
+          onClick={onSelectCryptoPaymentMethod}
+        >
+          {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
+            <>
+              {isConnected ? (
+                <div className="flex items-center gap-1">
+                  {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
                 </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">S</span>
-                  </div>
-                  Credit/Debit Card
-                </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : (
-              <>
-                Select payment method
-                <ChevronRight className="h-4 w-4" />
-              </>
-            )}
-          </button>
-        )}
+              ) : (
+                "Connect wallet"
+              )}
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (
+            <>
+              Global Account
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
+            <>
+              Transfer crypto
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : (
+            <>
+              Select payment method
+              <ChevronRight className="h-4 w-4" />
+            </>
+          )}
+        </button>
+      </div>
+      <OrderTokenAmount
+        address={connectedAddress}
+        context="from"
+        inputValue={srcAmount}
+        onChangeInput={value => {
+          setIsSrcInputDirty(true);
+          setSrcAmount(value);
+        }}
+        chainId={selectedSrcChainId}
+        setChainId={setSelectedSrcChainId}
+        token={selectedSrcToken}
+        setToken={setSelectedSrcToken}
+      />
+      <div className="flex items-center justify-between">
+        <div className="text-as-primary/50 flex h-5 items-center text-sm">
+          {formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
+            style: "currency",
+            fallback: "",
+          })}
+        </div>
+        <TokenBalance
+          token={selectedSrcToken}
+          walletAddress={connectedAddress}
+          onChangeInput={value => {
+            setIsSrcInputDirty(true);
+            setSrcAmount(value);
+          }}
+        />
       </div>
-      {paymentType === "crypto" ? (
-        <>
-          <OrderTokenAmount
-            address={connectedAddress}
-            context="from"
-            inputValue={srcAmount}
-            onChangeInput={value => {
-              setIsSrcInputDirty(true);
-              setSrcAmount(value);
-            }}
-            chainId={selectedSrcChainId}
-            setChainId={setSelectedSrcChainId}
-            token={selectedSrcToken}
-            setToken={setSelectedSrcToken}
-          />
-          <div className="flex items-center justify-between">
-            <div className="text-as-primary/50 flex h-5 items-center text-sm">
-              {formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
-                style: "currency",
-                fallback: "",
-              })}
-            </div>
-            <TokenBalance
-              token={selectedSrcToken}
-              walletAddress={connectedAddress}
-              onChangeInput={value => {
-                setIsSrcInputDirty(true);
-                setSrcAmount(value);
-              }}
-            />
-          </div>
-        </>
-      ) : (
-        <>
-          {/* Fiat amount input - styled like PanelOnramp */}
-          <div className="flex items-center justify-center pb-2 pt-8">
-            <div className="flex gap-1">
-              <span className="text-as-tertiarry text-2xl font-bold">$</span>
-              <Input
-                type="text"
-                value={srcAmount}
-                onChange={e => setSrcAmount(e.target.value.replace(/[^0-9.]/g, ""))}
-                placeholder="5"
-                className="text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0"
-                style={{
-                  width: `${Math.max(50, srcAmount.length * 34)}px`,
-                }}
-              />
-            </div>
-          </div>
-
-          {/* Quick Amount Buttons */}
-          <div className="mx-auto mb-6 inline-grid grid-cols-4 gap-2">
-            {["5", "10", "20", "25"].map(value => (
-              <button
-                key={value}
-                onClick={() => setSrcAmount(value)}
-                className={`bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${
-                  srcAmount === value
-                    ? "border-as-border-secondary bg-as-surface-secondary"
-                    : "bg-as-surface-secondary hover:bg-as-surface-secondary"
-                }`}
-              >
-                ${value}
-              </button>
-            ))}
-          </div>
-        </>
-      )}
     </motion.div>
   );
 }

package/src/anyspend/react/components/index.ts

@@ -5,13 +5,14 @@ export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";
-export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";
 export { AnySpendTournament } from "./AnySpendTournament";
+export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
 
 // Common Components
 export { ChainTokenIcon } from "./common/ChainTokenIcon";
+export { CryptoPaySection } from "./common/CryptoPaySection";
 export { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 export { OrderDetails } from "./common/OrderDetails";
 export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible";
@@ -20,7 +21,6 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem";
 export { OrderStatus } from "./common/OrderStatus";
 export { OrderToken } from "./common/OrderToken";
 export { OrderTokenAmount } from "./common/OrderTokenAmount";
-export { PaySection } from "./common/PaySection";
 export { RecipientSelection } from "./common/RecipientSelection";
 export { StepProgress } from "./common/StepProgress";
 export { TokenBalance } from "./common/TokenBalance";

package/src/global-account/bsmnt.ts

@@ -1,9 +1,12 @@
 import { createClient } from "@b3dotfun/basement-api";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { AuthenticationClient } from "@feathersjs/authentication-client";
 import socketio from "@feathersjs/socketio-client";
 import Cookies from "js-cookie";
 import io from "socket.io-client";
 
+const debug = debugB3React("bsmnt");
+
 // Also use b3 auth token since we are using b3-jwt strategy
 const BSMNT_AUTH_COOKIE_NAME = "b3-auth";
 
@@ -70,4 +73,48 @@ export const resetSocket = () => {
   // reset the socket connection
 };
 
+export function extractAvatarIdFromUrl(url: string): string | null {
+  const regex = /https:\/\/models\.readyplayer\.me\/([a-f0-9]{24})\.[a-zA-Z0-9]+/;
+  const match = url.match(regex);
+  return match ? match[1] : null;
+}
+
+export const authenticateWithB3JWT = async (fullToken: string, params?: Record<string, any>) => {
+  // Do not authenticate if there is no token
+  if (!fullToken) {
+    console.log("No token found, not authenticating");
+    return null;
+  }
+
+  debug("Authenticating with token:12", fullToken);
+  try {
+    const response = await app.authenticate(
+      {
+        strategy: "b3-jwt",
+        accessToken: fullToken,
+      },
+      {
+        query: params || {},
+      },
+    );
+    debug("Authenticated", response);
+
+    // Store streamToken if it exists in the response
+    if (response?.streamToken) {
+      Cookies.set("stream-token", response.streamToken, {
+        expires: new Date(response.authExpires),
+        secure: process.env.NODE_ENV === "production",
+        sameSite: "strict",
+      });
+      debug("Stream token stored in cookies");
+    }
+
+    return response;
+  } catch (error) {
+    debug(`Authentication error:5`, error);
+    debug("Authentication JWT", fullToken);
+    return null;
+  }
+};
+
 export default app;

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

@@ -0,0 +1,90 @@
+"use client";
+
+import { useProfile } from "@b3dotfun/sdk/global-account/react";
+import { useRPMToken } from "@b3dotfun/sdk/global-account/react/hooks/useRPMToken";
+import { updateAvatar } from "@b3dotfun/sdk/global-account/react/utils/updateAvatar";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import {
+  AvatarCreatorConfig,
+  AvatarCreator as AvatarCreatorRPM,
+  AvatarExportedEvent,
+} from "@readyplayerme/react-avatar-creator";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+
+const debug = debugB3React("AvatarCreator");
+
+const config: AvatarCreatorConfig = {
+  clearCache: true,
+  bodyType: "fullbody",
+  quickStart: true,
+  language: "en",
+};
+
+interface AvatarCreatorProps {
+  onSetAvatar?: () => void;
+  className?: string;
+}
+
+export function AvatarCreator({ onSetAvatar, className }: AvatarCreatorProps) {
+  const { token, refetch: refetchRPMToken } = useRPMToken();
+  const [loading, setIsLoading] = useState(false);
+  const account = useActiveAccount();
+  const { data: profile, refetch: refreshProfile } = useProfile({
+    address: account?.address,
+    fresh: true,
+  });
+
+  const hasAvatar = profile?.avatar;
+
+  const handleOnAvatarExported = async (event: AvatarExportedEvent) => {
+    setIsLoading(true);
+    debug("@@AvatarExportedEvent", event);
+    try {
+      const avatarUpload = await updateAvatar(event.data.url);
+      debug("@@avatarUpload", avatarUpload);
+
+      await refreshProfile();
+      toast.success(
+        hasAvatar ? "Nice look! Your avatar has been updated!" : "Looks great! Your avatar has been saved!",
+      );
+      onSetAvatar?.();
+      await refetchRPMToken(undefined);
+    } catch (e) {
+      debug("@@error:AvatarCreator", e);
+      toast.error("Failed to update avatar. Please try again.");
+    }
+    setIsLoading(false);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-[80vh] w-full flex-col items-center justify-center gap-4">
+        <div className="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" />
+        <p className="text-muted-foreground text-sm font-medium">Saving your avatar</p>
+      </div>
+    );
+  }
+
+  if (!token) {
+    return (
+      <div className="flex h-[80vh] w-full flex-col items-center justify-center gap-4">
+        <div className="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" />
+        <p className="text-muted-foreground text-sm font-medium">Loading avatar creator</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("h-[calc(90vh-2px)] w-full", className)}>
+      <AvatarCreatorRPM
+        className="h-full w-full"
+        subdomain="b3"
+        config={{ ...config, token }}
+        onAvatarExported={handleOnAvatarExported}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,233 @@
+"use client";
+
+import app from "@b3dotfun/sdk/global-account/app";
+import { Button, useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { Check, Loader2, Upload, X } from "lucide-react";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+import { upload } from "thirdweb/storage";
+
+const debug = debugB3React("AvatarEditor");
+
+interface AvatarEditorProps {
+  onSetAvatar?: () => void;
+  className?: string;
+}
+
+export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { setUser } = useB3();
+
+  const account = useActiveAccount();
+  const { data: profile, refetch: refreshProfile } = useProfile({
+    address: account?.address,
+    fresh: true,
+  });
+
+  // Thirdweb upload function
+
+  const hasAvatar = profile?.avatar;
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.type.startsWith("image/")) {
+        toast.error("Please select an image file");
+        return;
+      }
+
+      // Validate file size (max 5MB)
+      if (file.size > 5 * 1024 * 1024) {
+        toast.error("File size must be less than 5MB");
+        return;
+      }
+
+      setSelectedFile(file);
+
+      // Create preview URL
+      const url = URL.createObjectURL(file);
+      setPreviewUrl(url);
+    }
+  };
+
+  const handleRemoveFile = () => {
+    setSelectedFile(null);
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+      setPreviewUrl(null);
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) {
+      toast.error("Please select an image first");
+      return;
+    }
+
+    setIsUploading(true);
+    try {
+      debug("Starting upload to IPFS", selectedFile);
+
+      // Upload to IPFS using Thirdweb
+      const ipfsUrl = await upload({
+        client,
+        files: [selectedFile],
+      });
+
+      debug("Upload successful", ipfsUrl);
+
+      // Save avatar URL using profiles service
+      setIsSaving(true);
+      const user = await app.service("users").setAvatar(
+        {
+          avatar: ipfsUrl,
+        },
+        // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+        {},
+      );
+      // update user
+      // @ts-expect-error this resolved fine, look into why expect-error needed
+      setUser(user);
+
+      // Refresh profile to get updated avatar
+      await refreshProfile();
+
+      toast.success(
+        hasAvatar ? "Nice look! Your avatar has been updated!" : "Looks great! Your avatar has been saved!",
+      );
+
+      onSetAvatar?.();
+
+      // Clean up
+      handleRemoveFile();
+    } catch (error) {
+      debug("Error uploading avatar:", error);
+      toast.error("Failed to upload avatar. Please try again.");
+    } finally {
+      setIsUploading(false);
+      setIsSaving(false);
+    }
+  };
+
+  const handleFileInputClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const isLoading = isUploading || isSaving;
+
+  return (
+    <div className={cn("flex flex-col items-center justify-center space-y-6 p-8", className)}>
+      <div className="space-y-2 text-center">
+        <h2 className="font-neue-montreal-semibold text-b3-grey text-2xl">
+          {hasAvatar ? "Update Your Avatar" : "Set Your Avatar"}
+        </h2>
+        <p className="text-b3-foreground-muted font-neue-montreal-medium">
+          Upload an image to personalize your profile
+        </p>
+      </div>
+
+      {/* Current Avatar Display */}
+      {hasAvatar && !previewUrl && (
+        <div className="relative">
+          <div className="border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4">
+            <img src={profile.avatar} alt="Current avatar" className="h-full w-full object-cover" />
+          </div>
+        </div>
+      )}
+
+      {/* File Upload Area */}
+      <div className="w-full max-w-md">
+        {!selectedFile ? (
+          <div
+            onClick={handleFileInputClick}
+            className="border-b3-line hover:border-b3-primary-blue hover:bg-b3-primary-wash/20 cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-colors"
+          >
+            <Upload className="text-b3-grey mx-auto mb-4 h-12 w-12" />
+            <p className="text-b3-grey font-neue-montreal-semibold mb-2">Click to select an image</p>
+            <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">PNG, JPG, or GIF up to 5MB</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {/* Preview */}
+            <div className="relative">
+              <div className="border-b3-primary-blue mx-auto h-32 w-32 overflow-hidden rounded-full border-4">
+                {previewUrl ? (
+                  <img src={previewUrl} alt="Preview" className="h-full w-full object-cover" />
+                ) : (
+                  <div className="bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full">
+                    <p className="text-b3-grey font-neue-montreal-semibold text-sm">No file selected</p>
+                  </div>
+                )}
+              </div>
+              <button
+                onClick={handleRemoveFile}
+                className="bg-b3-negative absolute -right-2 -top-2 flex h-8 w-8 items-center justify-center rounded-full text-white transition-colors hover:bg-red-600"
+                disabled={isLoading}
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            {/* File Info */}
+            <div className="space-y-1 text-center">
+              <p className="text-b3-grey font-neue-montreal-semibold text-sm">{selectedFile.name}</p>
+              <p className="text-b3-foreground-muted font-neue-montreal-medium text-xs">
+                {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Hidden file input */}
+        <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileSelect} className="hidden" />
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex w-full max-w-md gap-3">
+        {selectedFile && (
+          <Button
+            onClick={handleUpload}
+            disabled={isLoading}
+            className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {isUploading ? "Uploading..." : "Saving..."}
+              </>
+            ) : (
+              <>
+                <Check className="mr-2 h-4 w-4" />
+                {hasAvatar ? "Update Avatar" : "Set Avatar"}
+              </>
+            )}
+          </Button>
+        )}
+
+        <Button variant="outline" onClick={handleFileInputClick} disabled={isLoading} className="flex-1">
+          <Upload className="mr-2 h-4 w-4" />
+          {selectedFile ? "Change Image" : "Select Image"}
+        </Button>
+      </div>
+
+      {/* Help Text */}
+      <div className="text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs">
+        <p>
+          Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image.
+        </p>
+      </div>
+    </div>
+  );
+}