@b3dotfun/sdk 0.0.73-test.3 → 0.0.74-alpha.0

package/dist/esm/anyspend/react/components/common/PanelOnrampPayment.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions } from "../../../../anyspend/react/index.js";
-import { Button } from "../../../../global-account/react/index.js";
+import { Button, toast } from "../../../../global-account/react/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import invariant from "invariant";
 import { ChevronLeft, ChevronRight, Landmark, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
-import { toast } from "sonner";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
 export function PanelOnrampPayment(props) {
     const fingerprintConfig = getFingerprintConfig();
@@ -82,7 +81,7 @@ function PanelOnrampPaymentInner(props) {
             toast.error("Failed to create order: " + err.message);
         }
     };
-    return (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [_jsxs(_Fragment, { children: [_jsx("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), _jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && (_jsxs(motion.div, { initial: false, animate: {
+    return (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6 px-5 pt-5", children: [_jsxs(_Fragment, { children: [_jsx("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), _jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && (_jsxs(motion.div, { initial: false, animate: {
                                     opacity: 1,
                                     y: 0,
                                     filter: "blur(0px)",

package/dist/esm/anyspend/react/components/common/PointsDetailPanel.js

@@ -3,5 +3,5 @@ import { ShinyButton } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import Link from "next/link";
 export function PointsDetailPanel({ pointsAmount = 0, onBack }) {
-    return (_jsx("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: _jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [_jsx("h3", { className: "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), _jsxs("p", { className: "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn ", _jsxs("span", { className: "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", _jsx(Link, { href: "https://anyspend.com/points", target: "_blank", className: "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), _jsxs("div", { className: "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [_jsx("h4", { className: "text-as-primary mb-2 font-semibold", children: "How it works:" }), _jsxs("ul", { className: "text-as-primary/70 space-y-1 text-sm", children: [_jsx("li", { children: "\u2022 Points are earned based on transaction volume" }), _jsx("li", { children: "\u2022 Higher volume = more points" }), _jsx("li", { children: "\u2022 Points contribute to future airdrops" }), _jsx("li", { children: "\u2022 Keep swapping to maximize your rewards" })] })] }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: cn("as-main-button !bg-as-brand relative w-full"), textClassName: cn("text-white"), children: "Back to Swap" })] }) }));
+    return (_jsx("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5", children: _jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [_jsx("h3", { className: "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), _jsxs("p", { className: "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn ", _jsxs("span", { className: "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", _jsx(Link, { href: "https://anyspend.com/points", target: "_blank", className: "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), _jsxs("div", { className: "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [_jsx("h4", { className: "text-as-primary mb-2 font-semibold", children: "How it works:" }), _jsxs("ul", { className: "text-as-primary/70 space-y-1 text-sm", children: [_jsx("li", { children: "\u2022 Points are earned based on transaction volume" }), _jsx("li", { children: "\u2022 Higher volume = more points" }), _jsx("li", { children: "\u2022 Points contribute to future airdrops" }), _jsx("li", { children: "\u2022 Keep swapping to maximize your rewards" })] })] }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: cn("as-main-button !bg-as-brand relative w-full"), textClassName: cn("text-white"), children: "Back to Swap" })] }) }));
 }

package/dist/esm/anyspend/react/components/common/RecipientSelection.js

@@ -29,5 +29,5 @@ export function RecipientSelection({ initialValue = "", placeholder = "Enter rec
     };
     const isAddressValid = !validateAddress || !recipientAddress || validateAddress(recipientAddress);
     const canConfirm = recipientAddress && isAddressValid;
-    return (_jsx("div", { className: "recipient-selection mx-auto w-[460px] max-w-full", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex justify-around", children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsxs("div", { className: "flex-1 text-center", children: [_jsx("h2", { className: "text-as-primary text-lg font-semibold", children: title }), _jsx("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [_jsx("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), _jsx("div", { className: "border-as-border-secondary border-l", children: _jsx("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && (_jsx("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), _jsx("button", { onClick: handleConfirm, disabled: !canConfirm, className: "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));
+    return (_jsx("div", { className: "recipient-selection mx-auto w-[460px] max-w-full p-5", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex justify-around", children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsxs("div", { className: "flex-1 text-center", children: [_jsx("h2", { className: "text-as-primary text-lg font-semibold", children: title }), _jsx("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [_jsx("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), _jsx("div", { className: "border-as-border-secondary border-l", children: _jsx("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && (_jsx("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), _jsx("button", { onClick: handleConfirm, disabled: !canConfirm, className: "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));
 }

package/dist/esm/anyspend/react/components/common/TransferCryptoDetails.js

@@ -1,14 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ALL_CHAINS, getChainName, getPaymentUrl, RELAY_ETH_ADDRESS } from "../../../../anyspend/index.js";
-import { CopyToClipboard, ShinyButton, TextLoop } from "../../../../global-account/react/index.js";
+import { CopyToClipboard, ShinyButton, TextLoop, toast } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust } from "@web3icons/react";
 import { ChevronLeft, Copy } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import { memo, useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
 import { b3 } from "viem/chains";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";

package/dist/esm/anyspend/react/components/webview/WebviewOnrampOrderStatus.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getChainName } from "../../../../anyspend/index.js";
-import { Badge, useTokenData } from "../../../../global-account/react/index.js";
+import { Badge, toast, useTokenData } from "../../../../global-account/react/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { CheckIcon, Copy, ExternalLink, Loader2 } from "lucide-react";
-import { toast } from "sonner";
 import { formatUnits } from "viem";
 export function WebviewOnrampOrderStatus({ order }) {
     console.log(order.status);

package/dist/esm/anyspend/react/components/webview/WebviewOnrampPayment.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getChainName, STRIPE_CONFIG } from "../../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "../../../../anyspend/react/index.js";
+import { toast } from "../../../../global-account/react/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
 import { formatUnits } from "viem";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
 const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);

package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js

@@ -1,10 +1,9 @@
 import { B3_TOKEN, getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
 import { anyspendService } from "../../../anyspend/services/anyspend.js";
-import { useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenBalance, } from "../../../global-account/react/index.js";
+import { toast, useAccountWallet, useProfile, useRouter, useSearchParamsSSR, useTokenBalance, } from "../../../global-account/react/index.js";
 import { formatTokenAmount, formatUnits } from "../../../shared/utils/number.js";
 import { useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod.js";

package/dist/esm/anyspend/react/hooks/useConnectedWalletDisplay.js

@@ -7,7 +7,7 @@ import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMetho
  */
 export function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
     const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
-    const { address: wagmiAddress, isConnected: wagmiWalletIsConnected } = useAccount();
+    const { address: wagmiAddress } = useAccount();
     const globalWalletAddress = connectedSmartWallet?.getAccount()?.address;
     // Helper function to check if two addresses are the same
     const isSameAddress = (addr1, addr2) => {
@@ -20,7 +20,8 @@ export function useConnectedWalletDisplay(selectedCryptoPaymentMethod) {
     const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress) || isSameAddress(globalWalletAddress, wagmiAddress);
     // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
     const shouldShowConnectedEOA = !!connectedEOAWallet;
-    const shouldShowWagmiWallet = wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
+    // this is disabled because we don't want to display In-App Wallet as a payment method
+    const shouldShowWagmiWallet = false; // wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
     // Determine which address to use based on payment method
     let walletAddress;
     if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {

package/dist/esm/anyspend/react/hooks/usePhantomTransfer.js

@@ -1,7 +1,7 @@
+import { toast } from "../../../global-account/react/index.js";
 import { createAssociatedTokenAccountInstruction, createTransferCheckedInstruction, getAssociatedTokenAddressSync, } from "@solana/spl-token";
 import { ComputeBudgetProgram, Connection, PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
 import { useCallback, useMemo } from "react";
-import { toast } from "sonner";
 /**
  * Custom hook for handling Phantom wallet transfers on Solana.
  * Supports both native SOL and SPL token transfers with automatic priority fee calculation.

package/dist/esm/anyspend/react/utils/toast.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Re-export toast from global-account for consistency
+ * This allows anyspend components to continue using the same toast API
+ */
+export { toast } from "../../../global-account/react/components/Toast/toastApi";
+export type { ToastItem, ToastType } from "../../../global-account/react/components/Toast/ToastContext";

package/dist/esm/anyspend/react/utils/toast.js

@@ -0,0 +1,5 @@
+/**
+ * Re-export toast from global-account for consistency
+ * This allows anyspend components to continue using the same toast API
+ */
+export { toast } from "../../../global-account/react/components/Toast/toastApi.js";

package/dist/esm/global-account/react/components/AccountAssets/AccountAssets.js

@@ -1,10 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 export function AccountAssets({ nfts, isLoading }) {
+    // Initialize with all collections expanded
+    // Group NFTs by collection
+    const groupedNFTs = nfts?.nfts?.reduce((acc, nft) => {
+        const collectionId = nft.collection?.collection_id || "unknown";
+        if (!acc[collectionId]) {
+            acc[collectionId] = {
+                collection_id: collectionId,
+                collection_name: nft.collection?.name || "Unknown Collection",
+                collection_image: nft.collection?.image_url || nft.previews?.image_small_url || "",
+                nfts: [],
+            };
+        }
+        acc[collectionId].nfts.push(nft);
+        return acc;
+    }, {});
+    const collections = Object.values(groupedNFTs || {});
+    const [expandedCollections, setExpandedCollections] = useState(() => new Set(collections.map(c => c.collection_id)));
     if (isLoading) {
-        return (_jsx("div", { className: "grid animate-pulse grid-cols-2 gap-4", children: [...Array(4)].map((_, i) => (_jsx("div", { className: "bg-b3-react-muted aspect-square rounded-lg" }, i))) }));
+        return (_jsx("div", { className: "flex flex-col gap-3", children: [...Array(2)].map((_, i) => (_jsxs("div", { className: "animate-pulse", children: [_jsx("div", { className: "bg-b3-react-muted mb-3 h-6 w-48 rounded" }), _jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "bg-b3-react-muted h-[98px] w-[98px] shrink-0 rounded-lg" }), _jsx("div", { className: "bg-b3-react-muted h-[98px] w-[98px] shrink-0 rounded-lg" })] })] }, i))) }));
     }
     if (!nfts?.nfts?.length) {
         return _jsx("div", { className: "text-b3-react-muted-foreground py-8 text-center", children: "No NFTs found" });
     }
-    return (_jsx("div", { className: "grid grid-cols-2 gap-4", children: nfts.nfts.map(nft => (_jsx("div", { className: "group relative aspect-square overflow-hidden", children: _jsxs("div", { className: "relative h-full w-full overflow-hidden rounded-xl", children: [_jsx("img", { src: nft.previews?.image_medium_url || nft.extra_metadata?.image_original_url || nft.collection?.image_url, alt: nft.name || "NFT", className: "h-full w-full rounded-xl object-cover" }), _jsxs("div", { className: "absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black from-35% via-black/70 to-transparent p-3 opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100", children: [_jsx("p", { className: "font-neue-montreal-bold text-[16px] text-white drop-shadow-[0_1px_2px_rgba(0,0,0,1)]", children: nft.name || `#${nft.token_id}` }), _jsx("p", { className: "font-neue-montreal-bold text-sm text-white/95 drop-shadow-[0_1px_2px_rgba(0,0,0,1)]", children: nft.collection?.name })] })] }) }, nft.nft_id))) }));
+    const toggleCollection = (collectionId) => {
+        setExpandedCollections(prev => {
+            const next = new Set(prev);
+            if (next.has(collectionId)) {
+                next.delete(collectionId);
+            }
+            else {
+                next.add(collectionId);
+            }
+            return next;
+        });
+    };
+    return (_jsx("div", { className: "flex flex-col gap-3 px-4", children: collections.map(collection => {
+            const isExpanded = expandedCollections.has(collection.collection_id);
+            return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("button", { onClick: () => toggleCollection(collection.collection_id), className: "flex w-full items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1", children: [collection.collection_image && (_jsx("img", { src: collection.collection_image, alt: collection.collection_name, className: "h-5 w-5 shrink-0 rounded object-cover" })), _jsxs("p", { className: "font-neue-montreal-medium text-[14px] text-[#3f3f46]", children: [collection.collection_name, " (", collection.nfts.length, ")"] })] }), _jsx("svg", { className: `h-[18px] w-[18px] shrink-0 transition-transform ${isExpanded ? "rotate-180" : ""}`, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M4.5 6.75L9 11.25L13.5 6.75", stroke: "#51525C", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), isExpanded && (_jsx("div", { className: "flex gap-3 overflow-x-auto", children: collection.nfts.map(nft => (_jsx("div", { className: "relative h-[98px] w-[98px] shrink-0 overflow-hidden rounded-lg", children: _jsx("img", { src: nft.previews?.image_medium_url ||
+                                    nft.extra_metadata?.image_original_url ||
+                                    nft.collection?.image_url ||
+                                    "", alt: nft.name || "NFT", className: "h-full w-full object-cover" }) }, nft.nft_id))) }))] }, collection.collection_id));
+        }) }));
 }

package/dist/esm/global-account/react/components/AvatarCreator/AvatarCreator.js

@@ -1,13 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useProfile } from "../../../../global-account/react/index.js";
+import { toast, useProfile } from "../../../../global-account/react/index.js";
 import { useRPMToken } from "../../../../global-account/react/hooks/useRPMToken.js";
 import { updateAvatar } from "../../../../global-account/react/utils/updateAvatar.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { debugB3React } from "../../../../shared/utils/debug.js";
 import { AvatarCreator as AvatarCreatorRPM, } from "@readyplayerme/react-avatar-creator";
 import { useState } from "react";
-import { toast } from "sonner";
 import { useActiveAccount } from "thirdweb/react";
 const debug = debugB3React("AvatarCreator");
 const config = {

package/dist/esm/global-account/react/components/AvatarEditor/AvatarEditor.d.ts

@@ -1,3 +1,4 @@
+import "react-easy-crop/react-easy-crop.css";
 interface AvatarEditorProps {
     onSetAvatar?: () => void;
     className?: string;

package/dist/esm/global-account/react/components/AvatarEditor/AvatarEditor.js

@@ -1,30 +1,80 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import app from "../../../../global-account/app.js";
-import { Button, useB3, useProfile } from "../../../../global-account/react/index.js";
+import { Button, IPFSMediaRenderer, toast, useB3, useProfile } from "../../../../global-account/react/index.js";
+import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { debugB3React } from "../../../../shared/utils/debug.js";
+import { getIpfsUrl } from "../../../../shared/utils/ipfs.js";
 import { client } from "../../../../shared/utils/thirdweb.js";
-import { Check, Loader2, Upload, X } from "lucide-react";
-import { useRef, useState } from "react";
-import { toast } from "sonner";
+import { Loader2, Upload, X } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+import Cropper from "react-easy-crop";
+import "react-easy-crop/react-easy-crop.css";
 import { useActiveAccount } from "thirdweb/react";
 import { upload } from "thirdweb/storage";
+import { useModalStore } from "../../stores/index.js";
+import ModalHeader from "../ModalHeader/ModalHeader.js";
 const debug = debugB3React("AvatarEditor");
+// Helper function to create an image element from a URL
+const createImage = (url) => new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => resolve(image));
+    image.addEventListener("error", error => reject(error));
+    image.setAttribute("crossOrigin", "anonymous");
+    image.src = url;
+});
 export function AvatarEditor({ onSetAvatar, className }) {
+    const [viewStep, setViewStep] = useState("select");
+    const [selectedAvatar, setSelectedAvatar] = useState(null);
+    const [selectedProfileType, setSelectedProfileType] = useState(null); // Track which profile was selected
+    const [hoveredProfile, setHoveredProfile] = useState(null);
     const [selectedFile, setSelectedFile] = useState(null);
     const [previewUrl, setPreviewUrl] = useState(null);
-    const [isUploading, setIsUploading] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [crop, setCrop] = useState({ x: 0, y: 0 });
+    const [zoom, setZoom] = useState(1);
+    const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
     const fileInputRef = useRef(null);
-    const { setUser } = useB3();
+    const { setUser, user, partnerId } = useB3();
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    const contentType = useModalStore(state => state.contentType);
     const account = useActiveAccount();
     const { data: profile, refetch: refreshProfile } = useProfile({
         address: account?.address,
         fresh: true,
     });
-    // Thirdweb upload function
-    const hasAvatar = profile?.avatar;
+    // Get raw avatar URLs, convert IPFS URLs, and validate them
+    const rawCurrentAvatar = user?.avatar || profile?.avatar;
+    const currentAvatar = validateImageUrl(rawCurrentAvatar);
+    const safePreviewUrl = validateImageUrl(previewUrl);
+    const onCropComplete = useCallback((_croppedArea, croppedAreaPixels) => {
+        setCroppedAreaPixels(croppedAreaPixels);
+    }, []);
+    const createCroppedImage = async (imageSrc, pixelCrop) => {
+        const image = await createImage(imageSrc);
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+            throw new Error("Failed to get canvas context");
+        }
+        // Set canvas size to the crop area
+        canvas.width = pixelCrop.width;
+        canvas.height = pixelCrop.height;
+        // Draw the cropped image
+        ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
+        // Return as blob
+        return new Promise((resolve, reject) => {
+            canvas.toBlob(blob => {
+                if (!blob) {
+                    reject(new Error("Canvas is empty"));
+                    return;
+                }
+                resolve(blob);
+            }, "image/jpeg");
+        });
+    };
     const handleFileSelect = (event) => {
         const file = event.target.files?.[0];
         if (file) {
@@ -39,64 +89,250 @@ export function AvatarEditor({ onSetAvatar, className }) {
                 return;
             }
             setSelectedFile(file);
+            // Clear profile type selection when uploading a new file
+            setSelectedProfileType(null);
             // Create preview URL
             const url = URL.createObjectURL(file);
             setPreviewUrl(url);
+            setSelectedAvatar(url);
         }
     };
-    const handleRemoveFile = () => {
+    const handleRemovePreview = () => {
+        setSelectedAvatar(currentAvatar || null);
+        setSelectedProfileType(null);
         setSelectedFile(null);
         if (previewUrl) {
-            URL.revokeObjectURL(previewUrl);
+            // Only revoke blob URLs (from file uploads), not regular URLs (from social profiles)
+            if (previewUrl.startsWith("blob:")) {
+                URL.revokeObjectURL(previewUrl);
+            }
             setPreviewUrl(null);
         }
         if (fileInputRef.current) {
             fileInputRef.current.value = "";
         }
+        // Reset crop state
+        setCrop({ x: 0, y: 0 });
+        setZoom(1);
+        setCroppedAreaPixels(null);
     };
-    const handleUpload = async () => {
-        if (!selectedFile) {
-            toast.error("Please select an image first");
+    const handleSaveChanges = async () => {
+        if (!account?.address) {
+            toast.error("No account connected");
             return;
         }
-        setIsUploading(true);
+        setIsSaving(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);
+            let fileToUpload = null;
+            // If user uploaded a new file and cropped it
+            if (selectedFile && previewUrl && croppedAreaPixels) {
+                try {
+                    const croppedBlob = await createCroppedImage(previewUrl, croppedAreaPixels);
+                    const extension = selectedFile.name.split(".").pop() || "jpg";
+                    fileToUpload = new File([croppedBlob], `avatar-cropped.${extension}`, { type: "image/jpeg" });
+                }
+                catch (error) {
+                    debug("Error cropping image:", error);
+                    toast.error("Failed to crop image. Please try again.");
+                    setIsSaving(false);
+                    return;
+                }
+            }
+            else if (selectedFile) {
+                // Fallback if no crop was made
+                fileToUpload = selectedFile;
+            }
+            else if (selectedProfileType && previewUrl && croppedAreaPixels) {
+                // User selected from social profile and cropped it
+                debug("Cropping social profile image:", previewUrl);
+                try {
+                    const croppedBlob = await createCroppedImage(previewUrl, croppedAreaPixels);
+                    fileToUpload = new File([croppedBlob], `avatar-${selectedProfileType}-cropped.jpg`, { type: "image/jpeg" });
+                    debug("Successfully cropped social profile image");
+                }
+                catch (error) {
+                    debug("Error cropping social profile image:", error);
+                    toast.error("Failed to crop image. Please try again.");
+                    setIsSaving(false);
+                    return;
+                }
+            }
+            else if (selectedProfileType && selectedAvatar) {
+                // User selected from existing profile avatars without cropping
+                // Fetch the image from the URL and convert to blob
+                debug("Fetching image from social profile:", selectedAvatar);
+                try {
+                    // Convert IPFS URLs to gateway URLs for fetching
+                    const httpUrl = getIpfsUrl(selectedAvatar);
+                    const response = await fetch(httpUrl);
+                    if (!response.ok) {
+                        throw new Error("Failed to fetch image");
+                    }
+                    const blob = await response.blob();
+                    debug("Fetched blob with type:", blob.type);
+                    // Determine the correct extension from the blob's MIME type
+                    // This handles URLs without extensions (like Farcaster images)
+                    const mimeToExtension = {
+                        "image/jpeg": "jpg",
+                        "image/jpg": "jpg",
+                        "image/png": "png",
+                        "image/gif": "gif",
+                        "image/webp": "webp",
+                        "image/svg+xml": "svg",
+                    };
+                    const extension = blob.type ? mimeToExtension[blob.type.toLowerCase()] || "jpg" : "jpg";
+                    const mimeType = blob.type || `image/${extension}`;
+                    fileToUpload = new File([blob], `avatar-${selectedProfileType}.${extension}`, { type: mimeType });
+                    debug("Successfully converted social profile image to file with extension:", extension);
+                }
+                catch (fetchError) {
+                    debug("Error fetching social profile image:", fetchError);
+                    toast.error("Failed to fetch profile image. Please try uploading manually.");
+                    setIsSaving(false);
+                    return;
+                }
+            }
+            // Upload to IPFS if we have a file
+            if (fileToUpload) {
+                debug("Starting upload to IPFS", fileToUpload);
+                // Upload to IPFS using Thirdweb
+                const ipfsUrl = await upload({
+                    client,
+                    files: [fileToUpload],
+                });
+                debug("Upload successful", ipfsUrl);
+                // Save avatar URL using profiles service
+                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);
+                toast.success("Looks great! Your avatar has been saved!");
+            }
             // 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.");
+            debug("Error saving avatar:", error);
+            toast.error("Failed to save avatar. Please try again.");
         }
         finally {
-            setIsUploading(false);
             setIsSaving(false);
         }
     };
-    const handleFileInputClick = () => {
+    const handleCancel = () => {
+        if (viewStep === "upload") {
+            setViewStep("select");
+            handleRemovePreview();
+        }
+        else {
+            setB3ModalContentType({
+                type: "manageAccount",
+                chain: contentType?.chain,
+                partnerId: partnerId,
+            });
+        }
+    };
+    const handleProfileAvatarSelect = (avatarUrl, profileType) => {
+        setSelectedAvatar(avatarUrl);
+        setSelectedProfileType(profileType);
+        // Convert IPFS URLs to gateway URLs so the cropper can load them
+        const httpUrl = getIpfsUrl(avatarUrl, 1);
+        // Set preview URL to the avatar so it shows in the cropper
+        setPreviewUrl(httpUrl);
+        // Clear any selected file since we're selecting from profile
+        setSelectedFile(null);
+        // Move to upload/crop view
+        setViewStep("upload");
+    };
+    const handleUploadImageClick = () => {
+        setViewStep("upload");
+    };
+    const handleOpenFilePicker = () => {
         fileInputRef.current?.click();
     };
-    const isLoading = isUploading || isSaving;
-    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center space-y-6 p-8", className), children: [_jsxs("div", { className: "space-y-2 text-center", children: [_jsx("h2", { className: "font-neue-montreal-semibold text-b3-grey text-2xl", children: hasAvatar ? "Update Your Avatar" : "Set Your Avatar" }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium", children: "Upload an image to personalize your profile" })] }), hasAvatar && !previewUrl && (_jsx("div", { className: "relative", children: _jsx("div", { className: "border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4", children: _jsx("img", { src: profile.avatar, alt: "Current avatar", className: "h-full w-full object-cover" }) }) })), _jsxs("div", { className: "w-full max-w-md", children: [!selectedFile ? (_jsxs("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", children: [_jsx(Upload, { className: "text-b3-grey mx-auto mb-4 h-12 w-12" }), _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold mb-2", children: "Click to select an image" }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "PNG, JPG, or GIF up to 5MB" })] })) : (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "border-b3-primary-blue mx-auto h-32 w-32 overflow-hidden rounded-full border-4", children: previewUrl ? (_jsx("img", { src: previewUrl, alt: "Preview", className: "h-full w-full object-cover" })) : (_jsx("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full", children: _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "No file selected" }) })) }), _jsx("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, children: _jsx(X, { size: 16 }) })] }), _jsxs("div", { className: "space-y-1 text-center", children: [_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: selectedFile.name }), _jsxs("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-xs", children: [(selectedFile.size / 1024 / 1024).toFixed(2), " MB"] })] })] })), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), _jsxs("div", { className: "flex w-full max-w-md gap-3", children: [selectedFile && (_jsx(Button, { onClick: handleUpload, disabled: isLoading, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isUploading ? "Uploading..." : "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "mr-2 h-4 w-4" }), hasAvatar ? "Update Avatar" : "Set Avatar"] })) })), _jsxs(Button, { variant: "outline", onClick: handleFileInputClick, disabled: isLoading, className: "flex-1", children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), selectedFile ? "Change Image" : "Select Image"] })] }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs", children: _jsx("p", { children: "Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image." }) })] }));
+    const handleDragEnter = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        const file = e.dataTransfer.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);
+            // Clear profile type selection when uploading a new file
+            setSelectedProfileType(null);
+            // Create preview URL
+            const url = URL.createObjectURL(file);
+            setPreviewUrl(url);
+            setSelectedAvatar(url);
+        }
+    };
+    const handleLinkMoreAccount = () => {
+        setB3ModalContentType({
+            type: "linkAccount",
+            chain: contentType?.chain,
+            partnerId: partnerId,
+        });
+    };
+    const isLoading = isSaving;
+    // Get profile avatars with validated URLs
+    const profileAvatars = profile?.profiles
+        ?.filter(p => p.avatar)
+        .map(p => {
+        const rawAvatarUrl = p?.avatar || "";
+        const validatedUrl = validateImageUrl(rawAvatarUrl);
+        return {
+            type: p.type,
+            avatar: validatedUrl,
+            name: p.name || p.type,
+        };
+    })
+        .filter(p => p.avatar !== null) || []; // Filter out profiles with invalid avatars
+    return (_jsxs("div", { className: cn("b3-modal-avatar-editor flex w-full max-w-md flex-col bg-white", className), children: [viewStep === "upload" && _jsx(ModalHeader, { title: "Upload Image" }), _jsxs("div", { className: "flex flex-col items-center p-6", children: [viewStep === "select" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative mb-6", children: _jsx("div", { className: "h-32 w-32 overflow-hidden rounded-full", children: safePreviewUrl || selectedAvatar || currentAvatar ? (_jsx(IPFSMediaRenderer, { src: safePreviewUrl || selectedAvatar || currentAvatar || "", alt: "Avatar preview", className: "h-full w-full object-cover" })) : (_jsx("div", { className: "bg-b3-primary-wash h-full w-full" })) }) }), _jsxs("button", { onClick: handleUploadImageClick, className: "font-inter mb-6 flex w-full items-center justify-center gap-2 rounded-xl border border-[#e4e4e7] bg-white px-4 py-3 text-sm font-semibold text-[#18181b] shadow-sm transition-colors hover:bg-[#f4f4f5]", children: [_jsx(Upload, { className: "h-4 w-4" }), "Upload image"] }), _jsxs("div", { className: "w-full", children: [_jsx("h3", { className: "mb-2 text-base font-semibold text-[#18181b]", children: "Select your profile image" }), _jsx("p", { className: "mb-4 text-sm font-semibold text-[#475467]", children: "Pick an avatar from your linked profiles, ENS or upload a new one." }), _jsx("div", { className: "mb-4 flex gap-3", children: profileAvatars.map((profileAvatar, index) => {
+                                            // Skip if avatar is null (should not happen due to filter, but TypeScript doesn't know that)
+                                            if (!profileAvatar.avatar)
+                                                return null;
+                                            return (_jsxs("div", { className: "relative", onMouseEnter: () => setHoveredProfile(profileAvatar.type), onMouseLeave: () => setHoveredProfile(null), children: [_jsx("button", { onClick: () => handleProfileAvatarSelect(profileAvatar.avatar || "", profileAvatar.type || ""), className: cn("h-16 w-16 overflow-hidden rounded-full border-2 transition-all", selectedProfileType === profileAvatar.type
+                                                            ? "border-[#3368ef] ring-2 ring-[#3368ef]/20"
+                                                            : "border-transparent hover:border-[#e4e4e7]"), children: _jsx(IPFSMediaRenderer, { src: profileAvatar.avatar || "", alt: `${profileAvatar.type} avatar`, className: "h-full w-full object-cover" }) }), hoveredProfile === profileAvatar.type && (_jsx("div", { className: "absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-[#18181b] px-3 py-1.5 text-xs text-white", children: profileAvatar.name }))] }, profileAvatar.type + "-" + index));
+                                        }) }), _jsxs("button", { onClick: handleLinkMoreAccount, className: "b3-modal-link-more-account font-inter flex items-center gap-2 text-sm font-semibold text-[#3368ef] hover:underline", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", children: _jsx("path", { d: "M8.75 2.75C8.75 2.33579 8.41421 2 8 2C7.58579 2 7.25 2.33579 7.25 2.75V7.25H2.75C2.33579 7.25 2 7.58579 2 8C2 8.41421 2.33579 8.75 2.75 8.75H7.25V13.25C7.25 13.6642 7.58579 14 8 14C8.41421 14 8.75 13.6642 8.75 13.25V8.75H13.25C13.6642 8.75 14 8.41421 14 8C14 7.58579 13.6642 7.25 13.25 7.25H8.75V2.75Z", fill: "currentColor" }) }), "Link more accounts"] })] })] })) : (_jsx(_Fragment, { children: !selectedFile && !previewUrl ? (_jsxs("div", { onClick: handleOpenFilePicker, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, className: cn("b3-modal-upload-view mb-6 flex w-full cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-16 transition-colors", isDragging
+                                ? "border-[#3368ef] bg-[#f0f5ff]"
+                                : "border-[#e4e4e7] hover:border-[#3368ef] hover:bg-[#f0f5ff]"), children: [_jsxs("p", { className: "font-inter mb-1 text-sm", children: [_jsx("span", { className: "font-semibold text-[#3368ef]", children: "Click to upload" }), _jsx("span", { className: "text-[#71717a]", children: " or drag and drop" })] }), _jsx("p", { className: "text-xs text-[#71717a]", children: "PNG, JPG or GIF (up to 5MB)" })] })) : (_jsxs("div", { className: "mb-6 w-full", children: [_jsx("div", { className: "relative aspect-square w-full overflow-hidden rounded-xl bg-[#f4f4f5]", children: safePreviewUrl ? (_jsxs(_Fragment, { children: [_jsx(Cropper, { image: safePreviewUrl, crop: crop, zoom: zoom, aspect: 1, onCropChange: setCrop, onCropComplete: onCropComplete, onZoomChange: setZoom, cropShape: "rect", showGrid: false, style: {
+                                                    containerStyle: {
+                                                        width: "100%",
+                                                        height: "100%",
+                                                        backgroundColor: "#f4f4f5",
+                                                    },
+                                                    cropAreaStyle: {
+                                                        border: "2px solid #3368ef",
+                                                        borderRadius: "0px",
+                                                    },
+                                                } }), _jsx("button", { onClick: handleRemovePreview, className: "absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-[#51525c] text-white transition-colors hover:bg-[#71717a]", children: _jsx(X, { className: "h-4 w-4" }) })] })) : (_jsx("div", { className: "bg-b3-primary-wash h-full w-full" })) }), safePreviewUrl && (_jsxs("div", { className: "mt-4 flex items-center gap-3", children: [_jsx("label", { className: "shrink-0 text-sm font-semibold text-[#475467]", children: "Zoom" }), _jsx("input", { type: "range", min: 1, max: 3, step: 0.1, value: zoom, onChange: e => setZoom(Number(e.target.value)), className: "flex-1 accent-[#3368ef]" })] }))] })) })), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), _jsxs("div", { className: "font-inter flex gap-3 border-t border-[#e4e4e7] p-6 font-semibold", children: [_jsx(Button, { onClick: handleCancel, variant: "outline", disabled: isLoading, className: "flex-1 rounded-xl border-[#e4e4e7] text-[#18181b] hover:bg-[#f4f4f5]", children: "Cancel" }), _jsx(Button, { onClick: handleSaveChanges, disabled: isLoading || (!selectedFile && !selectedProfileType), className: "b3-modal-save-button flex-1 rounded-xl bg-[#3368ef] text-white hover:bg-[#2952cc]", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ("Save changes") })] })] }));
 }