@b3dotfun/sdk 0.0.88-alpha.8 → 0.0.88-alpha.9

package/dist/types/anyspend/types/gas.d.ts

@@ -0,0 +1,61 @@
+/** Gas level classification based on historical percentiles */
+export type GasLevel = "low" | "normal" | "elevated" | "high" | "spike";
+/** Gas prices in Gwei for different speed tiers */
+export interface GasPrices {
+    low: string;
+    standard: string;
+    fast: string;
+    instant?: string;
+}
+/** EIP-1559 specific gas data */
+export interface Eip1559Data {
+    baseFee: string;
+    maxPriorityFee: GasPrices;
+    maxFee: GasPrices;
+}
+/** Spike analysis comparing current gas to historical data */
+export interface GasSpikeAnalysis {
+    level: GasLevel;
+    percentile: number;
+    /** Ratio to 1h median (primary spike detection) */
+    vs1h: number;
+    /** Ratio to 4h median (short-term context) */
+    vs4h: number;
+    /** Ratio to 24h median (daily context) */
+    vs24h: number;
+    recommendation: string;
+}
+/** Full gas response from the gas oracle */
+export interface GasOracleResponse {
+    chainId: number;
+    chainName: string;
+    timestamp: string;
+    blockNumber?: number;
+    source: "blocknative" | "rpc";
+    gasPrice: GasPrices;
+    eip1559?: Eip1559Data;
+    analysis: GasSpikeAnalysis;
+    cached: boolean;
+    cacheAge?: number;
+}
+/** Simplified gas data for UI display */
+export interface GasPriceData {
+    chainId: number;
+    chainName: string;
+    /** Standard gas price in Gwei */
+    gasPriceGwei: string;
+    /** Base fee in Gwei (EIP-1559 chains) */
+    baseFeeGwei?: string;
+    /** Gas level classification */
+    level: GasLevel;
+    /** Whether gas is currently spiking (elevated, high, or spike) */
+    isSpike: boolean;
+    /** Human-readable recommendation */
+    recommendation: string;
+    /** Ratio to recent median (1 = normal, >1.5 = elevated) */
+    vsMedian: number;
+    /** Data source */
+    source: "blocknative" | "rpc";
+    /** Timestamp of the data */
+    timestamp: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.88-alpha.8",
+  "version": "0.0.88-alpha.9",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/constants/index.ts

@@ -4,6 +4,9 @@ import { components } from "../types/api";
 export const ANYSPEND_MAINNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://mainnet.anyspend.com";
 
 export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+export const GAS_ORACLE_BASE_URL = process.env.NEXT_PUBLIC_GAS_ORACLE_URL || "https://gas-oracle.sean-430.workers.dev";
+
+export const RELAY_ETH_ADDRESS = "0x0000000000000000000000000000000000000000";
 export const RELAY_SOL_ADDRESS = "11111111111111111111111111111111";
 
 export const RELAY_SOLANA_MAINNET_CHAIN_ID = 792703809;

package/src/anyspend/index.ts

@@ -1,5 +1,6 @@
 // Types
 export * from "./types/api";
+export * from "./types/gas";
 
 // Utils
 export * from "./utils/address";
@@ -14,6 +15,9 @@ export * from "./utils/validation";
 // Constants
 export * from "./constants";
 
+// Services
+export * from "./services/gas";
+
 // Abis
 export * from "./abis/abiUsdcBase";
 export * from "./abis/erc20Staking";

package/src/anyspend/react/components/AnySpend.tsx

@@ -14,6 +14,7 @@ import {
   useAnyspendCreateOrder,
   useAnyspendOrderAndTransactions,
   useAnyspendQuote,
+  useGasPrice,
   useGeoOnrampOptions,
 } from "@b3dotfun/sdk/anyspend/react";
 import {
@@ -55,6 +56,7 @@ import { CryptoPaySection } from "./common/CryptoPaySection";
 import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 import { FeeDetailPanel } from "./common/FeeDetailPanel";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
+import { GasIndicator } from "./common/GasIndicator";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
 import { PanelOnramp } from "./common/PanelOnramp";
@@ -557,6 +559,9 @@ function AnySpendInner({
   const { geoData, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support } =
     useGeoOnrampOptions(srcAmountOnRamp);
 
+  // Get gas price for source chain (where the user pays from)
+  const { gasPrice: gasPriceData, isLoading: isLoadingGas } = useGasPrice(selectedSrcChainId);
+
   // Helper function to map payment method to onramp vendor
   const getOnrampVendor = (paymentMethod: FiatPaymentMethod): "coinbase" | "stripe" | "stripe-web2" | undefined => {
     switch (paymentMethod) {
@@ -1243,6 +1248,11 @@ function AnySpendInner({
           )}
         </div>
 
+        {/* Gas indicator - show when source chain has gas data */}
+        {gasPriceData && !isLoadingGas && activeTab === "crypto" && (
+          <GasIndicator gasPrice={gasPriceData} className="mt-2 w-full" />
+        )}
+
         {/* Main button section */}
         <motion.div
           initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}

package/src/anyspend/react/components/AnySpendCustomExactIn.tsx

@@ -1,3 +1,4 @@
+import { useGasPrice } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
@@ -25,6 +26,7 @@ import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPay
 import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 import { FeeDetailPanel } from "./common/FeeDetailPanel";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
+import { GasIndicator } from "./common/GasIndicator";
 import { OrderDetails } from "./common/OrderDetails";
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
@@ -168,6 +170,9 @@ function AnySpendCustomExactInInner({
 
   const { connectedEOAWallet } = useAccountWallet();
   const setActiveWallet = useSetActiveWallet();
+
+  // Get gas price for source chain (where the user pays from)
+  const { gasPrice: gasPriceData, isLoading: isLoadingGas } = useGasPrice(selectedSrcChainId);
   const appliedPreferEoa = useRef(false);
 
   useEffect(() => {
@@ -438,6 +443,11 @@ function AnySpendCustomExactInInner({
         </ShinyButton>
       </motion.div>
 
+      {/* Gas indicator - show when source chain has gas data */}
+      {gasPriceData && !isLoadingGas && paymentType === "crypto" && (
+        <GasIndicator gasPrice={gasPriceData} className="mt-2 w-full" />
+      )}
+
       {mainFooter ? mainFooter : null}
     </div>
   );

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

@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { motion } from "motion/react";
+import type { GasPriceData } from "../../../types/gas";
+
+export interface GasIndicatorProps {
+  gasPrice: GasPriceData;
+  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 {
+  const gwei = parseFloat(gweiString);
+  if (gwei < 0.001) return "<0.001";
+  if (gwei < 1) return gwei.toFixed(3);
+  if (gwei < 10) return gwei.toFixed(2);
+  return gwei.toFixed(1);
+}
+
+export function GasIndicator({ gasPrice, className }: GasIndicatorProps) {
+  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,
+      )}
+    >
+      <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>
+    </motion.div>
+  );
+}

package/src/anyspend/react/hooks/index.ts

@@ -7,6 +7,7 @@ export * from "./useAnyspendQuote";
 export * from "./useAnyspendTokens";
 export * from "./useCoinbaseOnrampOptions";
 export * from "./useConnectedUserProfile";
+export * from "./useGasPrice";
 export * from "./useGeoOnrampOptions";
 export * from "./useGetGeo";
 export * from "./useHyperliquidTransfer";

package/src/anyspend/react/hooks/useGasPrice.ts

@@ -0,0 +1,70 @@
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { gasService, isGasOracleSupported } from "../../services/gas";
+import type { GasPriceData } from "../../types/gas";
+
+export interface UseGasPriceOptions {
+  /** Refetch interval in ms (default: 10000 = 10s) */
+  refetchInterval?: number;
+  /** Whether to enable the query (default: true if chainId is supported) */
+  enabled?: boolean;
+}
+
+export interface UseGasPriceResult {
+  /** Gas price data */
+  gasPrice: GasPriceData | undefined;
+  /** Whether the query is loading */
+  isLoading: boolean;
+  /** Whether there's an error */
+  isError: boolean;
+  /** Error object if any */
+  error: Error | null;
+  /** Whether gas is currently spiking */
+  isSpike: boolean;
+  /** Refetch function */
+  refetch: () => void;
+}
+
+/**
+ * React hook to fetch current gas price for a chain.
+ *
+ * @param chainId - The chain ID to fetch gas price for
+ * @param options - Optional configuration
+ *
+ * @example
+ * ```tsx
+ * const { gasPrice, isSpike, isLoading } = useGasPrice(8453); // Base
+ *
+ * if (isSpike) {
+ *   return <Warning>Gas prices are high: {gasPrice?.recommendation}</Warning>;
+ * }
+ * ```
+ */
+export function useGasPrice(chainId: number | undefined, options: UseGasPriceOptions = {}): UseGasPriceResult {
+  const { refetchInterval = 10000, enabled } = options;
+
+  const isSupported = chainId !== undefined && isGasOracleSupported(chainId);
+  const queryEnabled = enabled ?? isSupported;
+
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: ["gasPrice", chainId],
+    queryFn: () => gasService.fetch(chainId as number),
+    enabled: queryEnabled && chainId !== undefined,
+    refetchInterval,
+    staleTime: 5000, // Consider data fresh for 5s
+    retry: 2,
+    refetchOnWindowFocus: true,
+  });
+
+  return useMemo(
+    () => ({
+      gasPrice: data,
+      isLoading,
+      isError,
+      error: error as Error | null,
+      isSpike: data?.isSpike ?? false,
+      refetch,
+    }),
+    [data, isLoading, isError, error, refetch],
+  );
+}

package/src/anyspend/services/gas.test.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect } from "vitest";
+import { gasService, isGasOracleSupported } from "./gas";
+
+describe("gasService", () => {
+  it("should check supported chains", () => {
+    expect(isGasOracleSupported(8453)).toBe(true); // Base
+    expect(isGasOracleSupported(1)).toBe(true); // Ethereum
+    expect(isGasOracleSupported(999999)).toBe(false); // Unknown
+  });
+
+  it("should fetch gas price for Base", async () => {
+    const gas = await gasService.fetch(8453);
+
+    console.log("Gas data:", gas);
+
+    expect(gas.chainId).toBe(8453);
+    expect(gas.chainName).toBe("Base");
+    expect(gas.level).toMatch(/low|normal|elevated|high|spike/);
+    expect(typeof gas.gasPriceGwei).toBe("string");
+    expect(typeof gas.isSpike).toBe("boolean");
+  });
+
+  it("should fetch gas price for Ethereum", async () => {
+    const gas = await gasService.fetch(1);
+
+    console.log("ETH Gas:", gas);
+
+    expect(gas.chainId).toBe(1);
+    expect(gas.source).toBe("blocknative"); // ETH uses Blocknative
+  });
+});

package/src/anyspend/services/gas.ts

@@ -0,0 +1,73 @@
+import { GAS_ORACLE_BASE_URL } from "../constants";
+import type { GasOracleResponse, GasPriceData } from "../types/gas";
+
+/** Supported chain IDs for gas oracle */
+export const GAS_ORACLE_SUPPORTED_CHAINS = [
+  1, // Ethereum
+  137, // Polygon
+  42161, // Arbitrum
+  8453, // Base
+  56, // BSC
+  10, // Optimism
+  43114, // Avalanche
+  8333, // B3
+  2741, // Abstract
+  4689, // IoTeX
+  3338, // Peaq
+  1329, // Sei
+] as const;
+
+export type GasOracleSupportedChainId = (typeof GAS_ORACLE_SUPPORTED_CHAINS)[number];
+
+/** Check if a chain is supported by the gas oracle */
+export function isGasOracleSupported(chainId: number): chainId is GasOracleSupportedChainId {
+  return GAS_ORACLE_SUPPORTED_CHAINS.includes(chainId as GasOracleSupportedChainId);
+}
+
+/** Fetch gas price data from the gas oracle */
+export async function fetchGasPrice(chainId: number): Promise<GasOracleResponse> {
+  const response = await fetch(`${GAS_ORACLE_BASE_URL}/gas/${chainId}`);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch gas price for chain ${chainId}: ${response.status}`);
+  }
+
+  return response.json();
+}
+
+/** Transform raw oracle response to simplified UI data */
+export function toGasPriceData(response: GasOracleResponse): GasPriceData {
+  const { analysis } = response;
+  const isSpike = analysis.level === "elevated" || analysis.level === "high" || analysis.level === "spike";
+
+  return {
+    chainId: response.chainId,
+    chainName: response.chainName,
+    gasPriceGwei: response.gasPrice.standard,
+    baseFeeGwei: response.eip1559?.baseFee,
+    level: analysis.level,
+    isSpike,
+    recommendation: analysis.recommendation,
+    vsMedian: analysis.vs1h, // Use 1h as primary comparison
+    source: response.source,
+    timestamp: response.timestamp,
+  };
+}
+
+/** Gas service for fetching and transforming gas data */
+export const gasService = {
+  /** Fetch raw gas oracle response */
+  fetchRaw: fetchGasPrice,
+
+  /** Fetch and transform to UI-friendly format */
+  fetch: async (chainId: number): Promise<GasPriceData> => {
+    const response = await fetchGasPrice(chainId);
+    return toGasPriceData(response);
+  },
+
+  /** Check if chain is supported */
+  isSupported: isGasOracleSupported,
+
+  /** List of supported chain IDs */
+  supportedChains: GAS_ORACLE_SUPPORTED_CHAINS,
+};

package/src/anyspend/types/gas.ts

@@ -0,0 +1,66 @@
+/** Gas level classification based on historical percentiles */
+export type GasLevel = "low" | "normal" | "elevated" | "high" | "spike";
+
+/** Gas prices in Gwei for different speed tiers */
+export interface GasPrices {
+  low: string;
+  standard: string;
+  fast: string;
+  instant?: string;
+}
+
+/** EIP-1559 specific gas data */
+export interface Eip1559Data {
+  baseFee: string;
+  maxPriorityFee: GasPrices;
+  maxFee: GasPrices;
+}
+
+/** Spike analysis comparing current gas to historical data */
+export interface GasSpikeAnalysis {
+  level: GasLevel;
+  percentile: number;
+  /** Ratio to 1h median (primary spike detection) */
+  vs1h: number;
+  /** Ratio to 4h median (short-term context) */
+  vs4h: number;
+  /** Ratio to 24h median (daily context) */
+  vs24h: number;
+  recommendation: string;
+}
+
+/** Full gas response from the gas oracle */
+export interface GasOracleResponse {
+  chainId: number;
+  chainName: string;
+  timestamp: string;
+  blockNumber?: number;
+  source: "blocknative" | "rpc";
+  gasPrice: GasPrices;
+  eip1559?: Eip1559Data;
+  analysis: GasSpikeAnalysis;
+  cached: boolean;
+  cacheAge?: number;
+}
+
+/** Simplified gas data for UI display */
+export interface GasPriceData {
+  chainId: number;
+  chainName: string;
+  /** Standard gas price in Gwei */
+  gasPriceGwei: string;
+  /** Base fee in Gwei (EIP-1559 chains) */
+  baseFeeGwei?: string;
+  /** Gas level classification */
+  level: GasLevel;
+  /** Whether gas is currently spiking (elevated, high, or spike) */
+  isSpike: boolean;
+  /** Human-readable recommendation */
+  recommendation: string;
+  /** Ratio to recent median (1 = normal, >1.5 = elevated) */
+  vsMedian: number;
+  /** Data source */
+  source: "blocknative" | "rpc";
+  /** Timestamp of the data */
+  timestamp: string;
+}