@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.0

package/src/global-account/react/components/SignInWithB3/SignIn.tsx

@@ -1,4 +1,5 @@
 import {
+  IPFSMediaRenderer,
   SignInWithB3,
   SignInWithB3ModalProps,
   StyleRoot,
@@ -12,7 +13,8 @@ import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { cn, truncateAddress } from "@b3dotfun/sdk/shared/utils";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
 import { ReactNode, useEffect } from "react";
-import { useConnectedWallets, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { useConnectedWallets, useSetActiveWallet } from "thirdweb/react";
+import { useAccountWalletImage } from "../../hooks/useAccountWallet";
 import { ManageAccountButton } from "../custom/ManageAccountButton";
 
 type SignInProps = {
@@ -31,7 +33,6 @@ export function SignIn(props: SignInWithB3Props) {
   const { className } = props;
   const { automaticallySetFirstEoa, partnerId } = useB3();
   const {
-    wallet,
     address: globalAddress,
     ensName,
     connectedSmartWallet,
@@ -44,14 +45,12 @@ export function SignIn(props: SignInWithB3Props) {
 
   const isMobile = useIsMobile();
   const { logout } = useAuthentication(partnerId);
-  const onDisconnect = async () => {
+  const onDisconnect = async (): Promise<void> => {
     await logout();
   };
 
   const connectedWallets = useConnectedWallets();
 
-  const { data: walletInfo } = useWalletInfo(isActiveSmartWallet ? connectedSmartWallet?.id : connectedEOAWallet?.id);
-
   const setActiveWallet = useSetActiveWallet();
 
   const handleSetActiveAccount = (selectedWalletId: string | undefined) => {
@@ -73,17 +72,19 @@ export function SignIn(props: SignInWithB3Props) {
     }
   }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
 
+  const walletImage = useAccountWalletImage();
+
   // Desktop version - original dropdown menu
   return (
     <StyleRoot>
       <Menu className={`relative flex items-center ${className || ""}`} as="div">
         {globalAddress ? (
           <>
-            <MenuButton className="bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3">
-              {!!wallet.meta?.icon && (
-                <img
-                  src={wallet.meta.icon}
-                  alt={wallet.meta.icon}
+            <MenuButton className="bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none">
+              {!!walletImage && (
+                <IPFSMediaRenderer
+                  src={walletImage}
+                  alt="Wallet Image"
                   className="bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100"
                 />
               )}
@@ -98,7 +99,7 @@ export function SignIn(props: SignInWithB3Props) {
               leaveTo="scale-95 opacity-0"
             >
               <MenuItems
-                className="b3-root absolute -right-4 top-full min-w-64 rounded-2xl border lg:right-0"
+                className="b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0"
                 modal={false}
                 // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
                 anchor={isMobile ? "top end" : undefined}
@@ -120,7 +121,7 @@ export function SignIn(props: SignInWithB3Props) {
                         <div className="ml-4 grow">
                           {ensName && <div>{ensName}</div>}
                           <div>{truncateAddress(globalAddress)}</div>
-                          <div>{walletInfo?.name}</div>
+                          {/* <div>{walletInfo?.name}</div> */}
                         </div>
                       </div>
                       {isActiveEOAWallet && <Icon className="fill-b3-react-primary" name="check" />}

package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx

@@ -217,7 +217,7 @@ export function SignInWithB3Flow({
   if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
     return (
       <LoginStepContainer partnerId={partnerId}>
-        <div className="mt-8 flex items-center justify-center">
+        <div className="my-8 flex min-h-[350px] items-center justify-center">
           <Loading variant="white" size="lg" />
         </div>
       </LoginStepContainer>

package/src/global-account/react/components/Toast/README.md

@@ -0,0 +1,350 @@
+# B3 Toast System
+
+A custom toast notification system that renders inside the B3DynamicModal with full Sonner API compatibility.
+
+## Features
+
+- ✅ **Modal-Integrated**: Toasts appear inside the modal at the bottom
+- ✅ **Sonner API Compatible**: Drop-in replacement for `sonner` package
+- ✅ **Theme Support**: Respects light/dark theme from B3Provider
+- ✅ **Auto-Dismiss**: Configurable duration with manual dismiss
+- ✅ **Animated**: Smooth entry/exit with Framer Motion
+- ✅ **TypeScript**: Full type safety
+
+## Usage
+
+### Basic Usage
+
+```typescript
+import { toast } from "@b3dotfun/sdk/global-account/react";
+
+// Success toast
+toast.success("Transaction completed!");
+
+// Error toast
+toast.error("Transaction failed");
+
+// Info toast
+toast.info("Processing transaction...");
+
+// Warning toast
+toast.warning("Low balance");
+```
+
+### With Options
+
+```typescript
+// Custom duration (in milliseconds)
+toast.success("Message", { duration: 5000 });
+
+// Infinite duration (won't auto-dismiss)
+toast.error("Critical error", { duration: Infinity });
+```
+
+### Manual Dismiss
+
+```typescript
+// Dismiss specific toast
+const toastId = toast.success("Loading...");
+toast.dismiss(toastId);
+
+// Dismiss all toasts
+toast.dismiss();
+```
+
+## Architecture
+
+### Components
+
+#### `ToastProvider`
+
+Wraps the application to provide toast context. Already integrated into `B3Provider`.
+
+```typescript
+import { ToastProvider } from "@b3dotfun/sdk/global-account/react";
+
+<ToastProvider>
+  <App />
+</ToastProvider>
+```
+
+#### `Toast`
+
+Renders a single toast notification with type-specific styling and icons.
+
+#### `ToastContainer`
+
+Renders a list of toasts with animations. Used internally by `B3DynamicModal`.
+
+### Context
+
+#### `useToastContext()`
+
+Access toast context directly in components.
+
+```typescript
+import { useToastContext } from "@b3dotfun/sdk/global-account/react";
+
+function MyComponent() {
+  const { toasts, addToast, removeToast, clearAll } = useToastContext();
+
+  return <div>Active toasts: {toasts.length}</div>;
+}
+```
+
+### Global API
+
+#### `toast`
+
+Global singleton API matching Sonner's interface.
+
+**Methods:**
+
+- `toast.success(message, options?)` - Show success toast
+- `toast.error(message, options?)` - Show error toast
+- `toast.info(message, options?)` - Show info toast
+- `toast.warning(message, options?)` - Show warning toast
+- `toast.dismiss(toastId?)` - Dismiss toast(s)
+
+**Options:**
+
+- `duration?: number` - Auto-dismiss duration in ms (default: 4000)
+
+## Toast Types
+
+| Type      | Color  | Icon      | Usage                  |
+| --------- | ------ | --------- | ---------------------- |
+| `success` | Green  | Checkmark | Successful operations  |
+| `error`   | Red    | X         | Failed operations      |
+| `info`    | Blue   | Info      | Informational messages |
+| `warning` | Yellow | Warning   | Warnings               |
+
+## Theming
+
+Toasts automatically adapt to the theme set in `B3Provider`:
+
+```typescript
+<B3Provider theme="dark">
+  {/* Toasts will use dark theme */}
+</B3Provider>
+```
+
+**Light Theme:**
+
+- Lighter backgrounds
+- Darker text
+- Softer borders
+
+**Dark Theme:**
+
+- Darker backgrounds
+- Lighter text
+- Glowing borders
+
+## Integration
+
+### In B3DynamicModal
+
+Toasts are automatically rendered at the bottom of the modal:
+
+```
+┌─────────────────────────┐
+│   Modal Content         │
+│                         │
+│   [Content Area]        │
+│                         │
+├─────────────────────────┤ ← Border separator
+│   [Toast 1]             │
+│   [Toast 2]             │
+└─────────────────────────┘
+```
+
+The modal automatically expands to accommodate toasts.
+
+### Position
+
+Toasts are positioned:
+
+- At the bottom of the modal
+- Above the modal border
+- Below main content
+- Full width with padding
+
+## Examples
+
+### Success After Transaction
+
+```typescript
+const handleTransaction = async () => {
+  try {
+    const tx = await sendTransaction();
+    toast.success(`Transaction successful! Hash: ${tx.hash}`);
+  } catch (error) {
+    toast.error(`Transaction failed: ${error.message}`);
+  }
+};
+```
+
+### Loading State
+
+```typescript
+const handleLongOperation = async () => {
+  const toastId = toast.info("Processing...", { duration: Infinity });
+
+  try {
+    await longOperation();
+    toast.dismiss(toastId);
+    toast.success("Operation completed!");
+  } catch (error) {
+    toast.dismiss(toastId);
+    toast.error("Operation failed");
+  }
+};
+```
+
+### Multiple Toasts
+
+```typescript
+// Show multiple toasts at once
+toast.success("Account created");
+toast.info("Sending welcome email...");
+toast.warning("Complete your profile");
+```
+
+## Migration from Sonner
+
+### Before
+
+```typescript
+import { toast } from "@b3dotfun/sdk/global-account/react";
+
+toast.success("Success!");
+```
+
+### After
+
+```typescript
+import { toast } from "@b3dotfun/sdk/global-account/react";
+
+toast.success("Success!"); // Same API!
+```
+
+See `MIGRATION_GUIDE_TOAST.md` for detailed migration instructions.
+
+## Fallback Behavior
+
+If `ToastProvider` is not in the component tree, the toast API automatically falls back to Sonner (if available) or logs to console. This ensures graceful degradation.
+
+## Testing
+
+```typescript
+import { render, screen } from "@testing-library/react";
+import { ToastProvider } from "@b3dotfun/sdk/global-account/react";
+import { toast } from "@b3dotfun/sdk/global-account/react";
+
+test("shows toast notification", async () => {
+  render(
+    <ToastProvider>
+      <MyComponent />
+    </ToastProvider>
+  );
+
+  toast.success("Test message");
+
+  // Toast will be visible in the component tree
+});
+```
+
+See `__tests__/toast.test.tsx` for more examples.
+
+## Troubleshooting
+
+### Toasts not appearing
+
+1. Ensure `ToastProvider` is in component tree (already done in `B3Provider`)
+2. Check that modal is open (toasts only show in modal)
+3. Verify theme is set correctly
+
+### Toasts appearing outside modal
+
+If toasts appear outside the modal, you may be:
+
+1. Using Sonner directly instead of our toast API
+2. Missing the `ToastProvider` wrapper
+
+### Styling issues
+
+1. Check that theme prop is passed to `B3Provider`
+2. Verify Tailwind CSS is configured correctly
+3. Ensure all required CSS classes are available
+
+## API Reference
+
+### Types
+
+```typescript
+type ToastType = "success" | "error" | "info" | "warning";
+
+interface ToastItem {
+  id: string;
+  type: ToastType;
+  message: string;
+  duration?: number;
+  createdAt: number;
+}
+
+interface ToastOptions {
+  duration?: number;
+}
+```
+
+### Functions
+
+```typescript
+// Add toast
+function toast.success(message: string, options?: ToastOptions): string;
+function toast.error(message: string, options?: ToastOptions): string;
+function toast.info(message: string, options?: ToastOptions): string;
+function toast.warning(message: string, options?: ToastOptions): string;
+
+// Remove toast
+function toast.dismiss(toastId?: string): void;
+```
+
+### Hooks
+
+```typescript
+function useToastContext(): {
+  toasts: ToastItem[];
+  addToast: (type: ToastType, message: string, duration?: number) => string;
+  removeToast: (id: string) => void;
+  clearAll: () => void;
+};
+```
+
+## Performance
+
+- Lightweight context-based state management
+- Automatic cleanup of dismissed toasts
+- No memory leaks with timeout management
+- Smooth animations using Framer Motion
+- Minimal re-renders with selective context usage
+
+## Accessibility
+
+- Toast messages use semantic colors
+- Icons provide visual indicators
+- Text is readable in both themes
+- Close buttons are keyboard accessible
+- ARIA attributes for screen readers (coming soon)
+
+## Future Enhancements
+
+- [ ] Queue management (limit simultaneous toasts)
+- [ ] Custom actions in toasts (undo, retry, etc.)
+- [ ] Progress indicators
+- [ ] Sound/haptic feedback
+- [ ] Persistence across navigation
+- [ ] ARIA live regions for accessibility
+- [ ] Custom toast components
+- [ ] Position variants (top, bottom, etc.)

package/src/global-account/react/components/Toast/ToastComponents.tsx

@@ -0,0 +1,159 @@
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { AnimatePresence, motion } from "framer-motion";
+import type { ToastItem, ToastType } from "./ToastContext";
+
+interface ToastProps {
+  toast: ToastItem;
+  onDismiss: (id: string) => void;
+  theme?: "light" | "dark";
+}
+
+const getToastIcon = (type: ToastType) => {
+  switch (type) {
+    case "success":
+      return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M16.6666 5L7.49998 14.1667L3.33331 10"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    case "error":
+      return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M15 5L5 15M5 5L15 15"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    case "info":
+      return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M10 13.3333V10M10 6.66667H10.0083M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10Z"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    case "warning":
+      return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M10 6.66667V10M10 13.3333H10.0083M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10Z"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+  }
+};
+
+const getToastStyles = (type: ToastType, theme: "light" | "dark" = "light") => {
+  const isDark = theme === "dark";
+
+  const baseStyles = "flex items-start gap-3 p-4 rounded-xl border shadow-sm";
+
+  switch (type) {
+    case "success":
+      return cn(
+        baseStyles,
+        isDark ? "bg-green-950/50 border-green-800/50 text-green-100" : "bg-green-50 border-green-200 text-green-900",
+      );
+    case "error":
+      return cn(
+        baseStyles,
+        isDark ? "bg-red-950/50 border-red-800/50 text-red-100" : "bg-red-50 border-red-200 text-red-900",
+      );
+    case "info":
+      return cn(
+        baseStyles,
+        isDark ? "bg-blue-950/50 border-blue-800/50 text-blue-100" : "bg-blue-50 border-blue-200 text-blue-900",
+      );
+    case "warning":
+      return cn(
+        baseStyles,
+        isDark
+          ? "bg-yellow-950/50 border-yellow-800/50 text-yellow-100"
+          : "bg-yellow-50 border-yellow-200 text-yellow-900",
+      );
+  }
+};
+
+const getIconColorClass = (type: ToastType, theme: "light" | "dark" = "light") => {
+  const isDark = theme === "dark";
+
+  switch (type) {
+    case "success":
+      return isDark ? "text-green-400" : "text-green-600";
+    case "error":
+      return isDark ? "text-red-400" : "text-red-600";
+    case "info":
+      return isDark ? "text-blue-400" : "text-blue-600";
+    case "warning":
+      return isDark ? "text-yellow-400" : "text-yellow-600";
+  }
+};
+
+export function Toast({ toast, onDismiss, theme = "light" }: ToastProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -20, scale: 0.95 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, y: -10, scale: 0.95 }}
+      transition={{ duration: 0.2 }}
+      className={getToastStyles(toast.type, theme)}
+    >
+      <div className={cn("mt-0.5 shrink-0", getIconColorClass(toast.type, theme))}>{getToastIcon(toast.type)}</div>
+      <p className="font-inter flex-1 text-sm font-medium">{toast.message}</p>
+      <button
+        onClick={() => onDismiss(toast.id)}
+        className={cn(
+          "shrink-0 transition-opacity hover:opacity-70",
+          theme === "dark" ? "text-gray-400" : "text-gray-500",
+        )}
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M12 4L4 12M4 4L12 12"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+    </motion.div>
+  );
+}
+
+interface ToastContainerProps {
+  toasts: ToastItem[];
+  onDismiss: (id: string) => void;
+  theme?: "light" | "dark";
+  className?: string;
+}
+
+export function ToastContainer({ toasts, onDismiss, theme = "light", className }: ToastContainerProps) {
+  return (
+    <div className={cn("w-full space-y-2", className)}>
+      <AnimatePresence mode="popLayout">
+        {toasts.map(toast => (
+          <Toast key={toast.id} toast={toast} onDismiss={onDismiss} theme={theme} />
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/global-account/react/components/Toast/ToastContext.tsx

@@ -0,0 +1,86 @@
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+
+export type ToastType = "success" | "error" | "info" | "warning";
+
+export interface ToastItem {
+  id: string;
+  type: ToastType;
+  message: string;
+  duration?: number;
+  createdAt: number;
+}
+
+interface ToastContextType {
+  toasts: ToastItem[];
+  addToast: (type: ToastType, message: string, duration?: number) => string;
+  removeToast: (id: string) => void;
+  clearAll: () => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+let globalToastCounter = 0;
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const timeoutsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
+
+  const removeToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(toast => toast.id !== id));
+    const timeout = timeoutsRef.current.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      timeoutsRef.current.delete(id);
+    }
+  }, []);
+
+  const addToast = useCallback(
+    (type: ToastType, message: string, duration = 4000) => {
+      const id = `toast-${Date.now()}-${globalToastCounter++}`;
+      const newToast: ToastItem = {
+        id,
+        type,
+        message,
+        duration,
+        createdAt: Date.now(),
+      };
+
+      setToasts(prev => [...prev, newToast]);
+
+      if (duration > 0) {
+        const timeout = setTimeout(() => {
+          removeToast(id);
+        }, duration);
+        timeoutsRef.current.set(id, timeout);
+      }
+
+      return id;
+    },
+    [removeToast],
+  );
+
+  const clearAll = useCallback(() => {
+    timeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+    timeoutsRef.current.clear();
+    setToasts([]);
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    const timeouts = timeoutsRef.current;
+    return () => {
+      timeouts.forEach(timeout => clearTimeout(timeout));
+      timeouts.clear();
+    };
+  }, []);
+
+  return <ToastContext.Provider value={{ toasts, addToast, removeToast, clearAll }}>{children}</ToastContext.Provider>;
+}
+
+export function useToastContext() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToastContext must be used within ToastProvider");
+  }
+  return context;
+}

package/src/global-account/react/components/Toast/index.ts

@@ -0,0 +1,4 @@
+export { setToastContext, toast } from "./toastApi";
+export { Toast, ToastContainer } from "./ToastComponents";
+export { ToastProvider, useToastContext } from "./ToastContext";
+export type { ToastItem, ToastType } from "./ToastContext";