@b3dotfun/sdk 0.0.1-alpha.1

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

@@ -0,0 +1,201 @@
+import { User } from "@b3dotfun/sdk/global-account/types/b3-api.types";
+import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
+import { supportedChains } from "@b3dotfun/sdk/shared/constants/chains/supported";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { Toaster } from "sonner";
+import { ThirdwebProvider, useActiveAccount, useConnectedWallets, useSetActiveWallet } from "thirdweb/react";
+import { Account, Wallet } from "thirdweb/wallets";
+import { createConfig, http, WagmiProvider } from "wagmi";
+import { RelayKitProviderWrapper } from "./RelayKitProviderWrapper";
+import StyleRoot from "./StyleRoot";
+
+import "@reservoir0x/relay-kit-ui/styles.css";
+
+/**
+ * Default permissions configuration for B3 provider
+ */
+const DEFAULT_PERMISSIONS = {
+  approvedTargets: ["0xa8e42121e318e3D3BeD7f5969AF6D360045317DD"], // Example contract
+  nativeTokenLimitPerTransaction: 0.1, // in ETH
+  startDate: new Date(),
+  endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365) // 1 year from now
+};
+
+export const wagmiConfig = createConfig({
+  chains: [supportedChains[0], ...supportedChains.slice(1)],
+  transports: Object.fromEntries(supportedChains.map(chain => [chain.id, http()])) as any
+});
+
+/**
+ * Context type for B3Provider
+ */
+export interface B3ContextType {
+  account?: Account;
+  automaticallySetFirstEoa: boolean;
+  user?: User;
+  setAccount: (account: Account) => void;
+  setWallet: (wallet: Wallet) => void;
+  wallet?: Wallet;
+  setUser: (user?: User) => void;
+  initialized: boolean;
+  ready: boolean;
+  environment?: "development" | "production";
+  defaultPermissions?: PermissionsConfig;
+  theme: "light" | "dark";
+}
+
+/**
+ * Context for B3 provider
+ */
+export const B3Context = createContext<B3ContextType>({
+  account: undefined,
+  automaticallySetFirstEoa: false,
+  user: undefined,
+  setAccount: () => {},
+  setWallet: () => {},
+  wallet: undefined,
+  setUser: () => {},
+  initialized: false,
+  ready: false,
+  environment: "development",
+  theme: "light"
+});
+
+/**
+ * Hook to access the B3 context
+ * @throws Error if used outside a B3Provider
+ */
+export function useB3() {
+  const context = useContext(B3Context);
+
+  if (!context.initialized) {
+    throw new Error("useB3 must be used within a B3Provider");
+  }
+
+  // Return a stable reference
+  return useMemo(() => context, [context]);
+}
+
+// Create queryClient instance
+const queryClient = new QueryClient();
+
+/**
+ * Main B3Provider component
+ */
+export function B3Provider({
+  isMainnetAnySpend = true,
+  theme = "light",
+  children,
+  accountOverride,
+  environment,
+  automaticallySetFirstEoa
+}: {
+  isMainnetAnySpend?: boolean;
+  theme: "light" | "dark";
+  children: React.ReactNode;
+  accountOverride?: Account;
+  environment: B3ContextType["environment"];
+  automaticallySetFirstEoa?: boolean;
+}) {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <ThirdwebProvider>
+          <InnerProvider
+            accountOverride={accountOverride}
+            environment={environment}
+            theme={theme}
+            automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+          >
+            <RelayKitProviderWrapper isMainnet={isMainnetAnySpend}>
+              {children}
+              {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
+              <StyleRoot id="b3-root" />
+              {/* For the modal https://github.com/b3-fun/b3-mono/blob/main/packages/react/src/components/ui/dialog.tsx#L46 */}
+              <Toaster theme={theme} />
+            </RelayKitProviderWrapper>
+          </InnerProvider>
+        </ThirdwebProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+
+/**
+ * Inner provider component that provides the actual B3Context
+ */
+export function InnerProvider({
+  children,
+  accountOverride,
+  environment,
+  defaultPermissions = DEFAULT_PERMISSIONS,
+  automaticallySetFirstEoa,
+  theme = "light"
+}: {
+  children: React.ReactNode;
+  accountOverride?: Account;
+  environment: B3ContextType["environment"];
+  defaultPermissions?: PermissionsConfig;
+  automaticallySetFirstEoa: boolean;
+  theme: "light" | "dark";
+}) {
+  const activeAccount = useActiveAccount();
+  const [manuallySetAccount, setManuallySetAccount] = useState<Account | undefined>(undefined);
+  const [manuallySelectedWallet, setManuallySelectedWallet] = useState<Wallet | undefined>(undefined);
+  const wallets = useConnectedWallets();
+  const setActiveWallet = useSetActiveWallet();
+
+  const [user, setUser] = useState<User | undefined>(undefined);
+
+  // Use given accountOverride or activeAccount from thirdweb
+  const effectiveAccount = accountOverride || manuallySetAccount || activeAccount;
+
+  const setAccount = (account: Account) => {
+    setManuallySetAccount(account);
+  };
+
+  const setWallet = (wallet: Wallet) => {
+    setManuallySelectedWallet(wallet);
+    const account = wallet.getAccount();
+    setManuallySetAccount(account);
+    console.log("@@gio:setWallet", wallet.id, account?.address);
+    setActiveWallet(wallet);
+  };
+
+  const setFirstEoa = () => {
+    const firstEoa = wallets.find(wallet => ["com.coinbase.wallet", "io.metamask"].includes(wallet.id));
+    if (firstEoa) {
+      setWallet(firstEoa);
+    }
+  };
+
+  useEffect(() => {
+    if (automaticallySetFirstEoa) {
+      console.log("@@gio:wallets", wallets);
+      setFirstEoa();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [automaticallySetFirstEoa, wallets]);
+
+  return (
+    <B3Context.Provider
+      value={{
+        account: effectiveAccount,
+        setAccount,
+        setWallet,
+        wallet: manuallySelectedWallet,
+        user,
+        setUser,
+        initialized: true,
+        ready: !!effectiveAccount,
+        automaticallySetFirstEoa,
+        environment,
+        defaultPermissions,
+        theme
+      }}
+    >
+      {children}
+    </B3Context.Provider>
+  );
+}

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

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

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

@@ -0,0 +1,83 @@
+import { Button } from "@b3dotfun/sdk/global-account/react/components/custom/Button";
+import { useClaim } from "@b3dotfun/sdk/global-account/react/hooks/useClaim";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import type { JSX } from "react";
+import { Chain } from "thirdweb";
+import { useActiveAccount } from "thirdweb/react";
+import { Account, smartWallet } 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 function MintButton({
+  contractAddress,
+  quantity = 1,
+  chain,
+  account,
+  to,
+  tokenId,
+  className,
+  children = "Mint",
+  onSuccess,
+  onError
+}: MintButtonProps) {
+  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 as Error);
+      throw error;
+    }
+  };
+
+  const buttonText = isMinting ? "Minting..." : String(children);
+
+  return (
+    <Button onClick={handleMint} disabled={isMinting} className={className}>
+      {buttonText}
+    </Button>
+  );
+}

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

@@ -0,0 +1,138 @@
+// "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;