@b3dotfun/sdk 0.0.65-alpha.0 → 0.0.65-test.3

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

@@ -10,16 +10,21 @@ import { useEffect, useRef } from "react";
 import { useSetActiveWallet } from "thirdweb/react";
 import { AvatarEditor } from "./AvatarEditor/AvatarEditor.js";
 import { useB3 } from "./B3Provider/useB3.js";
+import { Deposit } from "./Deposit/Deposit.js";
 import { LinkAccount } from "./LinkAccount/LinkAccount.js";
-import { ProfileEditor } from "./ProfileEditor/ProfileEditor.js";
+import { LinkNewAccount } from "./LinkAccount/LinkNewAccount.js";
 import { ManageAccount } from "./ManageAccount/ManageAccount.js";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions.js";
+import { Send } from "./Send/Send.js";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog.js";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer.js";
 const debug = debugB3React("B3DynamicModal");
 export function B3DynamicModal() {
-    const { isOpen, setB3ModalOpen, contentType, history, navigateBack } = useModalStore();
+    const isOpen = useModalStore(state => state.isOpen);
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const contentType = useModalStore(state => state.contentType);
+    const navigateBack = useModalStore(state => state.navigateBack);
     const { theme } = useB3();
     const isMobile = useIsMobile();
     const prevIsOpenRef = useRef(isOpen);
@@ -50,8 +55,10 @@ export function B3DynamicModal() {
         "anySpendSignatureMint",
         "anySpendBondKit",
         "linkAccount",
+        "linkNewAccount",
         "avatarEditor",
-        "profileEditor",
+        "deposit",
+        "send",
     ];
     const freestyleTypes = [
         "anySpendNft",
@@ -67,7 +74,7 @@ export function B3DynamicModal() {
     ];
     // Check if current content type is in freestyle types
     const isFreestyleType = freestyleTypes.includes(contentType?.type);
-    const hideCloseButton = isFreestyleType;
+    const hideCloseButton = true;
     // Build content class using cn utility
     // eslint-disable-next-line tailwindcss/no-custom-classname
     const contentClass = cn("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:px-6");
@@ -93,7 +100,7 @@ export function B3DynamicModal() {
             case "anySpendFundTournament":
                 return _jsx(AnySpendTournament, { ...contentType, mode: "modal", action: "fund" });
             case "anySpendOrderHistory":
-                return _jsx(OrderHistory, { onBack: () => { }, mode: "modal" });
+                return _jsx(OrderHistory, { ...contentType, mode: "modal" });
             case "anySpendStakeB3":
                 return _jsx(AnySpendStakeB3, { ...contentType, mode: "modal" });
             case "anySpendStakeB3ExactIn":
@@ -110,12 +117,16 @@ export function B3DynamicModal() {
                 return _jsx(AnySpendBondKit, { ...contentType });
             case "linkAccount":
                 return _jsx(LinkAccount, { ...contentType });
+            case "linkNewAccount":
+                return _jsx(LinkNewAccount, { ...contentType });
             case "anySpendDepositHype":
                 return _jsx(AnySpendDepositHype, { ...contentType, mode: "modal" });
             case "avatarEditor":
                 return _jsx(AvatarEditor, { onSetAvatar: contentType.onSuccess });
-            case "profileEditor":
-                return _jsx(ProfileEditor, { onSuccess: contentType.onSuccess });
+            case "deposit":
+                return _jsx(Deposit, {});
+            case "send":
+                return _jsx(Send, { ...contentType });
             // Add other modal types here
             default:
                 return null;
@@ -125,9 +136,9 @@ export function B3DynamicModal() {
     const ModalContent = isMobile ? DrawerContent : DialogContent;
     const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
     const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
-    return (_jsxs(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: [_jsxs(ModalContent, { className: cn(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", 
-                // Remove default width classes for avatar editor and profile editor
-                contentType?.type === "avatarEditor" || contentType?.type === "profileEditor"
-                    ? "!w-[90vw] !max-w-none" // Use !important to override default styles
-                    : "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }), (contentType?.type === "avatarEditor" || contentType?.type === "profileEditor") && (_jsx("button", { onClick: () => setB3ModalOpen(false), className: "fixed right-5 top-5 z-[100] cursor-pointer text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
+    return (_jsxs(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: [_jsxs(ModalContent, { className: cn(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", (contentType?.type === "manageAccount" ||
+                    contentType?.type === "deposit" ||
+                    contentType?.type === "send" ||
+                    contentType?.type === "avatarEditor") &&
+                    "p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [(!hideCloseButton || contentType?.showBackButton) && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), renderContent()] })] }), contentType?.type === "avatarEditor" && (_jsx("button", { onClick: () => setB3ModalOpen(false), className: "fixed right-5 top-5 z-[100] cursor-pointer text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 }

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

@@ -0,0 +1 @@
+export declare function Deposit(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend/constants/index.js";
+import { ALL_CHAINS } from "../../../../anyspend/utils/chain.js";
+import { useAccountWallet, useModalStore } from "../../../../global-account/react/index.js";
+import { TokenSelector } from "@relayprotocol/relay-kit-ui";
+import { ChevronDown, Copy } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { base } from "thirdweb/chains";
+import ModalHeader from "../ModalHeader/ModalHeader.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+// Coinbase logo SVG
+const CoinbaseLogo = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z", fill: "#0052FF" }), _jsx("path", { d: "M8.00065 11.3337C6.16065 11.3337 4.66732 9.84033 4.66732 8.00033C4.66732 6.16033 6.16065 4.66699 8.00065 4.66699C9.47399 4.66699 10.734 5.64699 11.1607 7.00033H13.2273C12.774 4.54699 10.6273 2.66699 8.00065 2.66699C5.05399 2.66699 2.66732 5.05366 2.66732 8.00033C2.66732 10.947 5.05399 13.3337 8.00065 13.3337C10.6273 13.3337 12.774 11.4537 13.2273 9.00033H11.1607C10.734 10.3537 9.47399 11.3337 8.00065 11.3337Z", fill: "white" })] }));
+export function Deposit() {
+    const { address } = useAccountWallet();
+    const navigateBack = useModalStore(state => state.navigateBack);
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const history = useModalStore(state => state.history);
+    const [selectedChainId, setSelectedChainId] = useState(base.id);
+    const [selectedToken, setSelectedToken] = useState({
+        address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
+        chainId: base.id,
+        decimals: 6,
+        symbol: "USDC",
+        name: "USD Coin",
+        metadata: {
+            logoURI: "https://assets.relay.link/icons/1/light/usdc.png",
+        },
+    });
+    // Get the selected chain object
+    const selectedChain = useMemo(() => ALL_CHAINS[selectedChainId], [selectedChainId]);
+    // Get all supported chains for the dropdown
+    const supportedChains = useMemo(() => Object.values(ALL_CHAINS), []);
+    // The deposit address is the user's active wallet address
+    const depositAddress = address || "0x0000000000000000000000000000000000000000";
+    const handleTokenSelect = (token) => {
+        setSelectedChainId(token.chainId);
+        setSelectedToken({
+            address: token.address,
+            chainId: token.chainId,
+            decimals: token.decimals,
+            metadata: { logoURI: token.logoURI },
+            name: token.name,
+            symbol: token.symbol,
+        });
+    };
+    const handleCopyAddress = async () => {
+        try {
+            await navigator.clipboard.writeText(depositAddress);
+            toast.success("Address copied to clipboard");
+        }
+        catch (error) {
+            toast.error("Failed to copy address");
+        }
+    };
+    return (_jsxs("div", { className: "flex w-full flex-col", children: [_jsx(ModalHeader, { title: "Deposit", showCloseButton: false }), _jsxs("div", { className: "flex flex-col pb-5 pt-5", children: [_jsx("div", { className: "mb-4 px-5", children: _jsx("p", { className: "font-neue-montreal-medium text-base leading-snug text-[#3f3f46]", children: "Send any accepted token and we'll convert it to B3 on Base for you to use." }) }), _jsxs("div", { className: "space-y-3 px-5", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1.5 block text-sm font-medium text-[#3f3f46]", children: "Chain" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { className: "flex h-10 w-full items-center justify-between rounded-lg border border-[#d1d1d6] bg-white px-2.5 py-2 transition-colors hover:bg-[#fafafa]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [selectedChain?.logoUrl && (_jsx("img", { src: selectedChain.logoUrl, alt: selectedChain.name, className: "h-6 w-6 rounded-full" })), _jsx("span", { className: "text-base text-[#18181b]", children: selectedChain?.name || "Select Chain" })] }), _jsx(ChevronDown, { className: "h-4 w-4 text-[#51525c]" })] }) }), _jsx(DropdownMenuContent, { className: "max-h-[300px] w-full overflow-y-auto", children: supportedChains.map(chain => (_jsx(DropdownMenuItem, { onClick: () => setSelectedChainId(chain.id), children: _jsxs("div", { className: "flex items-center gap-2", children: [chain.logoUrl && _jsx("img", { src: chain.logoUrl, alt: chain.name, className: "h-6 w-6 rounded-full" }), _jsx("span", { className: "text-[#18181b]", children: chain.name })] }) }, chain.id))) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1.5 block text-sm font-medium text-[#3f3f46]", children: "Accepted tokens" }), _jsx(TokenSelector, { address: address, chainIdsFilter: [selectedChainId], context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: [selectedChainId], multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs("button", { className: "flex h-10 w-full items-center justify-between rounded-lg border border-[#d1d1d6] bg-white px-2.5 py-2 transition-colors hover:bg-[#fafafa]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [selectedToken?.metadata?.logoURI && (_jsx("img", { src: selectedToken.metadata.logoURI, alt: selectedToken.symbol, className: "h-6 w-6 rounded-full" })), _jsx("span", { className: "text-base text-[#18181b]", children: selectedToken.symbol })] }), _jsx(ChevronDown, { className: "h-4 w-4 text-[#51525c]" })] }) })] })] }), _jsxs("div", { className: "mx-5 mt-4 flex items-start rounded-xl border border-[#e4e4e7] bg-[#fafafa]", children: [_jsxs("div", { className: "flex flex-1 flex-col items-center gap-2 px-5 pb-3 pt-5", children: [_jsx("div", { className: "flex w-full items-center justify-center", children: _jsx("div", { className: "w-full", children: _jsx("div", { className: "flex aspect-[144/146] w-full flex-col items-center justify-center overflow-hidden", children: _jsx(QRCodeSVG, { value: depositAddress, size: 144, level: "M" }) }) }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-semibold leading-[18px] text-[#0b57c2]", children: "SCAN WITH" }), _jsx(CoinbaseLogo, {})] })] }), _jsxs("div", { className: "relative flex flex-1 flex-col gap-2 self-stretch border-l border-[#e4e4e7] p-6", children: [_jsx("label", { className: "text-sm font-medium leading-5 text-[#3f3f46]", children: "Deposit address:" }), _jsxs("div", { className: "relative flex w-full flex-wrap items-center gap-2", children: [_jsx("p", { className: "h-[74px] flex-1 overflow-hidden text-ellipsis whitespace-pre-wrap break-all pr-6 text-base font-semibold leading-6 text-[#18181b]", children: depositAddress }), _jsx("button", { onClick: handleCopyAddress, className: "absolute bottom-0 right-0 h-4 w-4 transition-opacity hover:opacity-70", "aria-label": "Copy address", children: _jsx(Copy, { className: "h-full w-full text-[#51525c]" }) })] })] })] }), _jsx("div", { className: "mx-5 mt-4", children: _jsxs("p", { className: "font-neue-montreal-italic text-center text-sm leading-[1.3] text-[#3f3f46]", children: ["Do not send any tokens other than the ones specified.", _jsx("br", {}), "Tokens not accepted will not be converted."] }) }), _jsx("div", { className: "mt-4 px-5", children: _jsx(Button, { onClick: handleCopyAddress, className: "h-12 w-full rounded-xl bg-[#0c68e9] text-base font-semibold text-white shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18),inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] hover:bg-[#0b5fd4]", children: "Copy deposit address" }) })] })] }));
+}

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

@@ -0,0 +1,39 @@
+import type { ThirdwebClient } from "thirdweb";
+interface IPFSMediaRendererProps {
+    /** The source URL - can be IPFS URL (ipfs://...) or HTTP URL */
+    src: string | null | undefined;
+    /** Alt text for the media */
+    alt?: string;
+    /** CSS class name */
+    className?: string;
+    /** Thirdweb client instance (optional, uses default if not provided) */
+    client?: ThirdwebClient;
+    /** Width of the media */
+    width?: string | number;
+    /** Height of the media */
+    height?: string | number;
+    /** Controls property for video/audio */
+    controls?: boolean;
+    /** Style object */
+    style?: React.CSSProperties;
+}
+/**
+ * IPFSMediaRenderer - A wrapper around Thirdweb's MediaRenderer that configures
+ * the IPFS gateway URL to use our validated gateway.
+ *
+ * Features:
+ * - Configures MediaRenderer to use cloudflare-ipfs.com gateway
+ * - Gateway matches our allowed list in profileDisplay.ts
+ * - Provides fallback for missing sources
+ *
+ * @example
+ * ```tsx
+ * <IPFSMediaRenderer
+ *   src="ipfs://QmX..."
+ *   alt="Profile Avatar"
+ *   className="size-14 rounded-full"
+ * />
+ * ```
+ */
+export declare function IPFSMediaRenderer({ src, alt, className, client, width, height, controls, style, }: IPFSMediaRendererProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { client as defaultClient } from "../../../../shared/utils/thirdweb.js";
+import { MediaRenderer } from "thirdweb/react";
+// Primary IPFS gateway URL - matches our allowed list in profileDisplay.ts
+// Note: MediaRenderer expects the base gateway URL without /ipfs path
+const IPFS_GATEWAY_URL = "https://cloudflare-ipfs.com";
+/**
+ * IPFSMediaRenderer - A wrapper around Thirdweb's MediaRenderer that configures
+ * the IPFS gateway URL to use our validated gateway.
+ *
+ * Features:
+ * - Configures MediaRenderer to use cloudflare-ipfs.com gateway
+ * - Gateway matches our allowed list in profileDisplay.ts
+ * - Provides fallback for missing sources
+ *
+ * @example
+ * ```tsx
+ * <IPFSMediaRenderer
+ *   src="ipfs://QmX..."
+ *   alt="Profile Avatar"
+ *   className="size-14 rounded-full"
+ * />
+ * ```
+ */
+export function IPFSMediaRenderer({ src, alt = "Media", className, client = defaultClient, width, height, controls, style, }) {
+    // If no source, render fallback
+    if (!src) {
+        return (_jsx("div", { className: className, style: style, "aria-label": alt, children: _jsx("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: alt.charAt(0).toUpperCase() }) }) }));
+    }
+    // Convert IPFS URLs to HTTP gateway URLs if needed
+    // This handles both ipfs:// URLs and existing HTTP gateway URLs
+    return (_jsx(MediaRenderer, { src: src, client: client, alt: alt, className: className, width: width ? width.toString() : undefined, height: height ? height.toString() : undefined, controls: controls, style: style }));
+}

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

@@ -1,4 +1,6 @@
-import { LinkAccountModalProps } from "../../stores/useModalStore";
-export declare function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }: LinkAccountModalProps & {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+import { Chain } from "thirdweb";
+export declare const LinkAccount: ({ partnerId, onLogout, chain, }: {
+    partnerId: string;
+    onLogout?: () => void;
+    chain: Chain;
+}) => import("react/jsx-runtime").JSX.Element;