@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.0

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

@@ -16,15 +16,20 @@ import { AnySpendStakeUpsideExactIn } from "@b3dotfun/sdk/anyspend/react/compone
 import { useGlobalAccount, useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { AnimatePresence, motion } from "framer-motion";
 import { useEffect, useRef } from "react";
 import { useSetActiveWallet } from "thirdweb/react";
 import { AvatarEditor } from "./AvatarEditor/AvatarEditor";
 import { useB3 } from "./B3Provider/useB3";
+import { Deposit } from "./Deposit/Deposit";
 import { LinkAccount } from "./LinkAccount/LinkAccount";
-import { ProfileEditor } from "./ProfileEditor/ProfileEditor";
+import { LinkNewAccount } from "./LinkAccount/LinkNewAccount";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
+import NotificationsContent from "./ManageAccount/NotificationsContent";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
+import { Send } from "./Send/Send";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
+import { ToastContainer, useToastContext } from "./Toast/index";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer";
 import { AnySpendDepositUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendDepositUpside";
@@ -32,12 +37,16 @@ import { AnySpendDepositUpside } from "@b3dotfun/sdk/anyspend/react/components/A
 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);
   const { wallet } = useGlobalAccount();
   const setActiveWallet = useSetActiveWallet();
+  const { toasts, removeToast } = useToastContext();
 
   // anyspend cleanup global account chnages by setting account back
   useEffect(() => {
@@ -66,8 +75,11 @@ export function B3DynamicModal() {
     "anySpendSignatureMint",
     "anySpendBondKit",
     "linkAccount",
+    "linkNewAccount",
     "avatarEditor",
-    "profileEditor",
+    "deposit",
+    "send",
+    "notifications",
   ];
 
   const freestyleTypes = [
@@ -85,7 +97,7 @@ export function B3DynamicModal() {
 
   // Check if current content type is in freestyle types
   const isFreestyleType = freestyleTypes.includes(contentType?.type as string);
-  const hideCloseButton = isFreestyleType;
+  const hideCloseButton = true;
 
   // Build content class using cn utility
   // eslint-disable-next-line tailwindcss/no-custom-classname
@@ -95,7 +107,10 @@ export function B3DynamicModal() {
     fullWidthTypes.includes(contentType?.type as string) && "w-full",
     isFreestyleType && "b3-modal-freestyle",
     contentType?.type === "signInWithB3" && "p-0",
-    contentType?.type === "anySpend" && "md:px-6",
+    contentType?.type === "anySpend" && "md:p-0",
+    contentType?.type === "send" && "p-0",
+    contentType?.type === "manageAccount" && " md:p-0 md:pt-2",
+    contentType?.type === "linkAccount" && "md:p-0",
     // Add specific styles for avatar editor
     // contentType?.type === "avatarEditor_disabled" &&
     //   "h-[90dvh] w-[90vw] bg-black p-0 overflow-y-auto overflow-x-hidden max-md:-mt-8 max-md:rounded-t-xl",
@@ -123,7 +138,7 @@ export function B3DynamicModal() {
       case "anySpendFundTournament":
         return <AnySpendTournament {...contentType} mode="modal" action="fund" />;
       case "anySpendOrderHistory":
-        return <OrderHistory onBack={() => {}} mode="modal" />;
+        return <OrderHistory {...contentType} mode="modal" />;
       case "anySpendStakeB3":
         return <AnySpendStakeB3 {...contentType} mode="modal" />;
       case "anySpendStakeB3ExactIn":
@@ -142,14 +157,20 @@ export function B3DynamicModal() {
         return <AnySpendBondKit {...contentType} />;
       case "linkAccount":
         return <LinkAccount {...contentType} />;
+      case "linkNewAccount":
+        return <LinkNewAccount {...contentType} />;
       case "anySpendDepositHype":
         return <AnySpendDepositHype {...contentType} mode="modal" />;
       case "anySpendCollectorClubPurchase":
         return <AnySpendCollectorClubPurchase {...contentType} mode="modal" />;
       case "avatarEditor":
         return <AvatarEditor onSetAvatar={contentType.onSuccess} />;
-      case "profileEditor":
-        return <ProfileEditor onSuccess={contentType.onSuccess} />;
+      case "deposit":
+        return <Deposit />;
+      case "send":
+        return <Send {...contentType} />;
+      case "notifications":
+        return <NotificationsContent {...contentType} />;
       // Add other modal types here
       default:
         return null;
@@ -168,17 +189,21 @@ export function B3DynamicModal() {
           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",
+          (contentType?.type === "manageAccount" ||
+            contentType?.type === "deposit" ||
+            contentType?.type === "send" ||
+            contentType?.type === "avatarEditor" ||
+            contentType?.type === "notifications") &&
+            "p-0",
+          "mx-auto w-full max-w-md sm:max-w-lg",
         )}
         hideCloseButton={hideCloseButton}
       >
         <ModalTitle className="sr-only hidden">{contentType?.type || "Modal"}</ModalTitle>
         <ModalDescription className="sr-only hidden">{contentType?.type || "Modal Body"}</ModalDescription>
-        <div className={cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]")}>
-          {history.length > 0 && contentType?.showBackButton && (
+
+        <div className={cn("no-scrollbar flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]")}>
+          {!hideCloseButton && (
             <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"
@@ -199,13 +224,47 @@ export function B3DynamicModal() {
                   strokeLinejoin="round"
                 />
               </svg>
-              <span className="text-sm font-medium">Back</span>
+              <span className="font-inter text-sm font-semibold">Back</span>
             </button>
           )}
-          {renderContent()}
+          <div className="flex-1">{renderContent()}</div>
+
+          {/* Toast Container - Part of modal-inner-content layer */}
+          <AnimatePresence>
+            {toasts.length > 0 && (
+              <motion.div
+                initial={{ height: 0 }}
+                animate={{ height: "auto" }}
+                exit={{ height: 0 }}
+                transition={{ duration: 0.3, ease: "easeInOut" }}
+                className="toast-section relative z-10 overflow-hidden bg-white dark:border-gray-800 dark:bg-gray-900"
+              >
+                <motion.div
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  transition={{ duration: 0.2, delay: 0.1 }}
+                  className="p-4 pt-0"
+                >
+                  <ToastContainer toasts={toasts} onDismiss={removeToast} theme={theme} />
+                </motion.div>
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
       </ModalContent>
-      {(contentType?.type === "avatarEditor" || contentType?.type === "profileEditor") && (
+
+      {/* Animate inner container margin to cover branding when toasts appear */}
+      {isOpen && (
+        <style>{`
+          .modal-inner-content {
+            transition: margin-bottom 0.3s ease-in-out;
+            margin-bottom: ${toasts.length > 0 ? "0px" : "23px"} !important;
+          }
+        `}</style>
+      )}
+
+      {contentType?.type === "avatarEditor" && (
         <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"

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

@@ -13,7 +13,6 @@ import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import "@relayprotocol/relay-kit-ui/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useCallback, useEffect, useState } from "react";
-import { Toaster } from "sonner";
 import {
   getLastAuthProvider,
   ThirdwebProvider,
@@ -25,6 +24,7 @@ import { Account, Wallet } from "thirdweb/wallets";
 import { CreateConnectorFn, WagmiProvider } from "wagmi";
 import { ClientType, setClientType } from "../../../client-manager";
 import { StyleRoot } from "../StyleRoot";
+import { setToastContext, ToastProvider, useToastContext } from "../Toast/index";
 import { LocalSDKProvider } from "./LocalSDKProvider";
 import { B3Context, B3ContextType } from "./types";
 
@@ -53,7 +53,8 @@ export function B3Provider({
   environment,
   automaticallySetFirstEoa,
   simDuneApiKey,
-  toaster,
+  // deprecated since v0.0.87
+  toaster: _toaster,
   clientType = "rest",
   rpcUrls,
   partnerId,
@@ -96,24 +97,26 @@ export function B3Provider({
       <WagmiProvider config={wagmiConfig} reconnectOnMount={false}>
         <QueryClientProvider client={queryClient}>
           <TooltipProvider>
-            <LocalSDKProvider onConnectCallback={onConnect}>
-              <InnerProvider
-                accountOverride={accountOverride}
-                environment={environment}
-                theme={theme}
-                automaticallySetFirstEoa={!!automaticallySetFirstEoa}
-                clientType={clientType}
-                partnerId={partnerId}
-                createClientReferenceId={createClientReferenceId}
-              >
-                <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
-                  {children}
-                  {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
-                  <StyleRoot id="b3-root" />
-                  <Toaster theme={theme} position={toaster?.position} style={toaster?.style} />
-                </RelayKitProviderWrapper>
-              </InnerProvider>
-            </LocalSDKProvider>
+            <ToastProvider>
+              <LocalSDKProvider onConnectCallback={onConnect}>
+                <InnerProvider
+                  accountOverride={accountOverride}
+                  environment={environment}
+                  theme={theme}
+                  automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+                  clientType={clientType}
+                  partnerId={partnerId}
+                  createClientReferenceId={createClientReferenceId}
+                >
+                  <ToastContextConnector />
+                  <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
+                    {children}
+                    {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
+                    <StyleRoot id="b3-root" />
+                  </RelayKitProviderWrapper>
+                </InnerProvider>
+              </LocalSDKProvider>
+            </ToastProvider>
           </TooltipProvider>
         </QueryClientProvider>
       </WagmiProvider>
@@ -222,3 +225,20 @@ export function InnerProvider({
 const InnerProvider2 = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
 };
+
+/**
+ * Component to connect the toast context to the global toast API
+ */
+function ToastContextConnector() {
+  const toastContext = useToastContext();
+
+  useEffect(() => {
+    setToastContext({
+      addToast: toastContext.addToast,
+      removeToast: toastContext.removeToast,
+      clearAll: toastContext.clearAll,
+    });
+  }, [toastContext]);
+
+  return null;
+}

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

@@ -0,0 +1,208 @@
+import { RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend/constants";
+import type { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { ALL_CHAINS } from "@b3dotfun/sdk/anyspend/utils/chain";
+import { toast, useAccountWallet } from "@b3dotfun/sdk/global-account/react";
+import { TokenSelector } from "@relayprotocol/relay-kit-ui";
+import { ChevronDown, Copy } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { useMemo, useState } from "react";
+
+import { base } from "thirdweb/chains";
+import ModalHeader from "../ModalHeader/ModalHeader";
+import { Button } from "../ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+
+// Coinbase logo SVG
+const CoinbaseLogo = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <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"
+    />
+    <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"
+    />
+  </svg>
+);
+
+export function Deposit() {
+  const { address } = useAccountWallet();
+
+  const [selectedChainId, setSelectedChainId] = useState(base.id);
+  const [selectedToken, setSelectedToken] = useState<components["schemas"]["Token"]>({
+    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;
+
+  const handleTokenSelect = (token: any) => {
+    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 (
+    <div className="flex w-full flex-col">
+      <ModalHeader title="Deposit" showCloseButton={false} />
+
+      {/* Content */}
+      <div className="flex flex-col pb-5 pt-5">
+        {/* Header text */}
+        <div className="mb-4 px-5">
+          <p className="font-neue-montreal-medium text-base leading-snug text-[#3f3f46]">
+            Send any accepted token and we'll convert it to B3 on Base for you to use.
+          </p>
+        </div>
+
+        {/* Chain and Token Selectors */}
+        <div className="space-y-3 px-5">
+          {/* Chain Selector */}
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-[#3f3f46]">Chain</label>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <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]">
+                  <div className="flex items-center gap-2">
+                    {selectedChain?.logoUrl && (
+                      <img src={selectedChain.logoUrl} alt={selectedChain.name} className="h-6 w-6 rounded-full" />
+                    )}
+                    <span className="text-base text-[#18181b]">{selectedChain?.name || "Select Chain"}</span>
+                  </div>
+                  <ChevronDown className="h-4 w-4 text-[#51525c]" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="max-h-[300px] w-full overflow-y-auto">
+                {supportedChains.map(chain => (
+                  <DropdownMenuItem key={chain.id} onClick={() => setSelectedChainId(chain.id)}>
+                    <div className="flex items-center gap-2">
+                      {chain.logoUrl && <img src={chain.logoUrl} alt={chain.name} className="h-6 w-6 rounded-full" />}
+                      <span className="text-[#18181b]">{chain.name}</span>
+                    </div>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          {/* Accepted Tokens Selector */}
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-[#3f3f46]">Accepted tokens</label>
+            <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={
+                <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]">
+                  <div className="flex items-center gap-2">
+                    {selectedToken?.metadata?.logoURI && (
+                      <img
+                        src={selectedToken.metadata.logoURI}
+                        alt={selectedToken.symbol}
+                        className="h-6 w-6 rounded-full"
+                      />
+                    )}
+                    <span className="text-base text-[#18181b]">{selectedToken.symbol}</span>
+                  </div>
+                  <ChevronDown className="h-4 w-4 text-[#51525c]" />
+                </button>
+              }
+            />
+          </div>
+        </div>
+
+        {/* QR Code and Address Container */}
+        <div className="mx-5 mt-4 flex items-start rounded-xl border border-[#e4e4e7] bg-[#fafafa]">
+          {/* QR Code Section */}
+          <div className="flex flex-1 flex-col items-center gap-2 px-5 pb-3 pt-5">
+            <div className="flex w-full items-center justify-center">
+              <div className="w-full">
+                <div className="flex aspect-[144/146] w-full flex-col items-center justify-center overflow-hidden">
+                  <QRCodeSVG value={depositAddress || ""} size={144} level="M" />
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-semibold leading-[18px] text-[#0b57c2]">SCAN WITH</span>
+              <CoinbaseLogo />
+            </div>
+          </div>
+
+          {/* Deposit Address Section */}
+          <div className="relative flex flex-1 flex-col gap-2 self-stretch border-l border-[#e4e4e7] p-6">
+            <label className="text-sm font-medium leading-5 text-[#3f3f46]">Deposit address:</label>
+            <div className="relative flex w-full flex-wrap items-center gap-2">
+              <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]">
+                {depositAddress}
+              </p>
+              <button
+                onClick={handleCopyAddress}
+                className="absolute bottom-0 right-0 h-4 w-4 transition-opacity hover:opacity-70"
+                aria-label="Copy address"
+              >
+                <Copy className="h-full w-full text-[#51525c]" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Warning Text */}
+        <div className="mx-5 mt-4">
+          <p className="font-neue-montreal-italic text-center text-sm leading-[1.3] text-[#3f3f46]">
+            Do not send any tokens other than the ones specified.
+            <br />
+            Tokens not accepted will not be converted.
+          </p>
+        </div>
+
+        {/* Action Button */}
+        <div className="mt-4 px-5">
+          <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]"
+          >
+            Copy deposit address
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+"use client";
+
+import { client as defaultClient } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import type { ThirdwebClient } from "thirdweb";
+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";
+
+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 function IPFSMediaRenderer({
+  src,
+  alt = "Media",
+  className,
+  client = defaultClient,
+  width,
+  height,
+  controls,
+  style,
+}: IPFSMediaRendererProps) {
+  // If no source, render fallback
+  if (!src) {
+    return (
+      <div className={className} style={style} aria-label={alt}>
+        <div className="bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full">
+          <span className="text-b3-grey font-neue-montreal-semibold text-xs">{alt.charAt(0).toUpperCase()}</span>
+        </div>
+      </div>
+    );
+  }
+
+  // Convert IPFS URLs to HTTP gateway URLs if needed
+  // This handles both ipfs:// URLs and existing HTTP gateway URLs
+
+  return (
+    <MediaRenderer
+      src={src}
+      client={client}
+      alt={alt}
+      className={className}
+      width={width ? width.toString() : undefined}
+      height={height ? height.toString() : undefined}
+      controls={controls}
+      style={style}
+    />
+  );
+}