@b3dotfun/sdk 0.0.1-alpha.1

package/src/global-account/react/components/ui/glare-card.tsx

@@ -0,0 +1,138 @@
+"use client";
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { useRef } from "react";
+
+export const GlareCard = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+  const isPointerInside = useRef(false);
+  const refElement = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const state = useRef({
+    glare: {
+      x: 50,
+      y: 50
+    },
+    background: {
+      x: 50,
+      y: 50
+    },
+    rotate: {
+      x: 0,
+      y: 0
+    }
+  });
+  const containerStyle = {
+    "--m-x": "50%",
+    "--m-y": "50%",
+    "--r-x": "0deg",
+    "--r-y": "0deg",
+    "--bg-x": "50%",
+    "--bg-y": "50%",
+    "--duration": "300ms",
+    "--foil-size": "100%",
+    "--opacity": "0",
+    "--radius": "13px",
+    "--easing": "ease",
+    "--transition": "var(--duration) var(--easing)",
+    transition:
+      "transform var(--duration) var(--easing), opacity var(--duration) var(--easing), background var(--duration) var(--easing)"
+  } as any;
+
+  const backgroundStyle = {
+    "--step": "5%",
+    "--foil-svg": `url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99994 3.419C2.99994 3.419 21.6142 7.43646 22.7921 12.153C23.97 16.8695 3.41838 23.0306 3.41838 23.0306' stroke='white' stroke-width='5' stroke-miterlimit='3.86874' stroke-linecap='round' style='mix-blend-mode:darken'/%3E%3C/svg%3E")`,
+    "--pattern": "var(--foil-svg) center/100% no-repeat",
+    "--rainbow":
+      "repeating-linear-gradient( 0deg,rgb(255,119,115) calc(var(--step) * 1),rgba(255,237,95,1) calc(var(--step) * 2),rgba(168,255,95,1) calc(var(--step) * 3),rgba(131,255,247,1) calc(var(--step) * 4),rgba(120,148,255,1) calc(var(--step) * 5),rgb(216,117,255) calc(var(--step) * 6),rgb(255,119,115) calc(var(--step) * 7) ) 0% var(--bg-y)/200% 700% no-repeat",
+    "--diagonal":
+      "repeating-linear-gradient( 128deg,#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,10%,60%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12% ) var(--bg-x) var(--bg-y)/300% no-repeat",
+    "--shade":
+      "radial-gradient( farthest-corner circle at var(--m-x) var(--m-y),rgba(255,255,255,0.1) 12%,rgba(255,255,255,0.15) 20%,rgba(255,255,255,0.25) 120% ) var(--bg-x) var(--bg-y)/300% no-repeat",
+    backgroundBlendMode: "hue, hue, hue, overlay"
+  };
+
+  const updateStyles = () => {
+    if (refElement.current) {
+      const { background, rotate, glare } = state.current;
+      refElement.current?.style.setProperty("--m-x", `${glare.x}%`);
+      refElement.current?.style.setProperty("--m-y", `${glare.y}%`);
+      refElement.current?.style.setProperty("--r-x", `${rotate.x}deg`);
+      refElement.current?.style.setProperty("--r-y", `${rotate.y}deg`);
+      refElement.current?.style.setProperty("--bg-x", `${background.x}%`);
+      refElement.current?.style.setProperty("--bg-y", `${background.y}%`);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        ...containerStyle
+      }}
+      className="relative isolate h-auto w-full will-change-transform [contain:layout_style] [perspective:600px]"
+      ref={refElement}
+      onPointerMove={event => {
+        const rotateFactor = 0.4;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const position = {
+          x: event.clientX - rect.left,
+          y: event.clientY - rect.top
+        };
+        const percentage = {
+          x: (100 / rect.width) * position.x,
+          y: (100 / rect.height) * position.y
+        };
+        const delta = {
+          x: percentage.x - 50,
+          y: percentage.y - 50
+        };
+
+        const { background, rotate, glare } = state.current;
+        background.x = 50 + percentage.x / 4 - 12.5;
+        background.y = 50 + percentage.y / 3 - 16.67;
+        rotate.x = -(delta.x / 3.5);
+        rotate.y = delta.y / 2;
+        rotate.x *= rotateFactor;
+        rotate.y *= rotateFactor;
+        glare.x = percentage.x;
+        glare.y = percentage.y;
+
+        updateStyles();
+      }}
+      onPointerEnter={() => {
+        isPointerInside.current = true;
+        if (refElement.current) {
+          setTimeout(() => {
+            if (isPointerInside.current) {
+              refElement.current?.style.setProperty("--duration", "0s");
+            }
+          }, 300);
+        }
+      }}
+      onPointerLeave={() => {
+        isPointerInside.current = false;
+        if (refElement.current) {
+          refElement.current.style.removeProperty("--duration");
+          refElement.current?.style.setProperty("--r-x", `0deg`);
+          refElement.current?.style.setProperty("--r-y", `0deg`);
+        }
+      }}
+    >
+      <div className="grid h-full w-full origin-center overflow-hidden rounded-[var(--radius)] border border-black/50 will-change-transform [transform:rotateY(var(--r-x))_rotateX(var(--r-y))] hover:filter-none hover:[--duration:200ms] hover:[--easing:linear] hover:[--opacity:0.1]">
+        <div className="grid h-full w-full mix-blend-soft-light [clip-path:inset(0_0_0_0_round_var(--radius))] [grid-area:1/1]">
+          <div ref={contentRef} className={cn("h-full w-full bg-slate-950 object-cover", className)}>
+            {children}
+          </div>
+        </div>
+        <div
+          className="grid h-full w-full opacity-[var(--opacity)] mix-blend-soft-light [grid-area:1/1] [background:radial-gradient(farthest-corner_circle_at_var(--m-x)_var(--m-y),_rgba(255,255,255,0.8)_10%,_rgba(255,255,255,0.65)_20%,_rgba(255,255,255,0)_90%)] [clip-path:inset(0_0_1px_0_round_var(--radius))]"
+          style={{
+            transition: "opacity var(--duration) var(--easing), background var(--duration) var(--easing)"
+          }}
+        />
+        <div
+          className="relative grid h-full w-full opacity-[var(--opacity)] mix-blend-color-dodge transition-opacity [grid-area:1/1] [clip-path:inset(0_0_1px_0_round_var(--radius))] [background-blend-mode:hue_hue_hue_overlay] [background:var(--pattern),_var(--rainbow),_var(--diagonal),_var(--shade)] after:bg-[inherit] after:mix-blend-exclusion after:content-[''] after:[background-blend-mode:soft-light,_hue,_hard-light] after:[background-position:center,_0%_var(--bg-y),_calc(var(--bg-x)*_-1)_calc(var(--bg-y)*_-1),_var(--bg-x)_var(--bg-y)] after:[background-size:var(--foil-size),_200%_400%,_800%,_200%]"
+          style={{ ...backgroundStyle }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/global-account/react/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@b3dotfun/sdk/shared/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "border-b3-react-border bg-b3-react-background ring-offset-b3-react-background placeholder:text-b3-react-muted-foreground focus-visible:ring-b3-react-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      style={{
+        boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.05)"
+      }}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };

package/src/global-account/react/components/ui/popover.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import StyleRoot from "../StyleRoot";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <StyleRoot>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-b3-react-popover text-as-primary z-50 rounded-md border p-4 shadow-md outline-none",
+          className
+        )}
+        {...props}
+      />
+    </StyleRoot>
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverContent, PopoverTrigger };

package/src/global-account/react/components/ui/scroll-area.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+
+import { cn } from "@b3dotfun/sdk/shared/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/global-account/react/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse-fade bg-b3-react-background rounded-md", className)} {...props} />;
+}
+
+export { Skeleton };

package/src/global-account/react/components/ui/text-loop.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { AnimatePresence, motion, Transition, Variants } from "framer-motion";
+import { Children, useEffect, useState } from "react";
+
+type TextLoopProps = {
+  children: React.ReactNode[];
+  className?: string;
+  interval?: number;
+  transition?: Transition;
+  variants?: Variants;
+  onIndexChange?: (index: number) => void;
+};
+
+export function TextLoop({
+  children,
+  className,
+  interval = 2,
+  transition = { duration: 0.3 },
+  variants,
+  onIndexChange
+}: TextLoopProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const items = Children.toArray(children);
+
+  useEffect(() => {
+    const intervalMs = interval * 1000;
+
+    const timer = setInterval(() => {
+      setCurrentIndex(current => {
+        const next = (current + 1) % items.length;
+        onIndexChange?.(next);
+        return next;
+      });
+    }, intervalMs);
+    return () => clearInterval(timer);
+  }, [items.length, interval, onIndexChange]);
+
+  const motionVariants: Variants = {
+    initial: { y: 20, opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: -20, opacity: 0 }
+  };
+
+  return (
+    <div className={cn("relative inline-block whitespace-nowrap", className)}>
+      <AnimatePresence mode="popLayout" initial={false}>
+        <motion.div
+          key={currentIndex}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          transition={transition}
+          variants={variants || motionVariants}
+        >
+          {items[currentIndex]}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/global-account/react/components/ui/text-shimmer.tsx

@@ -0,0 +1,47 @@
+"use client";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { motion } from "framer-motion";
+import React, { type JSX, useMemo } from "react";
+
+interface TextShimmerProps {
+  children: string;
+  as?: React.ElementType;
+  className?: string;
+  duration?: number;
+  spread?: number;
+}
+
+export function TextShimmer({ children, as: Component = "p", className, duration = 2, spread = 2 }: TextShimmerProps) {
+  const MotionComponent = motion.create(Component as keyof JSX.IntrinsicElements);
+
+  const dynamicSpread = useMemo(() => {
+    return children.length * spread;
+  }, [children, spread]);
+
+  return (
+    <MotionComponent
+      className={cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text",
+        "text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        "dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]",
+        className
+      )}
+      initial={{ backgroundPosition: "100% center" }}
+      animate={{ backgroundPosition: "0% center" }}
+      transition={{
+        repeat: Infinity,
+        duration,
+        ease: "linear"
+      }}
+      style={
+        {
+          "--spread": `${dynamicSpread}px`,
+          backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </MotionComponent>
+  );
+}

package/src/global-account/react/components/ui/tooltip.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+
+const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps> = TooltipPrimitive.Provider;
+
+const Tooltip: React.FC<TooltipPrimitive.TooltipProps> = TooltipPrimitive.Root;
+
+const TooltipTrigger: React.ForwardRefExoticComponent<
+  TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>
+> = TooltipPrimitive.Trigger;
+
+const TooltipContent: React.ForwardRefExoticComponent<
+  Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>
+> = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "bg-popover text-popover-b3-react-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/global-account/react/components/ui/transition-panel.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { AnimatePresence, MotionProps, Transition, Variant, motion } from "framer-motion";
+
+type TransitionPanelProps = {
+  children: React.ReactNode[];
+  className?: string;
+  transition?: Transition;
+  activeIndex: number;
+  variants?: { enter: Variant; center: Variant; exit: Variant };
+} & MotionProps;
+
+export function TransitionPanel({
+  children,
+  className,
+  transition,
+  variants,
+  activeIndex,
+  ...motionProps
+}: TransitionPanelProps) {
+  return (
+    <div className={cn("relative", className)}>
+      <AnimatePresence initial={false} mode="popLayout" custom={motionProps.custom}>
+        <motion.div
+          key={activeIndex}
+          variants={variants}
+          transition={transition}
+          initial="enter"
+          animate="center"
+          exit="exit"
+          {...motionProps}
+        >
+          {children[activeIndex]}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/global-account/react/hooks/useAccountAssets.ts

@@ -0,0 +1,34 @@
+import { fetchSimpleHashData } from "@b3dotfun/sdk/shared/utils/simplehash";
+import { useQuery } from "@tanstack/react-query";
+async function fetchAccountAssets(address: string) {
+  if (!address) throw new Error("Address is required");
+
+  const [nftResponse] = await Promise.all([
+    fetchSimpleHashData(`/v0/nfts/owners`, {
+      chains: "b3,b3-sepolia,base",
+      wallet_addresses: address,
+      count: true
+    })
+    // we are not using the tokenResponse anywhere in the app, let's not call it, if we don't need it
+    // getERC20Balances(address, {
+    //   chainIds: [8333, 1993, 8453, 84532],
+    //   includeSpam: false,
+    //   metadata: true,
+    // }),
+  ]);
+
+  return {
+    nftResponse
+    //tokenResponse,
+  };
+}
+
+export function useAccountAssets(address?: string) {
+  return useQuery({
+    queryKey: ["accountAssets", address],
+    queryFn: () => fetchAccountAssets(address!),
+    enabled: Boolean(address),
+    staleTime: 30 * 1000, // Consider data fresh for 30 seconds
+    gcTime: 5 * 60 * 1000 // Keep unused data in cache for 5 minutes
+  });
+}

package/src/global-account/react/hooks/useAccountWallet.tsx

@@ -0,0 +1,110 @@
+import { useB3 } from "@b3dotfun/sdk/global-account";
+import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
+import { useEffect, useMemo, useState } from "react";
+import { getLastAuthProvider, useActiveWallet, useConnectedWallets, useWalletImage } from "thirdweb/react";
+import { Account, Wallet } from "thirdweb/wallets";
+import { socialIcons } from "thirdweb/wallets/in-app";
+import { useBsmntProfile } from "./useBsmntProfile";
+
+function useLastAuthProvider(): string | null {
+  const [lastAuthProvider, setLastAuthProvider] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fn = async () => {
+      const provider = await getLastAuthProvider();
+      setLastAuthProvider(provider);
+    };
+    fn();
+  }, []);
+
+  return lastAuthProvider;
+}
+
+export function useAccountWallet(): {
+  wallet: {
+    address?: string;
+    ensName?: string;
+    meta?: {
+      icon: string;
+    };
+  } & Partial<Account>;
+
+  address?: string;
+  ensName?: string;
+
+  connectedSmartWallet?: Wallet;
+  connectedEOAWallet?: Wallet;
+
+  isActiveSmartWallet?: boolean;
+  isActiveEOAWallet?: boolean;
+
+  eoaWalletIcon?: string;
+  smartWalletIcon?: string;
+} {
+  const { account } = useB3();
+
+  const activeWallet = useActiveWallet();
+
+  const connectedWallets = useConnectedWallets();
+
+  const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === ecosystemWalletId);
+  const connectedEOAWallet = connectedWallets.find(wallet => wallet.id !== ecosystemWalletId);
+  const isActiveSmartWallet = activeWallet?.id === connectedSmartWallet?.id;
+  const isActiveEOAWallet = activeWallet?.id === connectedEOAWallet?.id;
+
+  const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
+
+  // If not EOA sign in, then we need to show the smart wallet icon
+  const lastAuthProvider = useLastAuthProvider();
+
+  const smartWalletIcon =
+    lastAuthProvider && !connectedEOAWallet
+      ? socialIcons[lastAuthProvider as keyof typeof socialIcons]
+      : "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
+
+  const { data: profileData } = useBsmntProfile({ address: account?.address });
+  const ensName = profileData?.username?.replaceAll(".b3.fun", "");
+  const avatarUrl = profileData?.avatar;
+
+  const res = useMemo(
+    () => ({
+      wallet: {
+        ...account,
+        ensName,
+        meta: {
+          icon: avatarUrl || (isActiveSmartWallet ? smartWalletIcon : walletImage) || ""
+        }
+      },
+
+      address: account?.address,
+      ensName,
+
+      connectedSmartWallet: connectedSmartWallet,
+      connectedEOAWallet: connectedEOAWallet,
+
+      isActiveSmartWallet: isActiveSmartWallet,
+      isActiveEOAWallet: isActiveEOAWallet,
+
+      smartWalletIcon: smartWalletIcon,
+      eoaWalletIcon: walletImage
+    }),
+    [
+      account,
+      avatarUrl,
+      connectedEOAWallet,
+      connectedSmartWallet,
+      ensName,
+      isActiveEOAWallet,
+      isActiveSmartWallet,
+      smartWalletIcon,
+      walletImage
+    ]
+  );
+
+  // useEffect(() => {
+  //   console.log(`account`, account);
+  //   console.log(`useAccountWallet`, res);
+  // }, [account, res]);
+
+  return res;
+}

package/src/global-account/react/hooks/useAddTWSessionKey.tsx

@@ -0,0 +1,85 @@
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import createDebug from "debug";
+import { Chain, Hex, sendTransaction, ThirdwebClient } from "thirdweb";
+import { addSessionKey } from "thirdweb/extensions/erc4337";
+import { useActiveAccount } from "thirdweb/react";
+import { Address } from "viem";
+
+const debug = createDebug("@@b3:useHandleTWConnect");
+
+export function useAddTWSessionKey({
+  onSuccess,
+  onError,
+  refetchSigners,
+  chain
+}: {
+  chain?: Chain;
+  onSuccess: (
+    transactionResult: { transactionHash: Hex } & {
+      client: ThirdwebClient;
+      chain: Chain;
+    }
+  ) => void;
+  onError: (error: Error) => void;
+  refetchSigners: () => Promise<any>;
+}) {
+  if (!chain) {
+    throw new Error("Chain is required");
+  }
+
+  const account = useActiveAccount();
+
+  const newSessionKey = async ({
+    sessionKeyAddress,
+    approvedTargets,
+    nativeTokenLimitPerTransaction,
+    permissionStartTimestamp,
+    permissionEndTimestamp
+  }: {
+    sessionKeyAddress: Address;
+    approvedTargets: Address[];
+    nativeTokenLimitPerTransaction: number;
+    permissionStartTimestamp: Date;
+    permissionEndTimestamp: Date;
+  }) => {
+    if (!account || !chain) return;
+
+    debug("@@newSessionKey:", {
+      sessionKeyAddress,
+      approvedTargets,
+      nativeTokenLimitPerTransaction,
+      permissionStartTimestamp,
+      permissionEndTimestamp
+    });
+    try {
+      const transaction = addSessionKey({
+        contract: {
+          client,
+          chain,
+          address: account.address as `0x${string}`
+        },
+        account,
+        sessionKeyAddress,
+        permissions: {
+          approvedTargets,
+          nativeTokenLimitPerTransaction,
+          permissionStartTimestamp,
+          permissionEndTimestamp
+        }
+      });
+
+      debug("@@ecosystem:newSessionKey:transaction:", transaction);
+
+      const transactionResult = await sendTransaction({ transaction, account });
+      debug("@@ecosystem:newSessionKey:transactionResult:", transactionResult);
+      onSuccess(transactionResult);
+
+      await refetchSigners();
+    } catch (error) {
+      onError(error as Error);
+      console.error("@@ecosystem:newSessionKey:error:", error);
+    }
+  };
+
+  return { newSessionKey };
+}