@b3dotfun/sdk 0.1.0-alpha.0 → 0.1.0-alpha.2

package/src/anyspend/react/components/common/GasIndicator.tsx

@@ -9,23 +9,7 @@ export interface GasIndicatorProps {
   className?: string;
 }
 
-const LEVEL_LABELS: Record<GasPriceData["level"], string> = {
-  low: "Low",
-  normal: "Normal",
-  elevated: "Elevated",
-  high: "High",
-  spike: "Spike",
-};
-
-const LEVEL_STYLES: Record<GasPriceData["level"], string> = {
-  low: "bg-green-500/20 text-green-500",
-  normal: "bg-as-surface-tertiary text-as-secondary",
-  elevated: "bg-yellow-500/20 text-yellow-600",
-  high: "bg-orange-500/20 text-orange-500",
-  spike: "bg-red-500/20 text-red-500",
-};
-
-function formatGasPrice(gweiString: string): string {
+function formatGwei(gweiString: string): string {
   const gwei = parseFloat(gweiString);
   if (gwei < 0.001) return "<0.001";
   if (gwei < 1) return gwei.toFixed(3);
@@ -34,26 +18,23 @@ function formatGasPrice(gweiString: string): string {
 }
 
 export function GasIndicator({ gasPrice, className }: GasIndicatorProps) {
+  // Only show when gas is high or spike
+  if (!["high", "spike"].includes(gasPrice.level)) {
+    return null;
+  }
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.2 }}
-      className={cn(
-        "flex items-center justify-between rounded-lg px-3 py-2",
-        gasPrice.isSpike ? "bg-yellow-500/10" : "bg-as-surface-secondary",
-        className,
-      )}
+      className={cn("flex flex-col gap-1 rounded-lg bg-orange-500/10 px-3 py-2", className)}
     >
-      <div className="flex items-center gap-2">
-        <span className="text-as-secondary text-xs">Gas on {gasPrice.chainName}</span>
-      </div>
-      <div className="flex items-center gap-2">
-        <span className={cn("rounded px-1.5 py-0.5 text-xs font-medium", LEVEL_STYLES[gasPrice.level])}>
-          {LEVEL_LABELS[gasPrice.level]}
-        </span>
-        <span className="text-as-primary text-xs font-medium">{formatGasPrice(gasPrice.gasPriceGwei)} Gwei</span>
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-orange-500">Gas is high - transaction may fail or cost more</span>
+        <span className="text-xs font-medium text-orange-500">{formatGwei(gasPrice.gasPriceGwei)} Gwei</span>
       </div>
+      <span className="text-as-secondary text-xs">Consider swapping later for better rates</span>
     </motion.div>
   );
 }

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

@@ -0,0 +1,84 @@
+import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
+import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
+import { createContext, useContext } from "react";
+import { Account } from "thirdweb/wallets";
+import { ClientType } from "../../../client-manager";
+
+/**
+ * Default permissions configuration for B3 provider
+ */
+const DEFAULT_PERMISSIONS: PermissionsConfig = {
+  approvedTargets: ["0xa8e42121e318e3D3BeD7f5969AF6D360045317DD"],
+  nativeTokenLimitPerTransaction: 0.1,
+  startDate: new Date(),
+  endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
+};
+
+export interface B3ConfigContextType {
+  accountOverride?: Account;
+  automaticallySetFirstEoa: boolean;
+  environment: "development" | "production";
+  defaultPermissions: PermissionsConfig;
+  theme: "light" | "dark";
+  clientType: ClientType;
+  partnerId: string;
+  stripePublishableKey?: string;
+  createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+  enableTurnkey: boolean;
+}
+
+const B3ConfigContext = createContext<B3ConfigContextType | null>(null);
+
+export function B3ConfigProvider({
+  children,
+  accountOverride,
+  environment = "development",
+  defaultPermissions = DEFAULT_PERMISSIONS,
+  automaticallySetFirstEoa = false,
+  theme = "light",
+  clientType = "rest",
+  partnerId,
+  stripePublishableKey,
+  createClientReferenceId,
+  enableTurnkey = false,
+}: {
+  children: React.ReactNode;
+  accountOverride?: Account;
+  environment?: "development" | "production";
+  defaultPermissions?: PermissionsConfig;
+  automaticallySetFirstEoa?: boolean;
+  theme?: "light" | "dark";
+  clientType?: ClientType;
+  partnerId: string;
+  stripePublishableKey?: string;
+  createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+  enableTurnkey?: boolean;
+}) {
+  return (
+    <B3ConfigContext.Provider
+      value={{
+        accountOverride,
+        environment,
+        defaultPermissions,
+        automaticallySetFirstEoa,
+        theme,
+        clientType,
+        partnerId,
+        stripePublishableKey,
+        createClientReferenceId,
+        enableTurnkey,
+      }}
+    >
+      {children}
+    </B3ConfigContext.Provider>
+  );
+}
+
+export function useB3Config(): B3ConfigContextType {
+  const context = useContext(B3ConfigContext);
+  if (!context) {
+    throw new Error("useB3Config must be used within a B3ConfigProvider");
+  }
+  return context;
+}

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

@@ -1,15 +1,14 @@
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useEffect } from "react";
 import { ThirdwebProvider } from "thirdweb/react";
 import { Account, Wallet } from "thirdweb/wallets";
 
 import { ClientType } from "../../../client-manager";
 
 import { WagmiProvider } from "wagmi";
-import { useB3ConfigStore } from "../../stores/configStore";
 import { createWagmiConfig } from "../../utils/createWagmiConfig";
 import AuthenticationProvider from "./AuthenticationProvider";
+import { B3ConfigProvider } from "./B3ConfigProvider";
 import { LocalSDKProvider } from "./LocalSDKProvider";
 
 // Create queryClient instance
@@ -39,28 +38,23 @@ export function B3Provider({
   onConnect?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
   defaultPermissions?: PermissionsConfig;
 }) {
-  const setConfig = useB3ConfigStore(state => state.setConfig);
-
-  // Initialize config store on mount - props are static and never change
-  useEffect(() => {
-    setConfig({
-      accountOverride,
-      environment: environment ?? "development",
-      automaticallySetFirstEoa: false,
-      theme,
-      clientType,
-      partnerId,
-      defaultPermissions,
-    });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
   return (
     <ThirdwebProvider>
       <LocalSDKProvider onConnectCallback={onConnect}>
-        {/* <RelayKitProviderWrapper> */}
-        {children}
-        <AuthenticationProvider partnerId={partnerId} automaticallySetFirstEoa={false} />
-        {/* </RelayKitProviderWrapper> */}
+        <B3ConfigProvider
+          accountOverride={accountOverride}
+          environment={environment}
+          automaticallySetFirstEoa={false}
+          theme={theme}
+          clientType={clientType}
+          partnerId={partnerId}
+          defaultPermissions={defaultPermissions}
+        >
+          {/* <RelayKitProviderWrapper> */}
+          {children}
+          <AuthenticationProvider partnerId={partnerId} automaticallySetFirstEoa={false} />
+          {/* </RelayKitProviderWrapper> */}
+        </B3ConfigProvider>
       </LocalSDKProvider>
     </ThirdwebProvider>
   );
@@ -88,25 +82,23 @@ export function InnerProvider({
   partnerId: string;
   rpcUrls?: Record<number, string>;
 }) {
-  const setConfig = useB3ConfigStore(state => state.setConfig);
   const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls });
 
-  // Initialize config store on mount - props are static and never change
-  useEffect(() => {
-    setConfig({
-      accountOverride,
-      environment: environment ?? "development",
-      automaticallySetFirstEoa: false,
-      theme,
-      clientType,
-      partnerId,
-      defaultPermissions,
-    });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
   return (
     <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        <B3ConfigProvider
+          accountOverride={accountOverride}
+          environment={environment}
+          automaticallySetFirstEoa={false}
+          theme={theme}
+          clientType={clientType}
+          partnerId={partnerId}
+          defaultPermissions={defaultPermissions}
+        >
+          {children}
+        </B3ConfigProvider>
+      </QueryClientProvider>
     </WagmiProvider>
   );
 }

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

@@ -11,10 +11,10 @@ import { ThirdwebProvider } from "thirdweb/react";
 import { Account, Wallet } from "thirdweb/wallets";
 import { CreateConnectorFn, WagmiProvider } from "wagmi";
 import { ClientType, setClientType } from "../../../client-manager";
-import { useB3ConfigStore } from "../../stores/configStore";
 import { StyleRoot } from "../StyleRoot";
 import { setToastContext, ToastProvider, useToastContext } from "../Toast/index";
 import AuthenticationProvider from "./AuthenticationProvider";
+import { B3ConfigProvider } from "./B3ConfigProvider";
 import { LocalSDKProvider } from "./LocalSDKProvider";
 
 // Create queryClient instance
@@ -65,36 +65,6 @@ export function B3Provider({
   enableTurnkey?: boolean;
   defaultPermissions?: PermissionsConfig;
 }) {
-  const setConfig = useB3ConfigStore(state => state.setConfig);
-
-  // Initialize config store on mount
-  useEffect(() => {
-    setConfig({
-      accountOverride,
-      environment: environment ?? "development",
-      automaticallySetFirstEoa: !!automaticallySetFirstEoa,
-      theme,
-      clientType,
-      partnerId,
-      stripePublishableKey,
-      createClientReferenceId,
-      enableTurnkey,
-      defaultPermissions,
-    });
-  }, [
-    accountOverride,
-    environment,
-    automaticallySetFirstEoa,
-    theme,
-    clientType,
-    partnerId,
-    stripePublishableKey,
-    createClientReferenceId,
-    enableTurnkey,
-    defaultPermissions,
-    setConfig,
-  ]); // eslint-disable-line react-hooks/exhaustive-deps
-
   // Initialize Google Analytics on mount
   useEffect(() => {
     loadGA4Script();
@@ -117,13 +87,26 @@ export function B3Provider({
           <TooltipProvider>
             <ToastProvider>
               <LocalSDKProvider onConnectCallback={onConnect}>
-                <ToastContextConnector />
-                <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
-                  {children}
-                  {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
-                  <StyleRoot id="b3-root" />
-                </RelayKitProviderWrapper>
-                <AuthenticationProvider partnerId={partnerId} automaticallySetFirstEoa={!!automaticallySetFirstEoa} />
+                <B3ConfigProvider
+                  accountOverride={accountOverride}
+                  environment={environment}
+                  automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+                  theme={theme}
+                  clientType={clientType}
+                  partnerId={partnerId}
+                  stripePublishableKey={stripePublishableKey}
+                  createClientReferenceId={createClientReferenceId}
+                  enableTurnkey={enableTurnkey}
+                  defaultPermissions={defaultPermissions}
+                >
+                  <ToastContextConnector />
+                  <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
+                    {children}
+                    {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
+                    <StyleRoot id="b3-root" />
+                  </RelayKitProviderWrapper>
+                  <AuthenticationProvider partnerId={partnerId} automaticallySetFirstEoa={!!automaticallySetFirstEoa} />
+                </B3ConfigProvider>
               </LocalSDKProvider>
             </ToastProvider>
           </TooltipProvider>

package/src/global-account/react/components/B3Provider/useB3Config.ts

@@ -1,21 +1 @@
-import { useB3ConfigStore } from "../../stores/configStore";
-
-/**
- * Hook to access B3 configuration
- * Returns all config values from the Zustand store
- * Since config is static (set once at initialization), destructuring is fine here
- */
-export const useB3Config = () => {
-  return useB3ConfigStore(state => ({
-    automaticallySetFirstEoa: state.automaticallySetFirstEoa,
-    environment: state.environment,
-    theme: state.theme,
-    clientType: state.clientType,
-    partnerId: state.partnerId,
-    createClientReferenceId: state.createClientReferenceId,
-    enableTurnkey: state.enableTurnkey,
-    stripePublishableKey: state.stripePublishableKey,
-    defaultPermissions: state.defaultPermissions,
-    accountOverride: state.accountOverride,
-  }));
-};
+export { useB3Config } from "./B3ConfigProvider";

package/src/global-account/react/stores/index.ts

@@ -1,5 +1,4 @@
 export { useAuthStore } from "./useAuthStore";
-export { useB3ConfigStore } from "./configStore";
 export { useModalStore } from "./useModalStore";
 export { useRecentAddressesStore } from "./useRecentAddressesStore";
 

package/dist/cjs/global-account/react/stores/configStore.d.ts

@@ -1,24 +0,0 @@
-import { CreateOnrampOrderParams } from "../../../anyspend/react/hooks/useAnyspendCreateOnrampOrder";
-import { CreateOrderParams } from "../../../anyspend/react/hooks/useAnyspendCreateOrder";
-import { PermissionsConfig } from "../../../global-account/types/permissions";
-import { Account } from "thirdweb/wallets";
-import { ClientType } from "../../client-manager";
-interface ConfigStore {
-    accountOverride?: Account;
-    automaticallySetFirstEoa: boolean;
-    environment: "development" | "production";
-    defaultPermissions: PermissionsConfig;
-    theme: "light" | "dark";
-    clientType: ClientType;
-    partnerId: string;
-    stripePublishableKey?: string;
-    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
-    enableTurnkey: boolean;
-    setConfig: (config: Partial<Omit<ConfigStore, "setConfig">>) => void;
-}
-/**
- * Zustand store for B3 configuration
- * NOT persisted - these are developer-set configuration values
- */
-export declare const useB3ConfigStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ConfigStore>>;
-export {};

package/dist/cjs/global-account/react/stores/configStore.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useB3ConfigStore = void 0;
-const zustand_1 = require("zustand");
-/**
- * Default permissions configuration for B3 provider
- */
-const DEFAULT_PERMISSIONS = {
-    approvedTargets: ["0xa8e42121e318e3D3BeD7f5969AF6D360045317DD"],
-    nativeTokenLimitPerTransaction: 0.1,
-    startDate: new Date(),
-    endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
-};
-/**
- * Zustand store for B3 configuration
- * NOT persisted - these are developer-set configuration values
- */
-exports.useB3ConfigStore = (0, zustand_1.create)(set => ({
-    accountOverride: undefined,
-    automaticallySetFirstEoa: false,
-    environment: "development",
-    defaultPermissions: DEFAULT_PERMISSIONS,
-    theme: "light",
-    clientType: "rest",
-    partnerId: "",
-    stripePublishableKey: undefined,
-    createClientReferenceId: undefined,
-    enableTurnkey: false,
-    setConfig: config => set(state => ({ ...state, ...config })),
-}));

package/dist/esm/global-account/react/stores/configStore.d.ts

@@ -1,24 +0,0 @@
-import { CreateOnrampOrderParams } from "../../../anyspend/react/hooks/useAnyspendCreateOnrampOrder";
-import { CreateOrderParams } from "../../../anyspend/react/hooks/useAnyspendCreateOrder";
-import { PermissionsConfig } from "../../../global-account/types/permissions";
-import { Account } from "thirdweb/wallets";
-import { ClientType } from "../../client-manager";
-interface ConfigStore {
-    accountOverride?: Account;
-    automaticallySetFirstEoa: boolean;
-    environment: "development" | "production";
-    defaultPermissions: PermissionsConfig;
-    theme: "light" | "dark";
-    clientType: ClientType;
-    partnerId: string;
-    stripePublishableKey?: string;
-    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
-    enableTurnkey: boolean;
-    setConfig: (config: Partial<Omit<ConfigStore, "setConfig">>) => void;
-}
-/**
- * Zustand store for B3 configuration
- * NOT persisted - these are developer-set configuration values
- */
-export declare const useB3ConfigStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ConfigStore>>;
-export {};

package/dist/esm/global-account/react/stores/configStore.js

@@ -1,27 +0,0 @@
-import { create } from "zustand";
-/**
- * Default permissions configuration for B3 provider
- */
-const DEFAULT_PERMISSIONS = {
-    approvedTargets: ["0xa8e42121e318e3D3BeD7f5969AF6D360045317DD"],
-    nativeTokenLimitPerTransaction: 0.1,
-    startDate: new Date(),
-    endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
-};
-/**
- * Zustand store for B3 configuration
- * NOT persisted - these are developer-set configuration values
- */
-export const useB3ConfigStore = create(set => ({
-    accountOverride: undefined,
-    automaticallySetFirstEoa: false,
-    environment: "development",
-    defaultPermissions: DEFAULT_PERMISSIONS,
-    theme: "light",
-    clientType: "rest",
-    partnerId: "",
-    stripePublishableKey: undefined,
-    createClientReferenceId: undefined,
-    enableTurnkey: false,
-    setConfig: config => set(state => ({ ...state, ...config })),
-}));

package/dist/types/global-account/react/stores/configStore.d.ts

@@ -1,24 +0,0 @@
-import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
-import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
-import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
-import { Account } from "thirdweb/wallets";
-import { ClientType } from "../../client-manager";
-interface ConfigStore {
-    accountOverride?: Account;
-    automaticallySetFirstEoa: boolean;
-    environment: "development" | "production";
-    defaultPermissions: PermissionsConfig;
-    theme: "light" | "dark";
-    clientType: ClientType;
-    partnerId: string;
-    stripePublishableKey?: string;
-    createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
-    enableTurnkey: boolean;
-    setConfig: (config: Partial<Omit<ConfigStore, "setConfig">>) => void;
-}
-/**
- * Zustand store for B3 configuration
- * NOT persisted - these are developer-set configuration values
- */
-export declare const useB3ConfigStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ConfigStore>>;
-export {};

package/src/global-account/react/stores/configStore.ts

@@ -1,51 +0,0 @@
-import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
-import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
-import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
-import { Account } from "thirdweb/wallets";
-import { create } from "zustand";
-import { ClientType } from "../../client-manager";
-
-/**
- * Default permissions configuration for B3 provider
- */
-const DEFAULT_PERMISSIONS: PermissionsConfig = {
-  approvedTargets: ["0xa8e42121e318e3D3BeD7f5969AF6D360045317DD"],
-  nativeTokenLimitPerTransaction: 0.1,
-  startDate: new Date(),
-  endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
-};
-
-interface ConfigStore {
-  accountOverride?: Account;
-  automaticallySetFirstEoa: boolean;
-  environment: "development" | "production";
-  defaultPermissions: PermissionsConfig;
-  theme: "light" | "dark";
-  clientType: ClientType;
-  partnerId: string;
-  stripePublishableKey?: string;
-  createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
-  enableTurnkey: boolean;
-
-  // Actions
-  setConfig: (config: Partial<Omit<ConfigStore, "setConfig">>) => void;
-}
-
-/**
- * Zustand store for B3 configuration
- * NOT persisted - these are developer-set configuration values
- */
-export const useB3ConfigStore = create<ConfigStore>(set => ({
-  accountOverride: undefined,
-  automaticallySetFirstEoa: false,
-  environment: "development",
-  defaultPermissions: DEFAULT_PERMISSIONS,
-  theme: "light",
-  clientType: "rest",
-  partnerId: "",
-  stripePublishableKey: undefined,
-  createClientReferenceId: undefined,
-  enableTurnkey: false,
-
-  setConfig: config => set(state => ({ ...state, ...config })),
-}));