@b3dotfun/sdk 0.0.1-alpha.1

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../../../global-account/react/components/custom/Button";
+import { CopyToClipboard } from "../../../../global-account/react/components/custom/CopyToClipboard";
+import { useAccountAssets } from "../../../../global-account/react/hooks/useAccountAssets";
+import useAuthentication from "../../../../global-account/react/hooks/useAuthentication";
+import { useB3BalanceFromAddresses } from "../../../../global-account/react/hooks/useB3BalanceFromAddresses";
+import { useGetAllTWSigners } from "../../../../global-account/react/hooks/useGetAllTWSigners";
+import { useNativeBalance } from "../../../../global-account/react/hooks/useNativeBalance";
+import { useRemoveSessionKey } from "../../../../global-account/react/hooks/useRemoveSessionKey";
+import { useModalStore } from "../../../../global-account/react/stores/useModalStore";
+import { formatAddress } from "../../../../shared/utils/formatAddress";
+import { formatNumber } from "../../../../shared/utils/formatNumber";
+import { ArrowRightLeft } from "lucide-react";
+import { useState } from "react";
+import { useActiveAccount } from "thirdweb/react";
+import { formatUnits } from "viem";
+import { AccountAssets } from "../AccountAssets/AccountAssets";
+import { Tabs, TabsContent, TabsList, TabTrigger } from "../ui/Tabs";
+function centerTruncate(str, length = 4) {
+    if (str.length <= length * 2)
+        return str;
+    return `${str.slice(0, length)}...${str.slice(-length)}`;
+}
+export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId }) {
+    const [activeTab, setActiveTab] = useState("balance");
+    const [revokingSignerId, setRevokingSignerId] = useState(null);
+    const account = useActiveAccount();
+    const { data: assets, isLoading } = useAccountAssets(account?.address);
+    const { data: b3Balance } = useB3BalanceFromAddresses(account?.address);
+    const { data: nativeBalance } = useNativeBalance(account?.address);
+    const { data: signers, refetch: refetchSigners } = useGetAllTWSigners({
+        chain,
+        accountAddress: account?.address
+    });
+    const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+    const { logout } = useAuthentication(partnerId);
+    const [logoutLoading, setLogoutLoading] = useState(false);
+    console.log("@@assets", assets);
+    const { removeSessionKey } = useRemoveSessionKey({
+        chain,
+        onSuccess: tx => {
+            console.log("@@removeSessionKey:tx", tx);
+            setRevokingSignerId(null);
+        },
+        onError: error => {
+            console.error("Error revoking access:", error);
+            setRevokingSignerId(null);
+        },
+        refetchSigners: () => refetchSigners()
+    });
+    const handleRevoke = async (signer) => {
+        setRevokingSignerId(signer.id);
+        await removeSessionKey(signer);
+    };
+    const onLogoutEnhanced = async () => {
+        setLogoutLoading(true);
+        await logout();
+        onLogout?.();
+        setB3ModalOpen(false);
+        setLogoutLoading(false);
+    };
+    const BalanceContent = () => (_jsxs("div", { className: "flex h-full flex-col items-center justify-between gap-8", children: [_jsx("div", { className: "w-full", children: _jsxs("div", { className: "border-b3-react-border bg-b3-react-subtle flex flex-col rounded-lg border p-4", children: [_jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-6 w-6" }), _jsx("h2", { className: "font-neue-montreal-bold text-b3-react-primary text-lg", children: "Global Account" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-b3-react-secondary-foreground text-sm", children: "Your universal account for all B3-powered apps" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-b3-react-muted-foreground font-mono text-sm", children: centerTruncate(account?.address || "", 6) }), _jsx(CopyToClipboard, { text: account?.address || "" })] })] })] }) }), _jsxs("div", { className: "border-b3-react-border bg-b3-react-subtle w-full rounded-lg border p-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", className: "h-10 w-10" }), _jsxs("span", { className: "font-neue-montreal-bold text-2xl", children: [b3Balance?.formattedTotal || "--", " B3"] })] }), _jsx("div", { className: "border-b3-react-border my-4 border-t" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", className: "h-10 w-10" }), _jsxs("span", { className: "font-neue-montreal-bold text-2xl", children: [nativeBalance?.formattedTotal || "--", " ETH"] })] })] }), _jsxs("div", { className: "flex w-full gap-4", children: [_jsx(Button, { className: "font-neue-montreal-medium flex-1", onClick: () => {
+                            setB3ModalOpen(true);
+                            setB3ModalContentType({
+                                type: "anySpend",
+                                defaultActiveTab: "fiat",
+                                showBackButton: true
+                            });
+                        }, children: "Deposit" }), _jsxs(Button, { variant: "default", className: "font-neue-montreal-medium flex-1", onClick: () => {
+                            setB3ModalOpen(true);
+                            setB3ModalContentType({
+                                type: "anySpend",
+                                showBackButton: true
+                            });
+                        }, children: [_jsx(ArrowRightLeft, { className: "mr-2 h-4 w-4" }), "Swap"] })] })] }));
+    const AssetsContent = () => (_jsx("div", { className: "bg-b3-react-card border-b3-react-border rounded-lg border p-4", children: _jsx(AccountAssets, { nfts: assets?.nftResponse, isLoading: isLoading }) }));
+    const AppsContent = () => (_jsxs("div", { className: "bg-b3-react-card border-b3-react-border rounded-lg border p-4", children: [signers?.map((signer) => (_jsxs("div", { className: "border-b3-react-border flex items-center justify-between border-b py-4 last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "bg-b3-react-muted flex h-8 w-8 items-center justify-center rounded-full", children: _jsx("span", { className: "text-b3-react-muted-foreground text-xs", children: "App" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-neue-montreal-bold mb-2 text-base", children: signer.partner.name }), _jsxs("div", { className: "text-b3-react-muted-foreground flex flex-col gap-1.5", children: [_jsxs("span", { className: "text-b3-react-muted-foreground font-mono text-xs", children: ["Added: ", new Date(signer.createdAt).toLocaleDateString()] }), _jsxs("span", { className: "text-b3-react-muted-foreground font-mono text-xs", children: ["Expires: ", new Date(Number(signer.endTimestamp) * 1000).toLocaleDateString()] }), _jsxs("span", { className: "text-b3-react-muted-foreground font-mono text-xs", children: ["Max spend: ", formatNumber(Number(formatUnits(signer.nativeTokenLimitPerTransaction, 18))), " ETH"] }), _jsxs("span", { className: "text-b3-react-muted-foreground font-mono text-xs", children: ["Approved Contracts: ", signer.approvedTargets.map(formatAddress).join(", ")] })] })] })] }), _jsx(Button, { variant: "outline", size: "sm", className: "h-8 border-0 bg-red-500/80 px-4 text-xs font-medium text-white hover:bg-red-600/90", onClick: () => handleRevoke(signer), disabled: revokingSignerId === signer.id, children: revokingSignerId === signer.id ? "Revoking..." : "Revoke" })] }, signer.id))), !signers?.length && _jsx("div", { className: "text-b3-react-muted-foreground py-8 text-center", children: "No connected apps" })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsx("div", { className: "flex-1", children: _jsxs(Tabs, { defaultValue: activeTab, onValueChange: setActiveTab, children: [_jsxs(TabsList, { className: "mb-4 w-full", children: [_jsx(TabTrigger, { value: "balance", className: "font-neue-montreal-bold text-base", children: "Balance" }), _jsx(TabTrigger, { value: "assets", className: "font-neue-montreal-bold text-base", children: "NFTs" }), _jsx(TabTrigger, { value: "apps", className: "font-neue-montreal-bold text-base", children: "Apps" })] }), _jsx(TabsContent, { value: "balance", children: _jsx(BalanceContent, {}) }), _jsx(TabsContent, { value: "assets", children: _jsx(AssetsContent, {}) }), _jsx(TabsContent, { value: "apps", children: _jsx(AppsContent, {}) })] }) }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "border-b3-react-border border-t" }), _jsx(Button, { variant: "outline", size: "sm", className: "font-neue-montreal-medium text-b3-react-muted-foreground hover:text-b3-react-foreground", onClick: onLogoutEnhanced, children: logoutLoading ? "Logging out..." : "Logout" })] })] }));
+}

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

@@ -0,0 +1,17 @@
+import type { JSX } from "react";
+import { Chain } from "thirdweb";
+import { Account } from "thirdweb/wallets";
+interface MintButtonProps {
+    contractAddress: string;
+    quantity?: number;
+    chain: Chain;
+    account: Account;
+    to: `0x${string}`;
+    tokenId?: number;
+    className?: string;
+    children?: string | JSX.Element;
+    onSuccess?: (tx: `0x${string}`) => void;
+    onError?: (error: Error) => void;
+}
+export declare function MintButton({ contractAddress, quantity, chain, account, to, tokenId, className, children, onSuccess, onError }: MintButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../../../../global-account/react/components/custom/Button";
+import { useClaim } from "../../../../global-account/react/hooks/useClaim";
+import { client } from "../../../../shared/utils/thirdweb";
+import { useActiveAccount } from "thirdweb/react";
+import { smartWallet } from "thirdweb/wallets";
+export function MintButton({ contractAddress, quantity = 1, chain, account, to, tokenId, className, children = "Mint", onSuccess, onError }) {
+    const ecoSystemWallet = useActiveAccount();
+    console.log("@@ecoSystemWallet", ecoSystemWallet);
+    const { claim, isMinting } = useClaim({
+        contractAddress,
+        quantity,
+        chain,
+        to,
+        tokenId
+    });
+    const smartAccountWithSignerOverride = ecoSystemWallet?.address !== to;
+    const handleMint = async () => {
+        try {
+            if (smartAccountWithSignerOverride) {
+                const wallet = smartWallet({
+                    chain,
+                    sponsorGas: true,
+                    overrides: {
+                        accountAddress: ecoSystemWallet?.address
+                    }
+                });
+                const smartAccountWithSigner = await wallet.connect({
+                    client,
+                    personalAccount: account
+                });
+                const tx = await claim(smartAccountWithSigner);
+                onSuccess?.(tx);
+            }
+            else {
+                const tx = await claim(account);
+                onSuccess?.(tx);
+            }
+        }
+        catch (error) {
+            console.error("Error minting:", error);
+            onError?.(error);
+            throw error;
+        }
+    };
+    const buttonText = isMinting ? "Minting..." : String(children);
+    return (_jsx(Button, { onClick: handleMint, disabled: isMinting, className: className, children: buttonText }));
+}

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

@@ -0,0 +1,127 @@
+"use strict";
+// "use client";
+// import { AnimatePresence, motion } from "framer-motion";
+// import { useEffect, useState } from "react";
+// import ClientOnly from "./custom/ClientOnly";
+// interface ProfileAvatarProps {
+//   avatarId: string;
+//   timestamp?: number;
+// }
+// // this function was taken from b3-shared
+// function createUrlFromAvatarId(avatarId: string, extension: string = "png"): string {
+//   if (extension === "png") {
+//     return `https://avatars.basement.fun/${avatarId}.png`;
+//   }
+//   return `https://models.readyplayer.me/${avatarId}.${extension}`;
+// }
+// // Sub component for the avatar image
+// const ProfileAvatar = ({ avatarId, timestamp }: ProfileAvatarProps) => {
+//   const [avatarLoading, setAvatarLoading] = useState(true);
+//   const [avatarError, setAvatarError] = useState(false);
+//   const [ReadyPlayerMeAvatar, setReadyPlayerMeAvatar] = useState<any>(null);
+//   const [Vector3, setVector3] = useState<any>(null);
+//   const [dependenciesLoaded, setDependenciesLoaded] = useState(false);
+//   // Dynamically import dependencies only when component is used
+//   useEffect(() => {
+//     let isMounted = true;
+//     const loadDependencies = async () => {
+//       try {
+//         const [visageModule, threeModule] = await Promise.all([
+//           // @ts-ignore - Optional peer dependency
+//           import("@readyplayerme/visage"),
+//           // @ts-ignore - Optional peer dependency
+//           import("three")
+//         ]);
+//         if (isMounted) {
+//           setReadyPlayerMeAvatar(() => visageModule.Avatar);
+//           setVector3(() => threeModule.Vector3);
+//           setDependenciesLoaded(true);
+//         }
+//       } catch (error) {
+//         console.warn("ProfileAvatar: 3D dependencies not available, falling back to 2D avatar:", error);
+//         if (isMounted) {
+//           setAvatarLoading(false);
+//           setDependenciesLoaded(false);
+//         }
+//       }
+//     };
+//     loadDependencies();
+//     return () => {
+//       isMounted = false;
+//     };
+//   }, []);
+//   if (!avatarId) {
+//     return (
+//       <div className="flex h-full w-full items-center justify-center">
+//         <p className="text-white/50">No avatar available</p>
+//       </div>
+//     );
+//   }
+//   return (
+//     <AnimatePresence mode="wait">
+//       {(avatarLoading || !dependenciesLoaded) && !avatarError && (
+//         <motion.img
+//           key="avatar-image"
+//           src={`https://models.readyplayer.me/${avatarId}.png?camera=fullbody&size=1024&expression=happy&t=${timestamp || ""}`}
+//           alt="avatar"
+//           className="absolute left-0 top-0 h-full w-full object-cover"
+//           initial={{ opacity: 0 }}
+//           animate={{ opacity: 1 }}
+//           exit={{ opacity: 0 }}
+//           transition={{ duration: 0.3, ease: "easeInOut" }}
+//           onError={() => setAvatarError(true)}
+//         />
+//       )}
+//       {dependenciesLoaded && (
+//         <ClientOnly>
+//           <motion.div
+//             key={`avatar-3d-${timestamp}`}
+//             className="absolute left-0 top-0 h-full w-full"
+//             initial={{ opacity: 0 }}
+//             animate={{ opacity: avatarLoading ? 0 : 1 }}
+//             exit={{ opacity: 0 }}
+//             transition={{ duration: 0.3, ease: "easeInOut" }}
+//           >
+//             {ReadyPlayerMeAvatar && Vector3 && (
+//               <ReadyPlayerMeAvatar
+//                 animationSrc="https://readyplayerme-assets.s3.amazonaws.com/animations/visage/male-idle.glb"
+//                 onLoadedAnimation={{
+//                   src: "https://readyplayerme-assets.s3.amazonaws.com/animations/visage/male-spawn-animation.fbx",
+//                   loop: 4
+//                 }}
+//                 modelSrc={createUrlFromAvatarId(avatarId, "glb")}
+//                 idleRotation={true}
+//                 headMovement={true}
+//                 scale={0.9}
+//                 keyLightColor="#bca1f4"
+//                 keyLightIntensity={1}
+//                 fillLightColor="#8d4cf6"
+//                 fov={50}
+//                 emotion={{
+//                   browInnerUp: 0.3,
+//                   browOuterUpLeft: 0.37,
+//                   browOuterUpRight: 0.49,
+//                   eyeSquintLeft: 0.4,
+//                   eyeSquintRight: 0.2,
+//                   mouthShrugUpper: 0.27,
+//                   mouthSmileLeft: 0.37,
+//                   mouthSmileRight: 0.36
+//                 }}
+//                 cameraZoomTarget={new Vector3(0, 0.1, 3.2)}
+//                 cameraInitialDistance={3.2}
+//                 cameraTarget={1.55}
+//                 className="h-full w-full"
+//                 onLoaded={() => {
+//                   setAvatarLoading(false);
+//                   setAvatarError(false);
+//                 }}
+//                 shadows
+//               />
+//             )}
+//           </motion.div>
+//         </ClientOnly>
+//       )}
+//     </AnimatePresence>
+//   );
+// };
+// export default ProfileAvatar;

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

@@ -0,0 +1,4 @@
+export declare function RelayKitProviderWrapper({ isMainnet, children }: {
+    isMainnet: boolean;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { RelayKitProvider } from "@reservoir0x/relay-kit-ui";
+import { fetchChainConfigs, MAINNET_RELAY_API, TESTNET_RELAY_API } from "@reservoir0x/relay-sdk";
+import { useEffect, useState } from "react";
+export function RelayKitProviderWrapper({ isMainnet, children }) {
+    const [relayChains, setRelayChains] = useState([]);
+    useEffect(() => {
+        const fetchChains = async () => {
+            const chains = await fetchChainConfigs(isMainnet ? MAINNET_RELAY_API : TESTNET_RELAY_API);
+            setRelayChains(chains);
+        };
+        fetchChains();
+    }, [isMainnet]);
+    return (_jsx(RelayKitProvider, { options: {
+            baseApiUrl: isMainnet ? MAINNET_RELAY_API : TESTNET_RELAY_API,
+            source: "anyspend",
+            duneConfig: {
+                apiKey: "OkvN2bWlBPwXkvtmnTeYMQR1hYZBGDJt",
+                apiBaseUrl: "https://api.dune.com"
+            },
+            chains: relayChains,
+            privateChainIds: undefined,
+            appName: "AnySpend",
+            useGasFeeEstimations: true
+        }, children: _jsx(_Fragment, { children: children }) }));
+}

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

@@ -0,0 +1,6 @@
+import { RequestPermissionsModalProps } from "../../../../global-account/react/stores/useModalStore";
+/**
+ * Component for requesting permissions to access user accounts and contracts
+ * Allows users to approve session keys with specific permission settings
+ */
+export declare function RequestPermissions({ onSuccess, onError, chain, sessionKeyAddress, permissions }: RequestPermissionsModalProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useB3 } from "../../../../global-account/react/components/B3Provider";
+import { Button } from "../../../../global-account/react/components/custom/Button";
+import { PermissionItem } from "../../../../global-account/react/components/SignInWithB3/components/PermissionItem";
+import { useAddTWSessionKey } from "../../../../global-account/react/hooks/useAddTWSessionKey";
+import { useGetAllTWSigners } from "../../../../global-account/react/hooks/useGetAllTWSigners";
+import { debugB3React } from "../../../../shared/utils/debug";
+import { formatAddress } from "../../../../shared/utils/formatAddress";
+import { CreditCard, Eye } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import TimeAgo from "react-timeago";
+import { useActiveAccount } from "thirdweb/react";
+const debug = debugB3React("RequestPermissions");
+/**
+ * Component for requesting permissions to access user accounts and contracts
+ * Allows users to approve session keys with specific permission settings
+ */
+export function RequestPermissions({ onSuccess, onError, chain, sessionKeyAddress, permissions }) {
+    const [isApproving, setIsApproving] = useState(false);
+    const account = useActiveAccount();
+    const { defaultPermissions } = useB3();
+    const DEFAULT_PERMISSIONS = useMemo(() => permissions ?? defaultPermissions, [defaultPermissions, permissions]);
+    const { refetch: refetchSigners } = useGetAllTWSigners({
+        chain,
+        accountAddress: account?.address
+    });
+    const { newSessionKey } = useAddTWSessionKey({
+        onSuccess: transactionResult => {
+            console.log("@@transactionResult:", transactionResult);
+            onSuccess?.();
+        },
+        onError: error => {
+            console.error("@@error:", error);
+            onError?.(error);
+        },
+        refetchSigners: () => {
+            return refetchSigners();
+        },
+        chain
+    });
+    const handleApprove = useCallback(async () => {
+        debug("@@handleApprove");
+        try {
+            setIsApproving(true);
+            if (!sessionKeyAddress) {
+                throw new Error("Session key address is required");
+            }
+            console.log("@@sessionKeyAddress:", sessionKeyAddress);
+            await newSessionKey({
+                sessionKeyAddress: sessionKeyAddress,
+                approvedTargets: DEFAULT_PERMISSIONS.approvedTargets,
+                nativeTokenLimitPerTransaction: DEFAULT_PERMISSIONS.nativeTokenLimitPerTransaction,
+                permissionStartTimestamp: DEFAULT_PERMISSIONS.startDate,
+                permissionEndTimestamp: DEFAULT_PERMISSIONS.endDate
+            });
+        }
+        catch (error) {
+            console.error("@@error:", error);
+            onError?.(error);
+        }
+        finally {
+            setIsApproving(false);
+        }
+    }, [DEFAULT_PERMISSIONS, newSessionKey, onError, sessionKeyAddress]);
+    const formatDate = (date) => {
+        return new Intl.DateTimeFormat("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short"
+        }).format(date);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "mb-2 text-2xl font-bold", children: "Allow Access" }), _jsx("p", { className: "text-b3-react-muted-foreground opacity-70", children: "This app would like permission to:" })] }), _jsx(PermissionItem, { title: "Make transactions on your behalf", description: _jsxs("span", { children: ["Up to", " ", _jsxs("span", { className: "text-b3-react-primary font-medium", children: [DEFAULT_PERMISSIONS.nativeTokenLimitPerTransaction, " ETH"] }), " ", "per transaction"] }), icon: _jsx(CreditCard, { className: "h-5 w-5" }) }), _jsx(PermissionItem, { title: "View your account", description: "See your wallet address and balance", icon: _jsx(Eye, { className: "h-5 w-5" }) }), _jsxs("div", { className: "bg-b3-react-card rounded-lg border p-5 py-4", children: [_jsx("h3", { className: "mb-2 text-base font-medium", children: "Approved Contracts" }), _jsx("div", { className: "space-y-2", children: DEFAULT_PERMISSIONS.approvedTargets.map((target) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "bg-b3-react-background text-b3-react-muted-foreground rounded-md border px-3 py-2 font-mono text-sm", children: formatAddress(target) }), _jsx("span", { className: "text-b3-react-muted-foreground text-sm", children: "\u2022 Game Contract" })] }, target))) })] }), _jsxs("div", { className: "bg-b3-react-card rounded-lg border p-5 py-4", children: [_jsx("h3", { className: "mb-2 text-base font-medium", children: "Permission" }), _jsxs("div", { className: "space-y-1 text-sm", children: [_jsxs("div", { className: "text-b3-react-muted-foreground", children: [_jsx("span", { children: `Valid for ` }), _jsx("span", { children: _jsx(TimeAgo, { date: DEFAULT_PERMISSIONS.endDate, live: false, formatter: (value, unit) => {
+                                                if (unit === "year") {
+                                                    return "1 year";
+                                                }
+                                                return `${value} ${unit}${value !== 1 ? "s" : ""}`;
+                                            } }) }), _jsx("span", { className: "text-b3-react-muted-foreground ml-1 opacity-70", children: ` (until ${formatDate(DEFAULT_PERMISSIONS.endDate)})` })] }), DEFAULT_PERMISSIONS.startDate.getTime() > Date.now() + 5 * 60 * 1000 && (_jsxs("div", { className: "text-b3-react-muted-foreground", children: [_jsx("span", { children: `Starting: ` }), _jsx("span", { className: "ml-1", children: formatDate(DEFAULT_PERMISSIONS.startDate) })] }))] })] }), _jsxs("div", { className: "space-y-3 pt-4", children: [_jsx(Button, { onClick: handleApprove, disabled: isApproving, className: "w-full py-6 text-lg font-medium", children: isApproving ? "Approving..." : "Allow Access" }), _jsx("p", { className: "text-b3-react-muted-foreground text-center text-sm", children: "Revoke access anytime in settings" })] })] }));
+}

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

@@ -0,0 +1,11 @@
+import { PermissionsConfig } from "../../../../global-account/types/permissions";
+type RequestPermissionsButtonProps = {
+    chain: any;
+    sessionKeyAddress: `0x${string}`;
+    onSuccess?: () => void;
+    onError?: (error: Error) => Promise<void>;
+    permissions?: PermissionsConfig;
+    closeOnSuccess?: boolean;
+};
+export declare function RequestPermissionsButton({ chain, sessionKeyAddress, onSuccess, onError, permissions, closeOnSuccess }: RequestPermissionsButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/RequestPermissions/RequestPermissionsButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../../../global-account/react/components/custom/Button";
+import { useModalStore } from "../../../../global-account/react/stores/useModalStore";
+export function RequestPermissionsButton({ chain, sessionKeyAddress, onSuccess, onError, permissions, closeOnSuccess = true }) {
+    const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+    const handleClick = () => {
+        setB3ModalContentType({
+            type: "requestPermissions",
+            chain,
+            sessionKeyAddress,
+            onSuccess: () => {
+                onSuccess?.();
+                if (closeOnSuccess) {
+                    setB3ModalOpen(false);
+                }
+            },
+            onError,
+            permissions
+        });
+        setB3ModalOpen(true);
+    };
+    return (_jsxs(Button, { onClick: handleClick, style: { backgroundColor: "#3368ef" }, className: "flex items-center gap-2 font-medium text-white", children: [_jsx("span", { children: "Request Permissions" }), _jsx("img", { src: "https://cdn.b3.fun/b3_logo_white.svg", alt: "B3 Logo", className: "h-5 w-6" })] }));
+}

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

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { SignInWithB3ModalProps } from "../../../../global-account/react/stores/useModalStore";
+type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton"> & {
+    buttonText?: string | ReactNode;
+    loggedInButtonText?: string | ReactNode;
+    loadingButtonText?: string | ReactNode;
+    withLogo?: boolean;
+};
+export declare function SignInWithB3(props: SignInWithB3Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import useAuthentication from "../../../../global-account/react/hooks/useAuthentication";
+import { useEffect } from "react";
+import { useActiveAccount } from "thirdweb/react";
+import { useModalStore } from "../../../../global-account/react/stores/useModalStore";
+import { Button } from "../../../../global-account/react/components/custom/Button";
+import StyleRoot from "../../../../global-account/react/components/StyleRoot";
+export function SignInWithB3(props) {
+    const { setB3ModalOpen, setB3ModalContentType, setEcoSystemAccountAddress } = useModalStore();
+    const account = useActiveAccount();
+    const { isAuthenticating, isAuthenticated } = useAuthentication(props.partnerId, props.loginWithSiwe);
+    useEffect(() => {
+        if (account) {
+            setEcoSystemAccountAddress(account.address);
+        }
+    }, [account, setEcoSystemAccountAddress]);
+    const handleClick = () => {
+        setB3ModalContentType({
+            ...props,
+            type: "signInWithB3",
+            showBackButton: false
+        });
+        setB3ModalOpen(true);
+    };
+    const handleClickManageAccount = () => {
+        setB3ModalContentType({
+            ...props,
+            type: "manageAccount"
+        });
+        setB3ModalOpen(true);
+    };
+    if (isAuthenticated) {
+        return (_jsx(StyleRoot, { children: _jsxs(Button, { onClick: handleClickManageAccount, style: { backgroundColor: "#3368ef" }, className: "flex items-center gap-2 text-white", children: [props.withLogo !== false && (_jsx("img", { src: "https://cdn.b3.fun/b3_logo_white.svg", alt: "B3 Logo", className: "h-5 w-5" })), props.loggedInButtonText || "Manage Account"] }) }));
+    }
+    if (isAuthenticating) {
+        return (_jsx(StyleRoot, { children: _jsxs(Button, { disabled: true, style: { backgroundColor: "#3368ef" }, className: "flex items-center gap-2 text-white", children: [props.withLogo !== false && (_jsx("img", { src: "https://cdn.b3.fun/b3_logo_white.svg", alt: "B3 Logo", className: "h-5 w-5" })), props.loadingButtonText || "Signing in..."] }) }));
+    }
+    return (_jsx(StyleRoot, { children: _jsx(Button, { onClick: handleClick, style: { backgroundColor: "#3368ef" }, className: "flex items-center gap-2 font-medium text-white", children: props.buttonText ? (props.buttonText) : (_jsxs(_Fragment, { children: [_jsx("span", { children: "Sign in with" }), props.withLogo !== false && (_jsx("img", { src: "https://cdn.b3.fun/b3_logo_white.svg", alt: "B3 Logo", className: "h-5 w-6" }))] })) }) }));
+}

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

@@ -0,0 +1,6 @@
+import { SignInWithB3ModalProps } from "../../../../global-account/react/stores/useModalStore";
+/**
+ * Component that manages the authentication flow for Sign In With B3
+ * Handles different login providers, authentication steps, and session key management
+ */
+export declare function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin, loginWithSiwe, source, signersEnabled }: SignInWithB3ModalProps): import("react/jsx-runtime").JSX.Element | null;