@b3dotfun/sdk 0.0.7-alpha.27 → 0.0.7-alpha.3

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

@@ -27,7 +27,7 @@ const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:backdrop-blur-none data-[state=open]:backdrop-blur-[20px]",
         "transition-all duration-300",
-        className,
+        className
       )}
       {...props}
     />
@@ -57,7 +57,7 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
               "data-[state=closed]:rotate-x-10 data-[state=open]:rotate-x-0",
               "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl",
               "ease-spring transition-all",
-              className,
+              className
             )}
             {...props}
           >
@@ -66,7 +66,7 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
               <DialogPrimitive.Close
                 className={cn(
                   "data-[state=open]:bg-accent data-[state=open]:text-b3-react-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400",
-                  closeBtnClassName,
+                  closeBtnClassName
                 )}
               >
                 <X className="h-5 w-5" />
@@ -76,7 +76,7 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
           </DialogPrimitive.Content>
         </DialogPortal>
       );
-    },
+    }
   );
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
@@ -127,5 +127,5 @@ export {
   DialogOverlay,
   DialogPortal,
   DialogTitle,
-  DialogTrigger,
+  DialogTrigger
 };

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

@@ -36,7 +36,7 @@ const DrawerContent = React.forwardRef<
         ref={ref}
         className={cn(
           "bg-b3-react-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border py-6",
-          className,
+          className
         )}
         {...props}
       >
@@ -93,5 +93,5 @@ export {
   DrawerOverlay,
   DrawerPortal,
   DrawerTitle,
-  DrawerTrigger,
+  DrawerTrigger
 };

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

@@ -10,16 +10,16 @@ export const GlareCardRounded = ({ children, className }: { children: React.Reac
   const state = useRef({
     glare: {
       x: 50,
-      y: 50,
+      y: 50
     },
     background: {
       x: 50,
-      y: 50,
+      y: 50
     },
     rotate: {
       x: 0,
-      y: 0,
-    },
+      y: 0
+    }
   });
   const containerStyle = {
     "--m-x": "50%",
@@ -35,7 +35,7 @@ export const GlareCardRounded = ({ children, className }: { children: React.Reac
     "--easing": "ease",
     "--transition": "var(--duration) var(--easing)",
     transition:
-      "transform var(--duration) var(--easing), opacity var(--duration) var(--easing), background var(--duration) var(--easing)",
+      "transform var(--duration) var(--easing), opacity var(--duration) var(--easing), background var(--duration) var(--easing)"
   } as any;
 
   const backgroundStyle = {
@@ -48,7 +48,7 @@ export const GlareCardRounded = ({ children, className }: { children: React.Reac
       "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",
+    backgroundBlendMode: "hue, hue, hue, overlay"
   };
 
   const updateStyles = () => {
@@ -71,7 +71,7 @@ export const GlareCardRounded = ({ children, className }: { children: React.Reac
       const initialPercentage = { x: 75, y: 75 }; // Example coordinates for initial animation
       const initialDelta = {
         x: initialPercentage.x - 50,
-        y: initialPercentage.y - 50,
+        y: initialPercentage.y - 50
       };
       const rotateFactor = 0.4;
 
@@ -109,7 +109,7 @@ export const GlareCardRounded = ({ children, className }: { children: React.Reac
   return (
     <div
       style={{
-        ...containerStyle,
+        ...containerStyle
       }}
       className="relative isolate h-auto w-full will-change-transform [contain:layout_style] [perspective:600px]"
       ref={refElement}
@@ -118,15 +118,15 @@ export const GlareCardRounded = ({ children, className }: { children: React.Reac
         const rect = event.currentTarget.getBoundingClientRect();
         const position = {
           x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
+          y: event.clientY - rect.top
         };
         const percentage = {
           x: (100 / rect.width) * position.x,
-          y: (100 / rect.height) * position.y,
+          y: (100 / rect.height) * position.y
         };
         const delta = {
           x: percentage.x - 50,
-          y: percentage.y - 50,
+          y: percentage.y - 50
         };
 
         const { background, rotate, glare } = state.current;
@@ -169,7 +169,7 @@ export const GlareCardRounded = ({ children, className }: { children: React.Reac
         <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)",
+            transition: "opacity var(--duration) var(--easing), background var(--duration) var(--easing)"
           }}
         />
         <div

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

@@ -9,16 +9,16 @@ export const GlareCard = ({ children, className }: { children: React.ReactNode;
   const state = useRef({
     glare: {
       x: 50,
-      y: 50,
+      y: 50
     },
     background: {
       x: 50,
-      y: 50,
+      y: 50
     },
     rotate: {
       x: 0,
-      y: 0,
-    },
+      y: 0
+    }
   });
   const containerStyle = {
     "--m-x": "50%",
@@ -34,7 +34,7 @@ export const GlareCard = ({ children, className }: { children: React.ReactNode;
     "--easing": "ease",
     "--transition": "var(--duration) var(--easing)",
     transition:
-      "transform var(--duration) var(--easing), opacity var(--duration) var(--easing), background var(--duration) var(--easing)",
+      "transform var(--duration) var(--easing), opacity var(--duration) var(--easing), background var(--duration) var(--easing)"
   } as any;
 
   const backgroundStyle = {
@@ -47,7 +47,7 @@ export const GlareCard = ({ children, className }: { children: React.ReactNode;
       "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",
+    backgroundBlendMode: "hue, hue, hue, overlay"
   };
 
   const updateStyles = () => {
@@ -65,7 +65,7 @@ export const GlareCard = ({ children, className }: { children: React.ReactNode;
   return (
     <div
       style={{
-        ...containerStyle,
+        ...containerStyle
       }}
       className="relative isolate h-auto w-full will-change-transform [contain:layout_style] [perspective:600px]"
       ref={refElement}
@@ -74,15 +74,15 @@ export const GlareCard = ({ children, className }: { children: React.ReactNode;
         const rect = event.currentTarget.getBoundingClientRect();
         const position = {
           x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
+          y: event.clientY - rect.top
         };
         const percentage = {
           x: (100 / rect.width) * position.x,
-          y: (100 / rect.height) * position.y,
+          y: (100 / rect.height) * position.y
         };
         const delta = {
           x: percentage.x - 50,
-          y: percentage.y - 50,
+          y: percentage.y - 50
         };
 
         const { background, rotate, glare } = state.current;
@@ -125,7 +125,7 @@ export const GlareCard = ({ children, className }: { children: React.ReactNode;
         <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)",
+            transition: "opacity var(--duration) var(--easing), background var(--duration) var(--easing)"
           }}
         />
         <div

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

@@ -10,10 +10,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
       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,
+        className
       )}
       style={{
-        boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.05)",
+        boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.05)"
       }}
       ref={ref}
       {...props}

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

@@ -22,7 +22,7 @@ const PopoverContent = React.forwardRef<
         sideOffset={sideOffset}
         className={cn(
           "bg-b3-react-popover text-as-primary z-50 rounded-md border p-4 shadow-md outline-none",
-          className,
+          className
         )}
         {...props}
       />

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

@@ -28,7 +28,7 @@ const ScrollBar = React.forwardRef<
       "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,
+      className
     )}
     {...props}
   >

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

@@ -18,7 +18,7 @@ export function TextLoop({
   interval = 2,
   transition = { duration: 0.3 },
   variants,
-  onIndexChange,
+  onIndexChange
 }: TextLoopProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const items = Children.toArray(children);
@@ -39,7 +39,7 @@ export function TextLoop({
   const motionVariants: Variants = {
     initial: { y: 20, opacity: 0 },
     animate: { y: 0, opacity: 1 },
-    exit: { y: -20, opacity: 0 },
+    exit: { y: -20, opacity: 0 }
   };
 
   return (

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

@@ -25,19 +25,19 @@ export function TextShimmer({ children, as: Component = "p", className, duration
         "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,
+        className
       )}
       initial={{ backgroundPosition: "100% center" }}
       animate={{ backgroundPosition: "0% center" }}
       transition={{
         repeat: Infinity,
         duration,
-        ease: "linear",
+        ease: "linear"
       }}
       style={
         {
           "--spread": `${dynamicSpread}px`,
-          backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
+          backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`
         } as React.CSSProperties
       }
     >

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

@@ -23,8 +23,8 @@ const TooltipContent: React.ForwardRefExoticComponent<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "bg-b3-react-popover text-b3-react-popover-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,
+      "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}
   />

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

@@ -7,8 +7,8 @@ async function fetchAccountAssets(address: string) {
     fetchSimpleHashData(`/v0/nfts/owners`, {
       chains: "b3,b3-sepolia,base",
       wallet_addresses: address,
-      count: true,
-    }),
+      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],
@@ -18,7 +18,7 @@ async function fetchAccountAssets(address: string) {
   ]);
 
   return {
-    nftResponse,
+    nftResponse
     //tokenResponse,
   };
 }
@@ -29,6 +29,6 @@ export function useAccountAssets(address?: string) {
     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
+    gcTime: 5 * 60 * 1000 // Keep unused data in cache for 5 minutes
   });
 }

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

@@ -72,8 +72,8 @@ export function useAccountWallet(): {
         ...account,
         ensName,
         meta: {
-          icon: avatarUrl || (isActiveSmartWallet ? smartWalletIcon : walletImage) || "",
-        },
+          icon: avatarUrl || (isActiveSmartWallet ? smartWalletIcon : walletImage) || ""
+        }
       },
 
       address: account?.address,
@@ -86,7 +86,7 @@ export function useAccountWallet(): {
       isActiveEOAWallet: isActiveEOAWallet,
 
       smartWalletIcon: smartWalletIcon,
-      eoaWalletIcon: walletImage,
+      eoaWalletIcon: walletImage
     }),
     [
       account,
@@ -97,14 +97,14 @@ export function useAccountWallet(): {
       isActiveEOAWallet,
       isActiveSmartWallet,
       smartWalletIcon,
-      walletImage,
-    ],
+      walletImage
+    ]
   );
 
-  useEffect(() => {
-    console.log(`account`, account);
-    console.log(`useAccountWallet`, res);
-  }, [account, res]);
+  // useEffect(() => {
+  //   console.log(`account`, account);
+  //   console.log(`useAccountWallet`, res);
+  // }, [account, res]);
 
   return res;
 }

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

@@ -11,14 +11,14 @@ export function useAddTWSessionKey({
   onSuccess,
   onError,
   refetchSigners,
-  chain,
+  chain
 }: {
   chain?: Chain;
   onSuccess: (
     transactionResult: { transactionHash: Hex } & {
       client: ThirdwebClient;
       chain: Chain;
-    },
+    }
   ) => void;
   onError: (error: Error) => void;
   refetchSigners: () => Promise<any>;
@@ -34,7 +34,7 @@ export function useAddTWSessionKey({
     approvedTargets,
     nativeTokenLimitPerTransaction,
     permissionStartTimestamp,
-    permissionEndTimestamp,
+    permissionEndTimestamp
   }: {
     sessionKeyAddress: Address;
     approvedTargets: Address[];
@@ -49,14 +49,14 @@ export function useAddTWSessionKey({
       approvedTargets,
       nativeTokenLimitPerTransaction,
       permissionStartTimestamp,
-      permissionEndTimestamp,
+      permissionEndTimestamp
     });
     try {
       const transaction = addSessionKey({
         contract: {
           client,
           chain,
-          address: account.address as `0x${string}`,
+          address: account.address as `0x${string}`
         },
         account,
         sessionKeyAddress,
@@ -64,8 +64,8 @@ export function useAddTWSessionKey({
           approvedTargets,
           nativeTokenLimitPerTransaction,
           permissionStartTimestamp,
-          permissionEndTimestamp,
-        },
+          permissionEndTimestamp
+        }
       });
 
       debug("@@ecosystem:newSessionKey:transaction:", transaction);

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

@@ -26,7 +26,7 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
   const { connect } = useConnect(partnerId, b3MainnetThirdWeb);
 
   const wallet = ecosystemWallet(ecosystemWalletId, {
-    partnerId: partnerId,
+    partnerId: partnerId
   });
 
   const { isLoading: useAutoConnectLoading } = useAutoConnect({
@@ -64,7 +64,7 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
         setIsAuthenticated(false);
         setUser();
       }
-    },
+    }
   });
 
   // Ensure isAuthenticating stays true until we're fully ready
@@ -121,6 +121,6 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
     isReady,
     wallet,
     preAuthenticate,
-    connect,
+    connect
   };
 }

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

@@ -11,14 +11,14 @@ const abi = [
     name: "balanceOf",
     outputs: [{ name: "", type: "uint256" }],
     stateMutability: "view",
-    type: "function",
-  },
+    type: "function"
+  }
 ] as const;
 
 // Create a public client for Base
 const client = createPublicClient({
   chain: base,
-  transport: http(),
+  transport: http()
 });
 
 async function fetchB3Balances(addresses: string[]): Promise<{
@@ -38,15 +38,15 @@ async function fetchB3Balances(addresses: string[]): Promise<{
           address: B3_TOKEN.address,
           abi,
           functionName: "balanceOf",
-          args: [address as `0x${string}`],
+          args: [address as `0x${string}`]
         });
 
         return {
           address,
           balance,
-          formatted: formatUnits(balance, B3_TOKEN.decimals),
+          formatted: formatUnits(balance, B3_TOKEN.decimals)
         };
-      }),
+      })
     );
 
     // Calculate total
@@ -55,7 +55,7 @@ async function fetchB3Balances(addresses: string[]): Promise<{
     return {
       totalBalance,
       formattedTotal: formatNumber(Number(formatUnits(totalBalance, B3_TOKEN.decimals))),
-      breakdown: balances,
+      breakdown: balances
     };
   } catch (error) {
     console.error("Error fetching B3 balances:", error);
@@ -68,7 +68,7 @@ export function useB3BalanceFromAddresses(
   options?: {
     enabled?: boolean;
     refetchInterval?: number;
-  },
+  }
 ) {
   // Normalize addresses to array
   const normalizedAddresses = Array.isArray(addresses)
@@ -84,7 +84,7 @@ export function useB3BalanceFromAddresses(
     queryFn: () => fetchB3Balances(normalizedAddresses),
     enabled: (options?.enabled ?? true) && normalizedAddresses.length > 0,
     refetchInterval: options?.refetchInterval ?? 30000, // Default 30s refresh
-    staleTime: 10000, // Consider data stale after 10s
+    staleTime: 10000 // Consider data stale after 10s
   });
 }
 

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

@@ -1,29 +1,35 @@
-import { ENS_GATEWAY_URL } from "@b3dotfun/sdk/shared/constants";
-import { useMemo } from "react";
+import bsmntApp from "@b3dotfun/sdk/global-account/bsmnt";
+import { B3_AUTH_COOKIE_NAME } from "@b3dotfun/sdk/shared/constants";
+import Cookies from "js-cookie";
+
+import { useCallback, useMemo } from "react";
 
 export const useB3EnsName = () => {
-  const registerEns = async (name: `${string}.b3.fun`, address: string, hash: string): Promise<Response> => {
-    const message = `Register "${name}"`;
-    const response = await fetch(ENS_GATEWAY_URL + "set", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        name: name,
-        owner: address.toLowerCase(),
-        addresses: { "60": address.toLowerCase() },
-        signature: {
-          message: message,
-          hash: hash,
+  const registerEns = useCallback(
+    async (username: string, message: string, hash: string) => {
+      if (!bsmntApp.authentication.authenticated) {
+        await bsmntApp.authentication.authenticate({
+          strategy: "b3-jwt",
+          accessToken: Cookies.get(B3_AUTH_COOKIE_NAME) || ""
+        });
+      }
+
+      const response = await bsmntApp.service("profiles").registerUsername(
+        {
+          username,
+          message,
+          hash
         },
-      }),
-    });
-    return response;
-  };
+        {}
+      );
+
+      return response;
+    },
+    [bsmntApp.authentication.authenticated]
+  );
 
-  const getEns = async (address: string) => {
-    const response = await fetch(`${ENS_GATEWAY_URL}address/${address}`);
+  const getEns = useCallback(async (address: string) => {
+    const response = await fetch(`https://ens-gateway.b3.fun/address/${address}`);
 
     if (!response.ok) {
       throw new Error(`Failed to fetch ENS name: ${response.statusText}`);
@@ -31,31 +37,13 @@ export const useB3EnsName = () => {
 
     const data = await response.json();
     return data as { name: string };
-  };
-
-  const lookupEnsName = async (name: `${string}.b3.fun`) => {
-    const response = await fetch(`${ENS_GATEWAY_URL}get/${name}`);
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch ENS lookup: ${response.statusText}`);
-    }
-
-    const data = await response.json();
-    return data as {
-      name: string;
-      owner: `0x${string}`;
-      addresses: Record<string, `0x${string}`>;
-      createdAt: number;
-      updatedAt: number;
-    };
-  };
+  }, []);
 
   return useMemo(
     () => ({
       registerEns,
-      getEns,
-      lookupEnsName,
+      getEns
     }),
-    [],
+    [registerEns, getEns]
   );
 };